@node-projects/web-component-designer 0.0.25 → 0.0.29

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

@@ -5,8 +5,8 @@ export class MagicWandSelectorTool {
     constructor() {
         this.cursor = 'progress';
     }
-    pointerEventHandler(designerView, event, currentElement) {
-        const currentPoint = designerView.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
@@ -15,7 +15,7 @@ export class MagicWandSelectorTool {
                 this._path.setAttribute('class', 'svg-selector');
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 this._path.setAttribute("D", this._pathD);
-                designerView.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {
@@ -25,37 +25,38 @@ export class MagicWandSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                const elements = designerView.rootDesignItem.element.querySelectorAll('*');
+                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 const inSelectionElements = [];
-                //@ts-ignore
-                let point = designerView.overlayLayer.createSVGPoint();
+                let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
                     let elementRect = e.getBoundingClientRect();
-                    point.x = elementRect.left - designerView.containerBoundingRect.left;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
                     const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerView.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
                     const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerView.containerBoundingRect.left;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
                     const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerView.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
                     const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
                     if (p1 && p2 && p3 && p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerView.serviceContainer, designerView.instanceServiceContainer);
+                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                         inSelectionElements.push(desItem);
                     }
                 }
-                designerView.overlayLayer.removeOverlay(this._path);
+                designerCanvas.overlayLayer.removeOverlay(this._path);
                 this._path = null;
                 this._pathD = null;
-                designerView.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
-                designerView.serviceContainer.globalContext.finishedWithTool(this);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
                 break;
         }
     }
+    activated(serviceContainer) {
+    }
     dispose() {
     }
 }

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

@@ -1,7 +1,9 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class PanTool implements ITool {
     readonly cursor: string;
-    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
 }

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

