@node-projects/web-component-designer 0.0.175 → 0.0.177

package/dist/elements/item/DesignItem.js

@@ -314,7 +314,7 @@ export class DesignItem {
         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) {
+        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declerations?.length) {
             // Set style locally
             if (this.getStyle(nm) != value) {
                 this.setStyle(nm, value);
@@ -325,7 +325,7 @@ export class DesignItem {
         }
         else {
             // Set style in sheet
-            this.instanceServiceContainer.stylesheetService.updateDeclarationWithDeclaration(declerations[0], value, important);
+            this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declerations[0], value, important);
         }
     }
     getStyleFromSheetOrLocal(name, fallback = null) {
@@ -354,7 +354,7 @@ export class DesignItem {
         return value ?? fallback;
     }
     getAllStyles() {
-        const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false }));
+        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) {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -76,6 +76,7 @@ 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';
+import { JumpToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -169,6 +170,7 @@ export function createDefaultServiceContainer() {
         new SeperatorContextMenu(),
         new RotateLeftAndRight(),
         new SeperatorContextMenu(),
+        new JumpToElementContextMenu(),
         new ZoomToElementContextMenu(),
         new SeperatorContextMenu(),
         new ZMoveContextMenu(),

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -29,6 +29,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
     }
     internalWrite(indentedTextWriter, designItem, options, designItemsAssignmentList) {
         let start = indentedTextWriter.position;
+        let end = indentedTextWriter.position;
         if (designItem.nodeType == NodeType.TextNode) {
             if (isEmptyTextNode(designItem.element) &&
                 ((designItem.element.previousSibling instanceof HTMLElement && !isInlineAfter(designItem.element.previousSibling)) ||
@@ -36,14 +37,18 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             }
             else
                 this.writeTextNode(indentedTextWriter, designItem, true);
+            end = indentedTextWriter.position;
         }
         else if (designItem.nodeType == NodeType.Comment) {
             this._conditionalyWriteIndent(indentedTextWriter, designItem);
+            start = indentedTextWriter.position;
             indentedTextWriter.write('<!--' + designItem.content + '-->');
+            end = indentedTextWriter.position;
             this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         else {
             this._conditionalyWriteIndentBefore(indentedTextWriter, designItem);
+            start = indentedTextWriter.position;
             indentedTextWriter.write('<' + designItem.name);
             this.writeAttributes(indentedTextWriter, designItem, options);
             this.writeStyles(indentedTextWriter, designItem, options);
@@ -79,14 +84,16 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                 indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
                 //this._conditionalyWriteNewline(indentedTextWriter, designItem);
             }
+            end = indentedTextWriter.position;
             if (!DomConverter.IsSelfClosingElement(designItem.name))
                 indentedTextWriter.write('</' + designItem.name + '>');
+            end = indentedTextWriter.position;
             //if (!contentSingleTextNode)
             if (!indentedTextWriter.isLastCharNewline() && (!designItem.parent || !isInlineAfter(designItem.parent.element)))
                 this._conditionalyWriteNewline(indentedTextWriter, designItem);
         }
         if (designItemsAssignmentList) {
-            designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });
+            designItemsAssignmentList.set(designItem, { start: start, length: end - start });
         }
     }
     writeTextNode(indentedTextWriter, designItem, indentAndNewline) {

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

@@ -23,6 +23,10 @@ export declare class CssCurrentPropertiesService extends CommonPropertiesService
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;
     }): any;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): any;
     isSet(designItems: IDesignItem[], property: IProperty & {
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;

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

@@ -42,19 +42,26 @@ 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.updateDeclarationWithDeclaration(property.styleDeclaration, value, false);
+            designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(property.styleDeclaration, value, false);
+            this._notifyChangedProperty(designItems[0], property, value);
             return;
         }
         if (property.styleRule?.selector !== null && !property.styleDeclaration) {
-            designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, { name: property.name, value: value, important: false }, false);
+            designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, property.name, value, false);
+            this._notifyChangedProperty(designItems[0], property, value);
             return;
         }
-        // Local style
-        super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+        for (const d of designItems) {
+            // Local style
+            d.setStyle(property.name, value);
+            //unkown css property names do not trigger the mutation observer of property grid, 
+            //fixed by assinging stle again to the attribute
+            d.element.setAttribute('style', d.element.getAttribute('style'));
+        }
     }
     clearValue(designItems, property) {
         if (property.styleRule?.selector !== null && property.styleDeclaration) {
-            designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration);
+            designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration.name);
             return;
         }
         super.clearValue(designItems, property);
