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

package/dist/elements/widgets/designerView/tools/DrawPathTool.js

@@ -1,132 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-import { moveSVGPath, straightenLine } from '../../../helper/PathDataPolyfill.js';
-import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
-import { DesignItem } from '../../../item/DesignItem.js';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-export class DrawPathTool {
-    cursor = 'crosshair';
-    _pathD;
-    _path;
-    _samePoint = false;
-    _p2pMode = false;
-    _dragMode = false;
-    _pointerMoved = false;
-    _eventStarted = false;
-    _lastPoint;
-    _startPoint;
-    constructor() {
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 10;
-        switch (event.type) {
-            case EventNames.PointerDown:
-                this._eventStarted = true;
-                if (!this._p2pMode) {
-                    event.target.setPointerCapture(event.pointerId);
-                    designerCanvas.captureActiveTool(this);
-                    this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                    this._pathD = "M " + currentPoint.x + " " + currentPoint.y + " ";
-                    this._path.setAttribute("d", this._pathD);
-                    this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
-                    this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
-                    this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
-                    designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
-                    this._startPoint = currentPoint;
-                }
-                if (this._lastPoint != null && this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {
-                    this._samePoint = true;
-                }
-                if (this._lastPoint == null) {
-                    this._lastPoint = currentPoint;
-                }
-                if (this._startPoint == null) {
-                    this._startPoint = currentPoint;
-                }
-                break;
-            case EventNames.PointerMove:
-                if (this._eventStarted) {
-                    this._pointerMoved = true;
-                }
-                if (!this._p2pMode) {
-                    this._dragMode = true;
-                    if (this._path) {
-                        this._pathD += "L " + currentPoint.x + " " + currentPoint.y + " ";
-                        this._path.setAttribute("d", this._pathD);
-                    }
-                }
-                else { // shows line preview
-                    if (this._path) {
-                        let straightLine = currentPoint;
-                        if (event.shiftKey) {
-                            straightLine = straightenLine(this._lastPoint, currentPoint);
-                        }
-                        this._path.setAttribute("d", this._pathD + "L " + straightLine.x + " " + straightLine.y) + " ";
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                if (this._eventStarted && !this._pointerMoved) {
-                    this._p2pMode = true;
-                }
-                if (this._p2pMode && !this._samePoint && this._startPoint.x != currentPoint.x && this._startPoint.y != currentPoint.y) {
-                    if (this._path) {
-                        if (event.shiftKey) {
-                            let straightLine = straightenLine(this._lastPoint, currentPoint);
-                            this._pathD += "L " + straightLine.x + " " + straightLine.y + " ";
-                            this._path.setAttribute("d", this._pathD);
-                            this._lastPoint = straightLine;
-                        }
-                        else {
-                            this._pathD += "L " + currentPoint.x + " " + currentPoint.y + " ";
-                            this._path.setAttribute("d", this._pathD);
-                            this._lastPoint = currentPoint;
-                        }
-                    }
-                }
-                if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
-                    event.target.releasePointerCapture(event.pointerId);
-                    designerCanvas.releaseActiveTool();
-                    this._eventStarted = false;
-                    this._p2pMode = false;
-                    this._pointerMoved = false;
-                    this._samePoint = false;
-                    this._dragMode = false;
-                    let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
-                    designerCanvas.overlayLayer.removeOverlay(this._path);
-                    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    const mvX = coords.x - offset;
-                    const mvY = coords.y - offset;
-                    const d = moveSVGPath(this._path, mvX, mvY);
-                    this._path.setAttribute("d", d);
-                    this._path.removeAttribute("stroke");
-                    this._path.removeAttribute("stroke-width");
-                    svg.appendChild(this._path);
-                    svg.style.left = (mvX) + 'px';
-                    svg.style.top = (mvY) + 'px';
-                    svg.style.position = 'absolute';
-                    svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
-                    svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
-                    svg.style.overflow = 'visible';
-                    svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
-                    svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
-                    //designerView.rootDesignItem.element.appendChild(svg);
-                    this._path = null;
-                    this._pathD = null;
-                    this._lastPoint = null;
-                    const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                    designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                }
-                //TODO: Better Path drawing (like in SVGEDIT & Adding via Undo Framework. And adding to correct container)
-                break;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-}

package/dist/elements/widgets/designerView/tools/DrawRectTool.d.ts

@@ -1,19 +0,0 @@
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { ITool } from './ITool.js';
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-export declare class DrawRectTool implements ITool {
-    readonly cursor = "crosshair";
-    private _path;
-    private _startPoint;
-    private _minX;
-    private _minY;
-    private _maxX;
-    private _maxY;
-    private _px;
-    private _py;
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-}

package/dist/elements/widgets/designerView/tools/DrawRectTool.js

@@ -1,113 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-import { calculateNormLegth } from '../../../helper/PathDataPolyfill.js';
-import { DesignItem } from '../../../item/DesignItem.js';
-import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
-export class DrawRectTool {
-    cursor = 'crosshair';
-    _path;
-    _startPoint;
-    _minX;
-    _minY;
-    _maxX;
-    _maxY;
-    _px;
-    _py;
-    constructor() {
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 10;
-        switch (event.type) {
-            case EventNames.PointerDown:
-                this._startPoint = currentPoint;
-                event.target.setPointerCapture(event.pointerId);
-                designerCanvas.captureActiveTool(this);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
-                this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
-                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
-                this._path.setAttribute("x", currentPoint.x.toString());
-                this._path.setAttribute("y", currentPoint.y.toString());
-                this._path.setAttribute("width", "0");
-                this._path.setAttribute("height", "0");
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._path) {
-                    this._minX = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
-                    this._maxX = currentPoint.x > this._startPoint.x ? currentPoint.x : this._startPoint.x;
-                    this._minY = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                    this._maxY = currentPoint.y > this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                    if (event.ctrlKey) {
-                        if (event.shiftKey) {
-                            const normLength = 2 * calculateNormLegth(this._startPoint, currentPoint);
-                            this._px = this._startPoint.x - normLength / 2;
-                            this._py = this._startPoint.y - normLength / 2;
-                            this._path.setAttribute("width", (normLength).toString());
-                            this._path.setAttribute("height", (normLength).toString());
-                        }
-                        else {
-                            const w = 2 * (this._maxX - this._minX);
-                            const h = 2 * (this._maxY - this._minY);
-                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x - w / 2;
-                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y - h / 2;
-                            this._path.setAttribute("width", (w).toString());
-                            this._path.setAttribute("height", (h).toString());
-                        }
-                        this._path.setAttribute("x", this._px.toString());
-                        this._path.setAttribute("y", this._py.toString());
-                    }
-                    else {
-                        if (event.shiftKey) {
-                            const normLength = calculateNormLegth(this._startPoint, currentPoint);
-                            this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x;
-                            this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y;
-                            this._path.setAttribute("width", (normLength).toString());
-                            this._path.setAttribute("height", (normLength).toString());
-                        }
-                        else {
-                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
-                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                            this._path.setAttribute("width", (this._maxX - this._minX).toString());
-                            this._path.setAttribute("height", (this._maxY - this._minY).toString());
-                        }
-                        this._path.setAttribute("x", this._px.toString());
-                        this._path.setAttribute("y", this._py.toString());
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
-                designerCanvas.overlayLayer.removeOverlay(this._path);
-                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                const mvX = coords.x - offset;
-                const mvY = coords.y - offset;
-                this._path.setAttribute("x", (this._px - mvX).toString());
-                this._path.setAttribute("y", (this._py - mvY).toString());
-                this._path.removeAttribute("stroke");
-                this._path.removeAttribute("stroke-width");
-                svg.appendChild(this._path);
-                svg.style.left = (mvX) + 'px';
-                svg.style.top = (mvY) + 'px';
-                svg.style.position = 'absolute';
-                svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
-                svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
-                svg.style.overflow = 'visible';
-                svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
-                svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
-                this._path = null;
-                const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-}

package/dist/elements/widgets/designerView/tools/ITool.d.ts

@@ -1,9 +0,0 @@
-import { IDisposable } from '../../../../interfaces/IDisposable.js';
-import { ServiceContainer } from "../../../services/ServiceContainer.js";
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-export interface ITool extends IDisposable {
-    readonly cursor: string;
-    activated(serviceContainer: ServiceContainer): any;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): any;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): any;
-}

package/dist/elements/widgets/designerView/tools/ITool.js

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

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.d.ts

@@ -1,12 +0,0 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { ITool } from './ITool.js';
-export declare class MagicWandSelectorTool implements ITool {
-    cursor: string;
-    private _pathD;
-    private _path;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js

@@ -1,68 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-import { DesignItem } from '../../../item/DesignItem.js';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-export class MagicWandSelectorTool {
-    cursor = 'progress';
-    _pathD;
-    _path;
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                designerCanvas.captureActiveTool(this);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                this._path.setAttribute('class', 'svg-selector');
-                this._path.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
-                this._path.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
-                this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
-                this._path.setAttribute("D", this._pathD);
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._path) {
-                    this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
-                    this._path.setAttribute("d", this._pathD + "Z");
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
-                const inSelectionElements = [];
-                let point = designerCanvas.overlayLayer.createPoint();
-                for (let e of elements) {
-                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
-                    point.x = elementRect.x;
-                    point.y = elementRect.y;
-                    const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.x + elementRect.width;
-                    point.y = elementRect.y;
-                    const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.x;
-                    point.y = elementRect.y + elementRect.height;
-                    const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.x + elementRect.width;
-                    point.y = elementRect.y + elementRect.height;
-                    const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    if (p1 && p2 && p3 && p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
-                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                        inSelectionElements.push(desItem);
-                    }
-                }
-                designerCanvas.overlayLayer.removeOverlay(this._path);
-                this._path = null;
-                this._pathD = null;
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/tools/NamedTools.d.ts

@@ -1,15 +0,0 @@
-export declare enum NamedTools {
-    Pointer = "Pointer",
-    DrawSelection = "DrawSelection",
-    DrawPath = "DrawPath",
-    DrawRect = "DrawRect",
-    DrawEllipsis = "DrawEllipsis",
-    DrawLine = "DrawLine",
-    Zoom = "Zoom",
-    Pan = "Pan",
-    MagicWandSelector = "MagicWandSelector",
-    RectangleSelector = "RectangleSelector",
-    PickColor = "PickColor",
-    Text = "Text",
-    TextBoc = "TextBoc"
-}

package/dist/elements/widgets/designerView/tools/NamedTools.js

@@ -1,16 +0,0 @@
-export var NamedTools;
-(function (NamedTools) {
-    NamedTools["Pointer"] = "Pointer";
-    NamedTools["DrawSelection"] = "DrawSelection";
-    NamedTools["DrawPath"] = "DrawPath";
-    NamedTools["DrawRect"] = "DrawRect";
-    NamedTools["DrawEllipsis"] = "DrawEllipsis";
-    NamedTools["DrawLine"] = "DrawLine";
-    NamedTools["Zoom"] = "Zoom";
-    NamedTools["Pan"] = "Pan";
-    NamedTools["MagicWandSelector"] = "MagicWandSelector";
-    NamedTools["RectangleSelector"] = "RectangleSelector";
-    NamedTools["PickColor"] = "PickColor";
-    NamedTools["Text"] = "Text";
-    NamedTools["TextBoc"] = "TextBoc";
-})(NamedTools || (NamedTools = {}));

package/dist/elements/widgets/designerView/tools/PanTool.d.ts

@@ -1,10 +0,0 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { ITool } from './ITool.js';
-export declare class PanTool implements ITool {
-    readonly cursor: string;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/tools/PanTool.js

@@ -1,26 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-export class PanTool {
-    cursor = 'grab';
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                designerCanvas.captureActiveTool(this);
-                break;
-            case EventNames.PointerMove:
-                if (event.buttons == 1) {
-                    designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/tools/PickColorTool.d.ts

@@ -1,10 +0,0 @@
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { ITool } from './ITool.js';
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-export declare class PickColorTool implements ITool {
-    readonly cursor = "crosshair";
-    activated(serviceContainer: ServiceContainer): Promise<void>;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/tools/PickColorTool.js

@@ -1,20 +0,0 @@
-export class PickColorTool {
-    cursor = 'crosshair';
-    async activated(serviceContainer) {
-        try {
-            //@ts-ignore
-            const eyeDropper = new EyeDropper();
-            const colorSelectionResult = await eyeDropper.open();
-            const color = colorSelectionResult.sRGBHex;
-            serviceContainer.globalContext.strokeColor = color;
-        }
-        finally {
-            serviceContainer.globalContext.finishedWithTool(this);
-        }
-    }
-    async pointerEventHandler(designerCanvas, event, currentElement) {
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/tools/PointerTool.d.ts

@@ -1,36 +0,0 @@
-import { IPoint } from '../../../../interfaces/IPoint.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IPlacementService } from '../../../services/placementService/IPlacementService.js';
-import { IDesignerCanvas } from '../IDesignerCanvas.js';
-import { ITool } from './ITool.js';
-import { ServiceContainer } from "../../../services/ServiceContainer.js";
-export declare class PointerTool implements ITool {
-    cursor: string;
-    private _movedSinceStartedAction;
-    private _initialPoint;
-    private _actionType?;
-    private _actionStartedDesignItem?;
-    private _actionStartedDesignItems?;
-    private _clonedItems?;
-    private _copiedItemsInserted;
-    private _previousEventName;
-    private _dragOverExtensionItem;
-    private _dragExtensionItem;
-    private _moveItemsOffset;
-    private _initialOffset;
-    private _started;
-    private _firstTimeInMove;
-    private _secondTimeInMove;
-    private _changeGroup;
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    private _showContextMenu;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    private _resetTool;
-    private _pointerActionTypeDrawSelection;
-    private _pointerActionTypeDragOrSelect;
-    private checkSelectElement;
-    static FindPossibleContainer(designItem: IDesignItem, designItems: IDesignItem[], event: IPoint): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService];
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-}