@node-projects/web-component-designer 0.0.56 → 0.0.60

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -190,6 +190,21 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                     this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(command.parameter);
                 }
                 break;
+            case CommandType.setStrokeColor:
+                {
+                    this.serviceContainer.globalContext.strokeColor = command.parameter;
+                }
+                break;
+            case CommandType.setFillBrush:
+                {
+                    this.serviceContainer.globalContext.fillBrush = command.parameter;
+                }
+                break;
+            case CommandType.setStrokeThickness:
+                {
+                    this.serviceContainer.globalContext.strokeThickness = command.parameter;
+                }
+                break;
             case CommandType.delete:
                 this.handleDeleteCommand();
                 break;
@@ -496,14 +511,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const normEl = this.getNormalizedElementCoordinates(element);
         return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
     }
-    //todo remove, is in base custom webcomp domhelper
-    static getHost(node) {
-        while (node.parentElement)
-            node = node.parentElement;
-        if (node.host)
-            return node.host;
-        return node.parentNode.host;
-    }
     getElementAtPoint(point, ignoreElementCallback) {
         let backupPEventsMap = new Map();
         let currentElement = this.elementFromPoint(point.x, point.y);
@@ -549,6 +556,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _rect;
     _pointerEventHandler(event) {
         this._fillCalculationrects();
+        /*let clickOnScrollbar = event.clientX - this.containerBoundingRect.x > this.containerBoundingRect.width || event.clientY - this.containerBoundingRect.y > this.containerBoundingRect.height
+        if (clickOnScrollbar) https://kingsora.github.io/OverlayScrollbars/
+          return;*/
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
                 pe.refresh(event);
@@ -560,18 +570,21 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
         if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {
             currentElement = this._canvas;
-        }
+        } /* else {
+          if (!DesignerCanvas.hasOrIsParent(currentElement, this._canvas))
+            return;
+        }*/
         //TODO: remove duplication when tool refactoring starts
-        this._fillCalculationrects();
+        //this._fillCalculationrects();
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
         if (this._lastHoverDesignItem != currentDesignItem) {
             if (this._lastHoverDesignItem)
                 this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
-            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DesignerCanvas.getHost(currentElement.parentNode) !== this.overlayLayer)
+            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(currentElement.parentNode) !== this.overlayLayer)
                 this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver);
             this._lastHoverDesignItem = currentDesignItem;
         }
-        if (currentElement && DesignerCanvas.getHost(currentElement.parentNode) === this.overlayLayer) {
+        if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
             if (this.eatEvents)
                 return;
             currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;

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

@@ -12,6 +12,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     get instanceServiceContainer(): InstanceServiceContainer;
     set instanceServiceContainer(value: InstanceServiceContainer);
     private _zoomInput;
+    private _lowertoolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     private _designerCanvas;

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

@@ -17,6 +17,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._designerCanvas.instanceServiceContainer = value;
     }
     _zoomInput;
