@node-projects/web-component-designer 0.0.68 → 0.0.72

package/dist/elements/helper/CssCombiner.js

@@ -1,6 +1,7 @@
 export class CssCombiner {
     static _helperElement = document.createElement('div');
     //todo: inset, flex flow, place content...
+    //flex => flex-grow, flex-shrink, flex-basis
     static combine(styles, globalStyles) {
         let e = CssCombiner._helperElement;
         e.setAttribute('style', '');

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/bindingsService/BaseCustomWebcomponentBindingsService.d.ts

@@ -1,8 +1,10 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from '../../item/IBinding';
 import { IBindingService } from "./IBindingService";
+import { BindingTarget } from "../../item/BindingTarget.js";
 export declare class BaseCustomWebcomponentBindingsService implements IBindingService {
     static type: string;
     getBindings(designItem: IDesignItem): IBinding[];
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js

@@ -66,4 +66,7 @@ export class BaseCustomWebcomponentBindingsService {
         designItem.setAttribute(nm, value);
         return true;
     }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
 }

package/dist/elements/services/bindingsService/IBindingService.d.ts

@@ -1,5 +1,6 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from "../../item/IBinding";
+import { BindingTarget } from "../../item/BindingTarget";
 /**
  * Can be used to parse bindings wich are done via special HTML Attributes or special Elements
  * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the
@@ -8,4 +9,5 @@ import { IBinding } from "../../item/IBinding";
 export interface IBindingService {
     getBindings(designItem: IDesignItem): IBinding[];
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

package/dist/elements/services/bindingsService/SpecialTagsBindingService.d.ts

@@ -1,6 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IBinding } from "../../item/IBinding";
 import { IBindingService } from "./IBindingService";
+import { BindingTarget } from "../../item/BindingTarget.js";
 export declare class SpecialTagsBindingService implements IBindingService {
     static type: string;
     _bindingTagName: string;
@@ -11,4 +12,5 @@ export declare class SpecialTagsBindingService implements IBindingService {
     getBindings(designItem: IDesignItem): IBinding[];
     private _parseBindingElement;
     setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
 }

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -37,4 +37,7 @@ export class SpecialTagsBindingService {
     setBinding(designItem, binding) {
         return true;
     }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        return true;
+    }
 }

package/dist/elements/services/propertiesService/IPropertiesService.d.ts

@@ -2,11 +2,13 @@ import { IProperty } from './IProperty';
 import { IService } from '../IService';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ValueType } from './ValueType';
+import { BindingTarget } from '../../item/BindingTarget';
 export interface IPropertiesService extends IService {
     readonly name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperties(designItem: IDesignItem): IProperty[];
     getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     setValue(designItems: IDesignItem[], property: IProperty, value: any): any;
     clearValue(designItems: IDesignItem[], property: IProperty): any;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;

package/dist/elements/services/propertiesService/services/AttributesPropertiesService.d.ts

@@ -2,12 +2,14 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class AttributesPropertiesService implements IPropertiesService {
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string;

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

@@ -1,4 +1,5 @@
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export class AttributesPropertiesService {
     name = "attributes";
     isHandledElement(designItem) {
@@ -19,6 +20,9 @@ export class AttributesPropertiesService {
     }
     setValue(designItems, property, value) {
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.attribute;
+    }
     clearValue(designItems, property) {
     }
     isSet(designItems, property) {

package/dist/elements/services/propertiesService/services/CommonPropertiesService.d.ts

@@ -2,6 +2,7 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class CommonPropertiesService implements IPropertiesService {
     private commonProperties;
     name: string;
@@ -9,6 +10,7 @@ export declare class CommonPropertiesService implements IPropertiesService {
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;

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 = [
@@ -46,10 +47,16 @@ export class CommonPropertiesService {
             }
         }
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
     clearValue(designItems, property) {
         for (let d of designItems) {
             d.attributes.delete(property.name);
             d.element.removeAttribute(property.name);
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
         }
     }
     isSet(designItems, property) {
@@ -62,6 +69,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/services/propertiesService/services/CssPropertiesService.d.ts

@@ -2,6 +2,7 @@ import { IPropertiesService } from '../IPropertiesService';
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from '../ValueType';
+import { BindingTarget } from '../../../item/BindingTarget.js';
 export declare class CssPropertiesService implements IPropertiesService {
     private styles;
     private alignment;
@@ -13,6 +14,7 @@ export declare class CssPropertiesService implements IPropertiesService {
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string;

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

@@ -226,10 +226,16 @@ export class CssPropertiesService {
         }
         cg.commit();
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.css;
+    }
     clearValue(designItems, property) {
         for (let d of designItems) {
             d.styles.delete(property.name);
             d.element.style[property.name] = '';
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
         }
     }
     isSet(designItems, property) {

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

@@ -22,6 +22,6 @@ export class PropertiesHelper {
         return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
     }
     static dashToCamelCase(text) {
-        return text.replace(/-([a-z])/i, (i) => i[1].toUpperCase());
+        return text.replace(/-([a-z])/g, (i) => i[1].toUpperCase());
     }
 }

package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts

@@ -2,6 +2,7 @@ import { IPropertiesService } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
+import { BindingTarget } from "../../../item/BindingTarget";
 export declare class UnkownElementPropertiesService implements IPropertiesService {
     readonly name: string;
     isHandledElement(designItem: IDesignItem): boolean;
@@ -9,6 +10,7 @@ export declare class UnkownElementPropertiesService implements IPropertiesServic
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];
     setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
     getValue(designItems: IDesignItem[], property: IProperty): string | boolean;

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

@@ -1,5 +1,6 @@
 import { ValueType } from "../ValueType";
 import { PropertiesHelper } from './PropertiesHelper';
+import { BindingTarget } from "../../../item/BindingTarget";
 export class UnkownElementPropertiesService {
     name = "unkown";
     isHandledElement(designItem) {
@@ -44,11 +45,17 @@ export class UnkownElementPropertiesService {
             cg.undo();
         }
     }
+    getPropertyTarget(designItem, property) {
+        return BindingTarget.property;
+    }
     clearValue(designItems, property) {
         const attributeName = PropertiesHelper.camelToDashCase(property.name);
         for (let d of designItems) {
             d.attributes.delete(attributeName);
             d.element.removeAttribute(attributeName);
+            d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
+                return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
+            });
             this._notifyChangedProperty(d, property, undefined);
         }
     }

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

@@ -432,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

@@ -59,6 +59,7 @@ export * from "./elements/services/propertiesService/DefaultEditorTypesService.j
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
+export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";

package/dist/index.js

@@ -32,6 +32,7 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
+export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssPropertiesService.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.68",
-  "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.72",
+  "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"
+  }
+}

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

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

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

@@ -1,13 +0,0 @@
-//todo, element moving does not work atm, needs to be fixed
-export class DesignerViewUseOverlayScollbars {
-    constructor() {
-    }
-    provideButtons(designerView, designerCanvas) {
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/overlayscrollbars/css/OverlayScrollbars.min.css");';
-        designerCanvas.shadowRoot.appendChild(externalCss);
-        //@ts-ignore
-        setTimeout(() => OverlayScrollbars([designerCanvas._outercanvas2], {}), 5000);
-        return [];
-    }
-}