js-draw 1.21.1 → 1.21.3

package/dist/mjs/tools/Pen.d.ts

@@ -0,0 +1,54 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../Editor';
+import Pointer from '../Pointer';
+import { StrokeDataPoint } from '../types';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
+import { MutableReactiveValue } from '../util/ReactiveValue';
+export interface PenStyle {
+    readonly color: Color4;
+    readonly thickness: number;
+    readonly factory: ComponentBuilderFactory;
+}
+export default class Pen extends BaseTool {
+    private editor;
+    protected builder: ComponentBuilder | null;
+    private lastPoint;
+    private startPoint;
+    private currentDeviceType;
+    private currentPointerId;
+    private styleValue;
+    private style;
+    private shapeAutocompletionEnabled;
+    private autocorrectedShape;
+    private lastAutocorrectedShape;
+    private removedAutocorrectedShapeTime;
+    private stationaryDetector;
+    constructor(editor: Editor, description: string, style: Partial<PenStyle>);
+    private getPressureMultiplier;
+    protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
+    protected previewStroke(): void;
+    protected addPointToStroke(point: StrokeDataPoint): void;
+    onPointerDown(event: PointerEvt): boolean;
+    private eventCanCancelStroke;
+    eventCanBeDeliveredToNonActiveTool(event: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): boolean;
+    onGestureCancel(): void;
+    private removedAutocorrectedShapeRecently;
+    private autocorrectShape;
+    private finalizeStroke;
+    private noteUpdated;
+    setColor(color: Color4): void;
+    setThickness(thickness: number): void;
+    setStrokeFactory(factory: ComponentBuilderFactory): void;
+    setHasStabilization(hasStabilization: boolean): void;
+    setStrokeAutocorrectEnabled(enabled: boolean): void;
+    getStrokeAutocorrectionEnabled(): boolean;
+    getThickness(): number;
+    getColor(): Color4;
+    getStrokeFactory(): ComponentBuilderFactory;
+    getStyleValue(): MutableReactiveValue<PenStyle>;
+    onKeyPress(event: KeyPressEvent): boolean;
+}

package/dist/mjs/tools/Pen.mjs