@@ -2,7 +2,9 @@ export class PanTool {
     constructor() {
         this.cursor = 'grab';
     }
-    pointerEventHandler(designerView, event, currentElement) {
+    pointerEventHandler(designerCanvas, event, currentElement) {
+    }
+    activated(serviceContainer) {
     }
     dispose() {
     }

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

@@ -1,7 +1,9 @@
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer';
 export declare class PickColorTool implements ITool {
-    cursor: string;
-    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    readonly cursor = "crosshair";
+    activated(serviceContainer: ServiceContainer): Promise<void>;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
     dispose(): void;
 }

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

@@ -1,5 +1,20 @@
 export class PickColorTool {
-    pointerEventHandler(designerView, event, currentElement) {
+    constructor() {
+        this.cursor = 'crosshair';
+    }
+    async activated(serviceContainer) {
+        try {
+            //@ts-ignore
+            const eyeDropper = new EyeDropper();
+            const colorSelectionResult = await eyeDropper.open();
+            const color = colorSelectionResult.sRGBHex;
+            serviceContainer.globalContext.strokeColor = color;
+        }
+        finally {
+            serviceContainer.globalContext.finishedWithTool(this);
+        }
+    }
+    async pointerEventHandler(designerCanvas, event, currentElement) {
     }
     dispose() {
     }

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

@@ -1,5 +1,6 @@
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { ITool } from "./ITool";
+import { ServiceContainer } from "../../../services/ServiceContainer.js";
 export declare class PointerTool implements ITool {
     readonly cursor: string;
     private _movedSinceStartedAction;
@@ -12,6 +13,7 @@ export declare class PointerTool implements ITool {
     private _dragExtensionItem;
     private _moveItemsOffset;
     constructor();
+    activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     private _pointerActionTypeDrawSelection;

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

@@ -11,6 +11,8 @@ export class PointerTool {
         this._clickThroughElements = [];
         this._moveItemsOffset = { x: 0, y: 0 };
     }
+    activated(serviceContainer) {
+    }
     dispose() {
     }
     pointerEventHandler(designerView, event, currentElement) {

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

@@ -1,9 +1,11 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class RectangleSelectorTool implements ITool {
     cursor: string;
     private _rect;
     private _initialPoint;
-    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    activated(serviceContainer: ServiceContainer): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -5,8 +5,10 @@ export class RectangleSelectorTool {
     constructor() {
         this.cursor = 'progress';
     }
-    pointerEventHandler(designerView, event, currentElement) {
-        const currentPoint = designerView.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
+    activated(serviceContainer) {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
@@ -18,7 +20,7 @@ export class RectangleSelectorTool {
                 this._rect.setAttribute('y', this._initialPoint.y);
                 this._rect.setAttribute('width', 0);
                 this._rect.setAttribute('height', 0);
-                designerView.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
@@ -44,33 +46,33 @@ export class RectangleSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                const elements = designerView.rootDesignItem.element.querySelectorAll('*');
+                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 const inSelectionElements = [];
-                let point = designerView.overlayLayer.createPoint();
+                let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
                     let elementRect = e.getBoundingClientRect();
-                    point.x = elementRect.left - designerView.containerBoundingRect.left;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
                     const p1 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
-                    point.x = elementRect.left - designerView.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
                     const p2 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
-                    point.x = elementRect.left - designerView.containerBoundingRect.left;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
                     const p3 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
-                    point.x = elementRect.left - designerView.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerView.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
+                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
                     const p4 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
                     if (p1 && p2 && p3 && p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerView.serviceContainer, designerView.instanceServiceContainer);
+                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                         inSelectionElements.push(desItem);
                     }
                 }
-                designerView.overlayLayer.removeOverlay(this._rect);
+                designerCanvas.overlayLayer.removeOverlay(this._rect);
                 this._rect = null;
                 this._initialPoint = null;
-                designerView.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
-                designerView.serviceContainer.globalContext.finishedWithTool(this);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
                 break;
         }
     }

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

@@ -1,8 +1,10 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class TextTool implements ITool {
     constructor();
+    activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     readonly cursor = "text";
-    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
 }

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

@@ -2,8 +2,10 @@ export class TextTool {
     constructor() {
         this.cursor = 'text';
     }
+    activated(serviceContainer) {
+    }
     dispose() {
     }
-    pointerEventHandler(designerView, event, currentElement) {
+    pointerEventHandler(designerCanvas, event, currentElement) {
     }
 }

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

@@ -1,7 +1,9 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class ZoomTool implements ITool {
     readonly cursor: string;
-    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    activated(serviceContainer: ServiceContainer): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -2,7 +2,9 @@ export class ZoomTool {
     constructor() {
         this.cursor = 'zoom-in';
     }
-    pointerEventHandler(designerView, event, currentElement) {
+    activated(serviceContainer) {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
     }
     dispose() {
     }

package/dist/index.d.ts

@@ -16,6 +16,9 @@ export type { IDesignItem } from "./elements/item/IDesignItem.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
 export type { IBindableObject } from "./elements/services/bindableObjectsService/IBindableObject.js";
 export type { IBindableObjectsService } from "./elements/services/bindableObjectsService/IBindableObjectsService.js";
+export type { IBindingService } from "./elements/services/bindingsService/IBindingService.js";
+export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/bindingsService/SpecialTagsBindingService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";
@@ -77,7 +80,8 @@ export type { IServiceContainer } from "./elements/services/IServiceContainer.js
 export * from "./elements/services/ServiceContainer.js";
 export * from "./elements/widgets/propertyGrid/PropertyGrid.js";
 export * from "./elements/widgets/propertyGrid/PropertyGridPropertyList.js";
-export type { IDesignerCanvas as IDesignerView } from "./elements/widgets/designerView/IDesignerCanvas.js";
+export type { IDesignerCanvas } from "./elements/widgets/designerView/IDesignerCanvas.js";
+export type { IPlacementView } from "./elements/widgets/designerView/IPlacementView.js";
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";

package/dist/index.js

@@ -12,6 +12,8 @@ export * from "./elements/helper/contextMenu/ContextMenuHelper.js";
 export * from "./elements/helper/Helper.js";
 export * from "./elements/item/DesignItem.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
+export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/bindingsService/SpecialTagsBindingService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";

package/package.json

@@ -1,40 +1,39 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.25",
-  "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.1.7",
-    "construct-style-sheets-polyfill": "^3.0.4"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.3.0",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.8",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.4.13",
-    "codemirror": "^5.63.3",
-    "esprima-next": "^5.7.0",
-    "html2canvas": "*",
-    "jest": "^27.3.1",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.0",
-    "monaco-editor": "^0.29.1",
-    "node-html-parser": "^5.0.0",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.4.4",
-    "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.29",
+  "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.2.0",
+    "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.8",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.4.13",
+    "codemirror": "^5.64.0",
+    "esprima-next": "^5.7.0",
+    "html2canvas": "*",
+    "jest": "^27.3.1",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.0",
+    "monaco-editor": "^0.30.1",
+    "ts-jest": "^27.0.7",
+    "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"
+  }
+}