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

package/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: jogibear9988

package/dist/commandHandling/CommandType.d.ts

@@ -21,5 +21,8 @@ export declare enum CommandType {
     'distributeHorizontal' = "distributeHorizontaly",
     'distributeVertical' = "distributeVertical",
     'setTool' = "setTool",
+    'setStrokeColor' = "setStrokeColor",
+    'setFillBrush' = "setFillBrush",
+    'setStrokeThickness' = "setStrokeThickness",
     'screenshot' = "screenshot"
 }

package/dist/commandHandling/CommandType.js

@@ -22,5 +22,8 @@ export var CommandType;
     CommandType["distributeHorizontal"] = "distributeHorizontaly";
     CommandType["distributeVertical"] = "distributeVertical";
     CommandType["setTool"] = "setTool";
+    CommandType["setStrokeColor"] = "setStrokeColor";
+    CommandType["setFillBrush"] = "setFillBrush";
+    CommandType["setStrokeThickness"] = "setStrokeThickness";
     CommandType["screenshot"] = "screenshot";
 })(CommandType || (CommandType = {}));

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -45,6 +45,9 @@ import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService';
+import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons';
+import { DemoProviderService } from './demoProviderService/DemoProviderService';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -65,6 +68,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
+    serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()
@@ -106,6 +110,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
     serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
     serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new ZMoveContextMenu(),

package/dist/elements/services/GlobalContext.d.ts

