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

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

@@ -0,0 +1,23 @@
+import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../../Constants";
+import { DesignerToolbarPopup } from "./designerToolbarPopup";
+import { DesignerToolbarPopupToolSelect } from "../../designerToolbarGenerics/designerToolbarPopupToolSelect";
+export class SelectorToolsPopup extends DesignerToolbarPopup {
+    templateToolSelect = html `
+        <div class="tool" data-command="setTool" popup="selector" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/layout/SelectRectTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/layout/MagicWandTool.svg');"></div>
+    `;
+    toolActivated = new TypedEvent();
+    ready() {
+        this._setTitle(this.getAttribute("title"));
+        let toolSelect = new DesignerToolbarPopupToolSelect();
+        toolSelect.insertToolContent(this.templateToolSelect);
+        toolSelect.toolActivated.on((toolArg) => {
+            this.toolActivated.emit(toolArg);
+        });
+        let content = [];
+        content.push(toolSelect);
+        this._setContent(content);
+    }
+}
+customElements.define('node-projects-designer-popup-selector', SelectorToolsPopup);

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

@@ -0,0 +1,8 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare abstract class DesignerToolbarPopup extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    ready(): void;
+    protected _setTitle(title: string): void;
+    protected _setContent(elements: HTMLElement[]): void;
+}

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

@@ -0,0 +1,41 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class DesignerToolbarPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        .container {
+            width: 150px;
+            min-height: 200px;
+            color: white;
+            background-color: rgb(64, 64, 64);
+            border: 1px solid black;
+        }
+
+        header {
+            text-align: center;
+        }
+
+        * {
+          pointer-events: auto;
+        }
+    `;
+    static template = html `
+        <div class="container">
+            <header><h2 id="title" style="margin: 0;"></h2></header>
+            <main id="content-area"></main>
+        </div>
+    `;
+    //TODO: remove this class,
+    //     i think the popups need no base, okay if they need one the should at least be normal elmeents
+    // and also the expicit popup should set the size, not the base class. maybe one needs to be bigger, one smaller...
+    ready() {
+        this._setTitle(this.getAttribute("title"));
+    }
+    _setTitle(title) {
+        this._getDomElement("title").innerHTML = title;
+    }
+    _setContent(elements) {
+        let contentArea = this._getDomElement("content-area");
+        for (let elem of elements) {
+            contentArea.appendChild(elem);
+        }
+    }
+}

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -168,10 +168,12 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                 checkboxColumnIdx: 0, // render the checkboxes into the 1st column
             },
             activate: (event, data) => {
-                let node = data.node;
-                let designItem = node.data.ref;
-                if (designItem)
-                    designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                if (event.originalEvent) { // only for clicked items, not when elements selected via code.
+                    let node = data.node;
+                    let designItem = node.data.ref;
+                    if (designItem)
+                        designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                }
             },
             createNode: (event, data) => {
                 let node = data.node;

package/dist/index.d.ts

@@ -101,8 +101,18 @@ export type { IPlacementView } from "./elements/widgets/designerView/IPlacementV
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
+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/popups/DrawToolPopup.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";
 export type { ITool } from "./elements/widgets/designerView/tools/ITool.js";
-export * from "./elements/widgets/designerView/tools/designerToolsDock.js";
+export * from "./elements/widgets/designerView/tools/toolBar/DesignerToolbar.js";
 export * from "./elements/widgets/designerView/tools/NamedTools.js";
 export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
 export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
@@ -160,6 +170,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleIt
 export * from "./elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";

package/dist/index.js

@@ -66,7 +66,16 @@ export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
-export * from "./elements/widgets/designerView/tools/designerToolsDock.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";
+export * from "./elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js";
+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/popups/DrawToolPopup.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";
 export * from "./elements/widgets/designerView/tools/NamedTools.js";
 export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
 export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
@@ -120,6 +129,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleIt
 export * from "./elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";

package/package.json

@@ -1,42 +1,42 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.95",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.1",
-    "construct-style-sheets-polyfill": "^3.1.0"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.9",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.14",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.14",
-    "codemirror": "^5.65.2",
-    "esprima-next": "^5.8.1",
-    "html2canvas": "*",
-    "jest": "^27.5.1",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.1",
-    "monaco-editor": "^0.33.0",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.6.2",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.98",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": "^0.9.1",
+    "construct-style-sheets-polyfill": "^3.1.0"
+  },
+  "devDependencies": {
+    "@node-projects/lean-he-esm": "^3.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@papyrs/stylo": "^0.0.15",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.14",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.4.14",
+    "codemirror": "^5.65.3",
+    "esprima-next": "^5.8.1",
+    "html2canvas": "*",
+    "jest": "^27.5.1",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.1",
+    "monaco-editor": "^0.33.0",
+    "ts-jest": "^27.1.4",
+    "typescript": "^4.6.3",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}