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

package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js

@@ -0,0 +1,27 @@
+const offset = 10;
+export class ZoomToElementContextMenu {
+    shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            {
+                title: 'zoom to', action: () => {
+                    const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element);
+                    const startPoint = { x: coord.x - offset, y: coord.y - offset };
+                    const endPoint = { x: coord.x + coord.width + offset, y: coord.y + coord.height + offset };
+                    let rect = {
+                        x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
+                        y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y,
+                        width: Math.abs(startPoint.x - endPoint.x),
+                        height: Math.abs(startPoint.y - endPoint.y),
+                    };
+                    let zFactorWidth = designerCanvas.outerRect.width / rect.width;
+                    let zFactorHeight = designerCanvas.outerRect.height / rect.height;
+                    let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth;
+                    designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, zoomFactor);
+                }
+            },
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.d.ts

@@ -0,0 +1,16 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class DisplayGridExtension extends AbstractExtension {
+    private _cells;
+    private _texts;
+    private _gaps;
+    private _group;
+    private gridInformation;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(event?: Event): void;
+    refresh(event?: Event): void;
+    dispose(): void;
+    _initSVGArrays(): void;
+}

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js

@@ -0,0 +1,66 @@
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
+import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
+import { AbstractExtension } from '../AbstractExtension.js';
+import { OverlayLayer } from "../OverlayLayer.js";
+export class DisplayGridExtension extends AbstractExtension {
+    _cells;
+    _texts;
+    _gaps;
+    _group;
+    gridInformation;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(event) {
+        this._initSVGArrays();
+        this.refresh(event);
+    }
+    refresh(event) {
+        this.gridInformation = calculateGridInformation(this.extendedItem);
+        let cells = this.gridInformation.cells;
+        if (!this._group) {
+            this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
+            this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
+            this._group.style.transformOrigin = '0 0';
+            this._group.style.transformBox = 'fill-box';
+        }
+        if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
+            if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length)
+                this._initSVGArrays();
+            //draw gaps
+            this.gridInformation.gaps.forEach((gap, i) => {
+                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Background);
+                this._group.appendChild(this._gaps[i]);
+            });
+            //draw cells
+            cells.forEach((row, i) => {
+                row.forEach((cell, j) => {
+                    this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
+                    this._group.appendChild(this._cells[i][j]);
+                    if (cell.name) {
+                        this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
+                        this._texts[i][j].setAttribute("dominant-baseline", "hanging");
+                    }
+                    if (event && event instanceof MouseEvent) {
+                        let crd = this.designerCanvas.getNormalizedEventCoordinates(event);
+                        if (crd.x >= cell.x && crd.y >= cell.y && crd.x <= cell.x + cell.width && crd.y <= cell.y + cell.height) {
+                            this._cells[i][j].setAttribute("class", "svg-grid-current-cell");
+                        }
+                    }
+                });
+            });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+    _initSVGArrays() {
+        this._removeAllOverlays();
+        this.gridInformation = calculateGridInformation(this.extendedItem);
+        this._cells = new Array(this.gridInformation.cells.length);
+        this.gridInformation.cells.forEach((row, i) => this._cells[i] = new Array(row.length));
+        this._texts = new Array(this.gridInformation.cells.length);
+        this.gridInformation.cells.forEach((row, i) => this._texts[i] = new Array(row.length));
+        this._gaps = new Array(this.gridInformation.gaps.length);
+    }
+}

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.d.ts

@@ -0,0 +1,11 @@
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
+export declare class DisplayGridExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js

