@node-projects/web-component-designer 0.0.32 → 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();
@@ -40,6 +64,12 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         this._designerTabControl.appendChild(attributeEditorAttributeList);
         this._propertyGridPropertyLists.push(attributeEditorAttributeList);
         attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("set-styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "set-styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
         attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("styles"));
         attributeEditorAttributeList.createElements(null);
         attributeEditorAttributeList.title = "styles";
@@ -57,6 +87,12 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         attributeEditorAttributeList.title = "grid";
         this._designerTabControl.appendChild(attributeEditorAttributeList);
         this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("flex"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "flex";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
         this._designerTabControl.selectedIndex = 0;
     }
     get serviceContainer() {
@@ -72,6 +108,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
             this._propertyGridPropertyLists[0].setPropertiesService(propService);
             this._propertyGridPropertyLists[0].createElements(this.selectedItems[0]);
             this._propertyGridPropertyLists[1].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[3].createElements(this.selectedItems[0]);
         }
         for (const a of this._propertyGridPropertyLists) {
             a.designItemsChanged(items);
@@ -103,22 +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%;
-    }
-    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{
@@ -21,9 +18,9 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     .content-wrapper {
       padding: .5em;
       display: grid;
-      grid-template-columns: 11px auto 1fr;
+      grid-template-columns: 11px auto minmax(80px, 1fr);
       align-items: center;
-      grid-auto-rows: 24px;
+      grid-auto-rows: minmax(24px, auto);
       align-items: center;
     }
     label, input, select {
@@ -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

@@ -30,6 +30,8 @@ export type { IElementAtPointService } from "./elements/services/elementAtPointS
 export * from "./elements/services/contentService/ContentService.js";
 export type { IContentChanged } from "./elements/services/contentService/IContentChanged.js";
 export type { IContentService } from "./elements/services/contentService/IContentService.js";
+export * from "./elements/services/copyPasteService/CopyPasteService.js";
+export type { ICopyPasteService } from "./elements/services/copyPasteService/ICopyPasteService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
 export type { IElementDefinition } from "./elements/services/elementsService/IElementDefinition.js";
@@ -148,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/dist/index.js

@@ -20,6 +20,7 @@ export * from "./elements/services/placementService/GridPlacementService.js";
 export * from "./elements/services/placementService/SnaplinesProviderService.js";
 export * from "./elements/services/elementAtPointService/ElementAtPointService.js";
 export * from "./elements/services/contentService/ContentService.js";
+export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";

package/dist/interfaces/IDesignerMousePoint.d.ts

@@ -6,4 +6,6 @@ export interface IDesignerMousePoint {
     offsetInControlX: number;
     offsetInControlY: number;
     zoom?: number;
+    normalizedX?: number;
+    normalizedY?: number;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.32",
+  "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. */