js-draw 1.10.0 → 1.11.1

package/dist/mjs/toolbar/widgets/InsertImageWidget.mjs

@@ -169,7 +169,7 @@ class InsertImageWidget extends BaseWidget {
             this.image?.reset();
         };
         this.statusView.replaceChildren(sizeText);
-        const largeImageThreshold = 0.25; // MiB
+        const largeImageThreshold = 0.12; // MiB
         if (sizeInMiB > largeImageThreshold) {
             this.statusView.appendChild(decreaseSizeButton);
         }

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

@@ -1,3 +1,4 @@
 export declare const resizeImageToSelectionKeyboardShortcut = "jsdraw.toolbar.SelectionTool.resizeImageToSelection";
 export declare const selectStrokeTypeKeyboardShortcutIds: string[];
 export declare const saveKeyboardShortcut = "jsdraw.toolbar.SaveActionWidget.save";
+export declare const exitKeyboardShortcut = "jsdraw.toolbar.ExitActionWidget.exit";

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

@@ -11,3 +11,6 @@ for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
 // Save
 export const saveKeyboardShortcut = 'jsdraw.toolbar.SaveActionWidget.save';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(saveKeyboardShortcut, ['ctrlOrMeta+KeyS'], 'Save');
+// Exit
+export const exitKeyboardShortcut = 'jsdraw.toolbar.ExitActionWidget.exit';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(exitKeyboardShortcut, ['Alt+KeyQ'], 'Exit');

package/dist/mjs/toolbar/widgets/layout/types.d.ts

@@ -1,4 +1,4 @@
-import ReactiveValue from 'js-draw/src/util/ReactiveValue';
+import ReactiveValue from '../../../util/ReactiveValue';
 /**
  * A class that manages whether/what content is shown for a widget.
  *

package/dist/mjs/tools/FindTool.mjs

@@ -34,7 +34,7 @@ export default class FindTool extends BaseTool {
         }
         if (matchIdx < matches.length) {
             const undoable = false;
-            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
+            void this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
             this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
         }
     }

package/dist/mjs/tools/Pen.mjs

@@ -97,8 +97,8 @@ export default class Pen extends BaseTool {
             this.currentDeviceType = current.device;
             if (this.shapeAutocompletionEnabled) {
                 const stationaryDetectionConfig = {
-                    maxSpeed: 5,
-                    maxRadius: 10,
+                    maxSpeed: 8.5,
+                    maxRadius: 11,
                     minTimeSeconds: 0.5, // s
                 };
                 this.stationaryDetector = new StationaryPenDetector(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
@@ -141,6 +141,7 @@ export default class Pen extends BaseTool {
             if (this.autocorrectedShape) {
                 this.removedAutocorrectedShapeTime = performance.now();
                 this.autocorrectedShape = null;
+                this.editor.announceForAccessibility(this.editor.localization.autocorrectionCanceled);
             }
         }
     }
@@ -187,6 +188,13 @@ export default class Pen extends BaseTool {
         if (!this.builder || !correctedShape) {
             return;
         }
+        // Don't complete to empty shapes.
+        const bboxArea = correctedShape.getBBox().area;
+        if (bboxArea === 0 || !isFinite(bboxArea)) {
+            return;
+        }
+        const shapeDescription = correctedShape.description(this.editor.localization);
+        this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(shapeDescription));
         this.autocorrectedShape = correctedShape;
         this.lastAutocorrectedShape = correctedShape;
         this.previewStroke();
@@ -201,6 +209,9 @@ export default class Pen extends BaseTool {
             const stroke = this.autocorrectedShape ?? this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
+                if (stroke === this.autocorrectedShape) {
+                    this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
+                }
                 const canFlatten = true;
                 const action = EditorImage.addElement(stroke, canFlatten);
                 this.editor.dispatch(action);

package/dist/mjs/tools/SelectionTool/Selection.d.ts

@@ -2,6 +2,7 @@
  * @internal
  * @packageDocumentation
  */
+import SerializableCommand from '../../commands/SerializableCommand';
 import Editor from '../../Editor';
 import { Mat33, Rect2, Point2 } from '@js-draw/math';
 import Pointer from '../../Pointer';
