@infinite-canvas-tutorial/webcomponents/lib/spectrum/layer-thumbnail.js

WebComponents UI implementation

"use strict";
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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
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 __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _LayerThumbnail_roughSvg, _LayerThumbnail_imageDefsCache;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayerThumbnail = void 0;
const lit_1 = require("lit");
const decorators_js_1 = require("lit/decorators.js");
const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
const context_1 = require("@lit/context");
const roughjs_1 = __importDefault(require("roughjs"));
const context_2 = require("../context");
const THUMBNAIL_SIZE = 52;
const THUMBNAIL_PADDING_RATIO = 0.1;
let LayerThumbnail = class LayerThumbnail extends lit_1.LitElement {
    constructor() {
        super(...arguments);
        this.selected = false;
        _LayerThumbnail_roughSvg.set(this, void 0);
        /** 缓存图片 fill 的 defs HTML，因为 exportFillImage 是异步的 */
        _LayerThumbnail_imageDefsCache.set(this, new Map());
    }
    connectedCallback() {
        super.connectedCallback();
        __classPrivateFieldSet(this, _LayerThumbnail_roughSvg, roughjs_1.default.svg((0, ecs_1.createSVGElement)('svg')), "f");
    }
    render() {
        const entity = this.api.getEntity(this.node);
        if (!entity.has(ecs_1.ComputedBounds)) {
            return (0, lit_1.html) `<sp-thumbnail size="1000" ?focused=${this.selected}>
        <sp-icon-group></sp-icon-group>
      </sp-thumbnail>`;
        }
        const { minX, minY, maxX, maxY } = entity.read(ecs_1.ComputedBounds).renderBounds;
        const width = maxX - minX;
        const height = maxY - minY;
        const transform = `translate(${-minX - width / 2}, ${-minY - height / 2})`;
        let $el;
        const { type } = this.node;
        if (type === 'ellipse') {
            $el = (0, ecs_1.createSVGElement)('ellipse');
            $el.setAttribute('cx', `${minX + width / 2}`);
            $el.setAttribute('cy', `${minY + height / 2}`);
            $el.setAttribute('rx', `${width / 2}`);
            $el.setAttribute('ry', `${height / 2}`);
        }
        else if (type === 'rect') {
            $el = (0, ecs_1.createSVGElement)('rect');
            $el.setAttribute('x', `${minX}`);
            $el.setAttribute('y', `${minY}`);
            $el.setAttribute('width', `${width}`);
            $el.setAttribute('height', `${height}`);
        }
        else if (type === 'path') {
            $el = (0, ecs_1.createSVGElement)('path');
            $el.setAttribute('d', this.node.d);
        }
        else if (type === 'polyline') {
            $el = (0, ecs_1.createSVGElement)('polyline');
            $el.setAttribute('points', this.node.points);
            $el.setAttribute('fill', 'none');
        }
        else if (type === 'line') {
            $el = (0, ecs_1.createSVGElement)('line');
            $el.setAttribute('x1', `${this.node.x1}`);
            $el.setAttribute('y1', `${this.node.y1}`);
            $el.setAttribute('x2', `${this.node.x2}`);
            $el.setAttribute('y2', `${this.node.y2}`);
        }
        else if (type === 'rough-rect') {
            const options = (0, ecs_1.getRoughOptions)(this.node);
            $el = __classPrivateFieldGet(this, _LayerThumbnail_roughSvg, "f").rectangle(minX, minY, width, height, Object.assign({}, options));
        }
        else if (type === 'rough-ellipse') {
            const options = (0, ecs_1.getRoughOptions)(this.node);
            $el = __classPrivateFieldGet(this, _LayerThumbnail_roughSvg, "f").ellipse(minX + width / 2, minY + height / 2, width, height, Object.assign({}, options));
        }
        const { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinecap, strokeLinejoin, strokeMiterlimit, strokeDasharray, strokeDashoffset, opacity, markerStart, markerEnd, } = this.node;
        if ($el) {
            $el.setAttribute('transform', transform);
            if (opacity) {
                $el.setAttribute('opacity', opacity.toString());
            }
            if (fill) {
                $el.setAttribute('fill', fill);
            }
            else {
                $el.setAttribute('fill', 'none');
            }
            if (fillOpacity) {
                $el.setAttribute('fill-opacity', fillOpacity.toString());
            }
            if (stroke) {
                $el.setAttribute('stroke', stroke);
            }
            if (strokeOpacity) {
                $el.setAttribute('stroke-opacity', strokeOpacity.toString());
            }
            if (strokeWidth) {
                $el.setAttribute('stroke-width', Math.max(strokeWidth, 4).toString());
            }
            if (strokeLinecap) {
                $el.setAttribute('stroke-linecap', strokeLinecap);
            }
            if (strokeLinejoin) {
                $el.setAttribute('stroke-linejoin', strokeLinejoin);
            }
            if (strokeMiterlimit) {
                $el.setAttribute('stroke-miterlimit', strokeMiterlimit.toString());
            }
            if (strokeDasharray) {
                $el.setAttribute('stroke-dasharray', strokeDasharray);
            }
            if (strokeDashoffset) {
                $el.setAttribute('stroke-dashoffset', strokeDashoffset.toString());
            }
        }
        const isGradientOrPattern = (0, ecs_1.isGradient)(fill) || (0, ecs_1.isPattern)(fill);
        const isImage = (0, ecs_1.isDataUrl)(fill) || (0, ecs_1.isUrl)(fill);
        let defsHTML = '';
        if (isGradientOrPattern) {
            const $g = (0, ecs_1.createSVGElement)('g');
            (0, ecs_1.exportFillGradientOrPattern)(Object.assign({}, this.node), $el, $g);
            defsHTML = $g.children[0].innerHTML;
        }
        else if (isImage) {
            const cacheKey = `${this.node.id}:${fill}`;
            const cached = __classPrivateFieldGet(this, _LayerThumbnail_imageDefsCache, "f").get(cacheKey);
            if (cached !== undefined) {
                defsHTML = cached;
                $el.setAttribute('fill', `url(#image-fill_${this.node.id})`);
            }
            else {
                const $g = (0, ecs_1.createSVGElement)('g');
                (0, ecs_1.exportFillImage)(this.node, $el, $g).then(() => {
                    var _a, _b;
                    const html = (_b = (_a = $g.children[0]) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
                    __classPrivateFieldGet(this, _LayerThumbnail_imageDefsCache, "f").set(cacheKey, html);
                    this.requestUpdate();
                });
                defsHTML = '';
            }
        }
        else if (markerStart || markerEnd) {
            const $g = (0, ecs_1.createSVGElement)('g');
            (0, ecs_1.exportMarker)(this.node, $el, $g);
            defsHTML = $g.children[0].innerHTML;
        }
        const padding = Math.max(width, height) * THUMBNAIL_PADDING_RATIO;
        const paddedWidth = width + padding * 2;
        const paddedHeight = height + padding * 2;
        let thumbnail;
        if (this.node.type === 'text') {
            thumbnail = (0, lit_1.html) `<sp-icon-text></sp-icon-text>`;
        }
        else if (this.node.type === 'embed' || this.node.type === 'html') {
            thumbnail = (0, lit_1.html) `<sp-icon-code></sp-icon-code>`;
        }
        else if (this.node.type === 'brush') {
            thumbnail = (0, lit_1.html) `<img src="${this.node.brushStamp}" />`;
        }
        else if (this.node.clipMode) {
            thumbnail = (0, lit_1.html) `<sp-icon-crop></sp-icon-crop>`;
        }
        else {
            thumbnail = $el && (0, lit_1.html) `<svg
        viewBox="${-paddedWidth / 2} ${-paddedHeight /
                2} ${paddedWidth} ${paddedHeight}"
      >
        ${(0, unsafe_svg_js_1.unsafeSVG)(defsHTML)} ${(0, unsafe_svg_js_1.unsafeSVG)($el.outerHTML)}
      </svg>`;
        }
        return (0, lit_1.html) `<sp-thumbnail size="1000" ?focused=${this.selected}>
      ${thumbnail}
    </sp-thumbnail>`;
    }
};
exports.LayerThumbnail = LayerThumbnail;
_LayerThumbnail_roughSvg = new WeakMap();
_LayerThumbnail_imageDefsCache = new WeakMap();
LayerThumbnail.styles = (0, lit_1.css) `
    :host {
    }

    svg {
      display: block;
      width: ${THUMBNAIL_SIZE}px;
      height: ${THUMBNAIL_SIZE}px;
      box-sizing: border-box;
      overflow: hidden;
    }

    sp-icon-text, sp-icon-code, sp-icon-crop, sp-icon-group {
      display: block;
    }
  `;
__decorate([
    (0, context_1.consume)({ context: context_2.apiContext, subscribe: true })
], LayerThumbnail.prototype, "api", void 0);
__decorate([
    (0, decorators_js_1.property)()
], LayerThumbnail.prototype, "node", void 0);
__decorate([
    (0, decorators_js_1.property)({ type: Boolean })
], LayerThumbnail.prototype, "selected", void 0);
exports.LayerThumbnail = LayerThumbnail = __decorate([
    (0, decorators_js_1.customElement)('ic-spectrum-layer-thumbnail')
], LayerThumbnail);
//# sourceMappingURL=layer-thumbnail.js.map