@node-projects/web-component-designer 0.1.352 → 0.2.0

package/dist/elements/widgets/designerView/extensions/transforms/SkewExtension.js

@@ -0,0 +1,291 @@
+import { hasCommandKey } from '../../../../helper/KeyboardHelper.js';
+import { roundValue } from '../../../../helper/LayoutHelper.js';
+import { getElementSize } from '../../../../helper/getBoxQuads.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { getEdgeOffsetPoint, getQuadCenter } from '../../../../helper/QuadEdgeHandleHelper.js';
+export class SkewExtension extends AbstractExtension {
+    _skewXLine;
+    _skewYLine;
+    _skewXCircle;
+    _skewYCircle;
+    _skewXReferencePoint = { x: 0, y: 0 };
+    _skewYReferencePoint = { x: 0, y: 0 };
+    _activeAxis = null;
+    _baseTransform = '';
+    _skewX = 0;
+    _skewY = 0;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        const quad = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0];
+        if (!quad) {
+            return;
+        }
+        const points = [quad.p1, quad.p2, quad.p3, quad.p4];
+        if (points.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y))) {
+            this.remove();
+            return;
+        }
+        const zoomFactor = this.designerCanvas.zoomFactor;
+        if (!this._valuesHaveChanges(zoomFactor, ...points.flatMap(point => [point.x, point.y]))) {
+            return;
+        }
+        const quadCenter = getQuadCenter(quad);
+        const skewXHandleCanvas = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 56 / zoomFactor, { x: 0, y: -1 });
+        const skewXLineStartCanvas = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 48 / zoomFactor, { x: 0, y: -1 });
+        const skewXLineEndCanvas = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 38 / zoomFactor, { x: 0, y: -1 });
+        const skewYHandleCanvas = getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 30 / zoomFactor, { x: 1, y: 0 });
+        const skewYLineStartCanvas = getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 22 / zoomFactor, { x: 1, y: 0 });
+        const skewYLineEndCanvas = getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 6 / zoomFactor, { x: 1, y: 0 });
+        this._skewXLine = this._drawLine(skewXLineStartCanvas.x, skewXLineStartCanvas.y, skewXLineEndCanvas.x, skewXLineEndCanvas.y, 'svg-primary-skew-line', this._skewXLine);
+        this._skewYLine = this._drawLine(skewYLineStartCanvas.x, skewYLineStartCanvas.y, skewYLineEndCanvas.x, skewYLineEndCanvas.y, 'svg-primary-skew-line', this._skewYLine);
+        this._skewXLine.style.strokeWidth = (1 / zoomFactor).toString();
+        this._skewYLine.style.strokeWidth = (1 / zoomFactor).toString();
+        if (!this._skewXCircle) {
+            this._skewXCircle = this._drawCircle(skewXHandleCanvas.x, skewXHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewXCircle);
+            this._skewXCircle.addEventListener('pointerdown', event => this._handlePointerEvent('x', event));
+            this._skewXCircle.addEventListener('pointermove', event => this._handlePointerEvent('x', event));
+            this._skewXCircle.addEventListener('pointerup', event => this._handlePointerEvent('x', event));
+        }
+        else {
+            this._skewXCircle = this._drawCircle(skewXHandleCanvas.x, skewXHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewXCircle);
+        }
+        this._skewXCircle.style.strokeWidth = (1 / zoomFactor).toString();
+        this._skewXCircle.style.cursor = 'ew-resize';
+        if (!this._skewYCircle) {
+            this._skewYCircle = this._drawCircle(skewYHandleCanvas.x, skewYHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewYCircle);
+            this._skewYCircle.addEventListener('pointerdown', event => this._handlePointerEvent('y', event));
+            this._skewYCircle.addEventListener('pointermove', event => this._handlePointerEvent('y', event));
+            this._skewYCircle.addEventListener('pointerup', event => this._handlePointerEvent('y', event));
+        }
+        else {
+            this._skewYCircle = this._drawCircle(skewYHandleCanvas.x, skewYHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewYCircle);
+        }
+        this._skewYCircle.style.strokeWidth = (1 / zoomFactor).toString();
+        this._skewYCircle.style.cursor = 'ns-resize';
+        this._skewYCircle.style.fill = '#eaf5ff';
+    }
+    _handlePointerEvent(axis, event) {
+        event.stopPropagation();
+        const target = event.target;
+        switch (event.type) {
+            case 'pointerdown':
+                target.setPointerCapture(event.pointerId);
+                this._readPersistedTransform();
+                if (axis === 'x') {
+                    this._skewXReferencePoint = this._getSkewReferencePoint('x');
+                }
+                else {
+                    this._skewYReferencePoint = this._getSkewReferencePoint('y');
+                }
+                this._activeAxis = axis;
+                break;
+            case 'pointermove':
+                if (this._activeAxis === axis && event.buttons > 0) {
+                    const angle = this._getSkewAngle(axis, event);
+                    if (axis === 'x') {
+                        this._skewX = angle;
+                    }
+                    else {
+                        this._skewY = angle;
+                    }
+                    this._setPreviewTransform();
+                }
+                break;
+            case 'pointerup':
+                if (this._activeAxis === axis) {
+                    target.releasePointerCapture(event.pointerId);
+                    const angle = this._getSkewAngle(axis, event);
+                    if (axis === 'x') {
+                        this._skewX = angle;
+                    }
+                    else {
+                        this._skewY = angle;
+                    }
+                    this._commitTransform();
+                    this._activeAxis = null;
+                }
+                break;
+        }
+    }
+    _readPersistedTransform() {
+        const { baseTransform, skewX, skewY } = this._parseTransform(this.extendedItem.getStyleFromSheetOrLocal('transform') ?? '');
+        this._baseTransform = baseTransform;
+        this._skewX = skewX;
+        this._skewY = skewY;
+    }
+    _getSkewReferencePoint(axis) {
+        const element = this.extendedItem.element;
+        const size = getElementSize(this.extendedItem.element);
+        const zoomFactor = this.designerCanvas.zoomFactor;
+        const fallback = axis === 'x'
+            ? { x: size.width / 2, y: -56 / zoomFactor }
+            : { x: size.width + 30 / zoomFactor, y: size.height / 2 };
+        const inlineTransform = element.style.transform;
+        try {
+            element.style.transform = this._buildTransform(this._baseTransform, axis === 'x' ? 0 : this._skewX, axis === 'y' ? 0 : this._skewY);
+            const quad = element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0];
+            if (!quad) {
+                return fallback;
+            }
+            const quadCenter = getQuadCenter(quad);
+            const handlePoint = axis === 'x'
+                ? getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 56 / zoomFactor, { x: 0, y: -1 })
+                : getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 30 / zoomFactor, { x: 1, y: 0 });
+            const localPoint = element.convertPointFromNode(handlePoint, this.designerCanvas.canvas);
+            if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) {
+                return fallback;
+            }
+            return { x: localPoint.x, y: localPoint.y };
+        }
+        finally {
+            element.style.transform = inlineTransform;
+        }
+    }
+    _setPreviewTransform() {
+        this.extendedItem.element.style.transform = this._buildTransform(this._baseTransform, this._skewX, this._skewY);
+    }
+    _commitTransform() {
+        const finalTransform = this._buildTransform(this._baseTransform, this._skewX, this._skewY);
+        if (finalTransform) {
+            this.extendedItem.updateStyleInSheetOrLocal('transform', finalTransform);
+        }
+        else if (this.extendedItem.hasStyle('transform')) {
+            this.extendedItem.removeStyle('transform');
+        }
+        else {
+            this.extendedItem.updateStyleInSheetOrLocal('transform', null);
+        }
+        const element = this.extendedItem.element;
+        if (this.extendedItem.hasStyle('transform')) {
+            element.style.transform = this.extendedItem.getStyle('transform') ?? '';
+        }
+        else {
+            element.style.transform = '';
+        }
+    }
+    _getSkewAngle(axis, event) {
+        const element = this.extendedItem.element;
+        element.style.transform = this._buildTransform(this._baseTransform, axis === 'x' ? 0 : this._skewX, axis === 'y' ? 0 : this._skewY);
+        const mousePoint = this.designerCanvas.getNormalizedEventCoordinates(event);
+        const localPoint = element.convertPointFromNode({ x: mousePoint.x, y: mousePoint.y }, this.designerCanvas.canvas);
+        const computedStyle = getComputedStyle(element);
+        const transformOrigin = computedStyle.transformOrigin.split(' ');
+        const origin = { x: parseFloat(transformOrigin[0]), y: parseFloat(transformOrigin[1]) };
+        const size = getElementSize(element);
+        let angle;
+        if (axis === 'x') {
+            let referenceY = this._skewXReferencePoint.y - origin.y;
+            if (Math.abs(referenceY) < 0.5) {
+                referenceY = -Math.max(size.height / 2, 1);
+            }
+            angle = Math.atan((localPoint.x - origin.x) / referenceY) * 180 / Math.PI;
+        }
+        else {
+            let referenceX = this._skewYReferencePoint.x - origin.x;
+            if (Math.abs(referenceX) < 0.5) {
+                referenceX = Math.max(size.width / 2, 1);
+            }
+            angle = Math.atan((localPoint.y - origin.y) / referenceX) * 180 / Math.PI;
+        }
+        angle = Math.max(-80, Math.min(80, angle));
+        if (!hasCommandKey(event)) {
+            angle = Math.round(angle / 15) * 15;
+        }
+        return parseFloat(roundValue(this.extendedItem, angle));
+    }
+    _buildTransform(baseTransform, skewX, skewY) {
+        const transforms = [];
+        if (baseTransform?.trim()) {
+            transforms.push(baseTransform.trim());
+        }
+        if (Math.abs(skewX) > 0.001) {
+            transforms.push(`skewX(${skewX}deg)`);
+        }
+        if (Math.abs(skewY) > 0.001) {
+            transforms.push(`skewY(${skewY}deg)`);
+        }
+        return transforms.join(' ').trim();
+    }
+    _parseTransform(transform) {
+        if (!transform || transform === 'none') {
+            return { baseTransform: '', skewX: 0, skewY: 0 };
+        }
+        let skewX = 0;
+        let skewY = 0;
+        const baseTransforms = [];
+        for (const part of this._splitTransformFunctions(transform)) {
+            const functionName = part.slice(0, part.indexOf('(')).trim().toLowerCase();
+            const argumentsText = part.slice(part.indexOf('(') + 1, -1);
+            const argumentsList = argumentsText.split(',').map(value => value.trim());
+            if (functionName === 'skewx') {
+                skewX = this._parseAngle(argumentsList[0]);
+            }
+            else if (functionName === 'skewy') {
+                skewY = this._parseAngle(argumentsList[0]);
+            }
+            else if (functionName === 'skew') {
+                skewX = this._parseAngle(argumentsList[0]);
+                if (argumentsList.length > 1) {
+                    skewY = this._parseAngle(argumentsList[1]);
+                }
+            }
+            else {
+                baseTransforms.push(part);
+            }
+        }
+        return { baseTransform: baseTransforms.join(' ').trim(), skewX, skewY };
+    }
+    _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;
+    }
+    _parseAngle(value) {
+        if (!value) {
+            return 0;
+        }
+        const numericValue = parseFloat(value);
+        if (isNaN(numericValue)) {
+            return 0;
+        }
+        if (value.endsWith('rad')) {
+            return numericValue * 180 / Math.PI;
+        }
+        if (value.endsWith('grad')) {
+            return numericValue * 0.9;
+        }
+        if (value.endsWith('turn')) {
+            return numericValue * 360;
+        }
+        return numericValue;
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}
+//# sourceMappingURL=SkewExtension.js.map

