js-draw 0.9.1 → 0.9.2

package/dist/src/Editor.d.ts

@@ -199,7 +199,6 @@ export declare class Editor {
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
-    private renderAllWithTransform;
     loadFrom(loader: ImageLoader): Promise<void>;
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;

package/dist/src/Editor.js

@@ -639,8 +639,7 @@ export class Editor {
         canvas.height = resolution.y;
         const ctx = canvas.getContext('2d');
         const renderer = new CanvasRenderer(ctx, this.importExportViewport);
-        // Render everything with no transform (0,0) should be (0,0) in the output image
-        this.renderAllWithTransform(renderer, this.importExportViewport, Mat33.identity);
+        this.image.renderAll(renderer);
         const dataURL = canvas.toDataURL(format);
         return dataURL;
     }
@@ -649,7 +648,12 @@ export class Editor {
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
         const renderer = new SVGRenderer(result, importExportViewport);
-        this.renderAllWithTransform(renderer, importExportViewport);
+        const origTransform = this.importExportViewport.canvasToScreenTransform;
+        // Render with (0,0) at (0,0) — we'll handle translation with
+        // the viewBox property.
+        importExportViewport.resetTransform(Mat33.identity);
+        this.image.renderAll(renderer);
+        importExportViewport.resetTransform(origTransform);
         // Just show the main region
         const rect = importExportViewport.visibleRect;
         result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
@@ -662,18 +666,6 @@ export class Editor {
         result.setAttribute('xmlns', svgNameSpace);
         return result;
     }
-    // Renders everything in this' image to `renderer`, but first transforming the given `viewport`
-    // such that its transform is `transform`. The given `viewport`'s transform is restored before this method
-    // returns.
-    //
-    // For example, rendering with `transform = Mat33.identity` *sets* `viewport`'s transform to `Mat33.identity`,
-    // renders everything in this' image to `renderer`, then restores `viewport`'s transform to whatever it was before.
-    renderAllWithTransform(renderer, viewport, transform = Mat33.identity) {
-        const origTransform = this.importExportViewport.canvasToScreenTransform;
-        viewport.resetTransform(transform);
-        this.image.renderAll(renderer);
-        viewport.resetTransform(origTransform);
-    }
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);

package/dist/src/SVGLoader.js

@@ -11,7 +11,7 @@ import Color4 from './Color4';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import TextComponent from './components/Text';
+import TextComponent from './components/TextComponent';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';

package/dist/src/Viewport.js

@@ -128,9 +128,7 @@ export class Viewport {
         // Ensure that toMakeVisible is at least 1/3rd of the visible region.
         const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1 / 3;
         if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
-            // If larger than the target, ensure that the longest axis is visible.
-            // If smaller, shrink the visible rectangle as much as possible
-            const multiplier = (largerThanTarget ? Math.max : Math.min)(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
+            const multiplier = Math.max(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
             const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
             const viewportContentTransform = visibleRectTransform.inverse();
             transform = transform.rightMul(viewportContentTransform);

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

@@ -1,8 +1,8 @@
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 export declare abstract class Command {
-    abstract apply(editor: Editor): void;
-    abstract unapply(editor: Editor): void;
+    abstract apply(editor: Editor): Promise<void> | void;
+    abstract unapply(editor: Editor): Promise<void> | void;
     onDrop(_editor: Editor): void;
     abstract description(editor: Editor, localizationTable: EditorLocalization): string;
     static union(a: Command, b: Command): Command;

package/dist/src/commands/uniteCommands.js

@@ -6,24 +6,33 @@ class NonSerializableUnion extends Command {
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
     }
+    static waitForAll(commands) {
+        // If any are Promises...
+        if (commands.some(command => command && command['then'])) {
+            console.log('waiting...');
+            // Wait for all commands to finish.
+            return Promise.all(commands)
+                // Ensure we return a Promise<void> and not a Promise<void[]>
+                .then(() => { });
+        }
+        return;
+    }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
-            for (const command of this.commands) {
-                command.apply(editor);
-            }
+            const results = this.commands.map(cmd => cmd.apply(editor));
+            return NonSerializableUnion.waitForAll(results);
         }
         else {
-            editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+            return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
         }
     }
     unapply(editor) {
         if (this.applyChunkSize === undefined) {
-            for (const command of this.commands) {
-                command.unapply(editor);
-            }
+            const results = this.commands.map(cmd => cmd.unapply(editor));
+            return NonSerializableUnion.waitForAll(results);
         }
         else {
-            editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+            return editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
         }
     }
     description(editor, localizationTable) {
@@ -63,10 +72,10 @@ class SerializableUnion extends SerializableCommand {
         };
     }
     apply(editor) {
-        this.nonserializableCommand.apply(editor);
+        return this.nonserializableCommand.apply(editor);
     }
     unapply(editor) {
-        this.nonserializableCommand.unapply(editor);
+        return this.nonserializableCommand.unapply(editor);
     }
     description(editor, localizationTable) {
         return this.nonserializableCommand.description(editor, localizationTable);

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

@@ -5,6 +5,6 @@ export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import TextComponent from './Text';
+import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -5,6 +5,6 @@ export { default as StrokeSmoother } from './util/StrokeSmoother';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import TextComponent from './Text';
+import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,5 +1,5 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand } from '../../math/Path';
 import Rect2 from '../../math/Rect2';

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import TextComponent from '../../components/Text';
+import TextComponent from '../../components/TextComponent';
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {

package/dist/src/rendering/renderers/DummyRenderer.d.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,5 +1,5 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

package/dist/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import Vec3 from '../../math/Vec3';

package/dist/src/rendering/renderers/TextOnlyRenderer.js

@@ -22,8 +22,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     getDescription() {
         return [
             this.localizationTable.pathNodeCount(this.pathCount),
-            ...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
-            ...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
+            ...(this.textNodeCount > 0 ? [this.localizationTable.textNodeCount(this.textNodeCount)] : []),
+            ...(this.imageNodeCount > 0 ? [this.localizationTable.imageNodeCount(this.imageNodeCount)] : []),
             ...this.descriptionBuilder
         ].join('\n');
     }

package/dist/src/toolbar/IconProvider.d.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import Pen from '../tools/Pen';
 declare type IconType = SVGSVGElement | HTMLImageElement;
 export default class IconProvider {

package/dist/src/tools/FindTool.d.ts

@@ -0,0 +1,21 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+export declare const cssPrefix = "find-tool";
+export default class FindTool extends BaseTool {
+    private editor;
+    private overlay;
+    private searchInput;
+    private currentMatchIdx;
+    constructor(editor: Editor);
+    private getMatches;
+    private focusCurrentMatch;
+    private toNextMatch;
+    private toPrevMatch;
+    private fillOverlay;
+    private isVisible;
+    private setVisible;
+    private toggleVisible;
+    onKeyPress(event: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+}

package/dist/src/tools/FindTool.js

@@ -0,0 +1,113 @@
+// Displays a find dialog that allows the user to search for and focus text. 
+//
+// @packageDocumentation
+import TextComponent from '../components/TextComponent';
+import BaseTool from './BaseTool';
+export const cssPrefix = 'find-tool';
+export default class FindTool extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.findLabel);
+        this.editor = editor;
+        this.currentMatchIdx = 0;
+        this.overlay = document.createElement('div');
+        this.fillOverlay();
+        editor.createHTMLOverlay(this.overlay);
+        this.overlay.style.display = 'none';
+        this.overlay.classList.add(`${cssPrefix}-overlay`);
+    }
+    getMatches(searchFor) {
+        searchFor = searchFor.toLocaleLowerCase();
+        const allTextComponents = this.editor.image.getAllElements()
+            .filter(elem => elem instanceof TextComponent);
+        const matches = allTextComponents.filter(text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1);
+        return matches.map(match => match.getBBox());
+    }
+    focusCurrentMatch() {
+        const matches = this.getMatches(this.searchInput.value);
+        let matchIdx = this.currentMatchIdx % matches.length;
+        if (matchIdx < 0) {
+            matchIdx = matches.length + matchIdx;
+        }
+        if (matchIdx < matches.length) {
+            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true));
+            this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
+        }
+    }
+    toNextMatch() {
+        this.currentMatchIdx++;
+        this.focusCurrentMatch();
+    }
+    toPrevMatch() {
+        this.currentMatchIdx--;
+        this.focusCurrentMatch();
+    }
+    fillOverlay() {
+        const label = document.createElement('label');
+        this.searchInput = document.createElement('input');
+        const nextBtn = document.createElement('button');
+        const closeBtn = document.createElement('button');
+        // Math.random() ensures that the ID is unique (to allow us to refer to it
+        // with an htmlFor).
+        this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
+        label.htmlFor = this.searchInput.getAttribute('id');
+        label.innerText = this.editor.localization.findLabel;
+        nextBtn.innerText = this.editor.localization.toNextMatch;
+        closeBtn.innerText = this.editor.localization.closeFindDialog;
+        this.searchInput.onkeydown = (ev) => {
+            if (ev.key === 'Enter') {
+                if (ev.shiftKey) {
+                    this.toPrevMatch();
+                }
+                else {
+                    this.toNextMatch();
+                }
+            }
+            else if (ev.key === 'Escape') {
+                this.setVisible(false);
+            }
+            else if (ev.key === 'f' && ev.ctrlKey) {
+                ev.preventDefault();
+                this.toggleVisible();
+            }
+        };
+        nextBtn.onclick = () => {
+            this.toNextMatch();
+        };
+        closeBtn.onclick = () => {
+            this.setVisible(false);
+        };
+        this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
+    }
+    isVisible() {
+        return this.overlay.style.display !== 'none';
+    }
+    setVisible(visible) {
+        if (visible !== this.isVisible()) {
+            this.overlay.style.display = visible ? 'block' : 'none';
+            if (visible) {
+                this.searchInput.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
+            }
+            else {
+                this.editor.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
+            }
+        }
+    }
+    toggleVisible() {
+        this.setVisible(!this.isVisible());
+    }
+    onKeyPress(event) {
+        if (event.ctrlKey && event.key === 'f') {
+            this.toggleVisible();
+            return true;
+        }
+        return false;
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (enabled) {
+            this.setVisible(false);
+        }
+    }
+}

package/dist/src/tools/SelectionTool/Selection.js

@@ -108,13 +108,13 @@ export default class Selection {
             cmd.unapply(this.editor);
         });
         const fullTransform = this.transform;
