@node-projects/web-component-designer 0.0.203 → 0.0.205

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) {
@@ -373,10 +374,13 @@ export class DesignItem {
             return [];
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
         if (this.instanceServiceContainer.stylesheetService) {
-            const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
-            if (rules) {
-                return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+            try {
+                const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
+                if (rules) {
+                    return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+                }
             }
+            catch (err) { }
         }
         return [{ selector: null, declarations: localStyles, specificity: -1 }];
     }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -102,7 +102,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
     serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
-    serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas));
+    serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
     serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
     //serviceContainer.register("stylesheetService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [

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/selectionService/SelectionService.d.ts

@@ -7,7 +7,8 @@ export declare class SelectionService implements ISelectionService {
     primarySelection: IDesignItem;
     selectedElements: IDesignItem[];
     _designerCanvas: IDesignerCanvas;
-    constructor(designerCanvas: IDesignerCanvas);
+    _undoSelectionChanges: boolean;
+    constructor(designerCanvas: IDesignerCanvas, undoSelectionChanges: boolean);
     setSelectedElements(designItems: IDesignItem[]): void;
     _withoutUndoSetSelectedElements(designItems: IDesignItem[]): void;
     clearSelectedElements(): void;

package/dist/elements/services/selectionService/SelectionService.js

@@ -4,13 +4,20 @@ export class SelectionService {
     primarySelection;
     selectedElements = [];
     _designerCanvas;
-    constructor(designerCanvas) {
+    _undoSelectionChanges;
+    constructor(designerCanvas, undoSelectionChanges) {
         this._designerCanvas = designerCanvas;
+        this._undoSelectionChanges = undoSelectionChanges;
     }
     setSelectedElements(designItems) {
         if (this.selectedElements != designItems) {
-            const action = new SelectionChangedAction(this.selectedElements, designItems, this);
-            this._designerCanvas.instanceServiceContainer.undoService.execute(action);
+            if (this._undoSelectionChanges) {
+                const action = new SelectionChangedAction(this.selectedElements, designItems, this);
+                this._designerCanvas.instanceServiceContainer.undoService.execute(action);
+            }
+            else {
+                this._withoutUndoSetSelectedElements(designItems);
+            }
         }
     }
     _withoutUndoSetSelectedElements(designItems) {

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

@@ -1,9 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
 import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
-type CssRuleAST = any;
-type CssDeclarationAST = any;
-type CssStylesheetAST = any;
+import type { CssDeclarationAST, CssRuleAST, CssStylesheetAST } from "@adobe/css-tools";
 interface IRuleWithAST extends IStyleRule {
     ast: CssRuleAST;
     declarations: IDeclarationWithAST[];
@@ -35,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 {
@@ -39,7 +57,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
             let rs = Array.from(this.getRulesFromAst(item[1].ast?.stylesheet?.rules, item[1].stylesheet, designItem))
                 .map(x => ({
                 selector: x.selectors.join(', '),
-                declarations: x.declarations.map(y => ({
+                declarations: x.declarations.filter(y => y.type == 'declaration').map(y => ({
                     name: y.property,
                     value: y.value.endsWith('!important') ? y.value.substring(0, y.value.length - 10).trimEnd() : y.value,
                     important: y.value.endsWith('!important'),
@@ -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/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/designerCanvas.js

@@ -18,6 +18,7 @@ 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';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -433,8 +434,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);
@@ -689,8 +698,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 di.setStyle('position', 'absolute');
                 const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
                 containerService.enterContainer(newContainer, [di]);
-                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, this.getNormalizedEventCoordinates(event), [di]);
-                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, this.getNormalizedEventCoordinates(event), [di]);
+                const containerPos = this.getNormalizedElementCoordinates(newContainer.element);
+                const evCoord = this.getNormalizedEventCoordinates(event);
+                const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
+                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
                 this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
                 requestAnimationFrame(() => {
                     this.instanceServiceContainer.selectionService.setSelectedElements([di]);

package/dist/index.d.ts

@@ -116,6 +116,8 @@ 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/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export type { IService } from "./elements/services/IService.js";

package/dist/index.js

@@ -80,6 +80,8 @@ 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/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.203",
+  "version": "0.0.205",
   "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"