@node-projects/web-component-designer 0.0.31 → 0.0.35

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

@@ -5,6 +5,8 @@ import { NumberPropertyEditor } from "./propertyEditors/NumberPropertyEditor";
 import { SelectPropertyEditor } from "./propertyEditors/SelectPropertyEditor";
 import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor';
 import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor';
+import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor';
+import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
 export class DefaultEditorTypesService {
     getEditorForProperty(property) {
         if (property.createEditor)
@@ -38,6 +40,14 @@ export class DefaultEditorTypesService {
                 {
                     return new BooleanPropertyEditor(property);
                 }
+            case "img-list":
+                {
+                    return new ImageButtonListPropertyEditor(property);
+                }
+            case "thickness":
+                {
+                    return new ThicknessPropertyEditor(property);
+                }
             case "css-length":
             case "thickness":
             case "string":

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor copy.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+export declare class ImageButtonListPropertyEditor extends BasePropertyEditor<ImageButtonListSelector> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor copy.js

@@ -0,0 +1,40 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+import { PropertiesHelper } from "../services/PropertiesHelper.js";
+import { assetsPath } from "../../../../Constants.js";
+export class ImageButtonListPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ImageButtonListSelector();
+        selector.property = property.name;
+        selector.unsetValue = property.defaultValue;
+        const propName = PropertiesHelper.camelToDashCase(property.name);
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let button = document.createElement("button");
+                button.dataset.value = v[1];
+                let img = document.createElement("img");
+                img.title = v[1];
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v[1] + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let button = document.createElement("button");
+                button.dataset.value = v;
+                let img = document.createElement("img");
+                img.title = v;
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+export declare class ImageButtonListPropertyEditor extends BasePropertyEditor<ImageButtonListSelector> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js

@@ -0,0 +1,40 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+import { PropertiesHelper } from "../services/PropertiesHelper.js";
+import { assetsPath } from "../../../../Constants.js";
+export class ImageButtonListPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ImageButtonListSelector();
+        selector.property = property.name;
+        selector.unsetValue = property.defaultValue;
+        const propName = PropertiesHelper.camelToDashCase(property.name);
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let button = document.createElement("button");
+                button.dataset.value = v[1];
+                let img = document.createElement("img");
+                img.title = v[1];
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v[1] + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let button = document.createElement("button");
+                button.dataset.value = v;
+                let img = document.createElement("img");
+                img.title = v;
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+import { ThicknessEditor } from '../../../controls/ThicknessEditor';
+export declare class ThicknessPropertyEditor extends BasePropertyEditor<ThicknessEditor> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js

@@ -0,0 +1,14 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ThicknessEditor } from '../../../controls/ThicknessEditor';
+export class ThicknessPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ThicknessEditor();
+        selector.property = property.name;
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

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

@@ -6,8 +6,9 @@ export declare class CssPropertiesService implements IPropertiesService {
     private styles;
     private alignment;
     private grid;
-    name: 'alignment' | 'styles' | 'grid';
-    constructor(name: 'alignment' | 'styles' | 'grid');
+    private flex;
+    name: 'set-styles' | 'alignment' | 'styles' | 'grid' | 'flex';
+    constructor(name: 'set-styles' | 'alignment' | 'styles' | 'grid' | 'flex');
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];

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

@@ -86,59 +86,26 @@ export class CssPropertiesService {
         //@ts-ignore
         this.alignment = [
             {
-                name: "position",
-                type: "list",
-                values: ["static", "relative", "absolute"],
-                service: this
-            }, {
                 name: "display",
                 type: "list",
                 values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
                 service: this
             }, {
-                name: "flex-direction",
-                type: "list",
-                values: ["row", "row-reverse", "column", "column-reverse"],
-                service: this
-            }, {
-                name: "flex-wrap",
-                type: "list",
-                values: ["nowrap", "wrap", "warp-reverse"],
-                service: this
-            }, {
-                name: "justify-self",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "justify-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "justify-content",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
-                service: this
-            }, {
-                name: "align-self",
+                name: "position",
                 type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                values: ["static", "relative", "absolute"],
                 service: this
             }, {
-                name: "align-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                name: "inset",
+                type: "thickness",
                 service: this
             }, {
-                name: "align-content",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                name: "margin",
+                type: "thickness",
                 service: this
             }, {
-                name: "flex",
-                type: "string",
-                default: "0 1 auto",
+                name: "padding",
+                type: "thickness",
                 service: this
             }
         ];
@@ -165,25 +132,59 @@ export class CssPropertiesService {
                 name: "row-gap",
                 type: "css-length",
                 service: this
+            }, {
+                name: "align-content",
+                type: "img-list",
+                values: ["center", "space-between", "space-around", "space-evenly", "stretch"],
+                service: this
             }, {
                 name: "justify-content",
-                type: "list",
-                values: ["space-evenly", "space-around", "space-between", "center", "start", "end"],
+                type: "img-list",
+                values: ["center", "start", "end", "space-between", "space-around", "space-evenly"],
                 service: this
             }, {
-                name: "align-content",
-                type: "list",
-                values: ["space-evenly", "space-around", "space-between", "center", "start", "end"],
+                name: "align-items",
+                type: "img-list",
+                values: ["center", "start", "end", "stretch", "baseline"],
                 service: this
             }, {
                 name: "justify-items",
+                type: "img-list",
+                values: ["center", "start", "end", "stretch"],
+                service: this
+            }
+        ];
+        //@ts-ignore
+        this.flex = [
+            {
+                name: "display",
                 type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                values: ["block", "inline-block", "flex", "contents", "grid", "inherit", "initial", "none"],
+                service: this
+            }, {
+                name: "flex-direction",
+                type: "img-list",
+                values: ["row", "column"],
+                service: this
+            }, {
+                name: "flex-wrap",
+                type: "img-list",
+                values: ["nowrap", "wrap"],
+                service: this
+            }, {
+                name: "align-content",
+                type: "img-list",
+                values: ["center", "flex-start", "flex-end", "space-between", "space-around", "stretch"],
+                service: this
+            }, {
+                name: "justify-content",
+                type: "img-list",
+                values: ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"],
                 service: this
             }, {
                 name: "align-items",
-                type: "list",
-                values: ["flex-start", "center", "flex-end", "space-between", "space-around"],
+                type: "img-list",
+                values: ["center", "flex-start", "flex-end", "stretch", "baseline"],
                 service: this
             }
         ];
@@ -193,9 +194,17 @@ export class CssPropertiesService {
         return true;
     }
     getProperty(designItem, name) {
+        if (this.name == 'set-styles') {
+            return { name: name, type: 'string', service: this };
+        }
         return this[this.name][name];
     }
     getProperties(designItem) {
+        if (this.name == 'set-styles') {
+            if (!designItem)
+                return [];
+            return Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this }));
+        }
         return this[this.name];
     }
     setValue(designItems, property, value) {

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

@@ -19,6 +19,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
+    zoomFactor: number;
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;

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

@@ -49,7 +49,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set additionalStyle(value: CSSStyleSheet);
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;
-    handleCopyCommand(): void;
+    handleSelectAll(): void;
+    handleCopyCommand(): Promise<void>;
     handlePasteCommand(): Promise<void>;
     handleDeleteCommand(): void;
     handleMoveCommand(command: CommandType): void;
@@ -63,7 +64,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDragLeave;
     private _onDragOver;
     private _onDrop;
-    private _onWheel;
     private _onContextMenu;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     private _onDblClick;

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

@@ -7,7 +7,6 @@ import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base
 import { dragDropFormatName } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
-import { DomConverter } from './DomConverter';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
@@ -134,6 +133,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             case CommandType.paste:
                 this.handlePasteCommand();
                 break;
+            case CommandType.selectAll:
+                this.handleSelectAll();
+                break;
         }
     }
     canExecuteCommand(command) {
@@ -149,15 +151,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return true;
     }
     /* --- end IUiCommandHandler --- */
