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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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