@node-projects/web-component-designer 0.0.204 → 0.0.206

package/dist/elements/documentContainer.d.ts

@@ -21,7 +21,10 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     set additionalStylesheets(stylesheets: IStylesheet[]);
     get additionalStylesheets(): IStylesheet[];
     additionalStylesheetChanged: TypedEvent<{
-        stylesheet: IStylesheet;
+        name: string;
+        newStyle: string;
+        oldStyle: string;
+        changeSource: 'extern' | 'styleupdate';
     }>;
     onContentChanged: TypedEvent<void>;
     private _serviceContainer;

package/dist/elements/documentContainer.js

@@ -25,7 +25,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             if (stylesheetService) {
                 const instance = stylesheetService(this.designerView.designerCanvas);
                 this.instanceServiceContainer.register("stylesheetService", instance);
-                instance.stylesheetChanged.on(s => this.additionalStylesheetChanged.emit(s));
+                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.");

package/dist/elements/item/DesignItem.js

@@ -8,6 +8,7 @@ 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';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -328,8 +329,8 @@ export class DesignItem {
     updateStyleInSheetOrLocal(name, value, important) {
         let nm = PropertiesHelper.camelToDashCase(name);
         // Pre-sorted by specificity
-        let declerations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
-        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declerations?.length) {
+        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);
@@ -339,8 +340,8 @@ export class DesignItem {
             }
         }
         else {
-            // Set style in sheet
-            this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declerations[0], value, important);
+            const action = new StylesheetStyleChangeAction(this.instanceServiceContainer.stylesheetService, declarations[0], value, declarations[0].value);
+            this.instanceServiceContainer.undoService.execute(action);
         }
     }
     getStyleFromSheetOrLocal(name, fallback = null) {

package/dist/elements/services/placementService/GridPlacementService.js

@@ -84,12 +84,16 @@ export class GridPlacementService {
             column = 0;
             for (let cell of cellRow) {
                 if (pointInRect(pos, cell)) {
+                    //Grid Area is shorthand for grid row/column, to make undo work correctly we need to set befor and after clear
                     if (cell.name) {
+                        items[0].setStyle('grid-area', cell.name);
                         items[0].removeStyle('grid-column');
                         items[0].removeStyle('grid-row');
                         items[0].setStyle('grid-area', cell.name);
                     }
                     else {
+                        items[0].setStyle('grid-column', column + 1);
+                        items[0].setStyle('grid-row', row + 1);
                         items[0].removeStyle('grid-area');
                         items[0].setStyle('grid-column', column + 1);
                         items[0].setStyle('grid-row', row + 1);

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

@@ -3,6 +3,7 @@ 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
@@ -53,7 +54,8 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
     setValue(designItems, property, value) {
         // No selector means local style, styleDeclaration is null means new property
         if (property.styleRule?.selector !== null && property.styleDeclaration) {
-            designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(property.styleDeclaration, value, false);
+            const action = new StylesheetStyleChangeAction(designItems[0].instanceServiceContainer.stylesheetService, property.styleDeclaration, value, property.styleDeclaration.value);
+            designItems[0].instanceServiceContainer.undoService.execute(action);
             this._notifyChangedProperty(designItems[0], property, value);
             return;
         }

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

@@ -9,8 +9,12 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     abstract updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
     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;
     stylesheetChanged: TypedEvent<{
-        stylesheet: IStylesheet;
+        name: string;
+        newStyle: string;
+        oldStyle: string;
+        changeSource: 'extern' | 'styleupdate';
     }>;
     stylesheetsChanged: TypedEvent<void>;
     protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;

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

@@ -33,5 +33,6 @@ export declare class CssToolsStylesheetService extends AbstractStylesheetService
     insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     private updateStylesheet;
+    updateCompleteStylesheet(name: string, newStyle: string): void;
 }
 export {};

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

@@ -3,8 +3,26 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
     _stylesheets = new Map();
     _tools;
     async setStylesheets(stylesheets) {
-        if (stylesheets != null) {
+        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 {
@@ -98,7 +116,16 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
         return true;
     }
     updateStylesheet(ss) {
+        const old = ss.stylesheet.content;
         ss.stylesheet.content = this._tools.stringify(ss.ast, { indent: '    ', compress: false, emptyDeclarations: true });
-        this.stylesheetChanged.emit({ stylesheet: ss.stylesheet });
+        this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+    }
+    updateCompleteStylesheet(name, newStyle) {
+        const ss = this._stylesheets.get(name);
+        if (ss.stylesheet.content != newStyle) {
+            const old = ss.stylesheet.content;
+            ss.stylesheet.content = newStyle;
+            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+        }
     }
 }

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

@@ -43,6 +43,7 @@ export declare class CssTreeStylesheetService extends AbstractStylesheetService
     updateDeclarationValue(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
     insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
+    updateCompleteStylesheet(name: string, newStyle: string): void;
     private rulesFromAST;
     private astHasChildren;
     private buildSelectorString;

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

@@ -93,19 +93,21 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
     updateDeclarationValue(declaration, value, important) {
         let sourceNode = this._stylesheets.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 })));
-        this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
+        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);
         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 })));
