js-draw 1.2.2 → 1.3.0

package/dist/mjs/lib.mjs

@@ -2,52 +2,9 @@
  * The main entrypoint for the NPM package. Everything exported by this file
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
- * @example
- * ```ts,runnable
- * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
+ * ## Example
  *
- * // Use the Material Icon pack.
- * import { MaterialIconProvider } from '@js-draw/material-icons';
- *
- * // Apply js-draw CSS
- * import 'js-draw/styles';
- * // If your bundler doesn't support the above, try
- * // import 'js-draw/bundledStyles';
- *
- * (async () => {
- *   const editor = new Editor(document.body, {
- *     iconProvider: new MaterialIconProvider(),
- *   });
- *   const toolbar = editor.addToolbar();
- *
- *   // Increases the minimum height of the editor
- *   editor.getRootElement().style.height = '600px';
- *
- *   // Loads from SVG data
- *   await editor.loadFromSVG(`
- *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
- *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
- *       </svg>
- *   `);
- *
- *   // Adding tags to a toolbar button allows different styles to be applied.
- *   // Also see addActionButton.
- *   const buttonLabels = [ ToolbarWidgetTag.Save ];
- *
- *   toolbar.addSaveButton(() => {
- *     const saveData = editor.toSVG().outerHTML;
- *
- *     // Do something with saveData
- *   });
- *
- *   toolbar.addExitButton(() => {
- *     // Save/confirm exiting here?
- *     editor.remove();
- *   });
- * })();
- * ```
+ * [[include:doc-pages/inline-examples/main-js-draw-example.md]]
  *
  * @see
  * - {@link Editor}

package/dist/mjs/rendering/RenderingStyle.d.ts

@@ -3,6 +3,7 @@ interface RenderingStyle {
     readonly fill: Color4;
     readonly stroke?: {
         readonly color: Color4;
+        /** Note: The stroke `width` is twice the stroke radius. */
         readonly width: number;
     };
 }

package/dist/mjs/rendering/renderers/AbstractRenderer.mjs

