js-draw 0.11.3 → 0.13.0

package/dist/src/components/AbstractComponent.js

@@ -2,12 +2,15 @@ var _a;
 import SerializableCommand from '../commands/SerializableCommand';
 import EditorImage from '../EditorImage';
 import Mat33 from '../math/Mat33';
+/**
+ * A base class for everything that can be added to an {@link EditorImage}.
+ */
 export default class AbstractComponent {
     constructor(
     // A unique identifier for the type of component
     componentKind) {
         this.componentKind = componentKind;
-        // Get and manage data attached by a loader.
+        // Stores data attached by a loader.
         this.loadSaveData = {};
         this.lastChangedTime = (new Date()).getTime();
         this.zIndex = AbstractComponent.zIndexCounter++;
@@ -18,7 +21,7 @@ export default class AbstractComponent {
         }
     }
     // Returns a unique ID for this element.
-    // @see { @link EditorImage!default.lookupElement }
+    // @see { @link lib!EditorImage.lookupElement }
     getId() {
         return this.id;
     }
@@ -28,21 +31,47 @@ export default class AbstractComponent {
     static registerComponent(componentKind, deserialize) {
         this.deserializationCallbacks[componentKind] = deserialize !== null && deserialize !== void 0 ? deserialize : null;
     }
+    /**
+     * Attach data that can be used while exporting the component (e.g. to SVG).
+     *
+     * This is intended for use by a {@link ImageLoader}.
+     */
     attachLoadSaveData(key, data) {
         if (!this.loadSaveData[key]) {
             this.loadSaveData[key] = [];
         }
         this.loadSaveData[key].push(data);
     }
+    /** See {@link attachLoadSaveData} */
     getLoadSaveData() {
         return this.loadSaveData;
     }
     getZIndex() {
         return this.zIndex;
     }
+    /** @returns the bounding box of  */
     getBBox() {
         return this.contentBBox;
     }
+    /**
+     * @returns true if this component intersects `rect` -- it is entirely contained
+     *  within the rectangle or one of the rectangle's edges intersects this component.
+     */
+    intersectsRect(rect) {
+        // If this component intersects rect,
+        // it is either contained entirely within rect or intersects one of rect's edges.
+        // If contained within,
+        if (rect.containsRect(this.getBBox())) {
+            return true;
+        }
+        // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+        // As such, test with more lines than just the rect's edges.
+        const testLines = [];
+        for (const subregion of rect.divideIntoGrid(2, 2)) {
+            testLines.push(...subregion.getEdges());
+        }
+        return testLines.some(edge => this.intersects(edge));
+    }
     // Returns a command that, when applied, transforms this by [affineTransfm] and
     // updates the editor.
     transformBy(affineTransfm) {
@@ -183,6 +212,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
                 hadParent = true;
             }
             this.component.applyTransformation(newTransfm);
+            this.component.lastChangedTime = (new Date()).getTime();
             // Add the element back to the document.
             if (hadParent) {
                 EditorImage.addElement(this.component).apply(editor);

package/dist/src/lib.d.ts

@@ -8,22 +8,25 @@
  * ```
  *
  * @see
- * {@link Editor!}
+ * {@link Editor}
  *
  * @packageDocumentation
  */
-import Editor from './Editor';
+import Editor, { EditorSettings } from './Editor';
 export { default as EditorImage } from './EditorImage';
 export * from './types';
 export { default as getLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
 export { default as Color4 } from './Color4';
+export { default as SVGLoader } from './SVGLoader';
+export { default as Viewport } from './Viewport';
 export * from './math/lib';
 export * from './components/lib';
 export * from './commands/lib';
 export * from './tools/lib';
 export * from './toolbar/lib';
+export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
-export { Editor };
+export { Editor, EditorSettings };
 export default Editor;

package/dist/src/lib.js

@@ -8,7 +8,7 @@
  * ```
  *
  * @see
- * {@link Editor!}
+ * {@link Editor}
  *
  * @packageDocumentation
  */
@@ -18,11 +18,14 @@ export * from './types';
 export { default as getLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
 export { default as Color4 } from './Color4';
+export { default as SVGLoader } from './SVGLoader';
+export { default as Viewport } from './Viewport';
 export * from './math/lib';
 export * from './components/lib';
 export * from './commands/lib';
 export * from './tools/lib';
 export * from './toolbar/lib';
+export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 export { Editor };

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

@@ -102,7 +102,7 @@ export default class Mat33 {
     static translation(amount: Vec2): Mat33;
     static zRotation(radians: number, center?: Point2): Mat33;
     static scaling2D(amount: number | Vec2, center?: Point2): Mat33;
-    /** @see {@link !fromCSSMatrix} */
+    /** @see {@link fromCSSMatrix} */
     toCSSMatrix(): string;
     /**
      * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.

package/dist/src/math/Mat33.js

@@ -241,7 +241,7 @@ export default class Mat33 {
         // Translate such that [center] goes to (0, 0)
         return result.rightMul(Mat33.translation(center.times(-1)));
     }
-    /** @see {@link !fromCSSMatrix} */
+    /** @see {@link fromCSSMatrix} */
     toCSSMatrix() {
         return `matrix(${this.a1},${this.b1},${this.a2},${this.b2},${this.a3},${this.b3})`;
     }

package/dist/src/rendering/Display.d.ts

@@ -1,3 +1,12 @@
+import AbstractRenderer from './renderers/AbstractRenderer';
+import { Editor } from '../Editor';
+import { Point2 } from '../math/Vec2';
+import RenderingCache from './caching/RenderingCache';
+import Color4 from '../Color4';
+export declare enum RenderingMode {
+    DummyRenderer = 0,
+    CanvasRenderer = 1
+}
 /**
  * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
  *
@@ -9,18 +18,7 @@
  * const center = Vec2.of(w / 2, h / 2);
  * const colorAtCenter = editor.display.getColorAt(center);
  * ```
- *
- * @packageDocumentation
  */
-import AbstractRenderer from './renderers/AbstractRenderer';
-import { Editor } from '../Editor';
-import { Point2 } from '../math/Vec2';
-import RenderingCache from './caching/RenderingCache';
-import Color4 from '../Color4';
-export declare enum RenderingMode {
-    DummyRenderer = 0,
-    CanvasRenderer = 1
-}
 export default class Display {
     private editor;
     private parent;

package/dist/src/rendering/Display.js

@@ -1,17 +1,3 @@
-/**
- * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
- *
- * @example
- * ```
- * const editor = new Editor(document.body);
- * const w = editor.display.width;
- * const h = editor.display.height;
- * const center = Vec2.of(w / 2, h / 2);
- * const colorAtCenter = editor.display.getColorAt(center);
- * ```
- *
- * @packageDocumentation
- */
 import CanvasRenderer from './renderers/CanvasRenderer';
 import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
@@ -25,6 +11,18 @@ export var RenderingMode;
     RenderingMode[RenderingMode["CanvasRenderer"] = 1] = "CanvasRenderer";
     // SVGRenderer is not supported by the main display
 })(RenderingMode || (RenderingMode = {}));
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ */
 export default class Display {
     /** @internal */
     constructor(editor, mode, parent) {

package/dist/src/rendering/lib.d.ts

@@ -0,0 +1,3 @@
+export { default as AbstractRenderer } from './renderers/AbstractRenderer';
+export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as Display } from './Display';

package/dist/src/rendering/lib.js

@@ -0,0 +1,3 @@
+export { default as AbstractRenderer } from './renderers/AbstractRenderer';
+export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as Display } from './Display';

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

@@ -1,6 +1,6 @@
-// Renderer that outputs nothing. Useful for automated tests.
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
+// Renderer that outputs almost nothing. Useful for automated tests.
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {
         super(viewport);
@@ -17,7 +17,7 @@ export default class DummyRenderer extends AbstractRenderer {
     }
     displaySize() {
         // Do we have a stored viewport size?
-        const viewportSize = this.getViewport().getResolution();
+        const viewportSize = this.getViewport().getScreenRectSize();
         // Don't use a 0x0 viewport — DummyRenderer is often used
         // for tests that run without a display, so pretend we have a
         // reasonable-sized display.

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

@@ -31,6 +31,10 @@ export default class SVGRenderer extends AbstractRenderer {
 					stroke-linecap: round;
 					stroke-linejoin: round;
 				}
+
+				text {
+					white-space: pre;
+				}
 			`.replace(/\s+/g, '');
             styleSheet.setAttribute('id', renderedStylesheetId);
             this.elem.appendChild(styleSheet);

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

@@ -3,6 +3,11 @@ import { ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import BaseWidget from './widgets/BaseWidget';
 export declare const toolbarCSSPrefix = "toolbar-";
+interface SpacerOptions {
+    grow: number;
+    minSize: string;
+    maxSize: string;
+}
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
@@ -13,8 +18,45 @@ export default class HTMLToolbar {
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
+    /**
+     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+     * (i.e. its `addTo` method should not have been called).
+     *
+     * @example
+     * ```ts
+     * const toolbar = editor.addToolbar();
+     * const insertImageWidget = new InsertImageWidget(editor);
+     * toolbar.addWidget(insertImageWidget);
+     * ```
+     */
     addWidget(widget: BaseWidget): void;
+    /**
+     * Adds a spacer.
+     *
+     * @example
+     * Adding a save button that moves to the very right edge of the toolbar
+     * while keeping the other buttons centered:
+     * ```ts
+     * const toolbar = editor.addToolbar(false);
+     *
+     * toolbar.addSpacer({ grow: 1 });
+     * toolbar.addDefaults();
+     * toolbar.addSpacer({ grow: 1 });
+     *
+     * toolbar.addActionButton({
+     * 	label: 'Save',
+     * 	icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     * 	  saveCallback();
+     * });
+     * ```
+     */
+    addSpacer(options?: Partial<SpacerOptions>): void;
     serializeState(): string;
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
     deserializeState(state: string): void;
     /**
      * Adds an action button with `title` to this toolbar (or to the given `parent` element).
@@ -25,4 +67,13 @@ export default class HTMLToolbar {
     addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults(): void;
 }
+export {};

package/dist/src/toolbar/HTMLToolbar.js

@@ -12,7 +12,8 @@ import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
-import { ActionButtonWidget, InsertImageWidget } from './lib';
+import ActionButtonWidget from './widgets/ActionButtonWidget';
+import InsertImageWidget from './widgets/InsertImageWidget';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -94,8 +95,17 @@ export default class HTMLToolbar {
             }
         });
     }
-    // Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
-    // (i.e. its `addTo` method should not have been called).
+    /**
+     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+     * (i.e. its `addTo` method should not have been called).
+     *
+     * @example
+     * ```ts
+     * const toolbar = editor.addToolbar();
+     * const insertImageWidget = new InsertImageWidget(editor);
+     * toolbar.addWidget(insertImageWidget);
+     * ```
+     */
     addWidget(widget) {
         // Prevent name collisions
         const id = widget.getUniqueIdIn(this.widgets);
@@ -105,6 +115,41 @@ export default class HTMLToolbar {
         widget.addTo(this.container);
         this.setupColorPickers();
     }
+    /**
+     * Adds a spacer.
+     *
+     * @example
+     * Adding a save button that moves to the very right edge of the toolbar
+     * while keeping the other buttons centered:
+     * ```ts
+     * const toolbar = editor.addToolbar(false);
+     *
+     * toolbar.addSpacer({ grow: 1 });
+     * toolbar.addDefaults();
+     * toolbar.addSpacer({ grow: 1 });
+     *
+     * toolbar.addActionButton({
+     * 	label: 'Save',
+     * 	icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     * 	  saveCallback();
+     * });
+     * ```
+     */
+    addSpacer(options = {}) {
+        const spacer = document.createElement('div');
+        spacer.classList.add(`${toolbarCSSPrefix}spacer`);
+        if (options.grow) {
+            spacer.style.flexGrow = `${options.grow}`;
+        }
+        if (options.minSize) {
+            spacer.style.minWidth = options.minSize;
+        }
+        if (options.maxSize) {
+            spacer.style.maxWidth = options.maxSize;
+        }
+        this.container.appendChild(spacer);
+    }
     serializeState() {
         const result = {};
         for (const widgetId in this.widgets) {
@@ -112,8 +157,10 @@ export default class HTMLToolbar {
         }
         return JSON.stringify(result);
     }
-    // Deserialize toolbar widgets from the given state.
-    // Assumes that toolbar widgets are in the same order as when state was serialized.
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
     deserializeState(state) {
         const data = JSON.parse(state);
         for (const widgetId in data) {
@@ -188,5 +235,16 @@ export default class HTMLToolbar {
     addDefaultActionButtons() {
         this.addUndoRedoButtons();
     }
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults() {
+        this.addDefaultToolWidgets();
+        this.addDefaultActionButtons();
+    }
 }
 HTMLToolbar.colorisStarted = false;

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

@@ -7,7 +7,7 @@ export default class IconProvider {
     makeUndoIcon(): IconType;
     makeRedoIcon(mirror?: boolean): IconType;
     makeDropdownIcon(): IconType;
-    makeEraserIcon(): IconType;
+    makeEraserIcon(eraserSize?: number): IconType;
     makeSelectionIcon(): IconType;
     /**
      * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
@@ -21,7 +21,7 @@ export default class IconProvider {
     makeRotationLockIcon(): IconType;
     makeInsertImageIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
-    makePenIcon(tipThickness: number, color: string | Color4, roundedTip?: boolean): IconType;
+    makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;
     makeResizeViewportIcon(): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -30,7 +30,7 @@ export default class IconProvider {
     makeUndoIcon() {
         return this.makeRedoIcon(true);
     }
-    // @param mirror - reflect across the x-axis @internal
+    // @param mirror - reflect across the x-axis. This parameter is internal.
     // @returns a redo icon.
     makeRedoIcon(mirror = false) {
         const icon = document.createElementNS(svgNamespace, 'svg');
@@ -67,19 +67,46 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
-    makeEraserIcon() {
+    makeEraserIcon(eraserSize) {
         const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw an eraser-like shape
+        eraserSize !== null && eraserSize !== void 0 ? eraserSize : (eraserSize = 10);
+        const scaledSize = eraserSize / 4;
+        const eraserColor = '#ff70af';
+        // Draw an eraser-like shape. Created with Inkscape
         icon.innerHTML = `
 		<g>
-			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+			<path
+				style="fill:${eraserColor}"
+				stroke="black"
+				transform="rotate(41.35)"
+				d="M 52.5 27
+					C 50 28.9 48.9 31.7 48.9 34.8
+					L 48.9 39.8
+					C 48.9 45.3 53.4 49.8 58.9 49.8
+					L 103.9 49.8
+					C 105.8 49.8 107.6 49.2 109.1 48.3
+					L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
+					L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
+					C 113.4 43.5 113.9 41.7 113.9 39.8
+					L 113.9 34.8
+					C 113.9 29.3 109.4 24.8 103.9 24.8
+					L 58.9 24.8
+					C 56.5 24.8 54.3 25.7 52.5 27
+					z "
+				id="path438" />
+
 			<rect
-				x=10 y=10 width=80 height=50
+				stroke="#cc8077"
 				${iconColorFill}
-			/>
+				id="rect218"
+				width="65"
+				height="75"
+				x="48.9"
+				y="-38.7"
+				transform="rotate(41.35)" />
 		</g>
 		`;
-        icon.setAttribute('viewBox', '0 0 100 100');
+        icon.setAttribute('viewBox', '0 0 120 120');
         return icon;
     }
     makeSelectionIcon() {
@@ -309,45 +336,106 @@ export default class IconProvider {
         icon.appendChild(textNode);
         return icon;
     }
-    makePenIcon(tipThickness, color, roundedTip) {
+    makePenIcon(strokeSize, color, rounded) {
         if (color instanceof Color4) {
             color = color.toHexString();
         }
         const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
-        const halfThickness = tipThickness / 2;
-        // Draw a pen-like shape
-        const penTipLeft = 50 - halfThickness;
-        const penTipRight = 50 + halfThickness;
-        let tipCenterPrimaryPath = `L${penTipLeft},95 L${penTipRight},90`;
-        let tipCenterBackgroundPath = `L${penTipLeft},85 L${penTipRight},83`;
-        if (roundedTip) {
-            tipCenterPrimaryPath = `L${penTipLeft},95 q${halfThickness},10 ${2 * halfThickness},-5`;
-            tipCenterBackgroundPath = `L${penTipLeft},87 q${halfThickness},10 ${2 * halfThickness},-3`;
+        const tipThickness = strokeSize / 2;
+        const inkTipPath = `
+			M ${15 - tipThickness},${80 - tipThickness}
+			  ${15 - tipThickness},${80 + tipThickness}
+			  30,83
+			  15,65
+			Z
+		`;
+        const trailStartEndY = 80 + tipThickness;
+        const inkTrailPath = `
+			m ${15 - tipThickness * 1.1},${trailStartEndY}
+			c 35,10 55,15 60,30
+			l ${35 + tipThickness * 1.2},${-10 - tipThickness}
+			C 80.47,98.32 50.5,${90 + tipThickness} 20,${trailStartEndY} Z
+		`;
+        const colorBubblePath = `
+			M 72.45,35.67
+			A 10,15 41.8 0 1 55,40.2 10,15 41.8 0 1 57.55,22.3 10,15 41.8 0 1 75,17.8 10,15 41.8 0 1 72.5,35.67
+			Z
+		`;
+        let gripMainPath = 'M 85,-25 25,35 h 10 v 10 h 10 v 10 h 10 v 10 h 10 l -5,10 60,-60 z';
+        let gripShadow1Path = 'M 25,35 H 35 L 90,-15 85,-25 Z';
+        let gripShadow2Path = 'M 60,75 65,65 H 55 l 55,-55 10,5 z';
+        if (rounded) {
+            gripMainPath = 'M 85,-25 25,35 c 15,0 40,30 35,40 l 60,-60 z';
+            gripShadow1Path = 'm 25,35 c 3.92361,0.384473 7.644275,0.980572 10,3 l 55,-53 -5,-10 z';
+            gripShadow2Path = 'M 60,75 C 61,66 59,65 56,59 l 54,-54 10,10 z';
         }
-        const primaryStrokeTipPath = `M14,63 ${tipCenterPrimaryPath} L88,60 Z`;
-        const backgroundStrokeTipPath = `M14,63 ${tipCenterBackgroundPath} L88,60 Z`;
-        icon.innerHTML = `
-		<defs>
-			${checkerboardPatternDef}
-		</defs>
-		<g>
-			<!-- Pen grip -->
+        const penTipPath = `M 25,35 ${10 - tipThickness / 4},${70 - tipThickness / 2} 20,75 25,85 60,75 70,55 45,25 Z`;
+        const pencilTipColor = Color4.fromHex('#f4d7d7');
+        const tipColor = pencilTipColor.mix(Color4.fromString(color), tipThickness / 40 - 0.1).toHexString();
+        const ink = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTrailPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTrailPath}"
+			/>
+		`;
+        const penTip = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${penTipPath}"
+			/>
+			<path
+				fill="${tipColor}"
+				stroke="${color}"
+				d="${penTipPath}"
+			/>
+		`;
+        const grip = `
 			<path
-				d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
 				${iconColorStrokeFill}
+				d="${gripMainPath}"
+			/>
+
+			<!-- shadows -->
+			<path
+				fill="rgba(150, 150, 150, 0.3)"
+				d="${gripShadow1Path}"
 			/>
-		</g>
-		<g>
-			<!-- Checkerboard background for slightly transparent pens -->
-			<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
-	
-			<!-- Actual pen tip -->
 			<path
-				d='${primaryStrokeTipPath}'
-				fill='${color}'
-				stroke='${color}'
+				fill="rgba(100, 100, 100, 0.2)"
+				d="${gripShadow2Path}"
 			/>
+
+			<!-- color bubble -->
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${colorBubblePath}"
+			/>
+			<path
+				fill="${color}"
+				d="${colorBubblePath}"
+			/>
+		`;
+        icon.innerHTML = `
+		<defs>
+			${checkerboardPatternDef}
+		</defs>
+		<g>
+			${ink}
+			${penTip}
+			${grip}
 		</g>
 		`;
         return icon;

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

@@ -2,9 +2,16 @@ import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 export default class EraserToolWidget extends BaseToolWidget {
+    private tool;
+    private thicknessInput;
     constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
     protected getTitle(): string;
     protected createIcon(): Element;
-    protected fillDropdown(_dropdown: HTMLElement): boolean;
+    private updateInputs;
+    private static nextThicknessInputId;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }