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

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

@@ -1,82 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-export class ZoomTool {
-    cursor = 'zoom-in';
-    _rect;
-    _startPoint;
-    _endPoint;
-    _pointerMovementTolerance = 5;
-    _zoomStepSize = 0.2; //number x 100 = Scale in percent
-    activated(serviceContainer) {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const eventPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                this._startPoint = eventPoint;
-                if (!this._rect)
-                    this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                this._rect.setAttribute('class', 'svg-selector');
-                this._rect.setAttribute('x', (this._startPoint.x * designerCanvas.zoomFactor));
-                this._rect.setAttribute('y', (this._startPoint.y * designerCanvas.zoomFactor));
-                this._rect.setAttribute('width', 0);
-                this._rect.setAttribute('height', 0);
-                this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
-                this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
-                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._startPoint) {
-                    let width = eventPoint.x - this._startPoint.x;
-                    let height = eventPoint.y - this._startPoint.y;
-                    if (width >= 0) {
-                        this._rect.setAttribute('x', this._startPoint.x);
-                        this._rect.setAttribute('width', width);
-                    }
-                    else {
-                        this._rect.setAttribute('x', eventPoint.x);
-                        this._rect.setAttribute('width', (-1 * width));
-                    }
-                    if (height >= 0) {
-                        this._rect.setAttribute('y', this._startPoint.y);
-                        this._rect.setAttribute('height', height);
-                    }
-                    else {
-                        this._rect.setAttribute('y', eventPoint.y);
-                        this._rect.setAttribute('height', (-1 * height));
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                this._endPoint = eventPoint;
-                let isLeftClick = event.button == 0;
-                switch (event.button) {
-                    case 0: //Left-Click
-                    case 2: //Right-Click
-                        this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas);
-                        break;
-                }
-                designerCanvas.overlayLayer.removeOverlay(this._rect);
-                this._rect = null;
-                this._startPoint = null;
-                break;
-        }
-    }
-    _zoomOnto(isZoomInto, startPoint, endPoint, designerCanvas) {
-        if (this._isPositionEqual(startPoint, endPoint)) {
-            const oldZoom = designerCanvas.zoomFactor;
-            const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize;
-            designerCanvas.zoomTowardsPoint(endPoint, newZoom);
-        }
-        else {
-            designerCanvas.zoomOntoRectangle(startPoint, endPoint);
-        }
-    }
-    _isPositionEqual(startPoint, endPoint) {
-        let tolerance = this._pointerMovementTolerance;
-        return Math.abs(startPoint.x - endPoint.x) <= tolerance && Math.abs(startPoint.y - endPoint.y) <= tolerance;
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.d.ts

@@ -1,19 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-import { ServiceContainer } from "../../../../services/ServiceContainer.js";
-import { DesignerView } from "../../designerView.js";
-import { DesignerToolbarButton } from './DesignerToolbarButton.js';
-export declare class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _toolButtonsElem;
-    private _serviceContainer;
-    private _popupContainer;
-    designerView: DesignerView;
-    constructor();
-    initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
-    showPopup(designerToolbarButton: DesignerToolbarButton): void;
-    setTool(tool: string): void;
-    setStrokeColor(color: string): void;
-    setFillBrush(color: string): void;
-    setStrokeThickness(input: string): void;
-}

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.js