+    _lowertoolbar;
     static style = css `
     :host {
       display: block;
@@ -49,6 +50,12 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       display: block;
       margin-right: 1px;
       cursor: default;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .selected {
+      background-color: deepskyblue;
     }
     .toolbar-control:hover {
       background-color:rgba(164,206,249,.6);
@@ -138,6 +145,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         let alignGrid = this._getDomElement('alignGrid');
         alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
         alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
+        this._lowertoolbar = this._getDomElement('lowertoolbar');
     }
     _onWheel(event) {
         if (event.ctrlKey) {
@@ -180,6 +188,12 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
         this._designerCanvas.initialize(serviceContainer);
+        if (serviceContainer.designViewConfigButtons) {
+            for (let provider of serviceContainer.designViewConfigButtons) {
+                for (let btn of provider.provideButtons(this, this._designerCanvas))
+                    this._lowertoolbar.appendChild(btn);
+            }
+        }
     }
     getHTML(designItemsAssignmentList) {
         this.instanceServiceContainer.selectionService.setSelectedElements(null);

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

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GridExtensionProviderConfigButtons {
+    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,12 @@
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionProviderConfigButtons {
+    aaa(extensionManager, designerView) {
+        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.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.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,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 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";
+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.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 gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
 export declare class GridExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,9 +1,10 @@
 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 true;
+            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GridExtensionProviderConfigButtons {
+    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,12 @@
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionProviderConfigButtons {
+    aaa(extensionManager, designerView) {
+        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/GridExtensionProviderOptions.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 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/GridExtensionProviderOptions.js

@@ -0,0 +1,18 @@
+import { GridExtension } from './GridExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+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/IDesignViewConfigButtonsProvider.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,3 @@
+export interface IExtensionConfiguration {
+    designerViewButtons?: HTMLElement[];
+}

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

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

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

@@ -74,7 +74,8 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent));
+                    const containerStyle = getComputedStyle(this.extendedItem.parent.element);
+                    const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent, containerStyle));
                     const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     let trackX = diff.x - this._initialPoint.x;
                     let trackY = diff.y - this._initialPoint.y;
@@ -114,7 +115,10 @@ export class ResizeExtension extends AbstractExtension {
                             break;
                         //for other resize modes we need a replacement
                     }
-                    this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    const resizedElements = [this.extendedItem, this.extendedItem.parent];
+                    if (this.resizeAllSelected)
+                        resizedElements.push(...this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    this.extensionManager.refreshExtensions(resizedElements);
                 }
                 break;
             case EventNames.PointerUp:

package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts

@@ -1,12 +1,21 @@
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IPoint } from '../../../..';
 export declare class DrawPathTool implements ITool {
     readonly cursor = "crosshair";
     private _pathD;
     private _path;
+    private _samePoint;
+    private _p2pMode;
+    private _dragMode;
+    private _pointerMoved;
+    private _eventStarted;
+    private _lastPoint;
+    private _savedPoint;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    straightenLine(p1: IPoint, p2: IPoint): IPoint;
 }

package/dist/elements/widgets/designerView/tools/DrawPathTool.js

@@ -7,6 +7,13 @@ export class DrawPathTool {
     cursor = 'crosshair';
     _pathD;
     _path;
+    _samePoint = false;
+    _p2pMode = false;
+    _dragMode = false;
+    _pointerMoved = false;
+    _eventStarted = false;
+    _lastPoint = { x: 0, y: 0 };
+    _savedPoint = { x: 0, y: 0 };
     constructor() {
     }
     activated(serviceContainer) {
@@ -18,43 +25,102 @@ export class DrawPathTool {
         const offset = 50;
         switch (event.type) {
             case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
-                this._path.setAttribute("D", this._pathD);
-                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
-                this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                this._eventStarted = true;
+                if (!this._p2pMode) {
+                    event.target.setPointerCapture(event.pointerId);
+                    this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                    this._path.setAttribute("D", this._pathD);
+                    this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                    this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
+                    this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                    designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                }
+                if (this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
+                    this._samePoint = true;
+                }
+                this._lastPoint = currentPoint;
                 break;
             case EventNames.PointerMove:
-                if (this._path) {
-                    this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
-                    this._path.setAttribute("d", this._pathD);
+                if (this._eventStarted) {
+                    this._pointerMoved = true;
+                }
+                if (!this._p2pMode) {
+                    this._dragMode = true;
+                    if (this._path) {
+                        this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                        this._path.setAttribute("d", this._pathD);
+                    }
+                }
+                else { // shows line preview
+                    if (this._path) {
+                        let straightLine = currentPoint;
+                        if (event.shiftKey)
+                            straightLine = this.straightenLine(this._savedPoint, currentPoint);
+                        this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
+                    }
                 }
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                const rect = this._path.getBoundingClientRect();
-                designerCanvas.overlayLayer.removeOverlay(this._path);
-                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
-                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
-                const d = movePathData(this._path, mvX, mvY);
-                this._path.setAttribute("d", d);
-                svg.appendChild(this._path);
-                svg.style.left = (mvX) + 'px';
-                svg.style.top = (mvY) + 'px';
-                svg.style.position = 'absolute';
-                svg.style.width = (rect.width + 2 * offset) + 'px';
-                svg.style.height = (rect.height + 2 * offset) + 'px';
-                //designerView.rootDesignItem.element.appendChild(svg);
-                this._path = null;
-                this._pathD = null;
-                const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                if (this._eventStarted && !this._pointerMoved) {
+                    this._p2pMode = true;
+                }
+                if (this._p2pMode && !this._samePoint) {
+                    if (this._path) {
+                        if (event.shiftKey) {
+                            let straightLine = this.straightenLine(this._savedPoint, currentPoint);
+                            this._pathD += "L" + straightLine.x + " " + straightLine.y;
+                            this._path.setAttribute("d", this._pathD);
+                        }
+                        else {
+                            this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                            this._path.setAttribute("d", this._pathD);
+                        }
+                        this._savedPoint = currentPoint;
+                    }
+                }
+                if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
+                    this._eventStarted = false;
+                    this._p2pMode = false;
+                    this._pointerMoved = false;
+                    this._samePoint = false;
+                    this._dragMode = false;
+                    const rect = this._path.getBoundingClientRect();
+                    designerCanvas.overlayLayer.removeOverlay(this._path);
+                    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                    const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
+                    const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                    const d = movePathData(this._path, mvX, mvY);
+                    this._path.setAttribute("d", d);
+                    svg.appendChild(this._path);
+                    svg.style.left = (mvX) + 'px';
+                    svg.style.top = (mvY) + 'px';
+                    svg.style.position = 'absolute';
+                    svg.style.width = (rect.width + 2 * offset) + 'px';
+                    svg.style.height = (rect.height + 2 * offset) + 'px';
+                    //designerView.rootDesignItem.element.appendChild(svg);
+                    this._path = null;
+                    this._pathD = null;
+                    const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                    designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                }
                 //TODO: Better Path drawing (like in SVGEDIT & Adding via Undo Framework. And adding to correct container)
                 break;
         }
     }
+    straightenLine(p1, p2) {
+        let newP = { x: 0, y: 0 };
+        let alpha = -1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
+        if (alpha < 0)
+            alpha += 360;
+        if (alpha > 0 && alpha < 45 || alpha > 315 && alpha < 360 || alpha > 135 && alpha < 225) // right or left
+            newP = { x: p2.x, y: p1.y };
+        else if (alpha > 45 && alpha < 135 || alpha > 225 && alpha < 315) // up or down
+            newP = { x: p1.x, y: p2.y };
+        else // something else
+            newP = { x: p2.x, y: p2.y };
+        return newP;
+    }
 }

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -3,7 +3,7 @@ import { PointerActionType } from "../../../../enums/PointerActionType";
 import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from "../extensions/ExtensionType";
 import { NamedTools } from './NamedTools';
-import { DesignerCanvas } from '../designerCanvas';
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class PointerTool {
     cursor = 'default';
     _movedSinceStartedAction = false;
@@ -101,7 +101,7 @@ export class PointerTool {
                 currentDesignItem.element.style.pointerEvents = 'none';
             }
             let currentElement = designerCanvas.elementFromPoint(event.x, event.y);
-            if (DesignerCanvas.getHost(currentElement) !== designerCanvas.overlayLayer)
+            if (DomHelper.getHost(currentElement) !== designerCanvas.overlayLayer)
                 currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
         }
         else {
@@ -140,7 +140,8 @@ export class PointerTool {
                         this._actionType = PointerActionType.Drag;
                     }
                     if (this._movedSinceStartedAction) {
-                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
+                        const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
+                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
                         if (currentContainerService) {
                             const dragItem = this._actionStartedDesignItem.parent;
                             if (this._dragExtensionItem != dragItem) {
@@ -166,7 +167,8 @@ export class PointerTool {
                                         }
                                         else if (newContainerElement == designerCanvas.rootDesignItem.element) {
                                             newContainerElementDesignItem = designerCanvas.rootDesignItem;
-                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
+                                            const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                                             break;
                                         }
                                         else if (newContainerElement.getRootNode() !== designerCanvas.shadowRoot || newContainerElement === designerCanvas.overlayLayer || newContainerElement.parentElement === designerCanvas.overlayLayer) {
@@ -208,7 +210,8 @@ export class PointerTool {
                                             }
                                             //end check
                                             newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem));
+                                            const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                                             if (newContainerService) {
                                                 if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
                                                     break;
@@ -293,7 +296,8 @@ export class PointerTool {
                         return;
                     }
                     if (this._movedSinceStartedAction) {
-                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent));
+                        const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
+                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
                         const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                         if (containerService) {
                             let cg = designerCanvas.rootDesignItem.openGroup("Move Elements", designerCanvas.instanceServiceContainer.selectionService.selectedElements);

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -34,6 +34,9 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
       font-size: 12px;
       height: 20px;
     }
+    #pg {
+      height: calc(100% - 45px);
+    }
     `;
     static template = html `
   <div>

package/dist/index.d.ts

@@ -32,6 +32,8 @@ export type { IContentChanged } from "./elements/services/contentService/IConten
 export type { IContentService } from "./elements/services/contentService/IContentService.js";
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export type { ICopyPasteService } from "./elements/services/copyPasteService/ICopyPasteService.js";
+export * from "./elements/services/demoProviderService/DemoProviderService.js";
+export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
 export type { IElementDefinition } from "./elements/services/elementsService/IElementDefinition.js";

package/dist/index.js

@@ -21,6 +21,7 @@ export * from "./elements/services/placementService/SnaplinesProviderService.js"
 export * from "./elements/services/elementAtPointService/ElementAtPointService.js";
 export * from "./elements/services/contentService/ContentService.js";
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
+export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";