@@ -0,0 +1,306 @@
+import { Color4 } from '@js-draw/math';
+import  EditorImage  from '../image/EditorImage.mjs';
+import  { PointerDevice }  from '../Pointer.mjs';
+import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
+import  { EditorEventType }  from '../types.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import  { undoKeyboardShortcutId }  from './keybindings.mjs';
+import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from './keybindings.mjs';
+import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
+import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
+import  StationaryPenDetector, { defaultStationaryDetectionConfig }  from './util/StationaryPenDetector.mjs';
+export default class Pen extends BaseTool {
+    constructor(editor, description, style) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.builder = null;
+        this.lastPoint = null;
+        this.startPoint = null;
+        this.currentDeviceType = null;
+        this.currentPointerId = null;
+        this.shapeAutocompletionEnabled = false;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
+        this.removedAutocorrectedShapeTime = 0;
+        this.stationaryDetector = null;
+        this.styleValue = ReactiveValue.fromInitialValue({
+            factory: makeFreehandLineBuilder,
+            color: Color4.blue,
+            thickness: 4,
+            ...style,
+        });
+        this.styleValue.onUpdateAndNow(newValue => {
+            this.style = newValue;
+            this.noteUpdated();
+        });
+    }
+    getPressureMultiplier() {
+        const thickness = this.style.thickness;
+        return 1 / this.editor.viewport.getScaleFactor() * thickness;
+    }
+    // Converts a `pointer` to a `StrokeDataPoint`.
+    toStrokePoint(pointer) {
+        const minPressure = 0.3;
+        let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
+        if (!isFinite(pressure)) {
+            console.warn('Non-finite pressure!', pointer);
+            pressure = minPressure;
+        }
+        console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
+        console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
+        console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
+        const pos = pointer.canvasPos;
+        return {
+            pos,
+            width: pressure * this.getPressureMultiplier(),
+            color: this.style.color,
+            time: pointer.timeStamp,
+        };
+    }
+    // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
+    previewStroke() {
+        this.editor.clearWetInk();
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        if (this.autocorrectedShape) {
+            const visibleRect = this.editor.viewport.visibleRect;
+            this.autocorrectedShape.render(wetInkRenderer, visibleRect);
+        }
+        else {
+            this.builder?.preview(wetInkRenderer);
+        }
+    }
+    // Throws if no stroke builder exists.
+    addPointToStroke(point) {
+        if (!this.builder) {
+            throw new Error('No stroke is currently being generated.');
+        }
+        this.builder.addPoint(point);
+        this.lastPoint = point;
+        this.previewStroke();
+    }
+    onPointerDown(event) {
+        // Avoid canceling an existing stroke
+        if (this.builder && !this.eventCanCancelStroke(event)) {
+            return true;
+        }
+        const { current, allPointers } = event;
+        const isEraser = current.device === PointerDevice.Eraser;
+        const isPen = current.device === PointerDevice.Pen;
+        // Always start strokes if the current device is a pen. This is useful in the case
+        // where an accidental touch gesture from a user's hand is ongoing. This gesture
+        // should not prevent the user from drawing.
+        if ((allPointers.length === 1 && !isEraser) || isPen) {
+            this.startPoint = this.toStrokePoint(current);
+            this.builder = this.style.factory(this.startPoint, this.editor.viewport);
+            this.currentDeviceType = current.device;
+            this.currentPointerId = current.id;
+            if (this.shapeAutocompletionEnabled) {
+                this.stationaryDetector = new StationaryPenDetector(current, defaultStationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
+            }
+            else {
+                this.stationaryDetector = null;
+            }
+            this.lastAutocorrectedShape = null;
+            this.removedAutocorrectedShapeTime = 0;
+            return true;
+        }
+        return false;
+    }
+    eventCanCancelStroke(event) {
+        // If there has been a delay since the last input event,
+        // it's always okay to cancel
+        const lastInputTime = this.lastPoint?.time ?? 0;
+        if (event.current.timeStamp - lastInputTime > 1000) {
+            return true;
+        }
+        const isPenStroke = this.currentDeviceType === PointerDevice.Pen;
+        const isTouchEvent = event.current.device === PointerDevice.Touch;
+        // Don't allow pen strokes to be cancelled by touch events.
+        if (isPenStroke && isTouchEvent) {
+            return false;
+        }
+        return true;
+    }
+    eventCanBeDeliveredToNonActiveTool(event) {
+        return this.eventCanCancelStroke(event);
+    }
+    onPointerMove({ current }) {
+        if (!this.builder)
+            return;
+        if (current.device !== this.currentDeviceType)
+            return;
+        if (current.id !== this.currentPointerId)
+            return;
+        const isStationary = this.stationaryDetector?.onPointerMove(current);
+        if (!isStationary) {
+            this.addPointToStroke(this.toStrokePoint(current));
+            if (this.autocorrectedShape) {
+                this.removedAutocorrectedShapeTime = performance.now();
+                this.autocorrectedShape = null;
+                this.editor.announceForAccessibility(this.editor.localization.autocorrectionCanceled);
+            }
+        }
+    }
+    onPointerUp({ current }) {
+        if (!this.builder)
+            return false;
+        if (current.id !== this.currentPointerId) {
+            // this.builder still exists, so we're handling events from another
+            // device type.
+            return true;
+        }
+        this.stationaryDetector?.onPointerUp(current);
+        // onPointerUp events can have zero pressure. Use the last pressure instead.
+        const currentPoint = this.toStrokePoint(current);
+        const strokePoint = {
+            ...currentPoint,
+            width: this.lastPoint?.width ?? currentPoint.width,
+        };
+        this.addPointToStroke(strokePoint);
+        this.finalizeStroke();
+        return false;
+    }
+    onGestureCancel() {
+        this.builder = null;
+        this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
+    }
+    removedAutocorrectedShapeRecently() {
+        return this.removedAutocorrectedShapeTime > performance.now() - 320;
+    }
+    async autocorrectShape(_lastPointer) {
+        if (!this.builder || !this.builder.autocorrectShape)
+            return;
+        if (!this.shapeAutocompletionEnabled)
+            return;
+        // If already corrected, do nothing
+        if (this.autocorrectedShape)
+            return;
+        // Activate stroke fitting
+        const correctedShape = await this.builder.autocorrectShape();
+        if (!this.builder || !correctedShape) {
+            return;
+        }
+        // Don't complete to empty shapes.
+        const bboxArea = correctedShape.getBBox().area;
+        if (bboxArea === 0 || !isFinite(bboxArea)) {
+            return;
+        }
+        const shapeDescription = correctedShape.description(this.editor.localization);
+        this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(shapeDescription));
+        this.autocorrectedShape = correctedShape;
+        this.lastAutocorrectedShape = correctedShape;
+        this.previewStroke();
+    }
+    finalizeStroke() {
+        if (this.builder) {
+            // If autocorrectedShape was cleared recently enough, it was
+            // probably by mistake. Reset it.
+            if (this.lastAutocorrectedShape && this.removedAutocorrectedShapeRecently()) {
+                this.autocorrectedShape = this.lastAutocorrectedShape;
+            }
+            const stroke = this.autocorrectedShape ?? this.builder.build();
+            this.previewStroke();
+            if (stroke.getBBox().area > 0) {
+                if (stroke === this.autocorrectedShape) {
+                    this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
+                }
+                const canFlatten = true;
+                const action = EditorImage.addElement(stroke, canFlatten);
+                this.editor.dispatch(action);
+            }
+            else {
+                console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+            }
+        }
+        this.builder = null;
+        this.lastPoint = null;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
+        this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
+    }
+    noteUpdated() {
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setColor(color) {
+        if (color.toHexString() !== this.style.color.toHexString()) {
+            this.styleValue.set({
+                ...this.style,
+                color,
+            });
+        }
+    }
+    setThickness(thickness) {
+        if (thickness !== this.style.thickness) {
+            this.styleValue.set({
+                ...this.style,
+                thickness,
+            });
+        }
+    }
+    setStrokeFactory(factory) {
+        if (factory !== this.style.factory) {
+            this.styleValue.set({
+                ...this.style,
+                factory,
+            });
+        }
+    }
+    setHasStabilization(hasStabilization) {
+        const hasInputMapper = !!this.getInputMapper();
+        // TODO: Currently, this assumes that there is no other input mapper.
+        if (hasStabilization === hasInputMapper) {
+            return;
+        }
+        if (hasInputMapper) {
+            this.setInputMapper(null);
+        }
+        else {
+            this.setInputMapper(new InputStabilizer(this.editor.viewport));
+        }
+        this.noteUpdated();
+    }
+    setStrokeAutocorrectEnabled(enabled) {
+        if (enabled !== this.shapeAutocompletionEnabled) {
+            this.shapeAutocompletionEnabled = enabled;
+            this.noteUpdated();
+        }
+    }
+    getStrokeAutocorrectionEnabled() {
+        return this.shapeAutocompletionEnabled;
+    }
+    getThickness() { return this.style.thickness; }
+    getColor() { return this.style.color; }
+    getStrokeFactory() { return this.style.factory; }
+    getStyleValue() { return this.styleValue; }
+    onKeyPress(event) {
+        const shortcuts = this.editor.shortcuts;
+        // Ctrl+Z: End the stroke so that it can be undone/redone.
+        const isCtrlZ = shortcuts.matchesShortcut(undoKeyboardShortcutId, event);
+        if (this.builder && isCtrlZ) {
+            this.finalizeStroke();
+            // Return false: Allow other listeners to handle the event (e.g.
+            // undo/redo).
+            return false;
+        }
+        let newThickness;
+        if (shortcuts.matchesShortcut(decreaseSizeKeyboardShortcutId, event)) {
+            newThickness = this.getThickness() * 2 / 3;
+        }
+        else if (shortcuts.matchesShortcut(increaseSizeKeyboardShortcutId, event)) {
+            newThickness = this.getThickness() * 3 / 2;
+        }
+        if (newThickness !== undefined) {
+            newThickness = Math.min(Math.max(1, newThickness), 256);
+            this.setThickness(newThickness);
+            return true;
+        }
+        return false;
+    }
+}

package/dist/mjs/tools/Pen.test.d.ts

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

package/dist/mjs/tools/PipetteTool.d.ts

@@ -0,0 +1,28 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../Editor';
+import { PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+type ColorListener = (color: Color4 | null) => void;
+/**
+ * A tool used internally to pick colors from the canvas.
+ *
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
+ * is added to the root element. This can be used by themes.
+ *
+ * @internal
+ */
+export default class PipetteTool extends BaseTool {
+    private editor;
+    private colorPreviewListener;
+    private colorSelectListener;
+    constructor(editor: Editor, description: string);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    private updateSelectingStatus;
+    setColorListener(colorPreviewListener: ColorListener, colorSelectListener: ColorListener): void;
+    clearColorListener(): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): void;
+    onGestureCancel(): void;
+}
+export {};

package/dist/mjs/tools/PipetteTool.mjs

@@ -0,0 +1,63 @@
+// @internal @packageDocumentation
+import  BaseTool  from './BaseTool.mjs';
+/**
+ * A tool used internally to pick colors from the canvas.
+ *
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
+ * is added to the root element. This can be used by themes.
+ *
+ * @internal
+ */
+export default class PipetteTool extends BaseTool {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+        this.enabledValue().onUpdateAndNow(() => {
+            this.updateSelectingStatus();
+        });
+    }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
+    // Ensures that the root editor element correctly reflects whether color selection
+    // is in progress.
+    updateSelectingStatus() {
+        const className = 'pipette--color-selection-in-progress';
+        if (this.isEnabled() && this.colorSelectListener && this.colorPreviewListener) {
+            this.editor.getRootElement().classList.add(className);
+        }
+        else {
+            this.editor.getRootElement().classList.remove(className);
+        }
+    }
+    setColorListener(colorPreviewListener, 
+    // Called when the gesture ends -- when the user has selected a color.
+    colorSelectListener) {
+        this.colorPreviewListener = colorPreviewListener;
+        this.colorSelectListener = colorSelectListener;
+        this.updateSelectingStatus();
+    }
+    clearColorListener() {
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+        this.updateSelectingStatus();
+    }
+    onPointerDown({ current, allPointers }) {
+        if (this.colorPreviewListener && allPointers.length === 1) {
+            this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+            return true;
+        }
+        return false;
+    }
+    onPointerMove({ current }) {
+        this.colorPreviewListener?.(this.editor.display.getColorAt(current.screenPos));
+    }
+    onPointerUp({ current }) {
+        this.colorSelectListener?.(this.editor.display.getColorAt(current.screenPos));
+    }
+    onGestureCancel() {
+        this.colorSelectListener?.(null);
+    }
+}

