@node-projects/web-component-designer 0.0.35 → 0.0.36

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

@@ -3,9 +3,17 @@ import { PaletteElements } from './paletteElements';
 import { DesignerTabControl } from '../../controls/DesignerTabControl';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 export class PaletteView extends BaseCustomWebComponentLazyAppend {
+    selected = 'native';
+    _designerTabControl;
+    static style = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100%;
+    }`;
     constructor() {
         super();
-        this.selected = 'native';
         this._designerTabControl = new DesignerTabControl();
         this._designerTabControl.selectedIndex = 0;
         this.shadowRoot.appendChild(this._designerTabControl);
@@ -20,11 +28,4 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-PaletteView.style = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      height: 100%;
-    }`;
 customElements.define('node-projects-palette-view', PaletteView);

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

@@ -5,6 +5,30 @@ import { CssPropertiesService } from '../../services/propertiesService/services/
 import { CommonPropertiesService } from '../../services/propertiesService/services/CommonPropertiesService';
 import { AttributesPropertiesService } from '../../services/propertiesService/services/AttributesPropertiesService';
 export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    _serviceContainer;
+    _designerTabControl;
+    _selectedItems;
+    _propertyGridPropertyLists;
+    _itemsObserver;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      user-select: none;
+    }
+    iron-pages {
+      overflow: hidden;
+      height: 250px;
+      background: var(--medium-grey, #2f3545);
+      color: white;
+    }
+    button:hover {
+      box-shadow: inset 0 3px 0 var(--light-grey);
+    }
+    button:focus {
+      box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
+    }
+    `;
     constructor() {
         super();
         this._designerTabControl = new DesignerTabControl();
@@ -116,23 +140,4 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
     }
 }
-PropertyGrid.style = css `
-    :host {
-      display: block;
-      height: 100%;
-      user-select: none;
-    }
-    iron-pages {
-      overflow: hidden;
-      height: 250px;
-      background: var(--medium-grey, #2f3545);
-      color: white;
-    }
-    button:hover {
-      box-shadow: inset 0 3px 0 var(--light-grey);
-    }
-    button:focus {
-      box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
-    }
-    `;
 customElements.define('node-projects-property-grid', PropertyGrid);

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

@@ -2,14 +2,11 @@ import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { ValueType } from '../../services/propertiesService/ValueType';
 export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
-    constructor(serviceContainer) {
-        super();
-        this._propertyMap = new Map();
-        this._serviceContainer = serviceContainer;
-        this._div = document.createElement("div");
-        this._div.className = "content-wrapper";
-        this.shadowRoot.appendChild(this._div);
-    }
+    _div;
+    _propertyMap = new Map();
+    _serviceContainer;
+    _propertiesService;
+    _designItems;
     static get style() {
         return css `
     :host{
@@ -79,6 +76,13 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     `;
     }
+    constructor(serviceContainer) {
+        super();
+        this._serviceContainer = serviceContainer;
+        this._div = document.createElement("div");
+        this._div.className = "content-wrapper";
+        this.shadowRoot.appendChild(this._div);
+    }
     setPropertiesService(propertiesService) {
         this._propertiesService = propertiesService;
         DomHelper.removeAllChildnodes(this._div);

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

@@ -1,6 +1,108 @@
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
 import { DesignItem } from '../../item/DesignItem';
 export class TreeView extends BaseCustomWebComponentLazyAppend {
+    _items;
+    _index;
+    _previouslySelected;
+    _treeDiv;
+    _mapElementTreeitem;
+    _rootItem;
+    //TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
+    static style = css `
+    :host {
+      --horz-margin: 20px;
+      --vert-margin: 0px;
+      --horz-shift: calc(var(--horz-margin) / 2); /* typically */
+      --vert-shift: 12px;
+
+      display: inline-block;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: var(--dark-grey, #232733);
+      overflow-y: auto;
+    }
+    button {
+      border: none;
+      font-size: 13px;
+      display: block;
+      padding: 4px 0;
+      cursor: pointer;
+      width: 100%;
+      text-align: left;
+      display: inline-block;
+      margin: 0;
+      background: var(--dark-grey, #232733);
+      position: relative;
+      color: white;
+    }
+    button:hover, button:focus {
+      background: var(--light-grey, #383f52);
+    }
+    span {
+      margin: 4px;
+    }
+    .id {
+      font-style: italic;
+      color: var(--highlight-pink, #e91e63);
+    }
+    .selected {
+      background: var(--light-grey, #383f52);
+      outline: none;
+    }
+
+    li, ul {
+      margin: 0;
+      padding: 0;
+    }
+    .tree ul {
+      margin-left: var(--horz-margin);
+    }
+    .tree li {
+      list-style-type: none;
+      margin-top: var(--vert-margin);
+      margin-bottom: var(--vert-margin);
+      position: relative;
+    }
+
+    /* up connector */
+    .tree li::before {
+        content: "";
+        position: absolute;
+        top: calc(0px - var(--vert-margin));
+        left: calc(var(--horz-shift) - var(--horz-margin));
+        width: calc(var(--horz-margin) - var(--horz-shift));
+        height: calc(var(--vert-shift) + var(--vert-margin));
+        border-left: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        border-radius: 0;
+    }
+
+    /* down connector */
+    .tree li::after {
+        position: absolute;
+        content: "";
+        top: var(--vert-shift);
+        left: calc(var(--horz-shift) - var(--horz-margin));
+        width: calc(var(--horz-margin) - var(--horz-shift));
+        height: calc(100% - var(--vert-shift));
+        border-left: 1px solid #ccc;
+        border-top: 1px solid #ccc;
+        border-radius: 0;
+    }
+
+    /* do not draw: up connector of first root item */
+    ul.tree>li:first-child::before { display:none; }
+
+    /* do not draw: down connector of last item */
+    .tree li:last-child::after  { display:none; }
+
+    /* draw rounded: down connector of first root item */
+    ul.tree>li:first-child::after { border-radius: 5px 0 0 0; }
+
+    /* draw rounded: up connector of last item */
+    .tree li:last-child:before { border-radius: 0 0 0 5px; }
+    `;
     constructor() {
         super();
         this._treeDiv = document.createElement('div');
@@ -122,100 +224,4 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
         }
     }
 }
-//TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
-TreeView.style = css `
-    :host {
-      --horz-margin: 20px;
-      --vert-margin: 0px;
-      --horz-shift: calc(var(--horz-margin) / 2); /* typically */
-      --vert-shift: 12px;
-
-      display: inline-block;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      background: var(--dark-grey, #232733);
-      overflow-y: auto;
-    }
-    button {
-      border: none;
-      font-size: 13px;
-      display: block;
-      padding: 4px 0;
-      cursor: pointer;
-      width: 100%;
-      text-align: left;
-      display: inline-block;
-      margin: 0;
-      background: var(--dark-grey, #232733);
-      position: relative;
-      color: white;
-    }
-    button:hover, button:focus {
-      background: var(--light-grey, #383f52);
-    }
-    span {
-      margin: 4px;
-    }
-    .id {
-      font-style: italic;
-      color: var(--highlight-pink, #e91e63);
-    }
-    .selected {
-      background: var(--light-grey, #383f52);
-      outline: none;
-    }
-
-    li, ul {
-      margin: 0;
-      padding: 0;
-    }
-    .tree ul {
-      margin-left: var(--horz-margin);
-    }
-    .tree li {
-      list-style-type: none;
-      margin-top: var(--vert-margin);
-      margin-bottom: var(--vert-margin);
-      position: relative;
-    }
-
-    /* up connector */
-    .tree li::before {
-        content: "";
-        position: absolute;
-        top: calc(0px - var(--vert-margin));
-        left: calc(var(--horz-shift) - var(--horz-margin));
-        width: calc(var(--horz-margin) - var(--horz-shift));
-        height: calc(var(--vert-shift) + var(--vert-margin));
-        border-left: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
-        border-radius: 0;
-    }
-
-    /* down connector */
-    .tree li::after {
-        position: absolute;
-        content: "";
-        top: var(--vert-shift);
-        left: calc(var(--horz-shift) - var(--horz-margin));
-        width: calc(var(--horz-margin) - var(--horz-shift));
-        height: calc(100% - var(--vert-shift));
-        border-left: 1px solid #ccc;
-        border-top: 1px solid #ccc;
-        border-radius: 0;
-    }
-
-    /* do not draw: up connector of first root item */
-    ul.tree>li:first-child::before { display:none; }
-
-    /* do not draw: down connector of last item */
-    .tree li:last-child::after  { display:none; }
-
-    /* draw rounded: down connector of first root item */
-    ul.tree>li:first-child::after { border-radius: 5px 0 0 0; }
-
-    /* draw rounded: up connector of last item */
-    .tree li:last-child:before { border-radius: 0 0 0 5px; }
-    `;
 customElements.define('node-projects-tree-view', TreeView);

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

@@ -2,6 +2,77 @@ import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projec
 import { NodeType } from '../../item/NodeType';
 import { assetsPath } from '../../../Constants';
 export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
+    _treeDiv;
+    _tree;
+    _filter;
+    static style = css `
+      * {
+          touch-action: none;
+      }
+      
+      span.drag-source {
+        border: 1px solid grey;
+        border-radius: 3px;
+        padding: 2px;
+        background-color: silver;
+      }
+
+      span.fancytree-node.fancytree-drag-source {
+        outline: 1px dotted grey;
+      }
+      span.fancytree-node.fancytree-drop-accept {
+        outline: 1px dotted green;
+      }
+      span.fancytree-node.fancytree-drop-reject {
+        outline: 1px dotted red;
+      }
+      #tree ul {
+        border: none;
+      }
+      #tree ul:focus {
+        outline: none;
+      }
+      span.fancytree-title {
+        align-items: center;
+        flex-direction: row;
+        display: inline-flex;
+      }
+      td {
+        white-space: nowrap;
+      }
+      td:nth-child(n+2) {
+        text-align: center;
+      }
+      td > img {
+        vertical-align: middle;
+      }
+
+      table.fancytree-ext-table tbody tr.fancytree-selected {
+        background-color: #bebebe;
+      }
+    `;
+    static template = html `
+  <div style="height: 100%;">
+    <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
+    <div style="height: calc(100% - 23px); overflow: auto;">
+      <table id="treetable" style="min-width: 100%;">
+        <colgroup>
+          <col width="*">
+          <col width="25px">
+          <col width="25px">
+          <col width="25px">
+        </colgroup>
+        <thead style="display: none;">
+          <tr>
+            <th></th>
+            <th></th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </div>`;
     constructor() {
         super();
         let externalCss = document.createElement('style');
@@ -260,7 +331,6 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         this._tree.getRootNode().updateCounters();
     }
     _getChildren(item, currentNode) {
-        var _a;
         if (currentNode == null) {
             currentNode = this._tree.getRootNode();
         }
@@ -271,7 +341,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             ref: item
         });
         for (let i of item.children()) {
-            if (i.nodeType !== NodeType.TextNode || ((_a = i.content) === null || _a === void 0 ? void 0 : _a.trim())) {
+            if (i.nodeType !== NodeType.TextNode || i.content?.trim()) {
                 this._getChildren(i, newNode);
             }
         }
@@ -290,72 +360,4 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         }
     }
 }
-TreeViewExtended.style = css `
-      * {
-          touch-action: none;
-      }
-      
-      span.drag-source {
-        border: 1px solid grey;
-        border-radius: 3px;
-        padding: 2px;
-        background-color: silver;
-      }
-
-      span.fancytree-node.fancytree-drag-source {
-        outline: 1px dotted grey;
-      }
-      span.fancytree-node.fancytree-drop-accept {
-        outline: 1px dotted green;
-      }
-      span.fancytree-node.fancytree-drop-reject {
-        outline: 1px dotted red;
-      }
-      #tree ul {
-        border: none;
-      }
-      #tree ul:focus {
-        outline: none;
-      }
-      span.fancytree-title {
-        align-items: center;
-        flex-direction: row;
-        display: inline-flex;
-      }
-      td {
-        white-space: nowrap;
-      }
-      td:nth-child(n+2) {
-        text-align: center;
-      }
-      td > img {
-        vertical-align: middle;
-      }
-
-      table.fancytree-ext-table tbody tr.fancytree-selected {
-        background-color: #bebebe;
-      }
-    `;
-TreeViewExtended.template = html `
-  <div style="height: 100%;">
-    <input id="input" style="width: 100%; height:21px;" placeholder="Filter..." autocomplete="off">
-    <div style="height: calc(100% - 23px); overflow: auto;">
-      <table id="treetable" style="min-width: 100%;">
-        <colgroup>
-          <col width="*">
-          <col width="25px">
-          <col width="25px">
-          <col width="25px">
-        </colgroup>
-        <thead style="display: none;">
-          <tr>
-            <th></th>
-            <th></th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-      </table>
-    </div>
-  </div>`;
 customElements.define('node-projects-tree-view-extended', TreeViewExtended);

package/dist/index.d.ts

@@ -150,7 +150,6 @@ export * from "./elements/documentContainer.js";
 export * from "./enums/EventNames.js";
 export * from "./enums/PointerActionType.js";
 export type { IActivateable } from "./interfaces/IActivateable.js";
-export type { IDesignerMousePoint } from "./interfaces/IDesignerMousePoint.js";
 export type { IDisposable } from "./interfaces/IDisposable.js";
 export type { IPoint } from "./interfaces/IPoint.js";
 export type { IRect } from "./interfaces/IRect.js";

package/package.json

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

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "ES2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "target": "esnext",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "esnext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     "allowJs": true,                       /* Allow javascript files to be compiled. */

package/assets/images/chromeDevtools/accelerometer-back.svg

@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   viewBox="0 0 770.00001 1580"
-   version="1.1"
-   width="770"
-   height="1580"
-   id="svg11071">
-  <defs
-     id="defs3775" />
-  <metadata
-     id="metadata11076">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="matrix(-1,0,0,1,770.5,0)"
-     id="layer3">
-    <path
-       style="fill:none;stroke:#ff8800;stroke-width:9"
-       d="M 766,366 V 466"
-       id="path11635" />
-    <path
-       style="fill:none;stroke:#888888;stroke-width:9"
-       d="M 766,768 V 568"
-       id="path11637" />
-    <g
-       style="fill-rule:evenodd"
-       id="g3764">
-      <rect
-         style="fill:#222222"
-         x="0"
-         y="0"
-         width="767"
-         height="1580"
-         ry="80"
-         rx="80"
-         id="rect11633" />
-    </g>
-    <g
-       style="fill:#ffffff;fill-rule:evenodd"
-       id="g3769">
-      <rect
-         style="fill-opacity:0.13332998"
-         x="273.5"
-         y="1526"
-         width="220"
-         height="15"
-         ry="5"
-         rx="5"
-         id="rect11707" />
-      <path
-         style="fill-opacity:0.86667002"
-         d="M 70.36319,6.9493575 C 28.332124,5.755102 4.8083241,47.982906 4.8378685,83.222978 L 6.032124,1507.7128 c 0.025949,30.952 32.037776,68.2787 64.633409,68.2161 l 622.086167,-1.1942 c 30.87325,-0.059 68.21618,-37.2632 68.21618,-64.6334 V 76.057445 c 0,-31.282766 -24.68851,-66.7195765 -63.13681,-70.302343 C 456.89848,4.61017 269.72229,6.9493575 70.36319,6.9493575 Z"
-         id="path11722" />
-    </g>
-  </g>
-</svg>

package/assets/images/chromeDevtools/accelerometer-front.svg

@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg11071" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="1580" width="770" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 770.00001 1580">
- <metadata id="metadata11076">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title/>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <g id="layer3">
-  <path id="path11635" d="m766 366v100" stroke="#f80" stroke-width="9" fill="none"/>
-  <path id="path11637" d="m766 768v-200" stroke="#888" stroke-width="9" fill="none"/>
-  <g fill-rule="evenodd">
-   <rect id="rect11633" rx="80" ry="80" height="1580" width="767" y="0" x="0" fill="#222"/>
-   <rect id="rect11061" fill-opacity=".13333" rx="5" ry="5" height="18" width="80" y="80" x="343.5" fill="#fff"/>
-   <circle id="path11063" cx="459" fill-opacity=".26667" cy="76.25" r="15" fill="#00f"/>
-   <circle id="path11069" cx="297.25" fill-opacity=".26667" cy="74" r="17.5" fill="#00f"/>
-  </g>
-  <g fill-rule="evenodd" fill="#fff">
-   <rect id="rect11705" fill-opacity=".13333" rx="10" ry="10" height="25" width="50" y="34" x="358.5"/>
-   <rect id="rect11707" fill-opacity=".13333" rx="5" ry="5" height="15" width="220" y="1526" x="273.5"/>
-   <path id="path11722" d="m83.5 38c-27.7 0-50 22.3-50 50v1360c0 16.62 13.38 30 30 30h640c16.62 0 30-13.38 30-30v-1360c0-27.7-22.3-50-50-50h-90-50c-19.39 0-35 15.61-35 35v4c0 24.93-20.07 45-45 45h-160c-24.93 0-45-20.07-45-45v-4c0-19.39-15.61-35-35-35h-70z" fill-opacity=".86667"/>
-  </g>
- </g>
-</svg>

package/assets/images/chromeDevtools/accessibility-icon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.6667 3.99999C11.9267 4.46666 9.88667 4.66666 8 4.66666C6.11333 4.66666 4.07333 4.46666 2.33333 3.99999L2 5.33333C3.24 5.66666 4.66667 5.88666 6 5.99999V14.6667H7.33333V10.6667H8.66667V14.6667H10V5.99999C11.3333 5.88666 12.76 5.66666 14 5.33333L13.6667 3.99999ZM8 3.99999C8.73333 3.99999 9.33333 3.39999 9.33333 2.66666C9.33333 1.93333 8.73333 1.33333 8 1.33333C7.26667 1.33333 6.66667 1.93333 6.66667 2.66666C6.66667 3.39999 7.26667 3.99999 8 3.99999Z" fill="#202124"/>
-</svg>

package/assets/images/chromeDevtools/add-icon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="139.004 171.164 10 10" width="10" height="10">
-  <path d="M 144.771 171.164 L 143.237 171.164 L 143.237 175.397 L 139.004 175.397 L 139.004 176.931 L 143.237 176.931 L 143.237 181.164 L 144.771 181.164 L 144.771 176.931 L 149.004 176.931 L 149.004 175.397 L 144.771 175.397 Z"></path>
-</svg>