-    handleCopyCommand() {
-        const copyText = DomConverter.ConvertToString(this.instanceServiceContainer.selectionService.selectedElements, null);
-        navigator.clipboard.writeText(copyText);
+    handleSelectAll() {
+        this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
+    }
+    async handleCopyCommand() {
+        await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand() {
-        const text = await navigator.clipboard.readText();
-        const parserService = this.serviceContainer.htmlParserService;
+        const designItems = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
-        const designItems = await parserService.parse(text, this.serviceContainer, this.instanceServiceContainer);
         if (designItems) {
             for (let di of designItems) {
                 this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
@@ -178,7 +180,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
     handleMoveCommand(command) {
-        //TODO: -> via undo redo service
         let sel = this.instanceServiceContainer.selectionService.primarySelection;
         if (command == CommandType.moveBackward)
             this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
@@ -217,14 +218,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this._outercanvas2.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
-            this._canvas.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
-            this._canvas.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
-            this._canvas.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
-            this._canvas.addEventListener(EventNames.Drop, event => this._onDrop(event));
+            this._outercanvas2.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
+            this._outercanvas2.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
+            this._outercanvas2.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
+            this._outercanvas2.addEventListener(EventNames.Drop, event => this._onDrop(event));
             this._canvas.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
             this._canvas.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
             this._canvas.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
-            this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         }
     }
     zoomFactorChanged() {
@@ -299,24 +299,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             let di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
             let grp = di.openGroup("Insert");
             di.setStyle('position', 'absolute');
-            const targetRect = event.target.getBoundingClientRect();
-            di.setStyle('top', event.offsetY + targetRect.top - this.containerBoundingRect.y + 'px');
-            di.setStyle('left', event.offsetX + targetRect.left - this.containerBoundingRect.x + 'px');
+            const canvasRect = this._canvasContainer.getBoundingClientRect();
+            di.setStyle('top', ((event.offsetY + event.target.scrollTop - (this.containerBoundingRect.y * this._zoomFactor)) / this._zoomFactor + canvasRect.top) + 'px');
+            di.setStyle('left', ((event.offsetX + event.target.scrollLeft - (this.containerBoundingRect.x * this._zoomFactor)) / this._zoomFactor + canvasRect.left) + 'px');
             this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
             grp.commit();
             requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
         }
     }
-    _onWheel(event) {
-        if (event.ctrlKey) {
-            event.preventDefault();
-            this._zoomFactor += event.deltaY * -0.001; //deltamode = 0
-            if (this._zoomFactor < 0.1)
-                this._zoomFactor = 0.1;
-            this.zoomFactorChanged();
-            //TODO: we should zoom on the current cursor position, so it stays the center
-        }
-    }
     _onContextMenu(event) {
         event.preventDefault();
         const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
@@ -359,6 +349,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.executeCommand({ type: CommandType.redo });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'y')
             this.executeCommand({ type: CommandType.redo });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'a')
+            this.executeCommand({ type: CommandType.selectAll });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'c')
+            this.executeCommand({ type: CommandType.copy });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'v')
+            this.executeCommand({ type: CommandType.paste });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'x')
+            this.executeCommand({ type: CommandType.cut });
         else {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (!primarySelection) {
@@ -411,7 +409,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: (event.y - this.containerBoundingRect.y) / this._zoomFactor,
             offsetInControlX: (startPoint ? startPoint.offsetInControlX : event.x - targetRect.x),
             offsetInControlY: (startPoint ? startPoint.offsetInControlY : event.y - targetRect.y),
-            zoom: this._zoomFactor
+            zoom: this._zoomFactor,
+            normalizedX: ((event.offsetX + event.target.scrollLeft - (this.containerBoundingRect.x * this._zoomFactor)) / this._zoomFactor + targetRect.left),
+            normalizedY: ((event.offsetY + event.target.scrollTop - (this.containerBoundingRect.y * this._zoomFactor)) / this._zoomFactor + targetRect.top)
         };
     }
     //todo remove, is in base custom webcomp domhelper

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