package/dist/mjs/tools/ScrollbarTool.d.ts

@@ -0,0 +1,18 @@
+import Editor from '../Editor';
+import BaseTool from './BaseTool';
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+export default class ScrollbarTool extends BaseTool {
+    private editor;
+    private scrollbarOverlay;
+    private verticalScrollbar;
+    private horizontalScrollbar;
+    constructor(editor: Editor);
+    private fadeOutTimeout;
+    private updateScrollbars;
+}

package/dist/mjs/tools/ScrollbarTool.mjs

@@ -0,0 +1,79 @@
+import { Rect2 } from '@js-draw/math';
+import  { EditorEventType }  from '../types.mjs';
+import  BaseTool  from './BaseTool.mjs';
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+export default class ScrollbarTool extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, 'scrollbar');
+        this.editor = editor;
+        this.fadeOutTimeout = null;
+        this.scrollbarOverlay = document.createElement('div');
+        this.scrollbarOverlay.classList.add('ScrollbarTool-overlay');
+        this.verticalScrollbar = document.createElement('div');
+        this.verticalScrollbar.classList.add('vertical-scrollbar');
+        this.horizontalScrollbar = document.createElement('div');
+        this.horizontalScrollbar.classList.add('horizontal-scrollbar');
+        this.scrollbarOverlay.replaceChildren(this.verticalScrollbar, this.horizontalScrollbar);
+        let overlay = null;
+        let viewportListener = null;
+        this.enabledValue().onUpdateAndNow(enabled => {
+            overlay?.remove();
+            viewportListener?.remove();
+            viewportListener = null;
+            overlay = null;
+            if (enabled) {
+                viewportListener = editor.notifier.on(EditorEventType.ViewportChanged, _event => {
+                    this.updateScrollbars();
+                });
+                this.updateScrollbars();
+                overlay = editor.createHTMLOverlay(this.scrollbarOverlay);
+            }
+        });
+    }
+    updateScrollbars() {
+        const viewport = this.editor.viewport;
+        const screenSize = viewport.getScreenRectSize();
+        const screenRect = new Rect2(0, 0, screenSize.x, screenSize.y);
+        const imageRect = this.editor.getImportExportRect()
+            // The scrollbars are positioned in screen coordinates, so the exportRect also needs
+            // to be in screen coordinates
+            .transformedBoundingBox(viewport.canvasToScreenTransform)
+            // If the screenRect is outside of the exportRect, expand the image rectangle
+            .union(screenRect);
+        const scrollbarWidth = screenRect.width / imageRect.width * screenSize.x;
+        const scrollbarHeight = screenRect.height / imageRect.height * screenSize.y;
+        const scrollbarX = (screenRect.x - imageRect.x) / imageRect.width * (screenSize.x);
+        const scrollbarY = (screenRect.y - imageRect.y) / imageRect.height * (screenSize.y);
+        this.horizontalScrollbar.style.width = `${scrollbarWidth}px`;
+        this.verticalScrollbar.style.height = `${scrollbarHeight}px`;
+        this.horizontalScrollbar.style.marginLeft = `${scrollbarX}px`;
+        this.verticalScrollbar.style.marginTop = `${scrollbarY}px`;
+        // Style the scrollbars differently when there's no scroll (all content visible)
+        const handleNoScrollStyling = (scrollbar, size, fillSize) => {
+            const fillsWindowClass = 'represents-no-scroll';
+            if (Math.abs(size - fillSize) < 1e-8) {
+                scrollbar.classList.add(fillsWindowClass);
+            }
+            else {
+                scrollbar.classList.remove(fillsWindowClass);
+            }
+        };
+        handleNoScrollStyling(this.horizontalScrollbar, scrollbarWidth, screenSize.x);
+        handleNoScrollStyling(this.verticalScrollbar, scrollbarHeight, screenSize.y);
+        // Fade out after a delay.
+        if (this.fadeOutTimeout !== null) {
+            clearTimeout(this.fadeOutTimeout);
+        }
+        const fadeOutDelay = 3000;
+        this.fadeOutTimeout = setTimeout(() => {
+            this.scrollbarOverlay.classList.remove('just-updated');
+        }, fadeOutDelay);
+        this.scrollbarOverlay.classList.add('just-updated');
+    }
+}

