@node-projects/web-component-designer 0.1.0 → 0.1.2

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

@@ -0,0 +1,220 @@
+import { OverlayLayer } from "./extensions/OverlayLayer.js";
+const overlayLayer = OverlayLayer.Normal;
+export class Snaplines {
+    snapOffset = 5;
+    _overlayLayerView;
+    _containerItem;
+    _positionsH = [];
+    _positionsMiddleH = [];
+    _positionsV = [];
+    _positionsMiddleV = [];
+    _outerRect;
+    constructor(overlayLayer) {
+        this._overlayLayerView = overlayLayer;
+    }
+    initialize(containerItem) {
+        //add snapline layer
+        this._containerItem = containerItem;
+    }
+    clearSnaplines() {
+        if (this._overlayLayerView.removeAllNodesWithClass)
+            this._overlayLayerView.removeAllNodesWithClass('svg-snapline');
+        this._positionsH = [];
+        this._positionsMiddleH = [];
+        this._positionsV = [];
+        this._positionsMiddleV = [];
+    }
+    calculateSnaplines(ignoredItems) {
+        this.clearSnaplines();
+        const providedSnaplines = this._containerItem.serviceContainer.snaplinesProviderService.provideSnaplines(this._containerItem, ignoredItems);
+        this._outerRect = providedSnaplines.outerRect;
+        this._positionsH = providedSnaplines.positionsH;
+        this._positionsMiddleH = providedSnaplines.positionsMiddleH;
+        this._positionsV = providedSnaplines.positionsV;
+        this._positionsMiddleV = providedSnaplines.positionsMiddleV;
+    }
+    //return the snapped position
+    snapToPosition(position, size, moveDirection) {
+        let minDiff = this.snapOffset + 1;
+        let pH = undefined;
+        let posH = undefined;
+        for (let i = 0; i < this._positionsH.length; i++) {
+            let akDiff1 = Math.abs(this._positionsH[i][0] - position.x);
+            if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) {
+                minDiff = akDiff1;
+                pH = [];
+                posH = this._positionsH[i][0];
+            }
+            let akDiff2;
+            if (size) {
+                akDiff2 = Math.abs(position.x + size.width - this._positionsH[i][0]);
+                if (akDiff2 < minDiff || (akDiff2 === minDiff && pH === undefined)) {
+                    minDiff = akDiff2;
+                    pH = [];
+                    posH = this._positionsH[i][0] - size.width;
+                }
+            }
+            if (akDiff1 === minDiff) {
+                pH.push(this._positionsH[i][1]);
+            }
+            if (size) {
+                if (akDiff2 === minDiff && akDiff1 !== minDiff) {
+                    pH.push(this._positionsH[i][1]);
+                }
+            }
+        }
+        if (size) {
+            for (let i = 0; i < this._positionsMiddleH.length; i++) {
+                let akDiff1 = Math.abs(this._positionsMiddleH[i][0] - (position.x + size.width / 2));
+                if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) {
+                    minDiff = akDiff1;
+                    pH = [];
+                    posH = this._positionsMiddleH[i][0] - size.width / 2;
+                }
+                if (akDiff1 === minDiff) {
+                    pH.push(this._positionsMiddleH[i][1]);
+                }
+            }
+        }
+        minDiff = this.snapOffset + 1;
+        let pV = undefined;
+        let posV = undefined;
+        for (let i = 0; i < this._positionsV.length; i++) {
+            let akDiff1 = Math.abs(this._positionsV[i][0] - position.y);
+            if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) {
+                minDiff = akDiff1;
+                pV = [];
+                posV = this._positionsV[i][0];
+            }
+            let akDiff2;
+            if (size) {
+                akDiff2 = Math.abs(position.y + size.height - this._positionsV[i][0]);
+                if (akDiff2 < minDiff || (akDiff2 === minDiff && pV === undefined)) {
+                    minDiff = akDiff2;
+                    pV = [];
+                    posV = this._positionsV[i][0] - size.height;
+                }
+            }
+            if (akDiff1 === minDiff) {
+                pV.push(this._positionsV[i][1]);
+            }
+            if (size) {
+                if (akDiff2 === minDiff && akDiff1 !== minDiff) {
+                    pV.push(this._positionsV[i][1]);
+                }
+            }
+        }
+        if (size) {
+            for (let i = 0; i < this._positionsMiddleV.length; i++) {
+                let akDiff1 = Math.abs(this._positionsMiddleV[i][0] - (position.y + size.height / 2));
+                if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) {
+                    minDiff = akDiff1;
+                    pV = [];
+                    posV = this._positionsMiddleV[i][0] - size.height / 2;
+                }
+                if (akDiff1 === minDiff) {
+                    pV.push(this._positionsMiddleV[i][1]);
+                }
+            }
+        }
+        this._overlayLayerView.removeAllNodesWithClass('svg-snapline');
+        if (pH !== undefined || pV !== undefined) {
+            let pos = { x: pH !== undefined ? posH : position.x, y: pV !== undefined ? posV : position.y };
+            this.drawSnaplines(pos, size, pH, pV);
+            return { x: pH !== undefined ? posH : null, y: pV !== undefined ? posV : null };
+        }
+        return { x: null, y: null };
+    }
+    drawSnaplines(position, size, rectsH, rectsV) {
+        if (rectsH) {
+            let minY = position.y;
+            let maxY = position.y;
+            for (const r of rectsH) {
+                let ry = r.y - this._outerRect.top;
+                minY = minY < ry ? minY : ry;
+                maxY = maxY > ry ? maxY : ry;
+            }
+            for (const r of rectsH) {
+                if (r.x - this._outerRect.left == position.x || (size && r.x - this._outerRect.left == position.x + size.width)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (r.x - this._outerRect.x));
+                    line.setAttribute('x2', (r.x - this._outerRect.x));
+                    line.setAttribute('y1', (minY));
+                    line.setAttribute('y2', (maxY));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
+                }
+                if (r.x - this._outerRect.left + r.width == position.x || (size && r.x - this._outerRect.left + r.width == position.x + size.width)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (r.x - this._outerRect.x + r.width));
+                    line.setAttribute('x2', (r.x - this._outerRect.x + r.width));
+                    line.setAttribute('y1', (minY));
+                    line.setAttribute('y2', (maxY));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
+                }
+                if (size && r.x - this._outerRect.left + r.width / 2 == position.x + size.width / 2) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (r.x - this._outerRect.x + r.width / 2));
+                    line.setAttribute('x2', (r.x - this._outerRect.x + r.width / 2));
+                    line.setAttribute('y1', (minY));
+                    line.setAttribute('y2', (maxY));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
+                }
+                let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                rect.setAttribute('x', (r.x - this._outerRect.x));
+                rect.setAttribute('width', (r.width));
+                rect.setAttribute('y', (r.y - this._outerRect.y));
+                rect.setAttribute('height', (r.height));
+                rect.setAttribute('class', 'svg-snapline');
+                this._overlayLayerView.addOverlay(this.constructor.name, rect, overlayLayer);
+            }
+        }
+        if (rectsV) {
+            let minX = position.x;
+            let maxX = position.x;
+            for (const r of rectsV) {
+                let rx = r.x - this._outerRect.left;
+                minX = minX < rx ? minX : rx;
+                maxX = maxX > rx ? maxX : rx;
+            }
+            for (const r of rectsV) {
+                if (r.y - this._outerRect.top == position.y || (size && r.y - this._outerRect.top == position.y + size.height)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (minX));
+                    line.setAttribute('x2', (maxX));
+                    line.setAttribute('y1', (r.y - this._outerRect.y));
+                    line.setAttribute('y2', (r.y - this._outerRect.y));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
+                }
+                if (r.y - this._outerRect.top + r.height == position.y || (size && r.y - this._outerRect.top + r.height == position.y + size.height)) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (minX));
+                    line.setAttribute('x2', (maxX));
+                    line.setAttribute('y1', (r.y - this._outerRect.y + r.height));
+                    line.setAttribute('y2', (r.y - this._outerRect.y + r.height));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
+                }
+                if (size && r.y - this._outerRect.top + r.height / 2 == position.y + size.height / 2) {
+                    let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    line.setAttribute('x1', (minX));
+                    line.setAttribute('x2', (maxX));
+                    line.setAttribute('y1', (r.y - this._outerRect.y + r.height / 2));
+                    line.setAttribute('y2', (r.y - this._outerRect.y + r.height / 2));
+                    line.setAttribute('class', 'svg-snapline');
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
+                }
+                let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                rect.setAttribute('x', (r.x - this._outerRect.x));
+                rect.setAttribute('width', (r.width));
+                rect.setAttribute('y', (r.y - this._outerRect.y));
+                rect.setAttribute('height', (r.height));
+                rect.setAttribute('class', 'svg-snapline');
+                this._overlayLayerView.addOverlay(this.constructor.name, rect, overlayLayer);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+import { DesignerView } from './designerView.js';
+export declare class DefaultConfiguredDesignerView extends DesignerView {
+    constructor();
+    ready(): Promise<void>;
+}

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

