@node-projects/web-component-designer 0.0.142 → 0.0.144

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -3,8 +3,6 @@ import { AbstractExtension } from "../AbstractExtension.js";
 import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";
 export class EditTextExtension extends AbstractExtension {
-    _contentEditedBound;
-    _blurBound;
     static template = html `
     <div style="height: 24px; display: flex;">
       <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
@@ -13,11 +11,16 @@ export class EditTextExtension extends AbstractExtension {
       <button data-command="strikeThrough" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
     </div>
   `;
+    _contentEditedBound;
+    _blurBound;
     _blurTimeout;
+    _foreignObject;
+    _focusBound;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
         this._contentEditedBound = this._contentEdited.bind(this);
         this._blurBound = this._blur.bind(this);
+        this._focusBound = this._focus.bind(this);
     }
     extend() {
         //todo -> check what to do with extensions, do not loose edit on mouse click,...
@@ -27,13 +30,13 @@ export class EditTextExtension extends AbstractExtension {
         //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
         this.extendedItem.element.setAttribute('contenteditable', '');
         this.extendedItem.element.addEventListener('input', this._contentEditedBound);
-        this.extendedItem.element.addEventListener('blur', this._blurBound);
         this.extendedItem.element.focus();
         this.designerCanvas.eatEvents = this.extendedItem.element;
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const elements = EditTextExtension.template.content.cloneNode(true);
         elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
-        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this._foreignObject = foreignObject;
         foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
         foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
         foreignObject.setAttribute('width', '96');
@@ -42,6 +45,8 @@ export class EditTextExtension extends AbstractExtension {
         this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
         this.overlays.push(foreignObject);
         this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.addEventListener('focus', this._focusBound);
     }
     refresh() {
         this.dispose();
@@ -55,6 +60,11 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.updateChildrenFromNodesChildren();
         this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }
+    handlesPointerEvent(designerCanvas, event, currentElement) {
+        let p = event.composedPath();
+        const stylo = this._foreignObject.querySelector('stylo-editor');
+        return p.indexOf(stylo) >= 0;
+    }
     _contentEdited() {
         //todo -> save???
         //this.extendedItem.content = this.extendedItem.element.innerHTML;
@@ -69,6 +79,12 @@ export class EditTextExtension extends AbstractExtension {
             }, 150);
         }
     }
