@node-projects/web-component-designer 0.1.0 → 0.1.1

package/dist/Constants.d.ts

@@ -0,0 +1,4 @@
+export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
+export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
+export declare const dragDropFormatNamePropertyGrid = "text/json/propertydrop";
+export declare var assetsPath: string;

package/dist/Constants.js

@@ -0,0 +1,6 @@
+export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
+export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
+export const dragDropFormatNamePropertyGrid = 'text/json/propertydrop';
+//export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
+let imporUrl = new URL((import.meta.url));
+export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';

package/dist/commandHandling/CommandType.d.ts

@@ -0,0 +1,34 @@
+export declare enum CommandType {
+    'copy' = "copy",
+    'paste' = "paste",
+    'cut' = "cut",
+    'delete' = "delete",
+    'undo' = "undo",
+    'redo' = "redo",
+    'holdUndo' = "holdUndo",
+    'holdRedo' = "holdRedo",
+    'rotateCounterClockwise' = "rotateCounterClockwise",
+    'rotateClockwise' = "rotateClockwise",
+    'mirrorHorizontal' = "mirrorHorizontal",
+    'mirrorVertical' = "mirrorVertical",
+    'selectAll' = "selectAll",
+    'moveToFront' = "moveToFront",
+    'moveForward' = "moveForward",
+    'moveBackward' = "moveBackward",
+    'moveToBack' = "moveToBack",
+    'arrangeLeft' = "arrangeLeft",
+    'arrangeCenter' = "arrangeCenter",
+    'arrangeRight' = "arrangeRight",
+    'arrangeTop' = "arrangeTop",
+    'arrangeMiddle' = "arrangeMiddle",
+    'arrangeBottom' = "arrangeBottom",
+    'unifyWidth' = "unifyWidth",
+    'unifyHeight' = "unifyHeight",
+    'distributeHorizontal' = "distributeHorizontaly",
+    'distributeVertical' = "distributeVertical",
+    'setTool' = "setTool",
+    'setStrokeColor' = "setStrokeColor",
+    'setFillBrush' = "setFillBrush",
+    'setStrokeThickness' = "setStrokeThickness",
+    'screenshot' = "screenshot"
+}

package/dist/commandHandling/CommandType.js

@@ -0,0 +1,35 @@
+export var CommandType;
+(function (CommandType) {
+    CommandType["copy"] = "copy";
+    CommandType["paste"] = "paste";
+    CommandType["cut"] = "cut";
+    CommandType["delete"] = "delete";
+    CommandType["undo"] = "undo";
+    CommandType["redo"] = "redo";
+    CommandType["holdUndo"] = "holdUndo";
+    CommandType["holdRedo"] = "holdRedo";
+    CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
+    CommandType["rotateClockwise"] = "rotateClockwise";
+    CommandType["mirrorHorizontal"] = "mirrorHorizontal";
+    CommandType["mirrorVertical"] = "mirrorVertical";
+    CommandType["selectAll"] = "selectAll";
+    CommandType["moveToFront"] = "moveToFront";
+    CommandType["moveForward"] = "moveForward";
+    CommandType["moveBackward"] = "moveBackward";
+    CommandType["moveToBack"] = "moveToBack";
+    CommandType["arrangeLeft"] = "arrangeLeft";
+    CommandType["arrangeCenter"] = "arrangeCenter";
+    CommandType["arrangeRight"] = "arrangeRight";
+    CommandType["arrangeTop"] = "arrangeTop";
+    CommandType["arrangeMiddle"] = "arrangeMiddle";
+    CommandType["arrangeBottom"] = "arrangeBottom";
+    CommandType["unifyWidth"] = "unifyWidth";
+    CommandType["unifyHeight"] = "unifyHeight";
+    CommandType["distributeHorizontal"] = "distributeHorizontaly";
+    CommandType["distributeVertical"] = "distributeVertical";
+    CommandType["setTool"] = "setTool";
+    CommandType["setStrokeColor"] = "setStrokeColor";
+    CommandType["setFillBrush"] = "setFillBrush";
+    CommandType["setStrokeThickness"] = "setStrokeThickness";
+    CommandType["screenshot"] = "screenshot";
+})(CommandType || (CommandType = {}));

package/dist/commandHandling/IUiCommand.d.ts

@@ -0,0 +1,10 @@
+import { CommandType } from './CommandType.js';
+export interface IUiCommand {
+    type: CommandType;
+    event?: Event;
+    special?: string;
+    parameter?: any;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+}

package/dist/commandHandling/IUiCommand.js

@@ -0,0 +1 @@
+export {};

package/dist/commandHandling/IUiCommandHandler.d.ts

@@ -0,0 +1,5 @@
+import { IUiCommand } from './IUiCommand.js';
+export interface IUiCommandHandler {
+    executeCommand: (command: IUiCommand) => void;
+    canExecuteCommand: (command: IUiCommand) => boolean;
+}