@@ -0,0 +1,22 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { DisplayGridExtension } from './DisplayGridExtension.js';
+export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
+export class DisplayGridExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'grid' || display == 'inline-grid')
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new DisplayGridExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-current-cell { stroke: orange; stroke-dasharray: 5; fill: #e3ff4722; }
+    .svg-grid-area { font-size: 8px; }
+    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+    .svg-grid-header { fill: #ff944722; stroke: orange; }
+    .svg-grid-plus-sign { stroke: black; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.d.ts

@@ -0,0 +1,18 @@
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
+    gridInformation: ReturnType<typeof calculateGridInformation>;
+    private _resizers;
+    private _initalPos;
+    private _initialSizes;
+    private _group;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(event?: Event): void;
+    refresh(event?: Event): void;
+    private _pointerActionTypeResize;
+    private _convertCssUnits;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js

@@ -0,0 +1,118 @@
+import { EventNames } from "../../../../../enums/EventNames.js";
+import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
+import { calculateGridInformation } from "../../../../helper/GridHelper.js";
+import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
+import { AbstractExtension } from '../AbstractExtension.js';
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditGridColumnRowSizesExtension extends AbstractExtension {
+    gridInformation;
+    _resizers = [];
+    _initalPos;
+    _initialSizes;
+    _group;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(event) {
+        this.refresh(event);
+    }
+    refresh(event) {
+        this.gridInformation = calculateGridInformation(this.extendedItem);
+        this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
+        this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
+        this._group.style.transformOrigin = '0 0';
+        this._group.style.transformBox = 'fill-box';
+        this.gridInformation.gaps.forEach((gap, i) => {
+            if (gap.width < 3) {
+                gap.width = 3;
+                gap.x--;
+            }
+            if (gap.height < 3) {
+                gap.height = 3;
+                gap.y--;
+            }
+            let rect = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal);
+            this._group.appendChild(rect);
+            if (!this._resizers[i]) {
+                this._resizers[i] = rect;
+                rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));
+                rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap));
+                rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap));
+            }
+        });
+    }
+    _pointerActionTypeResize(event, rect, gap) {
+        event.stopPropagation();
+        const templatePropertyName = gap.type == 'h' ? 'gridTemplateRows' : 'gridTemplateColumns';
+        const axisPropertyName = gap.type == 'h' ? 'Y' : 'X';
+        const index = (gap.type == 'h' ? gap.row : gap.column) - 1;
+        const sizeType = gap.type == 'h' ? 'height' : 'width';
+        const pos = event['client' + axisPropertyName];
+        switch (event.type) {
+            case EventNames.PointerDown:
+                rect.setPointerCapture(event.pointerId);
+                this._initalPos = pos;
+                this._initialSizes = getComputedStyle(this.extendedItem.element)[templatePropertyName];
+                break;
+            case EventNames.PointerMove:
+                if (this._initialSizes) {
+                    const diff = this._initalPos - pos;
+                    let parts = this._initialSizes.split(' ');
+                    parts[index] = (parseFloat(parts[index]) - diff) + 'px';
+                    parts[index + 1] = (parseFloat(parts[index + 1]) + diff) + 'px';
+                    this.extendedItem.element.style[templatePropertyName] = parts.join(' ');
+                    this.extensionManager.refreshExtensions([this.extendedItem], null, event);
+                }
+                break;
+            case EventNames.PointerUp:
+                rect.releasePointerCapture(event.pointerId);
+                const diff = this._initalPos - pos;
+                const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName);
+                const initialParts = this._initialSizes.split(' ');
+                const parts = realStyle.split(' ');
+                let units = parts.map(x => getCssUnit(x));
+                if (parts.length != initialParts.length) {
+                    units = initialParts.map(x => getCssUnit(x));
+                }
+                this.extendedItem.element.style[templatePropertyName] = '';
+                const targetPixelSizes = initialParts.map(x => parseFloat(x));
+                targetPixelSizes[index] -= diff;
+                targetPixelSizes[index + 1] += diff;
+                const newSizes = this._convertCssUnits(targetPixelSizes, units, this.extendedItem.element, sizeType);
+                this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, newSizes.join(' '));
+                this._initalPos = null;
+                this._initialSizes = null;
+                this.extensionManager.refreshExtensions([this.extendedItem]);
+                break;
+        }
+    }
+    _convertCssUnits(pixelSizes, targetUnits, target, percentTarget) {
+        let cp = getComputedStyle(target);
+        let bounding = target.getBoundingClientRect();
+        let containerSize = bounding[percentTarget];
+        let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
+        let gapValue = percentTarget == "width" ? cp.columnGap : cp.rowGap;
+        if (gapValue == "normal")
+            gapValue = '0px';
+        let gapSize = convertCssUnitToPixel(gapValue, target, percentTarget) ?? 0;
+        let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
+        let sizeForFrs = containerSizeWithoutGaps;
+        for (let i = 0; i < pixelSizes.length; i++) {
+            if (targetUnits[i] != 'fr')
+                sizeForFrs -= pixelSizes[i];
+        }
+        let result = [];
+        for (let i = 0; i < pixelSizes.length; i++) {
+            if (targetUnits[i] != 'fr') {
+                result.push(convertCssUnit(pixelSizes[i], target, percentTarget, targetUnits[i]));
+            }
+            else {
+                result.push(((pixelSizes[i] / sizeForFrs) * 10).toFixed(2) + 'fr');
+            }
+        }
+        return result;
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditGridColumnRowSizesExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js

@@ -0,0 +1,20 @@
+import { EditGridColumnRowSizesExtension } from './EditGridColumnRowSizesExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { gridExtensionShowOverlayOptionName } from './DisplayGridExtensionProvider.js';
+export class EditGridColumnRowSizesExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'grid' || display == 'inline-grid')
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new EditGridColumnRowSizesExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: all; }
+    .svg-grid-resizer-v:hover { fill: #ff7f5052; }
+    .svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: all; }
+    .svg-grid-resizer-h:hover { fill: #ff7f5052; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.d.ts

@@ -0,0 +1,13 @@
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class ApplyFirstMachingExtensionProvider implements IDesignerExtensionProvider {
+    private extensions;
+    private extIndex;
+    style: CSSStyleSheet[];
+    constructor(...extensions: IDesignerExtensionProvider[]);
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js

@@ -0,0 +1,28 @@
+export class ApplyFirstMachingExtensionProvider {
+    extensions;
+    extIndex;
+    style;
+    constructor(...extensions) {
+        this.extensions = extensions;
+        for (let e of extensions) {
+            if (e.style) {
+                if (!this.style)
+                    this.style = [];
+                if (Array.isArray(e.style))
+                    this.style.push(...e.style);
+                else
+                    this.style.push(e.style);
+            }
+        }
+    }
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        for (this.extIndex = 0; this.extIndex < this.extensions.length; this.extIndex++) {
+            if (this.extensions[this.extIndex].shouldExtend(extensionManager, designerCanvas, designItem))
+                return true;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return this.extensions[this.extIndex].getExtension(extensionManager, designerCanvas, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.d.ts

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
+import { AbstractExtensionBase } from '../AbstractExtensionBase.js';
+export declare abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension {
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
+    abstract refresh(event: PointerEvent): any;
+    abstract dispose(): any;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js

@@ -0,0 +1,11 @@
+import { AbstractExtensionBase } from '../AbstractExtensionBase.js';
+//todo:
+//move draw functions to overlay layer
+//implement designerpointerextension
+//create ruler
+export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
+    extendedItem;
+    constructor(extensionManager, designerCanvas) {
+        super(extensionManager, designerCanvas);
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.d.ts

@@ -0,0 +1,13 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension.js';
+export declare class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    private _lineOffset;
+    private _lineLength;
+    private _circle;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js

@@ -0,0 +1,26 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension.js';
+export class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    _lineOffset = 5;
+    _lineLength = 10;
+    _circle;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    refresh(event) {
+        let mp = this.designerCanvas.getNormalizedEventCoordinates(event);
+        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foregorund);
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerPointerExtension } from './IDesignerPointerExtension.js';
+import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js';
+export declare class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider {
+    getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js

@@ -0,0 +1,10 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { CursorLinePointerExtension } from './CursorLinePointerExtension.js';
+export class CursorLinePointerExtensionProvider {
+    getExtension(designerCanvas) {
+        return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas);
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.d.ts

@@ -0,0 +1,5 @@
+import { IDisposable } from "../../../../../interfaces/IDisposable.js";
+export interface IDesignerPointerExtension extends IDisposable {
+    refresh(event: PointerEvent): any;
+    style?: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.d.ts

@@ -0,0 +1,6 @@
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
+export interface IDesignerPointerExtensionProvider {
+    getExtension(designerView: IDesignerCanvas): IDesignerPointerExtension;
+    style?: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts

@@ -0,0 +1,43 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+import { IRect } from '../../../../../interfaces/IRect.js';
+export declare class EllipsisExtension extends AbstractExtension {
+    private _parentRect;
+    private _ellipseElement;
+    private _circlePos;
+    private _startPos;
+    private _lastPos;
+    private _originalPoint;
+    private _cx;
+    private _cy;
+    private _rx;
+    private _ry;
+    private _newRx;
+    private _newRy;
+    private _circle1;
+    private _circle2;
+    private _circle3;
+    private _circle4;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
+    private _parentCoordinates;
+    private _offsetSvg;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    pointerEvent(event: PointerEvent, circle: SVGCircleElement, e: SVGEllipseElement, index: number): void;
+    _drawPathCircle(x: number, y: number, e: SVGEllipseElement, index: number): SVGCircleElement;
+    _redrawPathCircle(x: number, y: number, oldCircle: SVGCircleElement): SVGCircleElement;
+    _getPointsFromEllipse(elementCoords: IRect): number[];
+    _getMinMaxValues(coords: any): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    _rearrangeSvgParent(newEllipseExtrema: any): void;
+    _rearrangePointsFromElement(oldParentCoords: IRect): void;
+    refresh(): void;
+    dispose(): void;
+}