@node-projects/web-component-designer 0.1.100 → 0.1.102

package/dist/elements/documentContainer.js

@@ -2,6 +2,7 @@ import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce, TypedEv
 import { DesignerTabControl } from './controls/DesignerTabControl.js';
 import { DesignerView } from './widgets/designerView/designerView.js';
 import { SimpleSplitView } from './controls/SimpleSplitView.js';
+import { sleep } from "./helper/Helper.js";
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     designerView;
     codeView;
@@ -115,10 +116,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         if (this._tabControl.selectedIndex === 2) {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (primarySelection) {
-                this._content = this.designerView.getHTML();
+                //this._content = this.designerView.getHTML();
                 if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
                     this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
-                    this.codeView.setSelection(this._selectionPosition);
+                    if (this._selectionPosition)
+                        this.codeView.setSelection(this._selectionPosition);
                     this._selectionPosition = null;
                 }
             }
@@ -216,7 +218,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this.codeView.update(this._content, this.designerView.instanceServiceContainer);
                 if (this._selectionPosition) {
                     this.codeView.setSelection(this._selectionPosition);
-                    this._selectionPosition = null;
+                    sleep(20).then(x => {
+                        if (this._selectionPosition)
+                            this.codeView.setSelection(this._selectionPosition);
+                        this._selectionPosition = null;
+                    });
                 }
                 if (i.changedViaClick) {
                     this.codeView.focusEditor();

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -102,6 +102,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
         }
     }
     writeTextNode(indentedTextWriter, designItem, indentAndNewline, trim = true) {
+        let start = indentedTextWriter.position;
+        let end = indentedTextWriter.position;
         let content = DomConverter.normalizeContentValue(designItem.content);
         if (trim)
             content = content.trim();
@@ -112,5 +114,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             if (indentAndNewline)
                 this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
+        end = indentedTextWriter.position;
+        for (const d of designItem.children())
+            designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(d, { start: start, length: end - start });
     }
 }

package/dist/elements/services/selectionService/SelectionService.js

@@ -6,7 +6,7 @@ function findDesignItem(designItem, position) {
         for (let d of designItem.children()) {
             const nodePosition = designItem.instanceServiceContainer.designItemDocumentPositionService.getPosition(d);
             if (nodePosition) {
-                if (nodePosition.start <= position)
+                if (nodePosition.start <= position && nodePosition.start + nodePosition.length >= position)
                     usedItem = d;
             }
         }

package/dist/elements/widgets/debugView/debug-view.js

@@ -195,9 +195,9 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
         if (this._ready) {
             requestAnimationFrame(() => {
                 let element = designItem?.element;
-                if (element && element.nodeType != 8) {
-                    if (element.nodeType == 3)
-                        element = element.parentNode;
+                if (element?.nodeType == 3)
+                    element = element.parentNode;
+                if (element && element.nodeType != 8 && element.nodeType != 11) {
                     this.computedStyle = getComputedStyle(element);
                     this.selectedElementOffsetParent = element.offsetParent;
                     if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {

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

@@ -122,4 +122,4 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-customElements.define('node-projects-property-grid', PropertyGrid);
+customElements.define('node-projects-web-component-designer-property-grid', PropertyGrid);

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

@@ -53,7 +53,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     <div title="textContent" id="contentRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
     <span class="desc">Content:</span><input type="text" id="content">
   </div>
-  <node-projects-property-grid id="pg"></node-projects-property-grid>`;
+  <node-projects-web-component-designer-property-grid id="pg"></node-projects-web-component-designer-property-grid>`;
     _type;
     _id;
     _content;
@@ -167,4 +167,4 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);
+customElements.define('node-projects-web-component-designer-property-grid-with-header', PropertyGridWithHeader);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.100",
+  "version": "0.1.102",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

package/dist/elements/services/propertiesService/app.d.ts

@@ -1,2 +0,0 @@
-declare function getProtoProperties(target: any): string[];
-declare function getAttributesIfCustomElement(target: any): any;

package/dist/elements/services/propertiesService/app.js

@@ -1,71 +0,0 @@
-"use strict";
-function getProtoProperties(target) {
-    // If this is a custom element, you need to go up the prototype
-    // chain until you get proper HTMLElement, since everything under it
-    // is generated prototypes and will have propeties that are dupes (like:
-    // every observedAttribute is also mirrored as a property)
-    const isCustomElement = target.tagName.indexOf('-') !== -1;
-    let proto = target.__proto__;
-    if (isCustomElement) {
-        while (proto.constructor !== window.HTMLElement.prototype.constructor) {
-            proto = proto.__proto__;
-        }
-    }
-    let protoProps = {};
-    // We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
-    if (proto.constructor.name === 'HTMLAnchorElement') {
-        protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
-        protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
-        proto = proto.__proto__;
-    }
-    while (proto.constructor.name !== 'Element') {
-        Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
-        proto = proto.__proto__;
-    }
-    let propNames = Object.keys(protoProps).sort();
-    // Skip some very specific Polymer/element properties.
-    let blacklist = [
-        // Polymer specific
-        'isAttached',
-        'constructor', 'created', 'ready', 'attached', 'detached',
-        'attributeChanged', 'is', 'listeners', 'observers', 'properties',
-        // Native elements ones we don't care about
-        'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
-        'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
-        'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
-        'lowsrc', 'longDesc',
-        // Specific elements stuff
-        'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
-        'selectionDirection', 'selectionStart', 'selectionEnd'
-    ];
-    let i = 0;
-    while (i < propNames.length) {
-        let name = propNames[i];
-        // Skip everything that starts with a _ which is a Polymer private/protected
-        // and you probably don't care about it.
-        // Also anything in the blacklist. Or that starts with webkit.
-        if (name.charAt(0) === '_' ||
-            name === 'keyEventTarget' ||
-            blacklist.indexOf(name) !== -1 ||
-            name.indexOf('webkit') === 0 ||
-            name.indexOf('on') === 0) {
-            propNames.splice(i, 1);
-            continue;
-        }
-        // Skip everything that doesn't have a setter.
-        if (!protoProps[name].set) {
-            propNames.splice(i, 1);
-            continue;
-        }
-        i++;
-    }
-    return propNames || [];
-}
-function getAttributesIfCustomElement(target) {
-    if (target.tagName.indexOf('-') !== -1) {
-        return target.constructor.observedAttributes;
-    }
-    else {
-        return [];
-    }
-}

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

@@ -1,6 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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);