-        this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
+        this.stylesheetChanged.emit({ name: sourceNode.stylesheet.name, newStyle: sourceNode.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
         return true;
     }
     removeDeclarationFromRule(rule, property) {
@@ -113,12 +115,22 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         if (index == -1)
             return false;
         rule.ast.block.children.splice(index, 1);
-        this._stylesheets.get(rule.stylesheetName).stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
+        const ss = this._stylesheets.get(rule.stylesheetName);
+        const old = ss.stylesheet.content;
+        ss.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
         // After generating the stylesheet, parse again (so line numbers are correct)
-        this._stylesheets.get(rule.stylesheetName).ast = window.csstree.toPlainObject((window.csstree.parse(this._stylesheets.get(rule.stylesheetName).stylesheet.content, { positions: true, parseValue: false })));
-        this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(rule.stylesheetName).stylesheet });
+        ss.ast = window.csstree.toPlainObject((window.csstree.parse(this._stylesheets.get(rule.stylesheetName).stylesheet.content, { positions: true, parseValue: false })));
+        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);
+        if (ss.stylesheet.content != newStyle) {
+            const old = ss.stylesheet.content;
+            ss.stylesheet.content = newStyle;
+            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 */
     *rulesFromAST(ast, stylesheet, source, designItem, previousCheck = '') {
         let parent = ast["children"] != null ? ast : ast.block;

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

@@ -24,8 +24,12 @@ export interface IStylesheetService {
     updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
     insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
+    updateCompleteStylesheet(name: string, newStyle: string): void;
     stylesheetChanged: TypedEvent<{
-        stylesheet: IStylesheet;
+        name: string;
+        newStyle: string;
+        oldStyle: string;
+        changeSource: 'extern' | 'styleupdate';
     }>;
     stylesheetsChanged: TypedEvent<void>;
 }

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

@@ -0,0 +1,14 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class CssStyleChangeAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, name: string, newValue: any, oldValue: any);
+    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/CssStyleChangeAction copy.js

@@ -0,0 +1,44 @@
+export class CssStyleChangeAction {
+    constructor(designItem, name, newValue, oldValue) {
+        this.title = "Change Css Style " + 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 === '' || this.oldValue == null) {
+            this.designItem._withoutUndoRemoveStyle(this.name);
+            this.designItem.element.style[this.name] = '';
+        }
+        else {
+            this.designItem._withoutUndoSetStyle(this.name, this.oldValue);
+            this.designItem.element.style[this.name] = this.oldValue;
+        }
+    }
+    do() {
+        if (this.newValue === '' || this.newValue == null) {
+            this.designItem._withoutUndoRemoveStyle(this.name);
+            this.designItem.element.style[this.name] = '';
+        }
+        else {
+            this.designItem._withoutUndoSetStyle(this.name, this.newValue);
+            this.designItem.element.style[this.name] = this.newValue;
+        }
+    }
+    designItem;
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        if (other instanceof CssStyleChangeAction && this.designItem === other.designItem && this.name === other.name) {
+            this.newValue = other.newValue;
+            return true;
+        }
+        return false;
+    }
+}

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

@@ -35,10 +35,6 @@ export class CssStyleChangeAction {
     newValue;
     oldValue;
     mergeWith(other) {
-        if (other instanceof CssStyleChangeAction && this.designItem === other.designItem && this.name === other.name) {
-            this.newValue = other.newValue;
-            return true;
-        }
         return false;
     }
 }

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

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class InsertChildAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newParent: IDesignItem;
+    newIndex: number;
+    oldParent: IDesignItem;
+    oldIndex: number;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

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

@@ -0,0 +1,37 @@
+export class InsertChildAction {
+    constructor(designItem, newParent, newIndex) {
+        this.title = "Move or Insert Item";
+        this.designItem = designItem;
+        this.newParent = newParent;
+        this.newIndex = newIndex;
+    }
+    title;
+    get affectedItems() {
+        if (this.oldParent)
+            return [this.designItem, this.newParent, this.oldParent];
+        return [this.designItem, this.newParent];
+    }
+    undo() {
+        if (this.oldParent)
+            this.oldParent._insertChildInternal(this.designItem, this.oldIndex);
+        else
+            this.designItem.parent._removeChildInternal(this.designItem);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', 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] });
+    }
+    designItem;
+    newParent;
+    newIndex;
+    oldParent;
+    oldIndex;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

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

@@ -0,0 +1,12 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class SetDesignItemsAction implements ITransactionItem {
+    constructor(newDesignItems: IDesignItem[], oldDesignItems: IDesignItem[]);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    newDesignItems: IDesignItem[];
+    oldDesignItems: IDesignItem[];
+    mergeWith(other: ITransactionItem): boolean;
+}

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

@@ -0,0 +1,22 @@
+export class SetDesignItemsAction {
+    constructor(newDesignItems, oldDesignItems) {
+        this.title = "Set all DesignItems";
+        this.newDesignItems = newDesignItems;
+        this.oldDesignItems = oldDesignItems;
+    }
+    title;
+    get affectedItems() {
+        return this.newDesignItems;
+    }
+    undo() {
+        this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.oldDesignItems);
+    }
+    do() {
+        this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.newDesignItems);
+    }
+    newDesignItems;
+    oldDesignItems;
+    mergeWith(other) {
+        return false;
+    }
+}

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

