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

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

@@ -256,6 +256,7 @@ export class ExtensionManager {
             this.refreshExtensions(designItems, ExtensionType.ContainerDragOver, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.ContainerDrag, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Doubleclick, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Placement, ignoredExtension);
         }
     }
     refreshAllAppliedExtentions() {

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

@@ -18,5 +18,6 @@ export declare enum ExtensionType {
      * Extension for the Current Container wich the dragged element is contained.
      */
     ContainerDrag = 10,
-    Doubleclick = 11
+    Doubleclick = 11,
+    Placement = 12
 }

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

@@ -20,4 +20,5 @@ export var ExtensionType;
      */
     ExtensionType[ExtensionType["ContainerDrag"] = 10] = "ContainerDrag";
     ExtensionType[ExtensionType["Doubleclick"] = 11] = "Doubleclick";
+    ExtensionType[ExtensionType["Placement"] = 12] = "Placement";
 })(ExtensionType || (ExtensionType = {}));

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

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

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

@@ -0,0 +1,20 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer";
+export class FlexboxExtension extends AbstractExtension {
+    _path;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        this._path = this._drawTransformedRect(transformedCornerPoints, 'svg-flexbox', this._path, OverlayLayer.Background);
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,11 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+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;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,17 @@
+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 designerView.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new FlexboxExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-flexbox { stroke: orange; fill: #9a47ff22; }
+  `;
+}

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

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

package/dist/elements/widgets/designerView/extensions/GridExtension copy.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GridExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,30 @@
+import { CalculateGridInformation } from "../../../helper/GridHelper.js";
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GridExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const gridInformation = CalculateGridInformation(this.extendedItem);
+        for (let gap of gridInformation.gaps) {
+            this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', null, OverlayLayer.Background);
+        }
+        for (let cellRow of gridInformation.cells) {
+            for (let cell of cellRow) {
+                this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', null, OverlayLayer.Background);
+                if (cell.name) {
+                    const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
+                    text.setAttribute("dominant-baseline", "hanging");
+                }
+            }
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,11 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
+export declare class GridExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,18 @@
+import { GridExtension } from './GridExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
+export class GridExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'grid')
+            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GridExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-area { font-size: 8px; }
+    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+  `;
+}

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

@@ -3,7 +3,8 @@ import { css } from "@node-projects/base-custom-webcomponent";
 export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
 export class GridExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'grid')
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'grid' || display == 'inline-grid')
             return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
         return false;
     }

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, 0, this.designerCanvas);
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-invisible-div', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -1,3 +1,4 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
 import { AbstractExtension } from "./AbstractExtension";
 const offset = 3;
 export class MouseOverExtension extends AbstractExtension {
@@ -9,10 +10,8 @@ export class MouseOverExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
-        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
-        this._rect = this._drawRect((xOffset - offset) / this.designerCanvas.scaleFactor, (yOffset - offset) / this.designerCanvas.scaleFactor, (itemRect.width + offset + offset) / this.designerCanvas.scaleFactor, (itemRect.height + offset + offset) / this.designerCanvas.scaleFactor, 'svg-hover', this._rect);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, offset, this.designerCanvas);
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect);
         this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
     }
     dispose() {

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

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

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

@@ -0,0 +1,22 @@
+import { AbstractExtension } from "./AbstractExtension";
+export class PlacementExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+        const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+        const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+        const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-hover', this._rect);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

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

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

@@ -0,0 +1,13 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { PlacementExtension } from "./PlacementExtension";
+export class PlacementExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PlacementExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-hover { stroke: #90caf9; fill: none; }
+  `;
+}

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

@@ -16,10 +16,12 @@ export declare class ResizeExtension extends AbstractExtension {
     private _circle6;
     private _circle7;
     private _circle8;
+    private _initialComputedTransformOrigins;
+    private _initialTransformOrigins;
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
     extend(): void;
     refresh(): void;
     _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
-    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode?: string): void;
+    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
     dispose(): void;
 }