package/dist/elements/widgets/designerView/extensions/transforms/SkewExtension.js.map

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

package/dist/elements/widgets/designerView/extensions/transforms/SkewExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+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 class SkewExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    static readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/transforms/SkewExtensionProvider.js

@@ -0,0 +1,20 @@
+import { SkewExtension } from './SkewExtension.js';
+import { css } from '@node-projects/base-custom-webcomponent';
+export class SkewExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        if (designerCanvas.readOnly)
+            return false;
+        if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) {
+            return false;
+        }
+        return !designItem.isRootItem;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new SkewExtension(extensionManager, designerCanvas, designItem);
+    }
+    static style = css `
+    .svg-primary-skew { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; }
+    .svg-primary-skew-line { stroke: #3899ec; fill: none; stroke-width: 1; }
+  `;
+}
+//# sourceMappingURL=SkewExtensionProvider.js.map

package/dist/elements/widgets/designerView/extensions/transforms/SkewExtensionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkewExtensionProvider.js","sourceRoot":"","sources":["../../../../../../src/elements/widgets/designerView/extensions/transforms/SkewExtensionProvider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAE9D,MAAM,OAAO,qBAAqB;IAChC,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,IAAI,cAAc,CAAC,QAAQ;YACzB,OAAO,KAAK,CAAC;QACf,IAAI,UAAU,CAAC,OAAO,YAAY,UAAU,IAAI,UAAU,CAAC,OAAO,YAAY,mBAAmB,EAAE,CAAC;YAClG,OAAO,KAAK,CAAC;QACf,CAAC;QACD,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC;IAChC,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,cAA+B,EAAE,UAAuB;QACxG,OAAO,IAAI,aAAa,CAAC,gBAAgB,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,CAAU,KAAK,GAAG,GAAG,CAAA;;;GAG1B,CAAC"}

