@node-projects/web-component-designer 0.0.87 → 0.0.90

package/dist/elements/controls/PlainScrollbar.js

@@ -142,7 +142,7 @@ class Widget {
         if (clippedNewValue == this.value) {
             return false;
         }
-        this.value = clippedNewValue;
+        this.value = isNaN(clippedNewValue) ? 0 : clippedNewValue;
         this.updateThumbPosition();
         return true;
     }
@@ -281,10 +281,16 @@ export class PlainScrollbar extends HTMLElement {
     widget;
     constructor() {
         super();
-        const value = parseFloat(this.getAttribute("value"));
         this.widget = new Widget(this);
+        const value = parseFloat(this.getAttribute("value"));
         if (!isNaN(value))
             this.widget.value = value;
+        if (this.hasOwnProperty('value')) {
+            let value = this.value;
+            delete this.value;
+            if (!isNaN(value))
+                this.widget.value = value;
+        }
     }
     /* @Override */ connectedCallback() {
         this.widget.connectedCallback();
@@ -343,121 +349,121 @@ export class PlainScrollbar extends HTMLElement {
 const EPS = 1E-9;
 const buttonSize = "var(--plain-scrollbar-button-size, 13px)";
 const buttonPath = '<path d="M -60 30 h 120 L 0 -30 z" stroke-width="0"/>';
-const scrollbarStyle = `
-    :host {
-       display: block;
-       contain: content;
-       background-color: #f8f8f8;
-       border-style: solid;
-       border-width: 1px;
-       border-color: #dddddd;
-    }
-    #root {
-       touch-action: none;
-       user-select: none;
-       box-sizing: border-box;
-       position: relative;
-       width: 100%;
-       height: 100%;
-    }
-    #trough {
-       position: absolute;
-    }
-    #root.vertical #trough {
-       width: 100%;
-       top: ${buttonSize};
-       bottom: ${buttonSize};
-    }
-    #root.horizontal #trough {
-       height: 100%;
-       left: ${buttonSize};
-       right: ${buttonSize};
-    }
-    #thumb {
-       box-sizing: border-box;
-       position: absolute;
-       width: 100%;
-       height: 100%;
-       background-color: var(--plain-scrollbar-thumb-background-color, #f0f0f0);
-       border-style: solid;
-       border-width: var(--plain-scrollbar-thumb-border-width, 1px);
-       border-color: var(--plain-scrollbar-thumb-border-color, #b8b8b8);
-       border-radius: var(--plain-scrollbar-thumb-border-radius, 4px);
-       transition: background-color 50ms linear;
-    }
-    #thumb:hover {
-       background-color: var(--plain-scrollbar-thumb-background-color-hover, #e0e0e0);
-    }
-    #thumb.active {
-       background-color: var(--plain-scrollbar-thumb-background-color-active, #c0c0c0);
-    }
-    #button1,
-    #button2 {
-       box-sizing: border-box;
-       position: absolute;
-       display: block;
-       fill: var(--plain-scrollbar-button-color, #606060);
-    }
-    #root.vertical #button1 {
-       top: 0;
-       width: 100%;
-       height: ${buttonSize};
-    }
-    #root.vertical #button2 {
-       bottom: 0;
-       width: 100%;
-       height: ${buttonSize};
-    }
-    #root.horizontal #button1 {
-       left: 0;
-       height: 100%;
-       width: ${buttonSize};
-    }
-    #root.horizontal #button2 {
-       right: 0;
-       height: 100%;
-       width: ${buttonSize};
-    }
-    #upArrow,
-    #downArrow,
-    #leftArrow,
-    #rightArrow {
-       display: none;
-       width: 100%;
-       height: 100%;
-    }
-    #root.vertical #upArrow,
-    #root.vertical #downArrow {
-       display: block;
-    }
-    #root.horizontal #leftArrow,
-    #root.horizontal #rightArrow {
-       display: block;
-    }
-    #button1:hover,
-    #button2:hover {
-       background-color: var(--plain-scrollbar-button-color-hover, #e0e0e0);
-    }
-    #button1.active,
-    #button2.active {
-       background-color: var(--plain-scrollbar-button-color-active, #c0c0c0);
-    }
+const scrollbarStyle = `
+    :host {
+       display: block;
+       contain: content;
+       background-color: #f8f8f8;
+       border-style: solid;
+       border-width: 1px;
+       border-color: #dddddd;
+    }
+    #root {
+       touch-action: none;
+       user-select: none;
+       box-sizing: border-box;
+       position: relative;
+       width: 100%;
+       height: 100%;
+    }
+    #trough {
+       position: absolute;
+    }
+    #root.vertical #trough {
+       width: 100%;
+       top: ${buttonSize};
+       bottom: ${buttonSize};
+    }
+    #root.horizontal #trough {
+       height: 100%;
+       left: ${buttonSize};
+       right: ${buttonSize};
+    }
+    #thumb {
+       box-sizing: border-box;
+       position: absolute;
+       width: 100%;
+       height: 100%;
+       background-color: var(--plain-scrollbar-thumb-background-color, #f0f0f0);
+       border-style: solid;
+       border-width: var(--plain-scrollbar-thumb-border-width, 1px);
+       border-color: var(--plain-scrollbar-thumb-border-color, #b8b8b8);
+       border-radius: var(--plain-scrollbar-thumb-border-radius, 4px);
+       transition: background-color 50ms linear;
+    }
+    #thumb:hover {
+       background-color: var(--plain-scrollbar-thumb-background-color-hover, #e0e0e0);
+    }
+    #thumb.active {
+       background-color: var(--plain-scrollbar-thumb-background-color-active, #c0c0c0);
+    }
+    #button1,
+    #button2 {
+       box-sizing: border-box;
+       position: absolute;
+       display: block;
+       fill: var(--plain-scrollbar-button-color, #606060);
+    }
+    #root.vertical #button1 {
+       top: 0;
+       width: 100%;
+       height: ${buttonSize};
+    }
+    #root.vertical #button2 {
+       bottom: 0;
+       width: 100%;
+       height: ${buttonSize};
+    }
+    #root.horizontal #button1 {
+       left: 0;
+       height: 100%;
+       width: ${buttonSize};
+    }
+    #root.horizontal #button2 {
+       right: 0;
+       height: 100%;
+       width: ${buttonSize};
+    }
+    #upArrow,
+    #downArrow,
+    #leftArrow,
+    #rightArrow {
+       display: none;
+       width: 100%;
+       height: 100%;
+    }
+    #root.vertical #upArrow,
+    #root.vertical #downArrow {
+       display: block;
+    }
+    #root.horizontal #leftArrow,
+    #root.horizontal #rightArrow {
+       display: block;
+    }
+    #button1:hover,
+    #button2:hover {
+       background-color: var(--plain-scrollbar-button-color-hover, #e0e0e0);
+    }
+    #button1.active,
+    #button2.active {
+       background-color: var(--plain-scrollbar-button-color-active, #c0c0c0);
+    }
     `;
-const scrollbarHtmlTemplate = `
-    <style>${scrollbarStyle}</style>
-    <div id="root" part="root">
-     <div id="button1" part="button button1">
-      <svg id="upArrow" part="arrow upArrow" viewBox="-100 -100 200 200">${buttonPath}</svg>
-      <svg id="leftArrow" part="arrow leftArrow" viewBox="-100 -100 200 200"><g transform="rotate(-90)">${buttonPath}</g></svg>
-     </div>
-     <div id="trough" part="trough">
-      <div id="thumb" part="thumb"></div>
-     </div>
-     <div id="button2" part="button button2">
-      <svg id="downArrow" part="arrow downArrow" viewBox="-100 -100 200 200"><g transform="rotate(180)">${buttonPath}</g></svg>
-      <svg id="rightArrow" part="arrow rightArrow" viewBox="-100 -100 200 200"><g transform="rotate(90)">${buttonPath}</g></svg>
-     </div>
-    </div>
+const scrollbarHtmlTemplate = `
+    <style>${scrollbarStyle}</style>
+    <div id="root" part="root">
+     <div id="button1" part="button button1">
+      <svg id="upArrow" part="arrow upArrow" viewBox="-100 -100 200 200">${buttonPath}</svg>
+      <svg id="leftArrow" part="arrow leftArrow" viewBox="-100 -100 200 200"><g transform="rotate(-90)">${buttonPath}</g></svg>
+     </div>
+     <div id="trough" part="trough">
+      <div id="thumb" part="thumb"></div>
+     </div>
+     <div id="button2" part="button button2">
+      <svg id="downArrow" part="arrow downArrow" viewBox="-100 -100 200 200"><g transform="rotate(180)">${buttonPath}</g></svg>
+      <svg id="rightArrow" part="arrow rightArrow" viewBox="-100 -100 200 200"><g transform="rotate(90)">${buttonPath}</g></svg>
+     </div>
+    </div>
     `;
 //------------------------------------------------------------------------------
 function formatOrientation(b) {

package/dist/elements/controls/SimpleSplitView.js

@@ -8,7 +8,7 @@ export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
       position: relative;
       height: 100%;
       width: 100%;
-      grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
+      grid-template-rows: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px);
       display: grid;
       align-items: center;
     }