package/dist/commandHandling/IUiCommandHandler.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export type DesignerTabControlIndexChangedEventArgs = {
+    newIndex: number;
+    oldIndex?: number;
+    changedViaClick?: boolean;
+};
+export declare class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+    private _selectedIndex;
+    private _panels;
+    private _headerDiv;
+    private _moreDiv;
+    private _moreContainer;
+    private _elementMap;
+    private _firstConnect;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    private _showHideHeaderItems;
+    connectedCallback(): void;
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    refreshItems(): void;
+    private _selectedIndexChanged;
+    readonly onSelectedTabChanged: TypedEvent<DesignerTabControlIndexChangedEventArgs>;
+}

package/dist/elements/controls/DesignerTabControl.js

@@ -0,0 +1,237 @@
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
+export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+    _selectedIndex = -1;
+    //private _contentObserver: MutationObserver;
+    _panels;
+    _headerDiv;
+    _moreDiv;
+    _moreContainer;
+    _elementMap = new WeakMap();
+    _firstConnect = true;
+    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;
+            -webkit-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;
+            -webkit-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._contentObserver = new MutationObserver((mut) => {
+          let refresh = false;
+          for (let m of mut) {
+            if (m.type != 'attributes' || m.attributeName == 'style')
+              refresh = true;
+          }
+          if (refresh)
+            this.refreshItems();
+        });*/
+        let outerDiv = document.createElement("div");
+        outerDiv.className = 'outer';
+        this.shadowRoot.appendChild(outerDiv);
+        this._headerDiv = document.createElement("div");
+        this._headerDiv.className = 'header';
+        outerDiv.appendChild(this._headerDiv);
+        this._moreDiv = document.createElement("div");
+        this._moreDiv.className = "header header-more";
+        this._moreDiv.innerText = "<<";
+        outerDiv.appendChild(this._moreDiv);
+        this._moreContainer = document.createElement("div");
+        this._moreContainer.className = "more-container";
+        this._moreContainer.style.visibility = "hidden";
+        outerDiv.appendChild(this._moreContainer);
+        this._moreDiv.onclick = () => {
+            if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
+                this._moreContainer.style.visibility = 'visible';
+            else
+                this._moreContainer.style.visibility = "hidden";
+        };
+        this._panels = document.createElement("div");
+        this._panels.className = 'panels';
+        outerDiv.appendChild(this._panels);
+        let _slot = document.createElement("slot");
+        _slot.name = 'panels';
+        this._panels.appendChild(_slot);
+        const resizeObserver = new ResizeObserver(entries => {
+            this._showHideHeaderItems();
+        });
+        resizeObserver.observe(this._headerDiv);
+    }
+    _showHideHeaderItems() {
+        this._moreContainer.style.visibility = "hidden";
+        let w = 0;
+        DomHelper.removeAllChildnodes(this._moreContainer);
+        DomHelper.removeAllChildnodes(this._headerDiv);
+        let reloadOnce = true;
+        for (let item of this.children) {
+            if (item.style.display != 'none') {
+                let htmlItem = item;
+                if (!this._elementMap.has(htmlItem) && reloadOnce) {
+                    this.refreshItems();
+                    reloadOnce = false;
+                }
+                const tabHeaderDiv = this._elementMap.get(htmlItem);
+                this._moreContainer.appendChild(tabHeaderDiv);
+                if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
+                    this._headerDiv.appendChild(tabHeaderDiv);
+                    w += tabHeaderDiv.clientWidth;
+                }
+            }
+        }
+    }
+    connectedCallback() {
+        if (this._firstConnect) {
+            this.refreshItems();
+            this._firstConnect = false;
+            //this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true });
+            let selectedIndexAttribute = this.getAttribute("selected-index");
+            if (selectedIndexAttribute) {
+                this.selectedIndex = parseInt(selectedIndexAttribute);
+            }
+        }
+    }
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    set selectedIndex(value) {
+        let old = this._selectedIndex;
+        this._selectedIndex = value;
+        if (this.children.length && old != this._selectedIndex)
+            this._selectedIndexChanged(old);
+    }
+    refreshItems() {
+        this._headerDiv.innerHTML = "";
+        let i = 0;
+        for (let item of this.children) {
+            if (item.style.display != 'none') {
+                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 = () => {
+                    let old = this._selectedIndex;
+                    this._selectedIndex = j;
+                    if (this._headerDiv.children.length)
+                        this._selectedIndexChanged(old, true);
+                    this._moreContainer.style.visibility = 'hidden';
+                };
+                this._elementMap.set(htmlItem, tabHeaderDiv);
+                this._headerDiv.appendChild(tabHeaderDiv);
+                i++;
+            }
+        }
+        this._showHideHeaderItems();
+        this._selectedIndexChanged();
+    }
+    _selectedIndexChanged(oldIndex, viaClick = false) {
+        let index = -1;
+        for (let element of this.children) {
+            if (element.style.display != 'none') {
+                index++;
+                if (index == this._selectedIndex) {
+                    if (element.slot != "panels")
+                        element.slot = "panels";
+                    const headerEl = this._elementMap.get(element);
+                    if (headerEl) {
+                        headerEl.classList.add('selected');
+                        if (element.activated)
+                            element.activated();
+                    }
+                }
+                else {
+                    element.removeAttribute("slot");
+                    const headerEl = this._elementMap.get(element);
+                    if (headerEl) {
+                        headerEl.classList.remove('selected');
+                    }
+                }
+            }
+        }
+        this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
+        this._moreContainer.style.visibility = 'hidden';
+    }
+    onSelectedTabChanged = new TypedEvent();
+}
+customElements.define('node-projects-designer-tab-control', DesignerTabControl);

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

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export 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/MetricsEditor.d.ts

@@ -0,0 +1,18 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export type ThicknessEditorValueChangedEventArgs = {
+    newValue?: string;
+    oldValue?: string;
+};
+export declare class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    property: string;
+    unsetValue: string;
+    private _borderDiv;
+    private _elementDiv;
+    constructor();
+    ready(): void;
+    onDoubleClick(event: PointerEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    refresh(element: Element): void;
+}

package/dist/elements/controls/MetricsEditor.js

@@ -0,0 +1,151 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+:host {
+  justify-content: center;
+  display: flex;
+  margin: 10px;
+  line-height: 12px;
+  min-width: 120px;
+}
+
+* { 
+  font-size: 12px;
+  font-family: monospace;
+  color: black;
+}
+
+.top {
+  display: inline-block;
+}
+.left {
+  display: inline-block;
+  vertical-align: middle;
+}
+.right {
+  display: inline-block;
+  vertical-align: middle;
+}
+.bottom {
+  display: inline-block;
+}
+
+div.ct {
+  width:280px;height:120px;
+}
+
+div span {
+  font-size: 10px;
+  position: absolute;
+  top: 0;
+  left: 0; 
+}
+
+div.ct {
+  position: relative;
+  background: white;
+  display: inline-block;
+  border: dotted 1px gray;
+  text-align: center;
+  vertical-align: middle;
+}
+
+div.ct.box {
+  border: dotted 2px black;
+}
+
+div.ct > div.ct {
+  left: 0;
+  top: 0;
+  background: #F9CC9F;
+  width: calc(100% - 20px);
+  height: calc(100% - 26px);
+  border-style: dashed;
+}
+
+div.ct > div.ct > div.ct {
+  background: #FEDC9B;
+  border-style: solid;
+}
+
+div.ct > div.ct > div.ct > div.ct {
+  background: #C4Cf8C;
+  border-style: dashed;
+}
+
+div.ct > div.ct > div.ct > div.ct > div.ct {
+  background: #8Cb6C2;
+  border-style: solid;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+span {
+  width: 30%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}`;
+    static template = html `
+  <div id="position" class="ct"><span title="position">position</span>
+  <div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="margin" class="ct"><span title="margin">margin</span>
+  <div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="border" class="ct"><span title="border">border</span>
+  <div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="padding" class="ct"><span title="padding">padding</span>
+  <div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="top">-</div><br><div @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div><div id="element" class="ct" style="font-size:6px"><div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="left">-</div>
+  &nbsp;x&nbsp;
+  <div data-style="element" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div>
+  </div><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="padding" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="border" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="margin" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="right">-</div><br><div data-style="position" @keydown="onKeyDown" @dblclick="onDoubleClick" class="bottom">-</div></div>
+  `;
+    property;
+    unsetValue;
+    _borderDiv;
+    _elementDiv;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._borderDiv = this._getDomElement('border');
+        this._elementDiv = this._getDomElement('element');
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._assignEvents();
+    }
+    onDoubleClick(event) {
+        const element = event.target;
+        element.setAttribute("contentEditable", "");
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild, 0);
+        range.setEndAfter(element.lastChild);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    onKeyDown(event) {
+        const element = event.target;
+        if (event.key == "Enter") {
+            element.removeAttribute("contentEditable");
+            const value = element.innerHTML;
+            const valueChangedEvent = new CustomEvent('value-changed', {
+                detail: {
+                    style: element.dataset['style'],
+                    value: value
+                }
+            });
+            this.dispatchEvent(valueChangedEvent);
+        }
+    }
+    refresh(element) {
+        this._elementDiv.classList.remove('box');
+        this._borderDiv.classList.remove('box');
+        if (element) {
+            let cp = getComputedStyle(element);
+            if (cp.boxSizing == 'content-box') {
+                this._elementDiv.classList.add('box');
+            }
+            else {
+                this._borderDiv.classList.add('box');
+            }
+        }
+    }
+}
+customElements.define('node-projects-metrics-editor', MetricsEditor);

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

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class NumericPopup extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    ready(): void;
+}