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

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

@@ -76,7 +76,9 @@ 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, fallback?: string): string;
+    getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): string;
+    getComputedStyle(name: string, fallback?: string): string;
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -7,6 +7,7 @@ import { PropertiesHelper } from '../services/propertiesService/services/Propert
 import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js';
 import { DomConverter } from '../widgets/designerView/DomConverter.js';
 import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
+import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.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';
@@ -304,9 +305,9 @@ 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) {
+        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declerations) {
             // Set style locally
             if (this.getStyle(nm) != value) {
                 this.setStyle(nm, value);
@@ -320,7 +321,30 @@ export class DesignItem {
             this.instanceServiceContainer.stylesheetService.updateDeclarationWithDeclaration(declerations[0], value, important);
         }
     }
-    getStyleFromSheetOrLocal(name) {
+    getStyleFromSheetOrLocal(name, fallback = null) {
+        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;
+    }
+    getStyleFromSheetOrLocalOrComputed(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
+    }
+    getComputedStyle(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
     }
     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,8 @@ 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, fallback?: string): any;
+    getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): any;
     getAllStyles(): IStyleRule[];
     attributes(): Iterable<[name: string, value: string]>;
     getAttribute(name: string): any;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -44,8 +44,8 @@ import { DragDropService } from './dragDropService/DragDropService.js';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService.js';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js';
-import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider.js';
-import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.js';
+import { ButtonSeperatorProvider } from '../widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js';
 import { DemoProviderService } from './demoProviderService/DemoProviderService.js';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
@@ -70,11 +70,12 @@ import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/sv
 import { PropertyTabsService } from './propertiesService/PropertyTabsService.js';
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
-import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js';
-import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js';
+import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js';
+import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js';
 import { UndoService } from './undoService/UndoService.js';
 import { SelectionService } from './selectionService/SelectionService.js';
 import { ContentService } from './contentService/ContentService.js';
+import { StylesheetServiceDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -161,7 +162,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

package/dist/elements/services/ServiceContainer.d.ts

@@ -22,7 +22,7 @@ import { IDragDropService } from './dragDropService/IDragDropService.js';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
-import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesignViewConfigButtonsProvider.js";
+import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js";
 import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js";
 import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";

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

@@ -4,6 +4,7 @@ import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { ValueType } from '../ValueType.js';
 export declare class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     constructor();
@@ -14,4 +15,16 @@ export declare class CssCurrentPropertiesService extends CommonPropertiesService
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;
     }), value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): void;
+    getValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): any;
+    isSet(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): ValueType;
 }

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

@@ -2,6 +2,8 @@ import { PropertyType } from '../PropertyType.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import cssProperties from './CssProperties.json' assert { type: 'json' };
+import { ValueType } from '../ValueType.js';
+const localName = '<local>';
 export class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.fullOnValueChange;
@@ -21,7 +23,7 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
             return [];
         let styles = designItem.getAllStyles();
         let arr = styles.map(x => ({
-            name: x.selector ?? '<local>', description: x.stylesheetName ?? '', properties: [
+            name: x.selector ?? localName, description: x.stylesheetName ?? '', properties: [
                 ...x.declarations.map(y => ({
                     name: y.name,
                     renamable: true,
@@ -50,4 +52,25 @@ 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);
+    }
+    getValue(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration)
+            return property.styleDeclaration.value;
+        return super.getValue(designItems, property);
+    }
+    isSet(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration) {
+            if (designItems[0].hasStyle(property.name))
+                return ValueType.none;
+            //TODO: we need to check if this is the dec. with the highest specifity
+            return ValueType.all;
+        }
+        return super.isSet(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/GridExtension.js

@@ -310,7 +310,7 @@ export class GridExtension extends AbstractExtension {
     _convertCssUnit(cssValue, target, percentTarget, unit) {
         if (unit == "fr") {
             let containerSize = convertCssUnitToPixel(target.style.width, target, percentTarget);
-            let amountGaps = percentTarget == "width" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
+            let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
             let gapSize = convertCssUnitToPixel(percentTarget == "width" ? target.style.columnGap : target.style.rowGap, target, percentTarget);
             let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
             let amountFrSizes = 0;

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/dist/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.d.ts

@@ -0,0 +1,12 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem.js";
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class AbstractDesignViewConfigButton implements IDesignViewConfigButtonsProvider {
+    protected settingName: any;
+    private content;
+    private tooltp;
+    private contextmenu;
+    constructor(settingName: string, content: string | HTMLElement, tooltip: string, contextmenu?: IContextMenuItem[]);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js

@@ -0,0 +1,40 @@
+import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js";
+export class AbstractDesignViewConfigButton {
+    settingName;
+    content;
+    tooltp;
+    contextmenu;
+    constructor(settingName, content, tooltip, contextmenu) {
+        this.settingName = settingName;
+        this.content = content;
+        this.tooltp = tooltip;
+        this.contextmenu = contextmenu;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const btn = document.createElement('div');
+        if (typeof this.content == 'string')
+            btn.innerHTML = this.content;
+        else
+            btn.appendChild(this.content);
+        btn.title = this.tooltp;
+        btn.className = 'toolbar-control';
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        if (extensionOptions[this.settingName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[this.settingName];
+            extensionOptions[this.settingName] = val === false ? true : false;
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        btn.oncontextmenu = (e) => {
+            e.preventDefault();
+            if (this.contextmenu) {
+                ContextMenu.show(this.contextmenu, e);
+            }
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.d.ts

@@ -0,0 +1,8 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class FlexboxExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js

@@ -0,0 +1,22 @@
+import { flexboxExtensionShowOverlayOptionName } from "../FlexboxExtensionProvider.js";
+export class FlexboxExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'F';
+        btn.title = 'show flexbox overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[flexboxExtensionShowOverlayOptionName];
+            extensionOptions[flexboxExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js

@@ -0,0 +1,22 @@
+import { gridExtensionShowOverlayOptionName } from "../GridExtensionProvider.js";
+export class GridExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.d.ts

@@ -0,0 +1,5 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+export interface IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class InvisibleElementExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js

@@ -0,0 +1,22 @@
+import { invisibleElementExtensionShowOverlayOptionName } from "../InvisibleElementExtensionProvider.js";
+export class InvisibleElementExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'I';
+        btn.title = 'show invisible div overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[invisibleElementExtensionShowOverlayOptionName];
+            extensionOptions[invisibleElementExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts

@@ -0,0 +1,7 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "../../IDesignViewConfigButtonsProvider.js";
+export declare const disableStylesheetService = "disableStylesheetService";
+export declare class StylesheetServiceDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js

@@ -0,0 +1,21 @@
+export const disableStylesheetService = 'disableStylesheetService';
+export class StylesheetServiceDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[disableStylesheetService] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[disableStylesheetService];
+            extensionOptions[disableStylesheetService] = val === false ? true : false;
+            if (extensionOptions[disableStylesheetService] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.d.ts

@@ -0,0 +1,5 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare const enableStylesheetService = "enableStylesheetService";
+export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export const enableStylesheetService = 'enableStylesheetService';
+export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(enableStylesheetService, "ss", "modify Stylesheet");
+    }
+}

package/dist/index.d.ts

@@ -167,7 +167,6 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
@@ -176,7 +175,6 @@ export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
@@ -193,6 +191,13 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js";
+export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
+export type { IDesignViewConfigButtonsProvider } from "./elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";

package/dist/index.js

@@ -122,7 +122,6 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
@@ -131,7 +130,6 @@ export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
@@ -148,6 +146,12 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js";
+export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";

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.173",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",