@node-projects/web-component-designer 0.0.67 → 0.0.71

package/dist/Constants.d.ts

@@ -1,3 +1,3 @@
-export declare const dragDropFormatNameElementDefinition = "text/json/elementDefintion";
-export declare const dragDropFormatNameBindingObject = "text/json/bindingObject";
+export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
+export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
 export declare const assetsPath = "./node_modules/@node-projects/web-component-designer/assets/";

package/dist/Constants.js

@@ -1,3 +1,3 @@
-export const dragDropFormatNameElementDefinition = 'text/json/elementDefintion';
-export const dragDropFormatNameBindingObject = 'text/json/bindingObject';
+export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
+export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
 export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';

package/dist/elements/helper/PathDataPolyfill.d.ts

@@ -40,7 +40,7 @@ declare type PathDataA = {
     type: 'A' | 'a';
     values: [rx: number, ry: number, ang: number, flag1: 0 | 1, flag2: 0 | 1, x: number, y: number];
 };
-declare type PathData = {
+export declare type PathData = {
     type: string;
 } & (PathDataM | PathDataL | PathDataH | PathDataV | PathDataZ | PathDataC | PathDataS | PathDataQ | PathDataT | PathDataA)[];
 export declare function straightenLine(p1: IPoint, p2: IPoint): IPoint;

package/dist/elements/item/IBinding.d.ts

@@ -10,6 +10,6 @@ export interface IBinding {
     bindableObjectNames?: string[];
     mode?: BindingMode;
     invert?: boolean;
-    changedEvent?: string;
+    changedEvents?: string[];
     nullSafe?: boolean;
 }

package/dist/elements/services/bindableObjectsService/IBindableObjectDragDropService.d.ts

@@ -1,6 +1,8 @@
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 import { IBindableObject } from "./IBindableObject.js";
 export interface IBindableObjectDragDropService {
-    dragOver(event: DragEvent, bindableObject: IBindableObject<any>): 'none' | 'copy' | 'link' | 'move';
+    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent): any;
+    dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): 'none' | 'copy' | 'link' | 'move';
     drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject<any>): any;
 }

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

@@ -1,4 +1,5 @@
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export class CommonPropertiesService {
     //@ts-ignore
     commonProperties = [
@@ -62,6 +63,12 @@ export class CommonPropertiesService {
                 all = all && has;
                 some = some || has;
             });
+            //todo: optimize perf, do not call bindings service for each property. 
+            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.getBindings(designItems[0]);
+            });
+            if (bindings && bindings.find(x => x.target == BindingTarget.property && x.targetName == property.name))
+                return ValueType.bound;
         }
         else
             return ValueType.none;

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="jquery" />
-/// <reference types="jquery.fancytree" />
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
 import { ServiceContainer } from '../../services/ServiceContainer.js';
 export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
@@ -9,5 +7,5 @@ export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAp
     constructor();
     ready(): Promise<void>;
     initialize(serviceContainer: ServiceContainer): Promise<void>;
-    lazyLoad(event: JQueryEventObject, data: Fancytree.EventData): void;
+    private lazyLoad;
 }

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

@@ -376,11 +376,29 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.rootDesignItem));
     }
     _onDragEnter(event) {
+        this._fillCalculationrects();
         event.preventDefault();
+        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+        if (hasTransferDataBindingObject) {
+            const ddService = this.serviceContainer.bindableObjectDragDropService;
+            if (ddService) {
+                const effect = ddService.dragEnter(this, event);
+                event.dataTransfer.dropEffect = effect;
+            }
+        }
     }
     _onDragLeave(event) {
+        this._fillCalculationrects();
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
+        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+        if (hasTransferDataBindingObject) {
+            const ddService = this.serviceContainer.bindableObjectDragDropService;
+            if (ddService) {
+                const effect = ddService.dragLeave(this, event);
+                event.dataTransfer.dropEffect = effect;
+            }
+        }
     }
     _onDragOver(event) {
         event.preventDefault();
@@ -401,12 +419,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                     this._canvas.classList.add('dragFileActive');
             }
         }
