@node-projects/web-component-designer 0.2.3 → 0.2.5

package/dist/elements/widgets/designerView/extensions/CollaborationOverlayExtension.js

@@ -1,116 +0,0 @@
-import { AbstractExtension } from './AbstractExtension.js';
-import { OverlayLayer } from './OverlayLayer.js';
-import { getCollaborationNodeIndex } from '../../../services/collaborationService/CollaborationNodeIndex.js';
-const collaborationOverlayCacheKey = Symbol('collaborationOverlayCache');
-function getOverlayCache(designItem, cache) {
-    if (cache[collaborationOverlayCacheKey])
-        return cache[collaborationOverlayCacheKey];
-    const collaborationService = designItem.instanceServiceContainer.collaborationService;
-    const peerMap = new Map;
-    const commentMap = new Map;
-    const localPeerId = collaborationService?.session?.peerId;
-    for (const peer of collaborationService?.peers ?? []) {
-        if (!peer || peer.peerId === localPeerId)
-            continue;
-        const indexes = new Set();
-        if (peer.activeNodeIndex != null)
-            indexes.add(peer.activeNodeIndex);
-        for (const nodeIndex of peer.selectedNodeIndexes ?? [])
-            indexes.add(nodeIndex);
-        for (const nodeIndex of indexes) {
-            const peers = peerMap.get(nodeIndex) ?? [];
-            peers.push(peer);
-            peerMap.set(nodeIndex, peers);
-        }
-    }
-    for (const comment of collaborationService?.comments ?? []) {
-        if (comment.targetNodeIndex == null)
-            continue;
-        const comments = commentMap.get(comment.targetNodeIndex) ?? [];
-        comments.push(comment);
-        commentMap.set(comment.targetNodeIndex, comments);
-    }
-    const overlayCache = { peerMap, commentMap };
-    cache[collaborationOverlayCacheKey] = overlayCache;
-    return overlayCache;
-}
-function truncateText(text, maxLength) {
-    if (!text || text.length <= maxLength)
-        return text;
-    return text.substring(0, Math.max(0, maxLength - 1)) + '…';
-}
-export class CollaborationOverlayExtension extends AbstractExtension {
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        this.refresh(cache, event);
-    }
-    refresh(cache, event) {
-        const collaborationService = this.extendedItem.instanceServiceContainer.collaborationService;
-        if (!collaborationService) {
-            if (this.overlays.length)
-                this._removeAllOverlays();
-            return;
-        }
-        const nodeIndex = getCollaborationNodeIndex(this.extendedItem, cache);
-        if (nodeIndex == null) {
-            if (this.overlays.length)
-                this._removeAllOverlays();
-            return;
-        }
-        const overlayCache = getOverlayCache(this.extendedItem, cache);
-        const peers = [...(overlayCache.peerMap.get(nodeIndex) ?? [])].sort((a, b) => a.peerId.localeCompare(b.peerId));
-        const comments = [...(overlayCache.commentMap.get(nodeIndex) ?? [])].sort((a, b) => a.createdAt - b.createdAt);
-        if (!peers.length && !comments.length) {
-            if (this.overlays.length)
-                this._removeAllOverlays();
-            return;
-        }
-        const rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const overlayState = JSON.stringify({
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height,
-            peers: peers.map(x => ({
-                peerId: x.peerId,
-                displayName: x.displayName,
-                color: x.color,
-                activeNodeIndex: x.activeNodeIndex,
-                selectedNodeIndexes: x.selectedNodeIndexes
-            })),
-            comments: comments.map(x => ({ id: x.id, resolved: x.resolved, text: x.text, authorPeerId: x.authorPeerId }))
-        });
-        if (!this._valuesHaveChanges(overlayState))
-            return;
-        this._removeAllOverlays();
-        peers.forEach((peer, index) => {
-            const offset = index * 3;
-            const peerRect = this._drawRect(rect.x - offset, rect.y - offset, rect.width + (offset * 2), rect.height + (offset * 2), 'svg-collaboration-peer', null, OverlayLayer.Foreground);
-            peerRect.style.stroke = peer.color ?? '#1f7ae0';
-            peerRect.style.strokeWidth = peer.activeNodeIndex === nodeIndex ? '2.5px' : '1.5px';
-            peerRect.style.opacity = peer.activeNodeIndex === nodeIndex ? '1' : '0.75';
-            peerRect.style.fill = 'none';
-            const labelText = truncateText(peer.displayName ?? peer.peerId, 24);
-            this._drawTextWithBackground(labelText, rect.x - offset, rect.y - 8 - (index * 14), peer.color ?? '#1f7ae0', 'svg-collaboration-label', null, OverlayLayer.Foreground);
-        });
-        if (comments.length) {
-            const unresolvedComments = comments.filter(x => !x.resolved);
-            const badgeColor = unresolvedComments.length ? '#f57c00' : '#9e9e9e';
-            const commentRect = this._drawRect(rect.x + 2, rect.y + 2, Math.max(0, rect.width - 4), Math.max(0, rect.height - 4), 'svg-collaboration-comment', null, OverlayLayer.Foreground);
-            commentRect.style.stroke = badgeColor;
-            commentRect.style.fill = 'none';
-            const commentLabel = unresolvedComments.length
-                ? `${unresolvedComments.length} comment${unresolvedComments.length === 1 ? '' : 's'}`
-                : `${comments.length} resolved`;
-            this._drawTextWithBackground(commentLabel, rect.x + rect.width - 12, rect.y + 14, badgeColor, 'svg-collaboration-comment-label', null, OverlayLayer.Foreground);
-            const previewComment = comments[comments.length - 1];
-            this._drawTextWithBackground(truncateText(previewComment.text, 28), rect.x + 4, rect.y + rect.height + 16, badgeColor, 'svg-collaboration-comment-preview', null, OverlayLayer.Foreground);
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
-//# sourceMappingURL=CollaborationOverlayExtension.js.map

package/dist/elements/widgets/designerView/extensions/CollaborationOverlayExtension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CollaborationOverlayExtension.js","sourceRoot":"","sources":["../../../../../src/elements/widgets/designerView/extensions/CollaborationOverlayExtension.ts"],"names":[],"mappings":"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"}

package/dist/elements/widgets/designerView/extensions/CollaborationOverlayExtensionProvider.d.ts

@@ -1,10 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class CollaborationOverlayExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    static readonly style: CSSStyleSheet;
-}

package/dist/elements/widgets/designerView/extensions/CollaborationOverlayExtensionProvider.js

@@ -1,31 +0,0 @@
-import { css } from '@node-projects/base-custom-webcomponent';
-import { CollaborationOverlayExtension } from './CollaborationOverlayExtension.js';
-export class CollaborationOverlayExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement);
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new CollaborationOverlayExtension(extensionManager, designerView, designItem);
-    }
-    static style = css `
-    .svg-collaboration-peer {
-      stroke-dasharray: 5 3;
-      vector-effect: non-scaling-stroke;
-      pointer-events: none;
-    }
-
-    .svg-collaboration-comment {
-      stroke-dasharray: 2 4;
-      vector-effect: non-scaling-stroke;
-      pointer-events: none;
-    }
-
-    .svg-collaboration-label,
-    .svg-collaboration-comment-label,
-    .svg-collaboration-comment-preview {
-      font-size: 11px;
-      pointer-events: none;
-    }
-  `;
-}
-//# sourceMappingURL=CollaborationOverlayExtensionProvider.js.map

