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

package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup.js

@@ -0,0 +1,25 @@
+import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
+export class DrawToolPopup extends DesignerToolbarPopup {
+    templateToolSelect = html `
+        <div class="tool" data-command="setTool" popup="draw" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.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-drawtool', DrawToolPopup);

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

@@ -0,0 +1,23 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { ServiceContainer } from "../../../services/ServiceContainer.js";
+import { DesignerView } from "../designerView.js";
+import "./designerToolbarGenerics/designerToolsButtons.js";
+import "./designerToolbarPopups/DrawToolPopup.js";
+export declare class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _designerView;
+    private _toolButtonsElem;
+    private _toolPopupElems;
+    private _serviceContainer;
+    private _prevSelected;
+    ready(): Promise<void>;
+    initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
+    private _registerPopups;
+    private _toolButtonActivated;
+    private _activatePopup;
+    private _popupToolSelected;
+    private _isPopupScenario;
+    private _resetPreviousElements;
+    private _hideAllPopups;
+}

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

@@ -0,0 +1,115 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+import { CommandType } from "../../../../commandHandling/CommandType.js";
+import { DesignerToolRenderer } from "./designerToolbarGenerics/designerToolRenderer.js";
+import "./designerToolbarGenerics/designerToolsButtons.js";
+import "./designerToolbarPopups/DrawToolPopup.js";
+export class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        node-projects-designer-tools-buttons {
+            height: 100%;
+            width: 100%;
+        }
+
+        #popups {
+            position: absolute;
+            top: calc(0px + 10px);
+            height: 100%;
+            left: calc(32px + 4px + 10px);
+        }
+
+        #popups > * {
+            display: none;
+        }
+
+        #popups > *[opened] {
+            display: block;
+        }
+    `;
+    static template = html `
+        <node-projects-designer-tools-buttons id="tool-buttons"></node-projects-designer-tools-buttons>
+        <div id="popups">
+            <node-projects-designer-popup-drawtool popup="draw" class="popup" title="Drawtools" tabindex="-1">
+            </node-projects-designer-popup-drawtool>
+        </div>
+    `;
+    _designerView;
+    _toolButtonsElem;
+    _toolPopupElems;
+    _serviceContainer;
+    _prevSelected = [];
+    async ready() {
+        this._toolButtonsElem = this._getDomElement("tool-buttons");
+        this._toolButtonsElem.toolActivated.on((toolActivated => {
+            this._toolButtonActivated(toolActivated[0], toolActivated[1]);
+        }));
+        this._registerPopups();
+        let categories = [];
+        await this._waitForChildrenReady();
+        let tools = [];
+        for (let tool of this._toolButtonsElem.toolCollection) {
+            if (!categories.includes(tool.category)) {
+                tools.push(DesignerToolRenderer.createToolFromObject(tool));
+                categories.push(tool.category);
+            }
+        }
+        this._toolButtonsElem.setToolsExternal(tools);
+    }
+    initialize(serviceContainer, designerView) {
+        this._serviceContainer = serviceContainer;
+        this._serviceContainer.globalContext.onToolChanged.on((e) => {
+            let command_name;
+            let found = false;
+            this._serviceContainer.designerTools.forEach((tool, key) => {
+                if (tool === e.newValue && !found) {
+                    command_name = key;
+                    found = true;
+                    this._toolButtonsElem.externalToolChange(command_name);
+                }
+            });
+        });
+        this._designerView = designerView;
+    }
+    _registerPopups() {
+        let popups = this._getDomElement("popups");
+        this._toolPopupElems = [...popups.querySelectorAll('.popup')];
+        //DrawToolPopup
+        let drawToolPopup = popups.querySelectorAll("node-projects-designer-popup-drawtool")[0];
+        drawToolPopup.toolActivated.on((toolArg) => this._popupToolSelected(drawToolPopup, toolArg));
+    }
+    _toolButtonActivated(tool, external) {
+        this._hideAllPopups();
+        this._prevSelected[1] = this._prevSelected[0];
+        this._prevSelected[0] = tool;
+        if (!external) {
+            if (this._isPopupScenario()) {
+                this._resetPreviousElements();
+                this._activatePopup(tool.category);
+            }
+        }
+        this._toolButtonsElem.markToolAsSelected(tool.command_parameter);
+        let command = {
+            type: CommandType.setTool,
+            parameter: tool.command_parameter,
+        };
+        this._designerView.executeCommand(command);
+    }
+    _activatePopup(category) {
+        this._toolPopupElems.find(x => x.getAttribute("popup") == category)?.setAttribute("opened", "");
+    }
+    _popupToolSelected(popup, tool) {
+    }
+    _isPopupScenario() {
+        return JSON.stringify(this._prevSelected[1]) === JSON.stringify(this._prevSelected[0]);
+    }
+    _resetPreviousElements() {
+        for (let i = 0; i < this._prevSelected.length; i++) {
+            this._prevSelected[i] = null;
+        }
+    }
+    _hideAllPopups() {
+        for (let popup of this._toolPopupElems) {
+            popup.removeAttribute("opened");
+        }
+    }
+}
+customElements.define('node-projects-designer-tools-dock', DesignerToolsDock);

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js

