js-draw 1.17.0 → 1.18.0

package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs

@@ -1,5 +1,4 @@
-import { Bezier } from 'bezier-js';
-import { Vec2, Rect2, PathCommandType } from '@js-draw/math';
+import { Vec2, Rect2, PathCommandType, QuadraticBezier } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
@@ -25,6 +24,7 @@ export default class PressureSensitiveFreehandLineBuilder {
         this.isFirstSegment = true;
         this.pathStartConnector = null;
         this.mostRecentConnector = null;
+        this.nextCurveStartConnector = null;
         this.lastUpperBezier = null;
         this.lastLowerBezier = null;
         this.parts = [];
@@ -42,18 +42,18 @@ export default class PressureSensitiveFreehandLineBuilder {
             fill: this.startPoint.color ?? null,
         };
     }
-    previewCurrentPath() {
+    previewCurrentPath(extendWithLatest = true) {
         const upperPath = this.upperSegments.slice();
         const lowerPath = this.lowerSegments.slice();
         let lowerToUpperCap;
         let pathStartConnector;
         const currentCurve = this.curveFitter.preview();
-        if (currentCurve) {
+        if (currentCurve && extendWithLatest) {
             const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand } = this.segmentToPath(currentCurve);
             upperPath.push(upperCurveCommand);
             lowerPath.push(lowerCurveCommand);
             lowerToUpperCap = lowerToUpperConnector;
-            pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
+            pathStartConnector = this.pathStartConnector ?? [upperToLowerConnector];
         }
         else {
             if (this.mostRecentConnector === null || this.pathStartConnector === null) {
@@ -94,7 +94,7 @@ export default class PressureSensitiveFreehandLineBuilder {
                 //  __/  __/
                 // /___ /
                 // •
-                pathStartConnector,
+                ...pathStartConnector,
                 // Move back to the start point:
                 //     •
                 //  __/  __/
@@ -111,13 +111,6 @@ export default class PressureSensitiveFreehandLineBuilder {
         }
         return null;
     }
-    previewStroke() {
-        const pathPreview = this.previewFullPath();
-        if (pathPreview) {
-            return new Stroke(pathPreview);
-        }
-        return null;
-    }
     preview(renderer) {
         const paths = this.previewFullPath();
         if (paths) {
@@ -135,7 +128,7 @@ export default class PressureSensitiveFreehandLineBuilder {
             // Ensure we have something.
             this.addCurve(null);
         }
-        return this.previewStroke();
+        return new Stroke(this.previewFullPath());
     }
     roundPoint(point) {
         let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
@@ -150,25 +143,16 @@ export default class PressureSensitiveFreehandLineBuilder {
             return false;
         }
         const getIntersection = (curve1, curve2) => {
-            const intersection = curve1.intersects(curve2);
-            if (!intersection || intersection.length === 0) {
+            const intersections = curve1.intersectsBezier(curve2);
+            if (!intersections.length)
                 return null;
-            }
-            // From http://pomax.github.io/bezierjs/#intersect-curve,
-            // .intersects returns an array of 't1/t2' pairs, where curve1.at(t1) gives the point.
-            const firstTPair = intersection[0];
-            const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
-            if (!match) {
-                throw new Error(`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`);
-            }
-            const t = parseFloat(match[1]);
-            return Vec2.ofXY(curve1.get(t));
+            return intersections[0].point;
         };
         const getExitDirection = (curve) => {
-            return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
+            return curve.p2.minus(curve.p1).normalized();
         };
         const getEnterDirection = (curve) => {
-            return Vec2.ofXY(curve.points[1]).minus(Vec2.ofXY(curve.points[0])).normalized();
+            return curve.p1.minus(curve.p0).normalized();
         };
         // Prevent
         //         /
@@ -179,8 +163,8 @@ export default class PressureSensitiveFreehandLineBuilder {
         // where the next stroke and the previous stroke are in different directions.
         //
         // Are the exit/enter directions of the previous and current curves in different enough directions?
-        if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.3
-            || getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.3
+        if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.35
+            || getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.35
             // Also handle if the curves exit/enter directions differ
             || getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
             || getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
@@ -236,32 +220,37 @@ export default class PressureSensitiveFreehandLineBuilder {
                 controlPoint: center.plus(Vec2.of(width, -width)),
                 endPoint: center.plus(Vec2.of(width, 0)),
             });
-            this.pathStartConnector = {
+            const connector = {
                 kind: PathCommandType.LineTo,
                 point: startPoint,
             };
-            this.mostRecentConnector = this.pathStartConnector;
+            this.pathStartConnector = [connector];
+            this.mostRecentConnector = connector;
             return;
         }
-        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, } = this.segmentToPath(curve);
-        const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, nextCurveStartConnector, } = this.segmentToPath(curve);
+        let shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
         if (shouldStartNew) {
-            const part = this.previewCurrentPath();
+            const part = this.previewCurrentPath(false);
             if (part) {
                 this.parts.push(part);
                 this.upperSegments = [];
                 this.lowerSegments = [];
             }
+            else {
+                shouldStartNew = false;
+            }
         }
         if (this.isFirstSegment || shouldStartNew) {
             // We draw the upper path (reversed), then the lower path, so we need the
             // upperToLowerConnector to join the two paths.
-            this.pathStartConnector = upperToLowerConnector;
+            this.pathStartConnector = this.nextCurveStartConnector ?? [upperToLowerConnector];
             this.isFirstSegment = false;
         }
         // With the most recent connector, we're joining the end of the lowerPath to the most recent
         // upperPath:
         this.mostRecentConnector = lowerToUpperConnector;
+        this.nextCurveStartConnector = nextCurveStartConnector;
         this.lowerSegments.push(lowerCurveCommand);
         this.upperSegments.push(upperCurveCommand);
         this.lastLowerBezier = lowerCurve;
@@ -270,9 +259,9 @@ export default class PressureSensitiveFreehandLineBuilder {
     }
     // Returns [upper curve, connector, lower curve]
     segmentToPath(curve) {
-        const bezier = new Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
-        let startVec = Vec2.ofXY(bezier.normal(0)).normalized();
-        let endVec = Vec2.ofXY(bezier.normal(1)).normalized();
+        const bezier = new QuadraticBezier(curve.startPoint, curve.controlPoint, curve.endPoint);
+        let startVec = bezier.normal(0);
+        let endVec = bezier.normal(1);
         startVec = startVec.times(curve.startWidth / 2);
         endVec = endVec.times(curve.endWidth / 2);
         if (!isFinite(startVec.magnitude())) {
@@ -283,18 +272,9 @@ export default class PressureSensitiveFreehandLineBuilder {
         const endPt = curve.endPoint;
         const controlPoint = curve.controlPoint;
         // Approximate the normal at the location of the control point
-        let projectionT = bezier.project(controlPoint.xy).t;
-        if (!projectionT) {
-            if (startPt.squareDistanceTo(controlPoint) < endPt.squareDistanceTo(controlPoint)) {
-                projectionT = 0.1;
-            }
-            else {
-                projectionT = 0.9;
-            }
-        }
+        const projectionT = bezier.nearestPointTo(controlPoint).parameterValue;
         const halfVecT = projectionT;
-        const halfVec = Vec2.ofXY(bezier.normal(halfVecT))
-            .normalized().times(curve.startWidth / 2 * halfVecT
+        const halfVec = bezier.normal(halfVecT).times(curve.startWidth / 2 * halfVecT
             + curve.endWidth / 2 * (1 - halfVecT));
         // Each starts at startPt ± startVec
         const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
@@ -318,16 +298,29 @@ export default class PressureSensitiveFreehandLineBuilder {
             kind: PathCommandType.LineTo,
             point: upperCurveStartPoint,
         };
+        // The segment to be used to start the next path (to insert to connect the start of its
+        // lower and the end of its upper).
+        const nextCurveStartConnector = [
+            {
+                kind: PathCommandType.LineTo,
+                point: upperCurveStartPoint,
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: lowerCurveEndPoint,
+            },
+        ];
         const upperCurveCommand = {
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint: upperCurveControlPoint,
             endPoint: upperCurveEndPoint,
         };
-        const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
-        const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        const upperCurve = new QuadraticBezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        const lowerCurve = new QuadraticBezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
         return {
             upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
             upperCurve, lowerCurve,
+            nextCurveStartConnector,
         };
     }
     addPoint(newPoint) {

package/dist/mjs/image/EditorImage.mjs

@@ -629,7 +629,7 @@ export class ImageNode {
             this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            if (!this.bbox.containsRect(oldBBox)) {
+            if (this.bbox.containsRect(oldBBox)) {
                 this.parent?.unionBBoxWith(this.bbox);
             }
             else {

package/dist/mjs/localizations/de.mjs

@@ -27,7 +27,7 @@ const localization = {
     selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.',
     touchPanning: 'Ansicht mit Touchscreen verschieben',
     anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
-    selectPenTip: 'Objekt-Typ: ',
+    selectPenType: 'Objekt-Typ: ',
     roundedTipPen: 'Freihand',
     flatTipPen: 'Stift (druckempfindlich)',
     arrowPen: 'Pfeil',

package/dist/mjs/localizations/es.mjs

@@ -22,7 +22,7 @@ const localization = {
     save: 'Guardar',
     undo: 'Deshace',
     redo: 'Rehace',
-    selectPenTip: 'Punta',
+    selectPenType: 'Punta',
     selectShape: 'Forma',
     pickColorFromScreen: 'Selecciona un color de la pantalla',
     clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',

package/dist/mjs/testing/createEditor.d.ts

@@ -1,4 +1,4 @@
-import Editor from '../Editor';
+import Editor, { EditorSettings } from '../Editor';
 /** Creates an editor. Should only be used in test files. */
-declare const _default: () => Editor;
+declare const _default: (settings?: Partial<EditorSettings>) => Editor;
 export default _default;

package/dist/mjs/testing/createEditor.mjs

@@ -1,9 +1,9 @@
 import  { RenderingMode }  from '../rendering/Display.mjs';
 import  Editor  from '../Editor.mjs';
 /** Creates an editor. Should only be used in test files. */
-export default () => {
+export default (settings) => {
     if (jest === undefined) {
         throw new Error('Files in the testing/ folder should only be used in tests!');
     }
-    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer, ...settings });
 };

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

@@ -1,6 +1,7 @@
 import { Color4 } from '@js-draw/math';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { PenStyle } from '../tools/Pen';
+import { EraserMode } from '../tools/Eraser';
 export type IconElemType = HTMLImageElement | SVGElement;
 /**
  * Provides icons that can be used in the toolbar and other locations.
@@ -39,7 +40,7 @@ export default class IconProvider {
     makeUndoIcon(): IconElemType;
     makeRedoIcon(): IconElemType;
     makeDropdownIcon(): IconElemType;
-    makeEraserIcon(eraserSize?: number): IconElemType;
+    makeEraserIcon(eraserSize?: number, mode?: EraserMode): IconElemType;
     makeSelectionIcon(): IconElemType;
     makeRotateIcon(): IconElemType;
     makeHandToolIcon(): IconElemType;
@@ -88,6 +89,7 @@ export default class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     protected isRoundedTipPen(penStyle: PenStyle): boolean;
+    protected isPolylinePen(penStyle: PenStyle): boolean;
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo(): string | null;
 }

package/dist/mjs/toolbar/IconProvider.mjs

@@ -8,6 +8,8 @@ import { Vec2, Color4 } from '@js-draw/math';
 import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
 import  Viewport  from '../Viewport.mjs';
 import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
+import  { makePolylineBuilder }  from '../components/builders/PolylineBuilder.mjs';
+import  { EraserMode }  from '../tools/Eraser.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
 	style='fill: var(--icon-color);'
@@ -112,16 +114,23 @@ class IconProvider {
         icon.setAttribute('viewBox', '-10 -10 110 110');
         return icon;
     }
-    makeEraserIcon(eraserSize) {
+    makeEraserIcon(eraserSize, mode) {
         const icon = document.createElementNS(svgNamespace, 'svg');
         eraserSize ??= 10;
         const scaledSize = eraserSize / 4;
         const eraserColor = '#ff70af';
         // Draw an eraser-like shape. Created with Inkscape
         icon.innerHTML = `
+		<defs>
+			<linearGradient id="dash-pattern">
+				<stop offset="80%" stop-color="${eraserColor}"/>
+				<stop offset="85%" stop-color="white"/>
+				<stop offset="90%" stop-color="${eraserColor}"/>
+			</linearGradient>
+		</defs>
 		<g>
 			<path
-				style="fill:${eraserColor}"
+				style="fill:${mode === EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor}"
 				stroke="black"
 				transform="rotate(41.35)"
 				d="M 52.5 27
@@ -835,7 +844,10 @@ class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     isRoundedTipPen(penStyle) {
-        return penStyle.factory === makeFreehandLineBuilder;
+        return penStyle.factory === makeFreehandLineBuilder || penStyle.factory === makePolylineBuilder;
+    }
+    isPolylinePen(penStyle) {
+        return penStyle.factory === makePolylineBuilder;
     }
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo() { return null; }

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

@@ -18,8 +18,9 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     cancel: string;
     submit: string;
     roundedTipPen: string;
+    roundedTipPen2: string;
     flatTipPen: string;
-    selectPenTip: string;
+    selectPenType: string;
     selectShape: string;
     colorLabel: string;
     pen: string;
@@ -30,6 +31,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     resizeImageToSelection: string;
     deleteSelection: string;
     duplicateSelection: string;
+    fullStrokeEraser: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
     colorSelectionCanceledAnnouncement: string;
@@ -66,7 +68,10 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     handDropdown__zoomOutHelpText: string;
     handDropdown__resetViewHelpText: string;
     handDropdown__touchPanningHelpText: string;
+    eraserDropdown__baseHelpText: string;
+    eraserDropdown__fullStrokeEraserHelpText: string;
     handDropdown__lockRotationHelpText: string;
+    eraserDropdown__thicknessHelpText: string;
     selectionDropdown__baseHelpText: string;
     selectionDropdown__resizeToHelpText: string;
     selectionDropdown__deleteHelpText: string;

package/dist/mjs/toolbar/localization.mjs

@@ -27,7 +27,8 @@ export const defaultToolbarLocalization = {
     save: 'Save',
     undo: 'Undo',
     redo: 'Redo',
-    selectPenTip: 'Pen tip',
+    fullStrokeEraser: 'Full stroke eraser',
+    selectPenType: 'Pen type',
     selectShape: 'Shape',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
@@ -45,6 +46,7 @@ export const defaultToolbarLocalization = {
     strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
+    roundedTipPen2: 'Polyline',
     flatTipPen: 'Flat',
     arrowPen: 'Arrow',
     linePen: 'Line',
@@ -59,7 +61,7 @@ export const defaultToolbarLocalization = {
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
     penDropdown__colorHelpText: 'Changes the pen\'s color',
     penDropdown__thicknessHelpText: 'Changes the thickness of strokes drawn by the pen.',
-    penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen tip” style or “shape” can be chosen. Choosing a “pen tip” style draws freehand lines. Choosing a “shape” draws shapes.',
+    penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen” style or “shape” can be chosen. Choosing a “pen” style draws freehand lines. Choosing a “shape” draws shapes.',
     penDropdown__autocorrectHelpText: 'Converts approximate freehand lines and rectangles to perfect ones.\n\nThe pen must be held stationary at the end of a stroke to trigger a correction.',
     penDropdown__stabilizationHelpText: 'Draws smoother strokes.\n\nThis also adds a short delay between the mouse/stylus and the stroke.',
     handDropdown__baseHelpText: 'This tool is responsible for scrolling, rotating, and zooming the editor.',
@@ -69,6 +71,9 @@ export const defaultToolbarLocalization = {
     handDropdown__zoomDisplayHelpText: 'Shows the current zoom level. 100% shows the image at its actual size.',
     handDropdown__touchPanningHelpText: 'When enabled, touch gestures move the image rather than select or draw.',
     handDropdown__lockRotationHelpText: 'When enabled, prevents touch gestures from rotating the screen.',
+    eraserDropdown__baseHelpText: 'This tool removes strokes, images, and text under the cursor.',
+    eraserDropdown__thicknessHelpText: 'Changes the size of the eraser.',
+    eraserDropdown__fullStrokeEraserHelpText: 'When in full-stroke mode, entire shapes are erased.\n\nWhen not in full-stroke mode, shapes can be partially erased.',
     selectionDropdown__baseHelpText: 'Selects content and manipulates the selection',
     selectionDropdown__resizeToHelpText: 'Crops the drawing to the size of what\'s currently selected.\n\nIf auto-resize is enabled, it will be disabled.',
     selectionDropdown__deleteHelpText: 'Erases selected items.',

package/dist/mjs/toolbar/widgets/EraserToolWidget.d.ts

@@ -1,15 +1,20 @@
 import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
 import { ToolbarLocalization } from '../localization';
+import HelpDisplay from '../utils/HelpDisplay';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class EraserToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
+    protected getHelpText(): string;
     protected getTitle(): string;
+    private makeIconForType;
     protected createIcon(): Element;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private static idCounter;
+    private makeEraserTypeSelector;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;
 }

package/dist/mjs/toolbar/widgets/EraserToolWidget.mjs

@@ -1,8 +1,9 @@
+import  { EraserMode }  from '../../tools/Eraser.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
-export default class EraserToolWidget extends BaseToolWidget {
+class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
@@ -14,26 +15,57 @@ export default class EraserToolWidget extends BaseToolWidget {
             }
         });
     }
+    getHelpText() {
+        return this.localizationTable.eraserDropdown__baseHelpText;
+    }
     getTitle() {
         return this.localizationTable.eraser;
     }
+    makeIconForType(mode) {
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness(), mode);
+    }
     createIcon() {
-        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+        return this.makeIconForType(this.tool.getModeValue().get());
+    }
+    makeEraserTypeSelector(helpDisplay) {
+        const container = document.createElement('div');
+        const labelElement = document.createElement('label');
+        const checkboxElement = document.createElement('input');
+        checkboxElement.id = `${toolbarCSSPrefix}eraserToolWidget-${EraserToolWidget.idCounter++}`;
+        labelElement.htmlFor = checkboxElement.id;
+        labelElement.innerText = this.localizationTable.fullStrokeEraser;
+        checkboxElement.type = 'checkbox';
+        checkboxElement.oninput = () => {
+            this.tool.getModeValue().set(checkboxElement.checked ? EraserMode.FullStroke : EraserMode.PartialStroke);
+        };
+        const updateValue = () => {
+            checkboxElement.checked = this.tool.getModeValue().get() === EraserMode.FullStroke;
+        };
+        container.replaceChildren(labelElement, checkboxElement);
+        helpDisplay?.registerTextHelpForElement(container, this.localizationTable.eraserDropdown__fullStrokeEraserHelpText);
+        return {
+            addTo: (parent) => {
+                parent.appendChild(container);
+            },
+            updateValue,
+        };
     }
-    fillDropdown(dropdown) {
+    fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
         const thicknessSlider = makeThicknessSlider(this.editor, thickness => {
             this.tool.setThickness(thickness);
         });
         thicknessSlider.setBounds(10, 55);
+        helpDisplay?.registerTextHelpForElement(thicknessSlider.container, this.localizationTable.eraserDropdown__thicknessHelpText);
+        const modeSelector = this.makeEraserTypeSelector(helpDisplay);
         this.updateInputs = () => {
             thicknessSlider.setValue(this.tool.getThickness());
+            modeSelector.updateValue();
         };
         this.updateInputs();
-        const spacer = document.createElement('div');
-        spacer.style.height = '5px';
-        container.replaceChildren(thicknessSlider.container, spacer);
+        container.replaceChildren(thicknessSlider.container);
+        modeSelector.addTo(container);
         dropdown.replaceChildren(container);
         return true;
     }
@@ -41,6 +73,7 @@ export default class EraserToolWidget extends BaseToolWidget {
         return {
             ...super.serializeState(),
             thickness: this.tool.getThickness(),
+            mode: this.tool.getModeValue().get(),
         };
     }
     deserializeFrom(state) {
@@ -52,5 +85,13 @@ export default class EraserToolWidget extends BaseToolWidget {
             }
             this.tool.setThickness(parsedThickness);
         }
+        if (state.mode) {
+            const mode = state.mode;
+            if (Object.values(EraserMode).includes(mode)) {
+                this.tool.getModeValue().set(mode);
+            }
+        }
     }
 }
+EraserToolWidget.idCounter = 0;
+export default EraserToolWidget;

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -12,6 +12,7 @@ import  { selectStrokeTypeKeyboardShortcutIds }  from './keybindings.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
 import  makeGridSelector  from './components/makeGridSelector.mjs';
+import  { makePolylineBuilder }  from '../../components/builders/PolylineBuilder.mjs';
 class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);
@@ -21,6 +22,7 @@ class PenToolWidget extends BaseToolWidget {
         this.shapelikeIDs = ['pressure-sensitive-pen', 'freehand-pen'];
         // Additional client-specified pens.
         const additionalPens = editor.getCurrentSettings().pens?.additionalPenTypes ?? [];
+        const filterPens = editor.getCurrentSettings().pens?.filterPenTypes ?? (() => true);
         // Default pen types
         this.penTypes = [
             // Non-shape pens
@@ -34,6 +36,11 @@ class PenToolWidget extends BaseToolWidget {
                 id: 'freehand-pen',
                 factory: makeFreehandLineBuilder,
             },
+            {
+                name: this.localizationTable.roundedTipPen2,
+                id: 'polyline-pen',
+                factory: makePolylineBuilder,
+            },
             ...(additionalPens.filter(pen => !pen.isShapeBuilder)),
             // Shape pens
             {
@@ -67,7 +74,7 @@ class PenToolWidget extends BaseToolWidget {
                 factory: makeOutlinedCircleBuilder,
             },
             ...(additionalPens.filter(pen => pen.isShapeBuilder)),
-        ];
+        ].filter(filterPens);
         this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
@@ -111,7 +118,7 @@ class PenToolWidget extends BaseToolWidget {
             style.factory = record.factory;
         }
         const strokeFactory = record?.factory;
-        if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+        if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder || strokeFactory === makePolylineBuilder) {
             return this.editor.icons.makePenIcon(style);
         }
         else {
@@ -131,7 +138,7 @@ class PenToolWidget extends BaseToolWidget {
                 isShapeBuilder: penType.isShapeBuilder ?? false,
             };
         });
-        const penSelector = makeGridSelector(this.localizationTable.selectPenTip, this.getCurrentPenTypeIdx(), allChoices.filter(choice => !choice.isShapeBuilder));
+        const penSelector = makeGridSelector(this.localizationTable.selectPenType, this.getCurrentPenTypeIdx(), allChoices.filter(choice => !choice.isShapeBuilder));
         const shapeSelector = makeGridSelector(this.localizationTable.selectShape, this.getCurrentPenTypeIdx(), allChoices.filter(choice => choice.isShapeBuilder));
         const onSelectorUpdate = (newPenTypeIndex) => {
             this.tool.setStrokeFactory(this.penTypes[newPenTypeIndex].factory);

package/dist/mjs/toolbar/widgets/PenToolWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/widgets/keybindings.mjs

@@ -3,7 +3,7 @@ import  KeyboardShortcutManager  from '../../shortcuts/KeyboardShortcutManager.m
 export const resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(resizeImageToSelectionKeyboardShortcut, ['ctrlOrMeta+r'], 'Resize image to selection');
 // Pen tool
-export const selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7].map(id => `jsdraw.toolbar.PenTool.select-pen-${id}`);
+export const selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(id => `jsdraw.toolbar.PenTool.select-pen-${id}`);
 for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
     const id = selectStrokeTypeKeyboardShortcutIds[i];
     KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, [`CtrlOrMeta+Digit${(i + 1)}`], 'Select pen style ' + (i + 1));

package/dist/mjs/tools/Eraser.d.ts

@@ -2,30 +2,50 @@ import { KeyPressEvent, PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
 import { MutableReactiveValue } from '../util/ReactiveValue';
+export declare enum EraserMode {
+    PartialStroke = "partial-stroke",
+    FullStroke = "full-stroke"
+}
+export interface InitialEraserOptions {
+    thickness?: number;
+    mode?: EraserMode;
+}
 export default class Eraser extends BaseTool {
     private editor;
     private lastPoint;
     private isFirstEraseEvt;
-    private toRemove;
     private thickness;
     private thicknessValue;
-    private partialCommands;
-    constructor(editor: Editor, description: string);
+    private modeValue;
+    private toRemove;
+    private toAdd;
+    private eraseCommands;
+    private addCommands;
+    constructor(editor: Editor, description: string, options?: InitialEraserOptions);
     private clearPreview;
     private getSizeOnCanvas;
     private drawPreviewAt;
+    /**
+     * @returns the eraser rectangle in canvas coordinates.
+     *
+     * For now, all erasers are rectangles or points.
+     */
     private getEraserRect;
+    /** Erases in a line from the last point to the current. */
     private eraseTo;
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
     onKeyPress(event: KeyPressEvent): boolean;
+    /** Returns the side-length of the tip of this eraser. */
     getThickness(): number;
+    /** Sets the side-length of this' tip. */
+    setThickness(thickness: number): void;
     /**
      * Returns a {@link MutableReactiveValue} that can be used to watch
      * this tool's thickness.
      */
     getThicknessValue(): MutableReactiveValue<number>;
-    setThickness(thickness: number): void;
+    getModeValue(): MutableReactiveValue<EraserMode>;
 }