package/dist/elements/widgets/designerView/extensions/CollaborationOverlayExtensionProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CollaborationOverlayExtensionProvider.js","sourceRoot":"","sources":["../../../../../src/elements/widgets/designerView/extensions/CollaborationOverlayExtensionProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAM9D,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEnF,MAAM,OAAO,qCAAqC;IAChD,YAAY,CAAC,gBAAmC,EAAE,YAA6B,EAAE,UAAuB;QACtG,OAAO,CAAC,UAAU,CAAC,UAAU,IAAI,CAAC,CAAC,UAAU,CAAC,OAAO,YAAY,mBAAmB,CAAC,CAAC;IACxF,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,YAA6B,EAAE,UAAuB;QACtG,OAAO,IAAI,6BAA6B,CAAC,gBAAgB,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;IACvF,CAAC;IAED,MAAM,CAAU,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmB1B,CAAC"}

package/dist/elements/widgets/designerView/extensions/FlexboxExtension.d.ts

@@ -1,11 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class FlexboxExtension extends AbstractExtension {
-    private _path;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/extensions/FlexboxExtension.js

@@ -1,20 +0,0 @@
-import { AbstractExtension } from './AbstractExtension.js';
-import { OverlayLayer } from './OverlayLayer.js';
-export class FlexboxExtension extends AbstractExtension {
-    _path;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0];
-        this._path = this._drawTransformedRect(transformedCornerPoints, 'svg-flexbox', this._path, OverlayLayer.Background);
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
-//# sourceMappingURL=FlexboxExtension.js.map

package/dist/elements/widgets/designerView/extensions/FlexboxExtension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlexboxExtension.js","sourceRoot":"","sources":["../../../../../src/elements/widgets/designerView/extensions/FlexboxExtension.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,OAAO,gBAAiB,SAAQ,iBAAiB;IAC7C,KAAK,CAAiB;IAE9B,YAAY,gBAAmC,EAAE,YAA6B,EAAE,YAAyB;QACvG,KAAK,CAAC,gBAAgB,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;IACtD,CAAC;IAEQ,MAAM;QACb,MAAM,uBAAuB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACrH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,uBAAuB,EAAE,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACtH,CAAC;IAEQ,OAAO;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEQ,OAAO;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;CACF"}

package/dist/elements/widgets/designerView/extensions/FlexboxExtensionProvider.d.ts

@@ -1,11 +0,0 @@
-import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare const flexboxExtensionShowOverlayOptionName = "flexboxExtensionShowOverlay";
-export declare class FlexboxExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}

