@node-projects/web-component-designer 0.1.246 → 0.1.248

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

@@ -0,0 +1,155 @@
+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 AbsolutePlacementService {
+    serviceForContainer(container, containerStyle, mode, item, event) {
+        if (item != null && (item.getComputedStyle()?.position == 'absolute' || item.getComputedStyle()?.position == 'relative'))
+            return true;
+        /*if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
+          containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
+          return false;*/
+        return mode == 'drop' && event.ctrlKey;
+    }
+    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, designerCanvas, startPoint, offsetInControl, newPoint, item) {
+        let trackX = newPoint.x - startPoint.x;
+        let trackY = newPoint.y - startPoint.y;
+        if (!event.ctrlKey) {
+            if (designerCanvas.alignOnGrid) {
+                let p = getDesignItemCurrentPos(item, 'position');
+                p.x = p.x % designerCanvas.gridSize;
+                p.y = p.y % designerCanvas.gridSize;
+                trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize - p.x;
+                trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize - p.y;
+            }
+            else if (designerCanvas.alignOnSnap) {
+                let rect = item.element.getBoundingClientRect();
+                let newPos = designerCanvas.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / designerCanvas.scaleFactor, height: rect.height / designerCanvas.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, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
+        let trackX = newPoint.x;
+        let trackY = newPoint.y;
+        if (!event.ctrlKey) {
+            if (designerCanvas.alignOnGrid) {
+                trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize;
+                trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize;
+            }
+            else if (designerCanvas.alignOnSnap) {
+                let newPos = designerCanvas.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, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
+    }
+    place(event, designerCanvas, 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, designerCanvas, 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, mode) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            if (mode == 'drop')
+                i.setStyle('position', 'absolute');
+            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, designerCanvas, 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) {
+            designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
+        }
+    }
+}

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

@@ -18,5 +18,6 @@ export interface IProperty {
     value?: any;
     service: IPropertiesService;
     defaultValue?: any;
+    example?: string;
     propertyType: PropertyType;
 }

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

@@ -16,34 +16,39 @@ export class AbstractPolymerLikePropertiesService extends AbstractPropertiesServ
         for (const name in list) {
             const polymerProperty = list[name];
             let type = polymerProperty;
-            if (polymerProperty.type)
+            let description = null;
+            let example = null;
+            if (polymerProperty.type) {
                 type = polymerProperty.type;
+                description = polymerProperty.description;
+                example = polymerProperty.example;
+            }
             if (type === String) {
-                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Object) {
-                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Number) {
-                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Date) {
-                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Boolean) {
-                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (PropertiesHelper.isTypescriptEnum(type)) {
-                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else {
-                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
         }

package/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.js.map

@@ -1 +1 @@
-{"version":3,"file":"AbstractPolymerLikePropertiesService.js","sourceRoot":"","sources":["../../../../../src/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AbstractPolymerLikePropertiesService.js","sourceRoot":"","sources":["../../../../../src/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.ts"],"names":[],"mappings":"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"}

package/dist/elements/widgets/bindings/BindingsEditor.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare enum targetType {
+    'property' = "property",
+    'style' = "style",
+    'attribute' = "attribute",
+    'event' = "event"
+}
+export declare enum valueType {
+    'string' = "string",
+    'number' = "number",
+    'boolean' = "boolean"
+}
+export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor(targetType: targetType);
+}

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -0,0 +1,54 @@
+import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
+export var targetType;
+(function (targetType) {
+    targetType["property"] = "property";
+    targetType["style"] = "style";
+    targetType["attribute"] = "attribute";
+    targetType["event"] = "event";
+})(targetType || (targetType = {}));
+export var valueType;
+(function (valueType) {
+    valueType["string"] = "string";
+    valueType["number"] = "number";
+    valueType["boolean"] = "boolean";
+})(valueType || (valueType = {}));
+export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    * { font-size: 16px; }
+    .list { 
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    `;
+    static template = html `
+   <div class="list" style="">
+    <span>Expression</span>
+    <div>
+      <input style="width:100%;">
+      <button>...</button>
+    </div>
+    <!--<span>Target</span>
+    <select id="target">
+        <option>Property</option>
+        <option>Attribute</option>
+        <option>Style</option>
+        <option>Event</option>
+    </select>-->
+    <div>
+      <input id="mode" type="checkbox"><label for="mode">Two Way</label>    
+    </div>
+    <div>
+      <input id="inverted" type="checkbox"><label for="inverted">Inverted</label>   
+    </div>
+    <div>
+      <input id="nullSafe" type="checkbox"><label for="nullSafe">Null Safe</label>   
+    </div>
+</div>
+  `;
+    constructor(targetType) {
+        super();
+    }
+}
+customElements.define('node-projects-bindings-editor', BindingsEditor);
+//# sourceMappingURL=BindingsEditor.js.map

package/dist/elements/widgets/bindings/BindingsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BindingsEditor.js","sourceRoot":"","sources":["../../../../src/elements/widgets/bindings/BindingsEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,uCAAuC,EAAE,IAAI,EAAE,MAAM,yCAAyC,CAAC;AAE7G,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,mCAAuB,CAAA;IACvB,6BAAiB,CAAA;IACjB,qCAAyB,CAAA;IACzB,6BAAiB,CAAA;AACnB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAED,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,8BAAmB,CAAA;IACnB,8BAAmB,CAAA;IACnB,gCAAqB,CAAA;AACvB,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,OAAO,cAAe,SAAQ,uCAAuC;IAEzE,MAAM,CAAmB,KAAK,GAAG,GAAG,CAAA;;;;;;;KAOjC,CAAC;IAEJ,MAAM,CAAmB,QAAQ,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBvC,CAAC;IAEF,YAAY,UAAsB;QAChC,KAAK,EAAE,CAAC;IACV,CAAC;;AAMH,cAAc,CAAC,MAAM,CAAC,+BAA+B,EAAE,cAAc,CAAC,CAAC"}

package/dist/elements/widgets/designerView/DomConverter.d.ts

@@ -2,6 +2,6 @@ import { IDesignItem } from "../../item/IDesignItem.js";
 export declare class DomConverter {
     static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
     static normalizeContentValue(value: string): string;
-    static IsSelfClosingElement(tag: string): tag is "link" | "img" | "area" | "base" | "br" | "col" | "embed" | "hr" | "input" | "keygen" | "meta" | "param" | "source" | "track" | "wbr";
+    static IsSelfClosingElement(tag: string): tag is "link" | "img" | "input" | "br" | "area" | "base" | "col" | "embed" | "hr" | "keygen" | "meta" | "param" | "source" | "track" | "wbr";
     static ConvertToString(designItems: IDesignItem[], beautifyOutput?: boolean, updatePositions?: boolean): string;
 }

package/dist/elements/widgets/designerView/extensions/CanvasExtension.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/CanvasExtension.js

@@ -0,0 +1,31 @@
+import { AbstractExtension } from './AbstractExtension.js';
+export class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
+                if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
+                    this._removeAllOverlays();
+                    this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
+                    this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
+                    this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
+                    this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+                }
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/CanvasExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class CanvasExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/CanvasExtensionProvider.js

@@ -0,0 +1,16 @@
+import { CanvasExtension } from './CanvasExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from '../../../item/NodeType.js';
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType == NodeType.Element)
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944766; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/MarginExtension copy.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class MarginExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/MarginExtension copy.js

@@ -0,0 +1,32 @@
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from './OverlayLayer.js';
+export class MarginExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
+                if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
+                    this._removeAllOverlays();
+                    this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin', null, OverlayLayer.Background);
+                    this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin', null, OverlayLayer.Background);
+                    this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin', null, OverlayLayer.Background);
+                    this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin', null, OverlayLayer.Background);
+                }
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/MarginExtensionProvider copy.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class MarginExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/MarginExtensionProvider copy.js

@@ -0,0 +1,16 @@
+import { MarginExtension } from './MarginExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from '../../../item/NodeType.js';
+export class MarginExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType == NodeType.Element)
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new MarginExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944766; }
+  `;
+}

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

@@ -0,0 +1,12 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem.js";
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class AbstractDesignViewConfigButton implements IDesignViewConfigButtonsProvider {
+    protected settingName: any;
+    private content;
+    private tooltp;
+    private contextmenu;
+    constructor(settingName: string, content: string | HTMLElement, tooltip: string, contextmenu?: IContextMenuItem[]);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,46 @@
+import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js";
+export class AbstractDesignViewConfigButton {
+    settingName;
+    content;
+    tooltp;
+    contextmenu;
+    constructor(settingName, content, tooltip, contextmenu) {
+        this.settingName = settingName;
+        this.content = content;
+        this.tooltp = tooltip;
+        this.contextmenu = contextmenu;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const btn = document.createElement('div');
+        if (typeof this.content == 'string')
+            btn.innerHTML = this.content;
+        else
+            btn.appendChild(this.content);
+        btn.title = this.tooltp;
+        btn.className = 'toolbar-control';
+        designerCanvas.instanceServiceContainer.designContext.extensionOptionsChanged.on(() => {
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        });
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        if (extensionOptions[this.settingName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[this.settingName];
+            extensionOptions[this.settingName] = val === false ? true : false;
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        btn.oncontextmenu = (e) => {
+            e.preventDefault();
+            if (this.contextmenu) {
+                ContextMenu.show(this.contextmenu, e);
+            }
+        };
+        return [btn];
+    }
+}

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

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

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

@@ -0,0 +1,7 @@
+import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(gridExtensionShowOverlayOptionName, "G", "show grid overlay");
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/OptionsConfigButton.d.ts

@@ -0,0 +1,12 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem.js";
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class AbstractDesignViewConfigButton implements IDesignViewConfigButtonsProvider {
+    protected settingName: any;
+    private content;
+    private tooltp;
+    private contextmenu;
+    constructor(settingName: string, content: string | HTMLElement, tooltip: string, contextmenu?: IContextMenuItem[]);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/OptionsConfigButton.js

@@ -0,0 +1,46 @@
+import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js";
+export class AbstractDesignViewConfigButton {
+    settingName;
+    content;
+    tooltp;
+    contextmenu;
+    constructor(settingName, content, tooltip, contextmenu) {
+        this.settingName = settingName;
+        this.content = content;
+        this.tooltp = tooltip;
+        this.contextmenu = contextmenu;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const btn = document.createElement('div');
+        if (typeof this.content == 'string')
+            btn.innerHTML = this.content;
+        else
+            btn.appendChild(this.content);
+        btn.title = this.tooltp;
+        btn.className = 'toolbar-control';
+        designerCanvas.instanceServiceContainer.designContext.extensionOptionsChanged.on(() => {
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        });
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        if (extensionOptions[this.settingName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[this.settingName];
+            extensionOptions[this.settingName] = val === false ? true : false;
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        btn.oncontextmenu = (e) => {
+            e.preventDefault();
+            if (this.contextmenu) {
+                ContextMenu.show(this.contextmenu, e);
+            }
+        };
+        return [btn];
+    }
+}

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

@@ -230,7 +230,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                         let label = document.createElement("label");
                         label.htmlFor = p.name;
                         label.textContent = p.name;
-                        label.title = p.name + ' (type: ' + p.type + (p.defaultValue ? ', default: ' + p.defaultValue : '') + ', propertytype: ' + p.propertyType + ')';
+                        label.title = p.description ?? (p.name + ' (type: ' + p.type + (p.defaultValue ? ', default: ' + p.defaultValue : '') + ', propertytype: ' + p.propertyType + ')');
                         label.ondragleave = (e) => this._onDragLeave(e, p, label);
                         label.ondragover = (e) => this._onDragOver(e, p, label);
                         label.ondrop = (e) => this._onDrop(e, p, label);