@node-projects/web-component-designer 0.1.0 → 0.1.1

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

@@ -0,0 +1,11 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare const flexboxExtensionShowOverlayOptionName = "flexboxExtensionShowOverlay";
+export declare class FlexboxExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: 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.js';
+export const flexboxExtensionShowOverlayOptionName = 'flexboxExtensionShowOverlay';
+export class FlexboxExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'flex' || display == 'inline-flex')
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new FlexboxExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-flexbox { stroke: orange; fill: #9a47ff22; }
+  `;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GrayOutDragOverContainerExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-rect-enter-container', this._rect, OverlayLayer.Background);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

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

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

@@ -0,0 +1,13 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { GrayOutDragOverContainerExtension } from "./GrayOutDragOverContainerExtension.js";
+export class GrayOutDragOverContainerExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GrayOutDragOverContainerExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
+}

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

@@ -0,0 +1,13 @@
+import { IRect } from '../../../../interfaces/IRect.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class GrayOutExtension extends AbstractExtension {
+    private _path;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    drawGrayOut(r: IRect): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,32 @@
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GrayOutExtension extends AbstractExtension {
+    _path;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        if (!this._path) {
+            this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            this._path.setAttribute('class', 'svg-gray-out');
+            this._addOverlay(this._path, OverlayLayer.Background);
+        }
+        let normalizedRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this.drawGrayOut(normalizedRect);
+    }
+    drawGrayOut(r) {
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        const pathPoints = "M0 0 L0 " + outsideRect.height + "L" + r.x + " " + outsideRect.height + "L" + r.x + " 0" + " L0 0" +
+            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + outsideRect.width + " " + r.y + "L" + outsideRect.width + " 0" + "L" + r.x + " 0" +
+            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + outsideRect.height + "L" + outsideRect.width + " " + outsideRect.height + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
+            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
+        this._path.setAttribute("d", pathPoints);
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this._path = null;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class GrayOutExtensionProvider 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/GrayOutExtensionProvider.js

@@ -0,0 +1,13 @@
+import { GrayOutExtension } from './GrayOutExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class GrayOutExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GrayOutExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-gray-out { stroke: transparent; fill: rgba(211, 211, 211, 0.8); pointer-events: none }
+  `;
+}

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

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

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

@@ -0,0 +1,20 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+const offset = 3;
+export class HighlightElementExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        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/HighlightElementExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class HighlightElementExtensionProvider 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/HighlightElementExtensionProvider.js

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

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

