duoyun-ui/elements/image-preview.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunImagePreviewElement_instances, _DuoyunImagePreviewElement_status_get, _DuoyunImagePreviewElement_color_get, _DuoyunImagePreviewElement_icon_get;
import { adoptedStyle, customElement, attribute, property, numattribute } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
import { theme, getSemanticColor } from '../lib/theme';
import { compressionImage } from '../lib/image';
import { icons } from '../lib/icons';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import './use';
const style = createCSSSheet(css `
  :host {
    --color: initial;
    position: relative;
    aspect-ratio: 1;
    background: conic-gradient(
        transparent 0.25turn,
        #d3cfcf 0.25turn 0.5turn,
        transparent 0.5turn 0.75turn,
        #d3cfcf 0.75turn
      )
      top left / 1.2em 1.2em repeat;
  }
  :host,
  .mask {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :host(:not(:hover)) .mask:not(.status) {
    display: none;
  }
  .preview,
  .mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .desc {
    position: relative;
    color: ${theme.backgroundColor};
    background: var(--color);
    border-radius: 10em;
    padding: 0 0.5em;
    line-height: 1.5;
  }
  .mask {
    background-color: rgba(0, 0, 0, calc(${theme.maskAlpha} + 0.4));
  }
  .icon {
    width: 1.5em;
    color: ${theme.backgroundColor};
  }
  .mask:not(.status) .icon {
    cursor: pointer;
  }
  .status .icon {
    color: var(--color);
  }
`);
/**
 * @customElement dy-image-preview
 */
let DuoyunImagePreviewElement = class DuoyunImagePreviewElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunImagePreviewElement_instances.add(this);
        this.state = {
            previewUrl: '',
        };
        this.mounted = () => {
            const dimension = 64 * window.devicePixelRatio;
            this.effect(async () => {
                if (this.file) {
                    const previewUrl = await compressionImage(this.file, { dimension: { width: dimension, height: dimension } }, { type: 'url', aspectRatio: 1 });
                    this.setState({ previewUrl });
                }
            }, () => [this.file]);
        };
        this.render = () => {
            if (!this.file)
                return html ``;
            const { previewUrl } = this.state;
            const color = this.progress ? theme.informativeColor : __classPrivateFieldGet(this, _DuoyunImagePreviewElement_instances, "a", _DuoyunImagePreviewElement_color_get);
            return html `
      ${color
                ? html `
            <style>
              :host {
                --color: ${color} !important;
              }
            </style>
          `
                : ''}
      ${previewUrl ? html `<img class="preview" alt=${this.file.name} src=${previewUrl}></img>` : ''}
      ${this.progress
                ? html `
            <div
              class="mask status"
              style=${styleMap({
                    opacity: '0.4',
                    background: `linear-gradient(to top, ${color} ${this.progress}%, transparent ${this.progress}%);`,
                })}
            ></div>
            <div class="desc" role="progressbar">${Math.floor(this.progress)}%</div>
          `
                : __classPrivateFieldGet(this, _DuoyunImagePreviewElement_instances, "a", _DuoyunImagePreviewElement_status_get) !== 'default'
                    ? html `
              <div class="mask status">
                <dy-use class="icon" .element=${__classPrivateFieldGet(this, _DuoyunImagePreviewElement_instances, "a", _DuoyunImagePreviewElement_icon_get)}></dy-use>
              </div>
            `
                    : this.actions
                        ? html `
                <div class="mask">
                  ${this.actions.map(({ icon, handle }) => html `
                      <dy-use
                        class="icon"
                        .element=${icon}
                        role="button"
                        tabindex="0"
                        @keydown=${commonHandle}
                        @click=${() => handle()}
                      ></dy-use>
                    `)}
                </div>
              `
                        : ''}
    `;
        };
    }
};
_DuoyunImagePreviewElement_instances = new WeakSet(), _DuoyunImagePreviewElement_status_get = function _DuoyunImagePreviewElement_status_get() {
    return this.status || 'default';
}, _DuoyunImagePreviewElement_color_get = function _DuoyunImagePreviewElement_color_get() {
    return getSemanticColor(__classPrivateFieldGet(this, _DuoyunImagePreviewElement_instances, "a", _DuoyunImagePreviewElement_status_get));
}, _DuoyunImagePreviewElement_icon_get = function _DuoyunImagePreviewElement_icon_get() {
    switch (__classPrivateFieldGet(this, _DuoyunImagePreviewElement_instances, "a", _DuoyunImagePreviewElement_status_get)) {
        case 'negative':
            return icons.close;
        case 'positive':
            return icons.check;
    }
};
__decorate([
    attribute
], DuoyunImagePreviewElement.prototype, "status", void 0);
__decorate([
    numattribute
], DuoyunImagePreviewElement.prototype, "progress", void 0);
__decorate([
    property
], DuoyunImagePreviewElement.prototype, "file", void 0);
__decorate([
    property
], DuoyunImagePreviewElement.prototype, "actions", void 0);
DuoyunImagePreviewElement = __decorate([
    customElement('dy-image-preview'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunImagePreviewElement);
export { DuoyunImagePreviewElement };
//# sourceMappingURL=image-preview.js.map