js-draw 0.1.2 → 0.1.5

package/dist/src/tools/TextTool.js

@@ -0,0 +1,174 @@
+import Color4 from '../Color4';
+import Text from '../components/Text';
+import EditorImage from '../EditorImage';
+import Mat33 from '../geometry/Mat33';
+import { PointerDevice } from '../Pointer';
+import { EditorEventType } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+const overlayCssClass = 'textEditorOverlay';
+export default class TextTool extends BaseTool {
+    constructor(editor, description, localizationTable) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.kind = ToolType.Text;
+        this.textInputElem = null;
+        this.textTargetPosition = null;
+        this.textMeasuringCtx = null;
+        this.textStyle = {
+            size: 32,
+            fontFamily: 'sans-serif',
+            renderingStyle: {
+                fill: Color4.purple,
+            },
+        };
+        this.textEditOverlay = document.createElement('div');
+        this.textEditOverlay.classList.add(overlayCssClass);
+        this.editor.addStyleSheet(`
+			.${overlayCssClass} {
+				height: 0;
+				overflow: visible;
+			}
+
+			.${overlayCssClass} input {
+				background-color: rgba(0, 0, 0, 0);
+				border: none;
+				padding: 0;
+			}
+		`);
+        this.editor.createHTMLOverlay(this.textEditOverlay);
+        this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+    }
+    getTextAscent(text, style) {
+        var _a;
+        (_a = this.textMeasuringCtx) !== null && _a !== void 0 ? _a : (this.textMeasuringCtx = document.createElement('canvas').getContext('2d'));
+        if (this.textMeasuringCtx) {
+            Text.applyTextStyles(this.textMeasuringCtx, style);
+            return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
+        }
+        // Estimate
+        return style.size * 2 / 3;
+    }
+    flushInput() {
+        if (this.textInputElem && this.textTargetPosition) {
+            const content = this.textInputElem.value;
+            this.textInputElem.remove();
+            this.textInputElem = null;
+            if (content === '') {
+                return;
+            }
+            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);
+        }
+    }
+    updateTextInput() {
+        var _a, _b, _c;
+        if (!this.textInputElem || !this.textTargetPosition) {
+            (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+            return;
+        }
+        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;
+        this.textInputElem.style.fontVariant = (_b = this.textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+        this.textInputElem.style.fontWeight = (_c = this.textStyle.fontWeight) !== null && _c !== void 0 ? _c : '';
+        this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
+        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.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;
+            if (this.textInputElem) {
+                this.textInputElem.size = ((_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.value.length) || 10;
+            }
+        };
+        this.textInputElem.onblur = () => {
+            // 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(() => { var _a; return (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (!enabled) {
+            this.flushInput();
+        }
+        this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+    }
+    onPointerDown({ current, allPointers }) {
+        if (current.device === PointerDevice.Eraser) {
+            return false;
+        }
+        if (allPointers.length === 1) {
+            this.startTextInput(current.canvasPos, '');
+            return true;
+        }
+        return false;
+    }
+    onGestureCancel() {
+        this.flushInput();
+        this.editor.focus();
+    }
+    dispatchUpdateEvent() {
+        this.updateTextInput();
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setFontFamily(fontFamily) {
+        if (fontFamily !== this.textStyle.fontFamily) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { fontFamily: fontFamily });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setColor(color) {
+        if (!color.eq(this.textStyle.renderingStyle.fill)) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { renderingStyle: Object.assign(Object.assign({}, this.textStyle.renderingStyle), { fill: color }) });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setFontSize(size) {
+        if (size !== this.textStyle.size) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { size });
+            this.dispatchUpdateEvent();
+        }
+    }
+    getTextStyle() {
+        return this.textStyle;
+    }
+}

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