package/dist/elements/widgets/designerView/extensions/transforms/TransformOriginExtension.d.ts

@@ -0,0 +1,16 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class TransformOriginExtension extends AbstractExtension {
+    private _startPos;
+    private _circle;
+    private _circle2;
+    private _oldValue;
+    private _offsetInControl;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    pointerEvent(event: PointerEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/transforms/TransformOriginExtension.js

@@ -0,0 +1,122 @@
+import { EventNames } from '../../../../../enums/EventNames.js';
+import { convertCssUnit, getCssUnit } from '../../../../helper/CssUnitConverter.js';
+import { getBoundingClientRectAlsoForDisplayContents } from '../../../../helper/ElementHelper.js';
+import { clearCache } from '../../../../helper/getBoxQuads.js';
+import { roundValue } from '../../../../helper/LayoutHelper.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+export class TransformOriginExtension extends AbstractExtension {
+    _startPos;
+    _circle;
+    _circle2;
+    _oldValue;
+    _offsetInControl;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    refresh(cache, event) {
+        const computed = getComputedStyle(this.extendedItem.element);
+        const to = computed.transformOrigin.split(' ');
+        const toDOMPoint = this.designerCanvas.canvas.convertPointFromNode({ x: parseFloat(to[0]), y: parseFloat(to[1]) }, this.extendedItem.element);
+        if (this._valuesHaveChanges(toDOMPoint.x, toDOMPoint.y, this.designerCanvas.zoomFactor)) {
+            this._removeAllOverlays();
+            this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
+            this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+            this._circle.style.cursor = 'pointer';
+            this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
+            this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+            this._circle2.style.pointerEvents = 'none';
+            this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
+            this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
+            this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event));
+        }
+    }
+    extend(cache, event) {
+        const computed = getComputedStyle(this.extendedItem.element);
+        const to = computed.transformOrigin.split(' ');
+        const toDOMPoint = this.designerCanvas.canvas.convertPointFromNode({ x: parseFloat(to[0]), y: parseFloat(to[1]) }, this.extendedItem.element);
+        if (isNaN(toDOMPoint.x) || isNaN(toDOMPoint.y)) {
+            this.remove();
+            return;
+        }
+        else {
+            let old = this.extendedItem.getStyleFromSheetOrLocal('transform-origin');
+            if (old) {
+                this._oldValue = old;
+            }
+            this.refresh(cache, event);
+        }
+    }
+    pointerEvent(event) {
+        event.stopPropagation();
+        const computed = getComputedStyle(this.extendedItem.element);
+        const to = computed.transformOrigin.split(' ');
+        const toInPercentage = [];
+        toInPercentage[0] = parseFloat(to[0]) / parseFloat(this.extendedItem.element.style.width);
+        toInPercentage[1] = parseFloat(to[1]) / parseFloat(this.extendedItem.element.style.height);
+        const toDOMPoint = this.designerCanvas.canvas.convertPointFromNode({ x: parseFloat(to[0]), y: parseFloat(to[1]) }, this.extendedItem.element);
+        const mp = this.designerCanvas.getNormalizedEventCoordinates(event);
+        const evPoint = this.extendedItem.element.convertPointFromNode(mp, this.designerCanvas.canvas);
+        const normalized = this.designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                const rect = getBoundingClientRectAlsoForDisplayContents(event.target);
+                this._offsetInControl = { x: rect.width / 2 + (rect.x - event.x), y: rect.height / 2 + (rect.y - event.y) };
+                this._startPos = { x: normalized.x, y: normalized.y };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    const dx = normalized.x - this._startPos.x;
+                    const dy = normalized.y - this._startPos.y;
+                    this._circle.setAttribute('cx', (toDOMPoint.x + dx));
+                    this._circle.setAttribute('cy', (toDOMPoint.y + dy));
+                    this._circle2.setAttribute('cx', (toDOMPoint.x + dx));
+                    this._circle2.setAttribute('cy', (toDOMPoint.y + dy));
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                if (this._startPos) {
+                    evPoint.x += this._offsetInControl.x;
+                    evPoint.y += this._offsetInControl.y;
+                    const cg = this.extendedItem.openGroup('change transform-origin');
+                    const quadsOld = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.rootDesignItem.element })[0];
+                    if (this._oldValue) {
+                        try {
+                            const oldSplit = this._oldValue.split(' ');
+                            let newXs = convertCssUnit(evPoint.x, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]), (nr) => roundValue(this.extendedItem, nr));
+                            let newYs = convertCssUnit(evPoint.x, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]), (nr) => roundValue(this.extendedItem, nr));
+                            if (oldSplit.length > 1) {
+                                newYs = convertCssUnit(evPoint.y, this.extendedItem.element, 'height', getCssUnit(oldSplit[1]), (nr) => roundValue(this.extendedItem, nr));
+                            }
+                            this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newXs + ' ' + newYs);
+                        }
+                        catch (err) {
+                            this.extendedItem.updateStyleInSheetOrLocal('transform-origin', roundValue(this.extendedItem, evPoint.x) + 'px' + ' ' + roundValue(this.extendedItem, evPoint.y) + 'px');
+                        }
+                    }
+                    else
+                        this.extendedItem.updateStyleInSheetOrLocal('transform-origin', roundValue(this.extendedItem, evPoint.x) + 'px' + ' ' + roundValue(this.extendedItem, evPoint.y) + 'px');
+                    clearCache(); //clear box quads cache to make sure we get the new quads with the updated transform origin
+                    const quadsNew = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.rootDesignItem.element })[0];
+                    const translateP = { x: quadsOld.p1.x - quadsNew.p1.x, y: quadsOld.p1.y - quadsNew.p1.y };
+                    if (computed.translate && computed.translate !== 'none') {
+                        translateP.x += parseFloat(computed.translate.split(' ')[0]);
+                        if (computed.translate.split(' ').length === 1)
+                            translateP.y += parseFloat(computed.translate.split(' ')[0]);
+                        else
+                            translateP.y += parseFloat(computed.translate.split(' ')[1]);
+                    }
+                    this.extendedItem.updateStyleInSheetOrLocal('translate', roundValue(this.extendedItem, translateP.x) + 'px' + ' ' + roundValue(this.extendedItem, translateP.y) + 'px');
+                    cg.commit();
+                    this.refresh(null, null);
+                    this._startPos = null;
+                }
+                break;
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}
+//# sourceMappingURL=TransformOriginExtension.js.map

