@node-projects/web-component-designer 0.0.209 → 0.0.210

package/dist/commandHandling/CommandType.d.ts

@@ -5,6 +5,8 @@ export declare enum CommandType {
     'delete' = "delete",
     'undo' = "undo",
     'redo' = "redo",
+    'holdUndo' = "holdUndo",
+    'holdRedo' = "holdRedo",
     'rotateCounterClockwise' = "rotateCounterClockwise",
     'rotateClockwise' = "rotateClockwise",
     'selectAll' = "selectAll",

package/dist/commandHandling/CommandType.js

@@ -6,6 +6,8 @@ export var CommandType;
     CommandType["delete"] = "delete";
     CommandType["undo"] = "undo";
     CommandType["redo"] = "redo";
+    CommandType["holdUndo"] = "holdUndo";
+    CommandType["holdRedo"] = "holdRedo";
     CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
     CommandType["rotateClockwise"] = "rotateClockwise";
     CommandType["selectAll"] = "selectAll";

package/dist/commandHandling/IUiCommand.d.ts

@@ -1,6 +1,7 @@
 import { CommandType } from './CommandType.js';
 export interface IUiCommand {
     type: CommandType;
+    event?: Event;
     special?: string;
     parameter?: any;
     altKey?: boolean;

package/dist/elements/documentContainer.d.ts

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

package/dist/elements/documentContainer.js

@@ -7,6 +7,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     codeView;
     demoView;
     additionalData;
+    _firstLoad = true;
     _additionalStyle;
     set additionalStyleString(style) {
         this._additionalStyle = style;
@@ -155,19 +156,23 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this.designerView.executeCommand(command);
         else if (this._tabControl.selectedIndex === 1)
             this.codeView.executeCommand(command);
+        else if (this._tabControl.selectedIndex === 3)
+            this.demoView.executeCommand(command);
     }
     canExecuteCommand(command) {
         if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
             return this.designerView.canExecuteCommand(command);
         else if (this._tabControl.selectedIndex === 1)
             return this.codeView.canExecuteCommand(command);
+        else if (this._tabControl.selectedIndex === 3)
+            return this.demoView.canExecuteCommand(command);
         return false;
     }
     set content(value) {
         this._content = value;
         if (this._tabControl) {
             if (this._tabControl.selectedIndex === 0)
-                this.designerView.parseHTML(this._content);
+                this.designerView.parseHTML(this._content, this._firstLoad);
             else if (this._tabControl.selectedIndex === 1)
                 this.codeView.update(this._content);
             else if (this._tabControl.selectedIndex === 2) {
@@ -221,8 +226,10 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
             }
         });
-        if (this._content)
+        if (this._content) {
             this.content = this._content;
+            this._firstLoad = false;
+        }
     }
     get instanceServiceContainer() {
         return this.designerView.instanceServiceContainer;

package/dist/elements/item/DesignItem.js

@@ -179,16 +179,35 @@ export class DesignItem {
         return this.node.textContent;
     }
     set content(value) {
-        //undo
-        this.node.textContent = value;
+        const grp = this.openGroup('set innerHTML');
+        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) {
-        //undo
-        this.element.innerHTML = value;
-        this.updateChildrenFromNodesChildren();
+        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() == '';

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

@@ -15,7 +15,7 @@ export class AbstractPropertiesService {
             return properties.find(x => x.name == name);
     }
     setValue(designItems, property, value) {
-        const cg = designItems[0].openGroup("properties changed");
+        const cg = designItems[0].openGroup("property changed: " + property.name + " to " + value);
         for (let d of designItems) {
             if (property.propertyType == PropertyType.cssValue) {
                 d.updateStyleInSheetOrLocal(property.name, value);
@@ -61,7 +61,7 @@ export class AbstractPropertiesService {
         return BindingTarget.property;
     }
     clearValue(designItems, property) {
-        const cg = designItems[0].openGroup("properties cleared");
+        const cg = designItems[0].openGroup("property cleared: " + property.name);
         for (let d of designItems) {
             if (property.propertyType == PropertyType.cssValue) {
                 d.removeStyle(property.name);

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

@@ -1,9 +1,27 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { IDesignItem } from "../../item/IDesignItem";
-import { IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService";
+import { IDocumentStylesheet, IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService";
 export declare abstract class AbstractStylesheetService implements IStylesheetService {
-    abstract setStylesheets(stylesheets: IStylesheet[]): void;
-    abstract getStylesheets(): IStylesheet[];
+    protected _stylesheets: Map<string, {
+        stylesheet: IStylesheet;
+        ast: any;
+    }>;
+    protected _documentStylesheets: Map<string, {
+        stylesheet: IDocumentStylesheet;
+        ast: any;
+    }>;
+    protected _allStylesheets: Map<string, {
+        stylesheet: IStylesheet | IDocumentStylesheet;
+        ast: any;
+    }>;
+    setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
+    setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
+    internalSetStylesheets(stylesheets: IStylesheet[], targetMap: Map<string, {
+        stylesheet: IStylesheet;
+        ast: any;
+    }>): Promise<void>;
+    protected abstract internalParse(style: string): Promise<any>;
+    getStylesheets(): IStylesheet[];
     abstract getAppliedRules(designItem: IDesignItem): IStyleRule[];
     abstract getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
     abstract updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
@@ -18,4 +36,6 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     }>;
     stylesheetsChanged: TypedEvent<void>;
     protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;
+    static buildPatchedStyleSheet(value: CSSStyleSheet[]): string;
+    private static traverseAndCollectRules;
 }

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

@@ -1,5 +1,71 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerCanvas } from "../../widgets/designerView/designerCanvas";
 export class AbstractStylesheetService {
+    _stylesheets = new Map();
+    _documentStylesheets = new Map();
+    _allStylesheets = new Map();
+    async setStylesheets(stylesheets) {
+        await this.internalSetStylesheets(stylesheets, this._stylesheets);
+    }
+    async setDocumentStylesheets(stylesheets) {
+        await this.internalSetStylesheets(stylesheets, this._documentStylesheets);
+    }
+    async internalSetStylesheets(stylesheets, targetMap) {
+        if (targetMap != null && stylesheets != null && targetMap.size == stylesheets.length && stylesheets.every(x => targetMap.has(x.name))) {
+            for (let stylesheet of stylesheets) {
+                const old = targetMap.get(stylesheet.name);
+                if (old.stylesheet.content != stylesheet.content) {
+                    try {
+                        targetMap.set(stylesheet.name, {
+                            stylesheet: stylesheet,
+                            ast: await this.internalParse(stylesheet.content)
+                        });
+                    }
+                    catch (err) {
+                        console.warn("error parsing stylesheet", stylesheet, err);
+                    }
+                    this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' });
+                }
+            }
+        }
+        else if (stylesheets != null) {
+            targetMap.clear();
+            for (let stylesheet of stylesheets) {
+                try {
+                    targetMap.set(stylesheet.name, {
+                        stylesheet: stylesheet,
+                        ast: await this.internalParse(stylesheet.content)
+                    });
+                }
+                catch (err) {
+                    console.warn("error parsing stylesheet", stylesheet, err);
+                }
+            }
+            this.stylesheetsChanged.emit();
+        }
+        else {
+            targetMap.clear();
+        }
+        this._allStylesheets.clear();
+        for (let s of this._documentStylesheets) {
+            this._allStylesheets.set(s[0], s[1]);
+        }
+        for (let s of this._stylesheets) {
+            this._allStylesheets.set(s[0], s[1]);
+        }
+    }
+    getStylesheets() {
+        let stylesheets = [];
+        for (let item of this._stylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        }
+        ;
+        for (let item of this._documentStylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        }
+        ;
+        return stylesheets;
+    }
     stylesheetChanged = new TypedEvent();
     stylesheetsChanged = new TypedEvent();
     elementMatchesASelector(designItem, selectors) {
@@ -8,4 +74,47 @@ export class AbstractStylesheetService {
                 return true;
         return false;
     }
+    static buildPatchedStyleSheet(value) {
+        let style = '';
+        for (let s of value) {
+            style += this.traverseAndCollectRules(s);
+        }
+        return style;
+    }
+    static traverseAndCollectRules(ruleContainer) {
+        let t = '';
+        for (let rule of ruleContainer.cssRules) {
+            if ((rule instanceof CSSContainerRule
+                || rule instanceof CSSSupportsRule
+                || rule instanceof CSSMediaRule)
+                && rule.cssRules) {
+                t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+            }
+            if (rule instanceof CSSStyleRule) {
+                let parts = rule.selectorText.split(',');
+                let sel = "";
+                for (let p of parts) {
+                    if (p.includes(DesignerCanvas.cssprefixConstant)) {
+                        sel += p;
+                        continue;
+                    }
+                    if (sel)
+                        sel += ',';
+                    sel += DesignerCanvas.cssprefixConstant + p.trimStart();
+                }
+                t += sel;
+                let cssText = rule.style.cssText;
+                //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
+                if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
+                    let entr = rule.styleMap.entries();
+                    cssText = '';
+                    for (let e of entr) {
+                        cssText += e[0] + ':' + e[1].toString() + ';';
+                    }
+                }
+                t += '{' + cssText + '}';
+            }
+        }
+        return t;
+    }
 }

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

@@ -14,7 +14,6 @@ interface IDeclarationWithAST extends IStyleDeclaration {
     ast: CssDeclarationAST;
 }
 export declare class CssToolsStylesheetService extends AbstractStylesheetService {
-    private _stylesheets;
     _tools: {
         parse: (css: string, options?: {
             source?: string;
@@ -26,8 +25,7 @@ export declare class CssToolsStylesheetService extends AbstractStylesheetService
             emptyDeclarations?: boolean;
         }) => string;
     };
-    setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
-    getStylesheets(): IStylesheet[];
+    internalParse(style: string): Promise<any>;
     getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
     private getRulesFromAst;
     getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];

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

@@ -1,57 +1,14 @@
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
 export class CssToolsStylesheetService extends AbstractStylesheetService {
-    _stylesheets = new Map();
     _tools;
-    async setStylesheets(stylesheets) {
+    async internalParse(style) {
         if (!this._tools)
             this._tools = await import('@adobe/css-tools');
-        if (this._stylesheets != null && stylesheets != null && this._stylesheets.size == stylesheets.length && stylesheets.every(x => this._stylesheets.has(x.name))) {
-            for (let stylesheet of stylesheets) {
-                const old = this._stylesheets.get(stylesheet.name);
-                if (old.stylesheet.content != stylesheet.content) {
-                    try {
-                        this._stylesheets.set(stylesheet.name, {
-                            stylesheet: stylesheet,
-                            ast: this._tools.parse(stylesheet.content)
-                        });
-                    }
-                    catch (err) {
-                        console.warn("error parsing stylesheet", stylesheet, err);
-                    }
-                    this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' });
-                }
-            }
-        }
-        else if (stylesheets != null) {
-            this._stylesheets = new Map();
-            for (let stylesheet of stylesheets) {
-                try {
-                    this._stylesheets.set(stylesheet.name, {
-                        stylesheet: stylesheet,
-                        ast: this._tools.parse(stylesheet.content)
-                    });
-                }
-                catch (err) {
-                    console.warn("error parsing stylesheet", stylesheet, err);
-                }
-            }
-            this.stylesheetsChanged.emit();
-        }
-        else {
-            this._stylesheets = null;
-        }
-    }
-    getStylesheets() {
-        let stylesheets = [];
-        for (let item of this._stylesheets) {
-            stylesheets.push(item[1].stylesheet);
-        }
-        ;
-        return stylesheets;
+        return this._tools.parse(style);
     }
     getAppliedRules(designItem) {
         let rules = [];
-        for (let item of this._stylesheets.entries()) {
+        for (let item of this._allStylesheets.entries()) {
             if (!item[1].ast?.stylesheet?.rules)
                 continue;
             let rs = Array.from(this.getRulesFromAst(item[1].ast?.stylesheet?.rules, item[1].stylesheet, designItem))
@@ -94,7 +51,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
     }
     updateDeclarationValue(declaration, value, important) {
         declaration.ast.value = important ? value + ' !important' : value;
-        let ss = this._stylesheets.get(declaration.parent.stylesheetName);
+        let ss = this._allStylesheets.get(declaration.parent.stylesheetName);
         this.updateStylesheet(ss);
         return true;
     }
@@ -104,7 +61,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
             property: property,
             value: important ? value + ' !important' : value
         });
-        this.updateStylesheet(this._stylesheets.get(rule.stylesheetName));
+        this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName));
         return true;
     }
     removeDeclarationFromRule(rule, property) {
@@ -112,19 +69,25 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
         if (idx == -1)
             return false;
         rule.ast.declarations.splice(idx, 1);
-        this.updateStylesheet(this._stylesheets.get(rule.stylesheetName));
+        this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName));
         return true;
     }
     updateStylesheet(ss) {
         const old = ss.stylesheet.content;
         ss.stylesheet.content = this._tools.stringify(ss.ast, { indent: '    ', compress: false, emptyDeclarations: true });
+        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' });
     }
     updateCompleteStylesheet(name, newStyle) {
-        const ss = this._stylesheets.get(name);
+        const ss = this._allStylesheets.get(name);
         if (ss.stylesheet.content != newStyle) {
             const old = ss.stylesheet.content;
             ss.stylesheet.content = newStyle;
+            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' });
         }
     }

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

@@ -1,5 +1,5 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
+import { IStyleDeclaration, IStyleRule } from "./IStylesheetService.js";
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
 declare namespace csstree {
     type CssNodePlain = any;
@@ -33,9 +33,7 @@ interface IDeclarationWithAST extends IStyleDeclaration {
     ast: csstree.DeclarationPlain;
 }
 export declare class CssTreeStylesheetService extends AbstractStylesheetService {
-    private _stylesheets;
-    setStylesheets(stylesheets: IStylesheet[]): void;
-    getStylesheets(): IStylesheet[];
+    internalParse(style: string): Promise<any>;
     private getAppliedRulesInternal;
     getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
     private getDeclarationInternal;

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

@@ -1,39 +1,13 @@
 import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
 export class CssTreeStylesheetService extends AbstractStylesheetService {
-    _stylesheets = new Map();
-    setStylesheets(stylesheets) {
-        if (stylesheets != null) {
-            this._stylesheets = new Map();
-            for (let stylesheet of stylesheets) {
-                try {
-                    this._stylesheets.set(stylesheet.name, {
-                        stylesheet: stylesheet,
-                        ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.content, { positions: true, parseValue: false })))
-                    });
-                }
-                catch (err) {
-                    console.warn("error parsing stylesheet", stylesheet, err);
-                }
-            }
-            this.stylesheetsChanged.emit();
-        }
-        else {
-            this._stylesheets = null;
-        }
-    }
-    getStylesheets() {
-        let stylesheets = [];
-        for (let item of this._stylesheets) {
-            stylesheets.push(item[1].stylesheet);
-        }
-        ;
-        return stylesheets;
+    async internalParse(style) {
+        return window.csstree.toPlainObject((window.csstree.parse(style, { positions: true, parseValue: false })));
     }
     /* Section covers the retrieval of rules and declarations */
     getAppliedRulesInternal(designItem) {
         let styles = [];
-        for (let item of this._stylesheets) {
+        for (let item of this._allStylesheets) {
             if (!item[1].ast || !this.astHasChildren(item[1].ast))
                 continue;
             styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.content, item[0], designItem)));
@@ -91,22 +65,28 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
     }
     /* Section covers the update of rules and declarations */
     updateDeclarationValue(declaration, value, important) {
-        let sourceNode = this._stylesheets.get(declaration.parent.stylesheetName);
+        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;
         sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
         // After generating the stylesheet, parse again (so line numbers are correct)
         sourceNode.ast = window.csstree.toPlainObject((window.csstree.parse(sourceNode.stylesheet.content, { positions: true, parseValue: false })));
+        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;
     }
     insertDeclarationIntoRule(rule, property, value, important) {
-        let sourceNode = this._stylesheets.get(rule.stylesheetName);
+        let sourceNode = this._allStylesheets.get(rule.stylesheetName);
         rule.ast.block.children.push(window.csstree.toPlainObject(window.csstree.parse(property + ": " + value + (important ? " !important" : ""), { context: 'declaration', parseValue: false })));
         const old = sourceNode.stylesheet.content;
         sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
         // After generating the stylesheet, parse again (so line numbers are correct)
         sourceNode.ast = window.csstree.toPlainObject((window.csstree.parse(sourceNode.stylesheet.content, { positions: true, parseValue: false })));
+        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;
     }
@@ -115,19 +95,25 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         if (index == -1)
             return false;
         rule.ast.block.children.splice(index, 1);
-        const ss = this._stylesheets.get(rule.stylesheetName);
+        const ss = this._allStylesheets.get(rule.stylesheetName);
         const old = ss.stylesheet.content;
-        ss.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
+        ss.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(this._allStylesheets.get(rule.stylesheetName).ast));
         // After generating the stylesheet, parse again (so line numbers are correct)
-        ss.ast = window.csstree.toPlainObject((window.csstree.parse(this._stylesheets.get(rule.stylesheetName).stylesheet.content, { positions: true, parseValue: false })));
+        ss.ast = window.csstree.toPlainObject((window.csstree.parse(this._allStylesheets.get(rule.stylesheetName).stylesheet.content, { positions: true, parseValue: false })));
+        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' });
         return true;
     }
     updateCompleteStylesheet(name, newStyle) {
-        const ss = this._stylesheets.get(name);
+        const ss = this._allStylesheets.get(name);
         if (ss.stylesheet.content != newStyle) {
             const old = ss.stylesheet.content;
             ss.stylesheet.content = newStyle;
+            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' });
         }
     }

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

@@ -16,9 +16,15 @@ export interface IStylesheet {
     content: string;
     name: string;
 }
+export interface IDocumentStylesheet {
+    content: string;
+    name: string;
+    designItem: IDesignItem;
+}
 export interface IStylesheetService {
-    setStylesheets(stylesheets: IStylesheet[]): void;
+    setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
     getStylesheets(): IStylesheet[];
+    setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
     getAppliedRules(designItem: IDesignItem): IStyleRule[];
     getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
     updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): boolean;

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.d.ts

@@ -0,0 +1,15 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IBinding } from '../../../item/IBinding.js';
+export declare class AttributeChangeAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, name: string, newValue: string | IBinding | null, oldValue: string | IBinding | null);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    name: string;
+    newValue: any;
+    oldValue: any;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.js

@@ -0,0 +1,70 @@
+export class AttributeChangeAction {
+    constructor(designItem, name, newValue, oldValue) {
+        this.title = "Change Attribute " + name + " of <" + designItem.name + ">";
+        this.designItem = designItem;
+        this.name = name;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        if (this.oldValue == null) {
+            this.designItem._withoutUndoRemoveAttribute(this.name);
+            try {
+                this.designItem.element.removeAttribute(this.name);
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        }
+        else {
+            this.designItem._withoutUndoSetAttribute(this.name, this.oldValue);
+            if (this.name != "draggable") {
+                try {
+                    if (typeof this.oldValue === 'string')
+                        this.designItem.element.setAttribute(this.name, this.oldValue);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+    }
+    do() {
+        if (this.newValue == null) {
+            this.designItem._withoutUndoRemoveAttribute(this.name);
+            try {
+                this.designItem.element.removeAttribute(this.name);
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        }
+        else {
+            this.designItem._withoutUndoSetAttribute(this.name, this.newValue);
+            if (this.name != "draggable") {
+                try {
+                    if (typeof this.newValue === 'string')
+                        this.designItem.element.setAttribute(this.name, this.newValue);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+    }
+    designItem;
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        if (other instanceof AttributeChangeAction && this.designItem === other.designItem && this.name === other.name) {
+            this.newValue = other.newValue;
+            return true;
+        }
+        return false;
+    }
+}

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

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

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

@@ -0,0 +1,38 @@
+import { NodeType } from '../../../item/NodeType.js';
+export class ContentChangeAction {
+    constructor(designItem, newValue) {
+        this.title = "Change Content of " + designItem.name + " to " + newValue;
+        this.designItem = designItem;
+        this.newValue = newValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        if (this.designItem.nodeType == NodeType.TextNode || this.designItem.nodeType == NodeType.Comment) {
+            this.designItem.element.textContent = this.oldValue;
+        }
+        else {
+            this.designItem.element.innerHTML = this.oldValue;
+        }
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'edited', designItems: [this.designItem] });
+    }
+    do() {
+        if (this.designItem.nodeType == NodeType.TextNode || this.designItem.nodeType == NodeType.Comment) {
+            this.oldValue = this.designItem.element.textContent;
+            this.designItem.element.textContent = this.newValue;
+        }
+        else {
+            this.oldValue = this.designItem.element.innerHTML;
+            this.designItem.element.innerHTML = this.newValue;
+        }
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'edited', designItems: [this.designItem] });
+    }
+    designItem;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/widgets/demoView/IDemoView.d.ts

@@ -1,5 +1,7 @@
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 import { ServiceContainer } from '../../services/ServiceContainer.js';
-export interface IDemoView {
+export interface IDemoView extends IUiCommandHandler, IDisposable {
     display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
 }

package/dist/elements/widgets/demoView/demoView.d.ts

@@ -2,10 +2,16 @@ import { IDemoView } from './IDemoView.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
 import { ServiceContainer } from '../../services/ServiceContainer.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-export declare class DemoView extends BaseCustomWebComponentLazyAppend implements IDemoView {
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
+export declare class DemoView extends BaseCustomWebComponentLazyAppend implements IDemoView, IUiCommandHandler, IDisposable {
     private _placeholder;
     private _loading;
     static readonly style: CSSStyleSheet;
     constructor();
+    dispose(): void;
+    executeCommand: (command: IUiCommand) => void;
+    canExecuteCommand: (command: IUiCommand) => boolean;
     display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -29,6 +29,10 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
+    dispose() {
+    }
+    executeCommand;
+    canExecuteCommand;
     async display(serviceContainer, instanceServiceContainer, code, style) {
         this._loading.hidden = false;
         await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style);

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

@@ -51,7 +51,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _outercanvas2;
     private _lastHoverDesignItem;
     private _firstConnect;
-    private cssprefixConstant;
+    static cssprefixConstant: string;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
@@ -125,6 +125,4 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     private zoomConvertEventToViewPortCoordinates;
     zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
-    private buildPatchedStyleSheet;
-    private traverseAndCollectRules;
 }

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

@@ -20,6 +20,7 @@ import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { NodeType } from '../../item/NodeType.js';
 import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
 import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
+import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -77,7 +78,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _outercanvas2;
     _lastHoverDesignItem;
     _firstConnect;
-    cssprefixConstant = '#node-projects-designer-canvas-canvas ';
+    static cssprefixConstant = '#node-projects-designer-canvas-canvas ';
     static style = css `
     :host {
       display: block;
@@ -216,11 +217,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     applyAllStyles() {
         let styles = [this.constructor.style];
         if (this._additionalStyle)
-            styles.push(cssFromString(this.buildPatchedStyleSheet(this._additionalStyle)));
+            styles.push(cssFromString(AbstractStylesheetService.buildPatchedStyleSheet(this._additionalStyle)));
         if (this.instanceServiceContainer.stylesheetService) {
             styles.push(...this.instanceServiceContainer.stylesheetService
                 .getStylesheets()
-                .map(x => cssFromString(this.buildPatchedStyleSheet([cssFromString(x.content)]))));
+                .map(x => cssFromString(AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(x.content)]))));
         }
         this.shadowRoot.adoptedStyleSheets = styles;
     }
@@ -529,12 +530,18 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _internalSetDesignItems(designItems) {
         this._fillCalculationrects();
-        //this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
         for (let i of [...this.rootDesignItem.children()])
             this.rootDesignItem._removeChildInternal(i);
         this.addDesignItems(designItems);
+        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);
+        }
         this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
         this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
         setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50);
@@ -914,6 +921,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     _pointerEventHandler(event, forceElement = null) {
+        if (!this.serviceContainer)
+            return;
         this._fillCalculationrects();
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
@@ -1017,48 +1026,5 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.zoomFactor = newZoom;
         this.canvasOffsetUnzoomed = newCanvasOffset;
     }
-    buildPatchedStyleSheet(value) {
-        let style = '';
-        for (let s of value) {
-            style += this.traverseAndCollectRules(s);
-        }
-        return style;
-    }
-    traverseAndCollectRules(ruleContainer) {
-        let t = '';
-        for (let rule of ruleContainer.cssRules) {
-            if ((rule instanceof CSSContainerRule
-                || rule instanceof CSSSupportsRule
-                || rule instanceof CSSMediaRule)
-                && rule.cssRules) {
-                t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
-            }
-            if (rule instanceof CSSStyleRule) {
-                let parts = rule.selectorText.split(',');
-                let sel = "";
-                for (let p of parts) {
-                    if (p.includes(this.cssprefixConstant)) {
-                        sel += p;
-                        continue;
-                    }
-                    if (sel)
-                        sel += ',';
-                    sel += this.cssprefixConstant + p.trimStart();
-                }
-                t += sel;
-                let cssText = rule.style.cssText;
-                //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
-                if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
-                    let entr = rule.styleMap.entries();
-                    cssText = '';
-                    for (let e of entr) {
-                        cssText += e[0] + ':' + e[1].toString() + ';';
-                    }
-                }
-                t += '{' + cssText + '}';
-            }
-        }
-        return t;
-    }
 }
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -35,6 +35,6 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     canExecuteCommand(command: IUiCommand): boolean;
     initialize(serviceContainer: ServiceContainer): void;
     getHTML(designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;
-    parseHTML(html: string): Promise<void>;
+    parseHTML(html: string, disableUndo?: boolean): Promise<void>;
     static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerCanvas;
 }

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

@@ -307,7 +307,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), designItemsAssignmentList);
         return '';
     }
-    async parseHTML(html) {
+    async parseHTML(html, disableUndo = false) {
         const parserService = this.serviceContainer.htmlParserService;
         if (!html) {
             this.instanceServiceContainer.undoService.clear();
@@ -317,7 +317,12 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         }
         else {
             const designItems = await parserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
-            this._designerCanvas.setDesignItems(designItems);
+            if (disableUndo) {
+                this._designerCanvas._internalSetDesignItems(designItems);
+            }
+            else {
+                this._designerCanvas.setDesignItems(designItems);
+            }
         }
     }
     static wrapInDesigner(elements, serviceContainer) {

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

@@ -1,6 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { sleep } from '../../helper/Helper.js';
-import { DesignItem } from '../../item/DesignItem.js';
 import { NodeType } from '../../item/NodeType.js';
 export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     static style = css `
@@ -73,12 +72,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         };
         this._content.onkeydown = e => {
             if (e.key == 'Enter') {
-                const grp = this._instanceServiceContainer.selectionService.primarySelection.openGroup('set content');
-                this._instanceServiceContainer.selectionService.primarySelection.clearChildren();
-                let t = document.createTextNode(this._content.value);
-                let di = DesignItem.GetOrCreateDesignItem(t, this._instanceServiceContainer.selectionService.primarySelection.serviceContainer, this._instanceServiceContainer);
-                this._instanceServiceContainer.selectionService.primarySelection.insertAdjacentElement(di, 'afterbegin');
-                grp.commit();
+                this._instanceServiceContainer.selectionService.primarySelection.content = this._content.value;
                 this._content.title = this._content.value;
             }
             else if (e.key == 'Escape') {

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.209",
+  "version": "0.0.210",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",