@@ -0,0 +1,14 @@
+import { IStylesheetService } from '../../stylesheetService/IStylesheetService.js';
+import { ITransactionItem } from '../ITransactionItem.js';
+export declare class StylesheetChangedAction implements ITransactionItem {
+    private stylesheetService;
+    constructor(stylesheetService: IStylesheetService, name: string, newValue: string, oldValue: string);
+    title?: string;
+    get affectedItems(): any[];
+    undo(): void;
+    do(): void;
+    name: string;
+    newValue: string;
+    oldValue: string;
+    mergeWith(other: ITransactionItem): boolean;
+}

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

@@ -0,0 +1,24 @@
+export class StylesheetChangedAction {
+    stylesheetService;
+    constructor(stylesheetService, name, newValue, oldValue) {
+        this.title = "Changed Css Stylesheet: " + name;
+        this.stylesheetService = stylesheetService;
+        this.name = name;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [];
+    }
+    undo() {
+        this.stylesheetService.updateCompleteStylesheet(this.name, this.oldValue);
+    }
+    do() {
+        this.stylesheetService.updateCompleteStylesheet(this.name, this.newValue);
+    }
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) { return false; }
+}

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

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

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

@@ -0,0 +1,28 @@
+export class StylesheetStyleChangeAction {
+    stylesheetService;
+    declaration;
+    constructor(stylesheetService, declaration, newValue, oldValue) {
+        this.title = "Change Css Style " + declaration.name + " to " + newValue;
+        this.stylesheetService = stylesheetService;
+        this.declaration = declaration;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [];
+    }
+    undo() {
+        this.stylesheetService.updateDeclarationValue(this.declaration, this.oldValue, false);
+    }
+    do() {
+        this.stylesheetService.updateDeclarationValue(this.declaration, this.newValue, false);
+    }
+    designItem;
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/widgets/codeView/code-view-ace.js

@@ -37,7 +37,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
         this.shadowRoot.appendChild(this._editor);
     }
     dispose() {
-        this._aceEditor.destroy();
+        this._aceEditor?.destroy();
     }
     executeCommand(command) {
         switch (command.type) {

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -3,7 +3,7 @@ import { CommandType } from '../../../commandHandling/CommandType.js';
 export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     static _initalized;
     dispose() {
-        this._monacoEditor.dispose();
+        this._monacoEditor?.dispose();
     }
     canvasElement;
     elementsToPackages;

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

@@ -49,6 +49,8 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
     showHoverExtension(element: Element, event: Event): any;
+    setDesignItems(designItems: IDesignItem[]): any;
+    _internalSetDesignItems(designItems: IDesignItem[]): any;
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;

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

@@ -83,6 +83,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _resizeBackgroundGrid;
     private _updateTransform;
     setDesignItems(designItems: IDesignItem[]): void;
+    _internalSetDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
     _dragOverExtensionItem: IDesignItem;
     private _onDragEnter;

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

@@ -18,6 +18,8 @@ import { OverlayLayer } from './extensions/OverlayLayer.js';
 import { OverlayLayerView } from './overlayLayerView.js';
 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';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -433,8 +435,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.servicesChanged.on(e => {
             if (e.serviceName == 'stylesheetService') {
                 this.applyAllStyles();
-                this.instanceServiceContainer.stylesheetService.stylesheetChanged.on(() => this.applyAllStyles());
-                this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => 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.extensionManager = new ExtensionManager(this);
@@ -514,8 +524,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
+        const setItemsAction = new SetDesignItemsAction(designItems, [...this.rootDesignItem.children()]);
+        this.instanceServiceContainer.undoService.execute(setItemsAction);
+    }
+    _internalSetDesignItems(designItems) {
         this._fillCalculationrects();
-        this.instanceServiceContainer.undoService.clear();
+        //this.instanceServiceContainer.undoService.clear();
         this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
         for (let i of [...this.rootDesignItem.children()])

package/dist/index.d.ts

@@ -116,6 +116,9 @@ export * from "./elements/services/undoService/transactionItems/CssStyleChangeAc
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
+export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
+export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
+export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export type { IService } from "./elements/services/IService.js";

package/dist/index.js

@@ -80,6 +80,9 @@ export * from "./elements/services/undoService/transactionItems/CssStyleChangeAc
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
+export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
+export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
+export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export * from "./elements/services/ServiceContainer.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.204",
+  "version": "0.0.206",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -25,7 +25,7 @@
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^18.14.0",
+    "@types/node": "^18.14.2",
     "ace-builds": "^1.15.2",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
@@ -35,7 +35,7 @@
     "jquery": "^3.6.3",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.31",
-    "monaco-editor": "^0.35.0",
+    "monaco-editor": "^0.36.1",
     "ts-jest": "^29.0.5",
     "typescript": "^4.9.5",
     "typescript-lit-html-plugin": "^0.9.0"