@node-projects/web-component-designer 0.0.94 → 0.0.97

package/assets/images/layout/ColorPickerTool.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.922934,0.922934,-0.922934,0.922934,51.9626,-38.7184)">
+        <g transform="matrix(0.785714,0,0,1.39286,10.0714,-33.4286)">
+            <path d="M61,31.897C61,27.539 54.727,24 47,24C39.273,24 33,27.539 33,31.897L33,44.103C33,48.461 39.273,52 47,52C54.727,52 61,48.461 61,44.103L61,31.897Z"/>
+        </g>
+        <g transform="matrix(0.928571,0,0,0.587978,2.42857,-3.92236)">
+            <path d="M69,58.75C69,56.128 67.652,54 65.992,54L30.008,54C28.348,54 27,56.128 27,58.75L27,68.25C27,70.872 28.348,73 30.008,73L65.992,73C67.652,73 69,70.872 69,68.25L69,58.75Z"/>
+        </g>
+        <g transform="matrix(1,0,0,1,-1,-24)">
+            <rect x="37" y="68" width="22" height="20"/>
+        </g>
+        <g transform="matrix(-1.04762,-1.63286e-16,8.74748e-17,-0.909091,99.9048,145.818)">
+            <path d="M61,90L40,90L45.25,68L55.75,68L61,90Z"/>
+        </g>
+        <g transform="matrix(-0.52381,-8.16431e-17,6.99798e-17,-0.727273,73.4524,149.455)">
+            <path d="M61,90L40,90L45.25,68L55.75,68L61,90Z"/>
+        </g>
+    </g>
+</svg>

package/assets/images/layout/DrawEllipTool.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:2;">
+    <path d="M24.465,11.742C31.772,6.852 40.556,4 50,4C75.388,4 96,24.612 96,50C96,59.444 93.148,68.228 88.258,75.535C89.949,77.171 91,79.464 91,82C91,86.967 86.967,91 82,91C79.464,91 77.171,89.949 75.535,88.258C68.228,93.148 59.444,96 50,96C24.612,96 4,75.388 4,50C4,40.556 6.852,31.772 11.742,24.465C10.051,22.829 9,20.536 9,18C9,13.033 13.033,9 18,9C20.536,9 22.829,10.051 24.465,11.742Z" style="fill:none;stroke:black;stroke-width:8px;"/>
+    <g>
+        <g transform="matrix(0.9,0,0,0.9,-27.9,-30.6)">
+            <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+        </g>
+        <g transform="matrix(0.9,0,0,0.9,36.1,33.4)">
+            <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+        </g>
+    </g>
+</svg>

package/assets/images/layout/DrawLineTool.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1;">
+    <g transform="matrix(0.983878,-0.0163912,-0.0163912,0.983336,1.61749,1.64445)">
+        <path d="M20,19L80,80" style="fill:none;stroke:black;stroke-width:8.27px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,-32.9,-35.6)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;stroke-miterlimit:2;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,41.1,38.4)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;stroke-miterlimit:2;"/>
+    </g>
+</svg>

package/assets/images/layout/DrawPathTool.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:2;">
+    <g transform="matrix(0.9,0,0,0.9,-32.9,-35.6)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,3.6,1.4)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,41.1,-35.6)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,-32.9,38.4)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,41.1,38.4)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(1,0,0,0.933333,1.5,3.33333)">
+        <path d="M11.5,20L11.5,80" style="fill:none;stroke:black;stroke-width:8.27px;"/>
+    </g>
+    <g transform="matrix(0.916667,0,0,1,3.66667,1.5)">
+        <path d="M20,11.5L80,11.5" style="fill:none;stroke:black;stroke-width:8.34px;"/>
+    </g>
+    <path d="M80,20L58.5,41.5" style="fill:none;stroke:black;stroke-width:8px;"/>
+    <g transform="matrix(1,0,0,-1,0,100)">
+        <path d="M80,20L58.5,41.5" style="fill:none;stroke:black;stroke-width:8px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,1,4.5,-1.5)">
+        <path d="M80,88.5L20,88.5" style="fill:none;stroke:black;stroke-width:8.41px;"/>
+    </g>
+</svg>