@@ -63,7 +63,7 @@ export default class AbstractRenderer {
     drawPath(path) {
         // If we're being called outside of an object,
         // we can't delay rendering
-        if (this.objectLevel === 0) {
+        if (this.objectLevel === 0 || this.currentPaths === null) {
             this.currentPaths = [path];
             this.flushPath();
             this.currentPaths = null;

package/dist/mjs/shortcuts/KeyboardShortcutManager.d.ts

@@ -33,8 +33,8 @@ export default class KeyboardShortcutManager {
      * const shortcutId = 'io.github.personalizedrefrigerator.js-draw.select-all';
      *
      * // Associate two shortcuts with the same ID
-     * const shortcut1 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+a');
-     * const shortcut2 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+shift+a');
+     * const shortcut1 = KeyBinding.fromString('ctrlOrMeta+a');
+     * const shortcut2 = KeyBinding.fromString('ctrlOrMeta+shift+a');
      * KeyboardShortcutManager.registerDefaultKeyboardShortcut(
      * 	shortcutId,
      * 	[ shortcut1, shortcut2 ],

package/dist/mjs/shortcuts/KeyboardShortcutManager.mjs

@@ -54,8 +54,8 @@ class KeyboardShortcutManager {
      * const shortcutId = 'io.github.personalizedrefrigerator.js-draw.select-all';
      *
      * // Associate two shortcuts with the same ID
-     * const shortcut1 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+a');
-     * const shortcut2 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+shift+a');
+     * const shortcut1 = KeyBinding.fromString('ctrlOrMeta+a');
+     * const shortcut2 = KeyBinding.fromString('ctrlOrMeta+shift+a');
      * KeyboardShortcutManager.registerDefaultKeyboardShortcut(
      * 	shortcutId,
      * 	[ shortcut1, shortcut2 ],

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

@@ -44,6 +44,7 @@ export interface ToolbarLocalization {
     imageWidthOption: string;
     imageHeightOption: string;
     useGridOption: string;
+    enableAutoresizeOption: string;
     toggleOverflow: string;
     about: string;
     inputStabilization: string;

package/dist/mjs/toolbar/localization.mjs

@@ -34,6 +34,7 @@ export const defaultToolbarLocalization = {
     imageWidthOption: 'Width',
     imageHeightOption: 'Height',
     useGridOption: 'Grid',
+    enableAutoresizeOption: 'Auto-resize',
     toggleOverflow: 'More',
     about: 'About',
     inputStabilization: 'Input stabilization',

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -50,6 +50,11 @@ class BaseWidget {
         this.label = document.createElement('label');
         this.button.setAttribute('role', 'button');
         this.button.tabIndex = 0;
+        // Disable the context menu. This allows long-press gestures to trigger the button's
+        // tooltip instead.
+        this.button.oncontextmenu = event => {
+            event.preventDefault();
+        };
         const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
         // If the onKeyPress function has been extended and the editor is configured to send keypress events to
         // toolbar widgets,

package/dist/mjs/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -94,39 +94,49 @@ class DocumentPropertiesWidget extends BaseWidget {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`, `${toolbarCSSPrefix}document-properties-widget`);
         // Background color input
-        const backgroundColorRow = document.createElement('div');
-        const backgroundColorLabel = document.createElement('label');
-        backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-        const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue } = makeColorInput(this.editor, color => {
-            if (!color.eq(this.getBackgroundColor())) {
-                this.setBackgroundColor(color);
-            }
-        });
-        colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
-        backgroundColorLabel.htmlFor = colorInput.id;
-        backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+        const makeBackgroundColorInput = () => {
+            const backgroundColorRow = document.createElement('div');
+            const backgroundColorLabel = document.createElement('label');
+            backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue } = makeColorInput(this.editor, color => {
+                if (!color.eq(this.getBackgroundColor())) {
+                    this.setBackgroundColor(color);
+                }
+            });
+            colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
+            backgroundColorLabel.htmlFor = colorInput.id;
+            backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+            return { setBgColorInputValue, backgroundColorRow };
+        };
+        const { backgroundColorRow, setBgColorInputValue } = makeBackgroundColorInput();
+        const makeCheckboxRow = (labelText, onChange) => {
+            const rowContainer = document.createElement('div');
+            const labelElement = document.createElement('label');
+            const checkboxElement = document.createElement('input');
+            checkboxElement.id = `${toolbarCSSPrefix}docPropertiesCheckbox-${DocumentPropertiesWidget.idCounter++}`;
+            labelElement.htmlFor = checkboxElement.id;
+            checkboxElement.type = 'checkbox';
+            labelElement.innerText = labelText;
+            checkboxElement.oninput = () => {
+                onChange(checkboxElement.checked);
+            };
+            rowContainer.replaceChildren(labelElement, checkboxElement);
+            return { container: rowContainer, checkbox: checkboxElement };
+        };
         // Background style selector
-        const useGridRow = document.createElement('div');
-        const useGridLabel = document.createElement('label');
-        const useGridCheckbox = document.createElement('input');
-        useGridCheckbox.id = `${toolbarCSSPrefix}docPropertiesUseGridCheckbox-${DocumentPropertiesWidget.idCounter++}`;
-        useGridLabel.htmlFor = useGridCheckbox.id;
-        useGridCheckbox.type = 'checkbox';
-        useGridLabel.innerText = this.localizationTable.useGridOption;
-        useGridCheckbox.oninput = () => {
+        const { container: useGridRow, checkbox: useGridCheckbox } = makeCheckboxRow(this.localizationTable.useGridOption, (checked) => {
             const prevBackgroundType = this.getBackgroundType();
             const wasGrid = prevBackgroundType === BackgroundType.Grid;
-            if (wasGrid === useGridCheckbox.checked) {
+            if (wasGrid === checked) {
                 // Already the requested background type.
                 return;
             }
             let newBackgroundType = BackgroundType.SolidColor;
-            if (useGridCheckbox.checked) {
+            if (checked) {
                 newBackgroundType = BackgroundType.Grid;
             }
             this.editor.dispatch(this.setBackgroundType(newBackgroundType));
-        };
-        useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
+        });
         // Adds a width/height input
         const addDimensionRow = (labelContent, onChange) => {
             const row = document.createElement('div');
@@ -139,15 +149,25 @@ class DocumentPropertiesWidget extends BaseWidget {
             label.htmlFor = input.id;
             input.style.flexGrow = '2';
             input.style.width = '25px';
-            row.style.display = 'flex';
             input.oninput = () => {
                 onChange(parseFloat(input.value));
             };
+            row.classList.add('js-draw-size-input-row');
             row.replaceChildren(label, input);
             return {
                 setValue: (value) => {
                     input.value = value.toString();
                 },
+                setIsAutomaticSize: (automatic) => {
+                    input.disabled = automatic;
+                    const automaticSizeClass = 'size-input-row--automatic-size';
+                    if (automatic) {
+                        row.classList.add(automaticSizeClass);
+                    }
+                    else {
+                        row.classList.remove(automaticSizeClass);
+                    }
+                },
                 element: row,
             };
         };
@@ -157,6 +177,11 @@ class DocumentPropertiesWidget extends BaseWidget {
         const imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, (value) => {
             this.updateImportExportRectSize({ height: value });
         });
+        // The autoresize checkbox
+        const { container: auroresizeRow, checkbox: autoresizeCheckbox } = makeCheckboxRow(this.localizationTable.enableAutoresizeOption, (checked) => {
+            const image = this.editor.image;
+            this.editor.dispatch(image.setAutoresizeEnabled(checked));
+        });
         // The "About..." button
         const aboutButton = document.createElement('button');
         aboutButton.classList.add('about-button');
@@ -166,13 +191,17 @@ class DocumentPropertiesWidget extends BaseWidget {
         };
         this.updateDropdownContent = () => {
             setBgColorInputValue(this.getBackgroundColor());
+            const autoresize = this.editor.image.getAutoresizeEnabled();
             const importExportRect = this.editor.getImportExportRect();
             imageWidthRow.setValue(importExportRect.width);
             imageHeightRow.setValue(importExportRect.height);
+            autoresizeCheckbox.checked = autoresize;
+            imageWidthRow.setIsAutomaticSize(autoresize);
+            imageHeightRow.setIsAutomaticSize(autoresize);
             useGridCheckbox.checked = this.getBackgroundType() === BackgroundType.Grid;
         };
         this.updateDropdownContent();
-        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element, aboutButton);
+        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element, auroresizeRow, aboutButton);
         dropdown.replaceChildren(container);
         return true;
     }

package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs

@@ -68,6 +68,14 @@ labelText, defaultId, choices) => {
             }
             updateButtonCSS();
         };
+        button.onfocus = () => {
+            if (buttonContainer.querySelector(':focus-visible')) {
+                buttonContainer.classList.add('focus-visible');
+            }
+        };
+        button.onblur = () => {
+            buttonContainer.classList.remove('focus-visible');
+        };
         buttonContainer.replaceChildren(button, labelContainer);
         menuContainer.appendChild(buttonContainer);
         // Set whether the current button is checked

package/dist/mjs/tools/PanZoom.mjs

@@ -206,24 +206,26 @@ export default class PanZoom extends BaseTool {
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
         this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
+        return transformUpdate;
     }
     handleOneFingerMove(pointer) {
         const delta = this.getCenterDelta(pointer.screenPos);
-        this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(delta)));
+        const transformUpdate = Mat33.translation(delta);
+        this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
         this.updateVelocity(pointer.screenPos);
         this.lastScreenCenter = pointer.screenPos;
+        return transformUpdate;
     }
     onPointerMove({ allPointers }) {
         this.transform ??= Viewport.transformBy(Mat33.identity);
-        const lastTransform = this.transform;
+        let transformUpdate = Mat33.identity;
         if (allPointers.length === 2) {
-            this.handleTwoFingerMove(allPointers);
+            transformUpdate = this.handleTwoFingerMove(allPointers);
         }
         else if (allPointers.length === 1) {
-            this.handleOneFingerMove(allPointers[0]);
+            transformUpdate = this.handleOneFingerMove(allPointers[0]);
         }
-        lastTransform.unapply(this.editor);
-        this.transform.apply(this.editor);
+        Viewport.transformBy(transformUpdate).apply(this.editor);
         this.lastTimestamp = performance.now();
     }
     onPointerUp(event) {
@@ -303,8 +305,11 @@ export default class PanZoom extends BaseTool {
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
         const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
-        const pinchZoomScaleFactor = 1.03;
-        const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
+        let pinchAmount = delta.z;
+        // Clamp the magnitude of pinchAmount
+        pinchAmount = Math.atan(pinchAmount / 2) * 2;
+        const pinchZoomScaleFactor = 1.04;
+        const transformUpdate = Mat33.scaling2D(Math.max(0.4, Math.min(Math.pow(pinchZoomScaleFactor, -pinchAmount), 4)), canvasPos).rightMul(Mat33.translation(translation));
         this.updateTransform(transformUpdate, true);
         return true;
     }

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

@@ -0,0 +1,18 @@
+import Editor from '../Editor';
+import BaseTool from './BaseTool';
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+export default class ScrollbarTool extends BaseTool {
+    private editor;
+    private scrollbarOverlay;
+    private verticalScrollbar;
+    private horizontalScrollbar;
+    constructor(editor: Editor);
+    private fadeOutTimeout;
+    private updateScrollbars;
+}

package/dist/mjs/tools/ScrollbarTool.mjs

@@ -0,0 +1,79 @@
+import { Rect2 } from '@js-draw/math';
+import  { EditorEventType }  from '../types.mjs';
+import  BaseTool  from './BaseTool.mjs';
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+export default class ScrollbarTool extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, 'scrollbar');
+        this.editor = editor;
+        this.fadeOutTimeout = null;
+        this.scrollbarOverlay = document.createElement('div');
+        this.scrollbarOverlay.classList.add('ScrollbarTool-overlay');
+        this.verticalScrollbar = document.createElement('div');
+        this.verticalScrollbar.classList.add('vertical-scrollbar');
+        this.horizontalScrollbar = document.createElement('div');
+        this.horizontalScrollbar.classList.add('horizontal-scrollbar');
+        this.scrollbarOverlay.replaceChildren(this.verticalScrollbar, this.horizontalScrollbar);
+        let overlay = null;
+        let viewportListener = null;
+        this.enabledValue().onUpdateAndNow(enabled => {
+            overlay?.remove();
+            viewportListener?.remove();
+            viewportListener = null;
+            overlay = null;
+            if (enabled) {
+                viewportListener = editor.notifier.on(EditorEventType.ViewportChanged, _event => {
+                    this.updateScrollbars();
+                });
+                this.updateScrollbars();
+                overlay = editor.createHTMLOverlay(this.scrollbarOverlay);
+            }
+        });
+    }
+    updateScrollbars() {
+        const viewport = this.editor.viewport;
+        const screenSize = viewport.getScreenRectSize();
+        const screenRect = new Rect2(0, 0, screenSize.x, screenSize.y);
+        const imageRect = this.editor.getImportExportRect()
+            // The scrollbars are positioned in screen coordinates, so the exportRect also needs
+            // to be in screen coordinates
+            .transformedBoundingBox(viewport.canvasToScreenTransform)
+            // If the screenRect is outside of the exportRect, expand the image rectangle
+            .union(screenRect);
+        const scrollbarWidth = screenRect.width / imageRect.width * screenSize.x;
+        const scrollbarHeight = screenRect.height / imageRect.height * screenSize.y;
+        const scrollbarX = (screenRect.x - imageRect.x) / imageRect.width * (screenSize.x);
+        const scrollbarY = (screenRect.y - imageRect.y) / imageRect.height * (screenSize.y);
+        this.horizontalScrollbar.style.width = `${scrollbarWidth}px`;
+        this.verticalScrollbar.style.height = `${scrollbarHeight}px`;
+        this.horizontalScrollbar.style.marginLeft = `${scrollbarX}px`;
+        this.verticalScrollbar.style.marginTop = `${scrollbarY}px`;
+        // Style the scrollbars differently when there's no scroll (all content visible)
+        const handleNoScrollStyling = (scrollbar, size, fillSize) => {
+            const fillsWindowClass = 'represents-no-scroll';
+            if (Math.abs(size - fillSize) < 1e-8) {
+                scrollbar.classList.add(fillsWindowClass);
+            }
+            else {
+                scrollbar.classList.remove(fillsWindowClass);
+            }
+        };
+        handleNoScrollStyling(this.horizontalScrollbar, scrollbarWidth, screenSize.x);
+        handleNoScrollStyling(this.verticalScrollbar, scrollbarHeight, screenSize.y);
+        // Fade out after a delay.
+        if (this.fadeOutTimeout !== null) {
+            clearTimeout(this.fadeOutTimeout);
+        }
+        const fadeOutDelay = 3000;
+        this.fadeOutTimeout = setTimeout(() => {
+            this.scrollbarOverlay.classList.remove('just-updated');
+        }, fadeOutDelay);
+        this.scrollbarOverlay.classList.add('just-updated');
+    }
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/mjs/tools/ToolController.mjs

@@ -18,6 +18,7 @@ import  SoundUITool  from './SoundUITool.mjs';
 import  { InputEvtType }  from '../inputEvents.mjs';
 import  InputPipeline  from './InputFilter/InputPipeline.mjs';
 import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
+import  ScrollbarTool  from './ScrollbarTool.mjs';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -51,6 +52,7 @@ export default class ToolController {
         const soundExplorer = new SoundUITool(editor, localization.soundExplorer);
         soundExplorer.setEnabled(false);
         this.tools = [
+            new ScrollbarTool(editor),
             new PipetteTool(editor, localization.pipetteTool),
             soundExplorer,
             panZoomTool,

package/dist/mjs/types.d.ts

@@ -82,7 +82,9 @@ export interface ToolbarDropdownShownEvent {
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
 export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null | void;
 export type ComponentAddedListener = (component: AbstractComponent) => Promise<void> | void;
-export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
+export type OnDetermineExportRectListener = (exportRect: Rect2, options?: {
+    autoresize: boolean;
+}) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

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

@@ -21,3 +21,7 @@ export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value i
  * Throws if any of `values` is not of type number.
  */
 export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];
+/**
+ * Throws an exception if `typeof value` is not a boolean.
+ */
+export declare const assertIsBoolean: (value: any) => value is boolean;

package/dist/mjs/util/assertions.mjs

@@ -43,3 +43,13 @@ export const assertIsNumberArray = (values, allowNaN = false) => {
     }
     return true;
 };
+/**
+ * Throws an exception if `typeof value` is not a boolean.
+ */
+export const assertIsBoolean = (value) => {
+    if (typeof value !== 'boolean') {
+        throw new Error('Given value is not a boolean');
+        // return false;
+    }
+    return true;
+};

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.2.2',
+    number: '1.3.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "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,12 +64,11 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.2.2",
+    "@js-draw/math": "^1.3.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
     "@js-draw/build-tool": "^1.0.2",
-    "@types/bezier-js": "4.1.0",
     "@types/jest": "29.5.3",
     "@types/jsdom": "21.1.1"
   },
@@ -87,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "ced98ae289f299c44b54515571d0087aa6d32cdc"
+  "gitHead": "46b3d8f819f8e083f6e3e1d01e027e4311355456"
 }

package/src/Editor.scss

@@ -136,6 +136,14 @@
 	z-index: 5;
 }
 
+// TODO: Apply this change during a future major release.
+// So as not to change the position of other overlays, all overlays should have
+// 0 height.
+// Uses the alternate overlay class name to decrease specificity.
+// .js-draw-editor-overlay {
+// 	//height: 0;
+// }
+
 @media print {
 	.imageEditorContainer .loadingMessage {
 		display: none;

package/src/dialogs/dialogs.scss

@@ -1,7 +1,8 @@
 
 @use './makeAboutDialog.scss';
 
-.dialog-container {
+// Repeat to increase specificity -- dialog containers are often overlays
+.dialog-container.dialog-container {
 	background-color: var( --background-color-transparent);
 
 	backdrop-filter: blur(5px);

package/src/toolbar/EdgeToolbar.scss

@@ -480,6 +480,8 @@
 	.toolbar-spacedList {
 		box-sizing: border-box;
 
+		--align-items-to-x: 105px;
+
 		& > div {
 			display: flex;
 			align-items: center;
@@ -491,7 +493,7 @@
 			// Align inputs (assumes labels come first)
 			& > label {
 				padding-right: 35px;
-				min-width: 105px;
+				min-width: var(--align-items-to-x);
 				flex-shrink: 1;
 				box-sizing: border-box;
 			}
@@ -499,6 +501,7 @@
 			& > input[type="checkbox"] {
 				width: 20px;
 				height: 20px;
+				margin-left: 0;
 			}
 
 			// If checkboxes have flex-grow, the checkbox region can become centered.

package/src/toolbar/widgets/DocumentPropertiesWidget.scss

@@ -4,4 +4,16 @@
 		width: 100%;
 		text-align: end;
 	}
+
+	& > * {
+		--align-items-to-x: 120px;
+	}
+
+	.js-draw-size-input-row.js-draw-size-input-row {
+		display: flex;
+
+		&.size-input-row--automatic-size {
+			display: none;
+		}
+	}
 }

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

@@ -20,7 +20,7 @@
 		flex-shrink: 1;
 		margin: 2px;
 
-		&:focus-within {
+		&.focus-visible {
 			outline: 2px solid var(--foreground-color-1);
 		}
 

package/src/tools/ScrollbarTool.scss

@@ -0,0 +1,57 @@
+
+.ScrollbarTool-overlay {
+	width: 0;
+	height: 0;
+	overflow: visible;
+
+	$visible-opacity: 0.2;
+	opacity: $visible-opacity;
+	pointer-events: none;
+
+	--fade-out-animation: 1s ease 0s fade-out;
+
+	@media (prefers-reduced-motion: reduce) {
+		--fade-out-animation: none !important;
+	}
+
+	@keyframes fade-out {
+		from { opacity: $visible-opacity; }
+		to { opacity: 0; }
+	}
+
+	&:not(.just-updated) {
+		animation: var(--fade-out-animation);
+		opacity: 0;
+	}
+
+	--scrollbar-size: 3px;
+
+	.vertical-scrollbar, .horizontal-scrollbar {
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+
+		min-width: var(--scrollbar-size);
+		min-height: var(--scrollbar-size);
+
+		background-color: var(--foreground-color-1);
+		border-radius: var(--scrollbar-size);
+		position: absolute;
+
+		&.represents-no-scroll {
+			animation: var(--fade-out-animation);
+			opacity: 0;
+		}
+	}
+
+	&:not(.scrollbar-left) {
+		.vertical-scrollbar {
+			margin-left: calc(var(--editor-current-display-width-px) - var(--scrollbar-size));
+		}
+	}
+	
+	&:not(.scrollbar-top) {
+		.horizontal-scrollbar {
+			margin-top: calc(var(--editor-current-display-height-px) - var(--scrollbar-size));
+		}
+	}
+}