@@ -1,86 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-import { CommandType } from "../../../../../commandHandling/CommandType.js";
-//import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup.js";
-//import { ToolPopupCategoryCollection } from "../designerToolbarGenerics/designerToolsButtons.js";
-//import "../designerToolbarGenerics/designerToolsButtons.js";
-//import "./popups/DrawToolPopup.js";
-//import "./popups/SelectorToolsPopup.js";
-import { DesignerToolbarButton } from './DesignerToolbarButton.js';
-export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-        node-projects-designer-tools-buttons {
-            height: 100%;
-            width: 100%;
-        }        
-
-        #popup {
-            position: absolute;
-            top: calc(0px + 10px);
-            height: 100%;
-            left: calc(24px + 4px + 10px);
-        }`;
-    static template = html `
-        <div id="popup"></div>
-        <div id="toolButtons"></div>`;
-    _toolButtonsElem;
-    _serviceContainer;
-    _popupContainer;
-    designerView;
-    constructor() {
-        super();
-        this._toolButtonsElem = this._getDomElement("toolButtons");
-        this._popupContainer = this._getDomElement("popup");
-    }
-    initialize(serviceContainer, designerView) {
-        this._serviceContainer = serviceContainer;
-        this.designerView = designerView;
-        for (let tb of this._serviceContainer.designViewToolbarButtons) {
-            this._toolButtonsElem.appendChild(tb.provideButton(designerView.designerCanvas));
-        }
-        this._serviceContainer.globalContext.onToolChanged.on((e) => {
-            for (const el of this._toolButtonsElem.children) {
-                if (el instanceof DesignerToolbarButton) {
-                    el.setActiveTool(e.newValue.name);
-                }
-            }
-        });
-    }
-    showPopup(designerToolbarButton) {
-        if (this._popupContainer.children.length) {
-            this._popupContainer.innerHTML = '';
-        }
-        else {
-            let instance;
-            if (typeof designerToolbarButton.popup === 'string')
-                instance = document.createElement(designerToolbarButton.popup);
-            else
-                instance = new designerToolbarButton.popup();
-            this._popupContainer.appendChild(instance);
-        }
-    }
-    setTool(tool) {
-        if (this._popupContainer.children.length) {
-            this._popupContainer.innerHTML = '';
-        }
-        this.designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool });
-    }
-    setStrokeColor(color) {
-        if (this._popupContainer.children.length) {
-            this._popupContainer.innerHTML = '';
-        }
-        this.designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeColor, parameter: color });
-    }
-    setFillBrush(color) {
-        if (this._popupContainer.children.length) {
-            this._popupContainer.innerHTML = '';
-        }
-        this.designerView.designerCanvas.executeCommand({ type: CommandType.setFillBrush, parameter: color });
-    }
-    setStrokeThickness(input) {
-        if (this._popupContainer.children.length) {
-            this._popupContainer.innerHTML = '';
-        }
-        this.designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
-    }
-}
-customElements.define('node-projects-designer-toolbar', DesignerToolbar);

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.d.ts

@@ -1,19 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { NamedTools } from '../NamedTools.js';
-export declare class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
-    static template: HTMLTemplateElement;
-    tools: Record<string | NamedTools, {
-        icon: string;
-    }>;
-    popup: string | (new (...args: any[]) => HTMLElement);
-    currentToolOnButton: string;
-    private _img;
-    private _div;
-    constructor(designerCanvas: IDesignerCanvas, tools: Record<string | NamedTools, {
-        icon: string;
-    }>);
-    showTool(name: string): void;
-    setActiveTool(name: string): void;
-}

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.js

@@ -1,62 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
-export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    div {
-      width: 24px;
-      height: 24px;
-      display: flex;
-      justify-content: center; 
-      align-items: center;
-      background-color: inherit;
-    }
-
-    div:hover {
-      background-color: darkgray;
-    }
-
-    img {
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-    }    
-    `;
-    static template = html `<div id="div"><img id="img"></div>`;
-    tools;
-    popup;
-    currentToolOnButton;
-    _img;
-    _div;
-    constructor(designerCanvas, tools) {
-        super();
-        this.tools = tools;
-        this._img = this._getDomElement('img');
-        this._div = this._getDomElement('div');
-        this._div.onclick = () => {
-            if (this.popup) {
-                this.getRootNode().host.showPopup(this);
-            }
-            else {
-                this.getRootNode().host.setTool(this.currentToolOnButton);
-            }
-        };
-        this.showTool(Object.getOwnPropertyNames(tools)[0]);
-    }
-    showTool(name) {
-        const tool = this.tools[name];
-        if (tool) {
-            this._img.title = name;
-            this._img.src = tool.icon;
-            this.currentToolOnButton = name;
-        }
-    }
-    setActiveTool(name) {
-        this.showTool(name);
-        const tool = this.tools[name];
-        if (tool) {
-            this._div.style.backgroundColor = 'lightgreen';
-        }
-        else {
-            this._div.style.backgroundColor = '';
-        }
-    }
-}
-customElements.define('node-projects-designer-toolbar-button', DesignerToolbarButton);

