@node-projects/web-component-designer 0.0.171 → 0.0.172

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

@@ -76,7 +76,7 @@ export declare class DesignItem implements IDesignItem {
     setStyle(name: string, value?: string | null, important?: boolean): void;
     removeStyle(name: string): void;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): void;
-    getStyleFromSheetOrLocal(name: string): void;
+    getStyleFromSheetOrLocal(name: string): string;
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -304,7 +304,7 @@ export class DesignItem {
     }
     updateStyleInSheetOrLocal(name, value, important) {
         let nm = PropertiesHelper.camelToDashCase(name);
-        // Pre-sorted by priority
+        // Pre-sorted by specificity
         let declerations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
         if (this.hasStyle(name) || !declerations) {
             // Set style locally
@@ -321,6 +321,15 @@ export class DesignItem {
         }
     }
     getStyleFromSheetOrLocal(name) {
+        let nm = PropertiesHelper.camelToDashCase(name);
+        if (this.hasStyle(name))
+            // Get style locally
+            return this.getStyle(nm);
+        // Pre-sorted by specificity
+        let decls = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (decls && decls.length > 0)
+            return decls[0].value;
+        return null;
     }
     getAllStyles() {
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false }));

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

@@ -55,6 +55,7 @@ export interface IDesignItem {
     setStyle(name: string, value?: string | null, important?: boolean): any;
     removeStyle(name: string): any;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): any;
+    getStyleFromSheetOrLocal(name: string): any;
     getAllStyles(): IStyleRule[];
     attributes(): Iterable<[name: string, value: string]>;
     getAttribute(name: string): any;

package/dist/elements/services/copyPasteService/CopyPasteService.js

@@ -3,9 +3,9 @@ export const positionsJsonMime = 'web text/positions';
 export class CopyPasteService {
     async copyItems(designItems) {
         const copyText = DomConverter.ConvertToString(designItems, null, false);
-        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
-        const data = [new ClipboardItem({ ["text/html"]: new Blob([copyText], { type: 'text/html' }), [positionsJsonMime]: new Blob([JSON.stringify(positions)], { type: positionsJsonMime }) })];
         try {
+            const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
+            const data = [new ClipboardItem({ ["text/html"]: new Blob([copyText], { type: 'text/html' }), [positionsJsonMime]: new Blob([JSON.stringify(positions)], { type: positionsJsonMime }) })];
             await navigator.clipboard.write(data);
         }
         catch (err) {

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

@@ -116,8 +116,8 @@ export class AbstractPropertiesService {
         if (designItems != null && designItems.length !== 0) {
             if (property.propertyType == PropertyType.cssValue) {
                 let lastValue = designItems[0].getStyle(property.name);
-                for (const x of designItems) {
-                    let value = x.getStyle(property.name);
+                for (const d of designItems) {
+                    let value = d.getStyle(property.name);
                     if (value != lastValue) {
                         lastValue = null;
                         break;

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.d.ts

@@ -14,4 +14,8 @@ export declare class CssCurrentPropertiesService extends CommonPropertiesService
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;
     }), value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): void;
 }

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

@@ -50,4 +50,11 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
         // Local style
         super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
     }
+    clearValue(designItems, property) {
+        if (property.styleRule?.selector !== null && property.styleDeclaration) {
+            designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration);
+            return;
+        }
+        super.clearValue(designItems, property);
+    }
 }

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

@@ -10,7 +10,7 @@ export class CssToolsStylesheetService {
             for (let stylesheet of stylesheets) {
                 this._stylesheets.set(stylesheet.name, {
                     stylesheet: stylesheet,
-                    ast: tools.parse(stylesheet.stylesheet)
+                    ast: tools.parse(stylesheet.content)
                 });
             }
             this.stylesheetsChanged.emit();

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

@@ -11,7 +11,7 @@ export class CssTreeStylesheetService {
             for (let stylesheet of stylesheets) {
                 this._stylesheets.set(stylesheet.name, {
                     stylesheet: stylesheet,
-                    ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.stylesheet, { positions: true, parseValue: false })))
+                    ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.content, { positions: true, parseValue: false })))
                 });
             }
             this.stylesheetsChanged.emit();
@@ -34,7 +34,7 @@ export class CssTreeStylesheetService {
         for (let item of this._stylesheets) {
             if (!item[1].ast || !this.astHasChildren(item[1].ast))
                 continue;
-            styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.stylesheet, item[0], designItem)));
+            styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.content, item[0], designItem)));
         }
         ;
         return styles;
