js-draw 0.1.3 → 0.1.6

package/dist/src/Editor.d.ts

@@ -14,7 +14,7 @@ import { EditorLocalization } from './localization';
 export interface EditorSettings {
     renderingMode: RenderingMode;
     localization: Partial<EditorLocalization>;
-    wheelEventsEnabled: boolean;
+    wheelEventsEnabled: boolean | 'only-if-focused';
 }
 export declare class Editor {
     private container;
@@ -48,6 +48,7 @@ export declare class Editor {
     rerender(showImageBounds?: boolean): void;
     drawWetInk(...path: RenderablePathSpec[]): void;
     clearWetInk(): void;
+    focus(): void;
     createHTMLOverlay(overlay: HTMLElement): {
         remove: () => void;
     };

package/dist/src/Editor.js

@@ -183,13 +183,24 @@ export class Editor {
             })) {
                 evt.preventDefault();
             }
+            else if (evt.key === 'Escape') {
+                this.renderingRegion.blur();
+            }
         });
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
-            // Process wheel events if the ctrl key is down -- we do want to handle
+            // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
             // pinch-zooming.
-            if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
-                return;
+            if (!evt.ctrlKey) {
+                if (!this.settings.wheelEventsEnabled) {
+                    return;
+                }
+                else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+                    const focusedChild = this.container.querySelector(':focus');
+                    if (!focusedChild) {
+                        return;
+                    }
+                }
             }
             if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
                 delta = delta.times(15);
@@ -200,7 +211,7 @@ export class Editor {
             if (evt.ctrlKey) {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
-            const pos = Vec2.of(evt.clientX, evt.clientY);
+            const pos = Vec2.of(evt.offsetX, evt.offsetY);
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.WheelEvt,
                 delta,
@@ -297,6 +308,10 @@ export class Editor {
     clearWetInk() {
         this.display.getWetInkRenderer().clear();
     }
+    // Focuses the region used for text input
+    focus() {
+        this.renderingRegion.focus();
+    }
     createHTMLOverlay(overlay) {
         overlay.classList.add('overlay');
         this.container.appendChild(overlay);

package/dist/src/SVGLoader.js

@@ -162,13 +162,17 @@ export default class SVGLoader {
         }
         const style = {
             size: fontSize,
-            fontFamily: computedStyles.fontFamily || 'sans',
+            fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
             renderingStyle: {
                 fill: Color4.fromString(computedStyles.fill)
             },
         };
+        let transformProperty = computedStyles.transform;
+        if (transformProperty === '' || transformProperty === 'none') {
+            transformProperty = elem.style.transform || 'none';
+        }
         // Compute transform matrix
-        let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+        let transform = Mat33.fromCSSMatrix(transformProperty);
         const supportedAttrs = [];
         const elemX = elem.getAttribute('x');
         const elemY = elem.getAttribute('y');

package/dist/src/Viewport.d.ts

@@ -26,7 +26,7 @@ export declare class Viewport {
     get visibleRect(): Rect2;
     screenToCanvas(screenPoint: Point2): Point2;
     canvasToScreen(canvasPoint: Point2): Point2;
-    resetTransform(newTransform: Mat33): void;
+    resetTransform(newTransform?: Mat33): void;
     get screenToCanvasTransform(): Mat33;
     get canvasToScreenTransform(): Mat33;
     getResolution(): Vec2;

package/dist/src/Viewport.js

@@ -36,7 +36,7 @@ export class Viewport {
     }
     // Updates the transformation directly. Using ViewportTransform is preferred.
     // [newTransform] should map from canvas coordinates to screen coordinates.
-    resetTransform(newTransform) {
+    resetTransform(newTransform = Mat33.identity) {
         this.transform = newTransform;
         this.inverseTransform = newTransform.inverse();
         this.notifier.dispatch(EditorEventType.ViewportChanged, {
@@ -93,17 +93,17 @@ export class Viewport {
         if (isNaN(toMakeVisible.size.magnitude())) {
             throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
         }
-        // Try to move the selection within the center 2/3rds of the viewport.
+        // Try to move the selection within the center 4/5ths of the viewport.
         const recomputeTargetRect = () => {
             // transform transforms objects on the canvas. As such, we need to invert it
             // to transform the viewport.
             const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
-            return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+            return visibleRect.transformedBoundingBox(Mat33.scaling2D(4 / 5, visibleRect.center));
         };
         let targetRect = recomputeTargetRect();
         const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
-        // Ensure that toMakeVisible is at least 1/8th of the visible region.
-        const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+        // 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

package/dist/src/components/Text.js

@@ -11,10 +11,12 @@ export default class Text extends AbstractComponent {
     }
     static applyTextStyles(ctx, style) {
         var _a, _b;
+        // Quote the font family if necessary.
+        const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
         ctx.font = [
             ((_a = style.size) !== null && _a !== void 0 ? _a : 12) + 'px',
             (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '',
-            `"${style.fontFamily.replace(/["]/g, '\\"')}"`,
+            `${fontFamily}`,
             style.fontWeight
         ].join(' ');
         ctx.textAlign = 'left';

package/dist/src/localization.d.ts

@@ -1,8 +1,9 @@
 import { CommandLocalization } from './commands/localization';
 import { ImageComponentLocalization } from './components/localization';
+import { TextRendererLocalization } from './rendering/localization';
 import { ToolbarLocalization } from './toolbar/localization';
 import { ToolLocalization } from './tools/localization';
-export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
     undoAnnouncement: (actionDescription: string) => string;
     redoAnnouncement: (actionDescription: string) => string;
     doneLoading: string;

package/dist/src/localization.js

@@ -1,5 +1,6 @@
 import { defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization } from './components/localization';
+import { defaultTextRendererLocalization } from './rendering/localization';
 import { defaultToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization } from './tools/localization';
-export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });
+export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), defaultTextRendererLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

package/dist/src/rendering/Display.d.ts

@@ -10,6 +10,7 @@ export default class Display {
     private parent;
     private dryInkRenderer;
     private wetInkRenderer;
+    private textRenderer;
     private cache;
     private resizeSurfacesCallback?;
     private flattenCallback?;
@@ -18,6 +19,7 @@ export default class Display {
     get height(): number;
     getCache(): RenderingCache;
     private initializeCanvasRendering;
+    private initializeTextRendering;
     startRerender(): AbstractRenderer;
     setDraftMode(draftMode: boolean): void;
     getDryInkRenderer(): AbstractRenderer;

package/dist/src/rendering/Display.js

@@ -3,6 +3,7 @@ import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
 import { Vec2 } from '../geometry/Vec2';
 import RenderingCache from './caching/RenderingCache';
+import TextOnlyRenderer from './renderers/TextOnlyRenderer';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -23,6 +24,8 @@ export default class Display {
         else {
             throw new Error(`Unknown rendering mode, ${mode}!`);
         }
+        this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
+        this.initializeTextRendering();
         const cacheBlockResolution = Vec2.of(600, 600);
         this.cache = new RenderingCache({
             createRenderer: () => {
@@ -104,6 +107,22 @@ export default class Display {
             dryInkCtx.drawImage(wetInkCanvas, 0, 0);
         };
     }
+    initializeTextRendering() {
+        const textRendererOutputContainer = document.createElement('div');
+        textRendererOutputContainer.classList.add('textRendererOutputContainer');
+        const rerenderButton = document.createElement('button');
+        rerenderButton.classList.add('rerenderButton');
+        rerenderButton.innerText = this.editor.localization.rerenderAsText;
+        const rerenderOutput = document.createElement('div');
+        rerenderOutput.ariaLive = 'polite';
+        rerenderButton.onclick = () => {
+            this.textRenderer.clear();
+            this.editor.image.render(this.textRenderer, this.editor.viewport);
+            rerenderOutput.innerText = this.textRenderer.getDescription();
+        };
+        textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+        this.editor.createHTMLOverlay(textRendererOutputContainer);
+    }
     // Clears the drawing surfaces and otherwise prepares for a rerender.
     startRerender() {
         var _a;

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

@@ -0,0 +1,5 @@
+export interface TextRendererLocalization {
+    textNode(content: string): string;
+    rerenderAsText: string;
+}
+export declare const defaultTextRendererLocalization: TextRendererLocalization;

package/dist/src/rendering/localization.js

@@ -0,0 +1,4 @@
+export const defaultTextRendererLocalization = {
+    textNode: (content) => `Text: ${content}`,
+    rerenderAsText: 'Re-render as text',
+};

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

@@ -0,0 +1,24 @@
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
+import { TextRendererLocalization } from '../localization';
+import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+export default class TextOnlyRenderer extends AbstractRenderer {
+    private localizationTable;
+    private descriptionBuilder;
+    constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
+    displaySize(): Vec3;
+    clear(): void;
+    getDescription(): string;
+    protected beginPath(_startPoint: Vec3): void;
+    protected endPath(_style: RenderingStyle): void;
+    protected lineTo(_point: Vec3): void;
+    protected moveTo(_point: Vec3): void;
+    protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
+    protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
+    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    isTooSmallToRender(rect: Rect2): boolean;
+    drawPoints(..._points: Vec3[]): void;
+}

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

@@ -0,0 +1,40 @@
+import { Vec2 } from '../../geometry/Vec2';
+import AbstractRenderer from './AbstractRenderer';
+// Outputs a description of what was rendered.
+export default class TextOnlyRenderer extends AbstractRenderer {
+    constructor(viewport, localizationTable) {
+        super(viewport);
+        this.localizationTable = localizationTable;
+        this.descriptionBuilder = [];
+    }
+    displaySize() {
+        // We don't have a graphical display, export a reasonable size.
+        return Vec2.of(500, 500);
+    }
+    clear() {
+        this.descriptionBuilder = [];
+    }
+    getDescription() {
+        return this.descriptionBuilder.join('\n');
+    }
+    beginPath(_startPoint) {
+    }
+    endPath(_style) {
+    }
+    lineTo(_point) {
+    }
+    moveTo(_point) {
+    }
+    traceCubicBezierCurve(_p1, _p2, _p3) {
+    }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) {
+    }
+    drawText(text, _transform, _style) {
+        this.descriptionBuilder.push(this.localizationTable.textNode(text));
+    }
+    isTooSmallToRender(rect) {
+        return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+    }
+    drawPoints(..._points) {
+    }
+}

package/dist/src/toolbar/HTMLToolbar.js

@@ -338,25 +338,51 @@ class TextToolWidget extends ToolbarWidget {
         return makeTextIcon(textStyle);
     }
     fillDropdown(dropdown) {
+        const fontRow = document.createElement('div');
         const colorRow = document.createElement('div');
+        const fontInput = document.createElement('select');
+        const fontLabel = document.createElement('label');
         const colorInput = document.createElement('input');
         const colorLabel = document.createElement('label');
+        const fontsInInput = new Set();
+        const addFontToInput = (fontName) => {
+            const option = document.createElement('option');
+            option.value = fontName;
+            option.textContent = fontName;
+            fontInput.appendChild(option);
+            fontsInInput.add(fontName);
+        };
+        fontLabel.innerText = this.localizationTable.fontLabel;
         colorLabel.innerText = this.localizationTable.colorLabel;
         colorInput.classList.add('coloris_input');
         colorInput.type = 'button';
         colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
         colorLabel.setAttribute('for', colorInput.id);
+        addFontToInput('monospace');
+        addFontToInput('serif');
+        addFontToInput('sans-serif');
+        fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+        fontLabel.setAttribute('for', fontInput.id);
+        fontInput.onchange = () => {
+            this.tool.setFontFamily(fontInput.value);
+        };
         colorInput.oninput = () => {
             this.tool.setColor(Color4.fromString(colorInput.value));
         };
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInput);
+        fontRow.appendChild(fontLabel);
+        fontRow.appendChild(fontInput);
         this.updateDropdownInputs = () => {
             const style = this.tool.getTextStyle();
             colorInput.value = style.renderingStyle.fill.toHexString();
+            if (!fontsInInput.has(style.fontFamily)) {
+                addFontToInput(style.fontFamily);
+            }
+            fontInput.value = style.fontFamily;
         };
         this.updateDropdownInputs();
-        dropdown.appendChild(colorRow);
+        dropdown.replaceChildren(colorRow, fontRow);
         return true;
     }
 }

package/dist/src/toolbar/icons.js

@@ -125,6 +125,7 @@ export const makeTextIcon = (textStyle) => {
     textNode.setAttribute('x', '50');
     textNode.setAttribute('y', '75');
     textNode.style.fontSize = '65px';
+    textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
     icon.appendChild(textNode);
     return icon;
 };

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

@@ -1,4 +1,5 @@
 export interface ToolbarLocalization {
+    fontLabel: string;
     anyDevicePanning: string;
     touchPanning: string;
     outlinedRectanglePen: string;

package/dist/src/toolbar/localization.js

@@ -5,6 +5,7 @@ export const defaultToolbarLocalization = {
     handTool: 'Pan',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
+    fontLabel: 'Font: ',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
     undo: 'Undo',

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

@@ -14,6 +14,7 @@ export default class TextTool extends BaseTool {
     private textInputElem;
     private textTargetPosition;
     private textMeasuringCtx;
+    private textRotation;
     constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
     private getTextAscent;
     private flushInput;
@@ -21,6 +22,7 @@ export default class TextTool extends BaseTool {
     private startTextInput;
     setEnabled(enabled: boolean): void;
     onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onGestureCancel(): void;
     private dispatchUpdateEvent;
     setFontFamily(fontFamily: string): void;
     setColor(color: Color4): void;

package/dist/src/tools/TextTool.js

@@ -58,7 +58,7 @@ export default class TextTool extends BaseTool {
             if (content === '') {
                 return;
             }
-            const textTransform = Mat33.translation(this.textTargetPosition).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()));
+            const textTransform = Mat33.translation(this.textTargetPosition).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33.zRotation(this.textRotation));
             const textComponent = new Text([content], textTransform, this.textStyle);
             const action = new EditorImage.AddElementCommand(textComponent);
             this.editor.dispatch(action);
@@ -70,7 +70,8 @@ export default class TextTool extends BaseTool {
             (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
             return;
         }
-        const textScreenPos = this.editor.viewport.canvasToScreen(this.textTargetPosition);
+        const viewport = this.editor.viewport;
+        const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
         this.textInputElem.type = 'text';
         this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
         this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
@@ -80,14 +81,19 @@ export default class TextTool extends BaseTool {
         this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
         this.textInputElem.style.position = 'relative';
         this.textInputElem.style.left = `${textScreenPos.x}px`;
+        this.textInputElem.style.top = `${textScreenPos.y}px`;
+        this.textInputElem.style.margin = '0';
+        const rotation = this.textRotation + viewport.getRotationAngle();
         const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
-        this.textInputElem.style.top = `${textScreenPos.y - ascent}px`;
+        this.textInputElem.style.transform = `rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
+        this.textInputElem.style.transformOrigin = 'top left';
     }
     startTextInput(textCanvasPos, initialText) {
         this.flushInput();
         this.textInputElem = document.createElement('input');
         this.textInputElem.value = initialText;
         this.textTargetPosition = textCanvasPos;
+        this.textRotation = -this.editor.viewport.getRotationAngle();
         this.updateTextInput();
         this.textInputElem.oninput = () => {
             var _a;
@@ -96,15 +102,25 @@ export default class TextTool extends BaseTool {
             }
         };
         this.textInputElem.onblur = () => {
-            this.flushInput();
+            // Don't remove the input within the context of a blur event handler.
+            // Doing so causes errors.
+            setTimeout(() => this.flushInput(), 0);
         };
         this.textInputElem.onkeyup = (evt) => {
+            var _a;
             if (evt.key === 'Enter') {
                 this.flushInput();
+                this.editor.focus();
+            }
+            else if (evt.key === 'Escape') {
+                // Cancel input.
+                (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+                this.textInputElem = null;
+                this.editor.focus();
             }
         };
         this.textEditOverlay.replaceChildren(this.textInputElem);
-        setTimeout(() => this.textInputElem.focus(), 100);
+        setTimeout(() => { var _a; return (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
     }
     setEnabled(enabled) {
         super.setEnabled(enabled);
@@ -123,6 +139,10 @@ export default class TextTool extends BaseTool {
         }
         return false;
     }
+    onGestureCancel() {
+        this.flushInput();
+        this.editor.focus();
+    }
     dispatchUpdateEvent() {
         this.updateTextInput();
         this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {

package/dist-test/test-dist-bundle.html

@@ -27,9 +27,16 @@
 				wheelEventsEnabled: false,
 			});
 			editor1.addToolbar();
+			editor1.loadFromSVG('<svg><text>Wheel events disabled.</text></svg>');
 
-			const editor2 = new jsdraw.Editor(document.body);
+			const editor2 = new jsdraw.Editor(document.body, {
+				wheelEventsEnabled: 'only-if-focused',
+			});
 			editor2.addToolbar();
+			editor2.loadFromSVG('<svg><text>Wheel events enabled, only if focused.</text></svg>');
+
+			const editor3 = new jsdraw.Editor(document.body);
+			editor3.addToolbar();
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.css

@@ -8,6 +8,7 @@
     --secondary-background-color: #faf;
     --primary-foreground-color: black;
     --secondary-foreground-color: black;
+	--primary-shadow-color: rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -17,6 +18,7 @@
 		--secondary-background-color: #607;
 		--primary-foreground-color: white;
 		--secondary-foreground-color: white;
+		--primary-shadow-color: rgba(250, 250, 250, 0.5);
 	}
 }
 
@@ -66,3 +68,13 @@
 	overflow: hidden;
 	pointer-events: none;
 }
+
+.imageEditorContainer .textRendererOutputContainer {
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
+.imageEditorContainer .textRendererOutputContainer:focus-within {
+	overflow: visible;
+}

package/src/Editor.ts

@@ -29,7 +29,7 @@ export interface EditorSettings {
 	// True if touchpad/mousewheel scrolling should scroll the editor instead of the document.
 	// This does not include pinch-zoom events.
 	// Defaults to true.
-	wheelEventsEnabled: boolean;
+	wheelEventsEnabled: boolean|'only-if-focused';
 }
 
 export class Editor {
@@ -245,16 +245,26 @@ export class Editor {
 				ctrlKey: evt.ctrlKey,
 			})) {
 				evt.preventDefault();
+			} else if (evt.key === 'Escape') {
+				this.renderingRegion.blur();
 			}
 		});
 
 		this.container.addEventListener('wheel', evt => {
 			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
 
-			// Process wheel events if the ctrl key is down -- we do want to handle
+			// Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
 			// pinch-zooming.
-			if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
-				return;
+			if (!evt.ctrlKey) {
+				if (!this.settings.wheelEventsEnabled) {
+					return;
+				} else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+					const focusedChild = this.container.querySelector(':focus');
+
+					if (!focusedChild) {
+						return;
+					}
+				}
 			}
 
 			if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
@@ -267,7 +277,7 @@ export class Editor {
 				delta = Vec3.of(0, 0, evt.deltaY);
 			}
 
-			const pos = Vec2.of(evt.clientX, evt.clientY);
+			const pos = Vec2.of(evt.offsetX, evt.offsetY);
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.WheelEvt,
 				delta,
@@ -399,6 +409,11 @@ export class Editor {
 		this.display.getWetInkRenderer().clear();
 	}
 
+	// Focuses the region used for text input
+	public focus() {
+		this.renderingRegion.focus();
+	}
+
 	public createHTMLOverlay(overlay: HTMLElement) {
 		overlay.classList.add('overlay');
 		this.container.appendChild(overlay);

package/src/SVGLoader.ts

@@ -198,14 +198,19 @@ export default class SVGLoader implements ImageLoader {
 		}
 		const style: TextStyle = {
 			size: fontSize,
-			fontFamily: computedStyles.fontFamily || 'sans',
+			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
 			renderingStyle: {
 				fill: Color4.fromString(computedStyles.fill)
 			},
 		};
 
+		let transformProperty = computedStyles.transform;
+		if (transformProperty === '' || transformProperty === 'none') {
+			transformProperty = elem.style.transform || 'none';
+		}
+
 		// Compute transform matrix
-		let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+		let transform = Mat33.fromCSSMatrix(transformProperty);
 		const supportedAttrs = [];
 		const elemX = elem.getAttribute('x');
 		const elemY = elem.getAttribute('y');

package/src/Viewport.ts

@@ -101,7 +101,7 @@ export class Viewport {
 
 	// Updates the transformation directly. Using ViewportTransform is preferred.
 	// [newTransform] should map from canvas coordinates to screen coordinates.
-	public resetTransform(newTransform: Mat33) {
+	public resetTransform(newTransform: Mat33 = Mat33.identity) {
 		this.transform = newTransform;
 		this.inverseTransform = newTransform.inverse();
 		this.notifier.dispatch(EditorEventType.ViewportChanged, {
@@ -181,19 +181,19 @@ export class Viewport {
 			throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
 		}
 
-		// Try to move the selection within the center 2/3rds of the viewport.
+		// Try to move the selection within the center 4/5ths of the viewport.
 		const recomputeTargetRect = () => {
 			// transform transforms objects on the canvas. As such, we need to invert it
 			// to transform the viewport.
 			const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
-			return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+			return visibleRect.transformedBoundingBox(Mat33.scaling2D(4/5, visibleRect.center));
 		};
 
 		let targetRect = recomputeTargetRect();
 		const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
 
-		// Ensure that toMakeVisible is at least 1/8th of the visible region.
-		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+		// 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.