+    _focus() {
+        if (this._blurTimeout) {
+            clearTimeout(this._blurTimeout);
+            this._blurTimeout = null;
+        }
+    }
     _formatSelection(type) {
         if (this._blurTimeout)
             clearTimeout(this._blurTimeout);

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.d.ts

@@ -2,7 +2,8 @@ import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from "../IExtensionManger";
-export declare class EditTextWithStyloExtension extends AbstractExtension {
+import { handlesPointerEvent } from "./EditTextExtension";
+export declare class EditTextWithStyloExtension extends AbstractExtension implements handlesPointerEvent {
     private _contentEditedBound;
     private _blurBound;
     private static template;
@@ -11,9 +12,11 @@ export declare class EditTextWithStyloExtension extends AbstractExtension {
     private _rect2;
     private _rect3;
     private _rect4;
+    private _foreignObject;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     private _drawClickOverlayRects;
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
     refresh(): void;
     dispose(): void;
     _clickOutside(e: any): void;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js

@@ -1,4 +1,5 @@
 import { html } from "@node-projects/base-custom-webcomponent";
+import { TextTool } from "../../tools/TextTool";
 import { AbstractExtension } from "../AbstractExtension.js";
 import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";
@@ -13,6 +14,7 @@ export class EditTextWithStyloExtension extends AbstractExtension {
     _rect2;
     _rect3;
     _rect4;
+    _foreignObject;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
         import('@papyrs/stylo/dist/esm/loader.js').then(d => d.defineCustomElements());
@@ -24,8 +26,10 @@ export class EditTextWithStyloExtension extends AbstractExtension {
         this.extendedItem.element.addEventListener('blur', this._blurBound);
         this.extendedItem.element.focus();
         this.designerCanvas.eatEvents = this.extendedItem.element;
+        this.designerCanvas.serviceContainer.globalContext.tool = new TextTool(true);
         const elements = EditTextWithStyloExtension.template.content.cloneNode(true);
-        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this._foreignObject = foreignObject;
         foreignObject.setAttribute('x', '0');
         foreignObject.setAttribute('y', '0');
         foreignObject.setAttribute('width', '100%');
@@ -58,6 +62,11 @@ export class EditTextWithStyloExtension extends AbstractExtension {
         this._rect3 = this._drawRect(normalized.x + normalized.width, 0, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect3, OverlayLayer.Normal);
         this._rect4 = this._drawRect(0, normalized.y + normalized.height, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect4, OverlayLayer.Normal);
     }
+    handlesPointerEvent(designerCanvas, event, currentElement) {
+        let p = event.composedPath();
+        const stylo = this._foreignObject.querySelector('stylo-editor');
+        return p.indexOf(stylo) >= 0;
+    }
     refresh() {
         this.dispose();
     }

package/dist/elements/widgets/designerView/extensions/ExtensionManager.d.ts

@@ -2,13 +2,14 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { ExtensionType } from './ExtensionType';
 import { IExtensionManager } from "./IExtensionManger";
+import { IDesignerExtension } from "./IDesignerExtension";
 export declare class ExtensionManager implements IExtensionManager {
     designerCanvas: IDesignerCanvas;
     designItemsWithExtentions: Set<IDesignItem>;
     constructor(designerCanvas: IDesignerCanvas);
     private _contentChanged;
     private _selectedElementsChanged;
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): void;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): void;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;

package/dist/elements/widgets/designerView/extensions/ExtensionManager.js

@@ -47,6 +47,7 @@ export class ExtensionManager {
     applyExtension(designItem, extensionType, recursive = false) {
         if (designItem && designItem.nodeType == NodeType.Element) {
             const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
+            let extensions = [];
             if (extProv) {
                 for (let e of extProv) {
                     if (e.shouldExtend(this, this.designerCanvas, designItem)) {
@@ -56,6 +57,7 @@ export class ExtensionManager {
                         const ext = e.getExtension(this, this.designerCanvas, designItem);
                         try {
                             ext.extend();
+                            extensions.push(ext);
                         }
                         catch (err) {
                             console.error(err);
@@ -71,7 +73,9 @@ export class ExtensionManager {
                     this.applyExtension(d, extensionType, recursive);
                 }
             }
+            return extensions;
         }
+        return null;
     }
     applyExtensions(designItems, extensionType, recursive = false) {
         if (designItems) {

package/dist/elements/widgets/designerView/extensions/IExtensionManger.d.ts

@@ -1,7 +1,8 @@
 import { IDesignItem } from "../../../item/IDesignItem";
 import { ExtensionType } from './ExtensionType';
+import { IDesignerExtension } from "./IDesignerExtension";
 export interface IExtensionManager {
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): any;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): IDesignerExtension[];
     applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;

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

@@ -2,10 +2,13 @@ import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class TextTool implements ITool {
-    constructor();
+    private _textEditExtensions;
+    constructor(editExistingText?: boolean);
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     readonly cursor = "text";
+    private _textCreated;
+    private _editExistingText;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -3,31 +3,47 @@ import { DesignItem } from '../../../item/DesignItem.js';
 import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
 import { ExtensionType } from '../extensions/ExtensionType.js';
 export class TextTool {
-    constructor() {
+    _textEditExtensions;
+    constructor(editExistingText) {
+        if (editExistingText)
+            this._editExistingText = true;
     }
     activated(serviceContainer) {
+        this._textCreated = false;
     }
     dispose() {
     }
     cursor = 'text';
+    _textCreated = false;
+    _editExistingText = false;
     pointerEventHandler(designerCanvas, event, currentElement) {
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
-                const span = document.createElement('span');
-                const di = DesignItem.createDesignItemFromInstance(span, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                di.setStyle('position', 'absolute');
-                di.setStyle('left', currentPoint.x + 'px');
-                di.setStyle('top', currentPoint.y + 'px');
-                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                //designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                //todo: we need to keep the tool active, cause the pointer tool eats the stylo events. Maybe we could also remove the eatEvents property
-                //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
-                //should we configure the editTextExtension anywhere??
-                designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick);
-                setTimeout(() => {
-                    span.focus();
-                }, 50);
+                if (!this._textCreated && !this._editExistingText) {
+                    this._textCreated = true;
+                    const span = document.createElement('span');
+                    const di = DesignItem.createDesignItemFromInstance(span, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    di.setStyle('position', 'absolute');
+                    di.setStyle('left', currentPoint.x + 'px');
+                    di.setStyle('top', currentPoint.y + 'px');
+                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                    //todo: Maybe we could also remove the eatEvents property
+                    //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
+                    //should we configure the editTextExtension anywhere??
+                    this._textEditExtensions = designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick);
+                    setTimeout(() => { span.focus(); }, 50);
+                }
+                else {
+                    for (let e of this._textEditExtensions) {
+                        if (e.handlesPointerEvent) {
+                            const ret = e.handlesPointerEvent(designerCanvas, event, currentElement);
+                            if (!ret) {
+                                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                            }
+                        }
+                    }
+                }
                 break;
         }
     }

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.d.ts

@@ -13,4 +13,7 @@ export declare class DesignerToolbar extends BaseCustomWebComponentConstructorAp
     initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
     showPopup(designerToolbarButton: DesignerToolbarButton): void;
     setTool(tool: string): void;
+    setStrokeColor(color: string): void;
+    setFillBrush(color: string): void;
+    setStrokeThickness(input: string): void;
 }

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.js

@@ -64,5 +64,23 @@ export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
         }
         this._designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool });
     }
+    setStrokeColor(color) {
+        if (this._popupContainer.children.length) {
+            this._popupContainer.innerHTML = '';
+        }
+        this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeColor, parameter: color });
+    }
+    setFillBrush(color) {
+        if (this._popupContainer.children.length) {
+            this._popupContainer.innerHTML = '';
+        }
+        this._designerView.designerCanvas.executeCommand({ type: CommandType.setFillBrush, parameter: color });
+    }
+    setStrokeThickness(input) {
+        if (this._popupContainer.children.length) {
+            this._popupContainer.innerHTML = '';
+        }
+        this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
+    }
 }
 customElements.define('node-projects-designer-toolbar', DesignerToolbar);

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

@@ -3,7 +3,7 @@ import { assetsPath } from "../../../../../../Constants.js";
 export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
     static style = css `
       .container {
-          width: 150px;
+          width: 220px;
           min-height: 200px;
           color: white;
           background-color: rgb(64, 64, 64);
@@ -25,7 +25,33 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
       .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>
@@ -37,6 +63,20 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
               <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() {
@@ -45,6 +85,18 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
             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/paletteView/paletteView.js

@@ -32,6 +32,7 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
                 console.warn('Error loading elements', err);
             }
         }
+        this._designerTabControl.refreshItems();
     }
 }
 customElements.define('node-projects-palette-view', PaletteView);

package/dist/index.d.ts

@@ -90,7 +90,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
-export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/AbstractPropertiesService.js";
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";

package/dist/index.js

@@ -61,7 +61,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
-export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/AbstractPropertiesService.js";
 export * from "./elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.142",
+  "version": "0.0.144",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",