-        const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject);
-        if (transferDataBindingObject) {
-            const bo = JSON.parse(transferDataBindingObject);
+        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+        if (hasTransferDataBindingObject) {
             const ddService = this.serviceContainer.bindableObjectDragDropService;
             if (ddService) {
-                const effect = ddService.dragOver(event, bo);
+                const effect = ddService.dragOver(this, event);
                 event.dataTransfer.dropEffect = effect;
             }
         }
@@ -415,7 +432,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
         this._fillCalculationrects();
-        if (event.dataTransfer.files.length > 0) {
+        if (event.dataTransfer.files?.length > 0) {
             const ddService = this.serviceContainer.dragDropService;
             if (ddService) {
                 ddService.drop(this, event);

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

@@ -3,12 +3,19 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { AbstractExtension } from "./AbstractExtension";
 import "../../../helper/PathDataPolyfill";
 import { IExtensionManager } from "./IExtensionManger";
+import { PathData } from "../../../helper/PathDataPolyfill";
 export declare class PathExtension extends AbstractExtension {
     private _lastPos;
     private _parentRect;
+    private _startPos;
+    private _circlePos;
+    private _originalPathPoint;
+    private _pathdata;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
-    _drawPathCircle(x: number, y: number): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;
+    _drawPath(path: PathData[], index: number): void;
+    _drawPathCircle(x: number, y: number, p: PathData, index: number): void;
     _drawPathLine(x1: number, y1: number, x2: number, y2: number): void;
     refresh(): void;
     dispose(): void;

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

@@ -1,10 +1,15 @@
 import { AbstractExtension } from "./AbstractExtension";
 import "../../../helper/PathDataPolyfill";
+import { EventNames } from "../../../../enums/EventNames";
 export class PathExtension extends AbstractExtension {
     //private _itemRect: DOMRect;
     //private _svgRect: DOMRect;
     _lastPos;
     _parentRect;
+    _startPos;
+    _circlePos;
+    _originalPathPoint;
+    _pathdata;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -12,15 +17,15 @@ export class PathExtension extends AbstractExtension {
         //this._itemRect = this.extendedItem.element.getBoundingClientRect();
         //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
-        const pathdata = this.extendedItem.node.getPathData({ normalize: true });
-        for (let p of pathdata) {
+        this._pathdata = this.extendedItem.node.getPathData({ normalize: true });
+        for (let p of this._pathdata) {
             switch (p.type) {
                 case 'M':
-                    this._drawPathCircle(p.values[0], p.values[1]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     this._lastPos = { x: p.values[0], y: p.values[1] };
                     break;
                 case 'L':
-                    this._drawPathCircle(p.values[0], p.values[1]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     break;
                 case 'H':
                     break;
@@ -31,39 +36,78 @@ export class PathExtension extends AbstractExtension {
                 case 'C':
                     this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
                     this._drawPathLine(p.values[4], p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[4], p.values[5]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._drawPathCircle(p.values[4], p.values[5], p, 4);
                     this._lastPos = { x: p.values[4], y: p.values[5] };
                     break;
                 case 'c':
                     this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
                     this._drawPathLine(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p.values[2], p.values[3]);
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
-                    this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._drawPathCircle(this._lastPos.x + p.values[4], this._lastPos.y + p.values[5], p, 4);
                     this._lastPos = { x: p.values[4], y: p.values[5] };
                     break;
                 case 'S':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
                     break;
                 case 'Q':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
                     break;
                 case 'T':
-                    this._drawPathCircle(p.values[0], p.values[1]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     break;
                 case 'A':
-                    this._drawPathCircle(p.values[0], p.values[1]);
-                    this._drawPathCircle(p.values[5], p.values[6]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[5], p.values[6], p, 5);
                     break;
             }
         }
     }
-    _drawPathCircle(x, y) {
-        this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
+    pointerEvent(event, circle, p, index) {
+        event.stopPropagation();
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = { x: event.x, y: event.y };
+                this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
+                this._originalPathPoint = { x: p.values[index], y: p.values[index + 1] };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
+                    const cx = event.x - this._lastPos.x + this._circlePos.x;
+                    const cy = event.y - this._lastPos.y + this._circlePos.y;
+                    const dx = cx - this._circlePos.x;
+                    const dy = cy - this._circlePos.y;
+                    p.values[index] = this._originalPathPoint.x + dx;
+                    p.values[index + 1] = this._originalPathPoint.y + dy;
+                    this._drawPath(this._pathdata, index);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                this._circlePos = null;
+                this._lastPos = null;
+                break;
+        }
+    }
+    _drawPath(path, index) {
+        let pathD = "";
+        for (let p of path) {
+            pathD += p.type + p.values[index] + " " + p.values[index + 1];
+        }
+        this.extendedItem.setAttribute("d", pathD);
+    }
+    _drawPathCircle(x, y, p, index) {
+        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
+        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, p, index));
+        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, p, index));
+        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
     }
     _drawPathLine(x1, y1, x2, y2) {
         this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');

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

@@ -12,6 +12,7 @@ export declare class DrawPathTool implements ITool {
     private _eventStarted;
     private _lastPoint;
     private _savedPoint;
+    private _startPoint;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;

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

@@ -14,6 +14,7 @@ export class DrawPathTool {
     _eventStarted = false;
     _lastPoint = { x: 0, y: 0 };
     _savedPoint = { x: 0, y: 0 };
+    _startPoint = { x: 0, y: 0 };
     constructor() {
     }
     activated(serviceContainer) {
@@ -35,6 +36,7 @@ export class DrawPathTool {
                     this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
                     this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
                     designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                    this._startPoint = currentPoint;
                 }
                 if (this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
                     this._samePoint = true;
@@ -66,7 +68,7 @@ export class DrawPathTool {
                 if (this._eventStarted && !this._pointerMoved) {
                     this._p2pMode = true;
                 }
-                if (this._p2pMode && !this._samePoint) {
+                if (this._p2pMode && !this._samePoint && this._startPoint.x != currentPoint.x && this._startPoint.y != currentPoint.y) {
                     if (this._path) {
                         if (event.shiftKey) {
                             let straightLine = straightenLine(this._savedPoint, currentPoint);

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

@@ -6,5 +6,6 @@ export declare class TextTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     readonly cursor = "text";
+    private _text;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
 }

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

@@ -1,3 +1,4 @@
+import { EventNames } from '../../../../enums/EventNames.js';
 export class TextTool {
     constructor() {
     }
@@ -6,6 +7,27 @@ export class TextTool {
     dispose() {
     }
     cursor = 'text';
+    _text;
     pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        //const offset = 50;
+        addEventListener("keyup", function (event) {
+            if (event.key === 'Enter') {
+                console.log("Enter Pressed");
+                event.preventDefault();
+            }
+        });
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                this._text.setAttribute("x", currentPoint.x.toString());
+                this._text.setAttribute("y", currentPoint.y.toString());
+                break;
+            case EventNames.KeyUp:
+                //if(event.key === 'Enter'){
+                //}
+                break;
+        }
     }
 }

package/dist/index.d.ts

@@ -113,6 +113,7 @@ export * from "./elements/widgets/designerView/tools/ZoomTool.js";
 export type { IDesignerExtension } from "./elements/widgets/designerView/extensions/IDesignerExtension.js";
 export type { IDesignerExtensionProvider } from "./elements/widgets/designerView/extensions/IDesignerExtensionProvider.js";
 export type { IExtensionManager } from "./elements/widgets/designerView/extensions/IExtensionManger.js";
+export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtension.js";

package/dist/index.js

@@ -73,6 +73,7 @@ export * from "./elements/widgets/designerView/tools/PointerTool.js";
 export * from "./elements/widgets/designerView/tools/RectangleSelectorTool.js";
 export * from "./elements/widgets/designerView/tools/TextTool.js";
 export * from "./elements/widgets/designerView/tools/ZoomTool.js";
+export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtension.js";

package/dist/polyfill/mobileDragDrop.js

@@ -29,4 +29,4 @@ function elementFromPoint(x, y) {
         return el;
     }
 }
-MobileDragDrop.polyfill({ tryFindDraggableTarget: tryFindDraggableTarget, elementFromPoint: elementFromPoint });
+MobileDragDrop.polyfill({ forceApply: navigator.maxTouchPoints && navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome'), tryFindDraggableTarget: tryFindDraggableTarget, elementFromPoint: elementFromPoint });

package/package.json

@@ -1,39 +1,41 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.67",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.3.7",
-    "construct-style-sheets-polyfill": "^3.0.4"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.9",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.13",
-    "codemirror": "^5.64.0",
-    "esprima-next": "^5.7.0",
-    "html2canvas": "*",
-    "jest": "^27.4.3",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.0",
-    "monaco-editor": "^0.30.1",
-    "ts-jest": "^27.1.1",
-    "typescript": "^4.5.2",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.71",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": "^0.4.0",
+    "construct-style-sheets-polyfill": "^3.0.5"
+  },
+  "devDependencies": {
+    "@node-projects/lean-he-esm": "^3.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.11",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.4.13",
+    "codemirror": "^5.65.0",
+    "esprima-next": "^5.7.0",
+    "html2canvas": "*",
+    "jest": "^27.4.5",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.0",
+    "monaco-editor": "^0.31.1",
+    "ts-jest": "^27.1.2",
+    "typescript": "^4.5.4",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}