js-draw 0.0.1

package/dist/src/StrokeBuilder.js

@@ -0,0 +1,275 @@
+import { Bezier } from 'bezier-js';
+import { Vec2 } from './geometry/Vec2';
+import Rect2 from './geometry/Rect2';
+import { PathCommandType } from './geometry/Path';
+import LineSegment2 from './geometry/LineSegment2';
+import Stroke from './components/Stroke';
+import Viewport from './Viewport';
+// Handles stroke smoothing and creates Strokes from user/stylus input.
+export default class StrokeBuilder {
+    constructor(startPoint, 
+    // Maximum distance from the actual curve (irrespective of stroke width)
+    // for which a point is considered 'part of the curve'.
+    // Note that the maximum will be smaller if the stroke width is less than
+    // [maxFitAllowed].
+    minFitAllowed, maxFitAllowed) {
+        this.startPoint = startPoint;
+        this.minFitAllowed = minFitAllowed;
+        this.maxFitAllowed = maxFitAllowed;
+        this.currentCurve = null;
+        this.lastPoint = this.startPoint;
+        this.segments = [];
+        this.buffer = [this.startPoint.pos];
+        this.momentum = Vec2.zero;
+        this.currentCurve = null;
+        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    getRenderingStyle() {
+        var _a;
+        return {
+            fill: (_a = this.lastPoint.color) !== null && _a !== void 0 ? _a : null,
+        };
+    }
+    // Get the segments that make up this' path. Can be called after calling build()
+    preview() {
+        if (this.currentCurve && this.lastPoint) {
+            const currentPath = this.currentSegmentToPath();
+            return this.segments.concat(currentPath);
+        }
+        return this.segments;
+    }
+    build() {
+        if (this.lastPoint) {
+            this.finalizeCurrentCurve();
+        }
+        return new Stroke(this.segments);
+    }
+    roundPoint(point) {
+        return Viewport.roundPoint(point, this.minFitAllowed);
+    }
+    finalizeCurrentCurve() {
+        // Case where no points have been added
+        if (!this.currentCurve) {
+            // Don't create a circle around the initial point if the stroke has more than one point.
+            if (this.segments.length > 0) {
+                return;
+            }
+            const width = Viewport.roundPoint(this.startPoint.width / 3, this.minFitAllowed);
+            const center = this.roundPoint(this.startPoint.pos);
+            // Draw a circle-ish shape around the start point
+            this.segments.push({
+                // Start on the right, cycle clockwise:
+                //    |
+                //  ----- ←
+                //    |
+                startPoint: this.startPoint.pos.plus(Vec2.of(width, 0)),
+                commands: [
+                    {
+                        kind: PathCommandType.QuadraticBezierTo,
+                        controlPoint: center.plus(Vec2.of(width, width)),
+                        // Bottom of the circle
+                        //    |
+                        //  -----
+                        //    |
+                        //    ↑
+                        endPoint: center.plus(Vec2.of(0, width)),
+                    },
+                    {
+                        kind: PathCommandType.QuadraticBezierTo,
+                        controlPoint: center.plus(Vec2.of(-width, width)),
+                        endPoint: center.plus(Vec2.of(-width, 0)),
+                    },
+                    {
+                        kind: PathCommandType.QuadraticBezierTo,
+                        controlPoint: center.plus(Vec2.of(-width, -width)),
+                        endPoint: center.plus(Vec2.of(0, -width)),
+                    },
+                    {
+                        kind: PathCommandType.QuadraticBezierTo,
+                        controlPoint: center.plus(Vec2.of(width, -width)),
+                        endPoint: center.plus(Vec2.of(width, 0)),
+                    },
+                ],
+                style: this.getRenderingStyle(),
+            });
+            return;
+        }
+        this.segments.push(this.currentSegmentToPath());
+        const lastPoint = this.buffer[this.buffer.length - 1];
+        this.lastExitingVec = Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2.ofXY(this.currentCurve.points[1]));
+        console.assert(this.lastExitingVec.magnitude() !== 0);
+        // Use the last two points to start a new curve (the last point isn't used
+        // in the current curve and we want connected curves to share end points)
+        this.buffer = [
+            this.buffer[this.buffer.length - 2], lastPoint,
+        ];
+        this.currentCurve = null;
+    }
+    currentSegmentToPath() {
+        if (this.currentCurve == null) {
+            throw new Error('Invalid State: currentCurve is null!');
+        }
+        let startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+        let endVec = Vec2.ofXY(this.currentCurve.normal(1)).normalized();
+        startVec = startVec.times(this.curveStartWidth / 2);
+        endVec = endVec.times(this.curveEndWidth / 2);
+        if (isNaN(startVec.magnitude())) {
+            // TODO: This can happen when events are too close together. Find out why and
+            // 		 fix.
+            console.error('startVec is NaN', startVec, endVec, this.currentCurve);
+            startVec = endVec;
+        }
+        const startPt = Vec2.ofXY(this.currentCurve.get(0));
+        const endPt = Vec2.ofXY(this.currentCurve.get(1));
+        const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
+        // Approximate the normal at the location of the control point
+        let projectionT = this.currentCurve.project(controlPoint.xy).t;
+        if (!projectionT) {
+            if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
+                projectionT = 0.1;
+            }
+            else {
+                projectionT = 0.9;
+            }
+        }
+        const halfVec = Vec2.ofXY(this.currentCurve.normal(projectionT))
+            .normalized().times(this.curveStartWidth / 2 * projectionT
+            + this.curveEndWidth / 2 * (1 - projectionT));
+        const pathCommands = [
+            {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
+                endPoint: this.roundPoint(endPt.plus(endVec)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: this.roundPoint(endPt.minus(endVec)),
+            },
+            {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+                endPoint: this.roundPoint(startPt.minus(startVec)),
+            },
+        ];
+        return {
+            startPoint: this.roundPoint(startPt.plus(startVec)),
+            commands: pathCommands,
+            style: this.getRenderingStyle(),
+        };
+    }
+    // Compute the direction of the velocity at the end of this.buffer
+    computeExitingVec() {
+        return this.momentum.normalized().times(this.lastPoint.width / 2);
+    }
+    addPoint(newPoint) {
+        var _a, _b;
+        if (this.lastPoint) {
+            // Ignore points that are identical
+            const fuzzEq = 1e-10;
+            const deltaTime = newPoint.time - this.lastPoint.time;
+            if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
+                console.warn('Discarding identical point');
+                return;
+            }
+            else if (isNaN(newPoint.pos.magnitude())) {
+                console.warn('Discarding NaN point.', newPoint);
+                return;
+            }
+            const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
+            if (this.lastPoint.pos.minus(newPoint.pos).magnitude() < threshold) {
+                return;
+            }
+            const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
+            this.momentum = this.momentum.lerp(velocity, 0.9);
+        }
+        const lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
+        this.lastPoint = newPoint;
+        this.buffer.push(newPoint.pos);
+        const pointRadius = newPoint.width / 2;
+        const prevEndWidth = this.curveEndWidth;
+        this.curveEndWidth = pointRadius;
+        // recompute bbox
+        this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
+        if (this.currentCurve === null) {
+            const p1 = lastPoint.pos;
+            const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2.unitX);
+            const p3 = newPoint.pos;
+            // Quadratic Bézier curve
+            this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
+            this.curveStartWidth = lastPoint.width / 2;
+            console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+        }
+        let enteringVec = this.lastExitingVec;
+        if (!enteringVec) {
+            let sampleIdx = Math.ceil(this.buffer.length / 3);
+            if (sampleIdx === 0) {
+                sampleIdx = this.buffer.length - 1;
+            }
+            enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
+        }
+        let exitingVec = this.computeExitingVec();
+        // Find the intersection between the entering vector and the exiting vector
+        const maxRelativeLength = 2;
+        const segmentStart = this.buffer[0];
+        const segmentEnd = newPoint.pos;
+        const startEndDist = segmentEnd.minus(segmentStart).magnitude();
+        const maxControlPointDist = maxRelativeLength * startEndDist;
+        // Exit in cases where we would divide by zero
+        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || isNaN(exitingVec.magnitude())) {
+            return;
+        }
+        console.assert(!isNaN(enteringVec.magnitude()));
+        enteringVec = enteringVec.normalized();
+        exitingVec = exitingVec.normalized();
+        console.assert(!isNaN(enteringVec.magnitude()));
+        const lineFromStart = new LineSegment2(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
+        const lineFromEnd = new LineSegment2(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
+        const intersection = lineFromEnd.intersection(lineFromStart);
+        // Position the control point at this intersection
+        let controlPoint;
+        if (intersection) {
+            controlPoint = intersection.point;
+        }
+        else {
+            // Position the control point closer to the first -- the connecting
+            // segment will be roughly a line.
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
+        }
+        if (isNaN(controlPoint.magnitude()) || isNaN(segmentStart.magnitude())) {
+            console.error('controlPoint is NaN', intersection, 'Start:', segmentStart, 'End:', segmentEnd, 'in:', enteringVec, 'out:', exitingVec);
+        }
+        const prevCurve = this.currentCurve;
+        this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
+        if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
+            console.error('NaN normal at 0. Curve:', this.currentCurve);
+            this.currentCurve = prevCurve;
+        }
+        // Should we start making a new curve? Check whether all buffer points are within
+        // ±strokeWidth of the curve.
+        const curveMatchesPoints = (curve) => {
+            for (const point of this.buffer) {
+                const proj = Vec2.ofXY(curve.project(point.xy));
+                const dist = proj.minus(point).magnitude();
+                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 2, this.minFitAllowed);
+                if (dist > minFit || dist > this.maxFitAllowed) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        if (this.buffer.length > 3) {
+            if (!curveMatchesPoints(this.currentCurve)) {
+                // Use a curve that better fits the points
+                this.currentCurve = prevCurve;
+                this.curveEndWidth = prevEndWidth;
+                // Reset the last point -- the current point was not added to the curve.
+                this.lastPoint = lastPoint;
+                this.finalizeCurrentCurve();
+                return;
+            }
+        }
+    }
+}

