js-draw 1.19.1 → 1.20.1

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

@@ -176,13 +176,21 @@ class InsertImageWidget extends BaseWidget {
             currentImage?.reset();
         };
         this.statusView.replaceChildren(sizeText);
-        const largeImageThreshold = 0.12 * 1024 * 1024; // 0.12 MiB
-        if (imageData.length > largeImageThreshold) {
+        if (currentImage?.isLarge()) {
             this.statusView.appendChild(decreaseSizeButton);
         }
         else if (currentImage?.isChanged()) {
             this.statusView.appendChild(resetSizeButton);
         }
+        else {
+            const hasLargeOrChangedImages = this.images.get().some(image => image.data?.isChanged() || image.data?.isLarge());
+            if (hasLargeOrChangedImages) {
+                // Still show the button -- prevents the layout from readjusting while
+                // scrolling through the image list
+                decreaseSizeButton.disabled = true;
+                this.statusView.appendChild(decreaseSizeButton);
+            }
+        }
     }
     updateInputs() {
         const resetInputs = () => {
@@ -220,7 +228,7 @@ class InsertImageWidget extends BaseWidget {
                 }
                 const image = new Image();
                 image.src = imageWrapper.getBase64Url();
-                image.setAttribute('alt', this.imageAltTextInput.value);
+                image.setAttribute('alt', imageWrapper.getAltText());
                 let component;
                 try {
                     component = await ImageComponent.fromImage(image, transform);

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

@@ -42,7 +42,18 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
             icon.style.display = 'none';
         }
         else if (files.length > 0) {
-            descriptionText.textContent = files.map(file => file.name).join('\n');
+            const fileNames = files.map(file => file.name);
+            const maxNames = 5;
+            if (fileNames.length <= maxNames) {
+                descriptionText.textContent = fileNames.join('\n');
+            }
+            else {
+                const fileNamesToShow = fileNames.slice(0, maxNames - 1);
+                descriptionText.textContent = [
+                    ...fileNamesToShow,
+                    context.localization.fileInput__andNMoreFiles(fileNames.length - fileNamesToShow.length),
+                ].join('\n');
+            }
             // Only show the icon when there are files
             icon.style.display = 'none';
         }

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

@@ -6,8 +6,72 @@ import  { MutableReactiveValue, ReactiveValue }  from '../../../util/ReactiveVal
 const makeSnappedList = (itemsValue) => {
     const container = document.createElement('div');
     container.classList.add('toolbar-snapped-scroll-list');
+    const scroller = document.createElement('div');
+    scroller.classList.add('scroller');
     const visibleIndex = MutableReactiveValue.fromInitialValue(0);
     let observer = null;
+    const makePageMarkers = () => {
+        const markerContainer = document.createElement('div');
+        markerContainer.classList.add('page-markers');
+        // Keyboard focus should go to the main scrolling list.
+        // TODO: Does it make sense for the page marker list to be focusable?
+        markerContainer.setAttribute('tabindex', '-1');
+        const markers = [];
+        const pairedItems = ReactiveValue.union([visibleIndex, itemsValue]);
+        pairedItems.onUpdateAndNow(([currentVisibleIndex, items]) => {
+            let addedOrRemovedMarkers = false;
+            // Items may have been removed from the list of pages. Make the markers reflect that.
+            while (items.length < markers.length) {
+                markers.pop();
+                addedOrRemovedMarkers = true;
+            }
+            let activeMarker;
+            for (let i = 0; i < items.length; i++) {
+                let marker;
+                if (i >= markers.length) {
+                    marker = document.createElement('div');
+                    // Use a separate content element to increase the clickable size of
+                    // the marker.
+                    const content = document.createElement('div');
+                    content.classList.add('content');
+                    marker.replaceChildren(content);
+                    markers.push(marker);
+                    addedOrRemovedMarkers = true;
+                }
+                else {
+                    marker = markers[i];
+                }
+                marker.classList.add('marker');
+                if (i === currentVisibleIndex) {
+                    marker.classList.add('-active');
+                    activeMarker = marker;
+                }
+                else {
+                    marker.classList.remove('-active');
+                }
+                const markerIndex = i;
+                marker.onclick = () => {
+                    wrappedItems.get()[markerIndex]?.element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                };
+            }
+            // Only call .replaceChildren when necessary -- doing so on every change would
+            // break transitions.
+            if (addedOrRemovedMarkers) {
+                markerContainer.replaceChildren(...markers);
+            }
+            // Handles the case where there are many markers and the current is offscreen
+            if (activeMarker && markerContainer.scrollHeight > container.clientHeight) {
+                activeMarker.scrollIntoView({ block: 'nearest' });
+            }
+            if (markers.length === 1) {
+                markerContainer.classList.add('-one-element');
+            }
+            else {
+                markerContainer.classList.remove('-one-element');
+            }
+        });
+        return markerContainer;
+    };
     const createObserver = () => {
         observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
@@ -23,7 +87,7 @@ const makeSnappedList = (itemsValue) => {
         }, {
             // Element to use as the boudning box with which to intersect.
             // See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-            root: container,
+            root: scroller,
             // Fraction of an element that must be visible to trigger the callback:
             threshold: 0.9,
         });
@@ -55,7 +119,7 @@ const makeSnappedList = (itemsValue) => {
         for (const item of lastItems) {
             observer?.unobserve(item.element);
         }
-        container.replaceChildren();
+        scroller.replaceChildren();
         // An observer is only necessary if there are multiple items to scroll through.
         if (items.length > 1) {
             createObserver();
@@ -71,7 +135,7 @@ const makeSnappedList = (itemsValue) => {
             container.classList.remove('-empty');
         }
         for (const item of items) {
-            container.appendChild(item.element);
+            scroller.appendChild(item.element);
         }
         visibleIndex.set(0);
         if (observer) {
@@ -89,7 +153,8 @@ const makeSnappedList = (itemsValue) => {
     });
     // makeSnappedList is generally shown within the toolbar. This allows users to
     // scroll it with a touchpad.
-    stopPropagationOfScrollingWheelEvents(container);
+    stopPropagationOfScrollingWheelEvents(scroller);
+    container.replaceChildren(makePageMarkers(), scroller);
     return {
         container,
         visibleItem,

package/dist/mjs/tools/Eraser.mjs

@@ -65,6 +65,7 @@ export default class Eraser extends BaseTool {
         this.editor = editor;
         this.lastPoint = null;
         this.isFirstEraseEvt = true;
+        this.toAdd = new Set();
         // Commands that each remove one element
         this.eraseCommands = [];
         this.addCommands = [];
@@ -174,15 +175,17 @@ export default class Eraser extends BaseTool {
             newAddCommands.forEach(command => command.apply(this.editor));
             const finalToErase = [];
             for (const item of toErase) {
-                if (this.toAdd.includes(item)) {
-                    this.toAdd = this.toAdd.filter(i => i !== item);
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
                 }
                 else {
                     finalToErase.push(item);
                 }
             }
             this.toRemove.push(...finalToErase);
-            this.toAdd.push(...toAdd);
+            for (const item of toAdd) {
+                this.toAdd.add(item);
+            }
             this.eraseCommands.push(new Erase(finalToErase));
             this.addCommands.push(...newAddCommands);
         }
@@ -193,7 +196,7 @@ export default class Eraser extends BaseTool {
         if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
             this.lastPoint = event.current.canvasPos;
             this.toRemove = [];
-            this.toAdd = [];
+            this.toAdd.clear();
             this.isFirstEraseEvt = true;
             this.drawPreviewAt(event.current.canvasPos);
             return true;
@@ -209,7 +212,21 @@ export default class Eraser extends BaseTool {
         const commands = [];
         if (this.addCommands.length > 0) {
             this.addCommands.forEach(cmd => cmd.unapply(this.editor));
-            commands.push(...this.toAdd.map(a => EditorImage.addElement(a)));
+            // Remove items from toAdd that are also present in toRemove -- adding, then
+            // removing these does nothing, and can break undo/redo.
+            for (const item of this.toAdd) {
+                if (this.toRemove.includes(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter(other => other !== item);
+                }
+            }
+            for (const item of this.toRemove) {
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter(other => other !== item);
+                }
+            }
+            commands.push(...[...this.toAdd].map(a => EditorImage.addElement(a)));
             this.addCommands = [];
         }
         if (this.eraseCommands.length > 0) {

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

@@ -10,13 +10,27 @@ interface PinchData {
     dist: number;
 }
 export declare enum PanZoomMode {
+    /** Touch gestures with a single pointer. Ignores non-touch gestures. */
     OneFingerTouchGestures = 1,
+    /** Touch gestures with exactly two pointers. Ignores non-touch gestures. */
     TwoFingerTouchGestures = 2,
     RightClickDrags = 4,
+    /** Single-pointer gestures of *any* type (including touch). */
     SinglePointerGestures = 8,
+    /** Keyboard navigation (e.g. LeftArrow to move left). */
     Keyboard = 16,
+    /** If provided, prevents **this** tool from rotating the viewport (other tools may still do so). */
     RotationLocked = 32
 }
+/**
+ * This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
+ *
+ * Which events are handled, and which are skipped, are determined by the tool's `mode`. For example,
+ * a `PanZoom` tool with `mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags` would
+ * respond to right-click drag events and two-finger touch gestures.
+ *
+ * @see {@link setModeEnabled}
+ */
 export default class PanZoom extends BaseTool {
     private editor;
     private mode;
@@ -58,8 +72,48 @@ export default class PanZoom extends BaseTool {
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress(event: KeyPressEvent): boolean;
     private isRotationLocked;
+    /**
+     * Changes the types of gestures used by this pan/zoom tool.
+     *
+     * @see {@link PanZoomMode} {@link setMode}
+     *
+     * @example
+     * ```ts,runnable
+     * import { Editor, PanZoomTool, PanZoomMode } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     *
+     * // By default, there are multiple PanZoom tools that handle different events.
+     * // This gets all PanZoomTools.
+     * const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool);
+     *
+     * // The first PanZoomTool is the highest priority -- by default,
+     * // this tool is responsible for handling multi-finger touch gestures.
+     * //
+     * // Lower-priority PanZoomTools handle one-finger touch gestures and
+     * // key-presses.
+     * const panZoomTool = panZoomToolList[0];
+     *
+     * // Lock rotation for multi-finger touch gestures.
+     * panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
+     * ```
+     */
     setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
+    /**
+     * Sets all modes for this tool using a bitmask.
+     *
+     * @see {@link setModeEnabled}
+     *
+     * @example
+     * ```ts
+     * tool.setMode(PanZoomMode.RotationLocked|PanZoomMode.TwoFingerTouchGestures);
+     * ```
+     */
     setMode(mode: PanZoomMode): void;
+    /**
+     * Returns a bitmask indicating the currently-enabled modes.
+     * @see {@link setModeEnabled}
+     */
     getMode(): PanZoomMode;
 }
 export {};

package/dist/mjs/tools/PanZoom.mjs

@@ -7,11 +7,16 @@ import  BaseTool  from './BaseTool.mjs';
 import  { moveDownKeyboardShortcutId, moveLeftKeyboardShortcutId, moveRightKeyboardShortcutId, moveUpKeyboardShortcutId, rotateClockwiseKeyboardShortcutId, rotateCounterClockwiseKeyboardShortcutId, zoomInKeyboardShortcutId, zoomOutKeyboardShortcutId }  from './keybindings.mjs';
 export var PanZoomMode;
 (function (PanZoomMode) {
+    /** Touch gestures with a single pointer. Ignores non-touch gestures. */
     PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    /** Touch gestures with exactly two pointers. Ignores non-touch gestures. */
     PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
     PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    /** Single-pointer gestures of *any* type (including touch). */
     PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
+    /** Keyboard navigation (e.g. LeftArrow to move left). */
     PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
+    /** If provided, prevents **this** tool from rotating the viewport (other tools may still do so). */
     PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
 })(PanZoomMode || (PanZoomMode = {}));
 class InertialScroller {
@@ -59,6 +64,15 @@ class InertialScroller {
         }
     }
 }
+/**
+ * This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
+ *
+ * Which events are handled, and which are skipped, are determined by the tool's `mode`. For example,
+ * a `PanZoom` tool with `mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags` would
+ * respond to right-click drag events and two-finger touch gestures.
+ *
+ * @see {@link setModeEnabled}
+ */
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
         super(editor.notifier, description);
@@ -422,8 +436,32 @@ export default class PanZoom extends BaseTool {
     isRotationLocked() {
         return !!(this.mode & PanZoomMode.RotationLocked);
     }
-    // Sets whether the given `mode` is enabled. `mode` should be a single
-    // mode from the `PanZoomMode` enum.
+    /**
+     * Changes the types of gestures used by this pan/zoom tool.
+     *
+     * @see {@link PanZoomMode} {@link setMode}
+     *
+     * @example
+     * ```ts,runnable
+     * import { Editor, PanZoomTool, PanZoomMode } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     *
+     * // By default, there are multiple PanZoom tools that handle different events.
+     * // This gets all PanZoomTools.
+     * const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool);
+     *
+     * // The first PanZoomTool is the highest priority -- by default,
+     * // this tool is responsible for handling multi-finger touch gestures.
+     * //
+     * // Lower-priority PanZoomTools handle one-finger touch gestures and
+     * // key-presses.
+     * const panZoomTool = panZoomToolList[0];
+     *
+     * // Lock rotation for multi-finger touch gestures.
+     * panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
+     * ```
+     */
     setModeEnabled(mode, enabled) {
         let newMode = this.mode;
         if (enabled) {
@@ -434,6 +472,16 @@ export default class PanZoom extends BaseTool {
         }
         this.setMode(newMode);
     }
+    /**
+     * Sets all modes for this tool using a bitmask.
+     *
+     * @see {@link setModeEnabled}
+     *
+     * @example
+     * ```ts
+     * tool.setMode(PanZoomMode.RotationLocked|PanZoomMode.TwoFingerTouchGestures);
+     * ```
+     */
     setMode(mode) {
         if (mode !== this.mode) {
             this.mode = mode;
@@ -443,6 +491,10 @@ export default class PanZoom extends BaseTool {
             });
         }
     }
+    /**
+     * Returns a bitmask indicating the currently-enabled modes.
+     * @see {@link setModeEnabled}
+     */
     getMode() {
         return this.mode;
     }

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

@@ -2,6 +2,9 @@ type ListenerResult = {
     remove(): void;
 };
 type UpdateCallback<T> = (value: T) => void;
+type ReactiveValuesOf<T extends unknown[]> = {
+    [key in keyof T]: ReactiveValue<T[key]>;
+};
 /**
  * A `ReactiveValue` is a value that
  * - updates periodically,
@@ -56,6 +59,7 @@ export declare abstract class ReactiveValue<T> {
      * Returns a reactive value derived from a single `source`.
      */
     static map<A, B>(source: ReactiveValue<A>, map: (a: A) => B, inverseMap: (b: B) => A): MutableReactiveValue<B>;
+    static union<Values extends [...unknown[]]>(values: ReactiveValuesOf<Values>): ReactiveValue<Values>;
 }
 export declare abstract class MutableReactiveValue<T> extends ReactiveValue<T> {
     /**

package/dist/mjs/util/ReactiveValue.mjs

@@ -103,6 +103,11 @@ export class ReactiveValue {
         }
         return result;
     }
+    static union(values) {
+        return ReactiveValue.fromCallback(() => {
+            return values.map(value => value.get());
+        }, values);
+    }
 }
 export class MutableReactiveValue extends ReactiveValue {
     static fromProperty(sourceValue, propertyName) {

package/dist/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.19.1',
+    number: '1.20.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.19.1",
+  "version": "1.20.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",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "50fa44a2bb68b93d24efea433760a5e45c56293f"
+  "gitHead": "a981ae8ef5f2ac8ef27c8ce2872a2dbf0c25050d"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -307,14 +307,19 @@
 		border: none;
 		padding: 10px;
 
-		color: var(--foreground-color-1);
-
 		transition: 0.2s ease box-shadow;
 
-		&:hover {
+		&:not(:disabled):hover {
 			box-shadow: 0 1px 2px var(--shadow-color);
 		}
 
+		&:disabled {
+			opacity: 0.5;
+			font-weight: unset;
+			cursor: unset;
+			color: var(--foreground-color-1);
+		}
+
 		font-weight: bold;
 		color: var(--primary-action-foreground-color);
 	}

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

@@ -37,8 +37,9 @@
 			in srgb, var(--foreground-color-1), transparent
 		);
 
-		> .cancel-button {
-			display: block;
+		.cancel-button {
+			padding-left: 3px;
+			padding-right: 3px;
 		}
 
 		> .toolbar--file-input-description {

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

@@ -2,27 +2,73 @@
 // Repeat for specificity.
 // TODO(v2): Refactor everything to use RCSS.
 :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
-	overflow-y: auto;
-	scroll-snap-type: y mandatory;
 	height: min(200px, 50vh);
+	position: relative;
 	display: flex;
-	flex-direction: column;
+	align-items: center;
+
+	> .scroller {
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		scroll-snap-type: y mandatory;
 
-	> .item {
 		height: 100%;
 		width: 100%;
-		flex-shrink: 0;
-
-		display: flex;
-		justify-content: center;
-		align-items: center;
+		flex-grow: 1;
 
-		scroll-snap-align: start;
-		scroll-snap-stop: always;
-		box-sizing: border-box;
+		> .item {
+			height: 100%;
+			width: 100%;
+			flex-shrink: 0;
+	
+			display: flex;
+			justify-content: center;
+			align-items: center;
+	
+			scroll-snap-align: start;
+			scroll-snap-stop: always;
+			box-sizing: border-box;
+		}
 	}
 
 	&.-empty {
 		display: none;
 	}
+
+	> .page-markers {
+		overflow: hidden;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		max-height: 100%;
+		min-height: 0;
+
+		&.-one-element {
+			visibility: hidden;
+		}
+
+		> .marker {
+			> .content {
+				background-color: var(--foreground-color-1);
+				border-radius: 2px;
+				padding: 2px;
+			}
+
+			padding: 2px;
+			opacity: 0.1;
+			cursor: pointer;
+
+			left: 0;
+			transition: left 0.2s ease;
+
+			&.-active {
+				position: relative;
+				left: 2px;
+				opacity: 0.2;
+			}
+		}
+	}
 }