js-draw 0.1.7 → 0.1.10

package/dist/src/Editor.d.ts

@@ -37,6 +37,7 @@ export declare class Editor {
     announceForAccessibility(message: string): void;
     addToolbar(defaultLayout?: boolean): HTMLToolbar;
     private registerListeners;
+    handleKeyEventsFrom(elem: HTMLElement): void;
     dispatch(command: Command, addToHistory?: boolean): void;
     dispatchNoAnnounce(command: Command, addToHistory?: boolean): void;
     private asyncApplyOrUnapplyCommands;

package/dist/src/Editor.js

@@ -23,11 +23,10 @@ import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
 import Mat33 from './geometry/Mat33';
-import { defaultEditorLocalization } from './localization';
+import getLocalizationTable from './localizations/getLocalizationTable';
 export class Editor {
     constructor(parent, settings = {}) {
         var _a, _b;
-        this.localization = defaultEditorLocalization;
         this.announceUndoCallback = (command) => {
             this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this.localization)));
         };
@@ -35,7 +34,7 @@ export class Editor {
             this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this.localization)));
         };
         this.rerenderQueued = false;
-        this.localization = Object.assign(Object.assign({}, this.localization), settings.localization);
+        this.localization = Object.assign(Object.assign({}, getLocalizationTable()), settings.localization);
         // Fill default settings.
         this.settings = {
             wheelEventsEnabled: (_a = settings.wheelEventsEnabled) !== null && _a !== void 0 ? _a : true,
@@ -176,18 +175,7 @@ export class Editor {
         this.renderingRegion.addEventListener('pointercancel', evt => {
             pointerEnd(evt);
         });
-        this.renderingRegion.addEventListener('keydown', evt => {
-            if (this.toolController.dispatchInputEvent({
-                kind: InputEvtType.KeyPressEvent,
-                key: evt.key,
-                ctrlKey: evt.ctrlKey,
-            })) {
-                evt.preventDefault();
-            }
-            else if (evt.key === 'Escape') {
-                this.renderingRegion.blur();
-            }
-        });
+        this.handleKeyEventsFrom(this.renderingRegion);
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
             // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
@@ -234,6 +222,31 @@ export class Editor {
             this.queueRerender();
         });
     }
