@node-projects/web-component-designer 0.0.84 → 0.0.88

package/dist/elements/item/DesignItem.js

@@ -1,289 +1,297 @@
-import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
-import { NodeType } from './NodeType';
-import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
-import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
-import { CssAttributeParser } from '../helper/CssAttributeParser.js';
-import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
-import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction';
-import { DeleteAction } from '../..';
-const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
-const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
-const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
-export class DesignItem {
-    lastContainerSize;
-    node;
-    serviceContainer;
-    instanceServiceContainer;
-    appliedDesignerExtensions = new Map();
-    replaceNode(newNode) {
-        DesignItem._designItemMap.delete(this.node);
-        DesignItem._designItemMap.set(newNode, this);
-        this.node = newNode;
-    }
-    get nodeType() {
-        if (this.node instanceof Comment)
-            return NodeType.Comment;
-        if (this.node instanceof Text)
-            return NodeType.TextNode;
-        return NodeType.Element;
-    }
-    get hasAttributes() {
-        return this.attributes.size > 0;
-    }
-    attributes;
-    get hasStyles() {
-        return this.styles.size > 0;
-    }
-    styles;
-    static _designItemMap = new WeakMap();
-    get element() {
-        return this.node;
-    }
-    get name() {
-        return this.element.localName;
-    }
-    get id() {
-        return this.element.id;
-    }
-    set id(value) {
-        this.element.id = value;
-        this.setAttribute("id", value);
-    }
-    get isRootItem() {
-        return this.instanceServiceContainer.contentService.rootDesignItem === this;
-    }
-    _childArray = [];
-    get hasChildren() {
-        return this._childArray.length > 0;
-    }
-    *children() {
-        for (const e of this._childArray) {
-            yield e;
-        }
-    }
-    get childCount() {
-        return this._childArray.length;
-    }
-    get firstChild() {
-        return this._childArray[0];
-    }
-    get parent() {
-        return this.getOrCreateDesignItem(this.element.parentNode);
-    }
-    indexOf(designItem) {
-        return this._childArray.indexOf(designItem);
-    }
-    insertAdjacentElement(designItem, where) {
-        if (where == 'afterbegin') {
-            this._insertChildInternal(designItem, 0);
-        }
-        else if (where == 'beforeend') {
-            this._insertChildInternal(designItem);
-        }
-        else if (where == 'beforebegin') {
-            this.parent._insertChildInternal(designItem, this.parent.indexOf(this));
-        }
-        else if (where == 'afterend') {
-            this.parent._insertChildInternal(designItem, this.parent.indexOf(this) + 1);
-        }
-    }
-    insertChild(designItem, index) {
-        const action = new InsertChildAction(designItem, this, index);
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    removeChild(designItem) {
-        const action = new DeleteAction([designItem]);
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    remove() {
-        this.parent._removeChildInternal(this);
-    }
-    clearChildren() {
-        for (let i = this._childArray.length - 1; i >= 0; i--) {
-            let di = this._childArray[i];
-            di.remove();
-        }
-    }
-    //abstract text content to own property. so only change via designer api will use it.
-    get hasContent() {
-        return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
-    }
-    get content() {
-        return this.node.textContent;
-    }
-    set content(value) {
-        this.node.textContent = value;
-    }
-    _hideAtDesignTime;
-    get hideAtDesignTime() {
-        return this._hideAtDesignTime;
-    }
-    set hideAtDesignTime(value) {
-        this._hideAtDesignTime = value;
-        if (value)
-            this.attributes.set(hideAtDesignTimeAttributeName, "");
-        else
-            this.attributes.delete(hideAtDesignTimeAttributeName);
-        if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
-            if (!value)
-                this.element.style.display = this.styles.get('display') ?? "";
-            else
-                this.element.style.display = 'none';
-        }
-    }
-    _hideAtRunTime;
-    get hideAtRunTime() {
-        return this._hideAtRunTime;
-    }
-    set hideAtRunTime(value) {
-        this._hideAtRunTime = value;
-        if (value)
-            this.attributes.set(hideAtRunTimeAttributeName, "");
-        else
-            this.attributes.delete(hideAtRunTimeAttributeName);
-        if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
-            if (!value)
-                this.element.style.opacity = this.styles.get('opacity') ?? "";
-            else
-                this.element.style.opacity = '0.3';
-        }
-    }
-    _lockAtDesignTime;
-    get lockAtDesignTime() {
-        return this._lockAtDesignTime;
-    }
-    set lockAtDesignTime(value) {
-        this._lockAtDesignTime = value;
-        if (value)
-            this.attributes.set(lockAtDesignTimeAttributeName, "");
-        else
-            this.attributes.delete(lockAtDesignTimeAttributeName);
-        if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
-            if (!value)
-                this.element.style.pointerEvents = 'auto';
-            else
-                this.element.style.pointerEvents = 'none';
-        }
-    }
-    static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
-        let designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
-        if (designItem.nodeType == NodeType.Element) {
-            for (let a of designItem.element.attributes) {
-                if (a.name !== 'style') {
-                    designItem.attributes.set(a.name, a.value);
-                    if (a.name === hideAtDesignTimeAttributeName)
-                        designItem._hideAtDesignTime = true;
-                    if (a.name === hideAtRunTimeAttributeName)
-                        designItem._hideAtRunTime = true;
-                    if (a.name === lockAtDesignTimeAttributeName)
-                        designItem._lockAtDesignTime = true;
-                }
-            }
-            if (node instanceof HTMLElement || node instanceof SVGElement) {
-                const cssParser = new CssAttributeParser();
-                const st = node.getAttribute("style");
-                if (st) {
-                    cssParser.parse(st);
-                    for (let e of cssParser.entries) {
-                        designItem.styles.set(e.name, e.value);
-                    }
-                }
-                if (!designItem._lockAtDesignTime)
-                    node.style.pointerEvents = 'auto';
-                else
-                    node.style.pointerEvents = 'none';
-                //node.style.cursor = 'pointer';
-            }
-            node.draggable = false; //even if it should be true, for better designer exp.
-        }
-        designItem.updateChildrenFromNodesChildren();
-        return designItem;
-    }
-    updateChildrenFromNodesChildren() {
-        this._childArray = [];
-        if (this.nodeType == NodeType.Element) {
-            if (this.element.children && this.element.children.length === 0 && this.element.childNodes.length <= 1)
-                this.content = this.element.textContent; //was soll das bringen???
-            else {
-                for (const c of this.element.childNodes)
-                    this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
-            }
-        }
-    }
-    constructor(node, serviceContainer, instanceServiceContainer) {
-        this.node = node;
-        this.serviceContainer = serviceContainer;
-        this.instanceServiceContainer = instanceServiceContainer;
-        this.attributes = new Map();
-        this.styles = new Map();
-        DesignItem._designItemMap.set(node, this);
-    }
-    openGroup(title, affectedItems) {
-        return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);
-    }
-    getOrCreateDesignItem(node) {
-        return DesignItem.GetOrCreateDesignItem(node, this.serviceContainer, this.instanceServiceContainer);
-    }
-    static GetOrCreateDesignItem(node, serviceContainer, instanceServiceContainer) {
-        if (!node)
-            return null;
-        let designItem = DesignItem._designItemMap.get(node);
-        if (!designItem) {
-            designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
-        }
-        return designItem;
-    }
-    static GetDesignItem(node) {
-        if (!node)
-            return null;
-        let designItem = DesignItem._designItemMap.get(node);
-        return designItem;
-    }
-    setStyle(name, value) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        const action = new CssStyleChangeAction(this, nm, value, this.styles.get(nm));
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    removeStyle(name) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        const action = new CssStyleChangeAction(this, nm, '', this.styles.get(nm));
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    setAttribute(name, value) {
-        const action = new AttributeChangeAction(this, name, value, this.attributes.get(name));
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    removeAttribute(name) {
-        const action = new AttributeChangeAction(this, name, null, this.attributes.get(name));
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    // Internal implementations wich don't use undo/redo
-    _insertChildInternal(designItem, index) {
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
-        if (designItem.parent) {
-            designItem.parent._removeChildInternal(designItem);
-        }
-        if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
-            this._childArray.push(designItem);
-            this.element.appendChild(designItem.node);
-        }
-        else {
-            let el = this._childArray[index];
-            this.node.insertBefore(designItem.node, el.element);
-            this._childArray.splice(index, 0, designItem);
-        }
-        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
-    }
-    _removeChildInternal(designItem) {
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
-        designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem]);
-        const index = this._childArray.indexOf(designItem);
-        if (index > -1) {
-            this._childArray.splice(index, 1);
-            designItem.element.remove();
-        }
-    }
-}
+import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
+import { NodeType } from './NodeType';
+import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
+import { CssAttributeParser } from '../helper/CssAttributeParser.js';
+import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
+import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction';
+import { DeleteAction } from '../..';
+const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
+const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
+const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
+export class DesignItem {
+    lastContainerSize;
+    node;
+    serviceContainer;
+    instanceServiceContainer;
+    appliedDesignerExtensions = new Map();
+    replaceNode(newNode) {
+        DesignItem._designItemMap.delete(this.node);
+        DesignItem._designItemMap.set(newNode, this);
+        this.node = newNode;
+    }
+    get nodeType() {
+        if (this.node instanceof Comment)
+            return NodeType.Comment;
+        if (this.node instanceof Text)
+            return NodeType.TextNode;
+        return NodeType.Element;
+    }
+    get hasAttributes() {
+        return this.attributes.size > 0;
+    }
+    attributes;
+    get hasStyles() {
+        return this.styles.size > 0;
+    }
+    styles;
+    static _designItemMap = new WeakMap();
+    get element() {
+        return this.node;
+    }
+    get name() {
+        return this.element.localName;
+    }
+    get id() {
+        return this.element.id;
+    }
+    set id(value) {
+        this.element.id = value;
+        this.setAttribute("id", value);
+    }
+    get isRootItem() {
+        return this.instanceServiceContainer.contentService.rootDesignItem === this;
+    }
+    _childArray = [];
+    get hasChildren() {
+        return this._childArray.length > 0;
+    }
+    *children() {
+        for (const e of this._childArray) {
+            yield e;
+        }
+    }
+    get childCount() {
+        return this._childArray.length;
+    }
+    get firstChild() {
+        return this._childArray[0];
+    }
+    get parent() {
+        return this.getOrCreateDesignItem(this.element.parentNode);
+    }
+    indexOf(designItem) {
+        return this._childArray.indexOf(designItem);
+    }
+    insertAdjacentElement(designItem, where) {
+        if (where == 'afterbegin') {
+            this._insertChildInternal(designItem, 0);
+        }
+        else if (where == 'beforeend') {
+            this._insertChildInternal(designItem);
+        }
+        else if (where == 'beforebegin') {
+            this.parent._insertChildInternal(designItem, this.parent.indexOf(this));
+        }
+        else if (where == 'afterend') {
+            this.parent._insertChildInternal(designItem, this.parent.indexOf(this) + 1);
+        }
+    }
+    insertChild(designItem, index) {
+        const action = new InsertChildAction(designItem, this, index);
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    removeChild(designItem) {
+        const action = new DeleteAction([designItem]);
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    remove() {
+        this.parent._removeChildInternal(this);
+    }
+    clearChildren() {
+        for (let i = this._childArray.length - 1; i >= 0; i--) {
+            let di = this._childArray[i];
+            di.remove();
+        }
+    }
+    //abstract text content to own property. so only change via designer api will use it.
+    get hasContent() {
+        return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
+    }
+    get content() {
+        return this.node.textContent;
+    }
+    set content(value) {
+        this.node.textContent = value;
+    }
+    get innerHTML() {
+        return this.element.innerHTML;
+    }
+    set innerHTML(value) {
+        this.element.innerHTML = value;
+        this.updateChildrenFromNodesChildren();
+    }
+    _hideAtDesignTime;
+    get hideAtDesignTime() {
+        return this._hideAtDesignTime;
+    }
+    set hideAtDesignTime(value) {
+        this._hideAtDesignTime = value;
+        if (value)
+            this.attributes.set(hideAtDesignTimeAttributeName, "");
+        else
+            this.attributes.delete(hideAtDesignTimeAttributeName);
+        if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+            if (!value)
+                this.element.style.display = this.styles.get('display') ?? "";
+            else
+                this.element.style.display = 'none';
+        }
+    }
+    _hideAtRunTime;
+    get hideAtRunTime() {
+        return this._hideAtRunTime;
+    }
+    set hideAtRunTime(value) {
+        this._hideAtRunTime = value;
+        if (value)
+            this.attributes.set(hideAtRunTimeAttributeName, "");
+        else
+            this.attributes.delete(hideAtRunTimeAttributeName);
+        if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+            if (!value)
+                this.element.style.opacity = this.styles.get('opacity') ?? "";
+            else
+                this.element.style.opacity = '0.3';
+        }
+    }
+    _lockAtDesignTime;
+    get lockAtDesignTime() {
+        return this._lockAtDesignTime;
+    }
+    set lockAtDesignTime(value) {
+        this._lockAtDesignTime = value;
+        if (value)
+            this.attributes.set(lockAtDesignTimeAttributeName, "");
+        else
+            this.attributes.delete(lockAtDesignTimeAttributeName);
+        if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+            if (!value)
+                this.element.style.pointerEvents = 'auto';
+            else
+                this.element.style.pointerEvents = 'none';
+        }
+    }
+    static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
+        let designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
+        if (designItem.nodeType == NodeType.Element) {
+            for (let a of designItem.element.attributes) {
+                if (a.name !== 'style') {
+                    designItem.attributes.set(a.name, a.value);
+                    if (a.name === hideAtDesignTimeAttributeName)
+                        designItem._hideAtDesignTime = true;
+                    if (a.name === hideAtRunTimeAttributeName)
+                        designItem._hideAtRunTime = true;
+                    if (a.name === lockAtDesignTimeAttributeName)
+                        designItem._lockAtDesignTime = true;
+                }
+            }
+            if (node instanceof HTMLElement || node instanceof SVGElement) {
+                const cssParser = new CssAttributeParser();
+                const st = node.getAttribute("style");
+                if (st) {
+                    cssParser.parse(st);
+                    for (let e of cssParser.entries) {
+                        designItem.styles.set(e.name, e.value);
+                    }
+                }
+                if (!designItem._lockAtDesignTime) {
+                    requestAnimationFrame(() => node.style.pointerEvents = 'auto');
+                }
+                else
+                    node.style.pointerEvents = 'none';
+                //node.style.cursor = 'pointer';
+            }
+            node.draggable = false; //even if it should be true, for better designer exp.
+        }
+        designItem.updateChildrenFromNodesChildren();
+        return designItem;
+    }
+    updateChildrenFromNodesChildren() {
+        this._childArray = [];
+        if (this.nodeType == NodeType.Element) {
+            if (this.element.children && this.element.children.length === 0 && this.element.childNodes.length <= 1)
+                this.content = this.element.textContent; //was soll das bringen???
+            else {
+                for (const c of this.element.childNodes)
+                    this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
+            }
+        }
+    }
+    constructor(node, serviceContainer, instanceServiceContainer) {
+        this.node = node;
+        this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = instanceServiceContainer;
+        this.attributes = new Map();
+        this.styles = new Map();
+        DesignItem._designItemMap.set(node, this);
+    }
+    openGroup(title, affectedItems) {
+        return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);
+    }
+    getOrCreateDesignItem(node) {
+        return DesignItem.GetOrCreateDesignItem(node, this.serviceContainer, this.instanceServiceContainer);
+    }
+    static GetOrCreateDesignItem(node, serviceContainer, instanceServiceContainer) {
+        if (!node)
+            return null;
+        let designItem = DesignItem._designItemMap.get(node);
+        if (!designItem) {
+            designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+    static GetDesignItem(node) {
+        if (!node)
+            return null;
+        let designItem = DesignItem._designItemMap.get(node);
+        return designItem;
+    }
+    setStyle(name, value) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const action = new CssStyleChangeAction(this, nm, value, this.styles.get(nm));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    removeStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const action = new CssStyleChangeAction(this, nm, '', this.styles.get(nm));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    setAttribute(name, value) {
+        const action = new AttributeChangeAction(this, name, value, this.attributes.get(name));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    removeAttribute(name) {
+        const action = new AttributeChangeAction(this, name, null, this.attributes.get(name));
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    // Internal implementations wich don't use undo/redo
+    _insertChildInternal(designItem, index) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+        if (designItem.parent) {
+            designItem.parent._removeChildInternal(designItem);
+        }
+        if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
+            this._childArray.push(designItem);
+            this.element.appendChild(designItem.node);
+        }
+        else {
+            let el = this._childArray[index];
+            this.node.insertBefore(designItem.node, el.element);
+            this._childArray.splice(index, 0, designItem);
+        }
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+    }
+    _removeChildInternal(designItem) {
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+        designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem]);
+        const index = this._childArray.indexOf(designItem);
+        if (index > -1) {
+            this._childArray.splice(index, 1);
+            designItem.element.remove();
+        }
+    }
+}

package/dist/elements/item/IBinding.d.ts

@@ -1,15 +1,15 @@
-import { BindingMode } from "./BindingMode";
-import { BindingTarget } from "./BindingTarget";
-export interface IBinding {
-    targetName?: string;
-    target?: BindingTarget;
-    rawName?: string;
-    rawValue?: string;
-    type?: string;
-    expression?: string;
-    bindableObjectNames?: string[];
-    mode?: BindingMode;
-    invert?: boolean;
-    changedEvents?: string[];
-    nullSafe?: boolean;
-}
+import { BindingMode } from "./BindingMode";
+import { BindingTarget } from "./BindingTarget";
+export interface IBinding {
+    targetName?: string;
+    target?: BindingTarget;
+    rawName?: string;
+    rawValue?: string;
+    type?: string;
+    expression?: string;
+    bindableObjectNames?: string[];
+    mode?: BindingMode;
+    invert?: boolean;
+    changedEvents?: string[];
+    nullSafe?: boolean;
+}

package/dist/elements/item/IBinding.js

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