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

package/dist/elements/widgets/paletteView/paletteView.js

@@ -1,38 +0,0 @@
-import '../../controls/DesignerTabControl.js';
-import { PaletteElements } from './paletteElements.js';
-import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-export class PaletteView extends BaseCustomWebComponentLazyAppend {
-    selected = 'native';
-    _designerTabControl;
-    static style = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      height: 100%;
-    }`;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._designerTabControl = new DesignerTabControl();
-        this._designerTabControl.selectedIndex = 0;
-        this.shadowRoot.appendChild(this._designerTabControl);
-    }
-    async loadControls(serviceContainer, elementsServices) {
-        for (const s of elementsServices) {
-            try {
-                let elements = await s.getElements();
-                let paletteElement = new PaletteElements();
-                paletteElement.title = s.name;
-                this._designerTabControl.appendChild(paletteElement);
-                paletteElement.loadElements(serviceContainer, elements);
-            }
-            catch (err) {
-                console.warn('Error loading elements', err);
-            }
-        }
-        this._designerTabControl.refreshItems();
-    }
-}
-customElements.define('node-projects-palette-view', PaletteView);

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

@@ -1,24 +0,0 @@
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
-    private _serviceContainer;
-    private _designerTabControl;
-    private _selectedItems;
-    private _propertyGridPropertyLists;
-    private _propertyGridPropertyListsDict;
-    private _itemsObserver;
-    private _nodeReplacedCb;
-    private _instanceServiceContainer;
-    private _selectionChangedHandler;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    set serviceContainer(value: ServiceContainer);
-    get serviceContainer(): ServiceContainer;
-    set instanceServiceContainer(value: InstanceServiceContainer);
-    get selectedItems(): IDesignItem[];
-    set selectedItems(items: IDesignItem[]);
-    _mutationOccured(): void;
-    private _observePrimarySelectionForChanges;
-}

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

@@ -1,125 +0,0 @@
-import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
-import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
-export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
-    _serviceContainer;
-    _designerTabControl;
-    _selectedItems;
-    _propertyGridPropertyLists;
-    _propertyGridPropertyListsDict;
-    _itemsObserver;
-    _nodeReplacedCb;
-    _instanceServiceContainer;
-    _selectionChangedHandler;
-    static style = css `
-    :host {
-      display: block;
-      height: 100%;
-      user-select: none;
-      -webkit-user-select: none;
-    }
-    button:hover {
-      box-shadow: inset 0 3px 0 var(--light-grey);
-    }
-    button:focus {
-      box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
-    }
-    `;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._designerTabControl = new DesignerTabControl();
-        this.shadowRoot.appendChild(this._designerTabControl);
-        this.addEventListener('contextmenu', (e) => {
-            if (e.composedPath()[0].localName != 'input')
-                e.preventDefault();
-        });
-        this._itemsObserver = new MutationObserver((m) => this._mutationOccured());
-    }
-    set serviceContainer(value) {
-        this._serviceContainer = value;
-        this._propertyGridPropertyLists = [];
-        this._propertyGridPropertyListsDict = {};
-    }
-    get serviceContainer() {
-        return this._serviceContainer;
-    }
-    set instanceServiceContainer(value) {
-        this._instanceServiceContainer = value;
-        this._selectionChangedHandler?.dispose();
-        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
-            this.selectedItems = e.selectedElements;
-        });
-        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
-    }
-    get selectedItems() {
-        return this._selectedItems;
-    }
-    set selectedItems(items) {
-        if (this._selectedItems != items) {
-            this._selectedItems = items;
-            const pgGroups = this._serviceContainer.propertyGroupService.getPropertygroups(items);
-            const visibleDict = new Set();
-            for (let p of pgGroups) {
-                let lst = this._propertyGridPropertyListsDict[p.name];
-                if (!lst) {
-                    lst = new PropertyGridPropertyList(this.serviceContainer);
-                    lst.title = p.name;
-                    this._designerTabControl.appendChild(lst);
-                    this._propertyGridPropertyLists.push(lst);
-                    this._propertyGridPropertyListsDict[p.name] = lst;
-                }
-                lst.setPropertiesService(p.propertiesService);
-                if (lst.createElements(items[0]))
-                    visibleDict.add(p.name);
-            }
-            for (let p of this._propertyGridPropertyLists) {
-                if (visibleDict.has(p.title))
-                    p.style.display = 'block';
-                else
-                    p.style.display = 'none';
-            }
-            this._designerTabControl.refreshItems();
-            if (this._designerTabControl.selectedIndex < 0)
-                this._designerTabControl.selectedIndex = 0;
-            for (const a of this._propertyGridPropertyLists) {
-                if (visibleDict.has(a.title))
-                    a.designItemsChanged(items);
-            }
-            if (items) {
-                if (items.length == 1) {
-                    for (const a of this._propertyGridPropertyLists) {
-                        if (visibleDict.has(a.title))
-                            a.refreshForDesignItems(items);
-                    }
-                    this._observePrimarySelectionForChanges();
-                }
-            }
-            else {
-                this._itemsObserver.disconnect();
-                this._nodeReplacedCb?.dispose();
-                this._nodeReplacedCb = null;
-            }
-        }
-    }
-    _mutationOccured() {
-        for (const a of this._propertyGridPropertyLists) {
-            if (a.propertiesService?.getRefreshMode(this._selectedItems[0]) == RefreshMode.fullOnValueChange) {
-                a.createElements(this._selectedItems[0]);
-                a.designItemsChanged(this._selectedItems);
-            }
-            a.refreshForDesignItems(this._selectedItems);
-        }
-    }
-    _observePrimarySelectionForChanges() {
-        this._nodeReplacedCb?.dispose();
-        this._itemsObserver.disconnect();
-        this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
-        this._nodeReplacedCb = this._selectedItems[0].nodeReplaced.on(() => {
-            this._observePrimarySelectionForChanges();
-            this._mutationOccured();
-        });
-    }
-}
-customElements.define('node-projects-property-grid', PropertyGrid);

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

@@ -1,28 +0,0 @@
-import { IProperty } from '../../services/propertiesService/IProperty.js';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { IPropertyEditor } from '../../services/propertiesService/IPropertyEditor.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPropertiesService } from '../../services/propertiesService/IPropertiesService.js';
-export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
-    private _div;
-    private _propertyMap;
-    private _serviceContainer;
-    private _propertiesService;
-    private _designItems;
-    get propertiesService(): IPropertiesService;
-    static get style(): CSSStyleSheet;
-    constructor(serviceContainer: ServiceContainer);
-    setPropertiesService(propertiesService: IPropertiesService): void;
-    createElements(designItem: IDesignItem): boolean;
-    private createPropertyGroups;
-    private createPropertyEditors;
-    private _onDragLeave;
-    private _onDragOver;
-    private _onDrop;
-    openContextMenu(event: MouseEvent, property: IProperty): void;
-    static openContextMenu(event: MouseEvent, designItems: IDesignItem[], property: IProperty): void;
-    designItemsChanged(designItems: IDesignItem[]): void;
-    refreshForDesignItems(items: IDesignItem[]): void;
-    static refreshIsSetElementAndEditorForDesignItems(isSetElement: HTMLElement, property: IProperty, items: IDesignItem[], propertiesService: IPropertiesService, editor?: IPropertyEditor): void;
-}

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

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

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