@node-projects/web-component-designer 0.0.66 → 0.0.70

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -1,29 +1,29 @@
-export class InsertAction {
-    constructor(designItem, index, newItem) {
-        this.title = "Insert Item";
-        this.designItem = designItem;
-        this.index = index;
-        this.newItem = newItem;
-    }
-    title;
-    get affectedItems() {
-        return [this.designItem];
-    }
-    undo() {
-        this.newItem.element.remove();
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
-    }
-    do() {
-        this.designItem.insertChild(this.newItem, this.index);
-        const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
-        if (prepService)
-            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
-    }
-    designItem;
-    index;
-    newItem;
-    mergeWith(other) {
-        return false;
-    }
-}
+export class InsertAction {
+    constructor(designItem, index, newItem) {
+        this.title = "Insert Item";
+        this.designItem = designItem;
+        this.index = index;
+        this.newItem = newItem;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        this.newItem.element.remove();
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
+    }
+    do() {
+        this.designItem.insertChild(this.newItem, this.index);
+        const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
+        if (prepService)
+            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
+    }
+    designItem;
+    index;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.d.ts

@@ -1,16 +1,16 @@
-import { ITransactionItem } from '../ITransactionItem';
-import { IDesignItem } from '../../../item/IDesignItem';
-export declare class MoveElementInDomAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, newTarget: IDesignItem, newPosition: InsertPosition, oldTarget: IDesignItem, oldPosition: InsertPosition);
-    title?: string;
-    get affectedItems(): IDesignItem[];
-    undo(): void;
-    do(): void;
-    designItem: IDesignItem;
-    newTarget: IDesignItem;
-    newPosition: InsertPosition;
-    oldTarget: IDesignItem;
-    oldPosition: InsertPosition;
-    newItem: IDesignItem;
-    mergeWith(other: ITransactionItem): boolean;
-}
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+export declare class MoveElementInDomAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newTarget: IDesignItem, newPosition: InsertPosition, oldTarget: IDesignItem, oldPosition: InsertPosition);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newTarget: IDesignItem;
+    newPosition: InsertPosition;
+    oldTarget: IDesignItem;
+    oldPosition: InsertPosition;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js

@@ -1,31 +1,31 @@
-export class MoveElementInDomAction {
-    constructor(designItem, newTarget, newPosition, oldTarget, oldPosition) {
-        this.title = "Move Item";
-        this.designItem = designItem;
-        this.newTarget = newTarget;
-        this.newPosition = newPosition;
-        this.oldTarget = oldTarget;
-        this.oldPosition = oldPosition;
-    }
-    title;
-    get affectedItems() {
-        return [this.designItem, this.newTarget, this.oldTarget];
-    }
-    undo() {
-        this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    do() {
-        this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    designItem;
-    newTarget;
-    newPosition;
-    oldTarget;
-    oldPosition;
-    newItem;
-    mergeWith(other) {
-        return false;
-    }
-}
+export class MoveElementInDomAction {
+    constructor(designItem, newTarget, newPosition, oldTarget, oldPosition) {
+        this.title = "Move Item";
+        this.designItem = designItem;
+        this.newTarget = newTarget;
+        this.newPosition = newPosition;
+        this.oldTarget = oldTarget;
+        this.oldPosition = oldPosition;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem, this.newTarget, this.oldTarget];
+    }
+    undo() {
+        this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    do() {
+        this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+    }
+    designItem;
+    newTarget;
+    newPosition;
+    oldTarget;
+    oldPosition;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/PropertyChangeAction.d.ts

@@ -1,15 +1,15 @@
-import { ITransactionItem } from '../ITransactionItem';
-import { IDesignItem } from '../../../item/IDesignItem';
-import { IProperty } from '../../propertiesService/IProperty';
-export declare class PropertyChangeAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, property: IProperty, newValue: any, oldValue: any);
-    title?: string;
-    get affectedItems(): IDesignItem[];
-    undo(): void;
-    do(): void;
-    designItem: IDesignItem;
-    property: IProperty;
-    newValue: any;
-    oldValue: any;
-    mergeWith(other: ITransactionItem): boolean;
-}
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+import { IProperty } from '../../propertiesService/IProperty';
+export declare class PropertyChangeAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, property: IProperty, newValue: any, oldValue: any);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    property: IProperty;
+    newValue: any;
+    oldValue: any;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/PropertyChangeAction.js

