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

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

@@ -1,9 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export interface IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    style?: CSSStyleSheet | CSSStyleSheet[];
-}

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

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

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

@@ -1,14 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { ExtensionType } from './ExtensionType.js';
-import { IDesignerExtension } from './IDesignerExtension.js';
-export interface IExtensionManager {
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): any;
-    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): any;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): any;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event): any;
-    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): any;
-    refreshAllAppliedExtentions(): any;
-    reapplyAllAppliedExtentions(): any;
-}

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

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

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

@@ -1,11 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class InvisibleElementExtension extends AbstractExtension {
-    private _rect;
-    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}

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

@@ -1,19 +0,0 @@
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { OverlayLayer } from "./OverlayLayer.js";
-export class InvisibleElementExtension extends AbstractExtension {
-    _rect;
-    constructor(extensionManager, designerCanvas, extendedItem) {
-        super(extensionManager, designerCanvas, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
-        this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-invisible-div', this._rect, OverlayLayer.Background);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

@@ -1,13 +0,0 @@
-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 invisibleElementExtensionShowOverlayOptionName = "invisibleElementExtensionShowOverlay";
-export declare class InvisibleElementExtensionProvider implements IDesignerExtensionProvider {
-    elementFilter: (designItem: IDesignItem) => boolean;
-    constructor(elementFilter?: (designItem: IDesignItem) => boolean);
-    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/InvisibleElementExtensionProvider.js

@@ -1,24 +0,0 @@
-import { InvisibleElementExtension as InvisibleElementExtension } from './InvisibleElementExtension.js';
-import { css } from "@node-projects/base-custom-webcomponent";
-export const invisibleElementExtensionShowOverlayOptionName = 'invisibleElementExtensionShowOverlay';
-export class InvisibleElementExtensionProvider {
-    elementFilter;
-    constructor(elementFilter = (d) => d.name == 'div' && window.getComputedStyle(d.element).display != 'inline') {
-        this.elementFilter = elementFilter;
-    }
-    shouldExtend(extensionManager, designerCanvas, designItem) {
-        if (designerCanvas.instanceServiceContainer.designContext.extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false) {
-            if (this.elementFilter(designItem)) {
-                const st = window.getComputedStyle(designItem.element);
-                return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none';
-            }
-        }
-        return false;
-    }
-    getExtension(extensionManager, designerCanvas, designItem) {
-        return new InvisibleElementExtension(extensionManager, designerCanvas, designItem);
-    }
-    style = css `
-    .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;
-  `;
-}

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

@@ -1,15 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class MultipleSelectionRectExtension extends AbstractExtension {
-    private _line1;
-    private _line2;
-    private _line3;
-    private _line4;
-    private _designerView;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}

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

@@ -1,34 +0,0 @@
-import { calculateOuterRect } from '../../../helper/ElementHelper.js';
-import { filterChildPlaceItems } from '../../../helper/LayoutHelper.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { OverlayLayer } from './OverlayLayer.js';
-export class MultipleSelectionRectExtension extends AbstractExtension {
-    _line1;
-    _line2;
-    _line3;
-    _line4;
-    _designerView;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-        this._designerView = designerView;
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements;
-        selection = filterChildPlaceItems(selection);
-        let rect = calculateOuterRect(selection, this._designerView);
-        this._line1 = this._drawLine(rect.x, rect.y, rect.x + rect.width, rect.y, 'svg-multiple-rect-selection', this._line1, OverlayLayer.Background);
-        this._line2 = this._drawLine(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + rect.height, 'svg-multiple-rect-selection', this._line2, OverlayLayer.Background);
-        this._line3 = this._drawLine(rect.x + rect.width, rect.y + rect.height, rect.x, rect.y + rect.height, 'svg-multiple-rect-selection', this._line3, OverlayLayer.Background);
-        this._line4 = this._drawLine(rect.x, rect.y + rect.height, rect.x, rect.y, 'svg-multiple-rect-selection', this._line4, OverlayLayer.Background);
-        this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

@@ -1,10 +0,0 @@
-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 MultipleSelectionRectExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}

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

@@ -1,13 +0,0 @@
-import { css } from "@node-projects/base-custom-webcomponent";
-import { MultipleSelectionRectExtension as MultipleSelectionRectExtension } from './MultipleSelectionRectExtension.js';
-export class MultipleSelectionRectExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new MultipleSelectionRectExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
-  `;
-}

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

@@ -1,5 +0,0 @@
-export declare enum OverlayLayer {
-    Background = 10,
-    Normal = 20,
-    Foregorund = 30
-}

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

@@ -1,6 +0,0 @@
-export var OverlayLayer;
-(function (OverlayLayer) {
-    OverlayLayer[OverlayLayer["Background"] = 10] = "Background";
-    OverlayLayer[OverlayLayer["Normal"] = 20] = "Normal";
-    OverlayLayer[OverlayLayer["Foregorund"] = 30] = "Foregorund";
-})(OverlayLayer || (OverlayLayer = {}));

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

@@ -1,11 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class PlacementExtension extends AbstractExtension {
-    private _rect;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}

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

@@ -1,22 +0,0 @@
-import { AbstractExtension } from './AbstractExtension.js';
-export class PlacementExtension extends AbstractExtension {
-    _rect;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
-        const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
-        const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
-        const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-hover', this._rect);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

@@ -1,10 +0,0 @@
-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 PlacementExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}

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

@@ -1,13 +0,0 @@
-import { css } from "@node-projects/base-custom-webcomponent";
-import { PlacementExtension } from './PlacementExtension.js';
-export class PlacementExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new PlacementExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-hover { stroke: #90caf9; fill: none; }
-  `;
-}

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

@@ -1,16 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class PositionExtension extends AbstractExtension {
-    private _line1;
-    private _line2;
-    private _line3;
-    private _line4;
-    private _textX;
-    private _textY;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}

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

@@ -1,42 +0,0 @@
-import { AbstractExtension } from './AbstractExtension.js';
-export class PositionExtension extends AbstractExtension {
-    _line1;
-    _line2;
-    _line3;
-    _line4;
-    _textX;
-    _textY;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element.parentElement);
-        this._line1 = this._drawLine(itemParentRect.x, itemRect.y + itemRect.height / 2, itemRect.x, itemRect.y + itemRect.height / 2, 'svg-position', this._line1);
-        this._line2 = this._drawLine(itemParentRect.x + itemParentRect.width, itemRect.y + itemRect.height / 2, itemRect.x + itemRect.width, itemRect.y + itemRect.height / 2, 'svg-position', this._line2);
-        this._line3 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y, itemRect.x + itemRect.width / 2, itemRect.y, 'svg-position', this._line3);
-        this._line4 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y + itemParentRect.height, itemRect.x + itemRect.width / 2, itemRect.y + itemRect.height, 'svg-position', this._line4);
-        this._line1.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line2.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line3.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line4.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor);
-        this._line1.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        this._line2.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        this._line3.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
-        let x = Math.round(itemRect.x - itemParentRect.x);
-        let y = Math.round(itemRect.y - itemParentRect.y);
-        this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX);
-        this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
-        this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
-        this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + y / 2, 'white', 'svg-position-text', this._textY);
-        this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
-        this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}

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

@@ -1,10 +0,0 @@
-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 PositionExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}

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

@@ -1,16 +0,0 @@
-import { PositionExtension } from './PositionExtension.js';
-import { css } from "@node-projects/base-custom-webcomponent";
-export class PositionExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        const cs = getComputedStyle(designItem.element);
-        if (cs.position === 'relative' || cs.position === 'absolute')
-            return true;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new PositionExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-position-text { text-anchor: middle; alignment-baseline: central; }
-  `;
-}

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

@@ -1,27 +0,0 @@
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { AbstractExtension } from './AbstractExtension.js';
-import { IExtensionManager } from './IExtensionManger.js';
-export declare class ResizeExtension extends AbstractExtension {
-    private resizeAllSelected;
-    private _initialSizes;
-    private _actionModeStarted;
-    private _initialPoint;
-    private _offsetPoint;
-    private _circle1;
-    private _circle2;
-    private _circle3;
-    private _circle4;
-    private _circle5;
-    private _circle6;
-    private _circle7;
-    private _circle8;
-    private _initialComputedTransformOrigins;
-    private _initialTransformOrigins;
-    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean);
-    extend(): void;
-    refresh(): void;
-    _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
-    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
-    dispose(): void;
-}