-        const currentTransfmCommands = this.computeTransformCommands();
+        const selectedElems = this.selectedElems;
         // Reset for the next drag
         this.transformCommands = [];
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = Mat33.identity;
         // Make the commands undo-able
-        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, currentTransfmCommands, fullTransform));
+        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
@@ -296,26 +296,56 @@ export default class Selection {
 }
 _a = Selection;
 (() => {
-    SerializableCommand.register('selection-tool-transform', (json, editor) => {
+    SerializableCommand.register('selection-tool-transform', (json, _editor) => {
+        var _b;
         // The selection box is lost when serializing/deserializing. No need to store box rotation
         const fullTransform = new Mat33(...json.transform);
-        const commands = json.commands.map(data => SerializableCommand.deserialize(data, editor));
-        return new _a.ApplyTransformationCommand(null, commands, fullTransform);
+        const elemIds = ((_b = json.elems) !== null && _b !== void 0 ? _b : []);
+        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
     });
 })();
 Selection.ApplyTransformationCommand = class extends SerializableCommand {
-    constructor(selection, currentTransfmCommands, fullTransform) {
+    constructor(selection, 
+    // If a `string[]`, selectedElems is a list of element IDs.
+    selectedElems, 
+    // Full transformation used to transform elements.
+    fullTransform) {
         super('selection-tool-transform');
         this.selection = selection;
-        this.currentTransfmCommands = currentTransfmCommands;
         this.fullTransform = fullTransform;
+        const isIDList = (arr) => {
+            return typeof arr[0] === 'string';
+        };
+        // If a list of element IDs,
+        if (isIDList(selectedElems)) {
+            this.selectedElemIds = selectedElems;
+        }
+        else {
+            this.selectedElemIds = selectedElems.map(elem => elem.getId());
+            this.transformCommands = selectedElems.map(elem => {
+                return elem.transformBy(this.fullTransform);
+            });
+        }
+    }
+    resolveToElems(editor) {
+        if (this.transformCommands) {
+            return;
+        }
+        this.transformCommands = this.selectedElemIds.map(id => {
+            const elem = editor.image.lookupElement(id);
+            if (!elem) {
+                throw new Error(`Unable to find element with ID, ${id}.`);
+            }
+            return elem.transformBy(this.fullTransform);
+        });
     }
     apply(editor) {
         var _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
+            this.resolveToElems(editor);
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform, false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
+            yield editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
             (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity, false);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
@@ -324,9 +354,10 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
     unapply(editor) {
         var _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
+            this.resolveToElems(editor);
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
+            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
             (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
@@ -334,11 +365,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
     }
     serializeToJSON() {
         return {
-            commands: this.currentTransfmCommands.map(command => command.serialize()),
+            elems: this.selectedElemIds,
             transform: this.fullTransform.toArray(),
         };
     }
     description(_editor, localizationTable) {
-        return localizationTable.transformedElements(this.currentTransfmCommands.length);
+        return localizationTable.transformedElements(this.selectedElemIds.length);
     }
 };

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -8,7 +8,7 @@ import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
-import TextComponent from '../../components/Text';
+import TextComponent from '../../components/TextComponent';
 export const cssPrefix = 'selection-tool-';
 // {@inheritDoc SelectionTool!}
 export default class SelectionTool extends BaseTool {

package/dist/src/tools/TextTool.d.ts

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';

package/dist/src/tools/TextTool.js

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import TextComponent from '../components/Text';
+import TextComponent from '../components/TextComponent';
 import EditorImage from '../EditorImage';
 import Rect2 from '../math/Rect2';
 import Mat33 from '../math/Mat33';

package/dist/src/tools/ToolController.js

@@ -12,6 +12,7 @@ import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
+import FindTool from './FindTool';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -40,6 +41,7 @@ export default class ToolController {
             new UndoRedoShortcut(editor),
             new ToolbarShortcutHandler(editor),
             new ToolSwitcherShortcut(editor),
+            new FindTool(editor),
             new PasteHandler(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));

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

@@ -12,6 +12,12 @@ export interface ToolLocalization {
     enterTextToInsert: string;
     changeTool: string;
     pasteHandler: string;
+    findLabel: string;
+    toNextMatch: string;
+    closeFindDialog: string;
+    findDialogShown: string;
+    findDialogHidden: string;
+    focusedFoundText: (currentMatchNumber: number, totalMatches: number) => string;
     anyDevicePanning: string;
     copied: (count: number, description: string) => string;
     pasted: (count: number, description: string) => string;

package/dist/src/tools/localization.js

@@ -12,6 +12,12 @@ export const defaultToolLocalization = {
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',
     pasteHandler: 'Copy paste handler',
+    findLabel: 'Find',
+    toNextMatch: 'Next',
+    closeFindDialog: 'Close',
+    findDialogShown: 'Find dialog shown',
+    findDialogHidden: 'Find dialog hidden',
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
     anyDevicePanning: 'Any device panning',
     copied: (count, description) => `Copied ${count} ${description}`,
     pasted: (count, description) => `Pasted ${count} ${description}`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.9.1",
+	"version": "0.9.2",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",
@@ -72,6 +72,7 @@
 		"linter-precommit": "eslint --fix --ext .js --ext .ts",
 		"lint-staged": "lint-staged",
 		"lint-ci": "eslint . --max-warnings=0 --ext .js --ext .ts",
+		"build-translation-template": "ts-node ./build_tools/buildTranslationTemplate.ts",
 		"prepare": "husky install && yarn build",
 		"prepack": "yarn build && yarn test && pinst --disable",
 		"postpack": "pinst --enable"

package/src/Editor.css

@@ -1,6 +1,7 @@
 
 @import url('./toolbar/toolbar.css');
 @import url('./tools/SelectionTool/SelectionTool.css');
+@import url('./tools/FindTool.css');
 
 .imageEditorContainer {
 	/* Deafult colors for the editor */

package/src/Editor.toSVG.test.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from './components/Text';
+import { TextStyle } from './components/TextComponent';
 import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
 import createEditor from './testing/createEditor';
 

package/src/Editor.ts

@@ -27,7 +27,7 @@ import EventDispatcher from './EventDispatcher';
 import { Point2, Vec2 } from './math/Vec2';
 import Vec3 from './math/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import AbstractRenderer, { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
 import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
@@ -831,7 +831,7 @@ export class Editor {
 	// The export resolution is the same as the size of the drawing canvas.
 	public toDataURL(format: 'image/png'|'image/jpeg'|'image/webp' = 'image/png'): string {
 		const canvas = document.createElement('canvas');
-		
+
 		const resolution = this.importExportViewport.getResolution();
 
 		canvas.width = resolution.x;
@@ -840,8 +840,7 @@ export class Editor {
 		const ctx = canvas.getContext('2d')!;
 		const renderer = new CanvasRenderer(ctx, this.importExportViewport);
 
-		// Render everything with no transform (0,0) should be (0,0) in the output image
-		this.renderAllWithTransform(renderer, this.importExportViewport, Mat33.identity);
+		this.image.renderAll(renderer);
 
 		const dataURL = canvas.toDataURL(format);
 		return dataURL;
@@ -853,7 +852,15 @@ export class Editor {
 		const result = document.createElementNS(svgNameSpace, 'svg');
 		const renderer = new SVGRenderer(result, importExportViewport);
 
-		this.renderAllWithTransform(renderer, importExportViewport);
+		const origTransform = this.importExportViewport.canvasToScreenTransform;
+		// Render with (0,0) at (0,0) — we'll handle translation with
+		// the viewBox property.
+		importExportViewport.resetTransform(Mat33.identity);
+
+		this.image.renderAll(renderer);
+
+		importExportViewport.resetTransform(origTransform);
+
 
 		// Just show the main region
 		const rect = importExportViewport.visibleRect;
@@ -871,23 +878,6 @@ export class Editor {
 		return result;
 	}
 
-	// Renders everything in this' image to `renderer`, but first transforming the given `viewport`
-	// such that its transform is `transform`. The given `viewport`'s transform is restored before this method
-	// returns.
-	//
-	// For example, rendering with `transform = Mat33.identity` *sets* `viewport`'s transform to `Mat33.identity`,
-	// renders everything in this' image to `renderer`, then restores `viewport`'s transform to whatever it was before.
-	private renderAllWithTransform(
-		renderer: AbstractRenderer, viewport: Viewport, transform: Mat33 = Mat33.identity
-	): void {
-		const origTransform = this.importExportViewport.canvasToScreenTransform;
-		viewport.resetTransform(transform);
-
-		this.image.renderAll(renderer);
-
-		viewport.resetTransform(origTransform);
-	}
-
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
 		this.display.setDraftMode(true);