@@ -0,0 +1,5 @@
+import { IDisposable } from '../../../../interfaces/IDisposable.js';
+export interface IDesignerExtension extends IDisposable {
+    extend(event?: Event): any;
+    refresh(event?: Event): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export interface IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    style?: CSSStyleSheet | CSSStyleSheet[];
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { ExtensionType } from './ExtensionType.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+export interface IExtensionManager {
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): any;
+    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
+    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): any;
+    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): any;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event): any;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): any;
+    refreshAllAppliedExtentions(): any;
+    reapplyAllAppliedExtentions(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,19 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from "./OverlayLayer.js";
+export class InvisibleElementExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerCanvas, extendedItem) {
+        super(extensionManager, designerCanvas, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        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/InvisibleElementExtensionProvider.d.ts

@@ -0,0 +1,13 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare const invisibleElementExtensionShowOverlayOptionName = "invisibleElementExtensionShowOverlay";
+export declare class InvisibleElementExtensionProvider implements IDesignerExtensionProvider {
+    elementFilter: (designItem: IDesignItem) => boolean;
+    constructor(elementFilter?: (designItem: IDesignItem) => boolean);
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,24 @@
+import { InvisibleElementExtension as InvisibleElementExtension } from './InvisibleElementExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export const invisibleElementExtensionShowOverlayOptionName = 'invisibleElementExtensionShowOverlay';
+export class InvisibleElementExtensionProvider {
+    elementFilter;
+    constructor(elementFilter = (d) => d.name == 'div' && window.getComputedStyle(d.element).display != 'inline') {
+        this.elementFilter = elementFilter;
+    }
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        if (designerCanvas.instanceServiceContainer.designContext.extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false) {
+            if (this.elementFilter(designItem)) {
+                const st = window.getComputedStyle(designItem.element);
+                return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none';
+            }
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new InvisibleElementExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;
+  `;
+}

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

@@ -0,0 +1,15 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class MultipleSelectionRectExtension extends AbstractExtension {
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    private _designerView;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,34 @@
+import { calculateOuterRect } from '../../../helper/ElementHelper.js';
+import { filterChildPlaceItems } from '../../../helper/LayoutHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from './OverlayLayer.js';
+export class MultipleSelectionRectExtension extends AbstractExtension {
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    _designerView;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._designerView = designerView;
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements;
+        selection = filterChildPlaceItems(selection);
+        let rect = calculateOuterRect(selection, this._designerView);
+        this._line1 = this._drawLine(rect.x, rect.y, rect.x + rect.width, rect.y, 'svg-multiple-rect-selection', this._line1, OverlayLayer.Background);
+        this._line2 = this._drawLine(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + rect.height, 'svg-multiple-rect-selection', this._line2, OverlayLayer.Background);
+        this._line3 = this._drawLine(rect.x + rect.width, rect.y + rect.height, rect.x, rect.y + rect.height, 'svg-multiple-rect-selection', this._line3, OverlayLayer.Background);
+        this._line4 = this._drawLine(rect.x, rect.y + rect.height, rect.x, rect.y, 'svg-multiple-rect-selection', this._line4, OverlayLayer.Background);
+        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/MultipleSelectionRectExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class MultipleSelectionRectExtensionProvider 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/MultipleSelectionRectExtensionProvider.js

@@ -0,0 +1,13 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { MultipleSelectionRectExtension as MultipleSelectionRectExtension } from './MultipleSelectionRectExtension.js';
+export class MultipleSelectionRectExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new MultipleSelectionRectExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
+  `;
+}

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

@@ -0,0 +1,5 @@
+export declare enum OverlayLayer {
+    Background = 10,
+    Normal = 20,
+    Foregorund = 30
+}

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

@@ -0,0 +1,6 @@
+export var OverlayLayer;
+(function (OverlayLayer) {
+    OverlayLayer[OverlayLayer["Background"] = 10] = "Background";
+    OverlayLayer[OverlayLayer["Normal"] = 20] = "Normal";
+    OverlayLayer[OverlayLayer["Foregorund"] = 30] = "Foregorund";
+})(OverlayLayer || (OverlayLayer = {}));

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+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.js';
+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.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class 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.js';
+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/PositionExtension.d.ts

@@ -0,0 +1,16 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class PositionExtension extends AbstractExtension {
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    private _textX;
+    private _textY;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,42 @@
+import { AbstractExtension } from './AbstractExtension.js';
+export class PositionExtension extends AbstractExtension {
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    _textX;
+    _textY;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element.parentElement);
+        this._line1 = this._drawLine(itemParentRect.x, itemRect.y + itemRect.height / 2, itemRect.x, itemRect.y + itemRect.height / 2, 'svg-position', this._line1);
+        this._line2 = this._drawLine(itemParentRect.x + itemParentRect.width, itemRect.y + itemRect.height / 2, itemRect.x + itemRect.width, itemRect.y + itemRect.height / 2, 'svg-position', this._line2);
+        this._line3 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y, itemRect.x + itemRect.width / 2, itemRect.y, 'svg-position', this._line3);
+        this._line4 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y + itemParentRect.height, itemRect.x + itemRect.width / 2, itemRect.y + itemRect.height, 'svg-position', this._line4);
+        this._line1.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line2.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line3.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line4.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
+        this._line1.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        this._line2.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        this._line3.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
+        let x = Math.round(itemRect.x - itemParentRect.x);
+        let y = Math.round(itemRect.y - itemParentRect.y);
+        this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX);
+        this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + y / 2, 'white', 'svg-position-text', this._textY);
+        this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class PositionExtensionProvider 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/PositionExtensionProvider.js

@@ -0,0 +1,16 @@
+import { PositionExtension } from './PositionExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class PositionExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        const cs = getComputedStyle(designItem.element);
+        if (cs.position === 'relative' || cs.position === 'absolute')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PositionExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-position-text { text-anchor: middle; alignment-baseline: central; }
+  `;
+}

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

@@ -0,0 +1,27 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class ResizeExtension extends AbstractExtension {
+    private resizeAllSelected;
+    private _initialSizes;
+    private _actionModeStarted;
+    private _initialPoint;
+    private _offsetPoint;
+    private _circle1;
+    private _circle2;
+    private _circle3;
+    private _circle4;
+    private _circle5;
+    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;
+    dispose(): void;
+}