@@ -64,6 +71,11 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
             return property.styleDeclaration.value;
         return super.getValue(designItems, property);
     }
+    getUnsetValue(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration)
+            return property.styleDeclaration.value;
+        return super.getUnsetValue(designItems, property);
+    }
     isSet(designItems, property) {
         if (property.styleRule?.selector && property.styleDeclaration) {
             if (designItems[0].hasStyle(property.name))

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

@@ -3,6 +3,7 @@ import { PropertyType } from '../PropertyType.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import cssProperties from './CssProperties.json' assert { type: 'json' };
+import { PropertiesHelper } from './PropertiesHelper.js';
 export class CssPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.none;
@@ -57,13 +58,16 @@ export class CssPropertiesService extends CommonPropertiesService {
     }
     getProperties(designItem) {
         const propNames = this[this.name];
-        const propertiesList = propNames.map(x => ({
-            name: x,
-            type: cssProperties[x]?.type ?? 'string',
-            values: cssProperties[x]?.values ? [...cssProperties[x]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
-            service: this,
-            propertyType: PropertyType.cssValue
-        }));
+        const propertiesList = propNames.map(x => {
+            const camelName = PropertiesHelper.dashToCamelCase(x);
+            return {
+                name: x,
+                type: cssProperties[camelName]?.type ?? 'string',
+                values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+                service: this,
+                propertyType: PropertyType.cssValue
+            };
+        });
         return propertiesList;
     }
     getPropertyTarget(designItem, property) {

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

@@ -0,0 +1,17 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { IDesignItem } from "../../item/IDesignItem";
+import { IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService";
+export declare abstract class AbstractStylesheetService implements IStylesheetService {
+    abstract setStylesheets(stylesheets: IStylesheet[]): void;
+    abstract getStylesheets(): IStylesheet[];
+    abstract getAppliedRules(designItem: IDesignItem): IStyleRule[];
+    abstract getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
+    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;
+    stylesheetChanged: TypedEvent<{
+        stylesheet: IStylesheet;
+    }>;
+    stylesheetsChanged: TypedEvent<void>;
+    protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;
+}

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

@@ -0,0 +1,11 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+export class AbstractStylesheetService {
+    stylesheetChanged = new TypedEvent();
+    stylesheetsChanged = new TypedEvent();
+    elementMatchesASelector(designItem, selectors) {
+        for (const selector of selectors)
+            if (designItem.element.matches(selector))
+                return true;
+        return false;
+    }
+}

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

@@ -1,17 +1,37 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService.js";
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-export declare class CssToolsStylesheetService implements IStylesheetService {
+import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
+import type { CssDeclarationAST, CssRuleAST, CssStylesheetAST } from "@adobe/css-tools";
+import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
+interface IRuleWithAST extends IStyleRule {
+    ast: CssRuleAST;
+    declarations: IDeclarationWithAST[];
+    stylesheet: IStylesheet;
+    stylesheetName: string;
+}
+interface IDeclarationWithAST extends IStyleDeclaration {
+    ast: CssDeclarationAST;
+}
+export declare class CssToolsStylesheetService extends AbstractStylesheetService {
     private _stylesheets;
-    stylesheetChanged: TypedEvent<{
-        stylesheet: IStylesheet;
-    }>;
-    stylesheetsChanged: TypedEvent<void>;
+    _tools: {
+        parse: (css: string, options?: {
+            source?: string;
+            silent?: boolean;
+        }) => CssStylesheetAST;
+        stringify: (node: CssStylesheetAST, options?: {
+            indent?: string;
+            compress?: boolean;
+            emptyDeclarations?: boolean;
+        }) => string;
+    };
     setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
     getStylesheets(): IStylesheet[];
-    getAppliedRules(designItem: IDesignItem): IStyleRule[];
+    getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
+    private getRulesFromAst;
     getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
-    updateDeclarationWithDeclaration(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
-    insertDeclarationIntoRule(rule: IStyleRule, declaration: IStyleDeclaration, important: boolean): boolean;
-    removeDeclarationFromRule(rule: IStyleRule, declaration: IStyleDeclaration): boolean;
+    updateDeclarationValue(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
+    private updateStylesheet;
 }
+export {};

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

@@ -1,17 +1,21 @@
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-export class CssToolsStylesheetService {
+import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
+export class CssToolsStylesheetService extends AbstractStylesheetService {
     _stylesheets = new Map();
-    stylesheetChanged = new TypedEvent();
-    stylesheetsChanged = new TypedEvent();
+    _tools;
     async setStylesheets(stylesheets) {
         if (stylesheets != null) {
-            let tools = await import('@adobe/css-tools');
+            this._tools = await import('@adobe/css-tools');
             this._stylesheets = new Map();
             for (let stylesheet of stylesheets) {
-                this._stylesheets.set(stylesheet.name, {
-                    stylesheet: stylesheet,
-                    ast: tools.parse(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.stylesheetsChanged.emit();
         }
@@ -28,18 +32,73 @@ export class CssToolsStylesheetService {
         return stylesheets;
     }
     getAppliedRules(designItem) {
+        let rules = [];
+        for (let item of this._stylesheets.entries()) {
+            if (!item[1].ast?.stylesheet?.rules)
+                continue;
+            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 => ({
+                    name: y.property,
+                    value: y.value.endsWith('!important') ? y.value.substring(0, y.value.length - 10).trimEnd() : y.value,
+                    important: y.value.endsWith('!important'),
+                    parent: null,
+                    ast: y,
+                })),
+                specificity: 0,
+                stylesheetName: item[0],
+                ast: x,
+            }));
+            rs.forEach(x => x.declarations.forEach(y => y.parent = x));
+            rules.push(...rs);
+        }
+        ;
+        return rules;
+    }
+    *getRulesFromAst(cssAtRuleAst, stylesheet, designItem) {
+        for (const atRule of cssAtRuleAst) {
+            if (atRule.type == 'media') {
+                yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem);
+            }
+            else if (atRule.type == 'supports') {
+                yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem);
+            }
+            else if (atRule.type == 'rule') {
+                if (this.elementMatchesASelector(designItem, atRule.selectors))
+                    yield atRule;
+            }
+        }
         return null;
     }
     getDeclarations(designItem, styleName) {
-        return null;
+        return this.getAppliedRules(designItem).flatMap(x => x.declarations).filter(x => x.name == styleName);
     }
-    updateDeclarationWithDeclaration(declaration, value, important) {
+    updateDeclarationValue(declaration, value, important) {
+        declaration.ast.value = important ? value + ' !important' : value;
+        let ss = this._stylesheets.get(declaration.parent.stylesheetName);
+        this.updateStylesheet(ss);
         return true;
     }
-    insertDeclarationIntoRule(rule, declaration, important) {
+    insertDeclarationIntoRule(rule, property, value, important) {
+        rule.ast.declarations.push({
+            type: 'declaration',
+            property: property,
+            value: important ? value + ' !important' : value
+        });
+        this.updateStylesheet(this._stylesheets.get(rule.stylesheetName));
         return true;
     }
-    removeDeclarationFromRule(rule, declaration) {
+    removeDeclarationFromRule(rule, property) {
+        let idx = rule.ast.declarations.findIndex(x => x.property == property);
+        if (idx == -1)
+            return false;
+        rule.ast.declarations.splice(idx, 1);
+        this.updateStylesheet(this._stylesheets.get(rule.stylesheetName));
         return true;
     }
+    updateStylesheet(ss) {
+        ss.stylesheet.content = this._tools.stringify(ss.ast, { indent: '    ', compress: false, emptyDeclarations: true });
+        this.stylesheetChanged.emit({ stylesheet: ss.stylesheet });
+    }
 }

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

@@ -1,7 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService.js";
+import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
 import type * as csstree from 'css-tree';
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
 declare global {
     interface Window {
         csstree: {
@@ -18,30 +18,23 @@ interface IRuleWithAST extends IStyleRule {
 }
 interface IDeclarationWithAST extends IStyleDeclaration {
     ast: csstree.DeclarationPlain;
-    parent: IStyleRule;
 }
-export declare class CssTreeStylesheetService implements IStylesheetService {
+export declare class CssTreeStylesheetService extends AbstractStylesheetService {
     private _stylesheets;
-    stylesheetChanged: TypedEvent<{
-        stylesheet: IStylesheet;
-    }>;
-    stylesheetsChanged: TypedEvent<void>;
-    constructor();
     setStylesheets(stylesheets: IStylesheet[]): void;
     getStylesheets(): IStylesheet[];
     private getAppliedRulesInternal;
     getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
     private getDeclarationInternal;
     getDeclarations(designItem: IDesignItem, stlyeName: string): IDeclarationWithAST[];
-    updateDeclarationWithDeclaration(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
-    insertDeclarationIntoRule(rule: IRuleWithAST, declaration: IStyleDeclaration, important: boolean): boolean;
-    removeDeclarationFromRule(rule: IRuleWithAST, declaration: IDeclarationWithAST): boolean;
+    updateDeclarationValue(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     private rulesFromAST;
     private astHasChildren;
     private buildSelectorString;
     private getSpecificity;
     private findDeclarationInRule;
-    private elementMatchesASelector;
     private buildAtRuleString;
     private sortDeclarations;
 }

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

@@ -1,18 +1,20 @@
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
-export class CssTreeStylesheetService {
+import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
+export class CssTreeStylesheetService extends AbstractStylesheetService {
     _stylesheets = new Map();
-    stylesheetChanged = new TypedEvent();
-    stylesheetsChanged = new TypedEvent();
-    constructor() { }
     setStylesheets(stylesheets) {
         if (stylesheets != null) {
             this._stylesheets = new Map();
             for (let stylesheet of stylesheets) {
-                this._stylesheets.set(stylesheet.name, {
-                    stylesheet: stylesheet,
-                    ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.content, { positions: true, parseValue: false })))
-                });
+                try {
+                    this._stylesheets.set(stylesheet.name, {
+                        stylesheet: stylesheet,
+                        ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.content, { positions: true, parseValue: false })))
+                    });
+                }
+                catch (err) {
+                    console.warn("error parsing stylesheet", stylesheet, err);
+                }
             }
             this.stylesheetsChanged.emit();
         }
@@ -88,7 +90,7 @@ export class CssTreeStylesheetService {
         return this.sortDeclarations(declarations);
     }
     /* Section covers the update of rules and declarations */
-    updateDeclarationWithDeclaration(declaration, value, important) {
+    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;
         sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
@@ -97,17 +99,17 @@ export class CssTreeStylesheetService {
         this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
         return true;
     }
-    insertDeclarationIntoRule(rule, declaration, important) {
+    insertDeclarationIntoRule(rule, property, value, important) {
         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 })));
+        rule.ast.block.children.push(window.csstree.toPlainObject(window.csstree.parse(property + ": " + value + (important ? " !important" : ""), { context: 'declaration', parseValue: false })));
         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 });
         return true;
     }
-    removeDeclarationFromRule(rule, declaration) {
-        let index = rule.ast.block.children.indexOf(declaration.ast);
+    removeDeclarationFromRule(rule, property) {
+        let index = rule.ast.block.children.findIndex(x => x.property == property);
         if (index == -1)
             return false;
         rule.ast.block.children.splice(index, 1);
@@ -172,12 +174,6 @@ export class CssTreeStylesheetService {
     findDeclarationInRule(rule, styleName) {
         return rule.block.children.find(declaration => declaration.property == styleName);
     }
-    elementMatchesASelector(designItem, selectors) {
-        for (const selector of selectors)
-            if (designItem.element.matches(selector))
-                return true;
-        return false;
-    }
     buildAtRuleString(ast, stylesheet) {
         return {
             sel: stylesheet.slice(ast.prelude.loc.start.offset, ast.prelude.loc.end.offset),

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

@@ -10,6 +10,7 @@ export interface IStyleDeclaration {
     name: string;
     value: string;
     important: boolean;
+    parent: IStyleRule;
 }
 export interface IStylesheet {
     content: string;
@@ -20,9 +21,9 @@ export interface IStylesheetService {
     getStylesheets(): IStylesheet[];
     getAppliedRules(designItem: IDesignItem): IStyleRule[];
     getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
-    updateDeclarationWithDeclaration(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
-    insertDeclarationIntoRule(rule: IStyleRule, declaration: IStyleDeclaration, important: boolean): boolean;
-    removeDeclarationFromRule(rule: IStyleRule, declaration: IStyleDeclaration): boolean;
+    updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
     stylesheetChanged: TypedEvent<{
         stylesheet: IStylesheet;
     }>;

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

@@ -70,6 +70,8 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
             //@ts-ignore
             this._monacoEditor = monaco.editor.create(this._editor, {
                 automaticLayout: true,
+                wordWrapColumn: 1000,
+                wordWrap: 'wordWrapColumn',
                 value: this.code,
                 language: 'html',
                 minimap: {

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

@@ -49,16 +49,12 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _canvasContainer;
     private _outercanvas2;
     private _lastHoverDesignItem;
-    private _pointerEventHandlerBound;
     private _firstConnect;
-    private _onKeyDownBound;
-    private _onKeyUpBound;
     private cssprefixConstant;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
     private _pointerextensions;
-    private _onDblClickBound;
     private _lastCopiedPrimaryItem;
     constructor();
     get designerWidth(): string;

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

@@ -72,10 +72,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _canvasContainer;
     _outercanvas2;
     _lastHoverDesignItem;
-    _pointerEventHandlerBound;
     _firstConnect;
-    _onKeyDownBound;
-    _onKeyUpBound;
     cssprefixConstant = '#node-projects-designer-canvas-canvas ';
     static style = css `
     :host {
@@ -162,7 +159,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     </div>`;
     extensionManager;
     _pointerextensions;
-    _onDblClickBound;
     _lastCopiedPrimaryItem;
     constructor() {
         super();
@@ -171,10 +167,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
         this.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
-        this._onKeyDownBound = this.onKeyDown.bind(this);
-        this._onKeyUpBound = this.onKeyUp.bind(this);
-        this._onDblClickBound = this._onDblClick.bind(this);
-        this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
+        this._onDblClick = this._onDblClick.bind(this);
+        this._pointerEventHandler = this._pointerEventHandler.bind(this);
         this.clickOverlay.oncontextmenu = (e) => e.preventDefault();
     }
     get designerWidth() {
@@ -471,16 +467,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     connectedCallback() {
         if (!this._firstConnect) {
             this._firstConnect = true;
-            this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
-            this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
-            this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
+            this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandler);
+            this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandler);
+            this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandler);
             this.clickOverlay.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
             this.clickOverlay.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
             this.clickOverlay.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
             this.clickOverlay.addEventListener(EventNames.Drop, event => this._onDrop(event));
-            this.clickOverlay.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
-            this.clickOverlay.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
-            this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
+            this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown, true);
+            this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
+            this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
         }
     }
     _zoomFactorChanged(refreshExtensions = true) {

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

@@ -5,7 +5,8 @@ export class ButtonSeperatorProvider {
     }
     provideButtons(designerView, designerCanvas) {
         const div = document.createElement('div');
-        div.style.marginLeft = this._space + 'px';
+        div.style.width = this._space + 'px';
+        div.oncontextmenu = (e) => { e.preventDefault(); };
         return [div];
     }
 }

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

@@ -1,6 +1,4 @@
-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[];
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class FlexboxExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
 }

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

@@ -1,22 +1,7 @@
 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];
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class FlexboxExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(flexboxExtensionShowOverlayOptionName, "F", "show flexbox overlay");
     }
 }

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

@@ -1,6 +1,4 @@
-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[];
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
 }

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

@@ -1,22 +1,7 @@
 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];
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(gridExtensionShowOverlayOptionName, "G", "show grid overlay");
     }
 }

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

@@ -1,6 +1,4 @@
-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[];
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class InvisibleElementExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
 }

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

@@ -1,22 +1,7 @@
 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];
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class InvisibleElementExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(invisibleElementExtensionShowOverlayOptionName, "I", "show invisible div overlay");
     }
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class JumpToElementContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js

@@ -0,0 +1,15 @@
+export class JumpToElementContextMenu {
+    shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            {
+                title: 'jump to', action: () => {
+                    const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element);
+                    designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, designerCanvas.zoomFactor);
+                }
+            },
+        ];
+    }
+}

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

@@ -113,7 +113,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             this._propertyMap.clear();
             if (this._propertiesService) {
                 let properties = this._propertiesService.getProperties(designItem);
-                if (properties) {
+                if (properties?.length) {
                     if ('properties' in properties[0])
                         this.createPropertyGroups(properties);
                     else

package/dist/index.d.ts

@@ -213,6 +213,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/SelectAllC
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js";
 export type { IDesignerPointerExtension } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js";
 export type { IDesignerPointerExtensionProvider } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";

package/dist/index.js

@@ -166,6 +166,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/SelectAllC
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.175",
+  "version": "0.0.177",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -18,20 +18,20 @@
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
-    "@adobe/css-tools": "^4.0.2",
+    "@adobe/css-tools": "^4.1.0",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.5.1",
     "@papyrs/stylo": "^0.0.42",
-    "@types/codemirror": "^5.60.6",
+    "@types/codemirror": "^5.60.7",
     "@types/css-tree": "^2.0.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.14.0",
+    "ace-builds": "^1.15.0",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.3.1",
+    "jest": "^29.4.0",
     "jquery": "^3.6.3",
     "jquery.fancytree": "^2.38.2",
     "mdn-data": "^2.0.30",