@node-projects/web-component-designer 0.0.168 → 0.0.169

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

@@ -1,11 +1,8 @@
 import { EventNames } from '../../../enums/EventNames.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { UndoService } from '../../services/undoService/UndoService.js';
-import { SelectionService } from '../../services/selectionService/SelectionService.js';
 import { DesignItem } from '../../item/DesignItem.js';
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants.js';
-import { ContentService } from '../../services/contentService/ContentService.js';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
 import { Snaplines } from './Snaplines.js';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction.js';
@@ -39,6 +36,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
+    _additionalStyle;
     _currentContextMenu;
     _backgroundImage;
     get zoomFactor() {
@@ -78,6 +76,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _firstConnect;
     _onKeyDownBound;
     _onKeyUpBound;
+    cssprefixConstant = '#node-projects-designer-canvas-canvas ';
     static style = css `
     :host {
       display: block;
@@ -207,35 +206,22 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return this._canvasContainer.offsetHeight;
     }
     set additionalStyles(value) {
-        if (value) {
-            let style = '';
-            for (let s of value) {
-                for (let r of s.cssRules) {
-                    if (r instanceof CSSStyleRule) {
-                        let parts = r.selectorText.split(',');
-                        let t = '';
-                        for (let p of parts) {
-                            if (t)
-                                t += ',';
-                            t += '#node-projects-designer-canvas-canvas ' + p;
-                        }
-                        let cssText = r.style.cssText;
-                        //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
-                        if (r.styleMap && r.styleMap.get('grid-template') && r.styleMap.get('grid-template').toString().includes('repeat(')) {
-                            let entr = r.styleMap.entries();
-                            cssText = '';
-                            for (let e of entr) {
-                                cssText += e[0] + ':' + e[1].toString() + ';';
-                            }
-                        }
-                        style += t + '{' + cssText + '}';
-                    }
-                }
-            }
-            this.shadowRoot.adoptedStyleSheets = [this.constructor.style, cssFromString(style)];
+        this._additionalStyle = value;
+        this.applyAllStyles();
+    }
+    get additionalStyles() {
+        return this._additionalStyle;
+    }
+    applyAllStyles() {
+        let styles = [this.constructor.style];
+        if (this._additionalStyle)
+            styles.push(cssFromString(this.buildPatchedStyleSheet(this._additionalStyle)));
+        if (this.instanceServiceContainer.stylesheetService) {
+            styles.push(...this.instanceServiceContainer.stylesheetService
+                .getStylesheets()
+                .map(x => cssFromString(this.buildPatchedStyleSheet([cssFromString(x.stylesheet)]))));
         }
-        else
-            this.shadowRoot.adoptedStyleSheets = [this.constructor.style];
+        this.shadowRoot.adoptedStyleSheets = styles;
     }
     /* --- start IUiCommandHandler --- */
     async executeCommand(command) {
@@ -430,10 +416,21 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     initialize(serviceContainer) {
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = new InstanceServiceContainer(this);
-        this.instanceServiceContainer.register("undoService", new UndoService(this));
-        this.instanceServiceContainer.register("selectionService", new SelectionService(this));
+        const undoService = this.serviceContainer.getLastService('undoService');
+        if (undoService)
+            this.instanceServiceContainer.register("undoService", undoService(this));
+        const selectionService = this.serviceContainer.getLastService('selectionService');
+        if (selectionService)
+            this.instanceServiceContainer.register("selectionService", selectionService(this));
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
-        this.instanceServiceContainer.register("contentService", new ContentService(this.rootDesignItem));
+        const contentService = this.serviceContainer.getLastService('contentService');
+        if (contentService)
+            this.instanceServiceContainer.register("contentService", contentService(this));
+        this.instanceServiceContainer.servicesChanged.on(e => {
+            if (e.serviceName == 'stylesheetService') {
+                this.applyAllStyles();
+            }
+        });
         this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
@@ -975,5 +972,47 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.zoomFactor = newZoom;
         this.canvasOffsetUnzoomed = newCanvasOffset;
     }
+    buildPatchedStyleSheet(value) {
+        let style = '';
+        for (let s of value) {
+            style += this.traverseAndCollectRules(s);
+        }
+        return style;
+    }
+    traverseAndCollectRules(ruleContainer) {
+        let ruleCollector = [];
+        for (let rule of ruleContainer.cssRules) {
+            if ((rule instanceof CSSContainerRule
+                || rule instanceof CSSSupportsRule
+                || rule instanceof CSSMediaRule)
+                && rule.cssRules) {
+                return rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+            }
+            if (rule instanceof CSSStyleRule) {
+                let parts = rule.selectorText.split(',');
+                let t = '';
+                for (let p of parts) {
+                    if (p.includes(this.cssprefixConstant)) {
+                        t += p;
+                        continue;
+                    }
+                    if (t)
+                        t += ',';
+                    t += this.cssprefixConstant + p;
+                }
+                let cssText = rule.style.cssText;
+                //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
+                if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
+                    let entr = rule.styleMap.entries();
+                    cssText = '';
+                    for (let e of entr) {
+                        cssText += e[0] + ':' + e[1].toString() + ';';
+                    }
+                }
+                ruleCollector.push(t + '{' + cssText + '}');
+            }
+        }
+        return ruleCollector.join(' ');
+    }
 }
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.d.ts

@@ -14,6 +14,8 @@ export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazy
     constructor(serviceContainer: ServiceContainer);
     setPropertiesService(propertiesService: IPropertiesService): void;
     createElements(designItem: IDesignItem): void;
+    private createPropertyGroups;
+    private createPropertyEditors;
     openContextMenu(event: MouseEvent, property: IProperty): void;
     designItemsChanged(designItems: IDesignItem[]): void;
     refreshForDesignItems(items: IDesignItem[]): void;

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

@@ -79,6 +79,17 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     .unset-value:focus {
       color: white
     }
+    .group-header {
+      grid-column: 1 / 3;
+      font-size: 10px;
+      font-family: monospace;
+    }
+    .group-desc {
+      display: inline-flex;
+      flex-direction: row-reverse;
+      font-size: 10px;
+      text-decoration: underline;
+    }
     `;
     }
     constructor(serviceContainer) {
@@ -103,76 +114,95 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             if (this._propertiesService) {
                 let properties = this._propertiesService.getProperties(designItem);
                 if (properties) {
-                    for (const p of properties) {
-                        let editor;
-                        if (p.createEditor)
-                            editor = p.createEditor(p);
-                        else {
-                            editor = this._serviceContainer.forSomeServicesTillResult("editorTypesService", x => x.getEditorForProperty(p));
+                    if ('properties' in properties[0])
+                        this.createPropertyGroups(properties);
+                    else
+                        this.createPropertyEditors(properties);
+                }
+            }
+        }
+    }
+    createPropertyGroups(groups) {
+        for (const g of groups) {
+            let header = document.createElement('span');
+            header.innerHTML = g.name.replaceAll("\n", "<br>");
+            header.className = 'group-header';
+            this._div.appendChild(header);
+            let desc = document.createElement('span');
+            desc.innerHTML = g.description;
+            desc.className = 'group-desc';
+            this._div.appendChild(desc);
+            this.createPropertyEditors(g.properties);
+        }
+    }
+    createPropertyEditors(properties) {
+        for (const p of properties) {
+            let editor;
+            if (p.createEditor)
+                editor = p.createEditor(p);
+            else {
+                editor = this._serviceContainer.forSomeServicesTillResult("editorTypesService", x => x.getEditorForProperty(p));
+            }
+            if (editor) {
+                let rectContainer = document.createElement("div");
+                rectContainer.style.width = '20px';
+                rectContainer.style.height = '20px';
+                rectContainer.style.display = 'flex';
+                rectContainer.style.alignItems = 'center';
+                let rect = document.createElement("div");
+                rect.style.width = '7px';
+                rect.style.height = '7px';
+                rect.style.border = '1px white solid';
+                if (p.propertyType != PropertyType.complex)
+                    rectContainer.appendChild(rect);
+                this._div.appendChild(rectContainer);
+                rect.oncontextmenu = (event) => {
+                    event.preventDefault();
+                    this.openContextMenu(event, p);
+                };
+                if (p.type == 'addNew') {
+                    let input = editor.element;
+                    input.disabled = true;
+                    let label = document.createElement("input");
+                    label.value = p.name;
+                    label.onkeyup = e => {
+                        if (e.key == 'Enter' && label.value) {
+                            p.name = label.value;
+                            label.disabled = true;
+                            input.disabled = false;
+                            input.focus();
                         }
-                        if (editor) {
-                            let rectContainer = document.createElement("div");
-                            rectContainer.style.width = '20px';
-                            rectContainer.style.height = '20px';
-                            rectContainer.style.display = 'flex';
-                            rectContainer.style.alignItems = 'center';
-                            let rect = document.createElement("div");
-                            rect.style.width = '7px';
-                            rect.style.height = '7px';
-                            rect.style.border = '1px white solid';
-                            if (p.propertyType != PropertyType.complex)
-                                rectContainer.appendChild(rect);
-                            this._div.appendChild(rectContainer);
-                            rect.oncontextmenu = (event) => {
-                                event.preventDefault();
-                                this.openContextMenu(event, p);
-                            };
-                            if (p.type == 'addNew') {
-                                let input = editor.element;
-                                input.disabled = true;
-                                let label = document.createElement("input");
-                                label.value = p.name;
-                                label.onkeyup = e => {
-                                    if (e.key == 'Enter' && label.value) {
-                                        p.name = label.value;
-                                        label.disabled = true;
-                                        input.disabled = false;
-                                        input.focus();
-                                    }
-                                };
-                                this._div.appendChild(label);
-                            }
-                            else {
-                                if (!p.renamable) {
-                                    let label = document.createElement("label");
-                                    label.htmlFor = p.name;
-                                    label.textContent = p.name;
-                                    label.title = p.name;
-                                    this._div.appendChild(label);
-                                }
-                                else {
-                                    let label = document.createElement("input");
-                                    let input = editor.element;
-                                    label.value = p.name;
-                                    label.onkeyup = e => {
-                                        if (e.key == 'Enter' && label.value) {
-                                            const pg = this._designItems[0].openGroup("rename property name from '" + p.name + "' to '" + label.value + "'");
-                                            p.service.clearValue(this._designItems, p);
-                                            p.name = label.value;
-                                            p.service.setValue(this._designItems, p, input.value);
-                                            pg.commit();
-                                            this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
-                                        }
-                                    };
-                                    this._div.appendChild(label);
-                                }
+                    };
+                    this._div.appendChild(label);
+                }
+                else {
+                    if (!p.renamable) {
+                        let label = document.createElement("label");
+                        label.htmlFor = p.name;
+                        label.textContent = p.name;
+                        label.title = p.name;
+                        this._div.appendChild(label);
+                    }
+                    else {
+                        let label = document.createElement("input");
+                        let input = editor.element;
+                        label.value = p.name;
+                        label.onkeyup = e => {
+                            if (e.key == 'Enter' && label.value) {
+                                const pg = this._designItems[0].openGroup("rename property name from '" + p.name + "' to '" + label.value + "'");
+                                p.service.clearValue(this._designItems, p);
+                                p.name = label.value;
+                                p.service.setValue(this._designItems, p, input.value);
+                                pg.commit();
+                                this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
                             }
-                            editor.element.id = p.name;
-                            this._div.appendChild(editor.element);
-                            this._propertyMap.set(p, { isSetElement: rect, editor: editor });
-                        }
+                        };
+                        this._div.appendChild(label);
                     }
                 }
+                editor.element.id = p.name;
+                this._div.appendChild(editor.element);
+                this._propertyMap.set(p, { isSetElement: rect, editor: editor });
             }
         }
     }

package/dist/index.d.ts

@@ -67,7 +67,8 @@ export * from "./elements/services/propertiesService/DefaultEditorTypesService.j
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
-export type { IPropertyGroupsService } from './elements/services/propertiesService/IPropertyGroupsService.js';
+export type { IPropertyGroup } from "./elements/services/propertiesService/IPropertyGroup.js";
+export type { IPropertyTabsService as IPropertyGroupsService } from './elements/services/propertiesService/IPropertyTabsService.js';
 export * from "./elements/services/propertiesService/propertyEditors/BasePropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/ColorPropertyEditor.js";
@@ -94,10 +95,13 @@ export * from "./elements/services/propertiesService/services/WebcomponentManife
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
-export * from "./elements/services/propertiesService/PropertyGroupsService.js";
+export * from "./elements/services/propertiesService/PropertyTabsService.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
+export type { IStyleRule, IStyleDeclaration, IStylesheet, IStylesheetService } from "./elements/services/stylesheetService/IStylesheetService.js";
+export * from "./elements/services/stylesheetService/CssTreeStylesheetService.js";
+export * from "./elements/services/stylesheetService/SpecificityCalculator.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
 export type { ITransactionItem } from "./elements/services/undoService/ITransactionItem.js";
 export type { IUndoService } from "./elements/services/undoService/IUndoService.js";

package/dist/index.js

@@ -65,8 +65,10 @@ export * from "./elements/services/propertiesService/services/WebcomponentManife
 export * from "./elements/services/propertiesService/services/AttributesPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
-export * from "./elements/services/propertiesService/PropertyGroupsService.js";
+export * from "./elements/services/propertiesService/PropertyTabsService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
+export * from "./elements/services/stylesheetService/CssTreeStylesheetService.js";
+export * from "./elements/services/stylesheetService/SpecificityCalculator.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
 export * from "./elements/services/undoService/UndoService.js";
 export * from "./elements/services/undoService/transactionItems/AttributeChangeAction.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.168",
+  "version": "0.0.169",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.10.7",
+    "@node-projects/base-custom-webcomponent": "^0.10.9",
     "@types/node": "^18.11.18",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
@@ -22,17 +22,20 @@
     "@node-projects/node-html-parser-esm": "^2.5.1",
     "@papyrs/stylo": "^0.0.42",
     "@types/codemirror": "^5.60.6",
+    "@types/css-tree": "^2.0.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.14.0",
     "codemirror": "^6.0.1",
+    "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
     "jest": "^29.3.1",
     "jquery": "^3.6.3",
     "jquery.fancytree": "^2.38.2",
+    "mdn-data": "^2.0.30",
     "monaco-editor": "^0.34.1",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },