@node-projects/web-component-designer 0.1.128 → 0.1.129

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -12,7 +12,7 @@ import { Lit2PropertiesService } from './propertiesService/services/Lit2Properti
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
 import { ElementDragTitleExtensionProvider } from '../widgets/designerView/extensions/ElementDragTitleExtensionProvider.js';
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
-import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
+import { MarginExtensionProvider } from '../widgets/designerView/extensions/MarginExtensionProvider.js';
 import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
 import { HighlightElementExtensionProvider } from '../widgets/designerView/extensions/HighlightElementExtensionProvider.js';
 import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
@@ -91,6 +91,7 @@ import { BlockToolbarExtensionProvider } from '../widgets/designerView/extension
 import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js';
 import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js';
 import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js';
+import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -127,7 +128,8 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
         new TransformOriginExtensionProvider(true),
-        new CanvasExtensionProvider(),
+        new MarginExtensionProvider(),
+        new PaddingExtensionProvider(),
         new PositionExtensionProvider(),
         new SvgElementExtensionProvider(),
         new ResizeExtensionProvider(true),

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

@@ -164,10 +164,12 @@ export class AbstractPropertiesService {
         if (!bindings) {
             const services = designItem.serviceContainer.getServices('bindingService');
             bindings = [];
-            for (const s of services) {
-                const bs = s.getBindings(designItem);
-                if (bs && bs.length > 0) {
-                    bindings.push(...bs);
+            if (services) {
+                for (const s of services) {
+                    const bs = s.getBindings(designItem);
+                    if (bs && bs.length > 0) {
+                        bindings.push(...bs);
+                    }
                 }
             }
             AbstractPropertiesService._bindingsCache.set(designItem, bindings);

package/dist/elements/widgets/designerView/extensions/MarginExtension.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.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.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.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/PaddingExtension.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 PaddingExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,36 @@
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from './OverlayLayer.js';
+export class PaddingExtension 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.paddingLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.paddingTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.paddingRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.paddingBottom.replace('px', ''));
+            const bleft = Number.parseFloat(computedStyle.borderLeftWidth.replace('px', ''));
+            const btop = Number.parseFloat(computedStyle.borderTopWidth.replace('px', ''));
+            const bright = Number.parseFloat(computedStyle.borderRightWidth.replace('px', ''));
+            const bbottom = Number.parseFloat(computedStyle.borderBottomWidth.replace('px', ''));
+            if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
+                if (this._valuesHaveChanges(left, top, right, bottom, bleft, btop, bright, bbottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
+                    this._removeAllOverlays();
+                    this._drawRect(itemRect.x + bleft + left, itemRect.y + btop, itemRect.width - left - right - bleft - bright, top, 'svg-padding', null, OverlayLayer.Background);
+                    this._drawRect(itemRect.x + bleft, itemRect.y + btop, left, itemRect.height - btop - bbottom, 'svg-padding', null, OverlayLayer.Background);
+                    this._drawRect(itemRect.x + bleft + left, itemRect.y + itemRect.height - bottom - bbottom, itemRect.width - left - right - bleft - bright, bottom, 'svg-padding', null, OverlayLayer.Background);
+                    this._drawRect(itemRect.x + itemRect.width - right - bright, itemRect.y + btop, right, itemRect.height - btop - bbottom, 'svg-padding', null, OverlayLayer.Background);
+                }
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PaddingExtensionProvider.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 PaddingExtensionProvider 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/PaddingExtensionProvider.js

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

package/dist/index.d.ts

@@ -204,8 +204,10 @@ export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtension.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtension.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";

package/dist/index.js

@@ -145,8 +145,10 @@ export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtension.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtension.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.128",
+  "version": "0.1.129",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",