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

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

@@ -0,0 +1,361 @@
+import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
+import { ValueType } from '../../services/propertiesService/ValueType.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
+import { PropertyType } from '../../services/propertiesService/PropertyType.js';
+import { dragDropFormatNameBindingObject, dragDropFormatNamePropertyGrid } from '../../../Constants.js';
+export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
+    _div;
+    _propertyMap = new Map();
+    _serviceContainer;
+    _propertiesService;
+    _designItems;
+    get propertiesService() {
+        return this._propertiesService;
+    }
+    static get style() {
+        return css `
+    :host{
+      display: block;
+      height: 100%;
+      overflow: auto;
+      box-sizing: border-box;
+    }
+    .content-wrapper {
+      padding: .5em;
+      display: grid;
+      grid-template-columns: 11px minmax(80px, auto) minmax(80px, auto);
+      align-items: center;
+      grid-auto-rows: minmax(24px, auto);
+      align-items: center;
+    }
+    label, input, select {
+      display: inline-block;
+      color: white;
+      background: transparent;
+      margin: 2px 0;
+      padding: 0 2px 0 4px;
+      width: 110px;
+      white-space: nowrap;
+    }
+    label, .style-label {
+      box-sizing: border-box;
+      display: inline-block;
+      font-size: 13px;
+      width: auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 2px;
+    }
+    label[for] {
+      cursor: pointer;
+    }
+    input, select {
+      height: 24px;
+      border: 1px solid var(--input-border-color, #596c7a);
+      border-radius: 0;
+      /*-webkit-appearance: none;*/
+      box-sizing: border-box;
+      font-size: 11px;
+      width: 100%;
+      padding:0;
+      padding-left: 3px;
+      margin:0;
+    }
+    /*input {
+      margin-left: 4px;
+    }*/
+    input[disabled] {
+      color: #BDBDBD;
+    }
+    select {
+      background: transparent;
+    }
+    select:focus option {
+      color: black;
+    }
+    .unset-value {
+      color: lightslategray
+    }
+    .unset-value > * {
+      color: lightslategray
+    }
+    .unset-value:focus {
+      color: white
+    }
+    .group-header {
+      grid-column: 1 / 3;
+      font-size: 10px;
+      font-family: monospace;
+    }
+    .group-desc {
+      display: inline-flex;
+      flex-direction: row-reverse;
+      font-size: 10px;
+      text-decoration: underline;
+    }
+    .dragOverProperty {
+      outline: 2px dashed orange;
+      outline-offset: -2px;
+    }
+    `;
+    }
+    constructor(serviceContainer) {
+        super();
+        this._restoreCachedInititalValues();
+        this._serviceContainer = serviceContainer;
+        this._div = document.createElement("div");
+        this._div.className = "content-wrapper";
+        this.shadowRoot.appendChild(this._div);
+    }
+    setPropertiesService(propertiesService) {
+        if (this._propertiesService != propertiesService) {
+            this._propertiesService = propertiesService;
+            DomHelper.removeAllChildnodes(this._div);
+            this._propertyMap.clear();
+        }
+    }
+    createElements(designItem) {
+        if (this._propertiesService && (this._propertiesService.getRefreshMode(designItem) != RefreshMode.none) || this._propertyMap.size == 0) {
+            DomHelper.removeAllChildnodes(this._div);
+            this._propertyMap.clear();
+            if (this._propertiesService) {
+                let properties = this._propertiesService.getProperties(designItem);
+                if (properties?.length) {
+                    if ('properties' in properties[0])
+                        this.createPropertyGroups(properties);
+                    else
+                        this.createPropertyEditors(properties);
+                    return true;
+                }
+            }
+            return false;
+        }
+        return true;
+    }
+    createPropertyGroups(groups) {
+        for (const g of groups) {
+            let header = document.createElement('span');
+            header.innerHTML = g.name.replaceAll("\n", "<br>");
+            header.className = 'group-header';
+            this._div.appendChild(header);
+            let desc = document.createElement('span');
+            desc.innerHTML = g.description ?? '';
+            desc.className = 'group-desc';
+            this._div.appendChild(desc);
+            this.createPropertyEditors(g.properties);
+        }
+    }
+    createPropertyEditors(properties) {
+        for (const p of properties) {
+            let editor;
+            if (p.createEditor)
+                editor = p.createEditor(p);
+            else {
+                editor = this._serviceContainer.forSomeServicesTillResult("editorTypesService", x => x.getEditorForProperty(p));
+            }
+            if (editor) {
+                let rectContainer = document.createElement("div");
+                rectContainer.style.width = '20px';
+                rectContainer.style.height = '20px';
+                rectContainer.style.display = 'flex';
+                rectContainer.style.alignItems = 'center';
+                let rect = document.createElement("div");
+                rect.style.width = '7px';
+                rect.style.height = '7px';
+                rect.style.border = '1px white solid';
+                if (p.propertyType != PropertyType.complex)
+                    rectContainer.appendChild(rect);
+                this._div.appendChild(rectContainer);
+                rect.oncontextmenu = (event) => {
+                    event.preventDefault();
+                    this.openContextMenu(event, p);
+                };
+                if (p.type == 'addNew') {
+                    let input = editor.element;
+                    input.disabled = true;
+                    let label = document.createElement("input");
+                    label.value = p.name;
+                    label.onkeyup = e => {
+                        if (e.key == 'Enter' && label.value) {
+                            p.name = label.value;
+                            label.disabled = true;
+                            input.disabled = false;
+                            input.focus();
+                        }
+                    };
+                    this._div.appendChild(label);
+                }
+                else {
+                    if (!p.renamable) {
+                        let label = document.createElement("label");
+                        label.htmlFor = p.name;
+                        label.textContent = p.name;
+                        label.title = p.name + ' (type: ' + p.type + (p.defaultValue ? ', default: ' + p.defaultValue : '') + ', propertytype: ' + p.propertyType + ')';
+                        label.ondragleave = (e) => this._onDragLeave(e, p, label);
+                        label.ondragover = (e) => this._onDragOver(e, p, label);
+                        label.ondrop = (e) => this._onDrop(e, p, label);
+                        this._div.appendChild(label);
+                    }
+                    else {
+                        let label = document.createElement("input");
+                        let input = editor.element;
+                        label.value = p.name;
+                        label.onkeyup = e => {
+                            if (e.key == 'Enter' && label.value) {
+                                const pg = this._designItems[0].openGroup("rename property name from '" + p.name + "' to '" + label.value + "'");
+                                p.service.clearValue(this._designItems, p, 'all');
+                                p.name = label.value;
+                                p.service.setValue(this._designItems, p, input.value);
+                                pg.commit();
+                                this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
+                            }
+                        };
+                        this._div.appendChild(label);
+                    }
+                }
+                editor.element.id = p.name;
+                this._div.appendChild(editor.element);
+                this._propertyMap.set(p, { isSetElement: rect, editor: editor });
+            }
+        }
+    }
+    _onDragLeave(event, property, label) {
+        event.preventDefault();
+        label.classList.remove('dragOverProperty');
+    }
+    _onDragOver(event, property, label) {
+        event.preventDefault();
+        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+        if (hasTransferDataBindingObject) {
+            const ddService = this._serviceContainer.bindableObjectDragDropService;
+            if (ddService) {
+                const effect = ddService.dragOverOnProperty(event, property, this._designItems);
+                if ((effect ?? 'none') != 'none') {
+                    label.classList.add('dragOverProperty');
+                    event.dataTransfer.dropEffect = effect;
+                }
+                else {
+                    label.classList.remove('dragOverProperty');
+                }
+            }
+        }
+        const hasPropertyGrid = event.dataTransfer.types.indexOf(dragDropFormatNamePropertyGrid) >= 0;
+        if (hasPropertyGrid) {
+            const ddService = this._serviceContainer.propertyGridDragDropService;
+            if (ddService) {
+                const effect = ddService.dragOverOnProperty(event, property, this._designItems);
+                if ((effect ?? 'none') != 'none') {
+                    label.classList.add('dragOverProperty');
+                    event.dataTransfer.dropEffect = effect;
+                }
+                else {
+                    label.classList.remove('dragOverProperty');
+                }
+            }
+        }
+    }
+    _onDrop(event, property, label) {
+        event.preventDefault();
+        label.classList.remove('dragOverProperty');
+        const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject);
+        if (transferDataBindingObject) {
+            const bo = JSON.parse(transferDataBindingObject);
+            const ddService = this._serviceContainer.bindableObjectDragDropService;
+            if (ddService) {
+                ddService.dropOnProperty(event, property, bo, this._designItems);
+            }
+        }
+        const transferDataPropertyGrid = event.dataTransfer.getData(dragDropFormatNamePropertyGrid);
+        if (transferDataPropertyGrid) {
+            const dropObj = JSON.parse(transferDataPropertyGrid);
+            const ddService = this._serviceContainer.propertyGridDragDropService;
+            if (ddService) {
+                ddService.dropOnProperty(event, property, dropObj, this._designItems);
+            }
+        }
+    }
+    openContextMenu(event, property) {
+        PropertyGridPropertyList.openContextMenu(event, this._designItems, property);
+    }
+    static openContextMenu(event, designItems, property) {
+        const ctxMenuItems = [
+            {
+                title: 'clear', action: (e) => {
+                    property.service.clearValue(designItems, property, 'value');
+                    designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                }
+            },
+            {
+                title: 'edit as text', action: (e, _1, _2, menu) => {
+                    menu.close();
+                    setTimeout(() => {
+                        const oldValue = property.service.getValue(designItems, property);
+                        let value = prompt(`edit value of '${property.name}' as string:`, oldValue);
+                        if (value && value != oldValue) {
+                            property.service.setValue(designItems, property, value);
+                        }
+                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                    }, 10);
+                }
+            },
+        ];
+        if (designItems[0].serviceContainer.config.openBindingsEditor) {
+            ctxMenuItems.push(...[
+                { title: '-' },
+                {
+                    title: 'edit binding', action: () => {
+                        let target = property.service.getPropertyTarget(designItems[0], property);
+                        let binding = property.service.getBinding(designItems, property);
+                        designItems[0].serviceContainer.config.openBindingsEditor(property, designItems, binding, target);
+                    }
+                },
+                {
+                    title: 'clear binding', action: () => {
+                        property.service.clearValue(designItems, property, 'binding');
+                        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems);
+                    }
+                }
+            ]);
+        }
+        ;
+        ContextMenu.show(ctxMenuItems, event);
+    }
+    designItemsChanged(designItems) {
+        this._designItems = designItems;
+        for (let m of this._propertyMap) {
+            m[1].editor.designItemsChanged(designItems);
+        }
+    }
+    refreshForDesignItems(items) {
+        for (let m of this._propertyMap) {
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(m[1].isSetElement, m[0], items, this._propertiesService, m[1].editor);
+        }
+    }
+    static refreshIsSetElementAndEditorForDesignItems(isSetElement, property, items, propertiesService, editor) {
+        if (items && items.length) {
+            let s = propertiesService.isSet(items, property);
+            let v = propertiesService.getValue(items, property);
+            isSetElement.title = property.name + ': ' + s;
+            if (s == ValueType.none) {
+                isSetElement.style.background = '';
+                v = propertiesService.getUnsetValue(items, property);
+            }
+            else if (s == ValueType.all)
+                isSetElement.style.background = 'white';
+            else if (s == ValueType.some)
+                isSetElement.style.background = 'gray';
+            else if (s == ValueType.bound)
+                isSetElement.style.background = 'orange';
+            else if (s == ValueType.fromStylesheet) {
+                v = propertiesService.getUnsetValue(items, property);
+                isSetElement.style.background = 'yellow';
+            }
+            editor?.refreshValueWithoutNotification(s, v);
+        }
+        else {
+            isSetElement.style.background = '';
+        }
+    }
+}
+customElements.define('node-projects-property-grid-property-list', PropertyGridPropertyList);

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.d.ts

@@ -0,0 +1,21 @@
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _type;
+    private _id;
+    private _content;
+    private _pg;
+    private _selectionChangedHandler;
+    private _instanceServiceContainer;
+    private _idRect;
+    private _contentRect;
+    private _innerRect;
+    private _propertiesService;
+    private _configButton;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    set instanceServiceContainer(value: InstanceServiceContainer);
+}

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

@@ -0,0 +1,159 @@
+import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { sleep } from '../../helper/Helper.js';
+import { NodeType } from '../../item/NodeType.js';
+import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
+import { ContentAndIdPropertiesService } from '../../services/propertiesService/services/ContentAndIdPropertiesService.js';
+export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      user-select: none;
+      -webkit-user-select: none;
+      background: var(--medium-grey, #2f3545);
+      color: white;
+    }
+    div.root {
+      display: grid;
+      grid-template-columns: 11px 11px auto 1fr auto;
+      padding: 3px 6px;
+      font-family: monospace; 
+      align-items: center;
+    }
+    .desc {
+      font-weight: 700;
+      font-size: 10px;
+      margin-right: 5px;
+    }
+    input {
+      background: var(--medium-grey, #2f3545);
+      border: solid 1px gray;
+      color: white;
+      width: calc(100% - 6px);
+    }
+    #type {
+      color: wheat;
+      white-space: nowrap;
+      overflow: hidden;
+      font-size: 12px;
+      height: 20px;
+    }
+    #pg {
+      height: calc(100% - 64px);
+    }
+    `;
+    static template = html `
+  <div class="root">
+    <span style="grid-column: span 3;" class="desc">Type:</span><span id="type"></span>
+    <button id="config" style="display: none; grid-column: 5; grid-row: span 3; height: calc(100% - 10px); margin-left: 10px;">config</button>
+    <div title="id" id="idRect" style="grid-column: 1; width: 7px; height: 7px; border: 1px solid white;"></div>
+    <span style="grid-column: span 2;" class="desc">Id:</span><input type="text" id="id">
+    <div title="innerHTML" id="innerRect" style="grid-column: 1; width: 7px; height: 7px; border: 1px solid white;"></div>
+    <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>`;
+    _type;
+    _id;
+    _content;
+    _pg;
+    _selectionChangedHandler;
+    _instanceServiceContainer;
+    _idRect;
+    _contentRect;
+    _innerRect;
+    _propertiesService;
+    _configButton;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._type = this._getDomElement('type');
+        this._id = this._getDomElement('id');
+        this._content = this._getDomElement('content');
+        this._pg = this._getDomElement('pg');
+        this._idRect = this._getDomElement('idRect');
+        this._contentRect = this._getDomElement('contentRect');
+        this._innerRect = this._getDomElement('innerRect');
+        this._configButton = this._getDomElement('config');
+        this._configButton.onclick = async () => {
+            const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', async (x) => await x.hasConfigUi(this._instanceServiceContainer.selectionService.primarySelection));
+            const ui = await srv.getConfigUi(this._instanceServiceContainer.selectionService.primarySelection);
+            this.serviceContainer.globalContext.showConfigClicked.emit({ designItem: this._instanceServiceContainer.selectionService.primarySelection, configUi: ui });
+        };
+        this._propertiesService = new ContentAndIdPropertiesService();
+        this._idRect.oncontextmenu = (event) => {
+            event.preventDefault();
+            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty);
+        };
+        this._contentRect.oncontextmenu = (event) => {
+            event.preventDefault();
+            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
+        };
+        this._innerRect.oncontextmenu = (event) => {
+            event.preventDefault();
+            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty);
+        };
+        this._id.onkeydown = e => {
+            if (e.key == 'Enter')
+                this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
+            else if (e.key == 'Escape') {
+                this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        this._content.onkeydown = e => {
+            if (e.key == 'Enter') {
+                this._instanceServiceContainer.selectionService.primarySelection.content = this._content.value;
+                this._content.title = this._content.value;
+            }
+            else if (e.key == 'Escape') {
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        let pSel;
+        this._id.onfocus = e => {
+            pSel = this._instanceServiceContainer.selectionService.primarySelection;
+        };
+        this._id.onblur = e => {
+            pSel.id = this._id.value;
+        };
+    }
+    set serviceContainer(value) {
+        this._waitForChildrenReady().then(() => this._pg.serviceContainer = value);
+    }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
+            this._pg.instanceServiceContainer = value;
+            await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
+            const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', x => x.hasConfigUi(this._instanceServiceContainer.selectionService.primarySelection));
+            if (srv) {
+                this._configButton.style.display = 'block';
+            }
+            else {
+                this._configButton.style.display = 'none';
+            }
+            if (this._instanceServiceContainer.selectionService.primarySelection?.nodeType == NodeType.Element)
+                this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+            else
+                this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.node?.nodeName ?? '';
+            this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+            if (this._instanceServiceContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) {
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
+            }
+            else if (this._instanceServiceContainer.selectionService.primarySelection?.element?.children?.length <= 0)
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
+            else
+                this._content.value = '';
+            this._content.title = this._content.value;
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
+            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
+        });
+    }
+}
+customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);

package/dist/elements/widgets/treeView/ITreeView.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js';
+export interface ITreeView {
+    createTree(rootItem: IDesignItem): any;
+    selectionChanged(event: ISelectionChangedEvent): any;
+}

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

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

package/dist/elements/widgets/treeView/treeView.d.ts

@@ -0,0 +1,28 @@
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ITreeView } from './ITreeView.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+export declare class TreeView extends BaseCustomWebComponentLazyAppend implements ITreeView {
+    private _items;
+    private _index;
+    private _previouslySelected;
+    private _treeDiv;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _contentChangedHandler;
+    private _mapElementTreeitem;
+    private _rootItem;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    createTree(rootItem: IDesignItem): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
+    selectionChanged(event: ISelectionChangedEvent): void;
+    private _recomputeTree;
+    private _makeButton;
+    private _getChildren;
+    private _clickElement;
+    private _selectTreeElements;
+    private _selectDesignerElement;
+    private _highlight;
+}