@node-projects/web-component-designer 0.1.125 → 0.1.127

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -90,6 +90,7 @@ import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions
 import { BlockToolbarExtensionProvider } from '../widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js';
 import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js';
 import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js';
+import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -187,7 +188,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new ToolbarExtensionsDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(22), new TextToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new ChildContextMenu('edit', new CopyPasteContextMenu()),

package/dist/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.d.ts

@@ -0,0 +1,8 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDesignItemService } from "./IDesignItemService.js";
+export declare class BaseCustomWebcomponentDesignItemService implements IDesignItemService {
+    createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
+    instancateNode(parent: Element, node: Node, append?: boolean): Element;
+}

package/dist/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.js

@@ -0,0 +1,36 @@
+import { DesignItem } from "../../item/DesignItem.js";
+export class BaseCustomWebcomponentDesignItemService {
+    createDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer) {
+        const di = new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
+        if (node instanceof HTMLTemplateElement) {
+            requestAnimationFrame(() => {
+                let repeatCount = 1;
+                const attr = node.getAttribute('sample-repeat-count');
+                if (attr) {
+                    repeatCount = parseInt(attr);
+                }
+                for (let n = 0; n < repeatCount; n++) {
+                    let par = node;
+                    for (const n of node.content.childNodes) {
+                        par = this.instancateNode(par, n);
+                    }
+                }
+            });
+        }
+        return di;
+    }
+    instancateNode(parent, node, append = false) {
+        const nd = node.cloneNode(false);
+        if (append)
+            parent.appendChild(nd);
+        else {
+            parent.parentNode.insertBefore(nd, parent.nextSibling);
+            //parent.insertAdjacentElement('afterend', <Element>nd);
+        }
+        DesignItem.GetDesignItem(node).setView(nd);
+        for (const n of node.childNodes) {
+            this.instancateNode(nd, n, true);
+        }
+        return nd;
+    }
+}

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

@@ -2,6 +2,7 @@ import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
 import { IExtensionManager } from "./IExtensionManger.js";
 import { IDesignerCanvas } from "../IDesignerCanvas.js";
 import { IDesignItem } from "../../../item/IDesignItem.js";
+export declare const basicStackedToolbarExtensionOverlayOptionName = "basicStackedToolbarExtensionShowOverlay";
 export declare class BasicStackedToolbarExtension extends AbstractExtension {
     protected static basicTemplate: string;
     protected static toolBars: toolbarObject[];

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

@@ -1,5 +1,6 @@
 import { assetsPath } from "../../../../Constants.js";
 import { AbstractExtension } from "./AbstractExtension.js";
+export const basicStackedToolbarExtensionOverlayOptionName = 'basicStackedToolbarExtensionShowOverlay';
 export class BasicStackedToolbarExtension extends AbstractExtension {
     static basicTemplate = `
       <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">

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

@@ -2,7 +2,7 @@ import { ElementDragTitleExtension } from './ElementDragTitleExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class ElementDragTitleExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return !designItem.isRootItem;
+        return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement);
     }
     getExtension(extensionManager, designerView, designItem) {
         return new ElementDragTitleExtension(extensionManager, designerView, designItem);

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

@@ -2,7 +2,7 @@ import { HighlightElementExtension } from './HighlightElementExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class HighlightElementExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return true;
+        return !(designItem.element instanceof HTMLTemplateElement);
     }
     getExtension(extensionManager, designerView, designItem) {
         return new HighlightElementExtension(extensionManager, designerView, designItem);

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

@@ -2,12 +2,12 @@ import { css } from "@node-projects/base-custom-webcomponent";
 import { MultipleSelectionRectExtension as MultipleSelectionRectExtension } from './MultipleSelectionRectExtension.js';
 export class MultipleSelectionRectExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return !designItem.isRootItem;
+        return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement);
     }
     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;*/ }
+    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/PositionExtensionProvider.js

@@ -2,7 +2,7 @@ import { PositionExtension } from './PositionExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class PositionExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (!designItem?.parent)
+        if (!designItem?.parent || designItem.element instanceof HTMLTemplateElement)
             return false;
         const cs = getComputedStyle(designItem.element);
         if (cs.position === 'relative' || cs.position === 'absolute')

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

@@ -7,7 +7,7 @@ export class ResizeExtensionProvider {
         this.resizeAllSelected = resizeAllSelected;
     }
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.element instanceof SVGElement)
+        if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement)
             return false;
         return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
     }

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

@@ -2,7 +2,7 @@ import { RotateExtension } from './RotateExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class RotateExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.element instanceof SVGElement) {
+        if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) {
             return false;
         }
         return !designItem.isRootItem;

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

@@ -3,7 +3,7 @@ import { css } from "@node-projects/base-custom-webcomponent";
 import { NodeType } from '../../../item/NodeType.js';
 export class SelectionDefaultExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return !designItem.isRootItem && designItem.nodeType != NodeType.Comment;
+        return !designItem.isRootItem && designItem.nodeType != NodeType.Comment && !(designItem.element instanceof HTMLTemplateElement);
     }
     getExtension(extensionManager, designerView, designItem) {
         return new SelectionDefaultExtension(extensionManager, designerView, designItem);

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.d.ts

@@ -4,6 +4,6 @@ import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IDesignerExtension } from '../IDesignerExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class BlockToolbarExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js

@@ -1,10 +1,12 @@
 import { BlockToolbarExtension } from './BlockToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class BlockToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element) {
             const d = getComputedStyle(designItem.element).display;
-            return d === 'block' || d === 'inline';
+            if (d === 'block' || d === 'inline')
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons copy.d.ts

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons copy.js

@@ -0,0 +1,7 @@
+import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(gridExtensionShowOverlayOptionName, "G", "show grid overlay");
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.d.ts

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class ToolbarExtensionsDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { basicStackedToolbarExtensionOverlayOptionName } from "../BasicStackedToolbarExtension.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class ToolbarExtensionsDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(basicStackedToolbarExtensionOverlayOptionName, "T", "show Toolbars");
+    }
+}

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.d.ts

@@ -4,6 +4,6 @@ import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IDesignerExtension } from '../IDesignerExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class FlexToolbarExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js

@@ -1,10 +1,12 @@
 import { FlexToolbarExtension } from './FlexToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class FlexToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element) {
             const d = getComputedStyle(designItem.element).display;
-            return d === 'flex' || d === 'inline-flex';
+            if (d === 'flex' || d === 'inline-flex')
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.d.ts

@@ -4,6 +4,6 @@ import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IDesignerExtension } from '../IDesignerExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class GridChildToolbarExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js

@@ -1,11 +1,12 @@
 import { NodeType } from '../../../../item/NodeType.js';
 import { GridChildToolbarExtension } from './GridChildToolbarExtension.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class GridChildToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element && designItem.parent) {
             const cs = designItem.parent?.getComputedStyle();
             if (cs != null && (cs.display === 'grid' || cs.display === 'inline-grid'))
-                return true;
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider.d.ts

@@ -4,6 +4,6 @@ import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { IDesignerExtension } from '../IDesignerExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class GridToolbarExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js

@@ -1,10 +1,12 @@
 import { GridToolbarExtension } from './GridToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
+import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js';
 export class GridToolbarExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element) {
             const d = getComputedStyle(designItem.element).display;
-            return d === 'grid' || d === 'inline-grid';
+            if (d === 'grid' || d === 'inline-grid')
+                return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;
     }

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export * from "./elements/services/designItemDocumentPositionService/DesignItemD
 export type { IDesignItemDocumentPositionService } from "./elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.js";
 export type { IConfigUiService } from "./elements/services/configUiService/IConfigUiService.js";
 export * from "./elements/services/designItemService/DesignItemService.js";
+export * from "./elements/services/designItemService/BaseCustomWebcomponentDesignItemService.js";
 export type { IDesignItemService } from "./elements/services/designItemService/IDesignItemService.js";
 export * from "./elements/services/dragDropService/ExternalDragDropService.js";
 export type { IExternalDragDropService } from "./elements/services/dragDropService/IExternalDragDropService.js";
@@ -253,6 +254,7 @@ export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionD
 export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js";
 export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js";
 export type { IDesignViewConfigButtonsProvider } from './elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js';
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";

package/dist/index.js

@@ -35,6 +35,7 @@ export * from "./elements/services/demoProviderService/IframeDemoProviderService
 export * from "./elements/services/demoProviderService/SimpleDemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export * from "./elements/services/designItemService/DesignItemService.js";
+export * from "./elements/services/designItemService/BaseCustomWebcomponentDesignItemService.js";
 export * from "./elements/services/dragDropService/ExternalDragDropService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
@@ -194,6 +195,7 @@ export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionD
 export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js";
 export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.125",
+  "version": "0.1.127",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",