@@ -36,7 +37,10 @@ export default class Selection {
     getScreenRegion(): Rect2;
     get screenRegionRotation(): number;
     setTransform(transform: Mat33, preview?: boolean): void;
+    private getDeltaZIndexToMoveSelectionToTop;
     finalizeTransform(): void | Promise<void>;
+    /** Sends all selected elements to the bottom of the visible image. */
+    sendToBack(): SerializableCommand | null;
     private static ApplyTransformationCommand;
     private previewTransformCmds;
     resolveToObjects(): boolean;

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -13,6 +13,7 @@ import  Duplicate  from '../../commands/Duplicate.mjs';
 import  { DragTransformer, ResizeTransformer, RotateTransformer }  from './TransformMode.mjs';
 import  { ResizeMode }  from './types.mjs';
 import  EditorImage  from '../../image/EditorImage.mjs';
+import  uniteCommands  from '../../commands/uniteCommands.mjs';
 const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
@@ -23,6 +24,7 @@ class Selection {
         // @see getTightBoundingBox
         this.selectionTightBoundingBox = null;
         this.transform = Mat33.identity;
+        // invariant: sorted by increasing z-index
         this.selectedElems = [];
         this.hasParent = true;
         // Maps IDs to whether we removed the component from the image
@@ -133,6 +135,16 @@ class Selection {
             this.previewTransformCmds();
         }
     }
+    getDeltaZIndexToMoveSelectionToTop() {
+        if (this.selectedElems.length === 0) {
+            return 0;
+        }
+        const selectedBottommostZIndex = this.selectedElems[0].getZIndex();
+        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.region);
+        const topMostVisibleZIndex = visibleObjects[visibleObjects.length - 1]?.getZIndex() ?? selectedBottommostZIndex;
+        const deltaZIndex = (topMostVisibleZIndex + 1) - selectedBottommostZIndex;
+        return deltaZIndex;
+    }
     // Applies the current transformation to the selection
     finalizeTransform() {
         const fullTransform = this.transform;
@@ -141,17 +153,35 @@ class Selection {
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = Mat33.identity;
         this.scrollTo();
+        let transformPromise = undefined;
         // Make the commands undo-able.
         // Don't check for non-empty transforms because this breaks changing the
         // z-index of the just-transformed commands.
-        //
-        // TODO: Check whether the selectedElems are already all toplevel.
-        const transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        if (this.selectedElems.length > 0) {
+            const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
+            transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform, deltaZIndex));
+        }
         // Clear renderings of any in-progress transformations
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
         return transformPromise;
     }
+    /** Sends all selected elements to the bottom of the visible image. */
+    sendToBack() {
+        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.editor.viewport.visibleRect);
+        // VisibleObjects and selectedElems should both be sorted by z-index
+        const lowestVisibleZIndex = visibleObjects[0]?.getZIndex() ?? 0;
+        const highestSelectedZIndex = this.selectedElems[this.selectedElems.length - 1]?.getZIndex() ?? 0;
+        const targetHighestZIndex = lowestVisibleZIndex - 1;
+        const deltaZIndex = targetHighestZIndex - highestSelectedZIndex;
+        if (deltaZIndex !== 0) {
+            const commands = this.selectedElems.map(elem => {
+                return elem.setZIndex(elem.getZIndex() + deltaZIndex);
+            });
+            return uniteCommands(commands, updateChunkSize);
+        }
+        return null;
+    }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
         if (this.selectedElems.length === 0) {
@@ -165,7 +195,7 @@ class Selection {
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
         wetInkRenderer.pushTransform(this.transform);
-        const viewportVisibleRect = this.editor.viewport.visibleRect;
+        const viewportVisibleRect = this.editor.viewport.visibleRect.union(this.region);
         const visibleRect = viewportVisibleRect.transformedBoundingBox(this.transform.inverse());
         for (const elem of this.selectedElems) {
             elem.render(wetInkRenderer, visibleRect);
@@ -411,7 +441,8 @@ class Selection {
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
-            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
+            const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
+            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform, deltaZIndex);
             // Transform to ensure that the duplicates are in the correct location
             await tmpApplyCommand.apply(this.editor);
             // Show items again
@@ -452,6 +483,8 @@ class Selection {
         this.originalRegion = bbox;
         this.selectionTightBoundingBox = bbox;
         this.selectedElems = objects.filter(object => object.isSelectable());
+        // Enforce increasing z-index invariant
+        this.selectedElems.sort((a, b) => a.getZIndex() - b.getZIndex());
         this.padRegion();
         this.updateUI();
     }
@@ -465,7 +498,8 @@ _a = Selection;
         // The selection box is lost when serializing/deserializing. No need to store box rotation
         const fullTransform = new Mat33(...json.transform);
         const elemIds = (json.elems ?? []);
-        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
+        const deltaZIndex = parseInt(json.deltaZIndex ?? 0);
+        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform, deltaZIndex);
     });
 })();
 Selection.ApplyTransformationCommand = class extends SerializableCommand {
@@ -473,10 +507,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
     // If a `string[]`, selectedElems is a list of element IDs.
     selectedElems, 
     // Full transformation used to transform elements.
-    fullTransform) {
+    fullTransform, deltaZIndex) {
         super('selection-tool-transform');
         this.selection = selection;
         this.fullTransform = fullTransform;
+        this.deltaZIndex = deltaZIndex;
         const isIDList = (arr) => {
             return typeof arr[0] === 'string';
         };
@@ -487,11 +522,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         else {
             this.selectedElemIds = selectedElems.map(elem => elem.getId());
             this.transformCommands = selectedElems.map(elem => {
-                return elem.transformBy(this.fullTransform);
+                return elem.setZIndexAndTransformBy(this.fullTransform, elem.getZIndex() + deltaZIndex);
             });
         }
     }