package/dist/elements/widgets/designerView/extensions/transforms/TransformOriginExtension.js.map

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

package/dist/elements/widgets/designerView/extensions/transforms/TransformOriginExtensionProvider.d.ts

@@ -0,0 +1,12 @@
+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 class TransformOriginExtensionProvider implements IDesignerExtensionProvider {
+    showOnlyWhenSet: boolean;
+    constructor(showOnlyWhenSet?: boolean);
+    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/transforms/TransformOriginExtensionProvider.js

@@ -0,0 +1,34 @@
+import { TransformOriginExtension } from './TransformOriginExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { getBoundingClientRectAlsoForDisplayContents } from '../../../../helper/ElementHelper.js';
+export class TransformOriginExtensionProvider {
+    showOnlyWhenSet;
+    constructor(showOnlyWhenSet = true) {
+        this.showOnlyWhenSet = showOnlyWhenSet;
+    }
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (!designItem.isRootItem && designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg')) {
+            if (!this.showOnlyWhenSet)
+                return true;
+            if (designItem.hasStyle('transformOrigin'))
+                return true;
+            const cs = getComputedStyle(designItem.element);
+            if (cs.display != 'inline' && designItem.element.getBoundingClientRect) {
+                const r = getBoundingClientRectAlsoForDisplayContents(designItem.element);
+                const pr = cs.transformOrigin.split(' ');
+                const x = parseFloat(pr[0]) - r.width / 2;
+                const y = parseFloat(pr[1]) - r.height / 2;
+                if (x > 0.5 || x < -0.5 || y > 0.5 || y < -0.5)
+                    return true;
+            }
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new TransformOriginExtension(extensionManager, designerView, designItem);
+    }
+    static style = css `
+    .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: auto; }
+  `;
+}
+//# sourceMappingURL=TransformOriginExtensionProvider.js.map

package/dist/elements/widgets/designerView/extensions/transforms/TransformOriginExtensionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformOriginExtensionProvider.js","sourceRoot":"","sources":["../../../../../../src/elements/widgets/designerView/extensions/transforms/TransformOriginExtensionProvider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEzE,OAAO,EAAE,GAAG,EAAE,MAAM,yCAAyC,CAAC;AAC9D,OAAO,EAAE,2CAA2C,EAAE,MAAM,qCAAqC,CAAC;AAElG,MAAM,OAAO,gCAAgC;IAC3C,eAAe,CAAU;IAEzB,YAAY,eAAe,GAAG,IAAI;QAChC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IACzC,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,YAA6B,EAAE,UAAuB;QACtG,IAAI,CAAC,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,YAAY,WAAW,IAAI,CAAC,UAAU,CAAC,IAAI,YAAY,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,EAAE,CAAC;YACvJ,IAAI,CAAC,IAAI,CAAC,eAAe;gBACvB,OAAO,IAAI,CAAC;YACd,IAAI,UAAU,CAAC,QAAQ,CAAC,iBAAiB,CAAC;gBACxC,OAAO,IAAI,CAAC;YACd,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAChD,IAAI,EAAE,CAAC,OAAO,IAAI,QAAQ,IAAI,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;gBACvE,MAAM,CAAC,GAAG,2CAA2C,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;gBAC1E,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACzC,MAAM,CAAC,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC1C,MAAM,CAAC,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC3C,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG;oBAC5C,OAAO,IAAI,CAAC;YAChB,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,YAAY,CAAC,gBAAmC,EAAE,YAA6B,EAAE,UAAuB;QACtG,OAAO,IAAI,wBAAwB,CAAC,gBAAgB,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;IAClF,CAAC;IAED,MAAM,CAAU,KAAK,GAAG,GAAG,CAAA;;GAE1B,CAAC"}

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -230,7 +230,7 @@ export class PointerTool {
                         for (let i = 0; i < this._clonedItems.length; i++) {
                             this._actionStartedDesignItems[i].insertAdjacentElement(this._clonedItems[i], 'beforebegin');
                         }
-                        designerCanvas.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this._clonedItems });
+                        //TODO: check if this is needed? designerCanvas.instanceServiceContainer.onContentChanged.emit({ changeType: 'added', designItems: this._clonedItems });
                     }
                     else if (!hasCommandKey(event) && this._copiedItemsInserted) {
                         this._changeGroup.title = "Move Elements";
@@ -238,7 +238,7 @@ export class PointerTool {
                             d.remove();
                         }
                         this._copiedItemsInserted = false;
-                        designerCanvas.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this._clonedItems });
+                        //TODO: check if this is needed? designerCanvas.instanceServiceContainer.onContentChanged.emit({ changeType: 'removed', designItems: this._clonedItems });
                     }
                     // *** End Copy Items Part ***
                     const elementMoved = currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y;