package/dist/src/UndoRedoHistory.d.ts

@@ -0,0 +1,17 @@
+import Editor from './Editor';
+import Command from './commands/Command';
+declare type AnnounceRedoCallback = (command: Command) => void;
+declare type AnnounceUndoCallback = (command: Command) => void;
+declare class UndoRedoHistory {
+    private readonly editor;
+    private announceRedoCallback;
+    private announceUndoCallback;
+    private undoStack;
+    private redoStack;
+    constructor(editor: Editor, announceRedoCallback: AnnounceRedoCallback, announceUndoCallback: AnnounceUndoCallback);
+    private fireUpdateEvent;
+    push(command: Command, apply?: boolean): void;
+    undo(): void;
+    redo(): void;
+}
+export default UndoRedoHistory;

package/dist/src/UndoRedoHistory.js

@@ -0,0 +1,46 @@
+import { EditorEventType } from './types';
+class UndoRedoHistory {
+    constructor(editor, announceRedoCallback, announceUndoCallback) {
+        this.editor = editor;
+        this.announceRedoCallback = announceRedoCallback;
+        this.announceUndoCallback = announceUndoCallback;
+        this.undoStack = [];
+        this.redoStack = [];
+    }
+    fireUpdateEvent() {
+        this.editor.notifier.dispatch(EditorEventType.UndoRedoStackUpdated, {
+            kind: EditorEventType.UndoRedoStackUpdated,
+            undoStackSize: this.undoStack.length,
+            redoStackSize: this.redoStack.length,
+        });
+    }
+    // Adds the given command to this and applies it to the editor.
+    push(command, apply = true) {
+        if (apply) {
+            command.apply(this.editor);
+        }
+        this.undoStack.push(command);
+        this.redoStack = [];
+        this.fireUpdateEvent();
+    }
+    // Remove the last command from this' undo stack and apply it.
+    undo() {
+        const command = this.undoStack.pop();
+        if (command) {
+            this.redoStack.push(command);
+            command.unapply(this.editor);
+            this.announceUndoCallback(command);
+        }
+        this.fireUpdateEvent();
+    }
+    redo() {
+        const command = this.redoStack.pop();
+        if (command) {
+            this.undoStack.push(command);
+            command.apply(this.editor);
+            this.announceRedoCallback(command);
+        }
+        this.fireUpdateEvent();
+    }
+}
+export default UndoRedoHistory;