@@ -1,36 +1,36 @@
-export class PropertyChangeAction {
-    constructor(designItem, property, newValue, oldValue) {
-        this.title = "Change Property";
-        this.designItem = designItem;
-        this.property = property;
-        this.newValue = newValue;
-        this.oldValue = oldValue;
-    }
-    title;
-    get affectedItems() {
-        return [this.designItem];
-    }
-    undo() {
-        if (this.oldValue == null)
-            this.property.service.clearValue([this.designItem], this.property);
-        else
-            this.property.service.setValue([this.designItem], this.property, this.oldValue);
-    }
-    do() {
-        if (this.newValue == null)
-            this.property.service.clearValue([this.designItem], this.property);
-        else
-            this.property.service.setValue([this.designItem], this.property, this.newValue);
-    }
-    designItem;
-    property;
-    newValue;
-    oldValue;
-    mergeWith(other) {
-        if (other instanceof PropertyChangeAction && this.designItem === other.designItem && this.property === other.property) {
-            this.newValue = other.newValue;
-            return true;
-        }
-        return false;
-    }
-}
+export class PropertyChangeAction {
+    constructor(designItem, property, newValue, oldValue) {
+        this.title = "Change Property";
+        this.designItem = designItem;
+        this.property = property;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        if (this.oldValue == null)
+            this.property.service.clearValue([this.designItem], this.property);
+        else
+            this.property.service.setValue([this.designItem], this.property, this.oldValue);
+    }
+    do() {
+        if (this.newValue == null)
+            this.property.service.clearValue([this.designItem], this.property);
+        else
+            this.property.service.setValue([this.designItem], this.property, this.newValue);
+    }
+    designItem;
+    property;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        if (other instanceof PropertyChangeAction && this.designItem === other.designItem && this.property === other.property) {
+            this.newValue = other.newValue;
+            return true;
+        }
+        return false;
+    }
+}

package/dist/elements/widgets/bindableObjectsBrowser/IBindableObjectsBrowser.d.ts

@@ -1,3 +1,3 @@
-export interface IBindableObjectsBrowser {
-    showObject(name: string): any;
-}
+export interface IBindableObjectsBrowser {
+    showObject(name: string): any;
+}

package/dist/elements/widgets/bindableObjectsBrowser/IBindableObjectsBrowser.js

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

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.d.ts