+    // Adds event listners for keypresses to [elem] and forwards those events to the
+    // editor.
+    handleKeyEventsFrom(elem) {
+        elem.addEventListener('keydown', evt => {
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyPressEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey,
+            })) {
+                evt.preventDefault();
+            }
+            else if (evt.key === 'Escape') {
+                this.renderingRegion.blur();
+            }
+        });
+        elem.addEventListener('keyup', evt => {
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyUpEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey,
+            })) {
+                evt.preventDefault();
+            }
+        });
+    }
     // Adds to history by default
     dispatch(command, addToHistory = true) {
         if (addToHistory) {
@@ -301,6 +314,10 @@ export class Editor {
     }
     rerender(showImageBounds = true) {
         this.display.startRerender();
+        // Don't render if the display has zero size.
+        if (this.display.width === 0 || this.display.height === 0) {
+            return;
+        }
         // Draw a rectangle around the region that will be visible on save
         const renderer = this.display.getDryInkRenderer();
         this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);

package/dist/src/UndoRedoHistory.js

@@ -20,6 +20,9 @@ class UndoRedoHistory {
             command.apply(this.editor);
         }
         this.undoStack.push(command);
+        for (const elem of this.redoStack) {
+            elem.onDrop(this.editor);
+        }
         this.redoStack = [];
         this.fireUpdateEvent();
     }

package/dist/src/bundle/bundled.d.ts

@@ -1,4 +1,5 @@
 import '../styles';
 import Editor from '../Editor';
+import getLocalizationTable from '../localizations/getLocalizationTable';
 export default Editor;
-export { Editor };
+export { Editor, getLocalizationTable };

package/dist/src/bundle/bundled.js

@@ -1,5 +1,6 @@
 // Main entrypoint for Webpack when building a bundle for release.
 import '../styles';
 import Editor from '../Editor';
+import getLocalizationTable from '../localizations/getLocalizationTable';
 export default Editor;
-export { Editor };
+export { Editor, getLocalizationTable };

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

@@ -1,6 +1,7 @@
 import Rect2 from '../../geometry/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 export declare const makeFilledRectangleBuilder: ComponentBuilderFactory;
@@ -8,8 +9,9 @@ export declare const makeOutlinedRectangleBuilder: ComponentBuilderFactory;
 export default class RectangleBuilder implements ComponentBuilder {
     private readonly startPoint;
     private filled;
+    private viewport;
     private endPoint;
-    constructor(startPoint: StrokeDataPoint, filled: boolean);
+    constructor(startPoint: StrokeDataPoint, filled: boolean, viewport: Viewport);
     getBBox(): Rect2;
     private buildPreview;
     build(): AbstractComponent;

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

@@ -1,16 +1,18 @@
+import Mat33 from '../../geometry/Mat33';
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import Stroke from '../Stroke';
-export const makeFilledRectangleBuilder = (initialPoint, _viewport) => {
-    return new RectangleBuilder(initialPoint, true);
+export const makeFilledRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, true, viewport);
 };
-export const makeOutlinedRectangleBuilder = (initialPoint, _viewport) => {
-    return new RectangleBuilder(initialPoint, false);
+export const makeOutlinedRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, false, viewport);
 };
 export default class RectangleBuilder {
-    constructor(startPoint, filled) {
+    constructor(startPoint, filled, viewport) {
         this.startPoint = startPoint;
         this.filled = filled;
+        this.viewport = viewport;
         // Initially, the start and end points are the same.
         this.endPoint = startPoint;
     }
@@ -19,9 +21,16 @@ export default class RectangleBuilder {
         return preview.getBBox();
     }
     buildPreview() {
-        const startPoint = this.startPoint.pos;
-        const endPoint = this.endPoint.pos;
-        const path = Path.fromRect(Rect2.fromCorners(startPoint, endPoint), this.filled ? null : this.endPoint.width);
+        const canvasAngle = this.viewport.getRotationAngle();
+        const rotationMat = Mat33.zRotation(-canvasAngle);
+        // Adjust startPoint and endPoint such that applying [rotationMat] to them
+        // brings them to this.startPoint and this.endPoint.
+        const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+        const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+        const rect = Rect2.fromCorners(startPoint, endPoint);
+        const path = Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        // Rotate the canvas rectangle so that its rotation matches the screen
+        rotationMat);
         const preview = new Stroke([
             path.toRenderable({
                 fill: this.endPoint.color

package/dist/src/geometry/LineSegment2.d.ts

@@ -15,5 +15,6 @@ export default class LineSegment2 {
     get p2(): Point2;
     get(t: number): Point2;
     intersection(other: LineSegment2): IntersectionResult | null;
+    closestPointTo(target: Point2): import("./Vec3").default;
 }
 export {};

package/dist/src/geometry/LineSegment2.js

@@ -97,4 +97,20 @@ export default class LineSegment2 {
             t: resultT,
         };
     }
+    // Returns the closest point on this to [target]
+    closestPointTo(target) {
+        // Distance from P1 along this' direction.
+        const projectedDistFromP1 = target.minus(this.p1).dot(this.direction);
+        const projectedDistFromP2 = this.length - projectedDistFromP1;
+        const projection = this.p1.plus(this.direction.times(projectedDistFromP1));
+        if (projectedDistFromP1 > 0 && projectedDistFromP1 < this.length) {
+            return projection;
+        }
+        if (Math.abs(projectedDistFromP2) < Math.abs(projectedDistFromP1)) {
+            return this.p2;
+        }
+        else {
+            return this.p1;
+        }
+    }
 }

package/dist/src/geometry/Rect2.d.ts

@@ -30,6 +30,7 @@ export default class Rect2 {
     divideIntoGrid(columns: number, rows: number): Rect2[];
     grownToPoint(point: Point2, margin?: number): Rect2;
     grownBy(margin: number): Rect2;
+    getClosestPointOnBoundaryTo(target: Point2): import("./Vec3").default;
     get corners(): Point2[];
     get maxDimension(): number;
     get topRight(): import("./Vec3").default;

package/dist/src/geometry/Rect2.js

@@ -25,6 +25,7 @@ export default class Rect2 {
     translatedBy(vec) {
         return new Rect2(vec.x + this.x, vec.y + this.y, this.w, this.h);
     }
+    // Returns a copy of this with the given size (but same top-left).
     resizedTo(size) {
         return new Rect2(this.x, this.y, size.x, size.y);
     }
@@ -109,6 +110,21 @@ export default class Rect2 {
     grownBy(margin) {
         return new Rect2(this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2);
     }
+    getClosestPointOnBoundaryTo(target) {
+        const closestEdgePoints = this.getEdges().map(edge => {
+            return edge.closestPointTo(target);
+        });
+        let closest = null;
+        let closestDist = null;
+        for (const point of closestEdgePoints) {
+            const dist = point.minus(target).length();
+            if (closestDist === null || dist < closestDist) {
+                closest = point;
+                closestDist = dist;
+            }
+        }
+        return closest;
+    }
     get corners() {
         return [
             this.bottomRight,

package/dist/src/localizations/en.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/src/localizations/en.js

@@ -0,0 +1,4 @@
+import { defaultEditorLocalization } from '../localization';
+// Default localizations are already in English.
+const localization = Object.assign({}, defaultEditorLocalization);
+export default localization;

package/dist/src/localizations/es.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/src/localizations/es.js

@@ -0,0 +1,18 @@
+import { defaultEditorLocalization } from '../localization';
+// A partial Spanish localization.
+const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { 
+    // Strings for the main editor interface
+    // (see src/localization.ts)
+    loading: (percentage) => `Cargando: ${percentage}%...`, imageEditor: 'Editor de dibujos', undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`, redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`, undo: 'Deshace', redo: 'Rehace', 
+    // Strings for the toolbar
+    // (see src/toolbar/localization.ts)
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectObjectType: 'Forma de dibuja:', handTool: 'Mover', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFronScreen: 'Selecciona un color de la pantalla', dropdownShown(toolName) {
+        return `Menú por ${toolName} es visible`;
+    }, dropdownHidden: function (toolName) {
+        return `Menú por ${toolName} fue ocultado`;
+    }, colorChangedAnnouncement: function (color) {
+        return `Color fue cambiado a ${color}`;
+    }, keyboardPanZoom: 'Mover la pantalla con el teclado', penTool: function (penId) {
+        return `Lapiz ${penId}`;
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto' });
+export default localization;

package/dist/src/localizations/getLocalizationTable.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const getLocalizationTable: (userLocales?: readonly string[]) => EditorLocalization;
+export default getLocalizationTable;

package/dist/src/localizations/getLocalizationTable.js

@@ -0,0 +1,43 @@
+import { defaultEditorLocalization } from '../localization';
+import en from './en';
+import es from './es';
+const allLocales = {
+    en,
+    es,
+};
+// [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
+const languageFromLocale = (locale) => {
+    const matches = /^(\w+)[_-](\w+)$/.exec(locale);
+    if (!matches) {
+        // If not in languageCode_region format, the locale should be the
+        // languageCode. Return that.
+        return locale;
+    }
+    return matches[1];
+};
+const getLocalizationTable = (userLocales) => {
+    userLocales !== null && userLocales !== void 0 ? userLocales : (userLocales = navigator.languages);
+    let prevLanguage;
+    for (const locale of userLocales) {
+        const language = languageFromLocale(locale);
+        // If the specific localization of the language is not available, but
+        // a localization for the language is,
+        if (prevLanguage && language !== prevLanguage) {
+            if (prevLanguage in allLocales) {
+                return allLocales[prevLanguage];
+            }
+        }
+        // If the full locale (e.g. en_US) is available,
+        if (locale in allLocales) {
+            return allLocales[locale];
+        }
+        prevLanguage = language;
+    }
+    if (prevLanguage && prevLanguage in allLocales) {
+        return allLocales[prevLanguage];
+    }
+    else {
+        return defaultEditorLocalization;
+    }
+};
+export default getLocalizationTable;

package/dist/src/rendering/caching/RenderingCacheNode.js

@@ -44,6 +44,10 @@ export default class RenderingCacheNode {
     generateChildren() {
         if (this.instantiatedChildren.length === 0) {
             const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
+            if (this.region.size.x === 0 || this.region.size.y === 0) {
+                console.warn('Cache element has zero size! Not generating children.');
+                return;
+            }
             for (const rect of childRects) {
                 const child = new RenderingCacheNode(rect, this.cacheState);
                 child.parent = this;
@@ -283,7 +287,7 @@ export default class RenderingCacheNode {
     }
     checkRep() {
         if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
-            throw new Error('Repcheck: Wrong number of children');
+            throw new Error(`Repcheck: Wrong number of children. Got ${this.instantiatedChildren.length}`);
         }
         if (this.renderedIds[1] !== undefined && this.renderedIds[0] >= this.renderedIds[1]) {
             console.error(this.renderedIds);

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

@@ -6,6 +6,7 @@ export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
+    private static colorisStarted;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
     addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;

package/dist/src/toolbar/HTMLToolbar.js

@@ -23,7 +23,10 @@ export default class HTMLToolbar {
         this.container.classList.add(`${toolbarCSSPrefix}root`);
         this.container.setAttribute('role', 'toolbar');
         parent.appendChild(this.container);
-        colorisInit();
+        if (!HTMLToolbar.colorisStarted) {
+            colorisInit();
+            HTMLToolbar.colorisStarted = true;
+        }
         this.setupColorPickers();
     }
     setupColorPickers() {
@@ -105,13 +108,13 @@ export default class HTMLToolbar {
         const undoRedoGroup = document.createElement('div');
         undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
         const undoButton = this.addActionButton({
-            label: 'Undo',
+            label: this.localizationTable.undo,
             icon: makeUndoIcon()
         }, () => {
             this.editor.history.undo();
         }, undoRedoGroup);
         const redoButton = this.addActionButton({
-            label: 'Redo',
+            label: this.localizationTable.redo,
             icon: makeRedoIcon(),
         }, () => {
             this.editor.history.redo();
@@ -154,11 +157,9 @@ export default class HTMLToolbar {
             }
             (new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
-        for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
-            if (!(tool instanceof PanZoom)) {
-                throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
-            }
-            (new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        const panZoomTool = toolController.getMatchingTools(ToolType.PanZoom)[0];
+        if (panZoomTool && panZoomTool instanceof PanZoom) {
+            (new HandToolWidget(this.editor, panZoomTool, this.localizationTable)).addTo(this.container);
         }
         this.setupColorPickers();
     }
@@ -166,3 +167,4 @@ export default class HTMLToolbar {
         this.addUndoRedoButtons();
     }
 }
+HTMLToolbar.colorisStarted = false;

package/dist/src/toolbar/icons.js

@@ -3,11 +3,11 @@ import { Vec2 } from '../geometry/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
+const iconColorFill = `
+	style='fill: var(--icon-color);'
 `;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-color);'
 `;
 const checkerboardPatternDef = `
 	<pattern
@@ -31,7 +31,7 @@ export const makeRedoIcon = (mirror = false) => {
     icon.innerHTML = `
 		<style>
 			.toolbar-svg-undo-redo-icon {
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 12;
 				stroke-linejoin: round;
 				stroke-linecap: round;
@@ -54,7 +54,7 @@ export const makeDropdownIcon = () => {
 	<g>
 		<path
 			d='M5,10 L50,90 L95,10 Z'
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -69,7 +69,7 @@ export const makeEraserIcon = () => {
 		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
 		<rect
 			x=10 y=10 width=80 height=50
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -116,7 +116,7 @@ export const makeHandToolIcon = () => {
 			
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -158,7 +158,7 @@ export const makeTouchPanningIcon = () => {
 			'
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -222,7 +222,7 @@ export const makeAllDevicePanningIcon = () => {
 			'
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -241,7 +241,7 @@ export const makeZoomIcon = () => {
         textNode.style.textAlign = 'center';
         textNode.style.textAnchor = 'middle';
         textNode.style.fontSize = '55px';
-        textNode.style.fill = 'var(--primary-foreground-color)';
+        textNode.style.fill = 'var(--icon-color)';
         textNode.style.fontFamily = 'monospace';
         icon.appendChild(textNode);
     };
@@ -282,7 +282,7 @@ export const makePenIcon = (tipThickness, color) => {
 		<!-- Pen grip -->
 		<path
 			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
-			${primaryForegroundStrokeFill}
+			${iconColorStrokeFill}
 		/>
 	</g>
 	<g>
@@ -348,7 +348,7 @@ export const makePipetteIcon = (color) => {
 			65,15 65,5      47,6
 		Z
 	`);
-    pipette.style.fill = 'var(--primary-foreground-color)';
+    pipette.style.fill = 'var(--icon-color)';
     if (color) {
         const defs = document.createElementNS(svgNamespace, 'defs');
         defs.innerHTML = checkerboardPatternDef;

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

@@ -21,6 +21,7 @@ export interface ToolbarLocalization {
     undo: string;
     redo: string;
     zoom: string;
+    selectionToolKeyboardShortcuts: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;

package/dist/src/toolbar/localization.js

@@ -14,6 +14,7 @@ export const defaultToolbarLocalization = {
     redo: 'Redo',
     selectObjectType: 'Object type: ',
     pickColorFronScreen: 'Pick color from screen',
+    selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     touchPanning: 'Touchscreen panning',
     anyDevicePanning: 'Any device panning',
     freehandPen: 'Freehand',

package/dist/src/toolbar/makeColorInput.js

@@ -12,7 +12,7 @@ export const makeColorInput = (editor, onColorChange) => {
     colorInputContainer.appendChild(colorInput);
     addPipetteTool(editor, colorInputContainer, (color) => {
         colorInput.value = color.toHexString();
-        handleColorInput();
+        onInputEnd();
         // Update the color preview, if it exists (may be managed by Coloris).
         const parentElem = colorInput.parentElement;
         if (parentElem && parentElem.classList.contains('clr-field')) {
@@ -22,12 +22,17 @@ export const makeColorInput = (editor, onColorChange) => {
     let currentColor;
     const handleColorInput = () => {
         currentColor = Color4.fromHex(colorInput.value);
-        editor.announceForAccessibility(editor.localization.colorChangedAnnouncement(currentColor.toHexString()));
-        onColorChange(currentColor);
-        editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
-            kind: EditorEventType.ColorPickerColorSelected,
-            color: currentColor,
-        });
+    };
+    const onInputEnd = () => {
+        handleColorInput();
+        if (currentColor) {
+            editor.announceForAccessibility(editor.localization.colorChangedAnnouncement(currentColor.toHexString()));
+            onColorChange(currentColor);
+            editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
+                kind: EditorEventType.ColorPickerColorSelected,
+                color: currentColor,
+            });
+        }
     };
     colorInput.oninput = handleColorInput;
     colorInput.addEventListener('open', () => {
@@ -41,6 +46,7 @@ export const makeColorInput = (editor, onColorChange) => {
             kind: EditorEventType.ColorPickerToggled,
             open: false,
         });
+        onInputEnd();
     });
     return [colorInput, colorInputContainer];
 };
@@ -54,10 +60,13 @@ const addPipetteTool = (editor, container, onColorChange) => {
     };
     updatePipetteIcon();
     const pipetteTool = editor.toolController.getMatchingTools(ToolType.Pipette)[0];
-    const pipetteColorSelect = (color) => {
+    const endColorSelectMode = () => {
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.clearColorListener();
         updatePipetteIcon();
         pipetteButton.classList.remove('active');
+    };
+    const pipetteColorSelect = (color) => {
+        endColorSelectMode();
         if (color) {
             onColorChange(color);
         }
@@ -71,6 +80,11 @@ const addPipetteTool = (editor, container, onColorChange) => {
         }
     };
     pipetteButton.onclick = () => {
+        // If already picking, cancel it.
+        if (pipetteButton.classList.contains('active')) {
+            endColorSelectMode();
+            return;
+        }
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);
         if (pipetteTool) {
             pipetteButton.classList.add('active');

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

@@ -10,6 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
+import { InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 export default class BaseWidget {
@@ -44,6 +45,34 @@ export default class BaseWidget {
         return true;
     }
     setupActionBtnClickListener(button) {
+        const clickTriggers = { enter: true, ' ': true, };
+        button.onkeydown = (evt) => {
+            let handled = false;
+            if (evt.key in clickTriggers) {
+                if (!this.disabled) {
+                    this.handleClick();
+                    handled = true;
+                }
+            }
+            // If we didn't do anything with the event, send it to the editor.
+            if (!handled) {
+                this.editor.toolController.dispatchInputEvent({
+                    kind: InputEvtType.KeyPressEvent,
+                    key: evt.key,
+                    ctrlKey: evt.ctrlKey,
+                });
+            }
+        };
+        button.onkeyup = evt => {
+            if (evt.key in clickTriggers) {
+                return;
+            }
+            this.editor.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyUpEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey,
+            });
+        };
         button.onclick = () => {
             if (!this.disabled) {
                 this.handleClick();

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

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent } from '../types';
 import { ToolType } from './ToolController';
 import ToolEnabledGroup from './ToolEnabledGroup';
 export default abstract class BaseTool implements PointerEvtListener {
@@ -14,6 +14,7 @@ export default abstract class BaseTool implements PointerEvtListener {
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;
     onKeyPress(_event: KeyPressEvent): boolean;
+    onKeyUp(_event: KeyUpEvent): boolean;
     setEnabled(enabled: boolean): void;
     isEnabled(): boolean;
     setToolGroup(group: ToolEnabledGroup): void;