@@ -89,17 +89,21 @@ export class CssTreeStylesheetService {
     }
     /* Section covers the update of rules and declarations */
     updateDeclarationWithDeclaration(declaration, value, important) {
-        declaration.ast.value = window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + value, { context: 'declaration', parseValue: false })).value;
-        this._stylesheets.get(declaration.parent.stylesheetName).stylesheet.stylesheet = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(declaration.parent.stylesheetName).ast));
-        this._stylesheets.get(declaration.parent.stylesheetName).ast = window.csstree.toPlainObject(window.csstree.fromPlainObject(this._stylesheets.get(declaration.parent.stylesheetName).ast));
-        this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(declaration.parent.stylesheetName).stylesheet });
+        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;
+        sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
+        // After generating the stylesheet, the AST has to be transformed back into a plain object
+        sourceNode.ast = window.csstree.toPlainObject(sourceNode.ast);
+        this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
         return true;
     }
     insertDeclarationIntoRule(rule, declaration, important) {
-        rule.ast.block.children.push(window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + declaration.value + (declaration.important ? "!important" : ""), { context: 'declaration', parseValue: false })));
-        this._stylesheets.get(rule.stylesheetName).stylesheet.stylesheet = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
-        this._stylesheets.get(rule.stylesheetName).ast = window.csstree.toPlainObject(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
-        this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(rule.stylesheetName).stylesheet });
+        let sourceNode = this._stylesheets.get(rule.stylesheetName);
+        rule.ast.block.children.push(window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + declaration.value + (declaration.important ? " !important" : ""), { context: 'declaration', parseValue: false })));
+        sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
+        // After generating the stylesheet, the AST has to be transformed back into a plain object
+        sourceNode.ast = window.csstree.toPlainObject(sourceNode.ast);
+        this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
         return true;
     }
     removeDeclarationFromRule(rule, declaration) {
@@ -107,7 +111,7 @@ export class CssTreeStylesheetService {
         if (index == -1)
             return false;
         rule.ast.block.children.splice(index, 1);
-        this._stylesheets.get(rule.stylesheetName).stylesheet.stylesheet = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
+        this._stylesheets.get(rule.stylesheetName).stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
         this._stylesheets.get(rule.stylesheetName).ast = window.csstree.toPlainObject(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
         this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(rule.stylesheetName).stylesheet });
         return true;

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

@@ -12,7 +12,7 @@ export interface IStyleDeclaration {
     important: boolean;
 }
 export interface IStylesheet {
-    stylesheet: string;
+    content: string;
     name: string;
 }
 export interface IStylesheetService {

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

@@ -59,6 +59,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     extensionManager: IExtensionManager;
     private _pointerextensions;
     private _onDblClickBound;
+    private _lastCopiedPrimaryItem;
     constructor();
     get designerWidth(): string;
     set designerWidth(value: string);

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

@@ -163,6 +163,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     extensionManager;
     _pointerextensions;
     _onDblClickBound;
+    _lastCopiedPrimaryItem;
     constructor() {
         super();
         this._restoreCachedInititalValues();
@@ -219,7 +220,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (this.instanceServiceContainer.stylesheetService) {
             styles.push(...this.instanceServiceContainer.stylesheetService
                 .getStylesheets()
-                .map(x => cssFromString(this.buildPatchedStyleSheet([cssFromString(x.stylesheet)]))));
+                .map(x => cssFromString(this.buildPatchedStyleSheet([cssFromString(x.content)]))));
         }
         this.shadowRoot.adoptedStyleSheets = styles;
     }
@@ -365,13 +366,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
     }
     async handleCopyCommand() {
+        this._lastCopiedPrimaryItem = this.instanceServiceContainer.selectionService.primarySelection;
         await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand(disableRestoreOfPositions) {
         const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
         let pasteContainer = this.rootDesignItem;
-        let pCon = this.instanceServiceContainer.selectionService.primarySelection;
+        let pCon = this._lastCopiedPrimaryItem?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
         while (pCon != null) {
             const containerStyle = getComputedStyle(pCon.element);
             let newContainerService;
@@ -420,8 +422,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (undoService)
             this.instanceServiceContainer.register("undoService", undoService(this));
         const selectionService = this.serviceContainer.getLastService('selectionService');
-        if (selectionService)
+        if (selectionService) {
             this.instanceServiceContainer.register("selectionService", selectionService(this));
+            this.instanceServiceContainer.selectionService.onSelectionChanged.on(() => {
+                this._lastCopiedPrimaryItem = null;
+            });
+        }
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         const contentService = this.serviceContainer.getLastService('contentService');
         if (contentService)

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

@@ -23,8 +23,9 @@ export class TransformOriginExtension extends AbstractExtension {
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window
-        if (this.extendedItem.getStyle('transform-origin')) {
-            this._oldValue = this.extendedItem.getStyle('transform-origin');
+        let old = this.extendedItem.getStyleFromSheetOrLocal('transform-origin');
+        if (old) {
+            this._oldValue = old;
         }
     }
     pointerEvent(event) {
@@ -69,14 +70,14 @@ export class TransformOriginExtension extends AbstractExtension {
                             if (oldSplit.length > 1) {
                                 newYs = convertCssUnit(newY, this.extendedItem.element, 'height', getCssUnit(oldSplit[1]));
                             }
-                            this.extendedItem.setStyle('transform-origin', newXs + ' ' + newYs);
+                            this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newXs + ' ' + newYs);
                         }
                         catch (err) {
-                            this.extendedItem.setStyle('transform-origin', newX + 'px' + ' ' + newY + 'px');
+                            this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newX + 'px' + ' ' + newY + 'px');
                         }
                     }
                     else
-                        this.extendedItem.setStyle('transform-origin', newX + 'px' + ' ' + newY + 'px');
+                        this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newX + 'px' + ' ' + newY + 'px');
                     this.refresh();
                     this._startPos = null;
                 }

package/package.json

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