js-draw 0.7.2 → 0.9.0

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

@@ -1,36 +1,48 @@
 import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
 import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
+import { makePressureSensitiveFreehandLineBuilder } from '../../components/builders/PressureSensitiveFreehandLineBuilder';
 import { makeLineBuilder } from '../../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
 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.freehandPen,
+                name: this.localizationTable.pressureSensitiveFreehandPen,
+                id: 'pressure-sensitive-pen',
+                factory: makePressureSensitiveFreehandLineBuilder,
+            },
+            {
+                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,
             },
         ];
@@ -48,9 +60,30 @@ 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) {
+        if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
             // Use a square-root scale to prevent the pen's tip from overflowing.
             const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
             const color = this.tool.getColor();
@@ -101,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++}`;
@@ -110,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];
@@ -119,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();
@@ -143,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/Pen.d.ts

@@ -11,10 +11,10 @@ export interface PenStyle {
 export default class Pen extends BaseTool {
     private editor;
     private style;
+    private builderFactory;
     protected builder: ComponentBuilder | null;
-    protected builderFactory: ComponentBuilderFactory;
     private lastPoint;
-    constructor(editor: Editor, description: string, style: PenStyle);
+    constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
     protected previewStroke(): void;

package/dist/src/tools/Pen.js

@@ -4,12 +4,12 @@ import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuil
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
 export default class Pen extends BaseTool {
-    constructor(editor, description, style) {
+    constructor(editor, description, style, builderFactory = makeFreehandLineBuilder) {
         super(editor.notifier, description);
         this.editor = editor;
         this.style = style;
+        this.builderFactory = builderFactory;
         this.builder = null;
-        this.builderFactory = makeFreehandLineBuilder;
         this.lastPoint = null;
     }
     getPressureMultiplier() {

package/dist/src/tools/SelectionTool/Selection.d.ts

@@ -18,6 +18,7 @@ export default class Selection {
     private selectedElems;
     private container;
     private backgroundElem;
+    private hasParent;
     constructor(startPoint: Point2, editor: Editor);
     getTransform(): Mat33;
     get preTransformRegion(): Rect2;

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

@@ -30,6 +30,7 @@ export default class Selection {
         this.transform = Mat33.identity;
         this.transformCommands = [];
         this.selectedElems = [];
+        this.hasParent = true;
         this.targetHandle = null;
         this.backgroundDragging = false;
         this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
@@ -96,7 +97,7 @@ export default class Selection {
     // Applies, previews, but doesn't finalize the given transformation.
     setTransform(transform, preview = true) {
         this.transform = transform;
-        if (preview) {
+        if (preview && this.hasParent) {
             this.previewTransformCmds();
             this.scrollTo();
         }
@@ -190,6 +191,10 @@ export default class Selection {
     }
     // @internal
     updateUI() {
+        // Don't update old selections.
+        if (!this.hasParent) {
+            return;
+        }
         // marginLeft, marginTop: Display relative to the top left of the selection overlay.
         // left, top don't work for this.
         this.backgroundElem.style.marginLeft = `${this.screenRegion.topLeft.x}px`;
@@ -267,6 +272,7 @@ export default class Selection {
             this.container.remove();
         }
         elem.appendChild(this.container);
+        this.hasParent = true;
     }
     setToPoint(point) {
         this.originalRegion = this.originalRegion.grownToPoint(point);
@@ -277,6 +283,7 @@ export default class Selection {
             this.container.remove();
         }
         this.originalRegion = Rect2.empty;
+        this.hasParent = false;
     }
     setSelectedObjects(objects, bbox) {
         this.originalRegion = bbox;

package/dist/src/tools/ToolController.js

@@ -11,6 +11,7 @@ import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
+import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -25,7 +26,7 @@ export default class ToolController {
             primaryPenTool,
             new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
             // Highlighter-like pen with width=64
-            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }, makePressureSensitiveFreehandLineBuilder),
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.7.2",
+	"version": "0.9.0",
 	"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/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/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.closedRoughlyIntersects(visibleRect)) {
+				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width ?? 0)) {
 					continue;
 				}
 			}
@@ -87,7 +87,20 @@ export default class Stroke extends AbstractComponent {
 		// Update each part
 		this.parts = this.parts.map((part) => {
 			const newPath = part.path.transformedBy(affineTransfm);
-			const newBBox = this.bboxForPart(newPath.bbox, part.style);
+			const newStyle = {
+				...part.style,
+				stroke: part.style.stroke ? {
+					...part.style.stroke,
+				} : undefined,
+			};
+
+			// Approximate the scale factor.
+			if (newStyle.stroke) {
+				const scaleFactor = affineTransfm.getScaleFactor();
+				newStyle.stroke.width *= scaleFactor;
+			}
+
+			const newBBox = this.bboxForPart(newPath.bbox, newStyle);
 
 			if (isFirstPart) {
 				this.contentBBox = newBBox;
@@ -100,7 +113,7 @@ export default class Stroke extends AbstractComponent {
 				path: newPath,
 				startPoint: newPath.startPoint,
 				commands: newPath.parts,
-				style: part.style,
+				style: newStyle,
 			};
 		});
 	}