js-draw 1.16.1 → 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.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
-                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/components/builders/autocorrect/makeShapeFitAutocorrect.mjs

@@ -83,7 +83,7 @@ class ShapeFitBuilder {
                 // Find the closest point to the startPoint
                 for (let i = 0; i < templatePoints.length; i++) {
                     const current = templatePoints[i];
-                    const currentSqrDist = current.minus(startPoint).magnitudeSquared();
+                    const currentSqrDist = current.squareDistanceTo(startPoint);
                     if (!closestToFirst || currentSqrDist < closestToFirstSqrDist) {
                         closestToFirstSqrDist = currentSqrDist;
                         closestToFirst = current;

package/dist/mjs/components/lib.d.ts

@@ -1,5 +1,6 @@
 export * from './builders/types';
 export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+export { makePolylineBuilder } from './builders/PolylineBuilder';
 export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
 export { makeOutlinedCircleBuilder } from './builders/CircleBuilder';
 export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/StrokeSmoother';

package/dist/mjs/components/lib.mjs

@@ -1,5 +1,6 @@
 export  *  from './builders/types.mjs';
 export  { makeFreehandLineBuilder }  from './builders/FreehandLineBuilder.mjs';
+export  { makePolylineBuilder }  from './builders/PolylineBuilder.mjs';
 export  { makePressureSensitiveFreehandLineBuilder }  from './builders/PressureSensitiveFreehandLineBuilder.mjs';
 export  { makeOutlinedCircleBuilder }  from './builders/CircleBuilder.mjs';
 export  { default as StrokeSmoother }  from './util/StrokeSmoother.mjs';

package/dist/mjs/components/util/StrokeSmoother.mjs

@@ -38,8 +38,8 @@ export class StrokeSmoother {
         const startPt = this.currentCurve.p0;
         const controlPt = this.currentCurve.p1;
         const endPt = this.currentCurve.p2;
-        const toControlDist = startPt.minus(controlPt).length();
-        const toEndDist = endPt.minus(controlPt).length();
+        const toControlDist = startPt.distanceTo(controlPt);
+        const toEndDist = endPt.distanceTo(controlPt);
         return toControlDist + toEndDist;
     }
     finalizeCurrentCurve() {
@@ -96,7 +96,7 @@ export class StrokeSmoother {
                 return;
             }
             const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
-            const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+            const shouldSnapToInitial = this.startPoint.pos.distanceTo(newPoint.pos) < threshold
                 && this.isFirstSegment;
             // Snap to the starting point if the stroke is contained within a small ball centered
             // at the starting point.
@@ -147,7 +147,7 @@ export class StrokeSmoother {
         const maxRelativeLength = 1.7;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
-        const startEndDist = segmentEnd.minus(segmentStart).magnitude();
+        const startEndDist = segmentEnd.distanceTo(segmentStart);
         const maxControlPointDist = maxRelativeLength * startEndDist;
         // Exit in cases where we would divide by zero
         if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {

package/dist/mjs/image/EditorImage.d.ts

@@ -105,7 +105,10 @@ export default class EditorImage {
     getImportExportRect(): Rect2;
     /**
      * Sets the import/export rectangle to the given `imageRect`. Disables
-     * autoresize (if it was previously enabled).
+     * autoresize if it was previously enabled.
+     *
+     * **Note**: The import/export rectangle is the same as the size of any
+     * {@link BackgroundComponent}s (and other components that auto-resize).
      */
     setImportExportRect(imageRect: Rect2): SerializableCommand;
     /** @see {@link setAutoresizeEnabled} */

package/dist/mjs/image/EditorImage.mjs

@@ -205,7 +205,10 @@ class EditorImage {
     }
     /**
      * Sets the import/export rectangle to the given `imageRect`. Disables
-     * autoresize (if it was previously enabled).
+     * autoresize if it was previously enabled.
+     *
+     * **Note**: The import/export rectangle is the same as the size of any
+     * {@link BackgroundComponent}s (and other components that auto-resize).
      */
     setImportExportRect(imageRect) {
         return _a.SetImportExportRectCommand.of(this, imageRect, false);
@@ -626,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/inputEvents.d.ts

@@ -53,7 +53,7 @@ export interface KeyUpEvent extends BaseKeyEvent {
 }
 export interface CopyEvent {
     readonly kind: InputEvtType.CopyEvent;
-    setData(mime: string, data: string): void;
+    setData(mime: string, data: string | Promise<Blob>): void;
 }
 export interface PasteEvent {
     readonly kind: InputEvtType.PasteEvent;
@@ -76,7 +76,17 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
+/**
+ * An internal `js-draw` pointer event type.
+ *
+ * This **is not** the same as a DOM pointer event.
+ */
 export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+/**
+ * An internal `js-draw` input event type.
+ *
+ * These are not DOM events.
+ */
 export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
 export declare const keyUpEventFromHTMLEvent: (event: KeyboardEvent) => KeyUpEvent;
 export declare const keyPressEventFromHTMLEvent: (event: KeyboardEvent) => KeyPressEvent;

package/dist/mjs/localizations/comments.d.ts

@@ -1,6 +1,9 @@
 import { EditorLocalization } from '../localization';
 /**
  * Comments to help translators create translations.
+ *
+ * The key for each comment should be the same as is used in the
+ * translation and original source records.
  */
 declare const comments: Partial<Record<keyof EditorLocalization, string>>;
 export default comments;

package/dist/mjs/localizations/comments.mjs

@@ -1,5 +1,8 @@
 /**
  * Comments to help translators create translations.
+ *
+ * The key for each comment should be the same as is used in the
+ * translation and original source records.
  */
 const comments = {
     pen: 'Likely unused',

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',
@@ -109,8 +109,6 @@ const localization = {
     soundExplorer: 'Klangbasierte Bilderkundung',
     disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung',
     enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung',
-    copied: (count, description) => `${count} ${description} kopiert`,
-    pasted: (count, description) => `${count} ${description} eingefügt`,
     unionOf: (actionDescription, actionCount) => `Vereinigung: ${actionCount} ${actionDescription}`,
     emptyBackground: 'Leerer Hintergrund',
     filledBackgroundWithColor: (color) => `Gefüllter Hintergrund (${color})`,

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',
@@ -61,8 +61,8 @@ const localization = {
     toNextMatch: 'Próxima',
     closeDialog: 'Cerrar',
     anyDevicePanning: 'Mover la pantalla con todo dispotivo',
-    copied: (count, description) => `Copied ${count} ${description}`,
-    pasted: (count, description) => `Pasted ${count} ${description}`,
+    copied: (count) => `${count} cosas fueron copiados`,
+    pasted: (count) => count === 1 ? 'Pegado' : `${count} cosas fueron pegados`,
     toolEnabledAnnouncement: (toolName) => `${toolName} fue activado`,
     toolDisabledAnnouncement: (toolName) => `${toolName} fue desactivado`,
     resizeOutputCommand: (newSize) => `Tamaño de imagen fue cambiado a ${newSize.w}x${newSize.h}`,

package/dist/mjs/rendering/renderers/CanvasRenderer.d.ts

@@ -58,4 +58,11 @@ export default class CanvasRenderer extends AbstractRenderer {
     endObject(): void;
     drawPoints(...points: Point2[]): void;
     isTooSmallToRender(rect: Rect2): boolean;
+    static fromViewport(exportViewport: Viewport, options?: {
+        canvasSize?: Vec2;
+        maxCanvasDimen?: number;
+    }): {
+        renderer: CanvasRenderer;
+        element: HTMLCanvasElement;
+    };
 }

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -245,4 +245,20 @@ export default class CanvasRenderer extends AbstractRenderer {
         const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
         return bothTooSmall || anyTooSmall;
     }
+    // @internal
+    static fromViewport(exportViewport, options = {}) {
+        const canvas = document.createElement('canvas');
+        const exportRectSize = exportViewport.getScreenRectSize();
+        let canvasSize = options.canvasSize ?? exportRectSize;
+        if (options.maxCanvasDimen && canvasSize.maximumEntryMagnitude() > options.maxCanvasDimen) {
+            canvasSize = canvasSize.times(options.maxCanvasDimen / canvasSize.maximumEntryMagnitude());
+        }
+        canvas.width = canvasSize.x;
+        canvas.height = canvasSize.y;
+        const ctx = canvas.getContext('2d');
+        // Scale to ensure that the entire output is visible.
+        const scaleFactor = Math.min(canvasSize.x / exportRectSize.x, canvasSize.y / exportRectSize.y);
+        ctx.scale(scaleFactor, scaleFactor);
+        return { renderer: new CanvasRenderer(ctx, exportViewport), element: canvas };
+    }
 }

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -110,7 +110,7 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         if (style.stroke) {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-            pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
+            pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width * this.getSizeOfCanvasPixelOnScreen()));
         }
         this.elem.appendChild(pathElem);
         this.objectElems?.push(pathElem);

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,10 +1,12 @@
 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, etc.
- * Extend this class and override methods to customize icons.
+ * Provides icons that can be used in the toolbar and other locations.
+ *
+ * To customize the icons used by the editor, extend this class and override methods.
  *
  * @example
  * ```ts,runnable
@@ -12,7 +14,7 @@ export type IconElemType = HTMLImageElement | SVGElement;
  *
  * class CustomIconProvider extends jsdraw.IconProvider {
  *     // Use '☺' instead of the default dropdown symbol.
- *     public makeDropdownIcon() {
+ *     public override makeDropdownIcon() {
  *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  *         icon.innerHTML = `
  *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
@@ -24,6 +26,8 @@ export type IconElemType = HTMLImageElement | SVGElement;
  *
  * const icons = new CustomIconProvider();
  * const editor = new jsdraw.Editor(document.body, {
+ *     // The icon pack to use is specified through the editor's initial
+ *     // configuration object:
  *     iconProvider: icons,
  * });
  *
@@ -36,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;
@@ -85,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);'
@@ -57,8 +59,9 @@ const makeRedoIcon = (mirror) => {
     return icon;
 };
 /**
- * Provides icons that can be used in the toolbar, etc.
- * Extend this class and override methods to customize icons.
+ * Provides icons that can be used in the toolbar and other locations.
+ *
+ * To customize the icons used by the editor, extend this class and override methods.
  *
  * @example
  * ```ts,runnable
@@ -66,7 +69,7 @@ const makeRedoIcon = (mirror) => {
  *
  * class CustomIconProvider extends jsdraw.IconProvider {
  *     // Use '☺' instead of the default dropdown symbol.
- *     public makeDropdownIcon() {
+ *     public override makeDropdownIcon() {
  *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  *         icon.innerHTML = `
  *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
@@ -78,6 +81,8 @@ const makeRedoIcon = (mirror) => {
  *
  * const icons = new CustomIconProvider();
  * const editor = new jsdraw.Editor(document.body, {
+ *     // The icon pack to use is specified through the editor's initial
+ *     // configuration object:
  *     iconProvider: icons,
  * });
  *
@@ -92,7 +97,6 @@ class IconProvider {
     makeUndoIcon() {
         return makeRedoIcon(true);
     }
-    // @param mirror - reflect across the x-axis. This parameter is internal.
     // @returns a redo icon.
     makeRedoIcon() {
         return makeRedoIcon(false);
@@ -110,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
@@ -833,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;