js-draw 0.8.0 → 0.9.1

package/dist/src/toolbar/widgets/HandToolWidget.js

@@ -57,7 +57,7 @@ const makeZoomControl = (localizationTable, editor) => {
 };
 class ZoomWidget extends BaseWidget {
     constructor(editor, localizationTable) {
-        super(editor, localizationTable);
+        super(editor, 'zoom-widget', localizationTable);
         // Make it possible to open the dropdown, even if this widget isn't selected.
         this.container.classList.add('dropdownShowable');
     }
@@ -76,8 +76,8 @@ class ZoomWidget extends BaseWidget {
     }
 }
 class HandModeWidget extends BaseWidget {
-    constructor(editor, localizationTable, tool, flag, makeIcon, title) {
-        super(editor, localizationTable);
+    constructor(editor, tool, flag, makeIcon, title, localizationTable) {
+        super(editor, `pan-mode-${flag}`, localizationTable);
         this.tool = tool;
         this.flag = flag;
         this.makeIcon = makeIcon;
@@ -94,13 +94,7 @@ class HandModeWidget extends BaseWidget {
         this.setSelected(false);
     }
     setModeFlag(enabled) {
-        const mode = this.tool.getMode();
-        if (enabled) {
-            this.tool.setMode(mode | this.flag);
-        }
-        else {
-            this.tool.setMode(mode & ~this.flag);
-        }
+        this.tool.setModeEnabled(this.flag, enabled);
     }
     handleClick() {
         this.setModeFlag(!this.isSelected());
@@ -122,7 +116,7 @@ export default class HandToolWidget extends BaseToolWidget {
     overridePanZoomTool, localizationTable) {
         const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
         const tool = primaryHandTool !== null && primaryHandTool !== void 0 ? primaryHandTool : overridePanZoomTool;
-        super(editor, tool, localizationTable);
+        super(editor, tool, 'hand-tool-widget', localizationTable);
         this.overridePanZoomTool = overridePanZoomTool;
         // Only allow toggling a hand tool if we're using the primary hand tool and not the override
         // hand tool for this button.
@@ -132,8 +126,10 @@ export default class HandToolWidget extends BaseToolWidget {
             this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        this.touchPanningWidget = new HandModeWidget(editor, localizationTable, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning);
-        this.addSubWidget(this.touchPanningWidget);
+        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        this.addSubWidget(touchPanningWidget);
+        this.addSubWidget(rotationLockWidget);
         this.addSubWidget(new ZoomWidget(editor, localizationTable));
     }
     static getPrimaryHandTool(toolController) {
@@ -160,4 +156,17 @@ export default class HandToolWidget extends BaseToolWidget {
             super.setSelected(selected);
         }
     }
+    serializeState() {
+        const toolMode = this.overridePanZoomTool.getMode();
+        return Object.assign(Object.assign({}, super.serializeState()), { touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures, rotationLocked: toolMode & PanZoomMode.RotationLocked });
+    }
+    deserializeFrom(state) {
+        if (state.touchPanning !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+        }
+        if (state.rotationLocked !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
+        }
+        super.deserializeFrom(state);
+    }
 }

package/dist/src/toolbar/widgets/PenToolWidget.d.ts

@@ -4,18 +4,24 @@ import Pen from '../../tools/Pen';
 import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 export interface PenTypeRecord {
     name: string;
+    id: string;
     factory: ComponentBuilderFactory;
 }
 export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     protected penTypes: PenTypeRecord[];
-    constructor(editor: Editor, tool: Pen, localization: ToolbarLocalization);
+    constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);
     protected getTitle(): string;
+    private getCurrentPenTypeIdx;
+    private getCurrentPenType;
     protected createIcon(): Element;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }

package/dist/src/toolbar/widgets/PenToolWidget.js

@@ -7,35 +7,42 @@ import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
+import Color4 from '../../Color4';
 export default class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
-        super(editor, tool, localization);
+        super(editor, tool, 'pen', localization);
         this.tool = tool;
         this.updateInputs = () => { };
         // Default pen types
         this.penTypes = [
             {
-                name: localization.pressureSensitiveFreehandPen,
+                name: this.localizationTable.pressureSensitiveFreehandPen,
+                id: 'pressure-sensitive-pen',
                 factory: makePressureSensitiveFreehandLineBuilder,
             },
             {
-                name: localization.freehandPen,
+                name: this.localizationTable.freehandPen,
+                id: 'freehand-pen',
                 factory: makeFreehandLineBuilder,
             },
             {
-                name: localization.arrowPen,
+                name: this.localizationTable.arrowPen,
+                id: 'arrow',
                 factory: makeArrowBuilder,
             },
             {
-                name: localization.linePen,
+                name: this.localizationTable.linePen,
+                id: 'line',
                 factory: makeLineBuilder,
             },
             {
-                name: localization.filledRectanglePen,
+                name: this.localizationTable.filledRectanglePen,
+                id: 'filled-rectangle',
                 factory: makeFilledRectangleBuilder,
             },
             {
-                name: localization.outlinedRectanglePen,
+                name: this.localizationTable.outlinedRectanglePen,
+                id: 'outlined-rectangle',
                 factory: makeOutlinedRectangleBuilder,
             },
         ];
@@ -53,6 +60,27 @@ export default class PenToolWidget extends BaseToolWidget {
     getTitle() {
         return this.targetTool.description;
     }
+    // Return the index of this tool's stroke factory in the list of
+    // all stroke factories.
+    //
+    // Returns -1 if the stroke factory is not in the list of all stroke factories.
+    getCurrentPenTypeIdx() {
+        const currentFactory = this.tool.getStrokeFactory();
+        for (let i = 0; i < this.penTypes.length; i++) {
+            if (this.penTypes[i].factory === currentFactory) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    getCurrentPenType() {
+        for (const penType of this.penTypes) {
+            if (penType.factory === this.tool.getStrokeFactory()) {
+                return penType;
+            }
+        }
+        return null;
+    }
     createIcon() {
         const strokeFactory = this.tool.getStrokeFactory();
         if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
@@ -106,7 +134,7 @@ export default class PenToolWidget extends BaseToolWidget {
         objectTypeRow.appendChild(objectTypeSelect);
         const colorRow = document.createElement('div');
         const colorLabel = document.createElement('label');
-        const [colorInput, colorInputContainer] = makeColorInput(this.editor, color => {
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
             this.tool.setColor(color);
         });
         colorInput.id = `${toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
@@ -115,8 +143,9 @@ export default class PenToolWidget extends BaseToolWidget {
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
         this.updateInputs = () => {
-            colorInput.value = this.tool.getColor().toHexString();
+            setColorInputValue(this.tool.getColor());
             thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
+            // Update the list of stroke factories
             objectTypeSelect.replaceChildren();
             for (let i = 0; i < this.penTypes.length; i++) {
                 const penType = this.penTypes[i];
@@ -124,9 +153,14 @@ export default class PenToolWidget extends BaseToolWidget {
                 option.value = i.toString();
                 option.innerText = penType.name;
                 objectTypeSelect.appendChild(option);
-                if (penType.factory === this.tool.getStrokeFactory()) {
-                    objectTypeSelect.value = i.toString();
-                }
+            }
+            // Update the selected stroke factory.
+            const strokeFactoryIdx = this.getCurrentPenTypeIdx();
+            if (strokeFactoryIdx === -1) {
+                objectTypeSelect.value = '';
+            }
+            else {
+                objectTypeSelect.value = strokeFactoryIdx.toString();
             }
         };
         this.updateInputs();
@@ -148,5 +182,37 @@ export default class PenToolWidget extends BaseToolWidget {
         }
         return false;
     }
+    serializeState() {
+        var _a;
+        return Object.assign(Object.assign({}, super.serializeState()), { color: this.tool.getColor().toHexString(), thickness: this.tool.getThickness(), strokeFactoryId: (_a = this.getCurrentPenType()) === null || _a === void 0 ? void 0 : _a.id });
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        const verifyPropertyType = (propertyName, expectedType) => {
+            const actualType = typeof (state[propertyName]);
+            if (actualType !== expectedType) {
+                throw new Error(`Deserializing property ${propertyName}: Invalid type. Expected ${expectedType},` +
+                    ` was ${actualType}.`);
+            }
+        };
+        if (state.color) {
+            verifyPropertyType('color', 'string');
+            this.tool.setColor(Color4.fromHex(state.color));
+        }
+        if (state.thickness) {
+            verifyPropertyType('thickness', 'number');
+            this.tool.setThickness(state.thickness);
+        }
+        if (state.strokeFactoryId) {
+            verifyPropertyType('strokeFactoryId', 'string');
+            const factoryId = state.strokeFactoryId;
+            for (const penType of this.penTypes) {
+                if (factoryId === penType.id) {
+                    this.tool.setStrokeFactory(penType.factory);
+                    break;
+                }
+            }
+        }
+    }
 }
 PenToolWidget.idCounter = 0;

package/dist/src/toolbar/widgets/SelectionToolWidget.d.ts

@@ -5,7 +5,7 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
-    constructor(editor: Editor, tool: SelectionTool, localization: ToolbarLocalization);
+    constructor(editor: Editor, tool: SelectionTool, localization?: ToolbarLocalization);
     private resizeImageToSelection;
     protected onKeyPress(event: KeyPressEvent): boolean;
     protected getTitle(): string;

package/dist/src/toolbar/widgets/SelectionToolWidget.js

@@ -3,20 +3,20 @@ import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
-        super(editor, tool, localization);
+        super(editor, tool, 'selection-tool-widget', localization);
         this.tool = tool;
-        const resizeButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
+        const resizeButton = new ActionButtonWidget(editor, 'resize-btn', () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
             this.resizeImageToSelection();
-        });
-        const deleteButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
+        }, localization);
+        const deleteButton = new ActionButtonWidget(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
-        });
-        const duplicateButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => {
+        }, localization);
+        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.duplicateSelectedObjects());
-        });
+        }, localization);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);

package/dist/src/toolbar/widgets/TextToolWidget.d.ts

@@ -2,12 +2,15 @@ import Editor from '../../Editor';
 import TextTool from '../../tools/TextTool';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 export default class TextToolWidget extends BaseToolWidget {
     private tool;
     private updateDropdownInputs;
-    constructor(editor: Editor, tool: TextTool, localization: ToolbarLocalization);
+    constructor(editor: Editor, tool: TextTool, localization?: ToolbarLocalization);
     protected getTitle(): string;
     protected createIcon(): Element;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }

package/dist/src/toolbar/widgets/TextToolWidget.js

@@ -1,10 +1,11 @@
+import Color4 from '../../Color4';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 export default class TextToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
-        super(editor, tool, localization);
+        super(editor, tool, 'text-tool-widget', localization);
         this.tool = tool;
         this.updateDropdownInputs = null;
         editor.notifier.on(EditorEventType.ToolUpdated, evt => {
@@ -27,7 +28,7 @@ export default class TextToolWidget extends BaseToolWidget {
         const colorRow = document.createElement('div');
         const fontInput = document.createElement('select');
         const fontLabel = document.createElement('label');
-        const [colorInput, colorInputContainer] = makeColorInput(this.editor, color => {
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
             this.tool.setColor(color);
         });
         const colorLabel = document.createElement('label');
@@ -57,7 +58,7 @@ export default class TextToolWidget extends BaseToolWidget {
         fontRow.appendChild(fontInput);
         this.updateDropdownInputs = () => {
             const style = this.tool.getTextStyle();
-            colorInput.value = style.renderingStyle.fill.toHexString();
+            setColorInputValue(style.renderingStyle.fill);
             if (!fontsInInput.has(style.fontFamily)) {
                 addFontToInput(style.fontFamily);
             }
@@ -67,5 +68,18 @@ export default class TextToolWidget extends BaseToolWidget {
         dropdown.replaceChildren(colorRow, fontRow);
         return true;
     }
+    serializeState() {
+        const textStyle = this.tool.getTextStyle();
+        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, color: textStyle.renderingStyle.fill.toHexString() });
+    }
+    deserializeFrom(state) {
+        if (state.fontFamily && typeof (state.fontFamily) === 'string') {
+            this.tool.setFontFamily(state.fontFamily);
+        }
+        if (state.color && typeof (state.color) === 'string') {
+            this.tool.setColor(Color4.fromHex(state.color));
+        }
+        super.deserializeFrom(state);
+    }
 }
 TextToolWidget.idCounter = 0;

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

@@ -14,7 +14,8 @@ export declare enum PanZoomMode {
     TwoFingerTouchGestures = 2,
     RightClickDrags = 4,
     SinglePointerGestures = 8,
-    Keyboard = 16
+    Keyboard = 16,
+    RotationLocked = 32
 }
 export default class PanZoom extends BaseTool {
     private editor;
@@ -36,6 +37,8 @@ export default class PanZoom extends BaseTool {
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean;
+    private isRotationLocked;
+    setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
     setMode(mode: PanZoomMode): void;
     getMode(): PanZoomMode;
 }

package/dist/src/tools/PanZoom.js

@@ -12,6 +12,7 @@ export var PanZoomMode;
     PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
     PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
     PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
+    PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
 })(PanZoomMode || (PanZoomMode = {}));
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
@@ -66,9 +67,13 @@ export default class PanZoom extends BaseTool {
     handleTwoFingerMove(allPointers) {
         const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
         const delta = this.getCenterDelta(screenCenter);
+        let rotation = angle - this.lastAngle;
+        if (this.isRotationLocked()) {
+            rotation = 0;
+        }
         const transformUpdate = Mat33.translation(delta)
             .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
-            .rightMul(Mat33.zRotation(angle - this.lastAngle, canvasCenter));
+            .rightMul(Mat33.zRotation(rotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
         this.lastAngle = angle;
@@ -195,6 +200,9 @@ export default class PanZoom extends BaseTool {
         if (rotation !== 0) {
             rotation += 0.0001;
         }
+        if (this.isRotationLocked()) {
+            rotation = 0;
+        }
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without translating (treat toCanvas as a linear instead of
         // an affine transformation).
@@ -205,6 +213,21 @@ export default class PanZoom extends BaseTool {
         this.updateTransform(transformUpdate, true);
         return true;
     }
+    isRotationLocked() {
+        return !!(this.mode & PanZoomMode.RotationLocked);
+    }
+    // Sets whether the given `mode` is enabled. `mode` should be a single
+    // mode from the `PanZoomMode` enum.
+    setModeEnabled(mode, enabled) {
+        let newMode = this.mode;
+        if (enabled) {
+            newMode |= mode;
+        }
+        else {
+            newMode &= ~mode;
+        }
+        this.setMode(newMode);
+    }
     setMode(mode) {
         if (mode !== this.mode) {
             this.mode = mode;

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

@@ -287,7 +287,7 @@ export default class Selection {
     }
     setSelectedObjects(objects, bbox) {
         this.originalRegion = bbox;
-        this.selectedElems = objects;
+        this.selectedElems = objects.filter(object => object.isSelectable());
         this.updateUI();
     }
     getSelectedObjects() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.8.0",
+	"version": "0.9.1",
 	"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",

package/src/Color4.ts

@@ -73,6 +73,8 @@ export default class Color4 {
 	public static fromString(text: string): Color4 {
 		if (text.startsWith('#')) {
 			return Color4.fromHex(text);
+		} else if (text === 'none' || text === 'transparent') {
+			return Color4.transparent;
 		} else {
 			// Otherwise, try to use an HTML5Canvas to determine the color
 			const canvas = document.createElement('canvas');

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 { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
 import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
@@ -39,6 +39,7 @@ import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
+import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -823,20 +824,36 @@ export class Editor {
 		});
 	}
 
+	// Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
+	// If `format` is not `image/png`, a PNG image URL may still be returned (as in the
+	// case of `HTMLCanvasElement::toDataURL`).
+	//
+	// 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;
+		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);
+
+		const dataURL = canvas.toDataURL(format);
+		return dataURL;
+	}
+
 	public toSVG(): SVGElement {
 		const importExportViewport = this.importExportViewport;
 		const svgNameSpace = 'http://www.w3.org/2000/svg';
 		const result = document.createElementNS(svgNameSpace, 'svg');
 		const renderer = new SVGRenderer(result, importExportViewport);
 
-		const origTransform = importExportViewport.canvasToScreenTransform;
-		// Reset the transform to ensure that (0, 0) is (0, 0)
-		importExportViewport.resetTransform(Mat33.identity);
-
-		// Render **all** elements.
-		this.image.renderAll(renderer);
-
-		importExportViewport.resetTransform(origTransform);
+		this.renderAllWithTransform(renderer, importExportViewport);
 
 		// Just show the main region
 		const rect = importExportViewport.visibleRect;
@@ -854,6 +871,23 @@ 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);

package/src/SVGLoader.ts

@@ -28,6 +28,9 @@ export type SVGLoaderUnknownAttribute = [ string, string ];
 // [key, value, priority]
 export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, priority?: string };
 
+
+const supportedStrokeFillStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
+
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -154,11 +157,10 @@ export default class SVGLoader implements ImageLoader {
 
 			elem = new Stroke(strokeData);
 
-			const supportedStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
 			this.attachUnrecognisedAttrs(
 				elem, node,
-				new Set([ ...supportedStyleAttrs, 'd' ]),
-				new Set(supportedStyleAttrs)
+				new Set([ ...supportedStrokeFillStyleAttrs, 'd' ]),
+				new Set(supportedStrokeFillStyleAttrs)
 			);
 		} catch (e) {
 			console.error(
@@ -234,8 +236,8 @@ export default class SVGLoader implements ImageLoader {
 
 		const supportedStyleAttrs = [
 			'fontFamily',
-			'fill',
-			'transform'
+			'transform',
+			...supportedStrokeFillStyleAttrs,
 		];
 		let fontSize = 12;
 		if (fontSizeMatch) {
@@ -245,9 +247,7 @@ export default class SVGLoader implements ImageLoader {
 		const style: TextStyle = {
 			size: fontSize,
 			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-			renderingStyle: {
-				fill: Color4.fromString(computedStyles.fill || elem.style.fill || '#000')
-			},
+			renderingStyle: this.getStyle(elem),
 		};
 
 		const supportedAttrs: string[] = [];

package/src/Viewport.ts

@@ -190,8 +190,8 @@ export class Viewport {
 
 		// Represent as k 10ⁿ for some n, k ∈ ℤ.
 		const decimalComponent = 10 ** Math.floor(Math.log10(Math.abs(scaleRatio)));
-		const roundAnountFactor = 2 ** roundAmount;
-		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+		const roundAmountFactor = 2 ** roundAmount;
+		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
 
 		return scaleRatio;
 	}

package/src/components/Stroke.ts

@@ -61,7 +61,7 @@ export default class Stroke extends AbstractComponent {
 				}
 
 				const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
-				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width)) {
+				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width ?? 0)) {
 					continue;
 				}
 			}

package/src/components/builders/LineBuilder.ts

@@ -51,6 +51,10 @@ export default class LineBuilder implements ComponentBuilder {
 						kind: PathCommandType.LineTo,
 						point: endPoint.minus(scaledEndNormal),
 					},
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.minus(scaledStartNormal),
+					},
 				],
 				style: {
 					fill: this.startPoint.color,

package/src/components/util/StrokeSmoother.ts

@@ -238,7 +238,7 @@ export class StrokeSmoother {
 		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
 			// Position the control point closer to the first -- the connecting
 			// segment will be roughly a line.
-			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 3));
+			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
 		}
 
 		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');