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

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

@@ -1,220 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,133 +0,0 @@
-/// <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;
-}