@node-projects/web-component-designer 0.1.180 → 0.1.182

package/dist/elements/helper/contextMenu/ContextMenu.d.ts

@@ -9,6 +9,7 @@ export interface IContextMenuOptions {
 export declare class ContextMenu implements IContextMenu {
     private static _contextMenuCss;
     static count: number;
+    private static _openedContextMenus;
     menu: IContextMenuItem[];
     options: IContextMenuOptions;
     context: any;
@@ -23,4 +24,5 @@ export declare class ContextMenu implements IContextMenu {
     _windowKeyUp(e: KeyboardEvent): void;
     static show(menu: IContextMenuItem[], event: MouseEvent, options?: IContextMenuOptions, context?: any): ContextMenu;
     close(): void;
+    static closeAll(): void;
 }

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -121,6 +121,7 @@ export class ContextMenu {
 		background-color: #5ebdec;
 	  }`;
     static count = 0;
+    static _openedContextMenus = new Set();
     menu;
     options;
     context;
@@ -292,6 +293,7 @@ export class ContextMenu {
         window.addEventListener("mousedown", this._windowDown);
         window.addEventListener("resize", this._windowResize);
         setTimeout(() => window.addEventListener("contextmenu", this._windowDown), 100);
+        ContextMenu._openedContextMenus.add(this);
     }
     _windowResize() {
         this.close();
@@ -319,6 +321,11 @@ export class ContextMenu {
         window.removeEventListener("mousedown", this._windowDown);
         window.removeEventListener("resize", this._windowResize);
         setTimeout(() => window.removeEventListener("contextmenu", this._windowDown), 10);
+        ContextMenu._openedContextMenus.delete(this);
+    }
+    static closeAll() {
+        for (const c of ContextMenu._openedContextMenus.values())
+            c.close();
     }
 }
 class ContextUtil {

package/dist/elements/item/DesignItem.js

@@ -605,14 +605,14 @@ export class DesignItem {
             try {
                 const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
                 if (rules) {
-                    return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+                    return [{ selector: null, declarations: localStyles, specificity: null }, ...rules];
                 }
             }
             catch (err) {
                 console.warn('getAppliedRules', err);
             }
         }
-        styles = [{ selector: null, declarations: localStyles, specificity: -1 }];
+        styles = [{ selector: null, declarations: localStyles, specificity: null }];
         this._stylesCache = styles;
         clearTimeout(this._cacheClearTimer);
         this._cacheClearTimer = setTimeout(() => this._stylesCache = null, 30);

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

@@ -23,9 +23,17 @@ export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
     async getProperties(designItem) {
         if (!designItem || designItem.nodeType != NodeType.Element)
             return [];
-        let styles = designItem.getAllStyles();
+        let styles = designItem.getAllStyles().toReversed().sort((a, b) => {
+            if (a.specificity == null)
+                return -1;
+            if (b.specificity == null)
+                return 1;
+            if (a.specificity.A > b.specificity.A || a.specificity.B > b.specificity.B || a.specificity.C > b.specificity.C)
+                return -1;
+            return 0;
+        });
         let arr = styles.map(x => ({
-            name: x.selector ?? localName, description: x.stylesheetName ?? '', properties: [
+            name: (x.selector ?? localName) + (x.specificity ? ' (' + x.specificity.A + '-' + x.specificity.B + '-' + x.specificity.C + ')' : ''), description: x.stylesheetName ?? '', properties: [
                 ...x.declarations.map(y => ({
                     name: y.name,
                     renamable: true,

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

@@ -3,6 +3,7 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { IDocumentStylesheet, IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from './IStylesheetService.js';
 import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { Specificity } from "./SpecifityCalculator.js";
 export declare abstract class AbstractStylesheetService implements IStylesheetService {
     protected _stylesheets: Map<string, {
         stylesheet: IStylesheet;
@@ -45,5 +46,5 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     }>;
     stylesheetsChanged: TypedEvent<void>;
     static patchStylesheetSelectorForDesigner(text: string): string;
-    protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;
+    protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): false | Specificity;
 }

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

@@ -1,5 +1,6 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from "../../item/DesignItem.js";
+import { calculateSpecifity } from "./SpecifityCalculator.js";
 export class AbstractStylesheetService {
     _stylesheets = new Map();
     _documentStylesheets = new Map();
@@ -110,17 +111,21 @@ export class AbstractStylesheetService {
     }
     elementMatchesASelector(designItem, selectors) {
         if (designItem == null)
-            return true;
+            return false;
+        let s = null;
         for (let selector of selectors) {
             const patched = AbstractStylesheetService.patchStylesheetSelectorForDesigner(selector);
             try {
-                if (designItem.element.matches(patched))
-                    return true;
+                if (designItem.element.matches(patched)) {
+                    let spec = calculateSpecifity(selector);
+                    if (s === null || spec.A > s.A || spec.B > s.B || spec.C > s.C)
+                        s = spec;
+                }
             }
             catch (err) {
                 console.warn("invalid selector: ", selector, "patched: " + patched);
             }
         }
-        return false;
+        return s === null ? false : s;
     }
 }

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -1,9 +1,10 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { IDesignItem } from "../../item/IDesignItem.js";
+import { Specificity } from "./SpecifityCalculator.js";
 export interface IStyleRule {
     selector: string;
     declarations: IStyleDeclaration[];
-    specificity: number;
+    specificity: Specificity;
     stylesheetName?: string;
 }
 export interface IStyleDeclaration {

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

@@ -0,0 +1,3 @@
+export type Level = "A" | "B" | "C";
+export type Specificity = Record<Level, number>;
+export declare function calculateSpecifity(selector: string): Specificity;

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

@@ -0,0 +1,72 @@
+var ParseState;
+(function (ParseState) {
+    ParseState[ParseState["none"] = 0] = "none";
+    ParseState[ParseState["parseName"] = 1] = "parseName";
+    ParseState[ParseState["parseAttribute"] = 2] = "parseAttribute";
+    ParseState[ParseState["parseInFunc"] = 3] = "parseInFunc";
+})(ParseState || (ParseState = {}));
+//todo special cases: 
+//:not :is :has = inner selector specifity
+//:where = 0 specifity
+//:nth-child :nth-last-child = inner sel. ?
+export function calculateSpecifity(selector) {
+    let s = { A: 0, B: 0, C: 0 };
+    let parseState = ParseState.none;
+    for (let n = 0; n < selector.length; n++) {
+        let c = selector[n];
+        if (parseState === ParseState.parseInFunc) {
+            if (c == ')') {
+                parseState = ParseState.none;
+            }
+        }
+        else if (parseState === ParseState.parseAttribute) {
+            if (c == ']') {
+                parseState = ParseState.none;
+            }
+        }
+        else {
+            switch (c) {
+                case '#':
+                    s.A++;
+                    parseState = ParseState.parseName;
+                    break;
+                case '.':
+                    s.B++;
+                    parseState = ParseState.parseName;
+                    break;
+                case '[':
+                    s.B++;
+                    parseState = ParseState.parseAttribute;
+                    break;
+                case '(':
+                    parseState = ParseState.parseInFunc;
+                    break;
+                case ':':
+                    if (selector[n + 1] !== ':') {
+                        s.B++;
+                        parseState = ParseState.parseName;
+                    }
+                    else {
+                        s.C++;
+                        parseState = ParseState.parseName;
+                        n++;
+                    }
+                    break;
+                case '>':
+                case ' ':
+                case '~':
+                case '+':
+                    parseState = ParseState.none;
+                    break;
+                case '*':
+                    break;
+                default:
+                    if (parseState === ParseState.none) {
+                        s.C++;
+                        parseState = ParseState.parseName;
+                    }
+            }
+        }
+    }
+    return s;
+}

package/jsr.json

@@ -0,0 +1,5 @@
+{
+    "name": "@node-projects/web-component-designer",
+    "version": "0.1.180",
+    "exports": "./src/index.ts"
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.180",
+  "version": "0.1.182",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

package/assets/icons//303/247.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-80v-640h120v640H280Zm280-240v-400h120v400H560ZM80-800v-80h800v80H80Z"/></svg>