@node-projects/web-component-designer 0.0.211 → 0.0.213

package/dist/elements/documentContainer.d.ts

@@ -15,6 +15,7 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     demoView: IDemoView & HTMLElement;
     additionalData: any;
     private _firstLoad;
+    private _stylesheetChangedEventRegistered;
     private _additionalStyle;
     set additionalStyleString(style: string);
     get additionalStyleString(): string;

package/dist/elements/documentContainer.js

@@ -8,6 +8,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     demoView;
     additionalData;
     _firstLoad = true;
+    _stylesheetChangedEventRegistered;
     _additionalStyle;
     set additionalStyleString(style) {
         this._additionalStyle = style;
@@ -21,19 +22,12 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _additionalStylesheets;
     set additionalStylesheets(stylesheets) {
         this._additionalStylesheets = stylesheets;
-        if (!this.instanceServiceContainer.stylesheetService) {
-            const stylesheetService = this.designerView.serviceContainer.getLastService('stylesheetService');
-            if (stylesheetService) {
-                const instance = stylesheetService(this.designerView.designerCanvas);
-                this.instanceServiceContainer.register("stylesheetService", instance);
-                instance.stylesheetChanged.on(e => this.additionalStylesheetChanged.emit({ name: e.name, newStyle: e.newStyle, oldStyle: e.oldStyle, changeSource: e.changeSource }));
-            }
-            else {
-                console.warn("no Stylesheet-Service registered, but additionalStylesheets are used.");
-            }
-        }
         if (this.designerView.instanceServiceContainer.stylesheetService)
             this.designerView.instanceServiceContainer.stylesheetService.setStylesheets(stylesheets);
+        if (!this._stylesheetChangedEventRegistered) {
+            this._stylesheetChangedEventRegistered = true;
+            this.designerView.instanceServiceContainer.stylesheetService.stylesheetChanged.on(e => this.additionalStylesheetChanged.emit({ name: e.name, newStyle: e.newStyle, oldStyle: e.oldStyle, changeSource: e.changeSource }));
+        }
     }
     ;
     get additionalStylesheets() {
@@ -150,6 +144,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     }
     dispose() {
         this.codeView.dispose();
+        this.demoView.dispose();
     }
     executeCommand(command) {
         if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)

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

@@ -27,6 +27,7 @@ export declare class DesignItem implements IDesignItem {
     attributes(): Generator<[string, string], void, unknown>;
     _withoutUndoSetAttribute(name: string, value: string): void;
     _withoutUndoRemoveAttribute(name: string): void;
+    _reparseSpecialAttributes(name: string): void;
     private _styles;
     get hasStyles(): boolean;
     hasStyle(name: string): boolean;
@@ -45,6 +46,7 @@ export declare class DesignItem implements IDesignItem {
     children(): IterableIterator<IDesignItem>;
     get childCount(): number;
     get firstChild(): IDesignItem;
+    private _parent;
     get parent(): IDesignItem;
     indexOf(designItem: IDesignItem): number;
     insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): void;
@@ -58,13 +60,10 @@ export declare class DesignItem implements IDesignItem {
     get innerHTML(): string;
     set innerHTML(value: string);
     get isEmptyTextNode(): boolean;
-    private _hideAtDesignTime;
     get hideAtDesignTime(): boolean;
     set hideAtDesignTime(value: boolean);
-    private _hideAtRunTime;
     get hideAtRunTime(): boolean;
     set hideAtRunTime(value: boolean);
-    private _lockAtDesignTime;
     get lockAtDesignTime(): boolean;
     set lockAtDesignTime(value: boolean);
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
@@ -85,4 +84,5 @@ export declare class DesignItem implements IDesignItem {
     removeAttribute(name: string): void;
     _insertChildInternal(designItem: IDesignItem, index?: number): void;
     _removeChildInternal(designItem: IDesignItem): void;
+    _refreshIfStyleSheet(): void;
 }

package/dist/elements/item/DesignItem.js

@@ -8,7 +8,8 @@ import { InsertChildAction } from '../services/undoService/transactionItems/Inse
 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 { StylesheetStyleChangeAction } from '../services/undoService/transactionItems/StylesheetStyleChangeAction.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';
@@ -70,9 +71,37 @@ export class DesignItem {
     }
     _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() {
@@ -131,8 +160,9 @@ export class DesignItem {
     get firstChild() {
         return this._childArray[0];
     }
+    _parent;
     get parent() {
-        return this.getOrCreateDesignItem(this.element.parentNode);
+        return this._parent;
     }
     indexOf(designItem) {
         return this._childArray.indexOf(designItem);
@@ -176,10 +206,13 @@ export class DesignItem {
         return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
     }
     get content() {
-        return this.node.textContent;
+        if (!this.hasChildren)
+            return this.node.textContent;
+        else
+            return this._childArray.map(x => x.content).join();
     }
     set content(value) {
-        const grp = this.openGroup('set innerHTML');
+        const grp = this.openGroup('set content');
         this.clearChildren();
         let t = document.createTextNode(value);
         let di = DesignItem.GetOrCreateDesignItem(t, this.serviceContainer, this.instanceServiceContainer);
@@ -212,56 +245,32 @@ export class DesignItem {
     get isEmptyTextNode() {
         return this.nodeType === NodeType.TextNode && this.content?.trim() == '';
     }
-    _hideAtDesignTime;
     get hideAtDesignTime() {
-        return this._hideAtDesignTime;
+        return this.hasAttribute(hideAtDesignTimeAttributeName);
     }
     set hideAtDesignTime(value) {
-        this._hideAtDesignTime = value;
         if (value)
-            this._attributes.set(hideAtDesignTimeAttributeName, "");
+            this.setAttribute(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';
-        }
+            this.removeAttribute(hideAtDesignTimeAttributeName);
     }
-    _hideAtRunTime;
     get hideAtRunTime() {
-        return this._hideAtRunTime;
+        return this.hasAttribute(hideAtRunTimeAttributeName);
     }
     set hideAtRunTime(value) {
-        this._hideAtRunTime = value;
         if (value)
-            this._attributes.set(hideAtRunTimeAttributeName, "");
+            this.setAttribute(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';
-        }
+            this.removeAttribute(hideAtRunTimeAttributeName);
     }
-    _lockAtDesignTime;
     get lockAtDesignTime() {
-        return this._lockAtDesignTime;
+        return this.hasAttribute(lockAtDesignTimeAttributeName);
     }
     set lockAtDesignTime(value) {
-        this._lockAtDesignTime = value;
         if (value)
-            this._attributes.set(lockAtDesignTimeAttributeName, "");
+            this.setAttribute(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';
-        }
+            this.removeAttribute(lockAtDesignTimeAttributeName);
     }
     static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
         let designItem = new DesignItem(node, node, serviceContainer, instanceServiceContainer);
@@ -269,12 +278,6 @@ export class DesignItem {
             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) {
@@ -286,12 +289,11 @@ export class DesignItem {
                         designItem._styles.set(e.name, e.value);
                     }
                 }
-                if (!designItem._lockAtDesignTime) {
+                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.
         }
@@ -301,9 +303,13 @@ export class DesignItem {
     updateChildrenFromNodesChildren() {
         this._childArray = [];
         if (this.nodeType == NodeType.Element) {
-            for (const c of this.element.childNodes)
-                this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
+            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;
@@ -359,8 +365,7 @@ export class DesignItem {
             }
         }
         else {
-            const action = new StylesheetStyleChangeAction(this.instanceServiceContainer.stylesheetService, declarations[0], value, declarations[0].value);
-            this.instanceServiceContainer.undoService.execute(action);
+            this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, false);
         }
     }
     getStyleFromSheetOrLocal(name, fallback = null) {
@@ -427,9 +432,11 @@ export class DesignItem {
             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)
@@ -439,6 +446,19 @@ export class 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') {
         }
     }
 }

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -3,7 +3,6 @@ import { RefreshMode } from '../IPropertiesService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { ValueType } from '../ValueType.js';
 import { NodeType } from '../../../item/NodeType.js';
-import { StylesheetStyleChangeAction } from '../../undoService/transactionItems/StylesheetStyleChangeAction.js';
 //TODO: remove this code when import asserts are supported
 let cssProperties;
 //@ts-ignore
@@ -58,8 +57,7 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
             // TODO: we do not respect if a same style is found in a media query or another @rule, maybe we need a refresh in the stylesheet parser
             const decls = designItems[0].instanceServiceContainer.stylesheetService?.getDeclarations(designItems[0], property.styleDeclaration.name);
             const currentDecl = decls.find(x => x.parent.selector == property.styleDeclaration.parent.selector && x.parent.stylesheetName == property.styleDeclaration.parent.stylesheetName);
-            const action = new StylesheetStyleChangeAction(designItems[0].instanceServiceContainer.stylesheetService, property.styleDeclaration, value, currentDecl.value);
-            designItems[0].instanceServiceContainer.undoService.execute(action);
+            designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(currentDecl, value, false);
             this._notifyChangedProperty(designItems[0], property, value);
             return;
         }

package/dist/elements/services/stylesheetService/AbstractStylesheetService.d.ts

@@ -1,6 +1,8 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IDocumentStylesheet, IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from './IStylesheetService.js';
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 export declare abstract class AbstractStylesheetService implements IStylesheetService {
     protected _stylesheets: Map<string, {
         stylesheet: IStylesheet;
@@ -14,6 +16,8 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
         stylesheet: IStylesheet | IDocumentStylesheet;
         ast: any;
     }>;
+    protected _instanceServiceContainer: InstanceServiceContainer;
+    constructor(designerCanvas: IDesignerCanvas);
     setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
     setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
     internalSetStylesheets(stylesheets: IStylesheet[], targetMap: Map<string, {
@@ -24,10 +28,11 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     getStylesheets(): IStylesheet[];
     abstract getAppliedRules(designItem: IDesignItem): IStyleRule[];
     abstract getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
-    abstract updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
+    updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): void;
     abstract insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     abstract removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
     abstract updateCompleteStylesheet(name: string, newStyle: string): any;
+    abstract updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean): any;
     stylesheetChanged: TypedEvent<{
         name: string;
         newStyle: string;

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -1,9 +1,14 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js';
+import { StylesheetStyleChangeAction } from "../undoService/transactionItems/StylesheetStyleChangeAction.js";
 export class AbstractStylesheetService {
     _stylesheets = new Map();
     _documentStylesheets = new Map();
     _allStylesheets = new Map();
+    _instanceServiceContainer;
+    constructor(designerCanvas) {
+        this._instanceServiceContainer = designerCanvas.instanceServiceContainer;
+    }
     async setStylesheets(stylesheets) {
         await this.internalSetStylesheets(stylesheets, this._stylesheets);
     }
@@ -24,7 +29,8 @@ export class AbstractStylesheetService {
                     catch (err) {
                         console.warn("error parsing stylesheet", stylesheet, err);
                     }
-                    this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' });
+                    if (targetMap == this._stylesheets)
+                        this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' });
                 }
             }
         }
@@ -41,7 +47,8 @@ export class AbstractStylesheetService {
                     console.warn("error parsing stylesheet", stylesheet, err);
                 }
             }
-            this.stylesheetsChanged.emit();
+            if (targetMap == this._stylesheets)
+                this.stylesheetsChanged.emit();
         }
         else {
             targetMap.clear();
@@ -54,18 +61,27 @@ export class AbstractStylesheetService {
             this._allStylesheets.set(s[0], s[1]);
         }
     }
+    //todo: rename to externalStylesheets
     getStylesheets() {
         let stylesheets = [];
         for (let item of this._stylesheets) {
             stylesheets.push(item[1].stylesheet);
         }
         ;
-        for (let item of this._documentStylesheets) {
+        /*for (let item of this._documentStylesheets) {
             stylesheets.push(item[1].stylesheet);
-        }
-        ;
+        };*/
         return stylesheets;
     }
+    updateDeclarationValue(declaration, value, important) {
+        if (!declaration.stylesheet.designItem) {
+            const action = new StylesheetStyleChangeAction(this, declaration, value, declaration.value);
+            this._instanceServiceContainer.undoService.execute(action);
+        }
+        else {
+            this.updateDeclarationValueWithoutUndo(declaration, value, important);
+        }
+    }
     stylesheetChanged = new TypedEvent();
     stylesheetsChanged = new TypedEvent();
     elementMatchesASelector(designItem, selectors) {

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.d.ts

@@ -1,6 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
 import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 type CssRuleAST = any;
 type CssDeclarationAST = any;
 type CssStylesheetAST = any;
@@ -14,6 +15,7 @@ interface IDeclarationWithAST extends IStyleDeclaration {
     ast: CssDeclarationAST;
 }
 export declare class CssToolsStylesheetService extends AbstractStylesheetService {
+    constructor(designerCanvas: IDesignerCanvas);
     _tools: {
         parse: (css: string, options?: {
             source?: string;
@@ -29,7 +31,7 @@ export declare class CssToolsStylesheetService extends AbstractStylesheetService
     getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
     private getRulesFromAst;
     getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
-    updateDeclarationValue(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
+    updateDeclarationValueWithoutUndo(declaration: IDeclarationWithAST, value: string, important: boolean): void;
     insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     private updateStylesheet;

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.js

@@ -1,5 +1,8 @@
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
 export class CssToolsStylesheetService extends AbstractStylesheetService {
+    constructor(designerCanvas) {
+        super(designerCanvas);
+    }
     _tools;
     async internalParse(style) {
         if (!this._tools)
@@ -20,6 +23,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
                     important: y.value.endsWith('!important'),
                     parent: null,
                     ast: y,
+                    stylesheet: item[1].stylesheet
                 })),
                 specificity: 0,
                 stylesheetName: item[0],
@@ -49,11 +53,10 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
     getDeclarations(designItem, styleName) {
         return this.getAppliedRules(designItem).flatMap(x => x.declarations).filter(x => x.name == styleName);
     }
-    updateDeclarationValue(declaration, value, important) {
+    updateDeclarationValueWithoutUndo(declaration, value, important) {
         declaration.ast.value = important ? value + ' !important' : value;
         let ss = this._allStylesheets.get(declaration.parent.stylesheetName);
         this.updateStylesheet(ss);
-        return true;
     }
     insertDeclarationIntoRule(rule, property, value, important) {
         rule.ast.declarations.push({
@@ -78,7 +81,8 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
         if (ss.stylesheet.designItem) {
             ss.stylesheet.designItem.content = ss.stylesheet.content;
         }
-        this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+        else
+            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
     }
     updateCompleteStylesheet(name, newStyle) {
         const ss = this._allStylesheets.get(name);
@@ -88,7 +92,8 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
             if (ss.stylesheet.designItem) {
                 ss.stylesheet.designItem.content = ss.stylesheet.content;
             }
-            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+            else
+                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
         }
     }
 }

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.d.ts

@@ -1,6 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IStyleDeclaration, IStyleRule } from "./IStylesheetService.js";
+import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 declare namespace csstree {
     type CssNodePlain = any;
     type CssNode = any;
@@ -28,17 +29,19 @@ declare global {
 interface IRuleWithAST extends IStyleRule {
     ast: csstree.RulePlain;
     declarations: IDeclarationWithAST[];
+    stylesheet: IStylesheet;
 }
 interface IDeclarationWithAST extends IStyleDeclaration {
     ast: csstree.DeclarationPlain;
 }
 export declare class CssTreeStylesheetService extends AbstractStylesheetService {
+    constructor(designerCanvas: IDesignerCanvas);
     internalParse(style: string): Promise<any>;
     private getAppliedRulesInternal;
     getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
     private getDeclarationInternal;
     getDeclarations(designItem: IDesignItem, stlyeName: string): IDeclarationWithAST[];
-    updateDeclarationValue(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
+    updateDeclarationValueWithoutUndo(declaration: IDeclarationWithAST, value: string, important: boolean): void;
     insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     updateCompleteStylesheet(name: string, newStyle: string): void;

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.js

@@ -1,6 +1,9 @@
 import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
 export class CssTreeStylesheetService extends AbstractStylesheetService {
+    constructor(designerCanvas) {
+        super(designerCanvas);
+    }
     async internalParse(style) {
         return window.csstree.toPlainObject((window.csstree.parse(style, { positions: true, parseValue: false })));
     }
@@ -52,6 +55,7 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
                 name: styleName,
                 value: declaration.value.value,
                 important: declaration.important == true,
+                stylesheet: rule.stylesheet
             });
         }
         ;
@@ -64,7 +68,7 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         return this.sortDeclarations(declarations);
     }
     /* Section covers the update of rules and declarations */
-    updateDeclarationValue(declaration, value, important) {
+    updateDeclarationValueWithoutUndo(declaration, value, important) {
         let sourceNode = this._allStylesheets.get(declaration.parent.stylesheetName);
         declaration.ast.value = window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + value + (important ? " !important" : ""), { context: 'declaration', parseValue: false })).value;
         const old = sourceNode.stylesheet.content;
@@ -74,8 +78,8 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         if (sourceNode.stylesheet.designItem) {
             sourceNode.stylesheet.designItem.content = sourceNode.stylesheet.content;
         }
-        this.stylesheetChanged.emit({ name: sourceNode.stylesheet.name, newStyle: sourceNode.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
-        return true;
+        else
+            this.stylesheetChanged.emit({ name: sourceNode.stylesheet.name, newStyle: sourceNode.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
     }
     insertDeclarationIntoRule(rule, property, value, important) {
         let sourceNode = this._allStylesheets.get(rule.stylesheetName);
@@ -87,7 +91,8 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         if (sourceNode.stylesheet.designItem) {
             sourceNode.stylesheet.designItem.content = sourceNode.stylesheet.content;
         }
-        this.stylesheetChanged.emit({ name: sourceNode.stylesheet.name, newStyle: sourceNode.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+        else
+            this.stylesheetChanged.emit({ name: sourceNode.stylesheet.name, newStyle: sourceNode.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
         return true;
     }
     removeDeclarationFromRule(rule, property) {
@@ -103,7 +108,8 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         if (ss.stylesheet.designItem) {
             ss.stylesheet.designItem.content = ss.stylesheet.content;
         }
-        this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+        else
+            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
         return true;
     }
     updateCompleteStylesheet(name, newStyle) {
@@ -114,7 +120,8 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
             if (ss.stylesheet.designItem) {
                 ss.stylesheet.designItem.content = ss.stylesheet.content;
             }
-            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+            else
+                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
         }
     }
     /* Section covers the internal traversal creation of rules and declarations */
@@ -146,6 +153,7 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
                     specificity: this.getSpecificity(child.prelude),
                     stylesheetName: source,
                     declarations: null,
+                    stylesheet: this._allStylesheets.get(source).stylesheet
                 });
             }
         }

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -11,14 +11,13 @@ export interface IStyleDeclaration {
     value: string;
     important: boolean;
     parent: IStyleRule;
+    stylesheet?: IStylesheet;
 }
 export interface IStylesheet {
     content: string;
     name: string;
 }
-export interface IDocumentStylesheet {
-    content: string;
-    name: string;
+export interface IDocumentStylesheet extends IStylesheet {
     designItem: IDesignItem;
 }
 export interface IStylesheetService {
@@ -27,7 +26,8 @@ export interface IStylesheetService {
     setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
     getAppliedRules(designItem: IDesignItem): IStyleRule[];
     getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
-    updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
+    updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): any;
+    updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean): any;
     insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
     updateCompleteStylesheet(name: string, newStyle: string): void;

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

@@ -12,18 +12,21 @@ export class InsertChildAction {
         return [this.designItem, this.newParent];
     }
     undo() {
-        if (this.oldParent)
+        if (this.oldParent) {
             this.oldParent._insertChildInternal(this.designItem, this.oldIndex);
-        else
+            this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+        }
+        else {
             this.designItem.parent._removeChildInternal(this.designItem);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+            this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.designItem] });
+        }
     }
     do() {
         this.oldParent = this.designItem.parent;
         if (this.oldParent)
             this.oldIndex = this.designItem.parent.indexOf(this.designItem);
         this.newParent._insertChildInternal(this.designItem, this.newIndex);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: this.oldParent ? 'moved' : 'added', designItems: [this.designItem] });
     }
     designItem;
     newParent;

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

@@ -13,10 +13,10 @@ export class StylesheetStyleChangeAction {
         return [];
     }
     undo() {
-        this.stylesheetService.updateDeclarationValue(this.declaration, this.oldValue, false);
+        this.stylesheetService.updateDeclarationValueWithoutUndo(this.declaration, this.oldValue, false);
     }
     do() {
-        this.stylesheetService.updateDeclarationValue(this.declaration, this.newValue, false);
+        this.stylesheetService.updateDeclarationValueWithoutUndo(this.declaration, this.newValue, false);
     }
     designItem;
     name;

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -55,4 +55,5 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void;
+    lazyTriggerReparseDocumentStylesheets(): any;
 }

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
@@ -84,6 +85,9 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _updateTransform;
     setDesignItems(designItems: IDesignItem[]): void;
     _internalSetDesignItems(designItems: IDesignItem[]): void;
+    reparseTimeout: NodeJS.Timeout | null;
+    lazyTriggerReparseDocumentStylesheets(): void;
+    private reparseDocumentStylesheets;
     addDesignItems(designItems: IDesignItem[]): void;
     _dragOverExtensionItem: IDesignItem;
     private _onDragEnter;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -431,23 +431,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         const contentService = this.serviceContainer.getLastService('contentService');
-        if (contentService)
+        if (contentService) {
             this.instanceServiceContainer.register("contentService", contentService(this));
-        this.instanceServiceContainer.servicesChanged.on(e => {
-            if (e.serviceName == 'stylesheetService') {
+        }
+        const stylesheetService = this.serviceContainer.getLastService('stylesheetService');
+        if (stylesheetService) {
+            const instance = stylesheetService(this);
+            this.instanceServiceContainer.register("stylesheetService", instance);
+            this.instanceServiceContainer.stylesheetService.stylesheetChanged.on((ss) => {
+                if (ss.changeSource == 'extern') {
+                    const ssca = new StylesheetChangedAction(this.instanceServiceContainer.stylesheetService, ss.name, ss.newStyle, ss.oldStyle);
+                    this.instanceServiceContainer.undoService.execute(ssca);
+                }
                 this.applyAllStyles();
-                this.instanceServiceContainer.stylesheetService.stylesheetChanged.on((ss) => {
-                    if (ss.changeSource == 'extern') {
-                        const ssca = new StylesheetChangedAction(this.instanceServiceContainer.stylesheetService, ss.name, ss.newStyle, ss.oldStyle);
-                        this.instanceServiceContainer.undoService.execute(ssca);
-                    }
-                    this.applyAllStyles();
-                });
-                this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => {
-                    this.applyAllStyles();
-                });
-            }
-        });
+            });
+            this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => {
+                this.applyAllStyles();
+            });
+        }
         this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
@@ -535,16 +536,28 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         for (let i of [...this.rootDesignItem.children()])
             this.rootDesignItem._removeChildInternal(i);
         this.addDesignItems(designItems);
+        this.lazyTriggerReparseDocumentStylesheets();
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
+        this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
+        setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50);
+    }
+    reparseTimeout;
+    lazyTriggerReparseDocumentStylesheets() {
+        if (this.reparseTimeout) {
+            clearTimeout(this.reparseTimeout);
+        }
+        this.reparseTimeout = setTimeout(async () => {
+            await this.reparseDocumentStylesheets();
+            clearTimeout(this.reparseTimeout);
+        }, 20);
+    }
+    async reparseDocumentStylesheets() {
         if (this.instanceServiceContainer.stylesheetService) {
             const styleElements = this.rootDesignItem.element.querySelectorAll('style');
             let i = 1;
-            const intStyleSheets = [...styleElements].map(x => ({ name: '<style> #' + (x.id ? x.id + '(' + i++ + ')' : i++), content: x.textContent, designItem: DesignItem.GetDesignItem(x) }));
-            //TODO: clear out style elements so they don't interfer with designer
-            this.instanceServiceContainer.stylesheetService.setDocumentStylesheets(intStyleSheets);
+            const intStyleSheets = [...styleElements].map(x => ({ name: '<style> #' + (x.id ? x.id + '(' + i++ + ')' : i++), content: DesignItem.GetDesignItem(x).content, designItem: DesignItem.GetDesignItem(x) }));
+            await this.instanceServiceContainer.stylesheetService.setDocumentStylesheets(intStyleSheets);
         }
-        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
-        this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
-        setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50);
     }
     addDesignItems(designItems) {
         if (designItems) {

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

@@ -104,10 +104,10 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
                 this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.node?.nodeName ?? '';
             this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
             if (this._instanceServiceContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) {
-                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
             }
             else if (this._instanceServiceContainer.selectionService.primarySelection?.element?.children?.length <= 0)
-                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? '';
+                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
             else
                 this._content.value = '';
             this._content.title = this._content.value;

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

@@ -338,7 +338,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             currentNode = this._tree.getRootNode();
         }
         const newNode = currentNode.addChildren({
-            title: item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '&nbsp;</small></small></small> ' + DomConverter.normalizeContentValue(item.content),
+            title: item.isRootItem ? '-root-' : item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '&nbsp;</small></small></small> ' + DomConverter.normalizeContentValue(item.content),
             folder: item.children.length > 0 ? true : false,
             //@ts-ignore
             ref: item

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.211",
+  "version": "0.0.213",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -17,7 +17,7 @@
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
-    "@adobe/css-tools": "^4.2.0",
+    "@adobe/css-tools": "^4.3.0-beta.1",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.5.1",
     "@papyrs/stylo": "^0.0.42",
@@ -25,14 +25,14 @@
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^18.14.2",
-    "ace-builds": "^1.15.2",
+    "@types/node": "^18.14.6",
+    "ace-builds": "^1.15.3",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.4.3",
-    "jquery": "^3.6.3",
+    "jest": "^29.5.0",
+    "jquery": "^3.6.4",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.31",
     "monaco-editor": "^0.36.1",