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

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

@@ -1,159 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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;
-}

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

@@ -1,242 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { DesignItem } from '../../item/DesignItem.js';
-export class TreeView extends BaseCustomWebComponentLazyAppend {
-    _items;
-    _index;
-    _previouslySelected;
-    _treeDiv;
-    _instanceServiceContainer;
-    _selectionChangedHandler;
-    _contentChangedHandler;
-    _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._restoreCachedInititalValues();
-        this._treeDiv = document.createElement('div');
-        this._treeDiv.style.userSelect = 'none';
-        this.shadowRoot.appendChild(this._treeDiv);
-        this._treeDiv.addEventListener('click', this._clickElement.bind(this));
-    }
-    createTree(rootItem /*, activeElement: Element */) {
-        this._rootItem = rootItem;
-        if (rootItem != null)
-            this._recomputeTree(rootItem.element, null /*, activeElement */);
-    }
-    // this.instanceServiceContainer.selectionService.setSelectedElements(null);
-    set instanceServiceContainer(value) {
-        this._instanceServiceContainer = value;
-        this._selectionChangedHandler?.dispose();
-        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
-            this.selectionChanged(e);
-        });
-        this._contentChangedHandler?.dispose();
-        this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
-            this.createTree(value.contentService.rootDesignItem);
-        });
-        this.createTree(value.contentService.rootDesignItem);
-    }
-    selectionChanged(event) {
-        this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element)));
-    }
-    _recomputeTree(parent, activeElement) {
-        this._mapElementTreeitem = new Map();
-        this._treeDiv.innerHTML = '';
-        let ul = document.createElement('ul');
-        ul.classList.add('tree');
-        this._treeDiv.appendChild(ul);
-        // Since we can't add a pojo to each button, generate a new index for
-        // each button in the this.items array of useful data.
-        this._index = 0;
-        this._items = this._getChildren(parent, ul);
-        this._highlight(activeElement);
-        return this._items;
-    }
-    _makeButton(tag, id, index) {
-        let aButton = document.createElement('button');
-        aButton.dataset.index = index;
-        let aTag = document.createElement('span');
-        aTag.className = 'tag';
-        aTag.textContent = tag;
-        let aId = document.createElement('span');
-        aId.className = 'id';
-        aId.textContent = id;
-        aButton.appendChild(aTag);
-        aButton.appendChild(aId);
-        return aButton;
-    }
-    _getChildren(item, list) {
-        // Add item and its children into nested ul list
-        let isViewContainer = item.id === 'viewContainer';
-        let data = {
-            tag: isViewContainer ? 'main-app' : item.tagName.toLowerCase(),
-            id: isViewContainer ? '' : (item.id ? '#' + item.id : ''),
-            text: isViewContainer ? '' : '"' + item.textContent + '"',
-            ref: item,
-            index: this._index
-        };
-        // Add item to list
-        let li = document.createElement('li');
-        let button = this._makeButton(data.tag, data.id, data.index);
-        li.appendChild(button);
-        list.appendChild(li);
-        this._mapElementTreeitem.set(data.ref, button);
-        this._index++;
-        let nodes = [data];
-        // Add children to subordinate list
-        let ul = null;
-        for (let i = 0; i < item.children.length; i++) {
-            let child = item.children[i];
-            // Skip <style> nodes;
-            if (child.localName === 'style') {
-                continue;
-            }
-            if (ul == null) {
-                ul = document.createElement('ul');
-                li.appendChild(ul);
-            }
-            nodes = nodes.concat(this._getChildren(child, ul));
-        }
-        return nodes;
-    }
-    _clickElement(event) {
-        // If the target is a <span>, you clicked on the span inside the button
-        // so you need to use currentTarget.
-        let item = event.target;
-        if (item.localName === 'span') {
-            item = item.parentElement;
-        }
-        this._selectTreeElements([item]);
-        this._selectDesignerElement(item);
-    }
-    _selectTreeElements(items) {
-        if (this._previouslySelected) {
-            for (let e of this._previouslySelected)
-                if (e)
-                    e.classList.remove('selected');
-        }
-        this._previouslySelected = items;
-        if (items)
-            for (let e of items)
-                if (e)
-                    e.classList.add('selected');
-    }
-    _selectDesignerElement(item) {
-        let index = item.dataset.index;
-        let el = this._items[index].ref;
-        let d = DesignItem.GetOrCreateDesignItem(el, el, this._rootItem.serviceContainer, this._rootItem.instanceServiceContainer);
-        d.instanceServiceContainer.selectionService.setSelectedElements([d]);
-    }
-    _highlight(element) {
-        if (!element)
-            return;
-        // Find it in the tree.
-        let buttons = this.shadowRoot.querySelectorAll('button');
-        if (buttons.length !== this._items.length) {
-            return;
-        }
-        for (let i = 0; i < this._items.length; i++) {
-            if (this._items[i].ref === element) {
-                this._selectTreeElements([buttons[i]]);
-                return;
-            }
-        }
-    }
-}
-customElements.define('node-projects-tree-view', TreeView);

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

@@ -1,32 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { ITreeView } from './ITreeView.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
-export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
-    private _treeDiv;
-    private _tree;
-    private _filter;
-    private _instanceServiceContainer;
-    private _selectionChangedHandler;
-    private _contentChangedHandler;
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-    _filterNodes(): void;
-    _showHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _switchHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _showLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenu;
-    ready(): Promise<void>;
-    createTree(rootItem: IDesignItem): void;
-    set instanceServiceContainer(value: InstanceServiceContainer);
-    selectionChanged(event: ISelectionChangedEvent): void;
-    private _recomputeTree;
-    private _getChildren;
-    private _highlight;
-}