@node-projects/web-component-designer 0.1.90 → 0.1.92

package/dist/elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.js

@@ -0,0 +1,37 @@
+import { BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+export class AbstractBaseToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.d.ts

@@ -1,6 +1,6 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export declare class DrawToolPopup extends AbstractBaseToolPopup {
+    static style: CSSStyleSheet[];
     static template: HTMLTemplateElement;
     constructor();
 }

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js

@@ -1,32 +1,11 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { html, css } from '@node-projects/base-custom-webcomponent';
 import { assetsPath } from "../../../../../../Constants.js";
-export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export class DrawToolPopup extends AbstractBaseToolPopup {
+    static style = [super.style, css `
       .container {
           width: 220px;
-          min-height: 200px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
+          min-height: 300px;
       }
       .inputs{
         float: left;
@@ -50,9 +29,7 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
       }
       .strokethickness{
         float: both;
-      }
-      
-      `;
+      }`];
     static template = html `
         <div class="container">
           <header><h2 id="title" style="margin: 0;">Draw</h2></header>
@@ -82,10 +59,6 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
         </div>`;
     constructor() {
         super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
         if (this.shadowRoot.querySelector("input.strokecolor")) {
             let input = this._getDomElement("strokecolor");
             input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.d.ts

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.js

@@ -0,0 +1,49 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}
+customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.d.ts

@@ -0,0 +1,4 @@
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export declare class PointerToolPopup extends AbstractBaseToolPopup {
+    static template: HTMLTemplateElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.js

@@ -0,0 +1,16 @@
+import { html } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export class PointerToolPopup extends AbstractBaseToolPopup {
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="Pointer" title="Pointer" style="background-image: url('${assetsPath}images/tools/PointerTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="Pan" title="Pan" style="background-image: url('${assetsPath}images/tools/PanTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+}
+customElements.define('node-projects-designer-pointer-tool-popup', PointerToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.d.ts

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.js

@@ -0,0 +1,49 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}
+customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.d.ts

@@ -1,6 +1,4 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export declare class SelectionToolPopup extends AbstractBaseToolPopup {
     static template: HTMLTemplateElement;
-    constructor();
 }

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js

@@ -1,33 +1,7 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { html } from '@node-projects/base-custom-webcomponent';
 import { assetsPath } from "../../../../../../Constants.js";
-export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 120px;
-          min-height: 100px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-          gap: 3px;
-      }`;
+import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js';
+export class SelectionToolPopup extends AbstractBaseToolPopup {
     static template = html `
         <div class="container">
           <header><h2 id="title" style="margin: 0;">Selection</h2></header>
@@ -38,12 +12,5 @@ export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend
             </div>
           </main>
         </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-    }
 }
 customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from "./elements/helper/Helper.js";
 export * from "./elements/helper/SwitchContainerHelper.js";
 export * from "./elements/helper/NpmPackageLoader.js";
 export * from "./elements/helper/LayoutHelper.js";
+export * from "./elements/helper/SelectionHelper.js";
 export type { IContextMenuItem, IContextMenu } from "./elements/helper/contextMenu/IContextMenuItem.js";
 export * from "./elements/item/DesignItem.js";
 export type { IDesignItem } from "./elements/item/IDesignItem.js";
@@ -29,6 +30,7 @@ export type { IBindableObjectsService } from "./elements/services/bindableObject
 export type { IBindableObjectDragDropService } from "./elements/services/bindableObjectsService/IBindableObjectDragDropService.js";
 export type { IBindingService } from "./elements/services/bindingsService/IBindingService.js";
 export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/placementService/AbsolutePlacementService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";
@@ -166,8 +168,11 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorTo
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
 export type { IDesignViewToolbarButtonProvider } from "./elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js";

package/dist/index.js

@@ -15,12 +15,14 @@ export * from "./elements/helper/Helper.js";
 export * from "./elements/helper/SwitchContainerHelper.js";
 export * from "./elements/helper/NpmPackageLoader.js";
 export * from "./elements/helper/LayoutHelper.js";
+export * from "./elements/helper/SelectionHelper.js";
 export * from "./elements/item/DesignItem.js";
 export * from "./elements/item/BindingMode.js";
 export * from "./elements/item/BindingTarget.js";
 export * from "./elements/item/NodeType.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
 export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/placementService/AbsolutePlacementService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";
@@ -113,8 +115,11 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorTo
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js";
 export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";

package/package.json

@@ -1,24 +1,24 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.1.90",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "jochen.kuehner@gmx.de",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": ">=0.21.2"
-  },
-  "devDependencies": {
-    "mdn-data": "^2.3.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.1.92",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "jochen.kuehner@gmx.de",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": ">=0.23.0"
+  },
+  "devDependencies": {
+    "mdn-data": "^2.4.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}