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

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

@@ -8,25 +8,39 @@ export class TransformOriginExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        const rect = this.extendedItem.element.getBoundingClientRect();
+        const rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computed = getComputedStyle(this.extendedItem.element);
-        const to = computed.transformOrigin.split(' ');
-        this._circle = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 5 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
+        const x = 0;
+        const y = 1;
+        const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
+        const toInPercentage = [];
+        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();
-        this._circle.style.cursor = 'pointer';
-        this._circle2 = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 1 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
+        this._circle.setAttribute('style', 'cursor: pointer');
+        this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.scaleFactor, 'svg-transform-origin');
         this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
-        this._circle2.style.pointerEvents = 'none';
+        this._circle2.setAttribute('style', 'pointer-events: none');
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window
+        if (this.extendedItem.styles.get('transform-origin') == null || this.extendedItem.styles.get('transform-origin') == '') {
+            this.extendedItem.setStyle('transform-origin', this._circle.getAttribute('cx') + ' ' + this._circle.getAttribute('cy'));
+        }
     }
     pointerEvent(event) {
         event.stopPropagation();
-        const rect = this.extendedItem.element.getBoundingClientRect();
-        const rectNr = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element); //.getBoundingClientRect();
+        const rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computed = getComputedStyle(this.extendedItem.element);
-        const to = computed.transformOrigin.split(' ');
+        const x = 0;
+        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
+        const toDOMPoint = new DOMPoint(rect.x + toInPercentage[x] * rect.width, rect.y + toInPercentage[y] * rect.height);
         const normalized = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
@@ -37,10 +51,10 @@ export class TransformOriginExtension extends AbstractExtension {
                 if (this._startPos && event.buttons > 0) {
                     const dx = normalized.x - this._startPos.x;
                     const dy = normalized.y - this._startPos.y;
-                    this._circle.setAttribute('cx', ((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle.setAttribute('cy', ((rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')) + dy));
-                    this._circle2.setAttribute('cx', ((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle2.setAttribute('cy', ((rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle.setAttribute('cx', (toDOMPoint.x + dx));
+                    this._circle.setAttribute('cy', (toDOMPoint.y + dy));
+                    this._circle2.setAttribute('cx', (toDOMPoint.x + dx));
+                    this._circle2.setAttribute('cy', (toDOMPoint.y + dy));
                 }
                 break;
             case EventNames.PointerUp:
@@ -48,13 +62,9 @@ export class TransformOriginExtension extends AbstractExtension {
                 if (this._startPos) {
                     const dx = normalized.x - this._startPos.x;
                     const dy = normalized.y - this._startPos.y;
-                    const x = Number.parseFloat(to[0].replace('px', ''));
-                    const y = Number.parseFloat(to[1].replace('px', ''));
-                    const newX = (dx + x);
-                    const newY = (dy + y);
-                    const przX = Math.round(newX / rectNr.width * 10000) / 100;
-                    const przY = Math.round(newY / rectNr.height * 10000) / 100;
-                    this.extendedItem.setStyle('transform-origin', przX + '% ' + przY + '%');
+                    const newX = (dx + parseFloat(to[x]));
+                    const newY = (dy + parseFloat(to[y]));
+                    this.extendedItem.setStyle('transform-origin', newX + 'px' + ' ' + newY + 'px');
                     this.refresh();
                     this._startPos = null;
                 }

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

@@ -23,6 +23,7 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
     drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    drawPath(data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
     drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
     drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
 }

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

@@ -135,6 +135,16 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             rect.setAttribute('class', className);
         return rect;
     }
+    drawPath(data, className, path, overlayLayer) {
+        if (!path) {
+            path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            this.addOverlay(path, overlayLayer);
+        }
+        path.setAttribute('d', data);
+        if (className)
+            path.setAttribute('class', className);
+        return path;
+    }
     drawText(text, x, y, className, textEl, overlayLayer) {
         if (!textEl) {
             textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");

package/dist/elements/widgets/designerView/tools/PointerTool.d.ts

@@ -18,6 +18,7 @@ export declare class PointerTool implements ITool {
     private _dragExtensionItem;
     private _moveItemsOffset;
     private _initialOffset;
+    private _started;
     private _firstTimeInMove;
     private _secondTimeInMove;
     private _changeGroup;

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -17,6 +17,8 @@ export class PointerTool {
     _dragExtensionItem;
     _moveItemsOffset = { x: 0, y: 0 };
     _initialOffset;
+    _started = false;
+    ;
     _firstTimeInMove;
     _secondTimeInMove;
     _changeGroup;
@@ -273,6 +275,15 @@ export class PointerTool {
                             }
                             else {
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
+                                if (!this._started) {
+                                    for (const item of this._actionStartedDesignItems) {
+                                        designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
+                                        designerCanvas.extensionManager.removeExtension(item, ExtensionType.MouseOver);
+                                        designerCanvas.extensionManager.applyExtension(item, ExtensionType.Placement);
+                                    }
+                                    currentContainerService.startPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
+                                    this._started = true;
+                                }
                                 currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
                             designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems);
@@ -282,6 +293,7 @@ export class PointerTool {
                 }
             case EventNames.PointerUp:
                 {
+                    this._started = false;
                     if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
                         if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey) {
                             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem]);
@@ -301,6 +313,10 @@ export class PointerTool {
                             containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                             this._changeGroup.commit();
                             this._changeGroup = null;
+                            for (const item of this._actionStartedDesignItems) {
+                                designerCanvas.extensionManager.applyExtension(item, ExtensionType.MouseOver);
+                                designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
+                            }
                         }
                         designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
                         this._dragExtensionItem = null;

package/dist/index.d.ts

@@ -160,6 +160,9 @@ export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExt
 export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
 export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
 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

@@ -117,6 +117,9 @@ export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExt
 export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
 export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
 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/interfaces/IPoint3D.d.ts

@@ -0,0 +1,5 @@
+export interface IPoint3D {
+    x: number;
+    y: number;
+    z: number;
+}

package/dist/interfaces/IPoint3D.js

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

package/package.json

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