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

package/assets/images/chromeDevtools/justify-content-space-evenly-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="3" height="6" x="7" y="3.5" fill="#000" rx="1"/><rect width="3" height="6" x="3" y="3.5" fill="#000" rx="1"/><path fill="#000" d="M1 1h1v11H1zM11 1h1v11h-1z"/></svg>

package/assets/images/chromeDevtools/justify-content-start-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13"><rect width="3" height="6" x="6" y="3.5" fill="#000" rx="1"/><rect width="3" height="6" x="2" y="3.5" fill="#000" rx="1"/><path fill="#000" d="M1 1h1v11H1z"/></svg>

package/assets/images/chromeDevtools/justify-items-center-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><path fill="#000" d="M3 1h1v11H3zM9 1h1v11H9z"/><rect x="1" y="7" width="5" height="3" rx="1" fill="#000"/><rect x="1.5" y="3" width="4" height="3" rx="1" fill="#000"/><rect x="7.5" y="3" width="4" height="3" rx="1" fill="#000"/><rect x="7" y="7" width="5" height="3" rx="1" fill="#000"/></svg>

package/assets/images/chromeDevtools/justify-items-end-icon.svg

@@ -0,0 +1,57 @@
+<?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"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="none"
+   viewBox="0 0 13 13"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="justify-items-end-icon.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1212"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="77.538462"
+     inkscape:cx="6.5"
+     inkscape:cy="6.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     fill="#000000"
+     d="m 12,1 h -1 v 11 h 1 z M 6,1 H 5 v 11 h 1 z"
+     id="path2" />
+  <path
+     d="M 12,7 H 8 C 7.4477,7 7,7.4477 7,8 v 1 c 0,0.5523 0.4477,1 1,1 h 4 z M 6,7 H 2 C 1.4477,7 1,7.4477 1,8 v 1 c 0,0.5523 0.4477,1 1,1 H 6 Z M 12,3 H 9 C 8.4477,3 8,3.4477 8,4 v 1 c 0,0.5523 0.4477,1 1,1 h 3 z M 6,3 H 3 C 2.4477,3 2,3.4477 2,4 v 1 c 0,0.5523 0.4477,1 1,1 h 3 z"
+     fill="#000000"
+     id="path4" />
+</svg>

package/assets/images/chromeDevtools/justify-items-start-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><path fill="#000" d="M1 1h1v11H1zM7 1h1v11H7z"/><path d="M1 7h4c.5523 0 1 .4477 1 1v1c0 .5523-.4477 1-1 1H1V7zM7 7h4c.5523 0 1 .4477 1 1v1c0 .5523-.4477 1-1 1H7V7zM1 3h3c.5523 0 1 .4477 1 1v1c0 .5523-.4477 1-1 1H1V3zM7 3h3c.5523 0 1 .4477 1 1v1c0 .5523-.4477 1-1 1H7V3z" fill="#000"/></svg>

package/assets/images/chromeDevtools/justify-items-stretch-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><path fill="#000" d="M1 1h1v11H1zM11 1h1v11h-1z"/><rect x="1" y="7" width="5" height="3" rx="1" fill="#000"/><rect x="1" y="3" width="5" height="3" rx="1" fill="#000"/><rect x="7" y="7" width="5" height="3" rx="1" fill="#000"/><rect x="7" y="3" width="5" height="3" rx="1" fill="#000"/></svg>

package/dist/commandHandling/CommandType.d.ts

