@infinite-canvas-tutorial/webcomponents
Version:
WebComponents UI implementation
222 lines (220 loc) • 10.1 kB
JavaScript
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 _LayerThumbnail_roughSvg, _LayerThumbnail_imageDefsCache;
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import { ComputedBounds, exportFillGradientOrPattern, exportFillImage, isGradient, isPattern, isDataUrl, isUrl, createSVGElement, getRoughOptions, exportMarker, } from '@infinite-canvas-tutorial/ecs';
import { consume } from '@lit/context';
import rough from 'roughjs';
import { apiContext } from '../context';
const THUMBNAIL_SIZE = 52;
const THUMBNAIL_PADDING_RATIO = 0.1;
let LayerThumbnail = class LayerThumbnail extends 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, rough.svg(createSVGElement('svg')), "f");
}
render() {
const entity = this.api.getEntity(this.node);
if (!entity.has(ComputedBounds)) {
return html `<sp-thumbnail size="1000" ?focused=${this.selected}>
<sp-icon-group></sp-icon-group>
</sp-thumbnail>`;
}
const { minX, minY, maxX, maxY } = entity.read(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 = 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 = createSVGElement('rect');
$el.setAttribute('x', `${minX}`);
$el.setAttribute('y', `${minY}`);
$el.setAttribute('width', `${width}`);
$el.setAttribute('height', `${height}`);
}
else if (type === 'path') {
$el = createSVGElement('path');
$el.setAttribute('d', this.node.d);
}
else if (type === 'polyline') {
$el = createSVGElement('polyline');
$el.setAttribute('points', this.node.points);
$el.setAttribute('fill', 'none');
}
else if (type === 'line') {
$el = 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 = getRoughOptions(this.node);
$el = __classPrivateFieldGet(this, _LayerThumbnail_roughSvg, "f").rectangle(minX, minY, width, height, Object.assign({}, options));
}
else if (type === 'rough-ellipse') {
const options = 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 = isGradient(fill) || isPattern(fill);
const isImage = isDataUrl(fill) || isUrl(fill);
let defsHTML = '';
if (isGradientOrPattern) {
const $g = createSVGElement('g');
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 = createSVGElement('g');
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 = createSVGElement('g');
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 = html `<sp-icon-text></sp-icon-text>`;
}
else if (this.node.type === 'embed' || this.node.type === 'html') {
thumbnail = html `<sp-icon-code></sp-icon-code>`;
}
else if (this.node.type === 'brush') {
thumbnail = html `<img src="${this.node.brushStamp}" />`;
}
else if (this.node.clipMode) {
thumbnail = html `<sp-icon-crop></sp-icon-crop>`;
}
else {
thumbnail = $el && html `<svg
viewBox="${-paddedWidth / 2} ${-paddedHeight /
2} ${paddedWidth} ${paddedHeight}"
>
${unsafeSVG(defsHTML)} ${unsafeSVG($el.outerHTML)}
</svg>`;
}
return html `<sp-thumbnail size="1000" ?focused=${this.selected}>
${thumbnail}
</sp-thumbnail>`;
}
};
_LayerThumbnail_roughSvg = new WeakMap();
_LayerThumbnail_imageDefsCache = new WeakMap();
LayerThumbnail.styles = 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([
consume({ context: apiContext, subscribe: true })
], LayerThumbnail.prototype, "api", void 0);
__decorate([
property()
], LayerThumbnail.prototype, "node", void 0);
__decorate([
property({ type: Boolean })
], LayerThumbnail.prototype, "selected", void 0);
LayerThumbnail = __decorate([
customElement('ic-spectrum-layer-thumbnail')
], LayerThumbnail);
export { LayerThumbnail };
//# sourceMappingURL=layer-thumbnail.js.map