@node-projects/web-component-designer 0.1.100 → 0.1.101

package/dist/elements/services/placementService/DefaultPlacementService copy.d.ts

@@ -0,0 +1,19 @@
+import type { IPoint } from '../../../interfaces/IPoint.js';
+import type { IPlacementService } from './IPlacementService.js';
+import type { IDesignItem } from '../../item/IDesignItem.js';
+import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+export declare class DefaultPlacementService implements IPlacementService {
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    isEnterableContainer(container: IDesignItem): boolean;
+    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
+    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
+    private calculateTrack;
+    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
+    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+}

package/dist/elements/services/placementService/DefaultPlacementService copy.js

@@ -0,0 +1,151 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
+import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from '../../helper/LayoutHelper.js';
+import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
+import { straightenLine } from '../../helper/PathDataPolyfill.js';
+export class DefaultPlacementService {
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
+            containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
+            return false;
+        return true;
+    }
+    isEnterableContainer(container) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        return true;
+    }
+    canEnter(container, items) {
+        if (!this.isEnterableContainer(container))
+            return false;
+        if (!items.every(x => !x.element.contains(container.element) && x !== container))
+            return false;
+        return true;
+    }
+    canLeave(container, items) {
+        return true;
+    }
+    getElementOffset(container, designItem) {
+        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
+    }
+    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
+        let trackX = newPoint.x - startPoint.x;
+        let trackY = newPoint.y - startPoint.y;
+        if (!event.ctrlKey) {
+            if (placementView.alignOnGrid) {
+                let p = getDesignItemCurrentPos(item, 'position');
+                p.x = p.x % placementView.gridSize;
+                p.y = p.y % placementView.gridSize;
+                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize - p.x;
+                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize - p.y;
+            }
+            else if (placementView.alignOnSnap) {
+                let rect = item.element.getBoundingClientRect();
+                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                if (newPos.x !== null) {
+                    trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
+                }
+                else {
+                    trackX = Math.round(trackX);
+                }
+                if (newPos.y !== null) {
+                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
+                }
+                else {
+                    trackY = Math.round(trackY);
+                }
+            }
+        }
+        return { x: trackX, y: trackY };
+    }
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        let trackX = newPoint.x;
+        let trackY = newPoint.y;
+        if (!event.ctrlKey) {
+            if (placementView.alignOnGrid) {
+                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
+                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
+            }
+            else if (placementView.alignOnSnap) {
+                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                if (newPos.x !== null) {
+                    trackX = newPos.x;
+                }
+                else {
+                    trackX = Math.round(trackX);
+                }
+                if (newPos.y !== null) {
+                    trackY = newPos.y;
+                }
+                else {
+                    trackY = Math.round(trackY);
+                }
+            }
+        }
+        return { x: trackX, y: trackY };
+    }
+    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    }
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        //TODO: this should revert all undo actions while active
+        //maybe a undo actions returns itself or an id so it could be changed?
+        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
+        if (event.shiftKey) {
+            track = straightenLine({ x: 0, y: 0 }, track, true);
+        }
+        let filteredItems = filterChildPlaceItems(items);
+        for (const designItem of filteredItems) {
+            const canvas = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element;
+            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.parent.element, canvas, true);
+            let transformMatrixParentTransformsCompensated = null;
+            if (originalElementAndAllAncestorsMultipliedMatrix) {
+                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
+            }
+            else {
+                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
+            }
+            const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
+            combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
+        }
+    }
+    moveElements(designItems, position, absolute) {
+        //TODO: Check if we set left or right
+        //TODO: Use CSS units
+        for (let d of designItems) {
+            if (position.x)
+                d.setStyle('left', parseInt(d.element.style.left) - position.x + 'px');
+            if (position.y)
+                d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
+        }
+        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
+    }
+    enterContainer(container, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            container.insertChild(i);
+            if (i.lastContainerSize) {
+                if (!i.hasStyle('width'))
+                    i.setStyle('width', i.lastContainerSize.width + 'px');
+                if (!i.hasStyle('height'))
+                    i.setStyle('height', i.lastContainerSize.height + 'px');
+            }
+        }
+    }
+    leaveContainer(container, items) {
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (const designItem of filterdItems) {
+            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
+            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
+            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
+            let track = { x: translation.x, y: translation.y };
+            placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
+        }
+        for (const item of items) {
+            placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class NativeElementsPropertiesService extends CommonPropertiesService {
+    private inputProperties;
+    private textareaProperties;
+    private selectProperties;
+    private buttonProperties;
+    private anchorProperties;
+    private divProperties;
+    private imgProperties;
+    private iframeProperties;
+    private formElementProperties;
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,243 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class NativeElementsPropertiesService extends CommonPropertiesService {
+    inputProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
+            service: this,
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "checked",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "min",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "max",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "valueAsDate",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "valueAsNumber",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        }
+    ];
+    textareaProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "maxlength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "cols",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "rows",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "resize",
+            type: "list",
+            values: ["both", "none", "horizontal", "vertical"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    selectProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "size",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "multiple",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    buttonProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["button", "submit", "reset"],
+            service: this,
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    anchorProperties = [
+        {
+            name: "href",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    divProperties = [
+        {
+            name: "title",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    imgProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    iframeProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    formElementProperties = [
+        {
+            name: "autofocus",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "required",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "native";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        switch (designItem.element.localName) {
+            case 'input':
+            case 'textarea':
+            case 'select':
+            case 'button':
+            case 'a':
+            case 'div':
+            case 'span':
+            case 'br':
+            case 'img':
+            case 'iframe':
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                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 'input':
+                return [...this.inputProperties, ...this.formElementProperties];
+            case 'textarea':
+                return [...this.textareaProperties, ...this.formElementProperties];
+            case 'select':
+                return [...this.selectProperties, ...this.formElementProperties];
+            case 'button':
+                return [...this.buttonProperties, ...this.formElementProperties];
+            case 'a':
+                return this.anchorProperties;
+            case 'div':
+                return this.divProperties;
+            case 'img':
+                return this.imgProperties;
+            case 'iframe':
+                return this.iframeProperties;
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return [];
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class NativeElementsPropertiesService extends CommonPropertiesService {
+    private inputProperties;
+    private textareaProperties;
+    private selectProperties;
+    private buttonProperties;
+    private anchorProperties;
+    private divProperties;
+    private imgProperties;
+    private iframeProperties;
+    private formElementProperties;
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

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

@@ -0,0 +1,243 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class NativeElementsPropertiesService extends CommonPropertiesService {
+    inputProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
+            service: this,
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "checked",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "min",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "max",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "valueAsDate",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "valueAsNumber",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        }
+    ];
+    textareaProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "maxlength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "cols",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "rows",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "resize",
+            type: "list",
+            values: ["both", "none", "horizontal", "vertical"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    selectProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "size",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "multiple",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    buttonProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["button", "submit", "reset"],
+            service: this,
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    anchorProperties = [
+        {
+            name: "href",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    divProperties = [
+        {
+            name: "title",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    imgProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    iframeProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    formElementProperties = [
+        {
+            name: "autofocus",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "required",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "native";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        switch (designItem.element.localName) {
+            case 'input':
+            case 'textarea':
+            case 'select':
+            case 'button':
+            case 'a':
+            case 'div':
+            case 'span':
+            case 'br':
+            case 'img':
+            case 'iframe':
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                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 'input':
+                return [...this.inputProperties, ...this.formElementProperties];
+            case 'textarea':
+                return [...this.textareaProperties, ...this.formElementProperties];
+            case 'select':
+                return [...this.selectProperties, ...this.formElementProperties];
+            case 'button':
+                return [...this.buttonProperties, ...this.formElementProperties];
+            case 'a':
+                return this.anchorProperties;
+            case 'div':
+                return this.divProperties;
+            case 'img':
+                return this.imgProperties;
+            case 'iframe':
+                return this.iframeProperties;
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return [];
+        }
+        return null;
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts

@@ -0,0 +1,5 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare const enableStylesheetService = "enableStylesheetService";
+export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js

@@ -0,0 +1,7 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export const enableStylesheetService = 'enableStylesheetService';
+export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(enableStylesheetService, "ss", "modify Stylesheet");
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/{DrawToolPopup copy.d.ts → PointerToolPopup copy.d.ts }

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
+export declare class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
     static style: CSSStyleSheet;
     static template: HTMLTemplateElement;
     constructor();

package/dist/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup copy.js

@@ -0,0 +1,49 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class PointerToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}
+customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.d.ts

@@ -0,0 +1,6 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup copy.js

@@ -0,0 +1,49 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { assetsPath } from "../../../../../../Constants.js";
+export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+      .container {
+          width: 120px;
+          min-height: 100px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .tool {
+          height: 32px;
+          width: 32px;
+          background-color: rgb(255, 255, 255);
+          background-size: 65%;
+          background-repeat: no-repeat;
+          background-position: center center;
+          flex-shrink: 0;
+          border-bottom: 1px solid black;
+      }
+      .tools {
+          display: flex;
+          flex-wrap: wrap;
+          margin-bottom: 5px;
+          gap: 3px;
+      }`;
+    static template = html `
+        <div class="container">
+          <header><h2 id="title" style="margin: 0;">Selection</h2></header>
+          <main id="content-area">
+            <div class="tools">
+              <div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
+              <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
+            let div = e;
+            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
+        }
+    }
+}
+customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup);

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

@@ -122,4 +122,4 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-customElements.define('node-projects-property-grid', PropertyGrid);
+customElements.define('node-projects-web-component-designer-property-grid', PropertyGrid);

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

@@ -53,7 +53,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     <div title="textContent" id="contentRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
     <span class="desc">Content:</span><input type="text" id="content">
   </div>
-  <node-projects-property-grid id="pg"></node-projects-property-grid>`;
+  <node-projects-web-component-designer-property-grid id="pg"></node-projects-web-component-designer-property-grid>`;
     _type;
     _id;
     _content;
@@ -167,4 +167,4 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         });
     }
 }
-customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);
+customElements.define('node-projects-web-component-designer-property-grid-with-header', PropertyGridWithHeader);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.100",
+  "version": "0.1.101",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

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

@@ -1,2 +0,0 @@
-declare function getProtoProperties(target: any): string[];
-declare function getAttributesIfCustomElement(target: any): any;

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

@@ -1,71 +0,0 @@
-"use strict";
-function getProtoProperties(target) {
-    // If this is a custom element, you need to go up the prototype
-    // chain until you get proper HTMLElement, since everything under it
-    // is generated prototypes and will have propeties that are dupes (like:
-    // every observedAttribute is also mirrored as a property)
-    const isCustomElement = target.tagName.indexOf('-') !== -1;
-    let proto = target.__proto__;
-    if (isCustomElement) {
-        while (proto.constructor !== window.HTMLElement.prototype.constructor) {
-            proto = proto.__proto__;
-        }
-    }
-    let protoProps = {};
-    // We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
-    if (proto.constructor.name === 'HTMLAnchorElement') {
-        protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
-        protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
-        proto = proto.__proto__;
-    }
-    while (proto.constructor.name !== 'Element') {
-        Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
-        proto = proto.__proto__;
-    }
-    let propNames = Object.keys(protoProps).sort();
-    // Skip some very specific Polymer/element properties.
-    let blacklist = [
-        // Polymer specific
-        'isAttached',
-        'constructor', 'created', 'ready', 'attached', 'detached',
-        'attributeChanged', 'is', 'listeners', 'observers', 'properties',
-        // Native elements ones we don't care about
-        'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
-        'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
-        'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
-        'lowsrc', 'longDesc',
-        // Specific elements stuff
-        'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
-        'selectionDirection', 'selectionStart', 'selectionEnd'
-    ];
-    let i = 0;
-    while (i < propNames.length) {
-        let name = propNames[i];
-        // Skip everything that starts with a _ which is a Polymer private/protected
-        // and you probably don't care about it.
-        // Also anything in the blacklist. Or that starts with webkit.
-        if (name.charAt(0) === '_' ||
-            name === 'keyEventTarget' ||
-            blacklist.indexOf(name) !== -1 ||
-            name.indexOf('webkit') === 0 ||
-            name.indexOf('on') === 0) {
-            propNames.splice(i, 1);
-            continue;
-        }
-        // Skip everything that doesn't have a setter.
-        if (!protoProps[name].set) {
-            propNames.splice(i, 1);
-            continue;
-        }
-        i++;
-    }
-    return propNames || [];
-}
-function getAttributesIfCustomElement(target) {
-    if (target.tagName.indexOf('-') !== -1) {
-        return target.constructor.observedAttributes;
-    }
-    else {
-        return [];
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.js

@@ -1,102 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { assetsPath } from "../../../../../../Constants.js";
-export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 220px;
-          min-height: 200px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-      }
-      .inputs{
-        float: left;
-        margin-top: 5px;
-        align-items: center;
-      }
-      .input {
-        display: flex;
-        align-items: center; 
-        margin-top: 5px;
-      }
-      .text {
-        margin-left: 5px;
-        font-size: 14px;
-      }
-      .strokecolor{ 
-        float: both;
-      }
-      .fillbrush{
-        float: both;
-      }
-      .strokethickness{
-        float: both;
-      }
-      
-      `;
-    static template = html `
-        <div class="container">
-          <header><h2 id="title" style="margin: 0;">Draw</h2></header>
-          <main id="content-area">
-            <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
-            </div>
-            <div class="inputs">
-              <div class="input">
-                <input id="strokecolor" class="strokecolor" type="color" title="stroke color" value="#000000" style="padding: 0; width:31px; height:31px;">
-                <text class="text">Stroke Color</text>
-              </div>
-              <div class="input">
-                <input id="fillbrush" class="fillbrush" type="color" title="fill brush" value="#ffffff" style="padding: 0; width:31px; height:31px;">
-                <text class="text">Fill Brush</text>
-              </div>
-              <div class="input">
-                <input id="strokethickness" class="strokethickness" type="range" title="stroke thickness" min="1" max="20" value="3" style="padding: 0; width:80px; height:20px; margin-right: 5px;">
-                <text class="text">Stroke Thickness</text>
-              </div>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-        if (this.shadowRoot.querySelector("input.strokecolor")) {
-            let input = this._getDomElement("strokecolor");
-            input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);
-        }
-        if (this.shadowRoot.querySelector("input.fillbrush")) {
-            let input = this._getDomElement("fillbrush");
-            input.onchange = () => this.getRootNode().host.setFillBrush(input.value);
-        }
-        if (this.shadowRoot.querySelector("input.strokethickness")) {
-            let input = this._getDomElement("strokethickness");
-            input.onchange = () => this.getRootNode().host.setStrokeThickness(input.value);
-        }
-    }
-}
-customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);