@@ -1,19 +1,11 @@
-/// <reference types="jquery" />
-/// <reference types="jquery.fancytree" />
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { IDesignItem } from '../../item/IDesignItem';
-import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
-export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
-    private _treeDiv;
-    private _tree;
-    private _filter;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    ready(): Promise<void>;
-    lazyLoad(event: JQueryEventObject, data: Fancytree.EventData): void;
-    createTree(rootItem: IDesignItem): void;
-    selectionChanged(event: ISelectionChangedEvent): void;
-    private _recomputeTree;
-    private _getChildren;
-    private _highlight;
-}
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
+    private _treeDiv;
+    private _tree;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    ready(): Promise<void>;
+    initialize(serviceContainer: ServiceContainer): Promise<void>;
+    private lazyLoad;
+}

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -1,8 +1,8 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
-    _treeDiv;
-    _tree;
-    _filter;
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { dragDropFormatNameBindingObject } from '../../../Constants.js';
+export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
+    _treeDiv;
+    _tree;
     static style = css `
       span.drag-source {
         border: 1px solid grey;
@@ -26,99 +26,78 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
       #tree ul:focus {
         outline: none;
       }
-    `;
-    constructor() {
-        super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
-        this._filter = document.createElement('input');
-        this._filter.style.width = '100%';
-        this._filter.placeholder = 'Filter...';
-        this._filter.autocomplete = 'off';
-        this._filter.onkeyup = () => {
-            let match = this._filter.value;
-            this._tree.filterNodes((node) => {
-                return new RegExp(match, "i").test(node.title);
-            });
-        };
-        this.shadowRoot.appendChild(this._filter);
-        this._treeDiv = document.createElement('div');
-        this._treeDiv.style.height = '100%';
-        this._treeDiv.style.overflow = 'auto';
-        this._treeDiv.setAttribute('id', 'tree');
-        this.shadowRoot.appendChild(this._treeDiv);
-    }
-    async ready() {
-        $(this._treeDiv).fancytree({
-            icon: false,
-            extensions: ['filter'],
-            quicksearch: true,
-            source: [],
-            lazyLoad: this.lazyLoad,
-            filter: {
-                autoApply: true,
-                autoExpand: false,
-                counter: true,
-                fuzzy: true,
-                hideExpandedCounter: true,
-                hideExpanders: false,
-                highlight: true,
-                leavesOnly: false,
-                nodata: true,
-                mode: "hide" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
-            }
-        });
-        //@ts-ignore
-        this._tree = $.ui.fancytree.getTree(this._treeDiv);
-        this._treeDiv.children[0].classList.add('fancytree-connectors');
-    }
-    lazyLoad(event, data) {
-        data.result = new Promise(resolve => {
-        });
-    }
-    createTree(rootItem) {
-        if (this._tree) {
-            this._recomputeTree(rootItem);
-        }
-    }
-    selectionChanged(event) {
-        if (event.selectedElements.length > 0) {
-            this._highlight(event.selectedElements);
-        }
-    }
-    _recomputeTree(rootItem) {
-        this._tree.getRootNode().removeChildren();
-        this._getChildren(rootItem, null);
-        //@ts-ignore
-        this._tree.getRootNode().updateCounters();
-    }
-    _getChildren(item, currentNode) {
-        if (currentNode == null) {
-            currentNode = this._tree.getRootNode();
-        }
-        const newNode = currentNode.addChildren({
-            title: item.name + " " + (item.id ? ('#' + item.id) : ''),
-            folder: item.children.length > 0 ? true : false,
-            //@ts-ignore
-            ref: item
-        });
-        for (let i of item.children()) {
-            this._getChildren(i, newNode);
-        }
-    }
-    _highlight(activeElements) {
-        if (activeElements != null) {
-            this._tree.visit((node) => {
-                //@ts-ignore
-                if (activeElements.indexOf(node.data.ref) >= 0) {
-                    node.setSelected(true);
-                }
-                else {
-                    node.setSelected(false);
-                }
-            });
-        }
-    }
-}
-customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);
+    `;
+    constructor() {
+        super();
+        let externalCss = document.createElement('style');
+        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
+        this.shadowRoot.appendChild(externalCss);
+        this._treeDiv = document.createElement('div');
+        this._treeDiv.style.height = '100%';
+        this._treeDiv.style.overflow = 'auto';
+        this._treeDiv.setAttribute('id', 'tree');
+        this.shadowRoot.appendChild(this._treeDiv);
+    }
+    async ready() {
+        $(this._treeDiv).fancytree({
+            icon: false,
+            extensions: ['dnd5'],
+            quicksearch: true,
+            source: [],
+            lazyLoad: this.lazyLoad,
+            dnd5: {
+                dropMarkerParent: this.shadowRoot,
+                preventRecursion: true,
+                preventVoidMoves: false,
+                dropMarkerOffsetX: -24,
+                dropMarkerInsertOffsetX: -16,
+                dragStart: (node, data) => {
+                    data.effectAllowed = "all";
+                    data.dataTransfer.setData(dragDropFormatNameBindingObject, JSON.stringify(node.data.bindable));
+                    data.dropEffect = "copy";
+                    return true;
+                },
+                dragEnter: (node, data) => {
+                    return false;
+                }
+            }
+        });
+        this._tree = $.ui.fancytree.getTree(this._treeDiv);
+        this._treeDiv.children[0].classList.add('fancytree-connectors');
+    }
+    async initialize(serviceContainer) {
+        let rootNode = this._tree.getRootNode();
+        rootNode.removeChildren();
+        const services = serviceContainer.bindableObjectsServices;
+        for (const s of services) {
+            const newNode = rootNode.addChildren({
+                title: s.name,
+                folder: true,
+                lazy: true,
+                data: {
+                    service: s
+                }
+            });
+            rootNode.addNode(newNode);
+        }
+    }
+    lazyLoad(event, data) {
+        data.result = new Promise(async (resolve) => {
+            const service = data.node.data.service;
+            const bindable = data.node.data.bindable;
+            let children;
+            if (bindable?.children)
+                children = bindable.children;
+            else
+                children = await service.getBindableObjects(bindable);
+            resolve(children.map(x => ({
+                service,
+                title: x.name,
+                bindable: x,
+                folder: x.children !== false,
+                lazy: x.children !== false
+            })));
+        });
+    }
+}
+customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);

package/dist/elements/widgets/bindings/BindingsEditor.d.ts

@@ -1,6 +1,17 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor();
-}
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare enum targetType {
+    'property' = "property",
+    'style' = "style",
+    'attribute' = "attribute",
+    'event' = "event"
+}
+export declare enum valueType {
+    'string' = "string",
+    'number' = "number",
+    'boolean' = "boolean"
+}
+export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor(targetType: targetType);
+}

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -1,27 +1,53 @@
-import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
-export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
+export var targetType;
+(function (targetType) {
+    targetType["property"] = "property";
+    targetType["style"] = "style";
+    targetType["attribute"] = "attribute";
+    targetType["event"] = "event";
+})(targetType || (targetType = {}));
+export var valueType;
+(function (valueType) {
+    valueType["string"] = "string";
+    valueType["number"] = "number";
+    valueType["boolean"] = "boolean";
+})(valueType || (valueType = {}));
+export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     * { font-size: 16px; }
-    `;
+    .list { 
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    `;
     static template = html `
-    <span style="position:absolute;top:6px;left:20px;">Expression</span>
-    <input style="width:340px;height:24px;position:absolute;top:30px;left:20px;">
-    <span style="position:absolute;top:78px;left:20px;">Target</span>
-    <select id="target" style="width:347.5px;height:24px;position:absolute;left:20px;top:102px;">
+   <div class="list" style="">
+    <span>Expression</span>
+    <div>
+      <input style="width:100%;">
+      <button>...</button>
+    </div>
+    <!--<span>Target</span>
+    <select id="target">
         <option>Property</option>
         <option>Attribute</option>
         <option>Style</option>
         <option>Event</option>
-    </select>
-    <input id="mode" type="checkbox" style="width:24px;height:24px;position:absolute;top:143px;left:15.328125px;">
-    <label for="mode" style="position:absolute;top:146px;left:45.328125px;">Two Way</label>
-    <input id="inverted" type="checkbox" style="width:24px;height:24px;position:absolute;top:177px;left:15px;">
-    <label for="inverted" style="position:absolute;top:180px;left:44.328125px;">Inverted</label>
-    <input id="nullSafe" type="checkbox" style="width:24px;height:24px;position:absolute;top:208px;left:15.328125px;">
-    <label for="nullSafe" style="position:absolute;top:211px;left:44.328125px;">Null Safe</label>
-  `;
-    constructor() {
-        super();
-    }
-}
-customElements.define('node-projects-bindings-editor', BindingsEditor);
+    </select>-->
+    <div>
+      <input id="mode" type="checkbox"><label for="mode">Two Way</label>    
+    </div>
+    <div>
+      <input id="inverted" type="checkbox"><label for="inverted">Inverted</label>   
+    </div>
+    <div>
+      <input id="nullSafe" type="checkbox"><label for="nullSafe">Null Safe</label>   
+    </div>
+</div>
+  `;
+    constructor(targetType) {
+        super();
+    }
+}
+customElements.define('node-projects-bindings-editor', BindingsEditor);

package/dist/elements/widgets/codeView/ICodeView.d.ts

@@ -1,11 +1,11 @@
-import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
-import { IDisposable } from "../../../interfaces/IDisposable";
-import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export interface ICodeView extends IUiCommandHandler, IDisposable {
-    update(code: string): any;
-    getText(): any;
-    setSelection(position: IStringPosition): any;
-    focusEditor(): any;
-    onTextChanged: TypedEvent<string>;
-}
+import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
+import { IDisposable } from "../../../interfaces/IDisposable";
+import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export interface ICodeView extends IUiCommandHandler, IDisposable {
+    update(code: string): any;
+    getText(): any;
+    setSelection(position: IStringPosition): any;
+    focusEditor(): any;
+    onTextChanged: TypedEvent<string>;
+}

package/dist/elements/widgets/codeView/ICodeView.js

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