package/dist/elements/documentContainer.js

@@ -62,9 +62,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
         this.codeView = new serviceContainer.config.codeViewWidget();
         this.codeView.slot = 'bottom';
+        this.codeView.style.position = 'relative';
         this._codeDiv = document.createElement("div");
         this._tabControl.appendChild(this._codeDiv);
         this._codeDiv.title = 'Code';
+        this._codeDiv.style.position = 'relative';
         this._codeDiv.appendChild(this.codeView);
         this.codeView.onTextChanged.on(text => {
             if (!this._disableChangeNotificationDesigner) {

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

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "../..";
+import { Orientation } from "../../enums/Orientation";
+export declare abstract class ArrangeHelper {
+    static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas): void;
+    private static arrange;
+    private static formGroup;
+}

package/dist/elements/helper/ArrangeHelper.js

@@ -0,0 +1,79 @@
+import { Orientation } from "../../enums/Orientation";
+export class ArrangeHelper {
+    static arrangeElements(orientation, designerCanvas) {
+        switch (orientation) {
+            case Orientation.TOP: {
+                const grp = this.formGroup(ArrangeDirection.TOP, designerCanvas);
+                const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', top);
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.RIGHT: {
+                const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const right = Math.floor(arrElement.x + arrElement.width);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', (right - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width)) + "px");
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.BOTTOM:
+                const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const top = Math.floor(arrElement.y + arrElement.height);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', (top - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height)) + "px");
+                }
+                grp.commit();
+                break;
+            case Orientation.LEFT: {
+                const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas);
+                const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', left);
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.VERTICAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.VERTICAL_CENTER, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const ver_center = arrElement.y + arrElement.height / 2;
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'top', (ver_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).height) / 2) + "px");
+                }
+                grp.commit();
+                break;
+            }
+            case Orientation.HORIZONTAL_CENTER: {
+                const grp = this.formGroup(ArrangeDirection.HORIZONTAL_CENTER, designerCanvas);
+                const arrElement = designerCanvas.getNormalizedElementCoordinates(designerCanvas.instanceServiceContainer.selectionService.primarySelection.element);
+                const hor_center = arrElement.x + (arrElement.width / 2);
+                for (let elem of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                    this.arrange(elem, 'left', (hor_center - Math.floor(designerCanvas.getNormalizedElementCoordinates(elem.element).width) / 2) + "px");
+                }
+                grp.commit();
+                break;
+            }
+        }
+    }
+    static arrange(element, attribut, value) {
+        element.setStyle(attribut, value);
+    }
+    static formGroup(name, designerCanvas) {
+        return designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup(name);
+    }
+}
+var ArrangeDirection;
+(function (ArrangeDirection) {
+    ArrangeDirection["TOP"] = "arrangeTop";
+    ArrangeDirection["RIGHT"] = "arrangeRight";
+    ArrangeDirection["BOTTOM"] = "arrangeBottom";
+    ArrangeDirection["LEFT"] = "arrangeLeft";
+    ArrangeDirection["HORIZONTAL_CENTER"] = "arrangeHorizontalCenter";
+    ArrangeDirection["VERTICAL_CENTER"] = "arrangeVerticalCenter";
+})(ArrangeDirection || (ArrangeDirection = {}));

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -1,4 +1,6 @@
 import { CommandType } from "../../../commandHandling/CommandType.js";