package/dist/src/Viewport.d.ts

@@ -0,0 +1,39 @@
+import { CommandLocalization } from './commands/localization';
+import Editor from './Editor';
+import Mat33 from './geometry/Mat33';
+import Rect2 from './geometry/Rect2';
+import { Point2, Vec2 } from './geometry/Vec2';
+import { StrokeDataPoint } from './StrokeBuilder';
+import { EditorNotifier } from './types';
+declare type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+export declare class Viewport {
+    private notifier;
+    static ViewportTransform: {
+        new (transform: Mat33): {
+            readonly "__#2@#inverseTransform": Mat33;
+            readonly transform: Mat33;
+            apply(editor: Editor): void;
+            unapply(editor: Editor): void;
+            description(localizationTable: CommandLocalization): string;
+        };
+    };
+    private transform;
+    private inverseTransform;
+    private screenRect;
+    constructor(notifier: EditorNotifier);
+    updateScreenSize(screenSize: Vec2): void;
+    get visibleRect(): Rect2;
+    screenToCanvas(screenPoint: Point2): Point2;
+    canvasToScreen(canvasPoint: Point2): Point2;
+    resetTransform(newTransform: Mat33): void;
+    get screenToCanvasTransform(): Mat33;
+    get canvasToScreenTransform(): Mat33;
+    getScaleFactor(): number;
+    getRotationAngle(): number;
+    static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
+    roundPoint(point: Point2): Point2;
+}
+export declare namespace Viewport {
+    type ViewportTransform = typeof Viewport.ViewportTransform.prototype;
+}
+export default Viewport;

