js-draw 0.18.1 → 0.19.0

package/dist/mjs/src/tools/PanZoom.mjs

@@ -0,0 +1,414 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import  Mat33  from '../math/Mat33.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  Vec3  from '../math/Vec3.mjs';
+import  { PointerDevice }  from '../Pointer.mjs';
+import  { EditorEventType }  from '../types.mjs';
+import  untilNextAnimationFrame  from '../util/untilNextAnimationFrame.mjs';
+import  { Viewport }  from '../Viewport.mjs';
+import  BaseTool  from './BaseTool.mjs';
+export var PanZoomMode;
+(function (PanZoomMode) {
+    PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
+    PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
+    PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
+    PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
+})(PanZoomMode || (PanZoomMode = {}));
+class InertialScroller {
+    constructor(initialVelocity, scrollBy, onComplete) {
+        this.initialVelocity = initialVelocity;
+        this.scrollBy = scrollBy;
+        this.onComplete = onComplete;
+        this.running = false;
+        this.start();
+    }
+    start() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.running) {
+                return;
+            }
+            this.currentVelocity = this.initialVelocity;
+            let lastTime = (new Date()).getTime();
+            this.running = true;
+            const maxSpeed = 5000; // units/s
+            const minSpeed = 200; // units/s
+            if (this.currentVelocity.magnitude() > maxSpeed) {
+                this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
+            }
+            while (this.running && this.currentVelocity.magnitude() > minSpeed) {
+                const nowTime = (new Date()).getTime();
+                const dt = (nowTime - lastTime) / 1000;
+                this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
+                this.scrollBy(this.currentVelocity.times(dt));
+                yield untilNextAnimationFrame();
+                lastTime = nowTime;
+            }
+            if (this.running) {
+                this.stop();
+            }
+        });
+    }
+    getCurrentVelocity() {
+        if (!this.running) {
+            return null;
+        }
+        return this.currentVelocity;
+    }
+    stop() {
+        if (this.running) {
+            this.running = false;
+            this.onComplete();
+        }
+    }
+}
+export default class PanZoom extends BaseTool {
+    constructor(editor, mode, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.mode = mode;
+        this.transform = null;
+        this.lastPointerDownTimestamp = 0;
+        this.initialTouchAngle = 0;
+        this.initialViewportRotation = 0;
+        this.inertialScroller = null;
+        this.velocity = null;
+    }
+    // Returns information about the pointers in a gesture
+    computePinchData(p1, p2) {
+        // Swap the pointers to ensure consistent ordering.
+        if (p1.id < p2.id) {
+            const tmp = p1;
+            p1 = p2;
+            p2 = tmp;
+        }
+        const screenBetween = p2.screenPos.minus(p1.screenPos);
+        const angle = screenBetween.angle();
+        const dist = screenBetween.magnitude();
+        const canvasCenter = p2.canvasPos.plus(p1.canvasPos).times(0.5);
+        const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
+        return { canvasCenter, screenCenter, angle, dist };
+    }
+    allPointersAreOfType(pointers, kind) {
+        return pointers.every(pointer => pointer.device === kind);
+    }
+    onPointerDown({ allPointers: pointers, current: currentPointer }) {
+        var _a, _b, _c, _d;
+        let handlingGesture = false;
+        const inertialScrollerVelocity = (_b = (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.getCurrentVelocity()) !== null && _b !== void 0 ? _b : Vec2.zero;
+        (_c = this.inertialScroller) === null || _c === void 0 ? void 0 : _c.stop();
+        this.velocity = inertialScrollerVelocity;
+        this.lastPointerDownTimestamp = currentPointer.timeStamp;
+        const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
+        const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
+        if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
+            const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
+            this.lastDist = dist;
+            this.lastScreenCenter = screenCenter;
+            this.initialTouchAngle = angle;
+            this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+            handlingGesture = true;
+        }
+        else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
+            || (isRightClick && this.mode & PanZoomMode.RightClickDrags)
+            || (this.mode & PanZoomMode.SinglePointerGestures))) {
+            this.lastScreenCenter = pointers[0].screenPos;
+            handlingGesture = true;
+        }
+        if (handlingGesture) {
+            this.lastTimestamp = (new Date()).getTime();
+            (_d = this.transform) !== null && _d !== void 0 ? _d : (this.transform = Viewport.transformBy(Mat33.identity));
+            this.editor.display.setDraftMode(true);
+        }
+        return handlingGesture;
+    }
+    updateVelocity(currentCenter) {
+        const deltaPos = currentCenter.minus(this.lastScreenCenter);
+        let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+        // Ignore duplicate events, unless there has been enough time between them.
+        if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
+            return;
+        }
+        // We divide by deltaTime. Don't divide by zero.
+        if (deltaTime === 0) {
+            return;
+        }
+        // Don't divide by almost zero, either
+        deltaTime = Math.max(deltaTime, 0.01);
+        const currentVelocity = deltaPos.times(1 / deltaTime);
+        let smoothedVelocity = currentVelocity;
+        if (this.velocity) {
+            smoothedVelocity = this.velocity.lerp(currentVelocity, 0.5);
+        }
+        this.velocity = smoothedVelocity;
+    }
+    // Returns the change in position of the center of the given group of pointers.
+    // Assumes this.lastScreenCenter has been set appropriately.
+    getCenterDelta(screenCenter) {
+        // Use transformVec3 to avoid translating the delta
+        const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
+        return delta;
+    }
+    //  Snaps `angle` to common desired rotations. For example, if `touchAngle` corresponds
+    // to a viewport rotation of 90.1 degrees, this function returns a rotation delta that,
+    // when applied to the viewport, rotates the viewport to 90.0 degrees.
+    //
+    // Returns a snapped rotation delta that, when applied to the viewport, rotates the viewport,
+    // from its position on the last touchDown event, by `touchAngle - initialTouchAngle`.
+    toSnappedRotationDelta(touchAngle) {
+        const deltaAngle = touchAngle - this.initialTouchAngle;
+        let fullRotation = deltaAngle + this.initialViewportRotation;
+        const snapToMultipleOf = Math.PI / 2;
+        const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
+        // The maximum angle for which we snap the given angle to a multiple of
+        // `snapToMultipleOf`.
+        const maxSnapAngle = 0.07;
+        // Snap the rotation
+        if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
+            fullRotation = roundedFullRotation;
+            // Work around a rotation/matrix multiply bug.
+            // (See commit after 4abe27ff8e7913155828f98dee77b09c57c51d30).
+            // TODO: Fix the underlying issue and remove this.
+            if (fullRotation !== 0) {
+                fullRotation += 0.0001;
+            }
+        }
+        return fullRotation - this.editor.viewport.getRotationAngle();
+    }
+    handleTwoFingerMove(allPointers) {
+        const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+        const delta = this.getCenterDelta(screenCenter);
+        let deltaRotation;
+        if (this.isRotationLocked()) {
+            deltaRotation = 0;
+        }
+        else {
+            deltaRotation = this.toSnappedRotationDelta(angle);
+        }
+        this.updateVelocity(screenCenter);
+        const transformUpdate = Mat33.translation(delta)
+            .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
+            .rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
+        this.lastScreenCenter = screenCenter;
+        this.lastDist = dist;
+        this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
+    }
+    handleOneFingerMove(pointer) {
+        const delta = this.getCenterDelta(pointer.screenPos);
+        this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(delta)));
+        this.updateVelocity(pointer.screenPos);
+        this.lastScreenCenter = pointer.screenPos;
+    }
+    onPointerMove({ allPointers }) {
+        var _a;
+        (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = Viewport.transformBy(Mat33.identity));
+        const lastTransform = this.transform;
+        if (allPointers.length === 2) {
+            this.handleTwoFingerMove(allPointers);
+        }
+        else if (allPointers.length === 1) {
+            this.handleOneFingerMove(allPointers[0]);
+        }
+        lastTransform.unapply(this.editor);
+        this.transform.apply(this.editor);
+        this.lastTimestamp = (new Date()).getTime();
+    }
+    onPointerUp(event) {
+        var _a;
+        const onComplete = () => {
+            if (this.transform) {
+                this.transform.unapply(this.editor);
+                this.editor.dispatch(this.transform, false);
+            }
+            this.editor.display.setDraftMode(false);
+            this.transform = null;
+            this.velocity = Vec2.zero;
+        };
+        const minInertialScrollDt = 30;
+        const shouldInertialScroll = event.current.device === PointerDevice.Touch
+            && event.allPointers.length === 1
+            && this.velocity !== null
+            && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
+        if (shouldInertialScroll && this.velocity !== null) {
+            const oldVelocity = this.velocity;
+            // If the user drags the screen, then stops, then lifts the pointer,
+            // we want the final velocity to reflect the stop at the end (so the velocity
+            // should be near zero). Handle this:
+            this.updateVelocity(event.current.screenPos);
+            // Work around an input issue. Some devices that disable the touchscreen when a stylus
+            // comes near the screen fire a touch-end event at the position of the stylus when a
+            // touch gesture is canceled. Because the stylus is often far away from the last touch,
+            // this causes a great displacement between the second-to-last (from the touchscreen) and
+            // last (from the pen that is now near the screen) events. Only allow velocity to decrease
+            // to work around this:
+            if (oldVelocity.magnitude() < this.velocity.magnitude()) {
+                this.velocity = oldVelocity;
+            }
+            // Cancel any ongoing inertial scrolling.
+            (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+            this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta) => {
+                if (!this.transform) {
+                    return;
+                }
+                const canvasDelta = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollDelta);
+                // Scroll by scrollDelta
+                this.transform.unapply(this.editor);
+                this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(canvasDelta)));
+                this.transform.apply(this.editor);
+            }, onComplete);
+        }
+        else {
+            onComplete();
+        }
+    }
+    onGestureCancel() {
+        var _a, _b;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        this.velocity = Vec2.zero;
+        (_b = this.transform) === null || _b === void 0 ? void 0 : _b.unapply(this.editor);
+        this.editor.display.setDraftMode(false);
+        this.transform = null;
+    }
+    // Applies [transformUpdate] to the editor. This stacks on top of the
+    // current transformation, if it exists.
+    updateTransform(transformUpdate, announce = false) {
+        var _a;
+        let newTransform = transformUpdate;
+        if (this.transform) {
+            newTransform = this.transform.transform.rightMul(transformUpdate);
+        }
+        (_a = this.transform) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        this.transform = Viewport.transformBy(newTransform);
+        this.transform.apply(this.editor);
+        if (announce) {
+            this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
+        }
+    }
+    onWheel({ delta, screenPos }) {
+        var _a;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        // Reset the transformation -- wheel events are individual events, so we don't
+        // need to unapply/reapply.
+        this.transform = Viewport.transformBy(Mat33.identity);
+        const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
+        const toCanvas = this.editor.viewport.screenToCanvasTransform;
+        // Transform without including translation
+        const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
+        const pinchZoomScaleFactor = 1.03;
+        const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
+        this.updateTransform(transformUpdate, true);
+        return true;
+    }
+    onKeyPress({ key, ctrlKey, altKey }) {
+        var _a;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        if (!(this.mode & PanZoomMode.Keyboard)) {
+            return false;
+        }
+        if (ctrlKey || altKey) {
+            return false;
+        }
+        // No need to keep the same the transform for keyboard events.
+        this.transform = Viewport.transformBy(Mat33.identity);
+        let translation = Vec2.zero;
+        let scale = 1;
+        let rotation = 0;
+        // Keyboard shortcut handling
+        switch (key) {
+            case 'a':
+            case 'h':
+            case 'ArrowLeft':
+                translation = Vec2.of(-1, 0);
+                break;
+            case 'd':
+            case 'l':
+            case 'ArrowRight':
+                translation = Vec2.of(1, 0);
+                break;
+            case 'q':
+            case 'k':
+            case 'ArrowUp':
+                translation = Vec2.of(0, -1);
+                break;
+            case 'e':
+            case 'j':
+            case 'ArrowDown':
+                translation = Vec2.of(0, 1);
+                break;
+            case 'w':
+                scale = 1 / 2;
+                break;
+            case 's':
+                scale = 2;
+                break;
+            case 'r':
+                rotation = 1;
+                break;
+            case 'R':
+                rotation = -1;
+                break;
+            default:
+                return false;
+        }
+        // For each keypress,
+        translation = translation.times(30); // Move at most 30 units
+        rotation *= Math.PI / 8; // Rotate at least a sixteenth of a rotation
+        // Transform the canvas, not the viewport:
+        translation = translation.times(-1);
+        rotation = rotation * -1;
+        scale = 1 / scale;
+        // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+        // TODO: Figure out why and implement a better solution.
+        if (rotation !== 0) {
+            rotation += 0.0001;
+        }
+        if (this.isRotationLocked()) {
+            rotation = 0;
+        }
+        const toCanvas = this.editor.viewport.screenToCanvasTransform;
+        // Transform without translating (treat toCanvas as a linear instead of
+        // an affine transformation).
+        translation = toCanvas.transformVec3(translation);
+        // Rotate/scale about the center of the canvas
+        const transformCenter = this.editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33.scaling2D(scale, transformCenter).rightMul(Mat33.zRotation(rotation, transformCenter)).rightMul(Mat33.translation(translation));
+        this.updateTransform(transformUpdate, true);
+        return true;
+    }
+    isRotationLocked() {
+        return !!(this.mode & PanZoomMode.RotationLocked);
+    }
+    // Sets whether the given `mode` is enabled. `mode` should be a single
+    // mode from the `PanZoomMode` enum.
+    setModeEnabled(mode, enabled) {
+        let newMode = this.mode;
+        if (enabled) {
+            newMode |= mode;
+        }
+        else {
+            newMode &= ~mode;
+        }
+        this.setMode(newMode);
+    }
+    setMode(mode) {
+        if (mode !== this.mode) {
+            this.mode = mode;
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        }
+    }
+    getMode() {
+        return this.mode;
+    }
+}