@@ -16,6 +16,7 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     static readonly template: HTMLTemplateElement;
     private _designerCanvas;
     constructor();
+    private _onWheel;
     get designerWidth(): string;
     set designerWidth(value: string);
     get designerHeight(): string;

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

@@ -2,6 +2,7 @@ import { css, DomHelper, html, BaseCustomWebComponentConstructorAppend } from '@
 import { DesignerCanvas } from "./designerCanvas.js";
 import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
+import { EventNames } from '../../../enums/EventNames.js';
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     constructor() {
         super();
@@ -11,16 +12,37 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
         this._zoomInput = this._getDomElement('zoomInput');
-        this._zoomInput.onchange = () => { this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100; };
+        this._zoomInput.onkeydown = (e) => {
+            if (e.key == 'Enter')
+                this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        this._zoomInput.onblur = () => {
+            this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         this._zoomInput.onclick = this._zoomInput.select;
         let zoomIncrease = this._getDomElement('zoomIncrease');
-        zoomIncrease.onclick = () => { this._designerCanvas.zoomFactor += 0.1; };
+        zoomIncrease.onclick = () => {
+            this._designerCanvas.zoomFactor += 0.1;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         let zoomDecrease = this._getDomElement('zoomDecrease');
-        zoomDecrease.onclick = () => { this._designerCanvas.zoomFactor -= 0.1; };
+        zoomDecrease.onclick = () => {
+            this._designerCanvas.zoomFactor -= 0.1;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         let zoomReset = this._getDomElement('zoomReset');
-        zoomReset.onclick = () => { this._designerCanvas.zoomFactor = 1; };
+        zoomReset.onclick = () => {
+            this._designerCanvas.zoomFactor = 1;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
         let zoomFit = this._getDomElement('zoomFit');
-        zoomFit.onclick = () => { this._designerCanvas.zoomFactor = 7.7; };
+        zoomFit.onclick = () => {
+            this._designerCanvas.zoomFactor = 7.7;
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        };
+        this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         let alignSnap = this._getDomElement('alignSnap');
         alignSnap.onclick = () => { this._designerCanvas.alignOnSnap = !this._designerCanvas.alignOnSnap; alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : ''; };
         alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : '';
@@ -40,6 +62,18 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._designerCanvas.instanceServiceContainer = value;
     }
+    _onWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+            let zf = this._designerCanvas.zoomFactor;
+            zf += event.deltaY * -0.001; //deltamode = 0
+            if (zf < 0.02)
+                zf = 0.02;
+            this._designerCanvas.zoomFactor = zf;
+            this._zoomInput.value = Math.round(zf * 100) + '%';
+            //TODO: we should zoom on the current cursor position, so it stays the center
+        }
+    }
     get designerWidth() {
         return this._designerCanvas.designerWidth;
     }

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

@@ -66,8 +66,7 @@ OverlayLayerView.style = css `
     }
 
     .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
-    /*.svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; }*/
-    .svg-selector { stroke: black; fill: transparent; stroke-width: 1; stroke-dasharray: 2; }
+    .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
     .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
     .svg-text { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
     .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }

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.normalizedX);
+                this._rect.setAttribute('y', this._initialPoint.normalizedY);
                 this._rect.setAttribute('width', 0);
                 this._rect.setAttribute('height', 0);
                 designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
@@ -27,19 +27,19 @@ export class RectangleSelectorTool {
                     let w = currentPoint.x - this._initialPoint.x;
                     let h = currentPoint.y - this._initialPoint.y;
                     if (w >= 0) {
-                        this._rect.setAttribute('x', this._initialPoint.x);
+                        this._rect.setAttribute('x', this._initialPoint.normalizedX);
                         this._rect.setAttribute('width', w);
                     }
                     else {
-                        this._rect.setAttribute('x', currentPoint.x);
+                        this._rect.setAttribute('x', currentPoint.normalizedX);
                         this._rect.setAttribute('width', (-1 * w));
                     }
                     if (h >= 0) {
-                        this._rect.setAttribute('y', this._initialPoint.y);
+                        this._rect.setAttribute('y', this._initialPoint.normalizedY);
                         this._rect.setAttribute('height', h);
                     }
                     else {
-                        this._rect.setAttribute('y', currentPoint.y);
+                        this._rect.setAttribute('y', currentPoint.normalizedY);
                         this._rect.setAttribute('height', (-1 * h));
                     }
                 }
@@ -53,17 +53,17 @@ export class RectangleSelectorTool {
                     let elementRect = e.getBoundingClientRect();
                     point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
                     point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
-                    const p1 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
+                    const p1 = this._rect.isPointInFill(point);
                     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);
+                    const p2 = p1 && this._rect.isPointInFill(point);
                     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);
+                    const p3 = p2 && this._rect.isPointInFill(point);
                     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 p4 = p3 && this._rect.isPointInFill(point);
+                    if (p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                         inSelectionElements.push(desItem);
                     }