js-draw 0.9.2 → 0.9.3

package/dist/src/Editor.d.ts

@@ -29,8 +29,8 @@ import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
-declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
+type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;

package/dist/src/EditorImage.d.ts

@@ -27,7 +27,7 @@ export default class EditorImage {
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     private static AddElementCommand;
 }
-declare type TooSmallToRenderCheck = (rect: Rect2) => boolean;
+type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 /** Part of the Editor's image. @internal */
 export declare class ImageNode {
     private parent;

package/dist/src/EventDispatcher.d.ts

@@ -15,7 +15,7 @@
  *
  * @packageDocumentation
  */
-declare type CallbackHandler<EventType> = (data: EventType) => void;
+type CallbackHandler<EventType> = (data: EventType) => void;
 export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
     private listeners;
     constructor();

package/dist/src/SVGLoader.d.ts

@@ -3,8 +3,8 @@ import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnP
 export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
 export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
-export declare type SVGLoaderUnknownAttribute = [string, string];
-export declare type SVGLoaderUnknownStyleAttribute = {
+export type SVGLoaderUnknownAttribute = [string, string];
+export type SVGLoaderUnknownStyleAttribute = {
     key: string;
     value: string;
     priority?: string;

package/dist/src/UndoRedoHistory.d.ts

@@ -1,7 +1,7 @@
 import Editor from './Editor';
 import Command from './commands/Command';
-declare type AnnounceRedoCallback = (command: Command) => void;
-declare type AnnounceUndoCallback = (command: Command) => void;
+type AnnounceRedoCallback = (command: Command) => void;
+type AnnounceUndoCallback = (command: Command) => void;
 declare class UndoRedoHistory {
     private readonly editor;
     private announceRedoCallback;

package/dist/src/Viewport.d.ts

@@ -4,7 +4,7 @@ import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
 import { StrokeDataPoint } from './types';
 import { EditorNotifier } from './types';
-declare type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
 export declare abstract class ViewportTransform extends Command {
     abstract readonly transform: Mat33;
 }

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

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import Command from './Command';
-export declare type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
+export type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
 export default abstract class SerializableCommand extends Command {
     private commandTypeId;
     constructor(commandTypeId: string);

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

@@ -4,9 +4,9 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
-export declare type LoadSaveData = (string[] | Record<symbol, string | number>);
-export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
-export declare type DeserializeCallback = (data: string) => AbstractComponent;
+export type LoadSaveData = (string[] | Record<symbol, string | number>);
+export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+export type DeserializeCallback = (data: string) => AbstractComponent;
 export default abstract class AbstractComponent {
     private readonly componentKind;
     protected lastChangedTime: number;

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

@@ -4,7 +4,7 @@ import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-declare type GlobalAttrsList = Array<[string, string | null]>;
+type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
     private readonly attrs;
     protected contentBBox: Rect2;

package/dist/src/components/builders/FreehandLineBuilder.d.ts

@@ -24,7 +24,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
+    private getMinFit;
     private roundPoint;
+    private roundDistance;
     private curveToPathCommands;
     private addCurve;
     addPoint(newPoint: StrokeDataPoint): void;

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -33,7 +33,7 @@ export default class FreehandLineBuilder {
             fill: Color4.transparent,
             stroke: {
                 color: this.startPoint.color,
-                width: this.averageWidth,
+                width: this.roundDistance(this.averageWidth),
             }
         };
     }
@@ -76,13 +76,21 @@ export default class FreehandLineBuilder {
         this.curveFitter.finalizeCurrentCurve();
         return this.previewStroke();
     }
-    roundPoint(point) {
+    getMinFit() {
         let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }
+        return minFit;
+    }
+    roundPoint(point) {
+        const minFit = this.getMinFit();
         return Viewport.roundPoint(point, minFit);
     }
+    roundDistance(dist) {
+        const minFit = this.getMinFit();
+        return Viewport.roundPoint(dist, minFit);
+    }
     curveToPathCommands(curve) {
         // Case where no points have been added
         if (!curve) {

package/dist/src/components/builders/types.d.ts

@@ -9,4 +9,4 @@ export interface ComponentBuilder {
     preview(renderer: AbstractRenderer): void;
     addPoint(point: StrokeDataPoint): void;
 }
-export declare type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;
+export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

package/dist/src/components/util/StrokeSmoother.d.ts

@@ -8,7 +8,7 @@ export interface Curve {
     endWidth: number;
     endPoint: Vec2;
 }
-declare type OnCurveAddedCallback = (curve: Curve | null) => void;
+type OnCurveAddedCallback = (curve: Curve | null) => void;
 export declare class StrokeSmoother {
     private startPoint;
     private minFitAllowed;

package/dist/src/math/Mat33.d.ts

@@ -1,6 +1,6 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
-export declare type Mat33Array = [
+export type Mat33Array = [
     number,
     number,
     number,

package/dist/src/math/Path.d.ts

@@ -30,7 +30,7 @@ export interface MoveToPathCommand {
     kind: PathCommandType.MoveTo;
     point: Point2;
 }
-export declare type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
+export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
 interface IntersectionResult {
     curve: LineSegment2 | Bezier;
     parameterValue: number;

package/dist/src/math/Vec2.d.ts

@@ -9,5 +9,5 @@ export declare namespace Vec2 {
     const unitY: Vec3;
     const zero: Vec3;
 }
-export declare type Point2 = Vec3;
-export declare type Vec2 = Vec3;
+export type Point2 = Vec3;
+export type Vec2 = Vec3;

package/dist/src/rendering/caching/testUtils.d.ts

@@ -1,7 +1,7 @@
 import DummyRenderer from '../renderers/DummyRenderer';
 import RenderingCache from './RenderingCache';
 import { CacheProps } from './types';
-declare type RenderAllocCallback = (renderer: DummyRenderer) => void;
+type RenderAllocCallback = (renderer: DummyRenderer) => void;
 export declare const createCache: (onRenderAlloc?: RenderAllocCallback, cacheOptions?: Partial<CacheProps>) => {
     cache: RenderingCache;
     editor: import("../../Editor").Editor;

package/dist/src/rendering/caching/types.d.ts

@@ -1,8 +1,8 @@
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheRecordManager } from './CacheRecordManager';
-export declare type CacheAddress = number;
-export declare type BeforeDeallocCallback = () => void;
+export type CacheAddress = number;
+export type BeforeDeallocCallback = () => void;
 export interface CacheProps {
     createRenderer(): AbstractRenderer;
     isOfCorrectType(renderer: AbstractRenderer): boolean;

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

@@ -87,7 +87,7 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         if (style.stroke) {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-            pathElem.setAttribute('stroke-width', style.stroke.width.toString());
+            pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
         }
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);

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

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/TextComponent';
 import Pen from '../tools/Pen';
-declare type IconType = SVGSVGElement | HTMLImageElement;
+type IconType = SVGSVGElement | HTMLImageElement;
 export default class IconProvider {
     makeUndoIcon(): IconType;
     makeRedoIcon(mirror?: boolean): IconType;

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

@@ -1,5 +1,6 @@
 export interface ToolbarLocalization {
     fontLabel: string;
+    textSize: string;
     touchPanning: string;
     lockRotation: string;
     outlinedRectanglePen: string;

package/dist/src/toolbar/localization.js

@@ -8,6 +8,7 @@ export const defaultToolbarLocalization = {
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
     fontLabel: 'Font: ',
+    textSize: 'Size: ',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
     duplicateSelection: 'Duplicate selection',

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

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
-declare type OnColorChangeListener = (color: Color4) => void;
-declare type SetColorCallback = (color: Color4 | string) => void;
+type OnColorChangeListener = (color: Color4) => void;
+type SetColorCallback = (color: Color4 | string) => void;
 export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
 export default makeColorInput;

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

@@ -1,7 +1,7 @@
 import Editor from '../../Editor';
 import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
-export declare type SavedToolbuttonState = Record<string, any>;
+export type SavedToolbuttonState = Record<string, any>;
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;

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

@@ -26,8 +26,11 @@ export default class TextToolWidget extends BaseToolWidget {
     fillDropdown(dropdown) {
         const fontRow = document.createElement('div');
         const colorRow = document.createElement('div');
+        const sizeRow = document.createElement('div');
         const fontInput = document.createElement('select');
         const fontLabel = document.createElement('label');
+        const sizeInput = document.createElement('input');
+        const sizeLabel = document.createElement('label');
         const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
             this.tool.setColor(color);
         });
@@ -40,10 +43,16 @@ export default class TextToolWidget extends BaseToolWidget {
             fontInput.appendChild(option);
             fontsInInput.add(fontName);
         };
+        sizeInput.setAttribute('type', 'number');
+        sizeInput.min = '1';
+        sizeInput.max = '128';
         fontLabel.innerText = this.localizationTable.fontLabel;
         colorLabel.innerText = this.localizationTable.colorLabel;
+        sizeLabel.innerText = this.localizationTable.textSize;
         colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
         colorLabel.setAttribute('for', colorInput.id);
+        sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+        sizeLabel.setAttribute('for', sizeInput.id);
         addFontToInput('monospace');
         addFontToInput('serif');
         addFontToInput('sans-serif');
@@ -52,10 +61,18 @@ export default class TextToolWidget extends BaseToolWidget {
         fontInput.onchange = () => {
             this.tool.setFontFamily(fontInput.value);
         };
+        sizeInput.onchange = () => {
+            const size = parseInt(sizeInput.value);
+            if (!isNaN(size) && size > 0) {
+                this.tool.setFontSize(size);
+            }
+        };
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
         fontRow.appendChild(fontLabel);
         fontRow.appendChild(fontInput);
+        sizeRow.appendChild(sizeLabel);
+        sizeRow.appendChild(sizeInput);
         this.updateDropdownInputs = () => {
             const style = this.tool.getTextStyle();
             setColorInputValue(style.renderingStyle.fill);
@@ -63,14 +80,15 @@ export default class TextToolWidget extends BaseToolWidget {
                 addFontToInput(style.fontFamily);
             }
             fontInput.value = style.fontFamily;
+            sizeInput.value = `${style.size}`;
         };
         this.updateDropdownInputs();
-        dropdown.replaceChildren(colorRow, fontRow);
+        dropdown.replaceChildren(colorRow, sizeRow, fontRow);
         return true;
     }
     serializeState() {
         const textStyle = this.tool.getTextStyle();
-        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, color: textStyle.renderingStyle.fill.toHexString() });
+        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, textSize: textStyle.size, color: textStyle.renderingStyle.fill.toHexString() });
     }
     deserializeFrom(state) {
         if (state.fontFamily && typeof (state.fontFamily) === 'string') {
@@ -79,6 +97,9 @@ export default class TextToolWidget extends BaseToolWidget {
         if (state.color && typeof (state.color) === 'string') {
             this.tool.setColor(Color4.fromHex(state.color));
         }
+        if (state.textSize && typeof (state.textSize) === 'number') {
+            this.tool.setFontSize(state.textSize);
+        }
         super.deserializeFrom(state);
     }
 }

package/dist/src/tools/BaseTool.js

@@ -1,15 +1,15 @@
 import { EditorEventType } from '../types';
 export default class BaseTool {
+    onPointerDown(_event) { return false; }
+    onPointerMove(_event) { }
+    onPointerUp(_event) { }
+    onGestureCancel() { }
     constructor(notifier, description) {
         this.notifier = notifier;
         this.description = description;
         this.enabled = true;
         this.group = null;
     }
-    onPointerDown(_event) { return false; }
-    onPointerMove(_event) { }
-    onPointerUp(_event) { }
-    onGestureCancel() { }
     onWheel(_event) {
         return false;
     }

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

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-declare type ColorListener = (color: Color4 | null) => void;
+type ColorListener = (color: Color4 | null) => void;
 export default class PipetteTool extends BaseTool {
     private editor;
     private colorPreviewListener;

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

@@ -6,9 +6,9 @@ export declare enum HandleShape {
     Square = 1
 }
 export declare const handleSize = 30;
-export declare type DragStartCallback = (startPoint: Point2) => void;
-export declare type DragUpdateCallback = (canvasPoint: Point2) => void;
-export declare type DragEndCallback = () => void;
+export type DragStartCallback = (startPoint: Point2) => void;
+export type DragUpdateCallback = (canvasPoint: Point2) => void;
+export type DragEndCallback = () => void;
 export default class SelectionHandle {
     readonly shape: HandleShape;
     private readonly parentSide;

package/dist/src/tools/TextTool.js

@@ -108,8 +108,10 @@ export default class TextTool extends BaseTool {
         this.textInputElem.style.margin = '0';
         this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
         this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+        // Get the ascent based on the font, using a character that is tall in most fonts.
+        const tallCharacter = '⎢';
+        const ascent = this.getTextAscent(tallCharacter, this.textStyle);
         const rotation = this.textRotation + viewport.getRotationAngle();
-        const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
         const scale = this.getTextScaleMatrix();
         this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
@@ -171,7 +173,11 @@ export default class TextTool extends BaseTool {
             const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
-            const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            // Don't try to edit text nodes that contain the viewport (this allows us
+            // to zoom in on text nodes and add text on top of them.)
+            const visibleRect = this.editor.viewport.visibleRect;
+            targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
             // End any TextNodes we're currently editing.
             this.flushInput();
             if (targetTextNodes.length > 0) {

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

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
-declare type KeyPressListener = (event: KeyPressEvent) => boolean;
+type KeyPressListener = (event: KeyPressEvent) => boolean;
 export default class ToolbarShortcutHandler extends BaseTool {
     private listeners;
     constructor(editor: Editor);

package/dist/src/types.d.ts

@@ -68,9 +68,9 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
-export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
-export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,
     ToolDisabled = 1,
@@ -85,7 +85,7 @@ export declare enum EditorEventType {
     ColorPickerColorSelected = 10,
     ToolbarDropdownShown = 11
 }
-declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
+type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
     readonly kind: EditorToolEventType;
     readonly tool: BaseTool;
@@ -128,10 +128,10 @@ export interface ToolbarDropdownShownEvent {
     readonly kind: EditorEventType.ToolbarDropdownShown;
     readonly parentWidget: BaseWidget;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
-export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
-export declare type ComponentAddedListener = (component: AbstractComponent) => void;
-export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
+export type ComponentAddedListener = (component: AbstractComponent) => void;
+export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"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",
@@ -83,27 +83,27 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.0.3",
-		"@types/jsdom": "^20.0.0",
-		"@types/node": "^18.7.23",
-		"@typescript-eslint/eslint-plugin": "^5.38.1",
-		"@typescript-eslint/parser": "^5.38.1",
-		"css-loader": "^6.7.1",
-		"eslint": "^8.24.0",
-		"husky": "^8.0.1",
-		"jest": "^29.0.3",
-		"jest-environment-jsdom": "^29.0.3",
-		"jsdom": "^20.0.0",
+		"@types/jest": "^29.2.3",
+		"@types/jsdom": "^20.0.1",
+		"@types/node": "^18.11.9",
+		"@typescript-eslint/eslint-plugin": "^5.44.0",
+		"@typescript-eslint/parser": "^5.44.0",
+		"css-loader": "^6.7.2",
+		"eslint": "^8.28.0",
+		"husky": "^8.0.2",
+		"jest": "^29.2.3",
+		"jest-environment-jsdom": "^29.3.1",
+		"jsdom": "^20.0.3",
 		"lint-staged": "^13.0.3",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.6",
-		"ts-jest": "^29.0.2",
+		"ts-jest": "^29.0.3",
 		"ts-loader": "^9.4.1",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.15",
-		"typescript": "^4.8.3",
-		"webpack": "^5.74.0"
+		"typedoc": "^0.23.21",
+		"typescript": "^4.9.3",
+		"webpack": "^5.75.0"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

package/src/components/builders/FreehandLineBuilder.ts

@@ -55,7 +55,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			fill: Color4.transparent,
 			stroke: {
 				color: this.startPoint.color,
-				width: this.averageWidth,
+				width: this.roundDistance(this.averageWidth),
 			}
 		};
 	}
@@ -107,16 +107,26 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		return this.previewStroke()!;
 	}
 
-	private roundPoint(point: Point2): Point2 {
+	private getMinFit(): number {
 		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;
 		}
+		
+		return minFit;
+	}
 
+	private roundPoint(point: Point2): Point2 {
+		const minFit = this.getMinFit();
 		return Viewport.roundPoint(point, minFit);
 	}
 
+	private roundDistance(dist: number): number {
+		const minFit = this.getMinFit();
+		return Viewport.roundPoint(dist, minFit);
+	}
+
 	private curveToPathCommands(curve: Curve|null): PathCommand[] {
 		// Case where no points have been added
 		if (!curve) {

package/src/rendering/renderers/SVGRenderer.ts

@@ -102,7 +102,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 		if (style.stroke) {
 			pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-			pathElem.setAttribute('stroke-width', style.stroke.width.toString());
+			pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
 		}
 
 		this.elem.appendChild(pathElem);

package/src/toolbar/localization.ts

@@ -2,6 +2,7 @@
 
 export interface ToolbarLocalization {
 	fontLabel: string;
+	textSize: string;
 	touchPanning: string;
 	lockRotation: string;
 	outlinedRectanglePen: string;
@@ -44,6 +45,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	fontLabel: 'Font: ',
+	textSize: 'Size: ',
 	resizeImageToSelection: 'Resize image to selection',
 	deleteSelection: 'Delete selection',
 	duplicateSelection: 'Duplicate selection',