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

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

@@ -1,3 +1,3 @@
-export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'heigth'): number;
+export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'height'): number;
 export declare function getCssUnit(cssValue: string): string;
-export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'heigth', unit: string): string | number;
+export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string | number;

package/dist/elements/helper/CssUnitConverter.js

@@ -1,5 +1,5 @@
 //unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh
-const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
+const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'fr'];
 const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i');
 export function convertCssUnitToPixel(cssValue, target, percentTarget) {
     const supportedUnits = {
@@ -20,7 +20,7 @@ export function convertCssUnitToPixel(cssValue, target, percentTarget) {
         'vmax': value => value / 100 * (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
         'lh': value => value * parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
-        '%': value => value / 100 * (percentTarget == 'heigth' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        '%': value => value / 100 * (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
         /* todo
         //find parent with computed style where contaner-type is inline-size or size (regarding to query type)
         //use this size for calculation
@@ -76,7 +76,7 @@ export function convertCssUnit(cssValue, target, percentTarget, unit) {
         'vmax': value => value * 100 / (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
         'lh': value => value / parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value / parseFloat(getComputedStyle(document.documentElement).lineHeight),
-        '%': value => value * 100 / (percentTarget == 'heigth' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        '%': value => value * 100 / (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
         // Times
         'ms': value => value,
         's': value => value / 1000,

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

@@ -4,7 +4,9 @@ export declare function CalculateGridInformation(designItem: IDesignItem): {
         x: number;
         y: number;
         width: number;
+        initWidthUnit: string;
         height: number;
+        initHeightUnit: string;
         name: string;
     }[][];
     gaps?: {

package/dist/elements/helper/GridHelper.js

@@ -1,3 +1,4 @@
+import { getCssUnit } from "./CssUnitConverter.js";
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
@@ -6,6 +7,20 @@ export function CalculateGridInformation(designItem) {
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
+    const rowUnits = [];
+    let tmpStyle = designItem.getStyle("grid-template-rows");
+    if (tmpStyle)
+        tmpStyle.split(' ').forEach(rowWidth => { if (rowWidth != "")
+            rowUnits.push(getCssUnit(rowWidth)); });
+    else
+        rows.forEach(() => rowUnits.push("px"));
+    const columnUnits = [];
+    tmpStyle = designItem.getStyle("grid-template-columns");
+    if (tmpStyle)
+        tmpStyle.split(' ').forEach(columnHeight => { if (columnHeight != "")
+            columnUnits.push(getCssUnit(columnHeight)); });
+    else
+        columns.forEach(() => columnUnits.push("px"));
     const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
     const paddingTop = Number.parseFloat(computedStyle.paddingTop);
     let y = 0;
@@ -100,7 +115,7 @@ export function CalculateGridInformation(designItem) {
                     name = nm;
                 }
             }
-            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
+            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, initWidthUnit: columnUnits[yIdx], height: currY, initHeightUnit: rowUnits[xIdx], name: name };
             cellList.push(cell);
             x += currX;
             cl++;

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

@@ -76,6 +76,7 @@ export declare class DesignItem implements IDesignItem {
     setStyle(name: string, value?: string | null, important?: boolean): void;
     removeStyle(name: string): void;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): void;
+    getStyleFromSheetOrLocal(name: string): void;
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -304,10 +304,10 @@ export class DesignItem {
     }
     updateStyleInSheetOrLocal(name, value, important) {
         let nm = PropertiesHelper.camelToDashCase(name);
-        const declaration = null;
-        //const declaration = this.serviceContainer.stylesheetService?.getDeclarations(d, property);
-        //const rules = this.serviceContainer.stylesheetService?.getAppliedRules(d, property);
-        if (!declaration) {
+        // Pre-sorted by priority
+        let declerations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
+        if (this.hasStyle(name) || !declerations) {
+            // Set style locally
             if (this.getStyle(nm) != value) {
                 this.setStyle(nm, value);
             }
@@ -315,9 +315,12 @@ export class DesignItem {
                 this.removeStyle(nm);
             }
         }
-        //todo -> modify stylesheet, or local css
-        //we need undo for modification of stylesheet, look how we do this
-        //maybe undo in stylsheet service?
+        else {
+            // Set style in sheet
+            this.instanceServiceContainer.stylesheetService.updateDeclarationWithDeclaration(declerations[0], value, important);
+        }
+    }
+    getStyleFromSheetOrLocal(name) {
     }
     getAllStyles() {
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false }));

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

@@ -1,7 +1,7 @@
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPropertiesService } from './IPropertiesService.js';
-import { IPropertyTabsService } from './IPropertyTabsService.js';
-export declare class PropertyGroupsService implements IPropertyTabsService {
+import { IPropertyGroupsService } from './IPropertyGroupsService.js';
+export declare class PropertyGroupsService implements IPropertyGroupsService {
     protected _pgList: {
         name: string;
         propertiesService: IPropertiesService;

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

@@ -1,12 +1,13 @@
 import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
 import { CommonPropertiesService } from './services/CommonPropertiesService.js';
+import { CssCurrentPropertiesService } from './services/CssCurrentPropertiesService.js';
 import { CssPropertiesService } from './services/CssPropertiesService.js';
 export class PropertyTabsService {
     _pgList = [
         { name: 'properties', propertiesService: null },
         { name: 'attributes', propertiesService: new AttributesPropertiesService() },
         { name: 'common', propertiesService: new CommonPropertiesService() },
-        { name: 'styles', propertiesService: new CssPropertiesService("styles") },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
         { name: 'flex', propertiesService: new CssPropertiesService("flex") },
         { name: 'grid', propertiesService: new CssPropertiesService("grid") },
@@ -14,7 +15,7 @@ export class PropertyTabsService {
     _svgPgList = [
         { name: 'properties', propertiesService: null },
         { name: 'attributes', propertiesService: new AttributesPropertiesService() },
-        { name: 'styles', propertiesService: new CssPropertiesService("styles") },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
     ];
     getPropertygroups(designItems) {

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

@@ -0,0 +1,18 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode.none | RefreshMode.fullOnValueChange;
+    layout: IProperty[];
+    grid: IProperty[];
+    flex: IProperty[];
+    constructor(name: 'styles' | 'layout' | 'grid' | 'flex');
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+}

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

@@ -0,0 +1,221 @@
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { PropertyType } from '../PropertyType.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class CssPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return this.name == 'styles' ? RefreshMode.fullOnValueChange : RefreshMode.none;
+    }
+    layout = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline", "inline-block", "flex", "inline-flex", "contents", "grid", "inline-grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
+        {
+            name: "color",
+            type: "color",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "background-color",
+            type: "color",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "box-sizing",
+            type: "list",
+            values: ["border-box", "content-box"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "border",
+            type: "string",
+            default: "0px none rbg(0,0,0)",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "box-shadow",
+            type: "string",
+            default: "none",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "opacity",
+            type: "number",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "metrics",
+            type: "metrics",
+            service: this,
+            propertyType: PropertyType.complex
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "font-size",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "font-weight",
+            type: "list",
+            values: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900", "lighter", "bolder"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    grid = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "grid-template-columns",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "grid-template-rows",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "column-gap",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "row-gap",
+            type: "css-length",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch", "baseline"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-items",
+            type: "img-list",
+            values: ["center", "start", "end", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    flex = [
+        {
+            name: "display",
+            type: "list",
+            values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "position",
+            type: "list",
+            values: ["static", "relative", "absolute"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "flex-direction",
+            type: "img-list",
+            values: ["row", "column"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "flex-wrap",
+            type: "img-list",
+            values: ["nowrap", "wrap"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "justify-content",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }, {
+            name: "align-items",
+            type: "img-list",
+            values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    constructor(name) {
+        super();
+        this.name = name;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        if (this.name == 'styles') {
+            return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+        }
+        return this[this.name][name];
+    }
+    getProperties(designItem) {
+        if (this.name == 'styles') {
+            if (!designItem)
+                return [];
+            let styles = designItem.getAllStyles();
+            let arr = styles.map(x => ({ name: x.selector ?? '<local>', description: x.stylesheetName ?? '', properties: [
+                    ...x.declarations.map(y => ({ name: y.name, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue })),
+                    { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex }
+                ]
+            }));
+            //let arr: IProperty[] = Array.from(designItem.styles(), ([key, value])  => ({ name: key, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue }));
+            //arr.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
+            return arr;
+        }
+        return this[this.name];
+    }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
+    setValue(designItems, property, value) {
+        if (this.name == 'styles') {
+            super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+        }
+        else {
+            super.setValue(designItems, property, value);
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+export declare class CssCurrentPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    constructor();
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    setValue(designItems: IDesignItem[], property: (IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }), value: any): void;
+}

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

@@ -0,0 +1,53 @@
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import cssProperties from './CssProperties.json' assert { type: 'json' };
+export class CssCurrentPropertiesService extends CommonPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+    constructor() {
+        super();
+        this.name = 'styles';
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperty(designItem, name) {
+        return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
+    }
+    getProperties(designItem) {
+        if (!designItem)
+            return [];
+        let styles = designItem.getAllStyles();
+        let arr = styles.map(x => ({
+            name: x.selector ?? '<local>', description: x.stylesheetName ?? '', properties: [
+                ...x.declarations.map(y => ({
+                    name: y.name,
+                    renamable: true,
+                    type: cssProperties[y.name]?.type ?? 'string',
+                    values: cssProperties[y.name]?.values ? [...cssProperties[y.name]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
+                    service: this,
+                    propertyType: PropertyType.cssValue,
+                    styleRule: x,
+                    styleDeclaration: y
+                })),
+                { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex, styleRule: x }
+            ]
+        }));
+        return arr;
+    }
+    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);
+            return;
+        }
+        if (property.styleRule?.selector !== null && !property.styleDeclaration) {
+            designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, { name: property.name, value: value, important: false }, false);
+            return;
+        }
+        // Local style
+        super.setValue(designItems, { ...property, propertyType: PropertyType.cssValue }, value);
+    }
+}