package/dist/src/Viewport.js

@@ -0,0 +1,134 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _inverseTransform, _a;
+import Mat33 from './geometry/Mat33';
+import Rect2 from './geometry/Rect2';
+import { Vec2 } from './geometry/Vec2';
+import Vec3 from './geometry/Vec3';
+import { EditorEventType } from './types';
+export class Viewport {
+    constructor(notifier) {
+        this.notifier = notifier;
+        this.resetTransform(Mat33.identity);
+        this.screenRect = Rect2.empty;
+    }
+    updateScreenSize(screenSize) {
+        this.screenRect = this.screenRect.resizedTo(screenSize);
+    }
+    get visibleRect() {
+        return this.screenRect.transformedBoundingBox(this.inverseTransform);
+    }
+    // the given point, but in canvas coordinates
+    screenToCanvas(screenPoint) {
+        return this.inverseTransform.transformVec2(screenPoint);
+    }
+    canvasToScreen(canvasPoint) {
+        return this.transform.transformVec2(canvasPoint);
+    }
+    // Updates the transformation directly. Using ViewportTransform is preferred.
+    // [newTransform] should map from canvas coordinates to screen coordinates.
+    resetTransform(newTransform) {
+        this.transform = newTransform;
+        this.inverseTransform = newTransform.inverse();
+        this.notifier.dispatch(EditorEventType.ViewportChanged, {
+            kind: EditorEventType.ViewportChanged,
+            newTransform,
+        });
+    }
+    get screenToCanvasTransform() {
+        return this.inverseTransform;
+    }
+    get canvasToScreenTransform() {
+        return this.transform;
+    }
+    // Returns the amount a vector on the canvas is scaled to become a vector on the screen.
+    getScaleFactor() {
+        // Use transformVec3 to avoid translating the vector
+        return this.transform.transformVec3(Vec3.unitX).magnitude();
+    }
+    // Returns the angle of the canvas in radians
+    getRotationAngle() {
+        return this.transform.transformVec3(Vec3.unitX).angle();
+    }
+    // The separate function type definition seems necessary here.
+    // See https://stackoverflow.com/a/58163623/17055750.
+    // eslint-disable-next-line no-dupe-class-members
+    static roundPoint(point, tolerance) {
+        const scaleFactor = Math.pow(10, Math.floor(Math.log10(tolerance)));
+        const roundComponent = (component) => {
+            return Math.round(component / scaleFactor) * scaleFactor;
+        };
+        if (typeof point === 'number') {
+            return roundComponent(point);
+        }
+        return point.map(roundComponent);
+    }
+    // Round a point with a tolerance of ±1 screen unit.
+    roundPoint(point) {
+        return Viewport.roundPoint(point, 1 / this.getScaleFactor());
+    }
+}
+// Command that translates/scales the viewport.
+Viewport.ViewportTransform = (_a = class {
+        constructor(transform) {
+            this.transform = transform;
+            _inverseTransform.set(this, void 0);
+            __classPrivateFieldSet(this, _inverseTransform, transform.inverse(), "f");
+        }
+        apply(editor) {
+            const viewport = editor.viewport;
+            viewport.resetTransform(viewport.transform.rightMul(this.transform));
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            const viewport = editor.viewport;
+            viewport.resetTransform(viewport.transform.rightMul(__classPrivateFieldGet(this, _inverseTransform, "f")));
+            editor.queueRerender();
+        }
+        description(localizationTable) {
+            const result = [];
+            // Describe the transformation's affect on the viewport (note that transformation transforms
+            // the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
+            const origVec = Vec2.unitX;
+            const linearTransformedVec = this.transform.transformVec3(Vec2.unitX);
+            const affineTransformedVec = this.transform.transformVec2(Vec2.unitX);
+            const scale = linearTransformedVec.magnitude();
+            const rotation = 180 / Math.PI * linearTransformedVec.angle();
+            const translation = affineTransformedVec.minus(origVec);
+            if (scale > 1.2) {
+                result.push(localizationTable.zoomedIn);
+            }
+            else if (scale < 0.8) {
+                result.push(localizationTable.zoomedOut);
+            }
+            if (Math.floor(Math.abs(rotation)) > 0) {
+                result.push(localizationTable.rotatedBy(Math.round(rotation)));
+            }
+            const minTranslation = 1e-4;
+            if (translation.x > minTranslation) {
+                result.push(localizationTable.movedLeft);
+            }
+            else if (translation.x < -minTranslation) {
+                result.push(localizationTable.movedRight);
+            }
+            if (translation.y < minTranslation) {
+                result.push(localizationTable.movedDown);
+            }
+            else if (translation.y > minTranslation) {
+                result.push(localizationTable.movedUp);
+            }
+            return result.join('; ');
+        }
+    },
+    _inverseTransform = new WeakMap(),
+    _a);
+export default Viewport;

