@node-projects/web-component-designer 0.0.151 → 0.0.153

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/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/LayoutHelper.js

@@ -58,9 +58,9 @@ export function placeDesignItem(container, designItem, offset, mode) {
         }
         if (!hasPositionedLayout)
             designItem.setStyle('position', 'absolute');
-        if (oldLeft)
+        if (oldLeft || oldRight == null)
             designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
-        if (oldTop)
+        if (oldTop || oldBottom == null)
             designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
         if (oldRight)
             designItem.setStyle('right', ((oldRight ?? 0) - offset.x + containerRight) + "px");

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,7 @@ 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 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

@@ -128,6 +128,7 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
     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 +152,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/DefaultServiceBootstrap.js

@@ -71,6 +71,7 @@ import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/sv
 import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js';
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
+import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -153,7 +154,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

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/designerCanvas.js

@@ -105,6 +105,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       width: 100%;
       height: 100%;
       transform-origin: 0 0;
+      position: relative;
     }
 
     #node-projects-designer-canvas-canvas.dragFileActive {

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/FlexboxExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class FlexboxExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,21 @@
+import { flexboxExtensionShowOverlayOptionName } from "./FlexboxExtensionProvider.js";
+export class FlexboxExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'F';
+        btn.title = 'show flexbox overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[flexboxExtensionShowOverlayOptionName];
+            extensionOptions[flexboxExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

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

@@ -3,6 +3,7 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IDesignerExtension } from "./IDesignerExtension";
 import { IExtensionManager } from "./IExtensionManger";
+export declare const flexboxExtensionShowOverlayOptionName = "flexboxExtensionShowOverlay";
 export declare class FlexboxExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,10 +1,11 @@
 import { css } from "@node-projects/base-custom-webcomponent";
 import { FlexboxExtension } from "./FlexboxExtension";
+export const flexboxExtensionShowOverlayOptionName = 'flexboxExtensionShowOverlay';
 export class FlexboxExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         const display = getComputedStyle(designItem.element).display;
         if (display == 'flex' || display == 'inline-flex')
-            return true;
+            return designerView.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false;
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

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/GridExtensionDesignViewConfigButtons copy.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons copy.js

@@ -0,0 +1,21 @@
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

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

@@ -1,3 +1,4 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
 import { AbstractExtension } from './AbstractExtension';
 import { OverlayLayer } from "./OverlayLayer.js";
 export class InvisibleDivExtension extends AbstractExtension {
@@ -9,8 +10,8 @@ export class InvisibleDivExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-invisible-div', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -3,10 +3,7 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { AbstractExtension } from "./AbstractExtension";
 import { IExtensionManager } from "./IExtensionManger";
 export declare class MouseOverExtension extends AbstractExtension {
-    private _line1;
-    private _line2;
-    private _line3;
-    private _line4;
+    private _rect;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;

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

@@ -2,10 +2,7 @@ import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../
 import { AbstractExtension } from "./AbstractExtension";
 const offset = 3;
 export class MouseOverExtension extends AbstractExtension {
-    _line1;
-    _line2;
-    _line3;
-    _line4;
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -13,15 +10,9 @@ export class MouseOverExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, offset, this.designerCanvas);
-        this._line1 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'svg-hover', this._line1);
-        this._line2 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'svg-hover', this._line2);
-        this._line3 = this._drawLine(transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-hover', this._line3);
-        this._line4 = this._drawLine(transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-hover', this._line4);
-        this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        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();
     }
     dispose() {
         this._removeAllOverlays();

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;
         }
     }
@@ -77,7 +77,7 @@ export class RotateExtension extends AbstractExtension {
                     angle *= -1;
                     const rotationMatrix3d = getRotationMatrix3d('z', angle);
                     rotateElementByMatrix3d(this.extendedItem.element, rotationMatrix3d);
-                    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 30, this.designerCanvas);
+                    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 30, y: 30 }, this.designerCanvas);
                     let 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';

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,9 +1,11 @@
 import { EventNames } from "../../../../enums/EventNames";
+import { convertCssUnit, getCssUnit } from "../../../helper/CssUnitConverter";
 import { AbstractExtension } from './AbstractExtension';
 export class TransformOriginExtension extends AbstractExtension {
     _startPos;
     _circle;
     _circle2;
+    _oldValue;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -14,20 +16,20 @@ export class TransformOriginExtension extends AbstractExtension {
         const y = 1;
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
         const toInPercentage = [];
-        toInPercentage[0] = parseInt(to[0]) / parseInt(this.extendedItem.element.style.width); // This value remains the same regardless of scalefactor
-        toInPercentage[1] = parseInt(to[1]) / parseInt(this.extendedItem.element.style.height); // This value remains the same regardless of scalefactor
+        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');
+        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 = 'pointer-events: 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 +66,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/dist/index.d.ts

@@ -162,6 +162,7 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";

package/dist/index.js

@@ -119,6 +119,7 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";

package/package.json

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