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

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

@@ -2,6 +2,7 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IExtensionManager } from "./IExtensionManger";
 import { OverlayLayerView } from '../overlayLayerView';
 import { OverlayLayer } from './OverlayLayer';
+import { IPoint } from "../../../../interfaces/IPoint";
 export declare abstract class AbstractExtensionBase {
     protected overlays: SVGElement[];
     protected overlayLayerView: OverlayLayerView;
@@ -14,4 +15,5 @@ export declare abstract class AbstractExtensionBase {
     protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
     protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
     protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
+    protected _drawTransformedRect(points: [IPoint, IPoint, IPoint, IPoint], className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
 }

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

@@ -54,4 +54,12 @@ export class AbstractExtensionBase {
         }
         return newEls;
     }
+    _drawTransformedRect(points, className, path, overlayLayer) {
+        let data = "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + "Z";
+        const newPath = this.overlayLayerView.drawPath(data, className, path, overlayLayer);
+        if (!path) {
+            this.overlays.push(newPath);
+        }
+        return newPath;
+    }
 }

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/FlexboxExtensionProvider.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 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,16 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { FlexboxExtension } from "./FlexboxExtension";
+export class FlexboxExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'flex' || display == 'inline-flex')
+            return true;
+        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/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/MouseOverExtension.d.ts

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

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

@@ -1,7 +1,11 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
 import { AbstractExtension } from "./AbstractExtension";
 const offset = 3;
 export class MouseOverExtension extends AbstractExtension {
-    _rect;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -9,11 +13,15 @@ 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);
-        this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        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();
     }
     dispose() {
         this._removeAllOverlays();

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;
 }