package/dist/src/commands/Command.d.ts

@@ -0,0 +1,15 @@
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+interface Command {
+    apply(editor: Editor): void;
+    unapply(editor: Editor): void;
+    description(localizationTable: EditorLocalization): string;
+}
+declare namespace Command {
+    const empty: {
+        apply(_editor: Editor): void;
+        unapply(_editor: Editor): void;
+    };
+    const union: (a: Command, b: Command) => Command;
+}
+export default Command;

package/dist/src/commands/Command.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line no-redeclare
+var Command;
+(function (Command) {
+    Command.empty = {
+        apply(_editor) { },
+        unapply(_editor) { },
+    };
+    Command.union = (a, b) => {
+        return {
+            apply(editor) {
+                a.apply(editor);
+                b.apply(editor);
+            },
+            unapply(editor) {
+                b.unapply(editor);
+                a.unapply(editor);
+            },
+            description(localizationTable) {
+                const aDescription = a.description(localizationTable);
+                const bDescription = b.description(localizationTable);
+                if (aDescription === bDescription) {
+                    return aDescription;
+                }
+                return `${aDescription}, ${bDescription}`;
+            },
+        };
+    };
+})(Command || (Command = {}));
+export default Command;

package/dist/src/commands/Erase.d.ts

@@ -0,0 +1,11 @@
+import AbstractComponent from '../components/AbstractComponent';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import Command from './Command';
+export default class Erase implements Command {
+    private toRemove;
+    constructor(toRemove: AbstractComponent[]);
+    apply(editor: Editor): void;
+    unapply(editor: Editor): void;
+    description(localizationTable: EditorLocalization): string;
+}

