js-draw 0.7.2 → 0.9.0

package/src/components/util/StrokeSmoother.ts

@@ -0,0 +1,290 @@
+import { Bezier } from 'bezier-js';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import LineSegment2 from '../../math/LineSegment2';
+import { StrokeDataPoint } from '../../types';
+
+export interface Curve {
+    startPoint: Vec2;
+    startWidth: number;
+
+    controlPoint: Vec2;
+
+    endWidth: number;
+    endPoint: Vec2;
+}
+
+type OnCurveAddedCallback = (curve: Curve|null)=>void;
+
+// Handles stroke smoothing
+export class StrokeSmoother {
+	private isFirstSegment: boolean = true;
+
+	private buffer: Point2[];
+	private lastPoint: StrokeDataPoint;
+	private lastExitingVec: Vec2|null = null;
+	private currentCurve: Bezier|null = null;
+	private curveStartWidth: number;
+	private curveEndWidth: number;
+
+	// Stroke smoothing and tangent approximation
+	private momentum: Vec2;
+	private bbox: Rect2;
+
+	public constructor(
+		private startPoint: StrokeDataPoint,
+
+		// Maximum distance from the actual curve (irrespective of stroke width)
+		// for which a point is considered 'part of the curve'.
+		// Note that the maximum will be smaller if the stroke width is less than
+		// [maxFitAllowed].
+		private minFitAllowed: number,
+		private maxFitAllowed: number,
+
+        private onCurveAdded: OnCurveAddedCallback,
+	) {
+		this.lastPoint = this.startPoint;
+
+		this.buffer = [this.startPoint.pos];
+		this.momentum = Vec2.zero;
+		this.currentCurve = null;
+		this.curveStartWidth = startPoint.width;
+
+		this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+	}
+
+	public getBBox(): Rect2 {
+		return this.bbox;
+	}
+
+	public preview(): Curve|null {
+		if (!this.currentCurve) {
+			return null;
+		}
+
+		return this.currentSegmentToPath();
+	}
+
+	// Returns the distance between the start, control, and end points of the curve.
+	private approxCurrentCurveLength() {
+		if (!this.currentCurve) {
+			return 0;
+		}
+		const startPt = Vec2.ofXY(this.currentCurve.points[0]);
+		const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
+		const endPt = Vec2.ofXY(this.currentCurve.points[2]);
+		const toControlDist = startPt.minus(controlPt).length();
+		const toEndDist = endPt.minus(controlPt).length();
+		return toControlDist + toEndDist;
+	}
+
+	public finalizeCurrentCurve() {
+		// Case where no points have been added
+		if (!this.currentCurve) {
+			return;
+		}
+
+		this.onCurveAdded(this.currentSegmentToPath());
+
+		const lastPoint = this.buffer[this.buffer.length - 1];
+		this.lastExitingVec = Vec2.ofXY(
+			this.currentCurve.points[2]
+		).minus(Vec2.ofXY(this.currentCurve.points[1]));
+		console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
+
+		// Use the last two points to start a new curve (the last point isn't used
+		// in the current curve and we want connected curves to share end points)
+		this.buffer = [
+			this.buffer[this.buffer.length - 2], lastPoint,
+		];
+		this.currentCurve = null;
+	}
+
+	// Returns [upper curve, connector, lower curve]
+	private currentSegmentToPath() {
+		if (this.currentCurve == null) {
+			throw new Error('Invalid State: currentCurve is null!');
+		}
+
+		const startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+
+		if (!isFinite(startVec.magnitude())) {
+			throw new Error(`startVec(${startVec}) is NaN or ∞`);
+		}
+
+		const startPt = Vec2.ofXY(this.currentCurve.get(0));
+		const endPt = Vec2.ofXY(this.currentCurve.get(1));
+		const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
+
+		return {
+			startPoint: startPt,
+			controlPoint,
+			endPoint: endPt,
+			startWidth: this.curveStartWidth,
+			endWidth: this.curveEndWidth,
+		};
+	}
+
+	// Compute the direction of the velocity at the end of this.buffer
+	private computeExitingVec(): Vec2 {
+		return this.momentum.normalized().times(this.lastPoint.width / 2);
+	}
+
+	public addPoint(newPoint: StrokeDataPoint) {
+		if (this.lastPoint) {
+			// Ignore points that are identical
+			const fuzzEq = 1e-10;
+			const deltaTime = newPoint.time - this.lastPoint.time;
+			if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
+				return;
+			} else if (isNaN(newPoint.pos.magnitude())) {
+				console.warn('Discarding NaN point.', newPoint);
+				return;
+			}
+
+			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
+			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+				&& this.isFirstSegment;
+
+			// Snap to the starting point if the stroke is contained within a small ball centered
+			// at the starting point.
+			// This allows us to create a circle/dot at the start of the stroke.
+			if (shouldSnapToInitial) {
+				return;
+			}
+
+			const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
+			this.momentum = this.momentum.lerp(velocity, 0.9);
+		}
+
+		const lastPoint = this.lastPoint ?? newPoint;
+		this.lastPoint = newPoint;
+
+		this.buffer.push(newPoint.pos);
+		const pointRadius = newPoint.width / 2;
+		const prevEndWidth = this.curveEndWidth;
+		this.curveEndWidth = pointRadius;
+
+		if (this.isFirstSegment) {
+			// The start of a curve often lacks accurate pressure information. Update it.
+			this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+		}
+
+		// recompute bbox
+		this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
+
+		if (this.currentCurve === null) {
+			const p1 = lastPoint.pos;
+			const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
+			const p3 = newPoint.pos;
+
+			// Quadratic Bézier curve
+			this.currentCurve = new Bezier(
+				p1.xy, p2.xy, p3.xy
+			);
+			this.curveStartWidth = lastPoint.width / 2;
+			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+		}
+
+		// If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
+		let enteringVec = this.lastExitingVec;
+		if (!enteringVec) {
+			let sampleIdx = Math.ceil(this.buffer.length / 2);
+			if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
+				sampleIdx = this.buffer.length - 1;
+			}
+
+			enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
+		}
+
+		let exitingVec = this.computeExitingVec();
+
+		// Find the intersection between the entering vector and the exiting vector
+		const maxRelativeLength = 2.2;
+		const segmentStart = this.buffer[0];
+		const segmentEnd = newPoint.pos;
+		const startEndDist = segmentEnd.minus(segmentStart).magnitude();
+		const maxControlPointDist = maxRelativeLength * startEndDist;
+
+		// Exit in cases where we would divide by zero
+		if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
+			return;
+		}
+
+		console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
+
+		enteringVec = enteringVec.normalized();
+		exitingVec = exitingVec.normalized();
+
+		console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
+
+		const lineFromStart = new LineSegment2(
+			segmentStart,
+			segmentStart.plus(enteringVec.times(maxControlPointDist))
+		);
+		const lineFromEnd = new LineSegment2(
+			segmentEnd.minus(exitingVec.times(maxControlPointDist)),
+			segmentEnd
+		);
+		const intersection = lineFromEnd.intersection(lineFromStart);
+
+		// Position the control point at this intersection
+		let controlPoint: Point2|null = null;
+		if (intersection) {
+			controlPoint = intersection.point;
+		}
+
+		// No intersection or the intersection is one of the end points?
+		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
+			// Position the control point closer to the first -- the connecting
+			// segment will be roughly a line.
+			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 3));
+		}
+
+		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
+		console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
+
+		const prevCurve = this.currentCurve;
+		this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
+
+		if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
+			console.error('NaN normal at 0. Curve:', this.currentCurve);
+			this.currentCurve = prevCurve;
+		}
+
+		// Should we start making a new curve? Check whether all buffer points are within
+		// ±strokeWidth of the curve.
+		const curveMatchesPoints = (curve: Bezier): boolean => {
+			for (const point of this.buffer) {
+				const proj =
+					Vec2.ofXY(curve.project(point.xy));
+				const dist = proj.minus(point).magnitude();
+
+				const minFit = Math.max(
+					Math.min(this.curveStartWidth, this.curveEndWidth) / 3,
+					this.minFitAllowed
+				);
+				if (dist > minFit || dist > this.maxFitAllowed) {
+					return false;
+				}
+			}
+			return true;
+		};
+
+		if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
+			if (!curveMatchesPoints(this.currentCurve)) {
+				// Use a curve that better fits the points
+				this.currentCurve = prevCurve;
+				this.curveEndWidth = prevEndWidth;
+
+				// Reset the last point -- the current point was not added to the curve.
+				this.lastPoint = lastPoint;
+
+				this.finalizeCurrentCurve();
+				return;
+			}
+		}
+	}
+}
+
+export default StrokeSmoother;

package/src/math/Mat33.ts

@@ -274,6 +274,11 @@ export default class Mat33 {
 		);
 	}
 
+	/** Estimate the scale factor of this matrix (based on the first row). */
+	public getScaleFactor() {
+		return Math.hypot(this.a1, this.a2);
+	}
+
 	/** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
 	public static translation(amount: Vec2): Mat33 {
 		// When transforming Vec2s by a 3x3 matrix, we give the input

package/src/math/Path.test.ts

@@ -146,4 +146,53 @@ describe('Path', () => {
 			).toBe(false);
 		});
 	});
+
+	describe('roughlyIntersects', () => {
+		it('should consider parts outside bbox of individual parts of a line as not intersecting', () => {
+			const path = Path.fromString(`
+				M10,10
+				L20,20
+				L100,21
+			`);
+			expect(
+				path.roughlyIntersects(new Rect2(0, 0, 50, 50))
+			).toBe(true);
+			expect(
+				path.roughlyIntersects(new Rect2(0, 0, 5, 5))
+			).toBe(false);
+			expect(
+				path.roughlyIntersects(new Rect2(8, 22, 1, 1))
+			).toBe(false);
+			expect(
+				path.roughlyIntersects(new Rect2(21, 11, 1, 1))
+			).toBe(false);
+			expect(
+				path.roughlyIntersects(new Rect2(50, 19, 1, 2))
+			).toBe(true);
+		});
+	});
+
+	describe('fromRect', () => {
+		const filledRect = Path.fromRect(Rect2.unitSquare);
+		const strokedRect = Path.fromRect(Rect2.unitSquare, 0.1);
+
+		it('filled should be closed shape', () => {
+			const lastSegment = filledRect.parts[filledRect.parts.length - 1];
+
+			if (lastSegment.kind !== PathCommandType.LineTo) {
+				throw new Error('Rectangles should only be made up of lines');
+			}
+
+			expect(filledRect.startPoint).objEq(lastSegment.point);
+		});
+
+		it('stroked should be closed shape', () => {
+			const lastSegment = strokedRect.parts[strokedRect.parts.length - 1];
+			if (lastSegment.kind !== PathCommandType.LineTo) {
+				throw new Error('Rectangles should only be made up of lines');
+			}
+			
+			expect(strokedRect.startPoint).objEq(lastSegment.point);
+		});
+	});
 });

package/src/math/Path.ts

@@ -267,6 +267,51 @@ export default class Path {
 		]);
 	}
 
+	private getEndPoint() {
+		if (this.parts.length === 0) {
+			return this.startPoint;
+		}
+		const lastPart = this.parts[this.parts.length - 1];
+		if (lastPart.kind === PathCommandType.QuadraticBezierTo || lastPart.kind === PathCommandType.CubicBezierTo) {
+			return lastPart.endPoint;
+		} else {
+			return lastPart.point;
+		}
+	}
+
+	public roughlyIntersects(rect: Rect2, strokeWidth: number = 0) {
+		if (this.parts.length === 0) {
+			return rect.containsPoint(this.startPoint);
+		}
+		const isClosed = this.startPoint.eq(this.getEndPoint());
+        
+		if (isClosed && strokeWidth === 0) {
+			return this.closedRoughlyIntersects(rect);
+		}
+
+		if (rect.containsRect(this.bbox)) {
+			return true;
+		}
+
+		// Does the rectangle intersect the bounding boxes of any of this' parts?
+		let startPoint = this.startPoint;
+		for (const part of this.parts) {
+			const bbox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+
+			if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+				startPoint = part.point;
+			} else {
+				startPoint = part.endPoint;
+			}
+
+			if (rect.intersects(bbox)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
 	// Treats this as a closed path and returns true if part of `rect` is roughly within
 	// this path's interior.
 	//
@@ -356,6 +401,12 @@ export default class Path {
 			});
 		}
 
+		// Close the shape
+		commands.push({
+			kind: PathCommandType.LineTo,
+			point: startPoint,
+		});
+
 		return new Path(startPoint, commands);
 	}
 

package/src/rendering/renderers/CanvasRenderer.ts

@@ -94,6 +94,8 @@ export default class CanvasRenderer extends AbstractRenderer {
 		if (style.stroke) {
 			this.ctx.strokeStyle = style.stroke.color.toHexString();
 			this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
+			this.ctx.lineCap = 'round';
+			this.ctx.lineJoin = 'round';
 			this.ctx.stroke();
 		}
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -11,6 +11,8 @@ import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
+export const renderedStylesheetId = 'js-draw-style-sheet';
+
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStyle: RenderingStyle|null = null;
@@ -23,6 +25,23 @@ export default class SVGRenderer extends AbstractRenderer {
 	public constructor(private elem: SVGSVGElement, viewport: Viewport, private sanitize: boolean = false) {
 		super(viewport);
 		this.clear();
+
+		this.addStyleSheet();
+	}
+
+	private addStyleSheet() {
+		if (!this.elem.querySelector(`#${renderedStylesheetId}`)) {
+			// Default to rounded strokes.
+			const styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+			styleSheet.innerHTML = `
+				path {
+					stroke-linecap: round;
+					stroke-linejoin: round;
+				}
+			`.replace(/\s+/g, '');
+			styleSheet.setAttribute('id', renderedStylesheetId);
+			this.elem.appendChild(styleSheet);
+		}
 	}
 
 	// Sets an attribute on the root SVG element.
@@ -252,6 +271,11 @@ export default class SVGRenderer extends AbstractRenderer {
 			return;
 		}
 
+		// Don't add multiple copies of the default stylesheet.
+		if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === renderedStylesheetId) {
+			return;
+		}
+
 		this.elem.appendChild(elem.cloneNode(true));
 	}
 

package/src/toolbar/HTMLToolbar.ts

@@ -24,6 +24,8 @@ type UpdateColorisCallback = ()=>void;
 export default class HTMLToolbar {
 	private container: HTMLElement;
 
+	private widgets: Record<string, BaseWidget> = {};
+
 	private static colorisStarted: boolean = false;
 	private updateColoris: UpdateColorisCallback|null = null;
 
@@ -121,10 +123,41 @@ 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).
 	public addWidget(widget: BaseWidget) {
+		// Prevent name collisions
+		const id = widget.getUniqueIdIn(this.widgets);
+
+		// Add the widget
+		this.widgets[id] = widget;
+
+		// Add HTML elements.
 		widget.addTo(this.container);
 		this.setupColorPickers();
 	}
 
+	public serializeState(): string {
+		const result: Record<string, any> = {};
+
+		for (const widgetId in this.widgets) {
+			result[widgetId] = this.widgets[widgetId].serializeState();
+		}
+
+		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.
+	public deserializeState(state: string) {
+		const data = JSON.parse(state);
+
+		for (const widgetId in data) {
+			if (!(widgetId in this.widgets)) {
+				console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
+			}
+
+			this.widgets[widgetId].deserializeFrom(data[widgetId]);
+		}
+	}
+
 	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
 		const button = document.createElement('button');
 		button.classList.add(`${toolbarCSSPrefix}button`);

package/src/toolbar/IconProvider.ts

@@ -8,6 +8,9 @@ import Pen from '../tools/Pen';
 import { StrokeDataPoint } from '../types';
 import Viewport from '../Viewport';
 
+// Provides a default set of icons for the editor.
+// Many of the icons were created with Inkscape.
+
 type IconType = SVGSVGElement|HTMLImageElement;
 
 const svgNamespace = 'http://www.w3.org/2000/svg';
@@ -138,7 +141,7 @@ export default class IconProvider {
 		const strokeColor = 'var(--icon-color)';
 		const strokeWidth = '3';
 	
-		// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+		// Draw a cursor-like shape
 		return this.makeIconFromPath(`
 			m 10,60
 				5,30
@@ -275,6 +278,51 @@ export default class IconProvider {
 	
 		return icon;
 	}
+
+	public makeRotationLockIcon(): IconType {
+		const icon = this.makeIconFromPath(`
+			M 40.1 25.1 
+			C 32.5 25 27.9 34.1 27.9 34.1 
+			L 25.7 30 
+			L 28 44.7 
+			L 36.6 40.3 
+			L 32.3 38.3 
+			C 33.6 28 38.1 25.2 45.1 31.8 
+			L 49.4 29.6 
+			C 45.9 26.3 42.8 25.1 40.1 25.1 
+			z
+
+			M 51.7 34.2 
+			L 43.5 39.1 
+			L 48 40.8 
+			C 47.4 51.1 43.1 54.3 35.7 48.2 
+			L 31.6 50.7 
+			C 45.5 62.1 52.6 44.6 52.6 44.6 
+			L 55.1 48.6 
+			L 51.7 34.2 
+			z
+
+			M 56.9 49.9 
+			C 49.8 49.9 49.2 57.3 49.3 60.9 
+			L 47.6 60.9 
+			L 47.6 73.7 
+			L 66.1 73.7 
+			L 66.1 60.9 
+			L 64.4 60.9 
+			C 64.5 57.3 63.9 49.9 56.9 49.9 
+			z
+
+			M 56.9 53.5 
+			C 60.8 53.5 61 58.2 60.8 60.9 
+			L 52.9 60.9 
+			C 52.7 58.2 52.9 53.5 56.9 53.5 
+			z
+		`);
+
+		icon.setAttribute('viewBox', '10 10 70 70');
+
+		return icon;
+	}
 	
 	public makeTextIcon(textStyle: TextStyle): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');

package/src/toolbar/localization.ts

@@ -3,11 +3,13 @@
 export interface ToolbarLocalization {
 	fontLabel: string;
 	touchPanning: string;
+	lockRotation: string;
 	outlinedRectanglePen: string;
 	filledRectanglePen: string;
 	linePen: string;
 	arrowPen: string;
 	freehandPen: string;
+	pressureSensitiveFreehandPen: string;
 	selectObjectType: string;
 	colorLabel: string;
 	pen: string;
@@ -55,10 +57,12 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	touchPanning: 'Touchscreen panning',
 
 	freehandPen: 'Freehand',
+	pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
 	arrowPen: 'Arrow',
 	linePen: 'Line',
 	outlinedRectanglePen: 'Outlined rectangle',
 	filledRectanglePen: 'Filled rectangle',
+	lockRotation: 'Lock rotation',
 
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,

package/src/toolbar/makeColorInput.ts

@@ -4,10 +4,13 @@ import PipetteTool from '../tools/PipetteTool';
 import { EditorEventType } from '../types';
 
 type OnColorChangeListener = (color: Color4)=>void;
+type SetColorCallback = (color: Color4|string) => void;
 
+// Returns [ color input, input container, callback to change the color value ].
+export const makeColorInput = (
+	editor: Editor, onColorChange: OnColorChangeListener
+): [ HTMLInputElement, HTMLElement, SetColorCallback ] => {
 
-// Returns [ color input, input container ].
-export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListener): [ HTMLInputElement, HTMLElement ] => {
 	const colorInputContainer = document.createElement('span');
 	const colorInput = document.createElement('input');
 
@@ -31,6 +34,9 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 	const handleColorInput = () => {
 		currentColor = Color4.fromHex(colorInput.value);
 	};
+
+	// Only change the pen color when we finish sending input (this limits the number of
+	// editor events triggered and accessibility announcements).
 	const onInputEnd = () => {
 		handleColorInput();
 
@@ -61,7 +67,19 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 		onInputEnd();
 	});
 
-	return [ colorInput, colorInputContainer ];
+	const setColorInputValue = (color: Color4|string) => {
+		if (typeof color === 'object') {
+			color = color.toHexString();
+		}
+
+		colorInput.value = color;
+
+		// Fire all color event listeners. See
+		// https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
+		colorInput.dispatchEvent(new Event('input', { bubbles: true }));
+	};
+
+	return [ colorInput, colorInputContainer, setColorInputValue ];
 };
 
 const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -4,13 +4,16 @@ import BaseWidget from './BaseWidget';
 
 export default class ActionButtonWidget extends BaseWidget {
 	public constructor(
-		editor: Editor, localizationTable: ToolbarLocalization,
+		editor: Editor,
+		id: string,
+
         protected makeIcon: ()=> Element,
 		protected title: string,
-
         protected clickAction: ()=>void,
+
+        localizationTable?: ToolbarLocalization,
 	) {
-		super(editor, localizationTable);
+		super(editor, id, localizationTable);
 	}
 
 	protected handleClick() {