-    resolveToElems(editor) {
+    resolveToElems(editor, isUndoing) {
         if (this.transformCommands) {
             return;
         }
@@ -500,11 +535,19 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
             if (!elem) {
                 throw new Error(`Unable to find element with ID, ${id}.`);
             }
-            return elem.transformBy(this.fullTransform);
+            let originalZIndex = elem.getZIndex();
+            let targetZIndex = elem.getZIndex() + this.deltaZIndex;
+            // If the command has already been applied, the element should currently
+            // have the target z-index.
+            if (isUndoing) {
+                targetZIndex = elem.getZIndex();
+                originalZIndex = elem.getZIndex() - this.deltaZIndex;
+            }
+            return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
         });
     }
     async apply(editor) {
-        this.resolveToElems(editor);
+        this.resolveToElems(editor, false);
         this.selection?.setTransform(this.fullTransform, false);
         this.selection?.updateUI();
         await editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
@@ -513,7 +556,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         this.selection?.updateUI();
     }
     async unapply(editor) {
-        this.resolveToElems(editor);
+        this.resolveToElems(editor, true);
         this.selection?.setTransform(this.fullTransform.inverse(), false);
         this.selection?.updateUI();
         await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
@@ -525,6 +568,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         return {
             elems: this.selectedElemIds,
             transform: this.fullTransform.toArray(),
+            deltaZIndex: this.deltaZIndex,
         };
     }
     description(_editor, localizationTable) {

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

@@ -28,6 +28,7 @@ export default class SelectionTool extends BaseTool {
     private onSelectionUpdated;
     private zoomToSelection;
     private static handleableKeys;
+    private hasUnfinalizedTransformFromKeyPress;
     onKeyPress(event: KeyPressEvent): boolean;
     onKeyUp(evt: KeyUpEvent): boolean;
     onCopy(event: CopyEvent): boolean;

package/dist/mjs/tools/SelectionTool/SelectionTool.mjs

@@ -5,7 +5,7 @@ import  BaseTool  from '../BaseTool.mjs';
 import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
 import  Selection  from './Selection.mjs';
 import  TextComponent  from '../../components/TextComponent.mjs';
-import  { duplicateSelectionShortcut, selectAllKeyboardShortcut, snapToGridKeyboardShortcutId }  from '../keybindings.mjs';
+import  { duplicateSelectionShortcut, selectAllKeyboardShortcut, sendToBackSelectionShortcut, snapToGridKeyboardShortcutId }  from '../keybindings.mjs';
 import  ToPointerAutoscroller  from './ToPointerAutoscroller.mjs';
 export const cssPrefix = 'selection-tool-';
 // Allows users to select/transform portions of the `EditorImage`.
@@ -21,6 +21,9 @@ class SelectionTool extends BaseTool {
         this.lastPointer = null;
         this.selectionBoxHandlingEvt = false;
         this.lastSelectedObjects = [];
+        // Whether the last keypress corresponded to an action that didn't transform the
+        // selection (and thus does not need to be finalized on onKeyUp).
+        this.hasUnfinalizedTransformFromKeyPress = false;
         this.autoscroller = new ToPointerAutoscroller(editor.viewport, (scrollBy) => {
             editor.dispatch(Viewport.transformBy(Mat33.translation(scrollBy)), false);
             // Update the selection box/content to match the new viewport.
@@ -213,7 +216,8 @@ class SelectionTool extends BaseTool {
             this.snapToGrid = true;
             return true;
         }
-        if (this.selectionBox && shortcucts.matchesShortcut(duplicateSelectionShortcut, event)) {
+        if (this.selectionBox && (shortcucts.matchesShortcut(duplicateSelectionShortcut, event)
+            || shortcucts.matchesShortcut(sendToBackSelectionShortcut, event))) {
             // Handle duplication on key up — we don't want to accidentally duplicate
             // many times.
             return true;
@@ -227,9 +231,11 @@ class SelectionTool extends BaseTool {
             // Pass it to another tool, if apliccable.
             return false;
         }
-        else if (event.key === 'Shift') {
+        else if (event.shiftKey || event.key === 'Shift') {
             this.shiftKeyPressed = true;
-            return true;
+            if (event.key === 'Shift') {
+                return true;
+            }
         }
         let rotationSteps = 0;
         let xTranslateSteps = 0;
@@ -297,6 +303,8 @@ class SelectionTool extends BaseTool {
             const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
             this.selectionBox.scrollTo();
+            // The transformation needs to be finalized at some point (on key up)
+            this.hasUnfinalizedTransformFromKeyPress = true;
         }
         if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
             this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
@@ -322,12 +330,32 @@ class SelectionTool extends BaseTool {
             });
             return true;
         }
+        if (this.selectionBox && shortcucts.matchesShortcut(sendToBackSelectionShortcut, evt)) {
+            const sendToBackCommand = this.selectionBox.sendToBack();
+            if (sendToBackCommand) {
+                this.editor.dispatch(sendToBackCommand);
+            }
+            return true;
+        }
+        // Here, we check if shiftKey === false because, as of this writing,
+        // evt.shiftKey is an optional property. Being falsey could just mean
+        // that it wasn't set.
+        if (evt.shiftKey === false) {
+            this.shiftKeyPressed = false;
+            // Don't return immediately -- event may be otherwise handled
+        }
+        // Also check for key === 'Shift' (for the case where shiftKey is undefined)
         if (evt.key === 'Shift') {
             this.shiftKeyPressed = false;
             return true;
         }
+        // If we don't need to finalize the transform
+        if (!this.hasUnfinalizedTransformFromKeyPress) {
+            return true;
+        }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
+            this.hasUnfinalizedTransformFromKeyPress = false;
             return true;
         }
         return false;
@@ -361,7 +389,11 @@ class SelectionTool extends BaseTool {
         return true;
     }
     setEnabled(enabled) {
+        const wasEnabled = this.isEnabled();
         super.setEnabled(enabled);
+        if (wasEnabled === enabled) {
+            return;
+        }
         // Clear the selection
         this.selectionBox?.cancelSelection();
         this.onSelectionUpdated();

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

@@ -7,7 +7,6 @@ import BaseTool from './BaseTool';
  *
  * This is in the default set of {@link ToolController} tools.
  *
- * @deprecated This may be replaced in the future.
  */
 export default class ToolSwitcherShortcut extends BaseTool {
     private editor;

package/dist/mjs/tools/ToolSwitcherShortcut.mjs

@@ -5,7 +5,6 @@ import  BaseTool  from './BaseTool.mjs';
  *
  * This is in the default set of {@link ToolController} tools.
  *
- * @deprecated This may be replaced in the future.
  */
 export default class ToolSwitcherShortcut extends BaseTool {
     constructor(editor) {

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

@@ -15,3 +15,4 @@ export declare const zoomInKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomIn";
 export declare const zoomOutKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomOut";
 export declare const selectAllKeyboardShortcut = "jsdraw.tools.SelectionTool.selectAll";
 export declare const duplicateSelectionShortcut = "jsdraw.tools.SelectionTool.duplicateSelection";
+export declare const sendToBackSelectionShortcut = "jsdraw.tools.SelectionTool.sendToBack";

package/dist/mjs/tools/keybindings.mjs

@@ -39,3 +39,5 @@ export const selectAllKeyboardShortcut = 'jsdraw.tools.SelectionTool.selectAll';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(selectAllKeyboardShortcut, ['CtrlOrMeta+KeyA'], 'Select all');
 export const duplicateSelectionShortcut = 'jsdraw.tools.SelectionTool.duplicateSelection';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(duplicateSelectionShortcut, ['CtrlOrMeta+KeyD'], 'Duplicate selection');
+export const sendToBackSelectionShortcut = 'jsdraw.tools.SelectionTool.sendToBack';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(sendToBackSelectionShortcut, ['End'], 'Send to back');

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

@@ -9,6 +9,8 @@ export interface ToolLocalization {
     undoRedoTool: string;
     pipetteTool: string;
     rightClickDragPanTool: string;
+    autocorrectedTo: (description: string) => string;
+    autocorrectionCanceled: string;
     textTool: string;
     enterTextToInsert: string;
     changeTool: string;

package/dist/mjs/tools/localization.mjs

@@ -9,6 +9,8 @@ export const defaultToolLocalization = {
     rightClickDragPanTool: 'Right-click drag',
     pipetteTool: 'Pick color from screen',
     keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
+    autocorrectedTo: (strokeDescription) => `Autocorrected to ${strokeDescription}`,
+    autocorrectionCanceled: 'Autocorrect cancelled',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',

package/dist/mjs/util/listenForKeyboardEventsFrom.d.ts

@@ -2,6 +2,11 @@ interface Callbacks {
     filter(event: KeyboardEvent): boolean;
     handleKeyDown(event: KeyboardEvent): void;
     handleKeyUp(event: KeyboardEvent): void;
+    /**
+     * Should return `true` iff `source` is also registered as an event listener source.
+     * If `false` and focus leaves the original source, keyup events are fired.
+     */
+    getHandlesKeyEventsFrom(source: Node): boolean;
 }
 /**
  * Calls `callbacks` when different keys are known to be pressed.

package/dist/mjs/util/listenForKeyboardEventsFrom.mjs

@@ -65,7 +65,11 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
         handleKeyEvent(htmlEvent);
     });
     elem.addEventListener('focusout', (focusEvent) => {
-        const stillHasFocus = focusEvent.relatedTarget && elem.contains(focusEvent.relatedTarget);
+        let stillHasFocus = false;
+        if (focusEvent.relatedTarget) {
+            const relatedTarget = focusEvent.relatedTarget;
+            stillHasFocus = elem.contains(relatedTarget) || callbacks.getHandlesKeyEventsFrom(relatedTarget);
+        }
         if (!stillHasFocus) {
             for (const event of keysDown) {
                 callbacks.handleKeyUp(new KeyboardEvent('keyup', {

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.10.0',
+    number: '1.11.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.10.0",
-    "@melloware/coloris": "0.21.0"
+    "@js-draw/math": "^1.11.1",
+    "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.7.0",
+    "@js-draw/build-tool": "^1.11.1",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "ccf1d0634e902c731fcd794df11cd001c3a30585"
+  "gitHead": "695cfe01116839842668233a14fa858ad4ae0bac"
 }

package/src/toolbar/AbstractToolbar.scss

@@ -45,7 +45,8 @@
 }
 
 .toolbar-button.disabled {
-	filter: opacity(0.5) sepia(0.2);
+	filter: sepia(0.2);
+	opacity: 0.45;
 	cursor: unset;
 }
 
@@ -103,7 +104,7 @@
 
 .toolbar-root button:disabled {
 	cursor: inherit;
-	filter: opacity(0.5);
+	opacity: 0.5;
 }
 
 .toolbar-root .toolbar-icon {

package/src/toolbar/widgets/components/makeColorInput.scss

@@ -29,6 +29,14 @@
 	display: inline-flex;
 	flex-direction: row;
 
+	.coloris_input {
+		// Ensure that the region that can be clicked to open the input is roughly
+		// the full height of the container.
+		// Because the color picker is always shown below or above the input, 5px is
+		// subtracted to make the picker better align with the input's container.
+		height: calc(100% - 6px);
+	}
+
 	&.picker-open .clr-field {
 		// Work around what seems to be a Coloris bug -- clicking on the input button
 		// keeps the color picker open (while clicking anywhere else closes the picker).