@@ -0,0 +1,11 @@
+import { DesignerView } from './designerView.js';
+export class DefaultConfiguredDesignerView extends DesignerView {
+    constructor() {
+        super();
+    }
+    async ready() {
+        const createDefaultServiceContainer = await (await import('../../services/DefaultServiceBootstrap.js')).default;
+        this.initialize(createDefaultServiceContainer());
+    }
+}
+customElements.define('node-projects-default-configured-designer-view', DefaultConfiguredDesignerView);

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

@@ -0,0 +1,133 @@
+/// <reference types="node" />
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from './IDesignerCanvas.js';
+import { Snaplines } from './Snaplines.js';
+import { IPlacementView } from './IPlacementView.js';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IExtensionManager } from './extensions/IExtensionManger.js';
+import { IPoint } from '../../../interfaces/IPoint.js';
+import { OverlayLayerView } from './overlayLayerView.js';
+import { IRect } from "../../../interfaces/IRect.js";
+import { ISize } from "../../../interfaces/ISize.js";
+import { ITool } from "./tools/ITool.js";
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
+export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
+    serviceContainer: ServiceContainer;
+    instanceServiceContainer: InstanceServiceContainer;
+    containerBoundingRect: DOMRect;
+    outerRect: DOMRect;
+    clickOverlay: HTMLDivElement;
+    private _activeTool;
+    gridSize: number;
+    pasteOffset: number;
+    alignOnGrid: boolean;
+    alignOnSnap: boolean;
+    snapLines: Snaplines;
+    overlayLayer: OverlayLayerView;
+    rootDesignItem: IDesignItem;
+    eatEvents: Element;
+    private _currentPasteOffset;
+    private _zoomFactor;
+    private _scaleFactor;
+    private _canvasOffset;
+    private _additionalStyle;
+    private _currentContextMenu;
+    private _backgroundImage;
+    private _enableSelectTextNodesOnClick;
+    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>;
+    get canvas(): HTMLElement;
+    private _canvas;
+    private _canvasContainer;
+    private _outercanvas2;
+    private _lastHoverDesignItem;
+    private _firstConnect;
+    static cssprefixConstant: string;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    extensionManager: IExtensionManager;
+    private _pointerextensions;
+    private _lastCopiedPrimaryItem;
+    constructor();
+    get designerWidth(): string;
+    set designerWidth(value: string);
+    get designerHeight(): string;
+    set designerHeight(value: string);
+    getDesignSurfaceDimensions(): ISize;
+    get designerOffsetWidth(): number;
+    get designerOffsetHeight(): number;
+    set additionalStyles(value: CSSStyleSheet[]);
+    get additionalStyles(): CSSStyleSheet[];
+    private applyAllStyles;
+    executeCommand(command: IUiCommand): Promise<void>;
+    disableBackgroud(): void;
+    enableBackground(): void;
+    zoomToFit(): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    handleSelectAll(): void;
+    handleCopyCommand(): Promise<void>;
+    handlePasteCommand(disableRestoreOfPositions: boolean): Promise<void>;
+    handleDeleteCommand(): void;
+    initialize(serviceContainer: ServiceContainer): void;
+    connectedCallback(): void;
+    private _zoomFactorChanged;
+    private _resizeBackgroundGrid;
+    private _updateTransform;
+    setDesignItems(designItems: IDesignItem[]): void;
+    _internalSetDesignItems(designItems: IDesignItem[]): void;
+    reparseTimeout: NodeJS.Timeout | null;
+    lazyTriggerReparseDocumentStylesheets(): void;
+    private reparseDocumentStylesheets;
+    addDesignItems(designItems: IDesignItem[]): void;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _lastDdElement;
+    private _onDragOver;
+    private _onDrop;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenu;
+    private _onDblClick;
+    private _searchShowOverlay;
+    private _searchHideOverlay;
+    private _searchRun;
+    private onKeyUp;
+    private onKeyDown;
+    /**
+     * Converts the Event x/y coordinates, to the mouse position on the canvas
+     */
+    getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    /**
+     * Converts the Event x/y coordinates, to the mouse position in the viewport
+     */
+    getViewportCoordinates(event: MouseEvent): IPoint;
+    getNormalizedTextNodeCoordinates(element: Text, ignoreScalefactor?: boolean): IRect;
+    getNormalizedElementCoordinates(element: Element, ignoreScalefactor?: boolean): IRect;
+    getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
+        realWidth: number;
+        realHeight: number;
+    };
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
+    elementFromPoint(x: number, y: number): Element;
+    elementsFromPoint(x: number, y: number): Element[];
+    getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
+    showHoverExtension(element: Element, event: Event): void;
+    private _pointerEventHandler;
+    captureActiveTool(tool: ITool): void;
+    releaseActiveTool(): void;
+    private _fillCalculationrects;
+    removeOverlay(element: SVGGraphicsElement): void;
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    zoomPoint(canvasPoint: IPoint, newZoom: number): void;
+    private zoomConvertEventToViewPortCoordinates;
+    zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
+}