package/dist/mjs/src/tools/PasteHandler.d.ts

@@ -0,0 +1,23 @@
+import Editor from '../Editor';
+import { PasteEvent } from '../types';
+import BaseTool from './BaseTool';
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
+export default class PasteHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onPaste(event: PasteEvent): boolean;
+    private addComponentsFromPaste;
+    private doSVGPaste;
+    private doTextPaste;
+    private doImagePaste;
+}

package/dist/mjs/src/tools/PasteHandler.mjs

@@ -0,0 +1,93 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import  TextComponent  from '../components/TextComponent.mjs';
+import  SVGLoader  from '../SVGLoader.mjs';
+import  Mat33  from '../math/Mat33.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import  TextTool  from './TextTool.mjs';
+import  Color4  from '../Color4.mjs';
+import  ImageComponent  from '../components/ImageComponent.mjs';
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
+export default class PasteHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.pasteHandler);
+        this.editor = editor;
+    }
+    // @internal
+    onPaste(event) {
+        const mime = event.mime.toLowerCase();
+        if (mime === 'image/svg+xml') {
+            void this.doSVGPaste(event.data);
+            return true;
+        }
+        else if (mime === 'text/plain') {
+            void this.doTextPaste(event.data);
+            return true;
+        }
+        else if (mime === 'image/png' || mime === 'image/jpeg') {
+            void this.doImagePaste(event.data);
+            return true;
+        }
+        return false;
+    }
+    addComponentsFromPaste(components) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.editor.addAndCenterComponents(components);
+        });
+    }
+    doSVGPaste(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const sanitize = true;
+            const loader = SVGLoader.fromString(data, sanitize);
+            const components = [];
+            yield loader.start((component) => {
+                components.push(component);
+            }, (_countProcessed, _totalToProcess) => null);
+            yield this.addComponentsFromPaste(components);
+        });
+    }
+    doTextPaste(text) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const textTools = this.editor.toolController.getMatchingTools(TextTool);
+            textTools.sort((a, b) => {
+                if (!a.isEnabled() && b.isEnabled()) {
+                    return -1;
+                }
+                if (!b.isEnabled() && a.isEnabled()) {
+                    return 1;
+                }
+                return 0;
+            });
+            const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
+            const pastedTextStyle = (_b = (_a = textTools[0]) === null || _a === void 0 ? void 0 : _a.getTextStyle()) !== null && _b !== void 0 ? _b : defaultTextStyle;
+            const lines = text.split('\n');
+            yield this.addComponentsFromPaste([TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle)]);
+        });
+    }
+    doImagePaste(dataURL) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = new Image();
+            image.src = dataURL;
+            const component = yield ImageComponent.fromImage(image, Mat33.identity);
+            yield this.addComponentsFromPaste([component]);
+        });
+    }
+}

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

@@ -0,0 +1,39 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import Pointer from '../Pointer';
+import { KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
+import BaseTool from './BaseTool';
+import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
+export interface PenStyle {
+    color: Color4;
+    thickness: number;
+}
+export default class Pen extends BaseTool {
+    private editor;
+    private style;
+    private builderFactory;
+    protected builder: ComponentBuilder | null;
+    private lastPoint;
+    private ctrlKeyPressed;
+    constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
+    private getPressureMultiplier;
+    protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
+    protected previewStroke(): void;
+    protected addPointToStroke(point: StrokeDataPoint): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): void;
+    onGestureCancel(): void;
+    private finalizeStroke;
+    private noteUpdated;
+    setColor(color: Color4): void;
+    setThickness(thickness: number): void;
+    setStrokeFactory(factory: ComponentBuilderFactory): void;
+    getThickness(): number;
+    getColor(): Color4;
+    getStrokeFactory(): ComponentBuilderFactory;
+    setEnabled(enabled: boolean): void;
+    private isSnappingToGrid;
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+    onKeyUp({ key }: KeyUpEvent): boolean;
+}