@node-projects/web-component-designer 0.0.216 → 0.0.218

package/dist/elements/item/DesignItem.js

@@ -1,464 +1,465 @@
-import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction.js';
-import { NodeType } from './NodeType.js';
-import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction.js';
-import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
-import { CssAttributeParser } from '../helper/CssAttributeParser.js';
-import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
-import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js';
-import { DomConverter } from '../widgets/designerView/DomConverter.js';
-import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
-import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
-import { AbstractStylesheetService } from '../services/stylesheetService/AbstractStylesheetService.js';
-import { cssFromString } from '@node-projects/base-custom-webcomponent';
-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;
-    parsedNode;
-    node;
-    serviceContainer;
-    instanceServiceContainer;
-    appliedDesignerExtensions = new Map();
-    shouldAppliedDesignerExtensions = new Map();
-    async clone() {
-        try {
-            const html = DomConverter.ConvertToString([this], false);
-            const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
-            return parsed[0];
-        }
-        catch (err) {
-            //TODO: clone service for design item, maybe refactor copy&paste to use this also...
-            console.warn("could not clone design item.", this);
-        }
-        return null;
-    }
-    *allMatching(selectors) {
-        if (this.hasChildren) {
-            for (let d of this.children()) {
-                if (d.nodeType == NodeType.Element && d.element.matches(selectors))
-                    yield d;
-                yield* d.allMatching(selectors);
-            }
-        }
-    }
-    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;
-    }
-    _attributes;
-    get hasAttributes() {
-        return this._attributes.size > 0;
-    }
-    hasAttribute(name) {
-        return this._attributes.has(name);
-    }
-    getAttribute(name) {
-        return this._attributes.get(name);
-    }
-    *attributes() {
-        for (let s of this._attributes) {
-            yield s;
-        }
-    }
-    _withoutUndoSetAttribute(name, value) {
-        this._attributes.set(name, value);
-        this._reparseSpecialAttributes(name);
-    }
-    _withoutUndoRemoveAttribute(name) {
-        this._attributes.delete(name);
-        this._reparseSpecialAttributes(name);
-    }
-    _reparseSpecialAttributes(name) {
-        if (name == hideAtDesignTimeAttributeName) {
-            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
-                if (!this._attributes.has(hideAtDesignTimeAttributeName))
-                    this.element.style.display = this._styles.get('display') ?? "";
-                else
-                    this.element.style.display = 'none';
-            }
-        }
-        else if (name == hideAtRunTimeAttributeName) {
-            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
-                if (!this._attributes.has(hideAtRunTimeAttributeName))
-                    this.element.style.opacity = this._styles.get('opacity') ?? "";
-                else
-                    this.element.style.opacity = '0.3';
-            }
-        }
-        else if (name == lockAtDesignTimeAttributeName) {
-            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
-                if (!this._attributes.has(lockAtDesignTimeAttributeName))
-                    this.element.style.pointerEvents = 'auto';
-                else
-                    this.element.style.pointerEvents = 'none';
-            }
-        }
-    }
-    _styles;
-    get hasStyles() {
-        return this._styles.size > 0;
-    }
-    hasStyle(name) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        return this._styles.has(nm);
-    }
-    getStyle(name) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        return this._styles.get(nm);
-    }
-    *styles() {
-        for (let s of this._styles) {
-            yield s;
-        }
-    }
-    _withoutUndoSetStyle(name, value) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        this._styles.set(nm, value);
-    }
-    _withoutUndoRemoveStyle(name) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        this._styles.delete(nm);
-    }
-    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];
-    }
-    _parent;
-    get parent() {
-        return this._parent;
-    }
-    indexOf(designItem) {
-        return this._childArray.indexOf(designItem);
-    }
-    insertAdjacentElement(designItem, where) {
-        let action;
-        if (where == 'afterbegin') {
-            action = new InsertChildAction(designItem, this, 0);
-        }
-        else if (where == 'beforeend') {
-            action = new InsertChildAction(designItem, this, this._childArray.length);
-        }
-        else if (where == 'beforebegin') {
-            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
-        }
-        else if (where == 'afterend') {
-            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this) + 1);
-        }
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    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() {
-        const action = new DeleteAction([this]);
-        this.instanceServiceContainer.undoService.execute(action);
-    }
-    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() {
-        if (!this.hasChildren)
-            return this.node.textContent;
-        else
-            return this._childArray.map(x => x.content).join();
-    }
-    set content(value) {
-        const grp = this.openGroup('set content');
-        this.clearChildren();
-        let t = document.createTextNode(value);
-        let di = DesignItem.GetOrCreateDesignItem(t, this.serviceContainer, this.instanceServiceContainer);
-        if (this.nodeType == NodeType.TextNode) {
-            const idx = this.parent.indexOf(this);
-            const parent = this.parent;
-            this.remove();
-            parent.insertChild(di, idx);
-        }
-        else
-            this.insertChild(di);
-        grp.commit();
-    }
-    get innerHTML() {
-        return this.element.innerHTML;
-    }
-    set innerHTML(value) {
-        if (this.nodeType != NodeType.TextNode) {
-            const grp = this.openGroup('set innerHTML');
-            const range = document.createRange();
-            range.selectNode(document.body);
-            const fragment = range.createContextualFragment(value);
-            for (const n of fragment.childNodes) {
-                let di = DesignItem.GetOrCreateDesignItem(n, this.serviceContainer, this.instanceServiceContainer);
-                this.insertChild(di);
-            }
-            grp.commit();
-        }
-    }
-    get isEmptyTextNode() {
-        return this.nodeType === NodeType.TextNode && this.content?.trim() == '';
-    }
-    get hideAtDesignTime() {
-        return this.hasAttribute(hideAtDesignTimeAttributeName);
-    }
-    set hideAtDesignTime(value) {
-        if (value)
-            this.setAttribute(hideAtDesignTimeAttributeName, "");
-        else
-            this.removeAttribute(hideAtDesignTimeAttributeName);
-    }
-    get hideAtRunTime() {
-        return this.hasAttribute(hideAtRunTimeAttributeName);
-    }
-    set hideAtRunTime(value) {
-        if (value)
-            this.setAttribute(hideAtRunTimeAttributeName, "");
-        else
-            this.removeAttribute(hideAtRunTimeAttributeName);
-    }
-    get lockAtDesignTime() {
-        return this.hasAttribute(lockAtDesignTimeAttributeName);
-    }
-    set lockAtDesignTime(value) {
-        if (value)
-            this.setAttribute(lockAtDesignTimeAttributeName, "");
-        else
-            this.removeAttribute(lockAtDesignTimeAttributeName);
-    }
-    static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
-        let designItem = new DesignItem(node, 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 (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.draggable = false; //even if it should be true, for better designer exp.
-        }
-        designItem.updateChildrenFromNodesChildren();
-        return designItem;
-    }
-    updateChildrenFromNodesChildren() {
-        this._childArray = [];
-        if (this.nodeType == NodeType.Element) {
-            for (const c of this.element.childNodes) {
-                const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
-                this._childArray.push(di);
-                di._parent = this;
-            }
-        }
-        this._refreshIfStyleSheet();
-    }
-    constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
-        this.node = node;
-        this.parsedNode = parsedNode;
-        this.serviceContainer = serviceContainer;
-        this.instanceServiceContainer = instanceServiceContainer;
-        this._attributes = new Map();
-        this._styles = new Map();
-        DesignItem._designItemMap.set(node, this);
-    }
-    openGroup(title) {
-        return this.instanceServiceContainer.undoService.openGroup(title);
-    }
-    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, node, serviceContainer, instanceServiceContainer);
-        }
-        return designItem;
-    }
-    static GetDesignItem(node) {
-        if (!node)
-            return null;
-        let designItem = DesignItem._designItemMap.get(node);
-        return designItem;
-    }
-    setStyle(name, value, important) {
-        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);
-    }
-    updateStyleInSheetOrLocal(name, value, important) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        // Pre-sorted by specificity
-        let declarations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
-        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declarations?.length) {
-            // Set style locally
-            if (this.getStyle(nm) != value) {
-                this.setStyle(nm, value);
-            }
-            else if (value == null) {
-                this.removeStyle(nm);
-            }
-        }
-        else {
-            this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, false);
-        }
-    }
-    getStyleFromSheetOrLocal(name, fallback = null) {
-        let nm = PropertiesHelper.camelToDashCase(name);
-        if (this.hasStyle(name))
-            // Get style locally
-            return this.getStyle(nm);
-        // Pre-sorted by specificity
-        let decls = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
-        if (decls && decls.length > 0)
-            return decls[0].value;
-        return null;
-    }
-    getStyleFromSheetOrLocalOrComputed(name, fallback = null) {
-        let value = this.getStyleFromSheetOrLocal(name);
-        if (!value) {
-            value = getComputedStyle(this.element).getPropertyValue(name);
-        }
-        return value ?? fallback;
-    }
-    getComputedStyle(name, fallback = null) {
-        let value = this.getStyleFromSheetOrLocal(name);
-        if (!value) {
-            value = getComputedStyle(this.element).getPropertyValue(name);
-        }
-        return value ?? fallback;
-    }
-    getAllStyles() {
-        if (this.nodeType != NodeType.Element)
-            return [];
-        const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
-        if (this.instanceServiceContainer.stylesheetService) {
-            try {
-                const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
-                if (rules) {
-                    return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
-                }
-            }
-            catch (err) { }
-        }
-        return [{ selector: null, declarations: localStyles, specificity: -1 }];
-    }
-    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);
-        }
-        designItem._parent = this;
-        //todo: is this still needed???
-        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
-            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
-        this._refreshIfStyleSheet();
-    }
-    _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], true);
-        const index = this._childArray.indexOf(designItem);
-        if (index > -1) {
-            this._childArray.splice(index, 1);
-            designItem.element.remove();
-            designItem._parent = null;
-        }
-        this._refreshIfStyleSheet();
-    }
-    _refreshIfStyleSheet() {
-        if (this.name == 'style' || this.parent?.name == 'style') {
-            //Update Stylesheetservice with sheet info
-            //Patch this sheetdata
-            const realContent = this._childArray.reduce((a, b) => a + b.content, '');
-            this.node.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
-            this.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets();
-        }
-        else if (this.name == 'link') {
-        }
-    }
-}
+import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction.js';
+import { NodeType } from './NodeType.js';
+import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { CssAttributeParser } from '../helper/CssAttributeParser.js';
+import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
+import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js';
+import { DomConverter } from '../widgets/designerView/DomConverter.js';
+import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
+import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
+import { AbstractStylesheetService } from '../services/stylesheetService/AbstractStylesheetService.js';
+import { cssFromString } from '@node-projects/base-custom-webcomponent';
+const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
+const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
+const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
+class DesignItem {
+    lastContainerSize;
+    parsedNode;
+    node;
+    serviceContainer;
+    instanceServiceContainer;
+    appliedDesignerExtensions = new Map();
+    shouldAppliedDesignerExtensions = new Map();
+    async clone() {
+        try {
+            const html = DomConverter.ConvertToString([this], false);
+            const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer, true);
+            return parsed[0];
+        }
+        catch (err) {
+            //TODO: clone service for design item, maybe refactor copy&paste to use this also...
+            console.warn("could not clone design item.", this);
+        }
+        return null;
+    }
+    *allMatching(selectors) {
+        if (this.hasChildren) {
+            for (let d of this.children()) {
+                if (d.nodeType == NodeType.Element && d.element.matches(selectors))
+                    yield d;
+                yield* d.allMatching(selectors);
+            }
+        }
+    }
+    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;
+    }
+    _attributes;
+    get hasAttributes() {
+        return this._attributes.size > 0;
+    }
+    hasAttribute(name) {
+        return this._attributes.has(name);
+    }
+    getAttribute(name) {
+        return this._attributes.get(name);
+    }
+    *attributes() {
+        for (let s of this._attributes) {
+            yield s;
+        }
+    }
+    _withoutUndoSetAttribute(name, value) {
+        this._attributes.set(name, value);
+        this._reparseSpecialAttributes(name);
+    }
+    _withoutUndoRemoveAttribute(name) {
+        this._attributes.delete(name);
+        this._reparseSpecialAttributes(name);
+    }
+    _reparseSpecialAttributes(name) {
+        if (name == hideAtDesignTimeAttributeName) {
+            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+                if (!this._attributes.has(hideAtDesignTimeAttributeName))
+                    this.element.style.display = this._styles.get('display') ?? "";
+                else
+                    this.element.style.display = 'none';
+            }
+        }
+        else if (name == hideAtRunTimeAttributeName) {
+            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+                if (!this._attributes.has(hideAtRunTimeAttributeName))
+                    this.element.style.opacity = this._styles.get('opacity') ?? "";
+                else
+                    this.element.style.opacity = '0.3';
+            }
+        }
+        else if (name == lockAtDesignTimeAttributeName) {
+            if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
+                if (!this._attributes.has(lockAtDesignTimeAttributeName))
+                    this.element.style.pointerEvents = 'auto';
+                else
+                    this.element.style.pointerEvents = 'none';
+            }
+        }
+    }
+    _styles;
+    get hasStyles() {
+        return this._styles.size > 0;
+    }
+    hasStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        return this._styles.has(nm);
+    }
+    getStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        return this._styles.get(nm);
+    }
+    *styles() {
+        for (let s of this._styles) {
+            yield s;
+        }
+    }
+    _withoutUndoSetStyle(name, value) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        this._styles.set(nm, value);
+    }
+    _withoutUndoRemoveStyle(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        this._styles.delete(nm);
+    }
+    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];
+    }
+    _parent;
+    get parent() {
+        return this._parent;
+    }
+    indexOf(designItem) {
+        return this._childArray.indexOf(designItem);
+    }
+    insertAdjacentElement(designItem, where) {
+        let action;
+        if (where == 'afterbegin') {
+            action = new InsertChildAction(designItem, this, 0);
+        }
+        else if (where == 'beforeend') {
+            action = new InsertChildAction(designItem, this, this._childArray.length);
+        }
+        else if (where == 'beforebegin') {
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
+        }
+        else if (where == 'afterend') {
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this) + 1);
+        }
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    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() {
+        const action = new DeleteAction([this]);
+        this.instanceServiceContainer.undoService.execute(action);
+    }
+    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() {
+        if (!this.hasChildren)
+            return this.node.textContent;
+        else
+            return this._childArray.map(x => x.content).join();
+    }
+    set content(value) {
+        const grp = this.openGroup('set content');
+        this.clearChildren();
+        let t = document.createTextNode(value);
+        let di = DesignItem.GetOrCreateDesignItem(t, this.serviceContainer, this.instanceServiceContainer);
+        if (this.nodeType == NodeType.TextNode) {
+            const idx = this.parent.indexOf(this);
+            const parent = this.parent;
+            this.remove();
+            parent.insertChild(di, idx);
+        }
+        else
+            this.insertChild(di);
+        grp.commit();
+    }
+    get innerHTML() {
+        return this.element.innerHTML;
+    }
+    set innerHTML(value) {
+        if (this.nodeType != NodeType.TextNode) {
+            const grp = this.openGroup('set innerHTML');
+            const range = document.createRange();
+            range.selectNode(document.body);
+            const fragment = range.createContextualFragment(value);
+            for (const n of fragment.childNodes) {
+                let di = DesignItem.GetOrCreateDesignItem(n, this.serviceContainer, this.instanceServiceContainer);
+                this.insertChild(di);
+            }
+            grp.commit();
+        }
+    }
+    get isEmptyTextNode() {
+        return this.nodeType === NodeType.TextNode && this.content?.trim() == '';
+    }
+    get hideAtDesignTime() {
+        return this.hasAttribute(hideAtDesignTimeAttributeName);
+    }
+    set hideAtDesignTime(value) {
+        if (value)
+            this.setAttribute(hideAtDesignTimeAttributeName, "");
+        else
+            this.removeAttribute(hideAtDesignTimeAttributeName);
+    }
+    get hideAtRunTime() {
+        return this.hasAttribute(hideAtRunTimeAttributeName);
+    }
+    set hideAtRunTime(value) {
+        if (value)
+            this.setAttribute(hideAtRunTimeAttributeName, "");
+        else
+            this.removeAttribute(hideAtRunTimeAttributeName);
+    }
+    get lockAtDesignTime() {
+        return this.hasAttribute(lockAtDesignTimeAttributeName);
+    }
+    set lockAtDesignTime(value) {
+        if (value)
+            this.setAttribute(lockAtDesignTimeAttributeName, "");
+        else
+            this.removeAttribute(lockAtDesignTimeAttributeName);
+    }
+    static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
+        let designItem = new DesignItem(node, 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 (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.draggable = false; //even if it should be true, for better designer exp.
+        }
+        designItem.updateChildrenFromNodesChildren();
+        return designItem;
+    }
+    updateChildrenFromNodesChildren() {
+        this._childArray = [];
+        if (this.nodeType == NodeType.Element) {
+            for (const c of this.element.childNodes) {
+                const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
+                this._childArray.push(di);
+                di._parent = this;
+            }
+        }
+        this._refreshIfStyleSheet();
+    }
+    constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
+        this.node = node;
+        this.parsedNode = parsedNode;
+        this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = instanceServiceContainer;
+        this._attributes = new Map();
+        this._styles = new Map();
+        DesignItem._designItemMap.set(node, this);
+    }
+    openGroup(title) {
+        return this.instanceServiceContainer.undoService.openGroup(title);
+    }
+    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, node, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+    static GetDesignItem(node) {
+        if (!node)
+            return null;
+        let designItem = DesignItem._designItemMap.get(node);
+        return designItem;
+    }
+    setStyle(name, value, important) {
+        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);
+    }
+    updateStyleInSheetOrLocal(name, value, important) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        // Pre-sorted by specificity
+        let declarations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declarations?.length) {
+            // Set style locally
+            if (this.getStyle(nm) != value) {
+                this.setStyle(nm, value);
+            }
+            else if (value == null) {
+                this.removeStyle(nm);
+            }
+        }
+        else {
+            this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, false);
+        }
+    }
+    getStyleFromSheetOrLocal(name, fallback = null) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        if (this.hasStyle(name))
+            // Get style locally
+            return this.getStyle(nm);
+        // Pre-sorted by specificity
+        let decls = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (decls && decls.length > 0)
+            return decls[0].value;
+        return null;
+    }
+    getStyleFromSheetOrLocalOrComputed(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
+    }
+    getComputedStyle(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
+    }
+    getAllStyles() {
+        if (this.nodeType != NodeType.Element)
+            return [];
+        const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
+        if (this.instanceServiceContainer.stylesheetService) {
+            try {
+                const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
+                if (rules) {
+                    return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+                }
+            }
+            catch (err) { }
+        }
+        return [{ selector: null, declarations: localStyles, specificity: -1 }];
+    }
+    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);
+        }
+        designItem._parent = this;
+        //todo: is this still needed???
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+        this._refreshIfStyleSheet();
+    }
+    _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], true);
+        const index = this._childArray.indexOf(designItem);
+        if (index > -1) {
+            this._childArray.splice(index, 1);
+            designItem.element.remove();
+            designItem._parent = null;
+        }
+        this._refreshIfStyleSheet();
+    }
+    _refreshIfStyleSheet() {
+        if (this.name == 'style' || this.parent?.name == 'style') {
+            //Update Stylesheetservice with sheet info
+            //Patch this sheetdata
+            const realContent = this._childArray.reduce((a, b) => a + b.content, '');
+            this.node.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
+            this.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets();
+        }
+        else if (this.name == 'link') {
+        }
+    }
+}
+export { DesignItem };