@@ -7,7 +7,8 @@ export declare enum ToolType {
     Selection = 1,
     Eraser = 2,
     PanZoom = 3,
-    UndoRedoShortcut = 4
+    Text = 4,
+    UndoRedoShortcut = 5
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/ToolController.js

@@ -6,13 +6,15 @@ import Eraser from './Eraser';
 import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
+import TextTool from './TextTool';
 export var ToolType;
 (function (ToolType) {
     ToolType[ToolType["Pen"] = 0] = "Pen";
     ToolType[ToolType["Selection"] = 1] = "Selection";
     ToolType[ToolType["Eraser"] = 2] = "Eraser";
     ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
-    ToolType[ToolType["UndoRedoShortcut"] = 4] = "UndoRedoShortcut";
+    ToolType[ToolType["Text"] = 4] = "Text";
+    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
@@ -27,6 +29,7 @@ export default class ToolController {
             new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
             // Highlighter-like pen with width=64
             new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+            new TextTool(editor, localization.textTool, localization),
         ];
         this.tools = [
             panZoomTool,

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

@@ -1,11 +1,13 @@
 export interface ToolLocalization {
-    RightClickDragPanTool: string;
+    rightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+    textTool: string;
+    enterTextToInsert: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -5,7 +5,9 @@ export const defaultToolLocalization = {
     touchPanTool: 'Touch Panning',
     twoFingerPanZoomTool: 'Panning and Zooming',
     undoRedoTool: 'Undo/Redo',
-    RightClickDragPanTool: 'Right-click drag',
+    rightClickDragPanTool: 'Right-click drag',
+    textTool: 'Text',
+    enterTextToInsert: 'Text to insert',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

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.2",
+  "version": "0.1.5",
   "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) {
@@ -374,9 +384,11 @@ export class Editor {
 		// Draw a rectangle around the region that will be visible on save
 		const renderer = this.display.getDryInkRenderer();
 
+		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
+
 		if (showImageBounds) {
 			const exportRectFill = { fill: Color4.fromHex('#44444455') };
-			const exportRectStrokeWidth = 12;
+			const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
 			renderer.drawRect(
 				this.importExportViewport.visibleRect,
 				exportRectStrokeWidth,
@@ -384,8 +396,6 @@ export class Editor {
 			);
 		}
 
-		//this.image.render(renderer, this.viewport);
-		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 		this.rerenderQueued = false;
 	}
 
@@ -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

@@ -2,9 +2,12 @@ import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
+import Text, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
+import Mat33 from './geometry/Mat33';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
+import { Vec2 } from './geometry/Vec2';
 import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
@@ -15,10 +18,14 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 
 // Key to retrieve unrecognised attributes from an AbstractComponent
 export const svgAttributesDataKey = 'svgAttrs';
+export const svgStyleAttributesDataKey = 'svgStyleAttrs';
 
 // [key, value]
 export type SVGLoaderUnknownAttribute = [ string, string ];
 
+// [key, value, priority]
+export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, priority?: string };
+
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -97,10 +104,11 @@ export default class SVGLoader implements ImageLoader {
 	private attachUnrecognisedAttrs(
 		elem: AbstractComponent,
 		node: SVGElement,
-		supportedAttrs: Set<string>
+		supportedAttrs: Set<string>,
+		supportedStyleAttrs?: Set<string>
 	) {
 		for (const attr of node.getAttributeNames()) {
-			if (supportedAttrs.has(attr)) {
+			if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
 				continue;
 			}
 
@@ -108,6 +116,27 @@ export default class SVGLoader implements ImageLoader {
 				[ attr, node.getAttribute(attr) ] as SVGLoaderUnknownAttribute,
 			);
 		}
+
+		if (supportedStyleAttrs) {
+			for (const attr of node.style) {
+				if (attr === '' || !attr) {
+					continue;
+				}
+
+				if (supportedStyleAttrs.has(attr)) {
+					continue;
+				}
+
+				// TODO: Do we need special logic for !important properties?
+				elem.attachLoadSaveData(svgStyleAttributesDataKey, 
+					{
+						key: attr,
+						value: node.style.getPropertyValue(attr),
+						priority: node.style.getPropertyPriority(attr)
+					} as SVGLoaderUnknownStyleAttribute
+				);
+			}
+		}
 	}
 
 	// Adds a stroke with a single path
@@ -115,9 +144,14 @@ export default class SVGLoader implements ImageLoader {
 		let elem: AbstractComponent;
 		try {
 			const strokeData = this.strokeDataFromElem(node);
+
 			elem = new Stroke(strokeData);
+
+			const supportedStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
 			this.attachUnrecognisedAttrs(
-				elem, node, new Set([ 'stroke', 'fill', 'stroke-width', 'd' ]),
+				elem, node,
+				new Set([ ...supportedStyleAttrs, 'd' ]),
+				new Set(supportedStyleAttrs)
 			);
 		} catch (e) {
 			console.error(
@@ -131,6 +165,80 @@ export default class SVGLoader implements ImageLoader {
 		this.onAddComponent?.(elem);
 	}
 
+	private makeText(elem: SVGTextElement|SVGTSpanElement): Text {
+		const contentList: Array<Text|string> = [];
+		for (const child of elem.childNodes) {
+			if (child.nodeType === Node.TEXT_NODE) {
+				contentList.push(child.nodeValue ?? '');
+			} else if (child.nodeType === Node.ELEMENT_NODE) {
+				const subElem = child as SVGElement;
+				if (subElem.tagName.toLowerCase() === 'tspan') {
+					contentList.push(this.makeText(subElem as SVGTSpanElement));
+				} else {
+					throw new Error(`Unrecognized text child element: ${subElem}`);
+				}
+			} else {
+				throw new Error(`Unrecognized text child node: ${child}.`);
+			}
+		}
+
+		// Compute styles.
+		const computedStyles = window.getComputedStyle(elem);
+		const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
+
+		const supportedStyleAttrs = [
+			'fontFamily',
+			'fill',
+			'transform'
+		];
+		let fontSize = 12;
+		if (fontSizeMatch) {
+			supportedStyleAttrs.push('fontSize');
+			fontSize = parseFloat(fontSizeMatch[1]);
+		}
+		const style: TextStyle = {
+			size: fontSize,
+			fontFamily: computedStyles.fontFamily || 'sans-serif',
+			renderingStyle: {
+				fill: Color4.fromString(computedStyles.fill)
+			},
+		};
+
+		// Compute transform matrix
+		let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+		const supportedAttrs = [];
+		const elemX = elem.getAttribute('x');
+		const elemY = elem.getAttribute('y');
+		if (elemX && elemY) {
+			const x = parseFloat(elemX);
+			const y = parseFloat(elemY);
+			if (!isNaN(x) && !isNaN(y)) {
+				supportedAttrs.push('x', 'y');
+				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+			}
+		}
+
+		const result = new Text(contentList, transform, style);
+		this.attachUnrecognisedAttrs(
+			result,
+			elem,
+			new Set(supportedAttrs),
+			new Set(supportedStyleAttrs)
+		);
+
+		return result;
+	}
+
+	private addText(elem: SVGTextElement|SVGTSpanElement) {
+		try {
+			const textElem = this.makeText(elem);
+			this.onAddComponent?.(textElem);
+		} catch (e) {
+			console.error('Invalid text object in node', elem, '. Adding as an unknown object. Error:', e);
+			this.addUnknownNode(elem);
+		}
+	}
+
 	private addUnknownNode(node: SVGElement) {
 		const component = new UnknownSVGObject(node);
 		this.onAddComponent?.(component);
@@ -142,13 +250,14 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		const components = viewBoxAttr.split(/[ \t,]/);
+		const components = viewBoxAttr.split(/[ \t\n,]+/);
 		const x = parseFloat(components[0]);
 		const y = parseFloat(components[1]);
 		const width = parseFloat(components[2]);
 		const height = parseFloat(components[3]);
 
 		if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
+			console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
 			return;
 		}
 
@@ -162,6 +271,7 @@ export default class SVGLoader implements ImageLoader {
 
 	private async visit(node: Element) {
 		this.totalToProcess += node.childElementCount;
+		let visitChildren = true;
 
 		switch (node.tagName.toLowerCase()) {
 		case 'g':
@@ -170,6 +280,10 @@ export default class SVGLoader implements ImageLoader {
 		case 'path':
 			this.addPath(node as SVGPathElement);
 			break;
+		case 'text':
+			this.addText(node as SVGTextElement);
+			visitChildren = false;
+			break;
 		case 'svg':
 			this.updateViewBox(node as SVGSVGElement);
 			this.updateSVGAttrs(node as SVGSVGElement);
@@ -184,8 +298,10 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		for (const child of node.children) {
-			await this.visit(child);
+		if (visitChildren) {
+			for (const child of node.children) {
+				await this.visit(child);
+			}
 		}
 
 		this.processedCount ++;
@@ -265,8 +381,10 @@ export default class SVGLoader implements ImageLoader {
 			'http://www.w3.org/2000/svg', 'svg'
 		);
 		svgElem.innerHTML = text;
+		sandboxDoc.body.appendChild(svgElem);
 
 		return new SVGLoader(svgElem, () => {
+			svgElem.remove();
 			sandbox.remove();
 		});
 	}

package/src/Viewport.ts

@@ -170,7 +170,7 @@ export class Viewport {
 	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
 	// centered in the viewport.
 	// Returns null if no transformation is necessary
-	public zoomTo(toMakeVisible: Rect2): Command {
+	public zoomTo(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Command {
 		let transform = Mat33.identity;
 
 		if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
@@ -181,21 +181,21 @@ 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 3/4ths 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(3 / 4, 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;
+		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.25;
 
-		if (largerThanTarget || muchSmallerThanTarget) {
+		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)(

package/src/components/SVGGlobalAttributesObject.ts

@@ -20,7 +20,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 			return;
 		}
 
-		console.log('Rendering to SVG.', this.attrs);
 		for (const [ attr, value ] of this.attrs) {
 			canvas.setRootSVGAttribute(attr, value);
 		}