package/assets/images/layout/DrawRectTool.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:2;">
+    <g transform="matrix(0.9,0,0,0.9,-32.9,-35.6)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,41.1,-35.6)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,-32.9,38.4)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,0.9,41.1,38.4)">
+        <circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
+    </g>
+    <g transform="matrix(1,0,0,0.933333,1.5,3.33333)">
+        <path d="M11.5,20L11.5,80" style="fill:none;stroke:black;stroke-width:8.27px;"/>
+    </g>
+    <g transform="matrix(0.933333,0,0,1,3.33333,1)">
+        <path d="M20,11.5L80,11.5" style="fill:none;stroke:black;stroke-width:8.27px;"/>
+    </g>
+    <g transform="matrix(1,0,0,0.9,-1.5,4)">
+        <path d="M88.5,20L88.5,80" style="fill:none;stroke:black;stroke-width:8.41px;"/>
+    </g>
+    <g transform="matrix(0.9,0,0,1,5,-1.5)">
+        <path d="M80,88.5L20,88.5" style="fill:none;stroke:black;stroke-width:8.41px;"/>
+    </g>
+</svg>

package/assets/images/layout/MagicWandTool.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M98.316,17.954C100.561,15.709 100.561,12.064 98.316,9.819L90.181,1.684C87.936,-0.561 84.291,-0.561 82.046,1.684L1.684,82.046C-0.561,84.291 -0.561,87.936 1.684,90.181L9.819,98.316C12.064,100.561 15.709,100.561 17.954,98.316L98.316,17.954ZM85.529,6.961L68.285,24.205L75.795,31.715L93.039,14.471L85.529,6.961Z"/>
+    <g transform="matrix(1,0,0,1,-10,7.61803)">
+        <path d="M30,9L33.811,15.755L41.413,17.292L36.166,23.004L37.053,30.708L30,27.484L22.947,30.708L23.834,23.004L18.587,17.292L26.189,15.755L30,9Z"/>
+    </g>
+    <g transform="matrix(0.725528,0,0,0.725528,25.9405,-3.51006)">
+        <path d="M30,9L33.811,15.755L41.413,17.292L36.166,23.004L37.053,30.708L30,27.484L22.947,30.708L23.834,23.004L18.587,17.292L26.189,15.755L30,9Z"/>
+    </g>
+    <g transform="matrix(1.16667,0,0,1.16667,36.8254,49.5)">
+        <path d="M30,9L33.811,15.755L41.413,17.292L36.166,23.004L37.053,30.708L30,27.484L22.947,30.708L23.834,23.004L18.587,17.292L26.189,15.755L30,9Z"/>
+    </g>
+</svg>

package/assets/images/layout/PointerTool.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-1,0,0,1,100.188,0)">
+        <g transform="matrix(1.45711,1.45711,-1.42796,1.42796,66.0203,-102.988)">
+            <rect x="44" y="66" width="6" height="25"/>
+        </g>
+        <path d="M0.188,45.899L100,-0L54.101,99.812L0.188,45.899L54.101,99.812L40.259,59.741L0.188,45.899Z"/>
+    </g>
+</svg>

package/assets/images/layout/SelectRectTool.svg

@@ -0,0 +1,9 @@
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:2;">
+
+ <g>
+  <title>Layer 1</title>
+  <rect x="60.796" y="59.225" width="380" height="380" stroke-dasharray="80" style="stroke-linecap: round; stroke-miterlimit: 6; stroke-linejoin: round; fill: none; stroke: rgb(0, 0, 0); stroke-width: 50px;"></rect>
+  <ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); stroke-width: 50px;" cx="61.059" cy="58.963" rx="45" ry="45"></ellipse>
+  <ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); stroke-width: 50px;" cx="441.823" cy="440.776" rx="45" ry="45"></ellipse>
+ </g>
+</svg>

package/assets/images/layout/TextBoxTool.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1.30609,0,0,1.16182,-13.4108,-11.5193)">
+        <text x="15px" y="89px" style="font-family:'TimesNewRomanPSMT', 'Times New Roman', serif;font-size:108.892px;">T</text>
+    </g>
+    <rect x="0" y="0" width="100" height="100" style="fill:none;stroke:black;stroke-width:8px;"/>
+</svg>

package/assets/images/layout/TextTool.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.30609,0,0,1.356,-20.7025,-20.6838)">
+        <text x="15px" y="89px" style="font-family:'TimesNewRomanPSMT', 'Times New Roman', serif;font-size:108.892px;">A</text>
+    </g>
+</svg>

package/assets/images/layout/ZoomTool.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(2.625,0,0,2.625,-38,-90.5)">
+        <circle cx="28" cy="48" r="12" style="fill:none;stroke:black;stroke-width:3.05px;"/>
+    </g>
+    <g transform="matrix(0.69,-0.31,-0.31,0.69,58,58)">
+        <path d="M100,100L0,0" style="fill:none;stroke:black;stroke-width:21.05px;"/>
+    </g>
+    <g transform="matrix(1,0,0,0.763158,0,7.26316)">
+        <path d="M35.5,18L35.5,56" style="fill:none;stroke:black;stroke-width:8.99px;"/>
+    </g>
+    <g transform="matrix(6.12323e-17,1,-0.763158,4.67299e-17,63.7368,4.4474e-16)">
+        <path d="M35.5,18L35.5,56" style="fill:none;stroke:black;stroke-width:8.99px;"/>
+    </g>
+</svg>

package/dist/Constants.d.ts

@@ -1,3 +1,3 @@
 export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
 export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
-export declare const assetsPath = "./node_modules/@node-projects/web-component-designer/assets/";
+export declare var assetsPath: string;

package/dist/Constants.js

@@ -1,3 +1,5 @@
 export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
 export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
-export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
+//export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
+let imporUrl = new URL((import.meta.url));
+export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -56,6 +56,13 @@ import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/
 import { SeperatorContextMenu } from '../widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js';
 import { ZoomToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js';
 import { RotateLeftAndRight } from '../widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js';
+import { SelectAllChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu';
+import { PointerToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js';
+import { SeperatorToolProvider } from '../widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js';
+import { ZoomToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js';
+import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js';
+import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
+import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -125,6 +132,7 @@ export function createDefaultServiceContainer() {
     //new CursorLinePointerExtensionProvider()
     );
     serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
+    serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new SeperatorContextMenu(),
@@ -137,6 +145,8 @@ export function createDefaultServiceContainer() {
         new PathContextMenu(),
         new RectContextMenu(),
         new SeperatorContextMenu(),
+        new SelectAllChildrenContextMenu(),
+        new SeperatorContextMenu(),
         new ItemsBelowContextMenu(),
     ];
     return serviceContainer;

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

@@ -10,7 +10,10 @@ export declare class GlobalContext {
     constructor(serviceContainer: ServiceContainer);
     set tool(tool: ITool);
     get tool(): ITool;
-    readonly onToolChanged: TypedEvent<PropertyChangedArgs<ITool>>;
+    readonly onToolChanged: TypedEvent<PropertyChangedArgs<{
+        name: string;
+        tool: ITool;
+    }>>;
     finishedWithTool: (tool: ITool) => void;
     set strokeColor(strokeColor: string);
     get strokeColor(): string;

package/dist/elements/services/GlobalContext.js

@@ -1,4 +1,3 @@
-//TODO: global conext not yet used.
 //Service container should not be something with changeing information, so global context is for tool and color (and maybe more)
 import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
 export class GlobalContext {
@@ -13,10 +12,16 @@ export class GlobalContext {
     set tool(tool) {
         if (this._tool !== tool) {
             const oldTool = this._tool;
-            if (oldTool)
+            if (oldTool) {
                 oldTool.dispose();
+            }
             this._tool = tool;
-            this.onToolChanged.emit(new PropertyChangedArgs(tool, oldTool));
+            let toolName = null;
+            for (let t of this._serviceContainer.designerTools) {
+                if (t[1] == tool)
+                    toolName = t[0];
+            }
+            this.onToolChanged.emit(new PropertyChangedArgs({ name: toolName, tool: tool }, { name: null, tool: oldTool }));
             if (this._tool)
                 this._tool.activated(this._serviceContainer);
         }

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

@@ -26,6 +26,7 @@ import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesig
 import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js";
 import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";
+import { IDesignViewToolbarButtonProvider } from "../widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -53,6 +54,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
     removeDesignerExtensionOfType(container: (ExtensionType | string), lambda: new (...args: any[]) => IDesignerExtensionProvider): void;
     readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
+    readonly designViewToolbarButtons: IDesignViewToolbarButtonProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;

package/dist/elements/services/ServiceContainer.js

@@ -17,6 +17,7 @@ export class ServiceContainer extends BaseServiceContainer {
         }
     }
     designViewConfigButtons = [];
+    designViewToolbarButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);

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

@@ -1,7 +1,7 @@
 import { OverlayLayer } from "./extensions/OverlayLayer.js";
 const overlayLayer = OverlayLayer.Normal;
 export class Snaplines {
-    snapOffset = 15;
+    snapOffset = 5;
     _overlayLayerView;
     _containerItem;
     _positionsH = [];

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

@@ -345,7 +345,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
-        this._canvasContainer.appendChild(this.overlayLayer);
+        this.clickOverlay.appendChild(this.overlayLayer);
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);
         if (this.serviceContainer.designerPointerExtensions)
@@ -393,6 +393,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._scaleFactor = this._zoomFactor;
         this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + (isNaN(this._canvasOffset.x) ? '0' : this._canvasOffset.x) + 'px, ' + (isNaN(this._canvasOffset.y) ? '0' : this._canvasOffset.y) + 'px)';
         this._canvasContainer.style.transformOrigin = '0 0';
+        this.overlayLayer.style.transform = this._canvasContainer.style.transform;
+        this.overlayLayer.style.transformOrigin = '0 0';
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {

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

@@ -17,9 +17,11 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     get designerCanvas(): DesignerCanvas;
     private _zoomInput;
     private _lowertoolbar;
+    private _toolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
+    ready(): Promise<void>;
     zoomReset(): void;
     zoomToFit(): void;
     private _onScrollbar;

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

@@ -25,6 +25,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     }
     _zoomInput;
     _lowertoolbar;
+    _toolbar;
     static style = css `
     :host {
       display: block;
@@ -77,8 +78,16 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 100%;
     }
     #canvas {
-      width: calc(100% - 16px);
+      left: 24px;
+      width: calc(100% - 24px - 16px);
+      height: calc(100% - 32px);
+    }
+
+    #tool-bar{
+      width: 24px;
       height: calc(100% - 32px);
+      position: absolute;
+      background-color: lightgray;      
     }
   
     .zoom-in {
@@ -120,7 +129,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <div id="outer">
       <node-projects-plain-scrollbar id="s-hor" value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
-      <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll"></node-projects-plain-scrollbar>
+      <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll">
+      </node-projects-plain-scrollbar>
+      <node-projects-designer-toolbar id="tool-bar" class="tool-bar"></node-projects-designer-toolbar>
       <div class="bottom-right"></div>
       <div id="lowertoolbar">
         <input id="zoomInput" type="text" value="100%">
@@ -199,6 +210,10 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
         this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
+    async ready() {
+        this._toolbar = await this._getDomElement('tool-bar');
+        this._toolbar.initialize(this.serviceContainer, this);
+    }
     zoomReset() {
         this._designerCanvas.canvasOffset = { x: 0, y: 0 };
         this._designerCanvas.zoomFactor = 1;
@@ -265,6 +280,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         else {
             this._sVert.value += event.deltaY / 10000;
             this._onScrollbar(null);
+            this._sHor.value += event.deltaX / 10000;
+            this._onScrollbar(null);
         }
     }
     get designerWidth() {

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class SelectAllChildrenContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js

@@ -0,0 +1,12 @@
+export class SelectAllChildrenContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return designItem.hasChildren;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [{
+                title: 'Select all Children', action: () => {
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()));
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,19 @@
+import { IElementDefinition } from '../../../services/elementsService/IElementDefinition';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+export declare class DrawElementTool implements ITool {
+    private _elementDefinition;
+    private _createdItem;
+    private _startPosition;
+    readonly cursor = "crosshair";
+    private _rect;
+    constructor(elementDefinition: IElementDefinition);
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+}

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

@@ -0,0 +1,79 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+export class DrawElementTool {
+    _elementDefinition;
+    _createdItem;
+    _startPosition;
+    cursor = 'crosshair';
+    _rect;
+    constructor(elementDefinition) {
+        this._elementDefinition = elementDefinition;
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+        if (this._createdItem)
+            this._createdItem.element.parentElement.removeChild(this._createdItem.element);
+    }
+    pointerEventHandler(designerView, event, currentElement) {
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._onPointerDown(designerView, event);
+                break;
+            case EventNames.PointerMove:
+                this._onPointerMove(designerView, event);
+                break;
+            case EventNames.PointerUp:
+                this._onPointerUp(designerView, event);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    async _onPointerDown(designerView, event) {
+        event.preventDefault();
+        this._startPosition = { x: event.x, y: event.y };
+        this._createdItem = await designerView.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerView.serviceContainer, designerView.instanceServiceContainer));
+        const targetRect = event.target.getBoundingClientRect();
+        this._createdItem.setStyle('position', 'absolute');
+        this._createdItem.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
+        this._createdItem.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
+        this._createdItem.setStyle('width', '0');
+        this._createdItem.setStyle('height', '0');
+        this._createdItem.element.style.overflow = 'hidden';
+        //TODO: add items as last, with all properties set
+        //draw via containerService??? how to draw into a grid, a stackpanel???
+        designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, this._createdItem));
+        designerView.instanceServiceContainer.selectionService.clearSelectedElements();
+    }
+    async _onPointerMove(designerCanvas, event) {
+        if (this._createdItem) {
+            if (!this._rect) {
+                designerCanvas.rootDesignItem.element.appendChild(this._createdItem.element);
+                this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                this._rect.setAttribute('class', 'svg-draw-new-element');
+                this._rect.setAttribute('x', (this._startPosition.x - designerCanvas.containerBoundingRect.x));
+                this._rect.setAttribute('y', (this._startPosition.y - designerCanvas.containerBoundingRect.y));
+            }
+            const w = event.x - this._startPosition.x;
+            const h = event.y - this._startPosition.y;
+            if (w >= 0) {
+                this._rect.setAttribute('width', w);
+                this._createdItem.setStyle('width', w + 'px');
+            }
+            if (h >= 0) {
+                this._rect.setAttribute('height', h);
+                this._createdItem.setStyle('height', h + 'px');
+            }
+        }
+    }
+    async _onPointerUp(designerView, event) {
+        designerView.overlayLayer.removeOverlay(this._rect);
+        designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem]);
+        this._startPosition = null;
+        this._rect = null;
+        this._createdItem = null;
+        designerView.serviceContainer.globalContext.finishedWithTool(this);
+    }
+}

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

@@ -0,0 +1,16 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawEllipsisTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _radius;
+    private _cx;
+    private _cy;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}