@@ -5,6 +5,7 @@ export declare class GlobalContext {
     private _serviceContainer;
     private _tool;
     private _strokeColor;
+    private _strokeThickness;
     private _fillBrush;
     constructor(serviceContainer: ServiceContainer);
     set tool(tool: ITool);
@@ -14,6 +15,9 @@ export declare class GlobalContext {
     set strokeColor(strokeColor: string);
     get strokeColor(): string;
     readonly onStrokeColorChanged: TypedEvent<PropertyChangedArgs<string>>;
+    set strokeThickness(strokeThickness: string);
+    get strokeThickness(): string;
+    readonly onStrokeThicknessChanged: TypedEvent<PropertyChangedArgs<string>>;
     set fillBrush(fillBrush: string);
     get fillBrush(): string;
     readonly onFillBrushChanged: TypedEvent<PropertyChangedArgs<string>>;

package/dist/elements/services/GlobalContext.js

@@ -5,6 +5,7 @@ export class GlobalContext {
     _serviceContainer;
     _tool;
     _strokeColor = 'black';
+    _strokeThickness = '3';
     _fillBrush = 'transparent';
     constructor(serviceContainer) {
         this._serviceContainer = serviceContainer;
@@ -36,6 +37,17 @@ export class GlobalContext {
         return this._strokeColor;
     }
     onStrokeColorChanged = new TypedEvent();
+    set strokeThickness(strokeThickness) {
+        if (this._strokeThickness !== strokeThickness) {
+            const oldStrokeThickness = this._strokeThickness;
+            this._strokeThickness = strokeThickness;
+            this.onStrokeThicknessChanged.emit(new PropertyChangedArgs(strokeThickness, oldStrokeThickness));
+        }
+    }
+    get strokeThickness() {
+        return this._strokeThickness;
+    }
+    onStrokeThicknessChanged = new TypedEvent();
     set fillBrush(fillBrush) {
         this._fillBrush = fillBrush;
         if (this._fillBrush !== fillBrush) {

package/dist/elements/services/ServiceContainer.d.ts

@@ -23,6 +23,8 @@ import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
+import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesignViewConfigButtonsProvider.js";
+import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -39,6 +41,7 @@ interface ServiceNameMap {
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
+    "demoProviderService": IDemoProviderService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -46,6 +49,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
@@ -65,5 +69,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get dragDropService(): IDragDropService;
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;
+    get demoProviderService(): IDemoProviderService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,7 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    designViewConfigButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
@@ -57,4 +58,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get modelCommandService() {
         return this.getLastService('modelCommandService');
     }
+    get demoProviderService() {
+        return this.getLastService('demoProviderService');
+    }
 }

package/dist/elements/services/demoProviderService/DemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class DemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -0,0 +1,28 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
+export class DemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            for (let i of instanceServiceContainer.designContext.imports) {
+                doc.write("import '" + i + "';");
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<body style="display:none">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.d.ts

@@ -0,0 +1,5 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.js

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

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

@@ -7,5 +7,5 @@ export declare class DemoView extends BaseCustomWebComponentLazyAppend implement
     private _loading;
     static readonly style: CSSStyleSheet;
     constructor();
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): void;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -18,11 +18,6 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
     position: absolute;
     top: 60px;
     left: 20px;
-  }
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
   }`;
     constructor() {
         super();
@@ -34,24 +29,10 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
-    display(serviceContainer, instanceServiceContainer, code) {
-        let iframe = document.createElement('iframe');
-        this._placeholder.innerHTML = '';
-        this._placeholder.appendChild(iframe);
+    async display(serviceContainer, instanceServiceContainer, code) {
         this._loading.hidden = false;
-        iframe.onload = () => {
-            this._loading.hidden = true;
-        };
-        let doc = iframe.contentWindow.document;
-        doc.open();
-        doc.write('<script type="module">');
-        for (let i of instanceServiceContainer.designContext.imports) {
-            doc.write("import '" + i + "';");
-        }
-        doc.write("document.body.style.display='';");
-        doc.write('</script>');
-        doc.write('<body style="display:none">' + code + '</body>');
-        doc.close();
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code);
+        this._loading.hidden = true;
     }
 }
 customElements.define('node-projects-demo-view', DemoView);

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

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

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

@@ -0,0 +1,8 @@
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

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

@@ -1,4 +1,7 @@
 import { IDesignContext } from "./IDesignContext";
 export declare class DesignContext implements IDesignContext {
     imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
 }

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

@@ -1,3 +1,4 @@
 export class DesignContext {
     imports = [];
+    extensionOptions = {};
 }

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

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

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

@@ -0,0 +1,13 @@
+//todo, element moving does not work atm, needs to be fixed
+export class DesignerViewUseOverlayScollbars {
+    constructor() {
+    }
+    provideButtons(designerView, designerCanvas) {
+        let externalCss = document.createElement('style');
+        externalCss.innerHTML = '@import url("./node_modules/overlayscrollbars/css/OverlayScrollbars.min.css");';
+        designerCanvas.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        setTimeout(() => OverlayScrollbars([designerCanvas._outercanvas2], {}), 5000);
+        return [];
+    }
+}

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

@@ -1,3 +1,6 @@
 export interface IDesignContext {
     imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
 }

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

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

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

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

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

@@ -72,7 +72,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
-    static getHost(node: Node): Element;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;
     private _pointerEventHandler;

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/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 {

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

package/package.json

@@ -1,39 +1,39 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.59",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.3.0",
-    "construct-style-sheets-polyfill": "^3.0.4"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.9",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.13",
-    "codemirror": "^5.64.0",
-    "esprima-next": "^5.7.0",
-    "html2canvas": "*",
-    "jest": "^27.3.1",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.0",
-    "monaco-editor": "^0.30.1",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.5.2",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.60",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": "^0.3.5",
+    "construct-style-sheets-polyfill": "^3.0.4"
+  },
+  "devDependencies": {
+    "@node-projects/lean-he-esm": "^3.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.9",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.4.13",
+    "codemirror": "^5.64.0",
+    "esprima-next": "^5.7.0",
+    "html2canvas": "*",
+    "jest": "^27.4.3",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.0",
+    "monaco-editor": "^0.30.1",
+    "ts-jest": "^27.1.0",
+    "typescript": "^4.5.2",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}