package/dist/src/commands/Erase.js

@@ -0,0 +1,37 @@
+import EditorImage from '../EditorImage';
+export default class Erase {
+    constructor(toRemove) {
+        // Clone the list
+        this.toRemove = toRemove.map(elem => elem);
+    }
+    apply(editor) {
+        for (const part of this.toRemove) {
+            const parent = editor.image.findParent(part);
+            if (parent) {
+                parent.remove();
+            }
+        }
+        editor.queueRerender();
+    }
+    unapply(editor) {
+        for (const part of this.toRemove) {
+            if (!editor.image.findParent(part)) {
+                new EditorImage.AddElementCommand(part).apply(editor);
+            }
+        }
+        editor.queueRerender();
+    }
+    description(localizationTable) {
+        if (this.toRemove.length === 0) {
+            return localizationTable.erasedNoElements;
+        }
+        let description = this.toRemove[0].description(localizationTable);
+        for (const elem of this.toRemove) {
+            if (elem.description(localizationTable) !== description) {
+                description = localizationTable.elements;
+                break;
+            }
+        }
+        return localizationTable.eraseAction(description, this.toRemove.length);
+    }
+}

package/dist/src/commands/localization.d.ts

@@ -0,0 +1,19 @@
+import Rect2 from '../geometry/Rect2';
+export interface CommandLocalization {
+    movedLeft: string;
+    movedUp: string;
+    movedDown: string;
+    movedRight: string;
+    rotatedBy: (degrees: number) => string;
+    zoomedOut: string;
+    zoomedIn: string;
+    erasedNoElements: string;
+    elements: string;
+    updatedViewport: string;
+    transformedElements: (elemCount: number) => string;
+    resizeOutputCommand: (newSize: Rect2) => string;
+    addElementAction: (elemDescription: string) => string;
+    eraseAction: (elemDescription: string, numElems: number) => string;
+    selectedElements: (count: number) => string;
+}
+export declare const defaultCommandLocalization: CommandLocalization;

package/dist/src/commands/localization.js

@@ -0,0 +1,17 @@
+export const defaultCommandLocalization = {
+    updatedViewport: 'Transformed Viewport',
+    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
+    resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
+    addElementAction: (componentDescription) => `Added ${componentDescription}`,
+    eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
+    elements: 'Elements',
+    erasedNoElements: 'Erased nothing',
+    rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
+    movedLeft: 'Moved left',
+    movedUp: 'Moved up',
+    movedDown: 'Moved down',
+    movedRight: 'Moved right',
+    zoomedOut: 'Zoomed out',
+    zoomedIn: 'Zoomed in',
+    selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
+};

package/dist/src/components/AbstractComponent.d.ts

@@ -0,0 +1,19 @@
+import Command from '../commands/Command';
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer from '../rendering/AbstractRenderer';
+import { ImageComponentLocalization } from './localization';
+export default abstract class AbstractComponent {
+    protected lastChangedTime: number;
+    protected abstract contentBBox: Rect2;
+    zIndex: number;
+    private static zIndexCounter;
+    protected constructor();
+    getBBox(): Rect2;
+    abstract render(canvas: AbstractRenderer, visibleRect: Rect2): void;
+    abstract intersects(lineSegment: LineSegment2): boolean;
+    protected abstract applyTransformation(affineTransfm: Mat33): void;
+    transformBy(affineTransfm: Mat33): Command;
+    abstract description(localizationTable: ImageComponentLocalization): string;
+}