@@ -5,6 +5,7 @@ export declare enum CommandType {
     'delete' = "delete",
     'undo' = "undo",
     'redo' = "redo",
+    'selectAll' = "selectAll",
     'moveToFront' = "moveToFront",
     'moveForward' = "moveForward",
     'moveBackward' = "moveBackward",

package/dist/commandHandling/CommandType.js

@@ -6,6 +6,7 @@ export var CommandType;
     CommandType["delete"] = "delete";
     CommandType["undo"] = "undo";
     CommandType["redo"] = "redo";
+    CommandType["selectAll"] = "selectAll";
     CommandType["moveToFront"] = "moveToFront";
     CommandType["moveForward"] = "moveForward";
     CommandType["moveBackward"] = "moveBackward";

package/dist/elements/controls/DesignerTabControl.js

@@ -1,10 +1,99 @@
 import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
 export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+    _selectedIndex = -1;
+    _contentObserver;
+    _panels;
+    _headerDiv;
+    _moreDiv;
+    _moreContainer;
+    _elementMap = new WeakMap();
+    static style = css `
+        :host {
+            height: 100%;
+        }
+        .outer {
+            display: flex; 
+            flex-direction: column; 
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+        .header {
+            display: inline-flex; 
+            user-select: none; 
+            flex-direction: row; 
+            cursor: pointer; 
+            height: 30px;
+            width: calc(100% - 30px);
+            background-color: var(--dark-grey, #232733);
+            overflow-x: auto;
+            scrollbar-width: none;  /* Firefox */
+        }
+        .header-more {
+            right: 0;
+            top: 0;
+            width: 30px;
+            position: absolute;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: cursive;
+        }
+        .header-more:hover {
+            background: var(--light-grey, #383f52);
+        }
+        .more-container {
+            z-index: 1;
+            user-select: none; 
+            background-color: var(--dark-grey, #232733);
+            right: 0;
+            top: 30px;
+            position: absolute;
+            color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            cursor: pointer;
+        }
+        .more-container .tab-header { 
+            width: 100%;
+        }
+        .header::-webkit-scrollbar { 
+            display: none;  /* Safari and Chrome */
+        }
+        .tab-header {
+            height: 30px;
+            font-family: Arial;
+            display: flex;
+            justify-content: center;
+            align-items: center;                
+            text-transform: uppercase;                
+            box-sizing: content-box;                
+            padding-left: 5px;
+            padding-right: 5px;
+            color: white;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 1.5;
+            letter-spacing: 1px;
+            white-space: nowrap;
+        }
+        .tab-header:hover {
+            background: var(--light-grey, #383f52);
+        }
+        .selected {
+            background: var(--medium-grey, #2f3545);
+            box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
+        }
+        .panels {
+            z-index: 0;
+            background: var(--medium-grey, #2f3545);
+            height: calc(100% - 30px);
+        }
+        `;
     constructor() {
         super();
-        this._selectedIndex = -1;
-        this._elementMap = new WeakMap();
-        this.onSelectedTabChanged = new TypedEvent();
         this._contentObserver = new MutationObserver(() => {
             this._createItems();
         });
@@ -82,6 +171,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             let htmlItem = item;
             let tabHeaderDiv = document.createElement("div");
             tabHeaderDiv.innerText = htmlItem.title;
+            tabHeaderDiv.title = htmlItem.title;
             tabHeaderDiv.className = 'tab-header';
             let j = i;
             tabHeaderDiv.onpointerdown = () => {
@@ -123,88 +213,6 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
         this._moreContainer.style.visibility = 'hidden';
     }
+    onSelectedTabChanged = new TypedEvent();
 }
-DesignerTabControl.style = css `
-        :host {
-            height: 100%;
-        }
-        .outer {
-            display: flex; 
-            flex-direction: column; 
-            height: 100%;
-            position: relative;
-        }
-        .header {
-            display: inline-flex; 
-            user-select: none; 
-            flex-direction: row; 
-            cursor: pointer; 
-            height: 30px;
-            width: calc(100% - 30px);
-            background-color: var(--dark-grey, #232733);
-            overflow-x: auto;
-            scrollbar-width: none;  /* Firefox */
-        }
-        .header-more {
-            right: 0;
-            top: 0;
-            width: 30px;
-            position: absolute;
-            color: white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-family: cursive;
-        }
-        .header-more:hover {
-            background: var(--light-grey, #383f52);
-        }
-        .more-container {
-            z-index: 1;
-            user-select: none; 
-            background-color: var(--dark-grey, #232733);
-            right: 0;
-            top: 30px;
-            position: absolute;
-            color: white;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            cursor: pointer;
-        }
-        .more-container .tab-header { 
-            width: 100%;
-        }
-        .header::-webkit-scrollbar { 
-            display: none;  /* Safari and Chrome */
-        }
-        .tab-header {
-            height: 30px;
-            font-family: Arial;
-            display: flex;
-            justify-content: center;
-            align-items: center;                
-            text-transform: uppercase;                
-            box-sizing: content-box;                
-            padding-left: 5px;
-            padding-right: 5px;
-            color: white;
-            font-size: 12px;
-            font-weight: 500;
-            line-height: 1.5;
-            letter-spacing: 1px;
-        }
-        .tab-header:hover {
-            background: var(--light-grey, #383f52);
-        }
-        .selected {
-            background: var(--medium-grey, #2f3545);
-            box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
-        }
-        .panels {
-            z-index: 0;
-            background: var(--medium-grey, #2f3545);
-            height: calc(100% - 30px);
-        }
-        `;
 customElements.define('node-projects-designer-tab-control', DesignerTabControl);

package/dist/elements/controls/ImageButtonListSelector copy.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ImageButtonListSelectorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

package/dist/elements/controls/ImageButtonListSelector copy.js

@@ -0,0 +1,82 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+    constructor() {
+        super(...arguments);
+        this.valueChanged = new TypedEvent();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const oldValue = this._value;
+        this._value = value;
+        this._updateValue();
+        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    }
+    _updateValue() {
+        if (this.value) {
+            this._getDomElement('value').innerText = this.value;
+            this._getDomElement('value').classList.add('value-set');
+        }
+        else {
+            this._getDomElement('value').classList.remove('value-set');
+        }
+        const slot = this._getDomElement('slot');
+        for (let e of slot.assignedElements()) {
+            if (e.dataset.value == this.value)
+                e.style.background = "cornflowerblue";
+            else
+                e.style.background = "";
+        }
+    }
+    ready() {
+        var _a, _b;
+        this._parseAttributesToProperties();
+        const slot = this._getDomElement('slot');
+        slot.onclick = (e) => {
+            const path = e.composedPath();
+            for (let e of slot.assignedElements()) {
+                if (path.indexOf(e) >= 0) {
+                    this.value = e.dataset.value;
+                }
+            }
+        };
+        this._getDomElement('property').innerText = (_a = this.property) !== null && _a !== void 0 ? _a : '';
+        this._getDomElement('value').innerText = (_b = this.unsetValue) !== null && _b !== void 0 ? _b : '';
+        this._updateValue();
+    }
+}
+ImageButtonListSelector.style = css `
+    div {
+      font-size: 10px;
+      color: white;
+    }
+    #property {
+      color: #00aff0;
+    }
+    #value {
+      color: lightgray;
+    }
+    #value.value-set {
+      color: wheat;
+    }
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    ::slotted(button) {
+      min-width: 24px;
+      height: 24px;
+      padding: 1px;
+      background: white;
+      border: 1px solid lightgray;
+    }
+  `;
+ImageButtonListSelector.template = html `
+    <div>
+      <div><span id="property"></span>: <span id="value"></span></div>
+      <div class="container"><slot id="slot"></slot></div>
+    </div>
+  `;
+customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/ImageButtonListSelector.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ImageButtonListSelectorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

package/dist/elements/controls/ImageButtonListSelector.js

@@ -0,0 +1,81 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    div {
+      font-size: 10px;
+      color: white;
+    }
+    #property {
+      color: #00aff0;
+    }
+    #value {
+      color: lightgray;
+    }
+    #value.value-set {
+      color: wheat;
+    }
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    ::slotted(button) {
+      min-width: 24px;
+      height: 24px;
+      padding: 1px;
+      background: white;
+      border: 1px solid lightgray;
+    }
+  `;
+    static template = html `
+    <div>
+      <div><span id="property"></span>: <span id="value"></span></div>
+      <div class="container"><slot id="slot"></slot></div>
+    </div>
+  `;
+    _value;
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const oldValue = this._value;
+        this._value = value;
+        this._updateValue();
+        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    }
+    valueChanged = new TypedEvent();
+    property;
+    unsetValue;
+    _updateValue() {
+        if (this.value) {
+            this._getDomElement('value').innerText = this.value;
+            this._getDomElement('value').classList.add('value-set');
+        }
+        else {
+            this._getDomElement('value').classList.remove('value-set');
+        }
+        const slot = this._getDomElement('slot');
+        for (let e of slot.assignedElements()) {
+            if (e.dataset.value == this.value)
+                e.style.background = "cornflowerblue";
+            else
+                e.style.background = "";
+        }
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        const slot = this._getDomElement('slot');
+        slot.onclick = (e) => {
+            const path = e.composedPath();
+            for (let e of slot.assignedElements()) {
+                if (path.indexOf(e) >= 0) {
+                    this.value = e.dataset.value;
+                }
+            }
+        };
+        this._getDomElement('property').innerText = this.property ?? '';
+        this._getDomElement('value').innerText = this.unsetValue ?? '';
+        this._updateValue();
+    }
+}
+customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/ThicknessEditor.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export declare type ThicknessEditorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

package/dist/elements/controls/ThicknessEditor.js

@@ -0,0 +1,80 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+  :host {
+    margin: 4px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  #container {
+    display: grid;
+    grid-template-columns: minmax(30px, 40px) minmax(30px, 60px) minmax(30px, 40px);
+    grid-template-rows: auto;
+    grid-template-areas: 
+          "  .   top     ."
+          "left middle right"
+          "  .  bottom   .";
+    column-gap: 2px;
+    row-gap: 2px;
+  }
+  input {
+    width: 20px;
+    text-align: center;
+    font-size: 10px;
+    height: 20px;
+    padding: 0;
+  }
+  #left {
+    grid-area: left;
+    justify-self: end;
+  }
+  #top {
+    grid-area: top;
+    align-self: end;
+    justify-self: center;
+  }
+  #right {
+    grid-area: right;
+    justify-self: start;
+  }
+  #bottom {
+    grid-area: bottom;
+    align-self: start;
+    justify-self: center;
+  }
+  #rect {
+    grid-area: middle;
+    border: 1px solid black;
+    background: lightgray;
+  }
+  `;
+    static template = html `
+    <div id="container">
+      <input id="left">
+      <input id="top">
+      <input id="right">
+      <input id="bottom">
+      <div id="rect"></div>
+    </div>
+  `;
+    _value;
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const oldValue = this._value;
+        this._value = value;
+        this._updateValue();
+        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
+    }
+    valueChanged = new TypedEvent();
+    property;
+    unsetValue;
+    _updateValue() {
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._updateValue();
+    }
+}
+customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/documentContainer.js