package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.d.ts

@@ -0,0 +1,9 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../inputEvents';
+import BaseTool from '../BaseTool';
+export default class SelectAllShortcutHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    onKeyPress(event: KeyPressEvent): boolean;
+}

package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs

@@ -0,0 +1,26 @@
+import  BaseTool  from '../BaseTool.mjs';
+import  { selectAllKeyboardShortcut }  from '../keybindings.mjs';
+import  SelectionTool  from './SelectionTool.mjs';
+// Handles ctrl+a: Select all
+export default class SelectAllShortcutHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.selectAllTool);
+        this.editor = editor;
+    }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
+    // @internal
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(selectAllKeyboardShortcut, event)) {
+            const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+            if (selectionTools.length > 0) {
+                const selectionTool = selectionTools[0];
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/mjs/tools/SelectionTool/Selection.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @internal
+ * @packageDocumentation
+ */
+import SerializableCommand from '../../commands/SerializableCommand';
+import Editor from '../../Editor';
+import { Mat33, Rect2, Point2 } from '@js-draw/math';
+import Pointer from '../../Pointer';
+import AbstractComponent from '../../components/AbstractComponent';
+import Command from '../../commands/Command';
+export default class Selection {
+    private editor;
+    private childwidgets;
+    private originalRegion;
+    private selectionTightBoundingBox;
+    private transformers;
+    private transform;
+    private selectedElems;
+    private outerContainer;
+    private innerContainer;
+    private backgroundElem;
+    private hasParent;
+    constructor(startPoint: Point2, editor: Editor, showContextMenu: (anchor: Point2) => void);
+    getBackgroundElem(): HTMLElement;
+    getTransform(): Mat33;
+    get preTransformRegion(): Rect2;
+    get region(): Rect2;
+    /**
+     * Computes and returns the bounding box of the selection without
+     * any additional padding. Computes directly from the elements that are selected.
+     * @internal
+     */
+    computeTightBoundingBox(): Rect2;
+    get regionRotation(): number;
+    get preTransformedScreenRegion(): Rect2;
+    get preTransformedScreenRegionRotation(): number;
+    getScreenRegion(): Rect2;
+    get screenRegionRotation(): number;
+    setTransform(transform: Mat33, preview?: boolean): void;
+    private getDeltaZIndexToMoveSelectionToTop;
+    finalizeTransform(): void | Promise<void>;
+    /** Sends all selected elements to the bottom of the visible image. */
+    sendToBack(): SerializableCommand | null;
+    private static ApplyTransformationCommand;
+    private previewTransformCmds;
+    resolveToObjects(): boolean;
+    recomputeRegion(): boolean;
+    padRegion(): void;
+    getMinCanvasSize(): number;
+    getSelectedItemCount(): number;
+    updateUI(): void;
+    private removedFromImage;
+    private addRemoveSelectionFromImage;
+    private removeDeletedElemsFromSelection;
+    private activeHandle;
+    private backgroundDragging;
+    onDragStart(pointer: Pointer): boolean;
+    onDragUpdate(pointer: Pointer): void;
+    onDragEnd(): void;
+    onDragCancel(): void;
+    scrollTo(): boolean;
+    deleteSelectedObjects(): Command;
+    private selectionDuplicatedAnimationTimeout;
+    private runSelectionDuplicatedAnimation;
+    duplicateSelectedObjects(): Promise<Command>;
+    setHandlesVisible(showHandles: boolean): void;
+    addTo(elem: HTMLElement): void;
+    setToPoint(point: Point2): void;
+    cancelSelection(): void;
+    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
+    getSelectedObjects(): AbstractComponent[];
+}