@node-projects/web-component-designer 0.1.83 → 0.1.85

package/dist/elements/helper/LayoutHelper.d.ts

@@ -1,5 +1,8 @@
 import { IPoint } from "../../interfaces/IPoint.js";
 import { IDesignItem } from "../item/IDesignItem.js";
+/**
+ * This function filters a items list, so only the outer elments are used for example in a move
+ */
 export declare function filterChildPlaceItems(items: IDesignItem[]): IDesignItem[];
 export declare function getDesignItemCurrentPos(designItem: IDesignItem, mode: 'position' | 'transform' | 'margin' | 'padding'): IPoint;
 export declare function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding'): void;

package/dist/elements/helper/LayoutHelper.js

@@ -1,6 +1,9 @@
 //TODO:  this function should return the correct property to change a layout,
 // for example left/right when left or right is used,
 //maybe margin on grid? or transform??
+/**
+ * This function filters a items list, so only the outer elments are used for example in a move
+ */
 export function filterChildPlaceItems(items) {
     const filterdPlaceItems = [];
     next: for (let i of items) {

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

@@ -97,8 +97,8 @@ export class DefaultPlacementService {
         }
         let filteredItems = filterChildPlaceItems(items);
         for (const designItem of filteredItems) {
-            const canvas = designItem.element.closest('#node-projects-designer-canvas-canvas');
-            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.element.parentElement, canvas, true);
+            const canvas = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element;
+            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.parent.element, canvas, true);
             let transformMatrixParentTransformsCompensated = null;
             if (originalElementAndAllAncestorsMultipliedMatrix) {
                 transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());

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

@@ -12,8 +12,13 @@ export class SnaplinesProviderService {
             const positionsMiddleH = [];
             const positionsV = [];
             const positionsMiddleV = [];
-            for (let n of containerItem.querySelectorAll('*')) {
-                if (!ignMap.has(n)) {
+            const tw = document.createTreeWalker(containerItem.isRootItem ? containerItem.element.shadowRoot : containerItem.element, NodeFilter.SHOW_ELEMENT);
+            let n = tw.nextNode();
+            while (n != null) {
+                if (ignMap.has(n)) {
+                    n = tw.nextSibling();
+                }
+                else {
                     const p = n.getBoundingClientRect();
                     const pLeft = (p.x - outerRect.x) / canvas.scaleFactor;
                     const pMidH = (p.x - outerRect.x + p.width / 2) / canvas.scaleFactor;
@@ -36,6 +41,7 @@ export class SnaplinesProviderService {
                     positionsV.push([pBottom, transformedP]);
                     if (provideWithDist)
                         positionsV.push([pBottom + provideWithDistDist, transformedP]);
+                    n = tw.nextNode();
                 }
             }
             positionsH.push([0, { x: 0, y: 0, width: 0, height: 0 }]);

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

@@ -19,6 +19,7 @@ import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { NodeType } from '../../item/NodeType.js';
 import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
 import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
+import { filterChildPlaceItems } from '../../helper/LayoutHelper.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -749,13 +750,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _lastDdElement = null;
     _onDragOver(event) {
         event.preventDefault();
-        /*if (this.alignOnSnap) {
-          this.snapLines.calculateSnaplines(this.instanceServiceContainer.selectionService.selectedElements);
-          //TODO: fix this following code...
-          const currentPoint = this.getDesignerMousepoint(event);
-          let containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.rootDesignItem))
-          containerService.finishPlace(this, this.rootDesignItem, this._initialPoint, currentPoint, this.instanceServiceContainer.selectionService.selectedElements);
-        }*/
         this.fillCalculationrects();
         if (event.dataTransfer.types.length > 0 && event.dataTransfer.types[0] == 'Files') {
             const ddService = this.serviceContainer.externalDragDropService;
@@ -918,10 +912,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                             offset.x = -moveOffset;
                         if (event.key == 'ArrowLeft')
                             offset.x = moveOffset;
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => {
+                        for (let x of filterChildPlaceItems(this.instanceServiceContainer.selectionService.selectedElements)) {
                             const containerStyle = getComputedStyle(x.parent.element);
                             x.serviceContainer.getLastServiceWhere('containerService', y => y.serviceForContainer(x.parent, containerStyle)).moveElements([x], offset, false);
-                        });
+                        }
+                        ;
                     }
                     break;
             }

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

@@ -6,6 +6,12 @@ export class MagicWandSelectorTool {
     _pathD;
     _path;
     pointerEventHandler(designerCanvas, event, currentElement) {
+        if (event.ctrlKey)
+            this.cursor = 'copy';
+        else if (event.altKey)
+            this.cursor = 'default';
+        else
+            this.cursor = 'default';
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
@@ -30,6 +36,8 @@ export class MagicWandSelectorTool {
                 designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.querySelectorAll('*');
                 const inSelectionElements = [];
+                if ((event.ctrlKey || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                    inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
                     let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
@@ -47,9 +55,13 @@ export class MagicWandSelectorTool {
                     const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
                     if (p1 && p2 && p3 && p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
-                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                        inSelectionElements.push(desItem);
+                        if (!inSelectionElements.includes(desItem) && !event.altKey) {
+                            inSelectionElements.push(desItem);
+                        }
+                        else if (event.altKey) {
+                            const idx = inSelectionElements.indexOf(desItem);
+                            inSelectionElements.splice(idx, 1);
+                        }
                     }
                 }
                 designerCanvas.overlayLayer.removeOverlay(this._path);

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

@@ -8,6 +8,12 @@ export class RectangleSelectorTool {
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        if (event.ctrlKey)
+            this.cursor = 'copy';
+        else if (event.altKey)
+            this.cursor = 'default';
+        else
+            this.cursor = 'default';
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
@@ -52,6 +58,8 @@ export class RectangleSelectorTool {
                 designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.querySelectorAll('*');
                 let inSelectionElements = [];
+                if ((event.ctrlKey || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                    inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
                     let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
@@ -69,11 +77,16 @@ export class RectangleSelectorTool {
                     const p4 = p3 && this._rect.isPointInFill(point);
                     if (p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
-                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                        inSelectionElements.push(desItem);
+                        if (!inSelectionElements.includes(desItem) && !event.altKey) {
+                            inSelectionElements.push(desItem);
+                        }
+                        else if (event.altKey) {
+                            const idx = inSelectionElements.indexOf(desItem);
+                            inSelectionElements.splice(idx, 1);
+                        }
                     }
                 }
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
                 designerCanvas.overlayLayer.removeOverlay(this._rect);
                 this._rect = null;
                 this._initialPoint = null;

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js

@@ -1,10 +1,13 @@
 import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
 import { assetsPath } from "../../../../../../Constants.js";
+import { SelectionToolPopup } from "../popups/SelectionToolPopup.js";
 export class SelectorToolButtonProvider {
     provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, {
+        const button = new DesignerToolbarButton(designerCanvas, {
             'RectangleSelector': { icon: assetsPath + 'images/layout/SelectRectTool.svg' },
             'MagicWandSelector': { icon: assetsPath + 'images/layout/MagicWandTool.svg' }
         });
+        button.popup = SelectionToolPopup;
+        return button;
     }
 }

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

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

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

@@ -0,0 +1,102 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static 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;
+      }
+      .inputs{
+        float: left;
+        margin-top: 5px;
+        align-items: center;
+      }
+      .input {
+        display: flex;
+        align-items: center; 
+        margin-top: 5px;
+      }
+      .text {
+        margin-left: 5px;
+        font-size: 14px;
+      }
+      .strokecolor{ 
+        float: both;
+      }
+      .fillbrush{
+        float: both;
+      }
+      .strokethickness{
+        float: both;
+      }
+      
+      `;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Draw</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" 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>
+              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
+            </div>
+            <div class="inputs">
+              <div class="input">
+                <input id="strokecolor" class="strokecolor" type="color" title="stroke color" value="#000000" style="padding: 0; width:31px; height:31px;">
+                <text class="text">Stroke Color</text>
+              </div>
+              <div class="input">
+                <input id="fillbrush" class="fillbrush" type="color" title="fill brush" value="#ffffff" style="padding: 0; width:31px; height:31px;">
+                <text class="text">Fill Brush</text>
+              </div>
+              <div class="input">
+                <input id="strokethickness" class="strokethickness" type="range" title="stroke thickness" min="1" max="20" value="3" style="padding: 0; width:80px; height:20px; margin-right: 5px;">
+                <text class="text">Stroke Thickness</text>
+              </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']);
+        }
+        if (this.shadowRoot.querySelector("input.strokecolor")) {
+            let input = this._getDomElement("strokecolor");
+            input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);
+        }
+        if (this.shadowRoot.querySelector("input.fillbrush")) {
+            let input = this._getDomElement("fillbrush");
+            input.onchange = () => this.getRootNode().host.setFillBrush(input.value);
+        }
+        if (this.shadowRoot.querySelector("input.strokethickness")) {
+            let input = this._getDomElement("strokethickness");
+            input.onchange = () => this.getRootNode().host.setStrokeThickness(input.value);
+        }
+    }
+}
+customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);

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

@@ -26,6 +26,7 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
           display: flex;
           flex-wrap: wrap;
           margin-bottom: 5px;
+          gap: 3px;
       }
       .inputs{
         float: left;
@@ -99,4 +100,4 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);
+customElements.define('node-projects-designer-draw-tool-popup', DrawToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.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.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/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>
+            </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/TransformToolPopup.js

@@ -333,4 +333,4 @@ export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend
         }
     }
 }
-customElements.define('node-projects-designer-transformtool-popup', TransformToolPopup);
+customElements.define('node-projects-designer-transform-tool-popup', TransformToolPopup);

package/dist/index.d.ts

@@ -80,6 +80,8 @@ export type { IInstanceService } from "./elements/services/instanceService/IInst
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
+export type { IMultiplayerService } from "./elements/services/multiplayerService/IMultiplayerService.js";
+export * from "./elements/services/multiplayerService/MultiplayerService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
@@ -164,6 +166,7 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolBut
 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/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.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

@@ -46,6 +46,7 @@ export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
+export * from "./elements/services/multiplayerService/MultiplayerService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export * from "./elements/services/propertiesService/PropertyGroupsService.js";
 export * from "./elements/services/propertiesService/propertyEditors/BasePropertyEditor.js";
@@ -112,6 +113,7 @@ export * from "./elements/widgets/designerView/tools/toolBar/buttons/TextToolBut
 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/DrawToolPopup.js";
+export * from "./elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.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,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",