@node-projects/web-component-designer 0.0.151 → 0.0.152

package/dist/elements/helper/LayoutHelper.js

@@ -58,9 +58,9 @@ export function placeDesignItem(container, designItem, offset, mode) {
         }
         if (!hasPositionedLayout)
             designItem.setStyle('position', 'absolute');
-        if (oldLeft)
+        if (oldLeft || oldRight == null)
             designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
-        if (oldTop)
+        if (oldTop || oldBottom == null)
             designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
         if (oldRight)
             designItem.setStyle('right', ((oldRight ?? 0) - offset.x + containerRight) + "px");

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -71,6 +71,7 @@ import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/sv
 import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js';
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
+import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -153,7 +154,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -105,6 +105,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       width: 100%;
       height: 100%;
       transform-origin: 0 0;
+      position: relative;
     }
 
     #node-projects-designer-canvas-canvas.dragFileActive {

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

@@ -0,0 +1,6 @@
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class FlexboxExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,21 @@
+import { flexboxExtensionShowOverlayOptionName } from "./FlexboxExtensionProvider.js";
+export class FlexboxExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'F';
+        btn.title = 'show flexbox overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[flexboxExtensionShowOverlayOptionName];
+            extensionOptions[flexboxExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

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

@@ -3,6 +3,7 @@ import { IDesignItem } from "../../../item/IDesignItem";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IDesignerExtension } from "./IDesignerExtension";
 import { IExtensionManager } from "./IExtensionManger";
+export declare const flexboxExtensionShowOverlayOptionName = "flexboxExtensionShowOverlay";
 export declare class FlexboxExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,10 +1,11 @@
 import { css } from "@node-projects/base-custom-webcomponent";
 import { FlexboxExtension } from "./FlexboxExtension";
+export const flexboxExtensionShowOverlayOptionName = 'flexboxExtensionShowOverlay';
 export class FlexboxExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         const display = getComputedStyle(designItem.element).display;
         if (display == 'flex' || display == 'inline-flex')
-            return true;
+            return designerView.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false;
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -0,0 +1,6 @@
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -0,0 +1,21 @@
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

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

@@ -1,3 +1,4 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
 import { AbstractExtension } from './AbstractExtension';
 import { OverlayLayer } from "./OverlayLayer.js";
 export class InvisibleDivExtension extends AbstractExtension {
@@ -9,8 +10,8 @@ export class InvisibleDivExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-invisible-div', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -3,10 +3,7 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { AbstractExtension } from "./AbstractExtension";
 import { IExtensionManager } from "./IExtensionManger";
 export declare class MouseOverExtension extends AbstractExtension {
-    private _line1;
-    private _line2;
-    private _line3;
-    private _line4;
+    private _rect;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;

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

@@ -2,10 +2,7 @@ import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../
 import { AbstractExtension } from "./AbstractExtension";
 const offset = 3;
 export class MouseOverExtension extends AbstractExtension {
-    _line1;
-    _line2;
-    _line3;
-    _line4;
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -14,14 +11,8 @@ export class MouseOverExtension extends AbstractExtension {
     }
     refresh() {
         let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, offset, this.designerCanvas);
-        this._line1 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'svg-hover', this._line1);
-        this._line2 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'svg-hover', this._line2);
-        this._line3 = this._drawLine(transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-hover', this._line3);
-        this._line4 = this._drawLine(transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-hover', this._line4);
-        this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect);
+        this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -14,8 +14,8 @@ export class TransformOriginExtension extends AbstractExtension {
         const y = 1;
         const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
         const toInPercentage = [];
-        toInPercentage[0] = parseInt(to[0]) / parseInt(this.extendedItem.element.style.width); // This value remains the same regardless of scalefactor
-        toInPercentage[1] = parseInt(to[1]) / parseInt(this.extendedItem.element.style.height); // This value remains the same regardless of scalefactor
+        toInPercentage[0] = parseInt(to[0]) / parseInt(getComputedStyle(this.extendedItem.element).width); // This value remains the same regardless of scalefactor
+        toInPercentage[1] = parseInt(to[1]) / parseInt(getComputedStyle(this.extendedItem.element).height); // This value remains the same regardless of scalefactor
         const toDOMPoint = new DOMPoint(rect.x + toInPercentage[x] * rect.width, rect.y + toInPercentage[y] * rect.height);
         this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
         this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();

package/dist/index.d.ts

@@ -162,6 +162,7 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";

package/dist/index.js

@@ -119,6 +119,7 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",