@node-projects/web-component-designer 0.0.152 → 0.0.154

package/ACKNOWLEDGMENTS

@@ -6,4 +6,8 @@
 - Thanks to @chdh for plain-scrollbar component
   https://github.com/chdh/plain-scrollbar
 - Thanks to @m-thalmann for contextmenujs
-  https://github.com/m-thalmann/contextmenujs (also we have heavily modified it)
+  https://github.com/m-thalmann/contextmenujs (also we have heavily modified it)
+- Levi Cole for parts of the cssUnits conversion code
+  https://stackoverflow.com/a/66569574/579623
+- Domi for text-width code
+  https://stackoverflow.com/a/21015393

package/dist/elements/controls/MetricsEditor.d.ts

@@ -8,7 +8,7 @@ export declare class MetricsEditor extends BaseCustomWebComponentConstructorAppe
     static readonly template: HTMLTemplateElement;
     property: string;
     unsetValue: string;
-    _updateValue(): void;
     ready(): void;
     onDoubleClick(event: PointerEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
 }

package/dist/elements/controls/MetricsEditor.js

@@ -30,7 +30,7 @@ export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
 }
 
 div.ct {
-  width:280px;height:180px;
+  width:280px;height:120px;
 }
 
 div span {
@@ -83,44 +83,43 @@ span {
 }`;
     static template = html `
   <div class="ct"><span title="position">position</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span title="margin">margin</span>
-  <div id="testdiv" [contentEditable]="contentEditable"  @dblclick="onDoubleClick" class="top">-</div><br><div class="left">-</div><div class="ct"><span title="border">border</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span title="padding">padding</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct" style="font-size:6px"><div class="left">-</div>
-  x
-  <div class="right">-</div>
-  </div><div class="right">-</div><br><div class="bottom">-</div></div><div class="right">-</div><br><div class="bottom">-</div></div><div class="right">-</div><br><div class="bottom">-</div></div><div class="right">-</div><br><div class="bottom">-</div></div>
+  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="margin">margin</span>
+  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="border">border</span>
+  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct"><span title="padding">padding</span>
+  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
+  &nbsp;x&nbsp;
+  <div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div>
+  </div><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div>
   `;
     property;
     unsetValue;
-    //private _root: HTMLDivElement;
-    //private _contentEditable: HTMLDivElement;
-    _updateValue() {
-    }
     ready() {
-        //this._root = this._getDomElement<HTMLDivElement>("testdiv");
         this._parseAttributesToProperties();
-        this._updateValue();
         this._assignEvents();
     }
     onDoubleClick(event) {
-        let element = this._getDomElement("testdiv");
-        // contentEditable setzten
+        const element = event.target;
         element.setAttribute("contentEditable", "");
-        // - rausnehmen
-        element.innerHTML = "-";
-        // Input auswerten
-        //Input in div schreiben
-        // contentEditable false setzen mit EnterTaste
-        element.onkeydown = (e) => {
-            if (e.key == "Enter") {
-                let _input = element.innerHTML;
-                //let value = document.createElement("input");
-                element.style.marginTop = _input;
-                element.removeAttribute("contentEditable");
-                element.innerHTML = "-";
-            }
-        };
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild, 0);
+        range.setEndAfter(element.lastChild);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    onKeyDown(event) {
+        const element = event.target;
+        if (event.key == "Enter") {
+            element.removeAttribute("contentEditable");
+            const value = element.innerHTML;
+            const valueChangedEvent = new CustomEvent('value-changed', {
+                detail: {
+                    style: element.dataset['style'],
+                    value: value
+                }
+            });
+            this.dispatchEvent(valueChangedEvent);
+        }
     }
 }
 customElements.define('node-projects-metrics-editor', MetricsEditor);

package/dist/elements/helper/CssUnitConverter.d.ts

@@ -0,0 +1,3 @@
+export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'heigth'): number;
+export declare function getCssUnit(cssValue: string): string;
+export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'heigth', unit: string): string | number;

package/dist/elements/helper/CssUnitConverter.js

@@ -0,0 +1,85 @@
+//unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh
+const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn'];
+const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i');
+export function convertCssUnitToPixel(cssValue, target, percentTarget) {
+    const supportedUnits = {
+        // Absolute sizes
+        'px': value => value,
+        'cm': value => value * 38,
+        'mm': value => value * 3.8,
+        'q': value => value * 0.95,
+        'in': value => value * 96,
+        'pc': value => value * 16,
+        'pt': value => value * 1.333333,
+        // Relative sizes
+        'rem': value => value * parseFloat(getComputedStyle(document.documentElement).fontSize),
+        'em': value => value * parseFloat(getComputedStyle(target).fontSize),
+        'vw': value => value / 100 * window.innerWidth,
+        'vh': value => value / 100 * window.innerHeight,
+        'vmin': value => value / 100 * (window.innerHeight < window.innerWidth ? window.innerHeight : window.innerWidth),
+        'vmax': value => value / 100 * (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
+        'lh': value => value * parseFloat(getComputedStyle(target).lineHeight),
+        'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
+        '%': value => value / 100 * (percentTarget == 'heigth' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        // Times
+        'ms': value => value,
+        's': value => value * 1000,
+        // Angles
+        'deg': value => value,
+        'rad': value => value * (180 / Math.PI),
+        'grad': value => value * (180 / 200),
+        'turn': value => value * 360
+    };
+    // If is a match, return example: [ "-2.75rem", "-2.75", "rem" ]
+    const matches = cssValue.trim().match(pattern);
+    if (matches) {
+        const value = Number(matches[1]);
+        const unit = matches[2].toLowerCase();
+        // Sanity check, make sure unit conversion function exists
+        if (unit in supportedUnits) {
+            return supportedUnits[unit](value);
+        }
+    }
+    //@ts-ignore
+    return cssValue;
+}
+export function getCssUnit(cssValue) {
+    const matches = cssValue.trim().match(pattern);
+    return matches[2].toLowerCase();
+}
+export function convertCssUnit(cssValue, target, percentTarget, unit) {
+    const supportedUnits = {
+        // Absolute sizes
+        'px': value => value,
+        'cm': value => value / 38,
+        'mm': value => value / 3.8,
+        'q': value => value / 0.95,
+        'in': value => value / 96,
+        'pc': value => value / 16,
+        'pt': value => value / 1.333333,
+        // Relative sizes
+        'rem': value => value / parseFloat(getComputedStyle(document.documentElement).fontSize),
+        'em': value => value / parseFloat(getComputedStyle(target).fontSize),
+        'vw': value => value * 100 / window.innerWidth,
+        'vh': value => value * 100 / window.innerHeight,
+        'vmin': value => value * 100 / (window.innerHeight < window.innerWidth ? window.innerHeight : window.innerWidth),
+        'vmax': value => value * 100 / (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
+        'lh': value => value / parseFloat(getComputedStyle(target).lineHeight),
+        'rlh': value => value / parseFloat(getComputedStyle(document.documentElement).lineHeight),
+        '%': value => value * 100 / (percentTarget == 'heigth' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        // Times
+        'ms': value => value,
+        's': value => value / 1000,
+        // Angles
+        'deg': value => value,
+        'rad': value => value / (180 / Math.PI),
+        'grad': value => value / (180 / 200),
+        'turn': value => value / 360
+    };
+    if (typeof cssValue == 'string')
+        cssValue = convertCssUnitToPixel(cssValue, target, percentTarget);
+    if (unit in supportedUnits) {
+        return supportedUnits[unit](cssValue) + unit;
+    }
+    return cssValue;
+}

package/dist/elements/helper/TextHelper.d.ts

@@ -0,0 +1,10 @@
+/**
+  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+  *
+  * @param {String} text The text to be rendered.
+  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+  *
+  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+  */
+export declare function getTextWidth(text: string, font: string): number;
+export declare function getFont(el: Element): string;

package/dist/elements/helper/TextHelper.js

@@ -0,0 +1,23 @@
+let canvas;
+/**
+  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+  *
+  * @param {String} text The text to be rendered.
+  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+  *
+  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+  */
+export function getTextWidth(text, font) {
+    if (!canvas)
+        canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    context.font = font;
+    const metrics = context.measureText(text);
+    return metrics.width;
+}
+export function getFont(el) {
+    const fontWeight = getComputedStyle(el).fontWeight || 'normal';
+    const fontSize = getComputedStyle(el).fontSize || '16px';
+    const fontFamily = getComputedStyle(el).fontFamily || 'Times New Roman';
+    return `${fontWeight} ${fontSize} ${fontFamily}`;
+}

package/dist/elements/helper/TransformHelper.d.ts

@@ -12,7 +12,8 @@ export declare function addVectors(vectorA: [number, number], vectorB: [number,
 export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
 export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
 export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
-export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: number, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
+export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
 export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
 export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
 export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;

package/dist/elements/helper/TransformHelper.js

@@ -123,11 +123,15 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     }
     return byParentTransformedPointRelatedToCanvas;
 }
+export function getDesignerCanvasNormalizedTransformedPoint(element, point, designerCanvas) {
+    return getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, { x: -point.x, y: -point.y }, designerCanvas)[0];
+}
 export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
     const topleft = 0;
     const topright = 1;
     const bottomleft = 2;
     const bottomright = 3;
+    const intUntransformedCornerPointsOffset = untransformedCornerPointsOffset ? { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor } : { x: 0, y: 0 };
     const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
     const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
         x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
@@ -151,20 +155,20 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
     }
     const elementWithoutTransformCornerDOMPoints = [];
     elementWithoutTransformCornerDOMPoints[topleft] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x - untransformedCornerPointsOffset,
-        y: p0OffsetsRelatedToCanvas.y - untransformedCornerPointsOffset
+        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
     });
     elementWithoutTransformCornerDOMPoints[topright] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + width + untransformedCornerPointsOffset,
-        y: p0OffsetsRelatedToCanvas.y - untransformedCornerPointsOffset
+        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
     });
     elementWithoutTransformCornerDOMPoints[bottomleft] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x - untransformedCornerPointsOffset,
-        y: p0OffsetsRelatedToCanvas.y + height + untransformedCornerPointsOffset
+        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
     });
     elementWithoutTransformCornerDOMPoints[bottomright] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + width + untransformedCornerPointsOffset,
-        y: p0OffsetsRelatedToCanvas.y + height + untransformedCornerPointsOffset
+        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
     });
     const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
         x: p0OffsetsRelatedToCanvas.x + parseInt(getComputedStyle(element).transformOrigin.split(' ')[0]),

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -57,18 +57,22 @@ export class FlexBoxPlacementService {
             if (elBefore && elBefore[0] != items[0]) {
                 if (posBefore + 1 === posDrag)
                     return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
                 items[0].remove();
                 elBefore[0].insertAdjacentElement(items[0], 'afterend');
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
             else if (elBefore == null) {
                 if (posDrag == 0)
                     return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
                 items[0].remove();
                 container.insertChild(items[0], 0);
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
         }
         else if (style.flexDirection == 'column') {
@@ -84,18 +88,22 @@ export class FlexBoxPlacementService {
             if (elBefore && elBefore[0] != items[0]) {
                 if (posBefore + 1 === posDrag)
                     return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
                 items[0].remove();
                 elBefore[0].insertAdjacentElement(items[0], 'afterend');
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
             else if (elBefore == null) {
                 if (posDrag == 0)
                     return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
                 items[0].remove();
                 container.insertChild(items[0], 0);
                 cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
         }
         placementView.extensionManager.refreshAllExtensions([container]);

package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts

@@ -12,4 +12,5 @@ export declare class CssPropertiesService extends CommonPropertiesService {
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
 }

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -203,4 +203,12 @@ export class CssPropertiesService extends CommonPropertiesService {
     getPropertyTarget(designItem, property) {
         return BindingTarget.css;
     }
+    setValue(designItems, property, value) {
+        if (this.name == 'styles') {
+            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+        }
+        else {
+            super.setValue(designItems, property, value);
+        }
+    }
 }

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

@@ -5,6 +5,7 @@ import { IExtensionManager } from "./IExtensionManger";
 export declare class ElementDragTitleExtension extends AbstractExtension {
     private _rect;
     private _text;
+    private _width;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     _drawMoveOverlay(itemRect: DOMRect): void;

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

@@ -1,15 +1,26 @@
+import { getTextWidth } from "../../../helper/TextHelper";
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
 import { NamedTools } from "../tools/NamedTools.js";
 import { AbstractExtension } from './AbstractExtension';
+const extensionWidth = 60;
 export class ElementDragTitleExtension extends AbstractExtension {
     _rect;
     _text;
+    _width;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         const boundRect = this.extendedItem.element.getBoundingClientRect();
-        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+        let w = getTextWidth(this.extendedItem.name, '10px monospace');
+        let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
+        let text = this.extendedItem.name;
+        this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
+        if (w > this._width)
+            text = this.extendedItem.name.substring(0, 10) + '…';
+        this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(text, (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
         const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
         title.textContent = this.extendedItem.name;
         this._text.appendChild(title);
@@ -21,21 +32,22 @@ export class ElementDragTitleExtension extends AbstractExtension {
     _drawMoveOverlay(itemRect) {
     }
     refresh() {
-        const boundRect = this.extendedItem.element.getBoundingClientRect();
-        const xr = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas);
+        const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
+        const transformedCornerPointsTx = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 5 }, this.designerCanvas);
         const h = (15 / this.designerCanvas.scaleFactor);
-        const w = (60 / this.designerCanvas.scaleFactor);
-        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - h;
-        this._rect.setAttribute('x', xr);
-        this._rect.setAttribute('y', yr);
+        const w = (this._width / this.designerCanvas.scaleFactor);
+        this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
+        this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
+        this._rect.style.rotate = angle + 'deg';
+        this._rect.style.transformBox = 'fill-box';
         this._rect.setAttribute('height', '' + h);
         this._rect.setAttribute('width', '' + w);
         this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
-        const x = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5 / this.designerCanvas.scaleFactor;
-        this._text.setAttribute('x', x);
-        this._text.setAttribute('y', y);
+        this._text.setAttribute('x', '' + transformedCornerPointsTx[0].x);
+        this._text.setAttribute('y', '' + transformedCornerPointsTx[0].y);
         this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
+        this._text.setAttribute('transform', 'rotate(' + angle + ' ' + transformedCornerPointsTx[0].x + ' ' + transformedCornerPointsTx[0].y + ')');
     }
     _pointerEvent(event) {
         event.preventDefault();

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

@@ -42,7 +42,7 @@ export class ExtensionManager {
             const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
             this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
         }
-        this.refreshExtensions(selectionChangedEvent.selectedElements);
+        //this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
     applyExtension(designItem, extensionType, recursive = false) {
         if (designItem && designItem.nodeType == NodeType.Element) {

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

@@ -7,7 +7,7 @@ export class FlexboxExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         this._path = this._drawTransformedRect(transformedCornerPoints, 'svg-flexbox', this._path, OverlayLayer.Background);
     }
     refresh() {

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

@@ -10,7 +10,7 @@ export class GrayOutDragOverContainerExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-rect-enter-container', this._rect, OverlayLayer.Background);
     }
     dispose() {

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

@@ -10,7 +10,7 @@ export class InvisibleDivExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-invisible-div', this._rect, OverlayLayer.Background);
     }
     dispose() {

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

@@ -10,7 +10,7 @@ export class MouseOverExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, offset, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: offset, y: offset }, this.designerCanvas);
         this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect);
         this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
     }

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

@@ -26,7 +26,7 @@ export class ResizeExtension extends AbstractExtension {
     }
     refresh() {
         //#region Resizer circles
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
         this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
         this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);

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

@@ -20,7 +20,7 @@ export class RotateExtension extends AbstractExtension {
         this._rotateIcon = this._drawRotateOverlay(rect, this._rotateIcon);
     }
     _drawRotateOverlay(itemRect, oldRotateIcon) {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 10, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 10, y: 10 }, this.designerCanvas);
         let rotateIconPosition = transformedCornerPoints[0];
         if (!oldRotateIcon) {
             const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -40,13 +40,13 @@ export class RotateExtension extends AbstractExtension {
             g.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeRotate(event));
             g.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeRotate(event));
             g.setAttribute('class', 'svg-primary-rotate');
-            g.setAttribute('transform', 'translate(' + rotateIconPosition.x + ',' + rotateIconPosition.y + ')');
+            g.setAttribute('transform', 'translate(' + rotateIconPosition.x + ',' + rotateIconPosition.y + ') scale(' + 1 / this.designerCanvas.scaleFactor + ')');
             this.overlayLayerView.addOverlay(g);
             this.overlays.push(g);
             return g;
         }
         else {
-            oldRotateIcon.setAttribute('transform', 'translate(' + rotateIconPosition.x + ',' + rotateIconPosition.y + ')');
+            oldRotateIcon.setAttribute('transform', 'translate(' + rotateIconPosition.x + ',' + rotateIconPosition.y + ') scale(' + 1 / this.designerCanvas.scaleFactor + ')');
             return oldRotateIcon;
         }
     }
@@ -75,10 +75,12 @@ export class RotateExtension extends AbstractExtension {
                     let angle = Math.atan2(currentPoint.y - transformOriginInPx.y, currentPoint.x - transformOriginInPx.x) * (180 / Math.PI);
                     angle = angle - this._initialOverlayAngle + this._initialElementAngle;
                     angle *= -1;
+                    if (!event.ctrlKey)
+                        angle = Math.ceil(angle / 15) * 15;
                     const rotationMatrix3d = getRotationMatrix3d('z', angle);
                     rotateElementByMatrix3d(this.extendedItem.element, rotationMatrix3d);
-                    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 30, this.designerCanvas);
-                    let angleTextPosition = transformedCornerPoints[0];
+                    const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 30, y: 30 }, this.designerCanvas);
+                    const angleTextPosition = transformedCornerPoints[0];
                     this._textAngle = this._drawTextWithBackground(this._actualRotationAngle + '°', angleTextPosition.x, angleTextPosition.y, 'white', 'svg-rotate-text', this._textAngle);
                     this._textAngle[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
                     this._textAngle[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';

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

@@ -12,7 +12,7 @@ export class SelectionDefaultExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
         this._line1 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'svg-selection', this._line1);
         this._line2 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'svg-selection', this._line2);
         this._line3 = this._drawLine(transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-selection', this._line3);

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

@@ -6,6 +6,7 @@ export declare class TransformOriginExtension extends AbstractExtension {
     private _startPos;
     private _circle;
     private _circle2;
+    private _oldValue;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent): void;

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

@@ -1,33 +1,30 @@
 import { EventNames } from "../../../../enums/EventNames";
+import { convertCssUnit, getCssUnit } from "../../../helper/CssUnitConverter";
+import { getDesignerCanvasNormalizedTransformedPoint } from "../../../helper/TransformHelper";
 import { AbstractExtension } from './AbstractExtension';
 export class TransformOriginExtension extends AbstractExtension {
     _startPos;
     _circle;
     _circle2;
+    _oldValue;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        const rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computed = getComputedStyle(this.extendedItem.element);
-        const x = 0;
-        const y = 1;
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
-        const toInPercentage = [];
-        toInPercentage[0] = parseInt(to[0]) / parseInt(getComputedStyle(this.extendedItem.element).width); // This value remains the same regardless of scalefactor
-        toInPercentage[1] = parseInt(to[1]) / parseInt(getComputedStyle(this.extendedItem.element).height); // This value remains the same regardless of scalefactor
-        const toDOMPoint = new DOMPoint(rect.x + toInPercentage[x] * rect.width, rect.y + toInPercentage[y] * rect.height);
-        this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
+        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]), y: parseFloat(to[1]) }, this.designerCanvas);
+        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.setAttribute('style', 'cursor: pointer');
-        this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
+        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.setAttribute('style', 'pointer-events: none');
+        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)); //TODO: -> assign to window
-        if (this.extendedItem.styles.get('transform-origin') == null || this.extendedItem.styles.get('transform-origin') == '') {
-            this.extendedItem.setStyle('transform-origin', this._circle.getAttribute('cx') + ' ' + this._circle.getAttribute('cy'));
+        if (this.extendedItem.styles.get('transform-origin')) {
+            this._oldValue = this.extendedItem.styles.get('transform-origin');
         }
     }
     pointerEvent(event) {
@@ -64,7 +61,22 @@ export class TransformOriginExtension extends AbstractExtension {
                     const dy = normalized.y - this._startPos.y;
                     const newX = (dx + parseFloat(to[x]));
                     const newY = (dy + parseFloat(to[y]));
-                    this.extendedItem.setStyle('transform-origin', newX + 'px' + ' ' + newY + 'px');
+                    if (this._oldValue) { //Restore old units
+                        try {
+                            const oldSplit = this._oldValue.split(' ');
+                            let newXs = convertCssUnit(newX, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]));
+                            let newYs = convertCssUnit(newX, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]));
+                            if (oldSplit.length > 1) {
+                                newYs = convertCssUnit(newY, this.extendedItem.element, 'heigth', getCssUnit(oldSplit[1]));
+                            }
+                            this.extendedItem.setStyle('transform-origin', newXs + ' ' + newYs);
+                        }
+                        catch (err) {
+                            this.extendedItem.setStyle('transform-origin', newX + 'px' + ' ' + newY + 'px');
+                        }
+                    }
+                    else
+                        this.extendedItem.setStyle('transform-origin', newX + 'px' + ' ' + newY + 'px');
                     this.refresh();
                     this._startPos = null;
                 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.152",
+  "version": "0.0.154",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",