package/dist/elements/widgets/designerView/extensions/FlexboxExtensionProvider.js

@@ -1,18 +0,0 @@
-import { css } from "@node-projects/base-custom-webcomponent";
-import { FlexboxExtension } from './FlexboxExtension.js';
-export const flexboxExtensionShowOverlayOptionName = 'flexboxExtensionShowOverlay';
-export class FlexboxExtensionProvider {
-    shouldExtend(extensionManager, designerCanvas, designItem) {
-        const display = getComputedStyle(designItem.element).display;
-        if (display == 'flex' || display == 'inline-flex')
-            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false;
-        return false;
-    }
-    getExtension(extensionManager, designerCanvas, designItem) {
-        return new FlexboxExtension(extensionManager, designerCanvas, designItem);
-    }
-    style = css `
-    .svg-flexbox { stroke: orange; fill: #9a47ff22; }
-  `;
-}
-//# sourceMappingURL=FlexboxExtensionProvider.js.map

package/dist/elements/widgets/designerView/extensions/FlexboxExtensionProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlexboxExtensionProvider.js","sourceRoot":"","sources":["../../../../../src/elements/widgets/designerView/extensions/FlexboxExtensionProvider.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,CAAC,MAAM,qCAAqC,GAAG,6BAA6B,CAAC;AAEnF,MAAM,OAAO,wBAAwB;IAEnC,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,MAAM,OAAO,GAAG,gBAAgB,CAAe,UAAU,CAAC,OAAQ,CAAC,CAAC,OAAO,CAAC;QAC5E,IAAI,OAAO,IAAI,MAAM,IAAI,OAAO,IAAI,aAAa;YAC/C,OAAO,cAAc,CAAC,wBAAwB,CAAC,aAAa,CAAC,gBAAgB,CAAC,qCAAqC,CAAC,KAAK,KAAK,CAAC;QACjI,OAAO,KAAK,CAAC;IACf,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,OAAO,IAAI,gBAAgB,CAAC,gBAAgB,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC;IAC5E,CAAC;IAEQ,KAAK,GAAG,GAAG,CAAA;;GAEnB,CAAC;CACH"}