@@ -2,9 +2,28 @@ import { BaseCustomWebComponentLazyAppend, css } from "@node-projects/base-custo
 import { DesignerTabControl } from "./controls/DesignerTabControl";
 import { DesignerView } from "./widgets/designerView/designerView";
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
+    designerView;
+    codeView;
+    demoView;
+    additionalData;
+    _serviceContainer;
+    _content = '';
+    _tabControl;
+    _selectionPosition;
+    static get style() {
+        return css `
+      div {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }                            
+      node-projects-designer-view {
+        height: 100%;
+        /*overflow: auto;*/
+      }`;
+    }
     constructor(serviceContainer, content) {
         super();
-        this._content = '';
         this._serviceContainer = serviceContainer;
         if (content != null)
             this._content = content;
@@ -27,18 +46,6 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._tabControl.selectedIndex = 0;
         });
     }
-    static get style() {
-        return css `
-      div {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }                            
-      node-projects-designer-view {
-        height: 100%;
-        /*overflow: auto;*/
-      }`;
-    }
     dispose() {
         this.codeView.dispose();
     }

package/dist/elements/helper/CssAttributeParser.js

@@ -9,11 +9,11 @@ export class CssEntry {
         this.name = name.trim();
         this.value = value.trim();
     }
+    name;
+    value;
 }
 export class CssAttributeParser {
-    constructor() {
-        this.entries = [];
-    }
+    entries = [];
     parse(text) {
         this.entries = [];
         let name = '';

package/dist/elements/helper/CssCombiner.js

@@ -1,4 +1,5 @@
 export class CssCombiner {
+    static _helperElement = document.createElement('div');
     //todo: inset, 
     static combine(styles, globalStyles) {
         let e = CssCombiner._helperElement;
@@ -285,4 +286,3 @@ export class CssCombiner {
         return true;
     }
 }
-CssCombiner._helperElement = document.createElement('div');

package/dist/elements/helper/IndentedTextWriter.js

@@ -1,9 +1,7 @@
 export class IndentedTextWriter {
-    constructor() {
-        this._textHolder = '';
-        this.indent = 4;
-        this.level = 0;
-    }
+    _textHolder = '';
+    indent = 4;
+    level = 0;
     get position() {
         return this._textHolder.length;
     }