@@ -7,6 +7,7 @@ export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
     _imgdiv;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._imgdiv = this._getDomElement('imgdiv');
     }
     reRender(designerView) {

package/dist/elements/widgets/paletteView/paletteTreeView.d.ts

@@ -8,6 +8,5 @@ export declare class PaletteTreeView extends BaseCustomWebComponentConstructorAp
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
-    ready(): Promise<void>;
     loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
 }

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -55,6 +55,7 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     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._filter = this._getDomElement('input');
@@ -65,8 +66,6 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             });
         };
         this._treeDiv = this._getDomElement('treetable');
-    }
-    async ready() {
         $(this._treeDiv).fancytree({
             icon: true,
             extensions: ['childcounter', 'dnd5', 'filter'],

package/dist/elements/widgets/paletteView/paletteView.js

@@ -14,6 +14,7 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
     }`;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._designerTabControl = new DesignerTabControl();
         this._designerTabControl.selectedIndex = 0;
         this.shadowRoot.appendChild(this._designerTabControl);

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -28,6 +28,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._designerTabControl = new DesignerTabControl();
         this.shadowRoot.appendChild(this._designerTabControl);
         this.addEventListener('contextmenu', (e) => {

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -78,6 +78,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     constructor(serviceContainer) {
         super();
+        this._restoreCachedInititalValues();
         this._serviceContainer = serviceContainer;
         this._div = document.createElement("div");
         this._div.className = "content-wrapper";

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -53,6 +53,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     _instanceServiceContainer;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._type = this._getDomElement('type');
         this._id = this._getDomElement('id');
         this._pg = this._getDomElement('pg');

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

@@ -108,6 +108,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._treeDiv = document.createElement('div');
         this._treeDiv.style.userSelect = 'none';
         this.shadowRoot.appendChild(this._treeDiv);

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

@@ -94,6 +94,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     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._filter = this._getDomElement('input');
@@ -178,6 +179,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                     let designItem = node.data.ref;
                     if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
                         node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
+                        node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element);
+                        node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null);
                         let d = document.createElement("div");
                         d.className = "cmd";
                         let imgL = document.createElement('img');
@@ -375,10 +378,12 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         this._tree.visit((node) => {
             if (activeElements && activeElements.indexOf(node.data.ref) >= 0) {
                 node.setSelected(true);
+                node.setActive(true);
                 node.makeVisible({ scrollIntoView: true });
             }
             else {
                 node.setSelected(false);
+                node.setActive(false);
             }
         });
     }

package/dist/index.d.ts

@@ -102,6 +102,7 @@ export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.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/NamedTools.js";
 export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
 export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
@@ -160,6 +161,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/PathContex
 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/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export type { IDesignerPointerExtension } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js";
 export type { IDesignerPointerExtensionProvider } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";

package/dist/index.js

@@ -66,6 +66,7 @@ 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/NamedTools.js";
 export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
 export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
@@ -120,6 +121,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/PathContex
 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/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";

package/package.json

@@ -1,42 +1,42 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.92",
-  "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.6.0",
-    "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.8",
-    "@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.32.1",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.5.5",
-    "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.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"
+  }
+}