package/dist/elements/widgets/designerView/extensions/ProjectiveTransformExtension.d.ts

@@ -1,33 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class ProjectiveTransformExtension extends AbstractExtension {
-    private _outline?;
-    private _handles;
-    private _handleCrossHorizontalLines;
-    private _handleCrossVerticalLines;
-    private _activeHandleIndex;
-    private _baseTransform;
-    private _projectiveTransform;
-    private _targetPoints;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(cache: Record<string | symbol, any>, event?: Event): void;
-    refresh(cache: Record<string | symbol, any>, event?: Event): void;
-    dispose(): void;
-    private _handlePointerEvent;
-    private _startDrag;
-    private _convertQuadToLocalPoints;
-    private _getLocalPointerPoint;
-    private _applyPreviewTransform;
-    private _commitTransform;
-    private _restorePersistedTransform;
-    private _buildProjectiveTransform;
-    private _createProjectiveMatrix;
-    private _serializeMatrix3d;
-    private _formatMatrixNumber;
-    private _buildTransform;
-    private _parseTransform;
-    private _splitTransformFunctions;
-    private _pointsApproximatelyEqual;
-}

package/dist/elements/widgets/designerView/extensions/ProjectiveTransformExtension.js

@@ -1,337 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-import { getElementSize } from '../../../helper/getBoxQuads.js';
-import { AbstractExtension } from './AbstractExtension.js';
-export class ProjectiveTransformExtension extends AbstractExtension {
-    _outline;
-    _handles = [];
-    _handleCrossHorizontalLines = [];
-    _handleCrossVerticalLines = [];
-    _activeHandleIndex = null;
-    _baseTransform = '';
-    _projectiveTransform = '';
-    _targetPoints = [];
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend(cache, event) {
-        this.refresh(cache, event);
-    }
-    refresh(cache, event) {
-        const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0];
-        if (!transformedCornerPoints) {
-            return;
-        }
-        const points = [transformedCornerPoints.p1, transformedCornerPoints.p2, transformedCornerPoints.p3, transformedCornerPoints.p4];
-        if (points.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y))) {
-            this.remove();
-            return;
-        }
-        if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, ...points.flatMap(point => [point.x, point.y]))) {
-            this._outline = this._drawTransformedRect(transformedCornerPoints, 'svg-primary-projective-outline', this._outline);
-            this._outline.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-            this._outline.style.pointerEvents = 'none';
-            const radius = 5 / this.designerCanvas.zoomFactor;
-            const crossRadius = radius * 0.55;
-            for (let index = 0; index < points.length; index++) {
-                const cornerIndex = index;
-                const point = points[index];
-                let handle = this._handles[index];
-                if (!handle) {
-                    handle = this._drawCircle(point.x, point.y, radius, 'svg-primary-projective-handle');
-                    handle.addEventListener(EventNames.PointerDown, event => this._handlePointerEvent(cornerIndex, event));
-                    handle.addEventListener(EventNames.PointerMove, event => this._handlePointerEvent(cornerIndex, event));
-                    handle.addEventListener(EventNames.PointerUp, event => this._handlePointerEvent(cornerIndex, event));
-                    this._handles[index] = handle;
-                }
-                else {
-                    handle = this._drawCircle(point.x, point.y, radius, 'svg-primary-projective-handle', handle);
-                    this._handles[index] = handle;
-                }
-                handle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-                handle.style.cursor = 'move';
-                let horizontalLine = this._handleCrossHorizontalLines[index];
-                horizontalLine = this._drawLine(point.x - crossRadius, point.y, point.x + crossRadius, point.y, 'svg-primary-projective-handle-cross', horizontalLine);
-                horizontalLine.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-                horizontalLine.style.pointerEvents = 'none';
-                this._handleCrossHorizontalLines[index] = horizontalLine;
-                let verticalLine = this._handleCrossVerticalLines[index];
-                verticalLine = this._drawLine(point.x, point.y - crossRadius, point.x, point.y + crossRadius, 'svg-primary-projective-handle-cross', verticalLine);
-                verticalLine.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-                verticalLine.style.pointerEvents = 'none';
-                this._handleCrossVerticalLines[index] = verticalLine;
-            }
-        }
-    }
-    dispose() {
-        this._activeHandleIndex = null;
-        this._restorePersistedTransform();
-        this._removeAllOverlays();
-    }
-    _handlePointerEvent(index, event) {
-        event.stopPropagation();
-        const target = event.target;
-        switch (event.type) {
-            case EventNames.PointerDown:
-                if (!this._startDrag(index)) {
-                    return;
-                }
-                target.setPointerCapture(event.pointerId);
-                this._activeHandleIndex = index;
-                break;
-            case EventNames.PointerMove:
-                if (this._activeHandleIndex === index && event.buttons > 0) {
-                    const localPoint = this._getLocalPointerPoint(event);
-                    if (!localPoint) {
-                        return;
-                    }
-                    this._targetPoints[index] = localPoint;
-                    this._applyPreviewTransform();
-                }
-                break;
-            case EventNames.PointerUp:
-                if (this._activeHandleIndex === index) {
-                    const localPoint = this._getLocalPointerPoint(event);
-                    if (localPoint) {
-                        this._targetPoints[index] = localPoint;
-                        this._applyPreviewTransform();
-                    }
-                    target.releasePointerCapture(event.pointerId);
-                    this._commitTransform();
-                    this._activeHandleIndex = null;
-                }
-                break;
-        }
-    }
-    _startDrag(index) {
-        const { baseTransform, projectiveTransform } = this._parseTransform(this.extendedItem.getStyleFromSheetOrLocal('transform') ?? '');
-        this._baseTransform = baseTransform;
-        this._projectiveTransform = projectiveTransform;
-        const currentQuad = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0];
-        if (!currentQuad) {
-            return false;
-        }
-        const element = this.extendedItem.element;
-        element.style.transform = this._buildTransform(this._baseTransform, '');
-        this._targetPoints = this._convertQuadToLocalPoints(currentQuad);
-        if (this._targetPoints.length !== 4 || this._targetPoints.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y))) {
-            this._restorePersistedTransform();
-            return false;
-        }
-        element.style.transform = this._buildTransform(this._baseTransform, this._projectiveTransform);
-        return this._targetPoints[index] != null;
-    }
-    _convertQuadToLocalPoints(quad) {
-        return [quad.p1, quad.p2, quad.p3, quad.p4].map(point => {
-            const localPoint = this.extendedItem.element.convertPointFromNode({ x: point.x, y: point.y }, this.designerCanvas.canvas);
-            return { x: localPoint.x, y: localPoint.y };
-        });
-    }
-    _getLocalPointerPoint(event) {
-        const element = this.extendedItem.element;
-        const previewTransform = element.style.transform;
-        element.style.transform = this._buildTransform(this._baseTransform, '');
-        const mousePoint = this.designerCanvas.getNormalizedEventCoordinates(event);
-        const localPoint = element.convertPointFromNode({ x: mousePoint.x, y: mousePoint.y }, this.designerCanvas.canvas);
-        element.style.transform = previewTransform;
-        if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) {
-            return null;
-        }
-        return { x: localPoint.x, y: localPoint.y };
-    }
-    _applyPreviewTransform() {
-        const projectiveTransform = this._buildProjectiveTransform(this._targetPoints);
-        if (projectiveTransform == null) {
-            return;
-        }
-        this._projectiveTransform = projectiveTransform;
-        this.extendedItem.element.style.transform = this._buildTransform(this._baseTransform, this._projectiveTransform);
-    }
-    _commitTransform() {
-        const projectiveTransform = this._buildProjectiveTransform(this._targetPoints);
-        if (projectiveTransform != null) {
-            this._projectiveTransform = projectiveTransform;
-        }
-        const finalTransform = this._buildTransform(this._baseTransform, this._projectiveTransform);
-        if (finalTransform) {
-            this.extendedItem.updateStyleInSheetOrLocal('transform', finalTransform);
-        }
-        else if (this.extendedItem.hasStyle('transform')) {
-            this.extendedItem.removeStyle('transform');
-        }
-        else {
-            this.extendedItem.updateStyleInSheetOrLocal('transform', null);
-        }
-        this._restorePersistedTransform();
-    }
-    _restorePersistedTransform() {
-        const element = this.extendedItem.element;
-        if (this.extendedItem.hasStyle('transform')) {
-            element.style.transform = this.extendedItem.getStyle('transform') ?? '';
-        }
-        else {
-            element.style.transform = '';
-        }
-    }
-    _buildProjectiveTransform(points) {
-        const size = getElementSize(this.extendedItem.element);
-        if (!size.width || !size.height || points.length !== 4) {
-            return '';
-        }
-        const sourcePoints = [
-            { x: 0, y: 0 },
-            { x: size.width, y: 0 },
-            { x: size.width, y: size.height },
-            { x: 0, y: size.height }
-        ];
-        if (this._pointsApproximatelyEqual(points, sourcePoints)) {
-            return '';
-        }
-        const matrix = this._createProjectiveMatrix(points, size.width, size.height);
-        if (!matrix) {
-            return null;
-        }
-        const transformOrigin = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ');
-        const origin = {
-            x: parseFloat(transformOrigin[0]) || 0,
-            y: parseFloat(transformOrigin[1]) || 0
-        };
-        const correctedMatrix = new DOMMatrix()
-            .translate(-origin.x, -origin.y)
-            .multiply(matrix)
-            .multiply(new DOMMatrix().translate(origin.x, origin.y));
-        return this._serializeMatrix3d(correctedMatrix);
-    }
-    _createProjectiveMatrix(points, width, height) {
-        const [p1, p2, p3, p4] = points;
-        const dx1 = p2.x - p3.x;
-        const dx2 = p4.x - p3.x;
-        const dx3 = p1.x - p2.x + p3.x - p4.x;
-        const dy1 = p2.y - p3.y;
-        const dy2 = p4.y - p3.y;
-        const dy3 = p1.y - p2.y + p3.y - p4.y;
-        let aUnit;
-        let bUnit;
-        let dUnit;
-        let eUnit;
-        let gUnit;
-        let hUnit;
-        if (Math.abs(dx3) < 1e-8 && Math.abs(dy3) < 1e-8) {
-            aUnit = p2.x - p1.x;
-            bUnit = p4.x - p1.x;
-            dUnit = p2.y - p1.y;
-            eUnit = p4.y - p1.y;
-            gUnit = 0;
-            hUnit = 0;
-        }
-        else {
-            const determinant = dx1 * dy2 - dx2 * dy1;
-            if (Math.abs(determinant) < 1e-8) {
-                return null;
-            }
-            gUnit = (dx3 * dy2 - dx2 * dy3) / determinant;
-            hUnit = (dx1 * dy3 - dx3 * dy1) / determinant;
-            aUnit = p2.x - p1.x + gUnit * p2.x;
-            bUnit = p4.x - p1.x + hUnit * p4.x;
-            dUnit = p2.y - p1.y + gUnit * p2.y;
-            eUnit = p4.y - p1.y + hUnit * p4.y;
-        }
-        const matrix = new DOMMatrix([
-            aUnit / width, dUnit / width, 0, gUnit / width,
-            bUnit / height, eUnit / height, 0, hUnit / height,
-            0, 0, 1, 0,
-            p1.x, p1.y, 0, 1
-        ]);
-        const values = [
-            matrix.m11, matrix.m12, matrix.m13, matrix.m14,
-            matrix.m21, matrix.m22, matrix.m23, matrix.m24,
-            matrix.m31, matrix.m32, matrix.m33, matrix.m34,
-            matrix.m41, matrix.m42, matrix.m43, matrix.m44
-        ];
-        if (values.some(value => !Number.isFinite(value))) {
-            return null;
-        }
-        return matrix;
-    }
-    _serializeMatrix3d(matrix) {
-        const values = [
-            matrix.m11, matrix.m12, matrix.m13, matrix.m14,
-            matrix.m21, matrix.m22, matrix.m23, matrix.m24,
-            matrix.m31, matrix.m32, matrix.m33, matrix.m34,
-            matrix.m41, matrix.m42, matrix.m43, matrix.m44
-        ].map(value => this._formatMatrixNumber(value));
-        return `matrix3d(${values.join(', ')})`;
-    }
-    _formatMatrixNumber(value) {
-        if (Math.abs(value) < 1e-10) {
-            return '0';
-        }
-        let rounded = value.toFixed(8);
-        if (rounded.includes('.')) {
-            rounded = rounded.replace(/0+$/, '').replace(/\.$/, '');
-        }
-        return rounded === '-0' ? '0' : rounded;
-    }
-    _buildTransform(baseTransform, projectiveTransform) {
-        const transforms = [];
-        if (baseTransform?.trim()) {
-            transforms.push(baseTransform.trim());
-        }
-        if (projectiveTransform?.trim()) {
-            transforms.push(projectiveTransform.trim());
-        }
-        return transforms.join(' ').trim();
-    }
-    _parseTransform(transform) {
-        if (!transform || transform === 'none') {
-            return { baseTransform: '', projectiveTransform: '' };
-        }
-        const parts = this._splitTransformFunctions(transform);
-        if (!parts.length) {
-            return { baseTransform: transform.trim(), projectiveTransform: '' };
-        }
-        const lastPart = parts[parts.length - 1];
-        const functionName = lastPart.slice(0, lastPart.indexOf('(')).trim().toLowerCase();
-        if (functionName === 'matrix' || functionName === 'matrix3d') {
-            return {
-                baseTransform: parts.slice(0, -1).join(' ').trim(),
-                projectiveTransform: lastPart.trim()
-            };
-        }
-        return { baseTransform: transform.trim(), projectiveTransform: '' };
-    }
-    _splitTransformFunctions(transform) {
-        const parts = [];
-        let startIndex = -1;
-        let depth = 0;
-        for (let index = 0; index < transform.length; index++) {
-            const character = transform[index];
-            if (character === '(') {
-                depth++;
-            }
-            else if (character === ')') {
-                depth--;
-                if (depth === 0 && startIndex !== -1) {
-                    parts.push(transform.slice(startIndex, index + 1).trim());
-                    startIndex = -1;
-                }
-            }
-            else if (depth === 0 && startIndex === -1 && character.trim()) {
-                startIndex = index;
-            }
-        }
-        if (!parts.length && transform.trim()) {
-            parts.push(transform.trim());
-        }
-        return parts;
-    }
-    _pointsApproximatelyEqual(pointsA, pointsB) {
-        if (pointsA.length !== pointsB.length) {
-            return false;
-        }
-        return pointsA.every((point, index) => {
-            const compareTo = pointsB[index];
-            return Math.abs(point.x - compareTo.x) < 0.01 && Math.abs(point.y - compareTo.y) < 0.01;
-        });
-    }
-}
-//# sourceMappingURL=ProjectiveTransformExtension.js.map