@node-projects/web-component-designer 0.0.271 → 0.0.273

package/dist/elements/controls/MetricsEditor.js

@@ -6,6 +6,7 @@ export class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
   display: flex;
   margin: 10px;
   line-height: 12px;
+  min-width: 120px;
 }
 
 * { 

package/dist/elements/helper/GridHelper.d.ts

@@ -1,4 +1,8 @@
 import { IDesignItem } from "../item/IDesignItem.js";
+export declare function GetElementGridInformation(element: HTMLElement): {
+    colSpan: number;
+    rowSpan: number;
+};
 export declare function CalculateGridInformation(designItem: IDesignItem): {
     cells?: {
         x: number;

package/dist/elements/helper/GridHelper.js

@@ -1,4 +1,18 @@
 import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "./TransformHelper.js";
+export function GetElementGridInformation(element) {
+    let cs = getComputedStyle(element);
+    let rowSpan = 1;
+    let colSpan = 1;
+    if (cs.gridRowEnd.startsWith('span'))
+        rowSpan = parseInt(cs.gridRowEnd.substring(4));
+    else
+        rowSpan = parseInt(cs.gridRowEnd) - parseInt(cs.gridRowStart);
+    if (cs.gridColumnEnd.startsWith('span'))
+        colSpan = parseInt(cs.gridColumnEnd.substring(4));
+    else
+        colSpan = parseInt(cs.gridColumnEnd) - parseInt(cs.gridColumnStart);
+    return { colSpan, rowSpan };
+}
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows

package/dist/elements/helper/Helper.js

@@ -25,12 +25,12 @@ export function pointInRect(point, rect) {
     return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
 }
 export function removeTrailing(text, char) {
-    if (text.endsWith('/'))
+    if (text.endsWith(char ?? '/'))
         return text.substring(0, text.length - 1);
     return text;
 }
 export function removeLeading(text, char) {
-    if (text.startsWith('/'))
+    if (text.startsWith(char ?? '/'))
         return text.substring(1);
     return text;
 }

package/dist/elements/helper/NpmPackageLoader.js

@@ -288,15 +288,17 @@ export class NpmPackageLoader {
                         i = getImport(i);
                     if (!(typeof i == 'string'))
                         i = getImport(i);
+                    if (!(typeof i == 'string'))
+                        i = null;
                     return i;
                 };
                 //Names to use: browser, import, default, node
                 let imp = getImportFlat(packageJsonObj.exports);
                 if (imp) {
-                    importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(imp, '/');
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeTrailing(imp, '/'), '.');
                 }
                 else if (imp = getImportFlat(packageJsonObj.exports?.['.'])) {
-                    importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(imp, '/');
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeTrailing(imp, '/'), '.');
                 }
             }
             let mainImport = packageJsonObj.main;

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

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { ServiceContainer } from '../services/ServiceContainer.js';
 import { IDesignItem } from './IDesignItem.js';
 import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
@@ -80,6 +81,8 @@ export declare class DesignItem implements IDesignItem {
     getStyleFromSheetOrLocal(name: string, fallback?: string): string;
     getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): string;
     getComputedStyle(name: string, fallback?: string): string;
+    _stylesCache: IStyleRule[];
+    _cacheClearTimer: NodeJS.Timeout;
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -399,7 +399,12 @@ export class DesignItem {
         }
         return value ?? fallback;
     }
+    _stylesCache = null;
+    _cacheClearTimer;
     getAllStyles() {
+        let styles = this._stylesCache;
+        if (styles)
+            return styles;
         if (this.nodeType != NodeType.Element)
             return [];
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
@@ -412,7 +417,11 @@ export class DesignItem {
             }
             catch (err) { }
         }
-        return [{ selector: null, declarations: localStyles, specificity: -1 }];
+        styles = [{ selector: null, declarations: localStyles, specificity: -1 }];
+        this._stylesCache = styles;
+        clearTimeout(this._cacheClearTimer);
+        this._cacheClearTimer = setTimeout(() => this._stylesCache = null, 30);
+        return styles;
     }
     setAttribute(name, value) {
         if (this.isRootItem)

package/dist/elements/services/eventsService/IEvent.d.ts

@@ -1,4 +1,4 @@
 export interface IEvent {
     name: string;
-    propertyName: string;
+    propertyName?: string;
 }

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

@@ -30,6 +30,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             this.internalWrite(indentedTextWriter, d, updatePositions);
         }
     }
