@node-projects/web-component-designer 0.0.92 → 0.0.95

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,6 @@
 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/';
+console.log("aasetPath", assetsPath);

package/dist/commandHandling/CommandType.d.ts

@@ -5,6 +5,8 @@ export declare enum CommandType {
     'delete' = "delete",
     'undo' = "undo",
     'redo' = "redo",
+    'rotateCounterClockwise' = "rotateCounterClockwise",
+    'rotateClockwise' = "rotateClockwise",
     'selectAll' = "selectAll",
     'moveToFront' = "moveToFront",
     'moveForward' = "moveForward",

package/dist/commandHandling/CommandType.js

@@ -6,6 +6,8 @@ export var CommandType;
     CommandType["delete"] = "delete";
     CommandType["undo"] = "undo";
     CommandType["redo"] = "redo";
+    CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
+    CommandType["rotateClockwise"] = "rotateClockwise";
     CommandType["selectAll"] = "selectAll";
     CommandType["moveToFront"] = "moveToFront";
     CommandType["moveForward"] = "moveForward";

package/dist/elements/documentContainer.js

@@ -128,13 +128,13 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this.codeView.dispose();
     }
     executeCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
             this.designerView.executeCommand(command);
         else if (this._tabControl.selectedIndex === 1)
             this.codeView.executeCommand(command);
     }
     canExecuteCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
             return this.designerView.canExecuteCommand(command);
         else if (this._tabControl.selectedIndex === 1)
             return this.codeView.canExecuteCommand(command);

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -103,10 +103,8 @@ export class ContextMenuHelper {
             window.removeEventListener('resize', this._closeBound);
             window.removeEventListener('mousedown', this._closeOnDownBound);
             window.removeEventListener('mouseup', this._closeOnUpBound);
-            if (this._shadowRoot === document)
-                document.body.removeChild(this._element);
-            else
-                this._shadowRoot.removeChild(this._element);
+            if (this._element.parentElement)
+                this._element.parentElement.removeChild(this._element);
         });
     }
     show() {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -55,6 +55,7 @@ import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/
 import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
 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';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -127,6 +128,8 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new SeperatorContextMenu(),
+        new RotateLeftAndRight(),
+        new SeperatorContextMenu(),
         new ZoomToElementContextMenu(),
         new SeperatorContextMenu(),
         new ZMoveContextMenu(),

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -69,6 +69,56 @@ export class DefaultModelCommandService {
             }
             grp.commit();
         }
+        else if (command.type == CommandType.rotateCounterClockwise) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateCounterClockwise');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('transform');
+            let degree = 0;
+            let rotation = "";
+            if (trf != null) {
+                try {
+                    if (trf.includes('-'))
+                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
+                    else
+                        degree = parseInt(trf.match(/\d+/)[0]);
+                    rotation = "rotate(" + (degree - 90) + "deg)";
+                }
+                catch {
+                    rotation = "rotate(-90deg)";
+                }
+            }
+            else {
+                rotation = "rotate(-90deg)";
+            }
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', rotation);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.rotateClockwise) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateClockwise');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('transform');
+            let degree = 0;
+            let rotation = "";
+            if (trf != null) {
+                try {
+                    if (trf.includes('-'))
+                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
+                    else
+                        degree = parseInt(trf.match(/\d+/)[0]);
+                    rotation = "rotate(" + (degree + 90) + "deg)";
+                }
+                catch {
+                    rotation = "rotate(90deg)";
+                }
+            }
+            else {
+                rotation = "rotate(90deg)";
+            }
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', rotation);
+            }
+            grp.commit();
+        }
         else
             return null;
         return true;

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -19,7 +19,7 @@ export class DefaultPlacementService {
         return true;
     }
     getElementOffset(container, designItem) {
-        return container.element.getBoundingClientRect();
+        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
     }
     calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
         let trackX = newPoint.x - startPoint.x;
@@ -79,7 +79,7 @@ export class DefaultPlacementService {
         //maybe a undo actions returns itself or an id so it could be changed?
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         let filterdItems = filterChildPlaceItems(items);
-        //TODO: -> what is if a transform already exists -> backup existing style.?
+        //TODO: -> maybe get existing transform via getComputedStyle???
         for (const designItem of filterdItems) {
             const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
             combineTransforms(placementView.transformHelperElement, designItem.element, designItem.styles.get('transform'), newTransform);

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.d.ts

@@ -5,7 +5,6 @@ export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAp
     private _tree;
     static readonly style: CSSStyleSheet;
     constructor();
-    ready(): Promise<void>;
     initialize(serviceContainer: ServiceContainer): Promise<void>;
     private lazyLoad;
 }

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -29,6 +29,7 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         //@ts-ignore
         import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._treeDiv = document.createElement('div');
@@ -36,8 +37,6 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         this._treeDiv.style.overflow = 'auto';
         this._treeDiv.setAttribute('id', 'tree');
         this.shadowRoot.appendChild(this._treeDiv);
-    }
-    async ready() {
         $(this._treeDiv).fancytree({
             icon: false,
             extensions: ['dnd5'],

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

@@ -10,6 +10,7 @@ import { OverlayLayerView } from "./overlayLayerView";
 import { IRect } from "../../../interfaces/IRect.js";
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { ISize } from "../../../interfaces/ISize.js";
+import { ITool } from "./tools/ITool.js";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
@@ -32,12 +33,14 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
-    removeCurrentPointerEventHandler(): any;
+    captureActiveTool(tool: ITool): any;
+    releaseActiveTool(): any;
     getDesignSurfaceDimensions(): ISize;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
-    getItemsBelowMouse(event: MouseEvent): Element[];
+    elementsFromPoint(x: number, y: number): Element[];
+    showHoverExtension(element: Element): any;
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;

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

@@ -14,12 +14,14 @@ import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
 import { IRect } from "../../../interfaces/IRect.js";
 import { ISize } from "../../../interfaces/ISize.js";
+import { ITool } from "./tools/ITool.js";
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     containerBoundingRect: DOMRect;
     outerRect: DOMRect;
     clickOverlay: HTMLDivElement;
+    private _activeTool;
     gridSize: number;
     alignOnGrid: boolean;
     alignOnSnap: boolean;
@@ -32,7 +34,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _scaleFactor;
     private _canvasOffset;
     private _currentContextMenu;
-    private _lastPointerDownHandler;
     get zoomFactor(): number;
     set zoomFactor(value: number);
     get scaleFactor(): number;
@@ -71,7 +72,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     handlePasteCommand(): Promise<void>;
     handleDeleteCommand(): void;
     initialize(serviceContainer: ServiceContainer): void;
-    elementFromPoint(x: number, y: number): Element;
     connectedCallback(): void;
     private _zoomFactorChanged;
     _updateTransform(): void;
@@ -85,20 +85,28 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDblClick;
     private onKeyUp;
     private onKeyDown;
+    /**
+     * Converts the Event x/y coordinates, to the mouse position on the canvas
+     */
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
-    convertEventToViewPortCoordinates(point: IPoint): IPoint;
+    /**
+     * Converts the Event x/y coordinates, to the mouse position in the viewport
+     */
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
+    elementFromPoint(x: number, y: number): Element;
+    elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
-    _rect: SVGRectElement;
+    showHoverExtension(element: Element): void;
     private _pointerEventHandler;
-    removeCurrentPointerEventHandler(): void;
+    captureActiveTool(tool: ITool): void;
+    releaseActiveTool(): void;
     private _fillCalculationrects;
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
-    getItemsBelowMouse(event: MouseEvent): Element[];
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
+    private zoomConvertEventToViewPortCoordinates;
     zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
 }