@node-projects/web-component-designer 0.0.61 → 0.0.65

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

@@ -0,0 +1,86 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { calculateNormLegth } from '../../../helper/PathDataPolyfill';
+import { DesignItem } from '../../../item/DesignItem';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+export class DrawRectTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _minX;
+    _minY;
+    _maxX;
+    _maxY;
+    _px;
+    _py;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 50;
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = currentPoint;
+                event.target.setPointerCapture(event.pointerId);
+                this._path = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
+                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                this._path.setAttribute("x", currentPoint.x.toString());
+                this._path.setAttribute("y", currentPoint.y.toString());
+                this._path.setAttribute("width", "0");
+                this._path.setAttribute("height", "0");
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    this._minX = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
+                    this._maxX = currentPoint.x > this._startPoint.x ? currentPoint.x : this._startPoint.x;
+                    this._minY = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
+                    this._maxY = currentPoint.y > this._startPoint.y ? currentPoint.y : this._startPoint.y;
+                    if (event.shiftKey) {
+                        const normLength = calculateNormLegth(this._startPoint, currentPoint);
+                        this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x;
+                        this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y;
+                        this._path.setAttribute("x", this._px.toString());
+                        this._path.setAttribute("y", this._py.toString());
+                        this._path.setAttribute("width", (normLength).toString());
+                        this._path.setAttribute("height", (normLength).toString());
+                    }
+                    else {
+                        this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
+                        this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
+                        this._path.setAttribute("x", this._minX.toString());
+                        this._path.setAttribute("y", this._minY.toString());
+                        this._path.setAttribute("width", (this._maxX - this._minX).toString());
+                        this._path.setAttribute("height", (this._maxY - this._minY).toString());
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                const rect = this._path.getBoundingClientRect();
+                designerCanvas.overlayLayer.removeOverlay(this._path);
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
+                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                this._path.setAttribute("x", (this._px - mvX).toString());
+                this._path.setAttribute("y", (this._py - mvY).toString());
+                svg.appendChild(this._path);
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = (rect.width + 2 * offset) + 'px';
+                svg.style.height = (rect.height + 2 * offset) + 'px';
+                this._path = null;
+                const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+}

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

@@ -2,6 +2,9 @@ export declare enum NamedTools {
     Pointer = "Pointer",
     DrawSelection = "DrawSelection",
     DrawPath = "DrawPath",
+    DrawRect = "DrawRect",
+    DrawEllipsis = "DrawEllipsis",
+    DrawLine = "DrawLine",
     Zoom = "Zoom",
     Pan = "Pan",
     MagicWandSelector = "MagicWandSelector",

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

@@ -3,6 +3,9 @@ export var NamedTools;
     NamedTools["Pointer"] = "Pointer";
     NamedTools["DrawSelection"] = "DrawSelection";
     NamedTools["DrawPath"] = "DrawPath";
+    NamedTools["DrawRect"] = "DrawRect";
+    NamedTools["DrawEllipsis"] = "DrawEllipsis";
+    NamedTools["DrawLine"] = "DrawLine";
     NamedTools["Zoom"] = "Zoom";
     NamedTools["Pan"] = "Pan";
     NamedTools["MagicWandSelector"] = "MagicWandSelector";

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

@@ -1,6 +1,20 @@
+import { EventNames } from '../../../../enums/EventNames.js';
 export class PanTool {
     cursor = 'grab';
     pointerEventHandler(designerCanvas, event, currentElement) {
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                break;
+            case EventNames.PointerMove:
+                if (event.buttons == 1) {
+                    designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                break;
+        }
     }
     activated(serviceContainer) {
     }

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

@@ -23,6 +23,13 @@ export class PointerTool {
     dispose() {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
+            const panTool = designerCanvas.serviceContainer.designerTools.get(NamedTools.Pan);
+            if (panTool) {
+                panTool.pointerEventHandler(designerCanvas, event, currentElement);
+                return;
+            }
+        }
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);

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

@@ -16,8 +16,8 @@ export class RectangleSelectorTool {
                 if (!this._rect)
                     this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 this._rect.setAttribute('class', 'svg-selector');
-                this._rect.setAttribute('x', this._initialPoint.x);
-                this._rect.setAttribute('y', this._initialPoint.y);
+                this._rect.setAttribute('x', (this._initialPoint.x * designerCanvas.scaleFactor));
+                this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor));
                 this._rect.setAttribute('width', 0);
                 this._rect.setAttribute('height', 0);
                 designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);

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

@@ -17,6 +17,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
       display: block;
       height: 100%;
       user-select: none;
+      -webkit-user-select: none;
     }
     button:hover {
       box-shadow: inset 0 3px 0 var(--light-grey);

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

@@ -6,6 +6,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
       display: block;
       height: 100%;
       user-select: none;
+      -webkit-user-select: none;
       background: var(--medium-grey, #2f3545);
       color: white;
     }

package/dist/elements/widgets/treeView/treeView.js

@@ -199,7 +199,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
         // If the target is a <span>, you clicked on the span inside the button
         // so you need to use currentTarget.
         let item = event.target;
-        if (item.tagName === 'SPAN') {
+        if (item.localName === 'span') {
             item = item.parentElement;
         }
         this._selectTreeElements([item]);

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./elements/controls/DesignerTabControl.js";
+export * from "./elements/controls/PlainScrollbar.js";
 export * from "./elements/services/DefaultServiceBootstrap.js";
 export * from "./elements/helper/CssAttributeParser.js";
 export * from "./elements/helper/CssCombiner.js";
@@ -96,6 +97,9 @@ export type { ITool } from "./elements/widgets/designerView/tools/ITool.js";
 export * from "./elements/widgets/designerView/tools/NamedTools.js";
 export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
 export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
+export * from "./elements/widgets/designerView/tools/DrawRectTool.js";
+export * from "./elements/widgets/designerView/tools/DrawEllipsisTool.js";
+export * from "./elements/widgets/designerView/tools/DrawLineTool.js";
 export * from "./elements/widgets/designerView/tools/MagicWandSelectorTool.js";
 export * from "./elements/widgets/designerView/tools/PanTool.js";
 export * from "./elements/widgets/designerView/tools/PickColorTool.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./elements/controls/DesignerTabControl.js";
+export * from "./elements/controls/PlainScrollbar.js";
 export * from "./elements/services/DefaultServiceBootstrap.js";
 export * from "./elements/helper/CssAttributeParser.js";
 export * from "./elements/helper/CssCombiner.js";
@@ -61,6 +62,9 @@ export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js"
 export * from "./elements/widgets/designerView/tools/NamedTools.js";
 export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
 export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
+export * from "./elements/widgets/designerView/tools/DrawRectTool.js";
+export * from "./elements/widgets/designerView/tools/DrawEllipsisTool.js";
+export * from "./elements/widgets/designerView/tools/DrawLineTool.js";
 export * from "./elements/widgets/designerView/tools/MagicWandSelectorTool.js";
 export * from "./elements/widgets/designerView/tools/PanTool.js";
 export * from "./elements/widgets/designerView/tools/PickColorTool.js";

package/package.json

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