@node-projects/web-component-designer 0.1.0 → 0.1.1

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

@@ -0,0 +1,259 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+export class SVGElementsPropertiesService extends CommonPropertiesService {
+    rectProperties = [
+        {
+            name: "x",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "y",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "width",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "height",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "rx",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "ry",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill",
+            type: "list",
+            values: ["transparent", "black", "white", "blue", "green", "red", "yellow", "orange", "brown", "grey"],
+            defaultValue: "transparent",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill-opacity",
+            type: "list",
+            values: ["0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1"],
+            defaultValue: "1",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    lineProperties = [
+        {
+            name: "x1",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "y1",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "x2",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "y2",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    ellipseProperties = [
+        {
+            name: "cx",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "cy",
+            type: "number",
+            defaultValue: "0",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "rx",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "ry",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill",
+            type: "list",
+            values: ["transparent", "black", "white", "blue", "green", "red", "yellow", "orange", "brown", "grey"],
+            defaultValue: "transparent",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "fill-opacity",
+            type: "list",
+            values: ["0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1"],
+            defaultValue: "1",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    pathProperties = [
+        {
+            name: "d",
+            type: "string",
+            defaultValue: '',
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "pathLength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    svgProperties = [
+        {
+            name: "width",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
+        {
+            name: "height",
+            type: "number",
+            defaultValue: "auto",
+            service: this,
+            propertyType: PropertyType.cssValue
+        },
+        {
+            name: "viewBox",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    defaultProperties = [
+        {
+            name: "stroke",
+            type: "list",
+            values: ["black", "white", "blue", "green", "red", "yellow", "orange", "brown", "grey"],
+            defaultValue: "currentcolor",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "stroke-width",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "stroke-opacity",
+            type: "list",
+            values: ["0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1"],
+            defaultValue: "1",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "visibility",
+            type: "list",
+            values: ["visible", "hidden"],
+            defaultValue: "visible",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "svg";
+    isHandledElement(designItem) {
+        switch (designItem.element.localName) {
+            case 'rect':
+            case 'line':
+            case 'ellipse':
+            case 'path':
+            case 'svg':
+                return true;
+        }
+        return false;
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem).find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        switch (designItem.element.localName) {
+            case 'rect':
+                return [...this.rectProperties, ...this.defaultProperties];
+            case 'line':
+                return [...this.lineProperties, ...this.defaultProperties];
+            case 'ellipse':
+                return [...this.ellipseProperties, ...this.defaultProperties];
+            case 'path':
+                return [...this.pathProperties, ...this.defaultProperties];
+            case 'svg':
+                return this.svgProperties;
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export declare class UnkownElementsPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,28 @@
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+export class UnkownElementsPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        return true;
+    }
+    getProperties(designItem) {
+        let list = Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element));
+        let props = [];
+        for (let p of list) {
+            let desc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(designItem.element), p);
+            if (desc.get || desc.set) {
+                let v = designItem.element[p];
+                if (typeof v == 'boolean')
+                    props.push({ name: p, type: 'boolean', service: this, propertyType: PropertyType.propertyAndAttribute });
+                else if (typeof v == 'number')
+                    props.push({ name: p, type: 'bonumberolean', service: this, propertyType: PropertyType.propertyAndAttribute });
+                else
+                    props.push({ name: p, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute });
+            }
+        }
+        return props;
+    }
+}

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

@@ -0,0 +1,20 @@
+import { BindingTarget } from "../../../item/BindingTarget.js";
+import { IDesignItem } from "../../../item/IDesignItem.js";
+import { IPropertiesService, RefreshMode } from "../IPropertiesService.js";
+import { IProperty } from "../IProperty.js";
+import { IPropertyGroup } from "../IPropertyGroup.js";
+import { AbstractPropertiesService } from "./AbstractPropertiesService.js";
+export declare class WebcomponentManifestPropertiesService extends AbstractPropertiesService implements IPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    private _name;
+    get name(): string;
+    private _propertiesList;
+    constructor(name: string, manifest: any);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+}

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

@@ -0,0 +1,81 @@
+import { BindingTarget } from "../../../item/BindingTarget.js";
+import { RefreshMode } from "../IPropertiesService.js";
+import { PropertyType } from "../PropertyType.js";
+import { AbstractPropertiesService } from "./AbstractPropertiesService.js";
+export class WebcomponentManifestPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    _name;
+    get name() { return this._name; }
+    _propertiesList;
+    constructor(name, manifest) {
+        super();
+        this._name = name;
+        this._parseManifest(manifest);
+    }
+    _parseManifest(manifest) {
+        this._propertiesList = {};
+        let declarations = [];
+        for (let m of manifest.modules) {
+            if (m.declarations)
+                declarations.push(...m.declarations);
+        }
+        for (let m of manifest.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    let properties = [];
+                    let declaration = declarations.find(x => x.name == e.declaration.name);
+                    if (declaration) {
+                        if (declaration.members) {
+                            for (let d of declaration.members) {
+                                if (d.kind == 'field' && d.privacy !== 'private' && d.privacy !== 'protected') {
+                                    let pType = PropertyType.property;
+                                    if (declaration.attributes)
+                                        pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                                    const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
+                                    if (d.name)
+                                        properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
+                                }
+                            }
+                            this._propertiesList[e.name] = properties;
+                        }
+                    }
+                    else {
+                        console.warn('declaration for ' + e.declaration.name + ' not found', manifest);
+                    }
+                }
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return ['boolean'];
+            if (type.toLowerCase() === 'number')
+                return ['number'];
+            if (type.toLowerCase() === 'string')
+                return ['string'];
+            if (type.startsWith("'") && type.includes("|")) {
+                const values = type.split("|").map(x => x.trim()).map(x => x.substring(1, x.length - 1));
+                return ['list', values];
+            }
+        }
+        return [type];
+    }
+    isHandledElement(designItem) {
+        return this._propertiesList[designItem.name] != null;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+    getUnsetValue(designItems, property) {
+        return designItems[0].element[property.propertyName ?? property.name];
+    }
+}

package/dist/elements/services/selectionService/ISelectionChangedEvent.d.ts

@@ -0,0 +1,5 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+export interface ISelectionChangedEvent {
+    oldSelectedElements: IDesignItem[];
+    selectedElements: IDesignItem[];
+}

package/dist/elements/services/selectionService/ISelectionChangedEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/selectionService/ISelectionService.d.ts

@@ -0,0 +1,11 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ISelectionChangedEvent } from './ISelectionChangedEvent.js';
+export interface ISelectionService {
+    primarySelection: IDesignItem;
+    selectedElements: IDesignItem[];
+    setSelectedElements(designItems: IDesignItem[]): void;
+    clearSelectedElements(): void;
+    isSelected(designItem: IDesignItem): boolean;
+    readonly onSelectionChanged: TypedEvent<ISelectionChangedEvent>;
+}

package/dist/elements/services/selectionService/ISelectionService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/selectionService/SelectionService.d.ts

@@ -0,0 +1,17 @@
+import { ISelectionService } from './ISelectionService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { ISelectionChangedEvent } from './ISelectionChangedEvent.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+export declare class SelectionService implements ISelectionService {
+    primarySelection: IDesignItem;
+    selectedElements: IDesignItem[];
+    _designerCanvas: IDesignerCanvas;
+    _undoSelectionChanges: boolean;
+    constructor(designerCanvas: IDesignerCanvas, undoSelectionChanges: boolean);
+    setSelectedElements(designItems: IDesignItem[]): void;
+    _withoutUndoSetSelectedElements(designItems: IDesignItem[]): void;
+    clearSelectedElements(): void;
+    isSelected(designItem: IDesignItem): boolean;
+    readonly onSelectionChanged: TypedEvent<ISelectionChangedEvent>;
+}

package/dist/elements/services/selectionService/SelectionService.js

@@ -0,0 +1,50 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { SelectionChangedAction } from '../undoService/transactionItems/SelectionChangedAction.js';
+export class SelectionService {
+    primarySelection;
+    selectedElements = [];
+    _designerCanvas;
+    _undoSelectionChanges;
+    constructor(designerCanvas, undoSelectionChanges) {
+        this._designerCanvas = designerCanvas;
+        this._undoSelectionChanges = undoSelectionChanges;
+    }
+    setSelectedElements(designItems) {
+        if (this.selectedElements != designItems && !(this.selectedElements.length === 0 && (designItems == null || designItems.length === 0))) {
+            if (this._undoSelectionChanges) {
+                const action = new SelectionChangedAction(this.selectedElements, designItems, this);
+                this._designerCanvas.instanceServiceContainer.undoService.execute(action);
+            }
+            else {
+                this._withoutUndoSetSelectedElements(designItems);
+            }
+        }
+    }
+    _withoutUndoSetSelectedElements(designItems) {
+        let oldSelectedElements = this.selectedElements;
+        if (!designItems) {
+            this.selectedElements = [];
+            this.primarySelection = null;
+        }
+        else {
+            let newSelection = [];
+            for (let d of designItems) {
+                if (d && d != d.instanceServiceContainer.contentService.rootDesignItem)
+                    newSelection.push(d);
+            }
+            this.selectedElements = newSelection;
+            if (newSelection && newSelection.length > 0)
+                this.primarySelection = newSelection[0];
+            else
+                this.primarySelection = null;
+        }
+        this.onSelectionChanged.emit({ selectedElements: this.selectedElements, oldSelectedElements: oldSelectedElements });
+    }
+    clearSelectedElements() {
+        this.setSelectedElements([]);
+    }
+    isSelected(designItem) {
+        return this.selectedElements.indexOf(designItem) >= 0;
+    }
+    onSelectionChanged = new TypedEvent();
+}

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

@@ -0,0 +1,47 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+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";
+export declare abstract class AbstractStylesheetService implements IStylesheetService {
+    protected _stylesheets: Map<string, {
+        stylesheet: IStylesheet;
+        ast: any;
+    }>;
+    protected _documentStylesheets: Map<string, {
+        stylesheet: IDocumentStylesheet;
+        ast: any;
+    }>;
+    protected _allStylesheets: Map<string, {
+        stylesheet: IStylesheet | IDocumentStylesheet;
+        ast: any;
+    }>;
+    protected _instanceServiceContainer: InstanceServiceContainer;
+    constructor(designerCanvas: IDesignerCanvas);
+    setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
+    setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
+    internalSetStylesheets(stylesheets: IStylesheet[], targetMap: Map<string, {
+        stylesheet: IStylesheet;
+        ast: any;
+    }>): Promise<void>;
+    protected abstract internalParse(style: string): Promise<any>;
+    getStylesheets(): IStylesheet[];
+    abstract getAppliedRules(designItem: IDesignItem): IStyleRule[];
+    abstract getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
+    updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): void;
+    abstract insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
+    abstract removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
+    abstract updateCompleteStylesheet(name: string, newStyle: string): any;
+    abstract updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): any;
+    abstract updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean): any;
+    stylesheetChanged: TypedEvent<{
+        name: string;
+        newStyle: string;
+        oldStyle: string;
+        changeSource: 'extern' | 'styleupdate' | 'undo';
+    }>;
+    stylesheetsChanged: TypedEvent<void>;
+    protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;
+    static buildPatchedStyleSheet(value: CSSStyleSheet[]): string;
+    private static traverseAndCollectRules;
+}