js-draw 0.25.0 → 1.0.0

package/dist/cjs/tools/PasteHandler.js

@@ -1,63 +1,14 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var TextComponent_1 = require("../components/TextComponent");
-var SVGLoader_1 = require("../SVGLoader");
-var Mat33_1 = require("../math/Mat33");
-var BaseTool_1 = require("./BaseTool");
-var TextTool_1 = require("./TextTool");
-var Color4_1 = require("../Color4");
-var ImageComponent_1 = require("../components/ImageComponent");
+const TextComponent_1 = __importDefault(require("../components/TextComponent"));
+const SVGLoader_1 = __importDefault(require("../SVGLoader"));
+const math_1 = require("@js-draw/math");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const TextTool_1 = __importDefault(require("./TextTool"));
+const ImageComponent_1 = __importDefault(require("../components/ImageComponent"));
 /**
  * A tool that handles paste events (e.g. as triggered by ctrl+V).
  *
@@ -69,16 +20,14 @@ var ImageComponent_1 = require("../components/ImageComponent");
  * toolController.addTool(new PasteHandler(editor));
  * ```
  */
-var PasteHandler = /** @class */ (function (_super) {
-    __extends(PasteHandler, _super);
-    function PasteHandler(editor) {
-        var _this = _super.call(this, editor.notifier, editor.localization.pasteHandler) || this;
-        _this.editor = editor;
-        return _this;
+class PasteHandler extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.pasteHandler);
+        this.editor = editor;
     }
     // @internal
-    PasteHandler.prototype.onPaste = function (event) {
-        var mime = event.mime.toLowerCase();
+    onPaste(event) {
+        const mime = event.mime.toLowerCase();
         if (mime === 'image/svg+xml') {
             void this.doSVGPaste(event.data);
             return true;
@@ -92,88 +41,40 @@ var PasteHandler = /** @class */ (function (_super) {
             return true;
         }
         return false;
-    };
-    PasteHandler.prototype.addComponentsFromPaste = function (components) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.editor.addAndCenterComponents(components)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    PasteHandler.prototype.doSVGPaste = function (data) {
-        return __awaiter(this, void 0, void 0, function () {
-            var sanitize, loader, components;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        sanitize = true;
-                        loader = SVGLoader_1.default.fromString(data, sanitize);
-                        components = [];
-                        return [4 /*yield*/, loader.start(function (component) {
-                                components.push(component);
-                            }, function (_countProcessed, _totalToProcess) { return null; })];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, this.addComponentsFromPaste(components)];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    PasteHandler.prototype.doTextPaste = function (text) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function () {
-            var textTools, defaultTextStyle, pastedTextStyle, lines;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        textTools = this.editor.toolController.getMatchingTools(TextTool_1.default);
-                        textTools.sort(function (a, b) {
-                            if (!a.isEnabled() && b.isEnabled()) {
-                                return -1;
-                            }
-                            if (!b.isEnabled() && a.isEnabled()) {
-                                return 1;
-                            }
-                            return 0;
-                        });
-                        defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4_1.default.red } };
-                        pastedTextStyle = (_b = (_a = textTools[0]) === null || _a === void 0 ? void 0 : _a.getTextStyle()) !== null && _b !== void 0 ? _b : defaultTextStyle;
-                        lines = text.split('\n');
-                        return [4 /*yield*/, this.addComponentsFromPaste([TextComponent_1.default.fromLines(lines, Mat33_1.default.identity, pastedTextStyle)])];
-                    case 1:
-                        _c.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    PasteHandler.prototype.doImagePaste = function (dataURL) {
-        return __awaiter(this, void 0, void 0, function () {
-            var image, component;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        image = new Image();
-                        image.src = dataURL;
-                        return [4 /*yield*/, ImageComponent_1.default.fromImage(image, Mat33_1.default.identity)];
-                    case 1:
-                        component = _a.sent();
-                        return [4 /*yield*/, this.addComponentsFromPaste([component])];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
+    }
+    async addComponentsFromPaste(components) {
+        await this.editor.addAndCenterComponents(components);
+    }
+    async doSVGPaste(data) {
+        const sanitize = true;
+        const loader = SVGLoader_1.default.fromString(data, sanitize);
+        const components = [];
+        await loader.start((component) => {
+            components.push(component);
+        }, (_countProcessed, _totalToProcess) => null);
+        await this.addComponentsFromPaste(components);
+    }
+    async doTextPaste(text) {
+        const textTools = this.editor.toolController.getMatchingTools(TextTool_1.default);
+        textTools.sort((a, b) => {
+            if (!a.isEnabled() && b.isEnabled()) {
+                return -1;
+            }
+            if (!b.isEnabled() && a.isEnabled()) {
+                return 1;
+            }
+            return 0;
         });
-    };
-    return PasteHandler;
-}(BaseTool_1.default));
+        const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: math_1.Color4.red } };
+        const pastedTextStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
+        const lines = text.split('\n');
+        await this.addComponentsFromPaste([TextComponent_1.default.fromLines(lines, math_1.Mat33.identity, pastedTextStyle)]);
+    }
+    async doImagePaste(dataURL) {
+        const image = new Image();
+        image.src = dataURL;
+        const component = await ImageComponent_1.default.fromImage(image, math_1.Mat33.identity);
+        await this.addComponentsFromPaste([component]);
+    }
+}
 exports.default = PasteHandler;

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

@@ -1,26 +1,26 @@
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 import Editor from '../Editor';
 import Pointer from '../Pointer';
-import { KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
+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 {
-    color: Color4;
-    thickness: number;
+    readonly color: Color4;
+    readonly thickness: number;
+    readonly factory: ComponentBuilderFactory;
 }
 export default class Pen extends BaseTool {
     private editor;
-    private style;
-    private builderFactory;
     protected builder: ComponentBuilder | null;
     private lastPoint;
     private startPoint;
     private currentDeviceType;
-    private snapToGridEnabled;
-    private angleLockEnabled;
-    constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
+    private styleValue;
+    private style;
+    constructor(editor: Editor, description: string, style: Partial<PenStyle>);
     private getPressureMultiplier;
-    private xyAxesSnap;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
     protected previewStroke(): void;
     protected addPointToStroke(point: StrokeDataPoint): void;
@@ -35,10 +35,11 @@ export default class Pen extends BaseTool {
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
     setStrokeFactory(factory: ComponentBuilderFactory): void;
+    setHasStabilization(hasStabilization: boolean): void;
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;
+    getStyleValue(): MutableReactiveValue<PenStyle>;
     setEnabled(enabled: boolean): void;
     onKeyPress(event: KeyPressEvent): boolean;
-    onKeyUp(event: KeyUpEvent): boolean;
 }

package/dist/cjs/tools/Pen.js

@@ -1,76 +1,45 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var EditorImage_1 = require("../EditorImage");
-var Pointer_1 = require("../Pointer");
-var FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
-var types_1 = require("../types");
-var BaseTool_1 = require("./BaseTool");
-var keybindings_1 = require("./keybindings");
-var keybindings_2 = require("./keybindings");
-var Pen = /** @class */ (function (_super) {
-    __extends(Pen, _super);
-    function Pen(editor, description, style, builderFactory) {
-        if (builderFactory === void 0) { builderFactory = FreehandLineBuilder_1.makeFreehandLineBuilder; }
-        var _this = _super.call(this, editor.notifier, description) || this;
-        _this.editor = editor;
-        _this.style = style;
-        _this.builderFactory = builderFactory;
-        _this.builder = null;
-        _this.lastPoint = null;
-        _this.startPoint = null;
-        _this.currentDeviceType = null;
-        _this.snapToGridEnabled = false;
-        _this.angleLockEnabled = false;
-        return _this;
+const math_1 = require("@js-draw/math");
+const EditorImage_1 = __importDefault(require("../EditorImage"));
+const Pointer_1 = require("../Pointer");
+const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const keybindings_1 = require("./keybindings");
+const keybindings_2 = require("./keybindings");
+const InputStabilizer_1 = __importDefault(require("./InputFilter/InputStabilizer"));
+const ReactiveValue_1 = require("../util/ReactiveValue");
+class Pen extends BaseTool_1.default {
+    constructor(editor, description, style) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.builder = null;
+        this.lastPoint = null;
+        this.startPoint = null;
+        this.currentDeviceType = null;
+        this.styleValue = ReactiveValue_1.ReactiveValue.fromInitialValue({
+            factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
+            color: math_1.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;
     }
-    Pen.prototype.getPressureMultiplier = function () {
-        return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
-    };
-    // Snap the given pointer to the nearer of the x/y axes.
-    Pen.prototype.xyAxesSnap = function (pointer) {
-        if (!this.startPoint) {
-            return pointer;
-        }
-        var screenPos = this.editor.viewport.canvasToScreen(this.startPoint.pos);
-        return pointer.lockedToXYAxesScreen(screenPos, this.editor.viewport);
-    };
     // Converts a `pointer` to a `StrokeDataPoint`.
-    Pen.prototype.toStrokePoint = function (pointer) {
-        var _a;
-        if (this.angleLockEnabled && this.lastPoint) {
-            pointer = this.xyAxesSnap(pointer);
-        }
-        if (this.snapToGridEnabled) {
-            pointer = pointer.snappedToGrid(this.editor.viewport);
-        }
-        var minPressure = 0.3;
-        var pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
+    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;
@@ -78,35 +47,33 @@ var Pen = /** @class */ (function (_super) {
         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!');
-        var pos = pointer.canvasPos;
+        const pos = pointer.canvasPos;
         return {
-            pos: pos,
+            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`.
-    Pen.prototype.previewStroke = function () {
-        var _a;
+    previewStroke() {
         this.editor.clearWetInk();
-        (_a = this.builder) === null || _a === void 0 ? void 0 : _a.preview(this.editor.display.getWetInkRenderer());
-    };
+        this.builder?.preview(this.editor.display.getWetInkRenderer());
+    }
     // Throws if no stroke builder exists.
-    Pen.prototype.addPointToStroke = function (point) {
+    addPointToStroke(point) {
         if (!this.builder) {
             throw new Error('No stroke is currently being generated.');
         }
         this.builder.addPoint(point);
         this.lastPoint = point;
         this.previewStroke();
-    };
-    Pen.prototype.onPointerDown = function (event) {
-        var current = event.current, allPointers = event.allPointers;
-        var isEraser = current.device === Pointer_1.PointerDevice.Eraser;
-        var anyDeviceIsStylus = false;
-        for (var _i = 0, allPointers_1 = allPointers; _i < allPointers_1.length; _i++) {
-            var pointer = allPointers_1[_i];
+    }
+    onPointerDown(event) {
+        const { current, allPointers } = event;
+        const isEraser = current.device === Pointer_1.PointerDevice.Eraser;
+        let anyDeviceIsStylus = false;
+        for (const pointer of allPointers) {
             if (pointer.device === Pointer_1.PointerDevice.Pen) {
                 anyDeviceIsStylus = true;
                 break;
@@ -118,42 +85,38 @@ var Pen = /** @class */ (function (_super) {
         }
         if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
             this.startPoint = this.toStrokePoint(current);
-            this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
+            this.builder = this.style.factory(this.startPoint, this.editor.viewport);
             this.currentDeviceType = current.device;
             return true;
         }
         return false;
-    };
-    Pen.prototype.eventCanCancelStroke = function (event) {
-        var _a, _b;
+    }
+    eventCanCancelStroke(event) {
         // If there has been a delay since the last input event,
         // it's always okay to cancel
-        var lastInputTime = (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.time) !== null && _b !== void 0 ? _b : 0;
+        const lastInputTime = this.lastPoint?.time ?? 0;
         if (event.current.timeStamp - lastInputTime > 1000) {
             return true;
         }
-        var isPenStroke = this.currentDeviceType === Pointer_1.PointerDevice.Pen;
-        var isTouchEvent = event.current.device === Pointer_1.PointerDevice.Touch;
+        const isPenStroke = this.currentDeviceType === Pointer_1.PointerDevice.Pen;
+        const isTouchEvent = event.current.device === Pointer_1.PointerDevice.Touch;
         // Don't allow pen strokes to be cancelled by touch events.
         if (isPenStroke && isTouchEvent) {
             return false;
         }
         return true;
-    };
-    Pen.prototype.eventCanBeDeliveredToNonActiveTool = function (event) {
+    }
+    eventCanBeDeliveredToNonActiveTool(event) {
         return this.eventCanCancelStroke(event);
-    };
-    Pen.prototype.onPointerMove = function (_a) {
-        var current = _a.current;
+    }
+    onPointerMove({ current }) {
         if (!this.builder)
             return;
         if (current.device !== this.currentDeviceType)
             return;
         this.addPointToStroke(this.toStrokePoint(current));
-    };
-    Pen.prototype.onPointerUp = function (_a) {
-        var _b, _c;
-        var current = _a.current;
+    }
+    onPointerUp({ current }) {
         if (!this.builder)
             return false;
         if (current.device !== this.currentDeviceType) {
@@ -162,25 +125,28 @@ var Pen = /** @class */ (function (_super) {
             return true;
         }
         // onPointerUp events can have zero pressure. Use the last pressure instead.
-        var currentPoint = this.toStrokePoint(current);
-        var strokePoint = __assign(__assign({}, currentPoint), { width: (_c = (_b = this.lastPoint) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : currentPoint.width });
+        const currentPoint = this.toStrokePoint(current);
+        const strokePoint = {
+            ...currentPoint,
+            width: this.lastPoint?.width ?? currentPoint.width,
+        };
         this.addPointToStroke(strokePoint);
         if (current.isPrimary) {
             this.finalizeStroke();
         }
         return false;
-    };
-    Pen.prototype.onGestureCancel = function () {
+    }
+    onGestureCancel() {
         this.builder = null;
         this.editor.clearWetInk();
-    };
-    Pen.prototype.finalizeStroke = function () {
+    }
+    finalizeStroke() {
         if (this.builder) {
-            var stroke = this.builder.build();
+            const stroke = this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
-                var canFlatten = true;
-                var action = EditorImage_1.default.addElement(stroke, canFlatten);
+                const canFlatten = true;
+                const action = EditorImage_1.default.addElement(stroke, canFlatten);
                 this.editor.dispatch(action);
             }
             else {
@@ -190,49 +156,69 @@ var Pen = /** @class */ (function (_super) {
         this.builder = null;
         this.lastPoint = null;
         this.editor.clearWetInk();
-    };
-    Pen.prototype.noteUpdated = function () {
+    }
+    noteUpdated() {
         this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
             kind: types_1.EditorEventType.ToolUpdated,
             tool: this,
         });
-    };
-    Pen.prototype.setColor = function (color) {
+    }
+    setColor(color) {
         if (color.toHexString() !== this.style.color.toHexString()) {
-            this.style = __assign(__assign({}, this.style), { color: color });
-            this.noteUpdated();
+            this.styleValue.set({
+                ...this.style,
+                color,
+            });
         }
-    };
-    Pen.prototype.setThickness = function (thickness) {
+    }
+    setThickness(thickness) {
         if (thickness !== this.style.thickness) {
-            this.style = __assign(__assign({}, this.style), { thickness: thickness });
-            this.noteUpdated();
+            this.styleValue.set({
+                ...this.style,
+                thickness,
+            });
         }
-    };
-    Pen.prototype.setStrokeFactory = function (factory) {
-        if (factory !== this.builderFactory) {
-            this.builderFactory = factory;
-            this.noteUpdated();
+    }
+    setStrokeFactory(factory) {
+        if (factory !== this.style.factory) {
+            this.styleValue.set({
+                ...this.style,
+                factory,
+            });
         }
-    };
-    Pen.prototype.getThickness = function () { return this.style.thickness; };
-    Pen.prototype.getColor = function () { return this.style.color; };
-    Pen.prototype.getStrokeFactory = function () { return this.builderFactory; };
-    Pen.prototype.setEnabled = function (enabled) {
-        _super.prototype.setEnabled.call(this, enabled);
-        this.snapToGridEnabled = false;
-    };
-    Pen.prototype.onKeyPress = function (event) {
-        var shortcuts = this.editor.shortcuts;
+    }
+    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_1.default(this.editor.viewport));
+        }
+        this.noteUpdated();
+    }
+    getThickness() { return this.style.thickness; }
+    getColor() { return this.style.color; }
+    getStrokeFactory() { return this.style.factory; }
+    getStyleValue() { return this.styleValue; }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+    }
+    onKeyPress(event) {
+        const shortcuts = this.editor.shortcuts;
         // Ctrl+Z: End the stroke so that it can be undone/redone.
-        var isCtrlZ = shortcuts.matchesShortcut(keybindings_1.undoKeyboardShortcutId, event);
+        const isCtrlZ = shortcuts.matchesShortcut(keybindings_1.undoKeyboardShortcutId, event);
         if (this.builder && isCtrlZ) {
             this.finalizeStroke();
             // Return false: Allow other listeners to handle the event (e.g.
             // undo/redo).
             return false;
         }
-        var newThickness;
+        let newThickness;
         if (shortcuts.matchesShortcut(keybindings_2.decreaseSizeKeyboardShortcutId, event)) {
             newThickness = this.getThickness() * 2 / 3;
         }
@@ -244,28 +230,7 @@ var Pen = /** @class */ (function (_super) {
             this.setThickness(newThickness);
             return true;
         }
-        if (shortcuts.matchesShortcut(keybindings_2.snapToGridKeyboardShortcutId, event)) {
-            this.snapToGridEnabled = true;
-            return true;
-        }
-        if (shortcuts.matchesShortcut(keybindings_2.lineLockKeyboardShortcutId, event)) {
-            this.angleLockEnabled = true;
-            return true;
-        }
         return false;
-    };
-    Pen.prototype.onKeyUp = function (event) {
-        var shortcuts = this.editor.shortcuts;
-        if (shortcuts.matchesShortcut(keybindings_2.snapToGridKeyboardShortcutId, event)) {
-            this.snapToGridEnabled = false;
-            return true;
-        }
-        if (shortcuts.matchesShortcut(keybindings_2.lineLockKeyboardShortcutId, event)) {
-            this.angleLockEnabled = false;
-            return true;
-        }
-        return false;
-    };
-    return Pen;
-}(BaseTool_1.default));
+    }
+}
 exports.default = Pen;