+import { ArrangeHelper } from "../../helper/ArrangeHelper.js";
+import { Orientation } from "../../../enums/Orientation.js";
 export class DefaultModelCommandService {
     canExecuteCommand(designerCanvas, command) {
         if (command.type == CommandType.moveBackward ||
@@ -33,21 +35,23 @@ export class DefaultModelCommandService {
             sel.parent.insertChild(sel, 0);
         else if (command.type == CommandType.moveToFront)
             sel.parent.insertChild(sel);
+        else if (command.type == CommandType.arrangeTop) {
+            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeRight) {
+            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas);
+        }
         else if (command.type == CommandType.arrangeLeft) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeLeft');
-            const left = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('left');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('left', left);
-            }
-            grp.commit();
+            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas);
         }
-        else if (command.type == CommandType.arrangeTop) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('arrangeTop');
-            const top = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('top');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('top', top);
-            }
-            grp.commit();
+        else if (command.type == CommandType.arrangeBottom) {
+            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeCenter) {
+            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas);
+        }
+        else if (command.type == CommandType.arrangeMiddle) {
+            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas);
         }
         else if (command.type == CommandType.unifyHeight) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');

package/dist/elements/services/undoService/UndoService.js

@@ -19,7 +19,7 @@ export class UndoService {
         let itm = this._transactionStack.pop();
         if (itm !== transactionItem) {
             this.clear();
-            throw "UndoService - Commited Transation was not the last";
+            throw "UndoService - Commited Transaction was not the last";
         }
         if (itm.undoStack.length)
             this._undoStack.push(itm);
@@ -29,7 +29,7 @@ export class UndoService {
         let itm = this._transactionStack.pop();
         if (itm !== transactionItem) {
             this.clear();
-            throw "UndoService - Aborted Transation was not the last";
+            throw "UndoService - Aborted Transaction was not the last";
         }
         itm.undo();
     }

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

@@ -9,10 +9,12 @@ import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayerView } from "./overlayLayerView";
 import { IRect } from "../../../interfaces/IRect.js";
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { ISize } from "../../../interfaces/ISize.js";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
     readonly containerBoundingRect: DOMRect;