package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.d.ts

@@ -1,4 +0,0 @@
-import { IDesignerCanvas } from "../../IDesignerCanvas.js";
-export interface IDesignViewToolbarButtonProvider {
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js

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

package/dist/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.d.ts

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
-import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
-export declare class DrawToolButtonProvider implements IDesignViewToolbarButtonProvider {
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js

@@ -1,16 +0,0 @@
-import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
-import { assetsPath } from "../../../../../../Constants.js";
-import { DrawToolPopup } from "../popups/DrawToolPopup.js";
-export class DrawToolButtonProvider {
-    provideButton(designerCanvas) {
-        const button = new DesignerToolbarButton(designerCanvas, {
-            'DrawLine': { icon: assetsPath + 'images/layout/DrawLineTool.svg' },
-            'DrawPath': { icon: assetsPath + 'images/layout/DrawPathTool.svg' },
-            'DrawRect': { icon: assetsPath + 'images/layout/DrawRectTool.svg' },
-            'DrawEllipsis': { icon: assetsPath + 'images/layout/DrawEllipTool.svg' },
-            'PickColor': { icon: assetsPath + 'images/layout/ColorPickerTool.svg' }
-        });
-        button.popup = DrawToolPopup;
-        return button;
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.d.ts

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
-import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
-export declare class PointerToolButtonProvider implements IDesignViewToolbarButtonProvider {
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js

@@ -1,7 +0,0 @@
-import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
-import { assetsPath } from "../../../../../../Constants.js";
-export class PointerToolButtonProvider {
-    provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/layout/PointerTool.svg' } });
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.d.ts

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
-import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
-export declare class SelectorToolButtonProvider implements IDesignViewToolbarButtonProvider {
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js

@@ -1,10 +0,0 @@
-import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
-import { assetsPath } from "../../../../../../Constants.js";
-export class SelectorToolButtonProvider {
-    provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, {
-            'RectangleSelector': { icon: assetsPath + 'images/layout/SelectRectTool.svg' },
-            'MagicWandSelector': { icon: assetsPath + 'images/layout/MagicWandTool.svg' }
-        });
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.d.ts

@@ -1,7 +0,0 @@
-import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
-import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
-export declare class SeperatorToolProvider implements IDesignViewToolbarButtonProvider {
-    constructor(distance: number);
-    distance: number;
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js

@@ -1,11 +0,0 @@
-export class SeperatorToolProvider {
-    constructor(distance) {
-        this.distance = distance;
-    }
-    distance;
-    provideButton(designerCanvas) {
-        const div = document.createElement('div');
-        div.style.marginTop = this.distance + 'px';
-        return div;
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.d.ts

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
-import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
-export declare class TextToolButtonProvider implements IDesignViewToolbarButtonProvider {
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js

@@ -1,7 +0,0 @@
-import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
-import { assetsPath } from "../../../../../../Constants.js";
-export class TextToolButtonProvider {
-    provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/layout/TextTool.svg' } });
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.d.ts

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
-import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
-export declare class TransformToolButtonProvider implements IDesignViewToolbarButtonProvider {
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js

@@ -1,10 +0,0 @@
-import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
-import { assetsPath } from "../../../../../../Constants.js";
-import { TransformToolPopup } from "../popups/TransformToolPopup.js";
-export class TransformToolButtonProvider {
-    provideButton(designerCanvas) {
-        const button = new DesignerToolbarButton(designerCanvas, { 'TransformTool': { icon: assetsPath + 'images/layout/TransformTool.svg' } });
-        button.popup = TransformToolPopup;
-        return button;
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.d.ts

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
-import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
-export declare class ZoomToolButtonProvider implements IDesignViewToolbarButtonProvider {
-    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
-}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js

@@ -1,7 +0,0 @@
-import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
-import { assetsPath } from "../../../../../../Constants.js";
-export class ZoomToolButtonProvider {
-    provideButton(designerCanvas) {
-        return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/layout/ZoomTool.svg' } });
-    }
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.d.ts

@@ -1,6 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style: CSSStyleSheet;
-    static template: HTMLTemplateElement;
-    constructor();
-}

package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js

@@ -1,102 +0,0 @@
-import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
-import { assetsPath } from "../../../../../../Constants.js";
-export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-      .container {
-          width: 220px;
-          min-height: 200px;
-          color: white;
-          background-color: rgb(64, 64, 64);
-          border: 1px solid black;
-      }
-      header {
-          text-align: center;
-      }
-      .tool {
-          height: 32px;
-          width: 32px;
-          background-color: rgb(255, 255, 255);
-          background-size: 65%;
-          background-repeat: no-repeat;
-          background-position: center center;
-          flex-shrink: 0;
-          border-bottom: 1px solid black;
-      }
-      .tools {
-          display: flex;
-          flex-wrap: wrap;
-          margin-bottom: 5px;
-      }
-      .inputs{
-        float: left;
-        margin-top: 5px;
-        align-items: center;
-      }
-      .input {
-        display: flex;
-        align-items: center; 
-        margin-top: 5px;
-      }
-      .text {
-        margin-left: 5px;
-        font-size: 14px;
-      }
-      .strokecolor{ 
-        float: both;
-      }
-      .fillbrush{
-        float: both;
-      }
-      .strokethickness{
-        float: both;
-      }
-      
-      `;
-    static template = html `
-        <div class="container">
-          <header><h2 id="title" style="margin: 0;">Draw</h2></header>
-          <main id="content-area">
-            <div class="tools">
-              <div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
-              <div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
-            </div>
-            <div class="inputs">
-              <div class="input">
-                <input id="strokecolor" class="strokecolor" type="color" title="stroke color" value="#000000" style="padding: 0; width:31px; height:31px;">
-                <text class="text">Stroke Color</text>
-              </div>
-              <div class="input">
-                <input id="fillbrush" class="fillbrush" type="color" title="fill brush" value="#ffffff" style="padding: 0; width:31px; height:31px;">
-                <text class="text">Fill Brush</text>
-              </div>
-              <div class="input">
-                <input id="strokethickness" class="strokethickness" type="range" title="stroke thickness" min="1" max="20" value="3" style="padding: 0; width:80px; height:20px; margin-right: 5px;">
-                <text class="text">Stroke Thickness</text>
-              </div>
-            </div>
-          </main>
-        </div>`;
-    constructor() {
-        super();
-        for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
-            let div = e;
-            div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
-        }
-        if (this.shadowRoot.querySelector("input.strokecolor")) {
-            let input = this._getDomElement("strokecolor");
-            input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);
-        }
-        if (this.shadowRoot.querySelector("input.fillbrush")) {
-            let input = this._getDomElement("fillbrush");
-            input.onchange = () => this.getRootNode().host.setFillBrush(input.value);
-        }
-        if (this.shadowRoot.querySelector("input.strokethickness")) {
-            let input = this._getDomElement("strokethickness");
-            input.onchange = () => this.getRootNode().host.setStrokeThickness(input.value);
-        }
-    }
-}
-customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.d.ts

@@ -1,31 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare class TransformToolPopup extends BaseCustomWebComponentConstructorAppend {
-    private _designerView;
-    private _previousSelectionRect;
-    private _selectionChanged;
-    private _relativeButton;
-    private _absoluteButton;
-    private _applyButton;
-    private _inputX;
-    private _inputY;
-    private _inputR;
-    private _originTopLeft;
-    private _originTopMid;
-    private _originTopRight;
-    private _originMidLeft;
-    private _originMidMid;
-    private _originMidRight;
-    private _originBotLeft;
-    private _originBotMid;
-    private _originBotRight;
-    private _transformMode;
-    private _transformOrigin;
-    static style: CSSStyleSheet;
-    static template: HTMLTemplateElement;
-    constructor();
-    private _changePositionMode;
-    private _applyTransform;
-    private _calculateTransformOriginPosition;
-    private _checkOrigin;
-    private _calculateTransform;
-}