+    //todo special case for style/script nodes, keep whitespace
     internalWrite(indentedTextWriter, designItem, updatePositions) {
         let start = indentedTextWriter.position;
         let end = indentedTextWriter.position;
@@ -61,7 +62,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
                 const children = designItem.children();
                 contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
                 if (contentSingleTextNode) {
-                    this.writeTextNode(indentedTextWriter, designItem, false);
+                    const notrim = designItem.name == 'script' || designItem.name == 'style' || designItem.name == 'pre';
+                    this.writeTextNode(indentedTextWriter, designItem, false, !notrim);
                 }
                 else {
                     if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
@@ -99,8 +101,10 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: start, length: end - start });
         }
     }
-    writeTextNode(indentedTextWriter, designItem, indentAndNewline) {
-        let content = DomConverter.normalizeContentValue(designItem.content).trim();
+    writeTextNode(indentedTextWriter, designItem, indentAndNewline, trim = true) {
+        let content = DomConverter.normalizeContentValue(designItem.content);
+        if (trim)
+            content = content.trim();
         if (content) {
             if (indentAndNewline)
                 this._conditionalyWriteIndent(indentedTextWriter, designItem);

package/dist/elements/services/placementService/GridPlacementService.js

@@ -1,4 +1,4 @@
-import { CalculateGridInformation } from '../../helper/GridHelper.js';
+import { CalculateGridInformation, GetElementGridInformation } from '../../helper/GridHelper.js';
 import { pointInRect } from '../../helper/Helper.js';
 import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class GridPlacementService {
@@ -51,30 +51,27 @@ export class GridPlacementService {
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         const gridInformation = CalculateGridInformation(container);
         const pos = placementView.getNormalizedEventCoordinates(event);
-        const posElement = placementView.getNormalizedElementCoordinates(items[0].element);
         let row = 0;
         let column = 0;
-        if (!pointInRect(pos, posElement)) {
-            row = 0;
-            for (let cellRow of gridInformation.cells) {
-                column = 0;
-                for (let cell of cellRow) {
-                    if (pointInRect(pos, cell)) {
-                        if (cell.name) {
-                            items[0].element.style.gridColumn = '';
-                            items[0].element.style.gridRow = '';
-                            items[0].element.style.gridArea = cell.name;
-                        }
-                        else {
-                            items[0].element.style.gridArea = '';
-                            items[0].element.style.gridColumn = column + 1;
-                            items[0].element.style.gridRow = row + 1;
-                        }
+        for (let cellRow of gridInformation.cells) {
+            column = 0;
+            for (let cell of cellRow) {
+                if (pointInRect(pos, cell)) {
+                    let info = GetElementGridInformation(items[0].element);
+                    if (cell.name) {
+                        items[0].element.style.gridColumn = '';
+                        items[0].element.style.gridRow = '';
+                        items[0].element.style.gridArea = cell.name;
+                    }
+                    else {
+                        items[0].element.style.gridArea = '';
+                        items[0].element.style.gridColumn = (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : '');
+                        items[0].element.style.gridRow = (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : '');
                     }
-                    column++;
                 }
-                row++;
+                column++;
             }
+            row++;
         }
         placementView.extensionManager.refreshAllExtensions([container]);
     }
@@ -88,6 +85,7 @@ export class GridPlacementService {
             column = 0;
             for (let cell of cellRow) {
                 if (pointInRect(pos, cell)) {
+                    let info = GetElementGridInformation(items[0].element);
                     //Grid Area is shorthand for grid row/column, to make undo work correctly we need to set befor and after clear
                     if (cell.name) {
                         items[0].setStyle('grid-area', cell.name);
@@ -96,11 +94,11 @@ export class GridPlacementService {
                         items[0].setStyle('grid-area', cell.name);
                     }
                     else {
-                        items[0].setStyle('grid-column', column + 1);
-                        items[0].setStyle('grid-row', row + 1);
+                        items[0].setStyle('grid-column', (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : ''));
+                        items[0].setStyle('grid-row', (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : ''));
                         items[0].removeStyle('grid-area');
-                        items[0].setStyle('grid-column', column + 1);
-                        items[0].setStyle('grid-row', row + 1);
+                        items[0].setStyle('grid-column', (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : ''));
+                        items[0].setStyle('grid-row', (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : ''));
                     }
                 }
                 column++;

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

@@ -2,5 +2,6 @@ export declare enum ValueType {
     'none' = "none",
     'all' = "all",
     'some' = "some",
-    'bound' = "bound"
+    'bound' = "bound",
+    'fromStylesheet' = "fromStylesheet"
 }

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

@@ -4,4 +4,5 @@ export var ValueType;
     ValueType["all"] = "all";
     ValueType["some"] = "some";
     ValueType["bound"] = "bound";
+    ValueType["fromStylesheet"] = "fromStylesheet";
 })(ValueType || (ValueType = {}));

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

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
 import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
@@ -6,6 +7,8 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { IBinding } from '../../../item/IBinding.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 export declare abstract class AbstractPropertiesService implements IPropertiesService {
+    _stylesCache: Map<IDesignItem, Set<string>>;
+    _cacheClearTimer: NodeJS.Timeout;
     abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
     abstract isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;

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

@@ -4,6 +4,8 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType.js';
 import { NodeType } from '../../../item/NodeType.js';
 export class AbstractPropertiesService {
+    _stylesCache = new Map;
+    _cacheClearTimer;
     _notifyChangedProperty(designItem, property, value) {
     }
     getProperty(designItem, name) {
@@ -90,7 +92,7 @@ export class AbstractPropertiesService {
             let attributeName = property.attributeName;
             if (!attributeName)
                 attributeName = PropertiesHelper.camelToDashCase(property.name);
-            designItems.forEach((x) => {
+            for (let x of designItems) {
                 let has = false;
                 if (property.propertyType == PropertyType.cssValue)
                     has = x.hasStyle(property.name);
@@ -98,7 +100,10 @@ export class AbstractPropertiesService {
                     has = x.hasAttribute(attributeName);
                 all = all && has;
                 some = some || has;
-            });
+                if (!all && some)
+                    break;
+            }
+            ;
             //todo: optimize perf, do not call bindings service for each property. 
             const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
                 return s.getBindings(designItems[0]);
@@ -111,6 +116,18 @@ export class AbstractPropertiesService {
                 if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
                     return ValueType.bound;
             }
+            if (!all && property.propertyType == PropertyType.cssValue) {
+                let styles = this._stylesCache.get(designItems[0]);
+                if (!styles) {
+                    styles = new Set(designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).map(x => x.name));
+                    this._stylesCache.set(designItems[0], styles);
+                    clearTimeout(this._cacheClearTimer);
+                    this._cacheClearTimer = setTimeout(() => this._stylesCache.clear(), 30);
+                }
+                let cssValue = styles.has(property.name);
+                if (cssValue)
+                    return ValueType.fromStylesheet;
+            }
         }
         else
             return ValueType.none;
@@ -162,7 +179,6 @@ export class AbstractPropertiesService {
             return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.attribute) && x.targetName == property.name);
         }
     }
-    //todo: optimize perf, call window.getComputedStyle only once per item, and not per property
     getUnsetValue(designItems, property) {
         if (property.propertyType == PropertyType.cssValue) {
             if (designItems != null && designItems.length !== 0) {

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

@@ -306,6 +306,10 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                 isSetElement.style.background = 'gray';
             else if (s == ValueType.bound)
                 isSetElement.style.background = 'orange';
+            else if (s == ValueType.fromStylesheet) {
+                v = propertiesService.getUnsetValue(items, property);
+                isSetElement.style.background = 'yellow';
+            }
             editor?.refreshValueWithoutNotification(s, v);
         }
         else {

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.271",
+  "version": "0.0.273",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,30 +13,30 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.13.0"
+    "@node-projects/base-custom-webcomponent": "^0.15.0"
   },
   "devDependencies": {
-    "@adobe/css-tools": "4.3.0",
+    "@adobe/css-tools": "4.3.1",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.1.5",
     "@papyrs/stylo": "^0.0.45",
-    "@types/codemirror": "^5.60.8",
+    "@types/codemirror": "^5.60.9",
     "@types/css-tree": "^2.3.1",
-    "@types/jquery": "^3.5.16",
+    "@types/jquery": "^3.5.17",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.4.9",
-    "ace-builds": "^1.24.0",
+    "@types/node": "^20.5.6",
+    "ace-builds": "^1.24.1",
     "codemirror": "^5.0.0",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.6.2",
+    "jest": "^29.6.4",
     "jquery": "^3.7.0",
     "jquery.fancytree": "^2.38.3",
-    "mdn-data": "^2.0.32",
+    "mdn-data": "^2.0.33",
     "monaco-editor": "^0.41.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {