@node-projects/web-component-designer 0.1.74 → 0.1.76

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

@@ -13,7 +13,7 @@ export class DefaultPlacementService {
     isEnterableContainer(container) {
         if (DomConverter.IsSelfClosingElement(container.element.localName))
             return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+        if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
             return false;
         return true;
     }

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

@@ -18,10 +18,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
             let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
             let text = this.extendedItem.name;
             this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
-            if (w > this._width)
-                text = this.extendedItem.name.substring(0, 10) + '…';
             this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
-            this._text = this._drawHTML('<span>' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
+            this._text = this._drawHTML('<span style="width: 100%;position: absolute;overflow: hidden;text-overflow: ellipsis;">' + text + '</span>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
             this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
             this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
@@ -47,6 +45,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
                 this._text.setAttribute('x', '' + transformedCornerPoints[0].x);
                 this._text.setAttribute('y', '' + transformedCornerPoints[0].y);
                 this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
+                this._text.setAttribute('height', '' + h);
+                this._text.setAttribute('width', '' + w);
                 this._text.style.transformBox = 'fill-box';
                 this._text.style.rotate = angle + 'deg';
             }

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

@@ -9,6 +9,5 @@ export class ElementDragTitleExtensionProvider {
     }
     style = css `
     .svg-text-primary { stroke: none; color: white; font-family: monospace; }
-    .svg-text-primary.span { width: 100%; position: absolute; text-overflow: ellipsis; overflow: hidden; }
   `;
 }

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

@@ -32,7 +32,7 @@ export class ResizeExtension extends AbstractExtension {
             this.remove();
             return;
         }
-        if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y)) {
+        if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y)) {
             this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
             this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
             this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js

@@ -14,14 +14,14 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend(cache, event) {
-        this.refresh(event);
-    }
-    refresh(cache, event) {
-        this.gridInformation = calculateGridInformation(this.extendedItem);
         this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
         this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
         this._group.style.transformOrigin = '0 0';
         this._group.style.transformBox = 'fill-box';
+        this.refresh(event);
+    }
+    refresh(cache, event) {
+        this.gridInformation = calculateGridInformation(this.extendedItem);
         this.gridInformation.gaps.forEach((gap, i) => {
             if (gap.width < 3) {
                 gap.width = 3;
@@ -32,12 +32,12 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                 gap.y--;
             }
             let rect = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal);
-            this._group.appendChild(rect);
             if (!this._resizers[i]) {
                 this._resizers[i] = rect;
                 rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));
                 rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap));
                 rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap));
+                this._group.appendChild(rect);
             }
         });
     }

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

@@ -6,6 +6,7 @@ export declare class DrawElementTool implements ITool {
     private _elementDefinition;
     private _createdItem;
     private _startPosition;
+    private _changeGroup;
     readonly cursor = "crosshair";
     private _rect;
     constructor(elementDefinition: IElementDefinition);
@@ -13,6 +14,7 @@ export declare class DrawElementTool implements ITool {
     dispose(): void;
     pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    sizeOverlapThreshold: boolean;
     private _onPointerDown;
     private _onPointerMove;
     private _onPointerUp;

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

@@ -1,10 +1,10 @@
 import { EventNames } from '../../../../enums/EventNames.js';
-import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class DrawElementTool {
     _elementDefinition;
     _createdItem;
     _startPosition;
+    _changeGroup;
     cursor = 'crosshair';
     _rect;
     constructor(elementDefinition) {
@@ -30,9 +30,11 @@ export class DrawElementTool {
         }
     }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
+    sizeOverlapThreshold = false;
     async _onPointerDown(designerView, event) {
         event.preventDefault();
         this._startPosition = { x: event.x, y: event.y };
+        this._changeGroup = designerView.rootDesignItem.openGroup("Insert Item");
         this._createdItem = await designerView.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerView.serviceContainer, designerView.instanceServiceContainer));
         const targetRect = event.target.getBoundingClientRect();
         this._createdItem.setStyle('position', 'absolute');
@@ -41,15 +43,13 @@ export class DrawElementTool {
         this._createdItem.setStyle('width', '0');
         this._createdItem.setStyle('height', '0');
         this._createdItem.element.style.overflow = 'hidden';
-        //TODO: add items as last, with all properties set
+        designerView.rootDesignItem.insertChild(this._createdItem);
         //draw via containerService??? how to draw into a grid, a stackpanel???
-        designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, this._createdItem));
         designerView.instanceServiceContainer.selectionService.clearSelectedElements();
     }
     async _onPointerMove(designerCanvas, event) {
         if (this._createdItem) {
             if (!this._rect) {
-                designerCanvas.rootDesignItem.element.appendChild(this._createdItem.element);
                 this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground);
                 this._rect.setAttribute('class', 'svg-draw-new-element');
@@ -66,11 +66,19 @@ export class DrawElementTool {
                 this._rect.setAttribute('height', h);
                 this._createdItem.setStyle('height', h + 'px');
             }
+            if (w > 5 || h > 5)
+                this.sizeOverlapThreshold = true;
         }
     }
     async _onPointerUp(designerView, event) {
+        if (this.sizeOverlapThreshold) {
+            this._changeGroup.commit();
+            designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem]);
+        }
+        else {
+            this._changeGroup.abort();
+        }
         designerView.overlayLayer.removeOverlay(this._rect);
-        designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem]);
         this._startPosition = null;
         this._rect = null;
         this._createdItem = null;

package/package.json

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