+    readonly outerRect: DOMRect;
     readonly rootDesignItem: IDesignItem;
     readonly overlayLayer: OverlayLayerView;
     readonly extensionManager: IExtensionManager;
@@ -28,9 +30,15 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    removeCurrentPointerEventHandler(): any;
+    getDesignSurfaceDimensions(): ISize;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
     getItemsBelowMouse(event: MouseEvent): Element[];
+    zoomTowardsPoint(point: IPoint, scalechange: number): void;
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void;
 }

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

@@ -13,6 +13,7 @@ import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
 import { IRect } from "../../../interfaces/IRect.js";
+import { ISize } from "../../../interfaces/ISize.js";
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -30,17 +31,21 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;
+    private _currentContextMenu;
+    private _lastPointerDownHandler;
     get zoomFactor(): number;
     set zoomFactor(value: number);
     get scaleFactor(): number;
     get canvasOffset(): IPoint;
     set canvasOffset(value: IPoint);
+    get canvasOffsetUnzoomed(): IPoint;
+    set canvasOffsetUnzoomed(value: IPoint);
     onContentChanged: TypedEvent<void>;
+    onZoomFactorChanged: TypedEvent<number>;
     private _canvas;
     private _canvasContainer;
     private _outercanvas2;
     private _lastHoverDesignItem;
-    private _onContextMenuBound;
     private _pointerEventHandlerBound;
     private _firstConnect;
     private _onKeyDownBound;
@@ -55,6 +60,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set designerWidth(value: string);
     get designerHeight(): string;
     set designerHeight(value: string);
+    getDesignSurfaceDimensions(): ISize;
     get designerOffsetWidth(): number;
     get designerOffsetHeight(): number;
     set additionalStyle(value: CSSStyleSheet);
@@ -67,7 +73,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     initialize(serviceContainer: ServiceContainer): void;
     elementFromPoint(x: number, y: number): Element;
     connectedCallback(): void;
-    zoomFactorChanged(): void;
+    private _zoomFactorChanged;
     _updateTransform(): void;
     setDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
@@ -75,19 +81,23 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDragLeave;
     private _onDragOver;
     private _onDrop;
-    private _onContextMenu;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     private _onDblClick;
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    convertEventToViewPortCoordinates(point: IPoint): IPoint;
+    getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;
     private _pointerEventHandler;
+    removeCurrentPointerEventHandler(): void;
     private _fillCalculationrects;
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     getItemsBelowMouse(event: MouseEvent): Element[];
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
 }