js-draw 1.18.0 → 1.20.0

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

@@ -61,6 +61,11 @@ export default class SelectionHandle {
     addTo(container) {
         container.appendChild(this.element);
     }
+    /**
+     * Removes this element from its container. Should only be called
+     * after {@link addTo}.
+     */
+    remove() { this.element.remove(); }
     /**
      * Returns this handle's bounding box relative to the top left of the
      * selection box.
@@ -109,6 +114,7 @@ export default class SelectionHandle {
     handleDragStart(pointer) {
         this.onDragStart(pointer.canvasPos);
         this.dragLastPos = pointer.canvasPos;
+        return true;
     }
     handleDragUpdate(pointer) {
         if (!this.dragLastPos) {

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

@@ -398,7 +398,7 @@ class SelectionTool extends BaseTool {
                     resolve(blob);
                 }
                 else {
-                    reject('Failed to convert canvas to blob.');
+                    reject(new Error('Failed to convert canvas to blob.'));
                 }
             }, 'image/png');
         }));

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

@@ -1,3 +1,5 @@
+import type { Rect2, Point2 } from '@js-draw/math';
+import Pointer from '../../Pointer';
 export declare enum ResizeMode {
     Both = 0,
     HorizontalOnly = 1,
@@ -7,3 +9,20 @@ export declare enum TransformMode {
     Snap = 0,
     NoSnap = 1
 }
+/**
+ * Represents a child of the selection that should move with the selection
+ * and handle events.
+ *
+ * Although selection children should be `HTMLElement`s, the selection may be
+ * hidden behind an invisible element. As such, these elements should handle
+ * drag start/update/end events.
+ */
+export interface SelectionBoxChild {
+    updatePosition(selectionScreenBBox: Rect2): void;
+    containsPoint(point: Point2): boolean;
+    addTo(container: HTMLElement): void;
+    remove(): void;
+    handleDragStart(pointer: Pointer): boolean;
+    handleDragUpdate(pointer: Pointer): void;
+    handleDragEnd(): void;
+}

package/dist/mjs/tools/TextTool.mjs

@@ -18,9 +18,10 @@ export default class TextTool extends BaseTool {
         this.textMeasuringCtx = null;
         this.textScale = Vec2.of(1, 1);
         this.removeExistingCommand = null;
+        const editorFonts = editor.getCurrentSettings().text?.fonts ?? [];
         this.textStyleValue = ReactiveValue.fromInitialValue({
             size: 32,
-            fontFamily: 'sans-serif',
+            fontFamily: editorFonts.length > 0 ? editorFonts[0] : 'sans-serif',
             renderingStyle: {
                 fill: Color4.purple,
             },

package/dist/mjs/tools/TextTool.test.d.ts

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

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

@@ -55,6 +55,8 @@ export default class ToolController implements InputEventListener {
     insertToolsAfter(insertAfter: BaseTool, toolsToInsert: BaseTool[]): void;
     /** @see {@link insertToolsAfter} */
     insertToolsBefore(insertBefore: BaseTool, toolsToInsert: BaseTool[]): void;
+    /** @internal */
+    changeActiveToolTo(tool: BaseTool): void;
     private onEventInternal;
     /** Alias for {@link dispatchInputEvent}. */
     onEvent(event: InputEvt): boolean;

package/dist/mjs/tools/ToolController.mjs

@@ -34,6 +34,7 @@ export default class ToolController {
         const secondaryPenTool = new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 });
         // Stabilize the secondary pen tool.
         secondaryPenTool.setInputMapper(new InputStabilizer(editor.viewport));
+        const eraser = new Eraser(editor, localization.eraserTool);
         const primaryTools = [
             // Three pens
             primaryPenTool,
@@ -44,7 +45,7 @@ export default class ToolController {
                 thickness: 40,
                 factory: makePressureSensitiveFreehandLineBuilder
             }),
-            new Eraser(editor, localization.eraserTool),
+            eraser,
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
             new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
@@ -62,6 +63,7 @@ export default class ToolController {
             new UndoRedoShortcut(editor),
             new ToolbarShortcutHandler(editor),
             new ToolSwitcherShortcut(editor),
+            eraser.makeEraserSwitcherTool(),
             new FindTool(editor),
             new PasteHandler(editor),
             new SelectAllShortcutHandler(editor),
@@ -180,6 +182,13 @@ export default class ToolController {
     insertToolsBefore(insertBefore, toolsToInsert) {
         this.insertTools(insertBefore, toolsToInsert, 'before');
     }
+    /** @internal */
+    changeActiveToolTo(tool) {
+        if (!tool.isEnabled()) {
+            tool.setEnabled(true);
+        }
+        this.activeTool = tool;
+    }
     // @internal use `dispatchEvent` rather than calling `onEvent` directly.
     onEventInternal(event) {
         const isEditorReadOnly = this.isEditorReadOnly.get();

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,
@@ -33,6 +36,8 @@ export declare abstract class ReactiveValue<T> {
      * @see {@link onUpdate}.
      */
     abstract onUpdateAndNow(callback: UpdateCallback<T>): ListenerResult;
+    /** Returns a promise that resolves when this value is next changed. */
+    waitForNextUpdate(): Promise<T>;
     /** Creates a `ReactiveValue` with an initial value, `initialValue`. */
     static fromInitialValue<T>(initialValue: T): MutableReactiveValue<T>;
     /** Returns a `ReactiveValue` that is **known** will never change. */
@@ -54,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

@@ -35,6 +35,15 @@ const noOpSetUpdateListener = () => {
  * Avoid extending this class from an external library, as that may not be stable.
  */
 export class ReactiveValue {
+    /** Returns a promise that resolves when this value is next changed. */
+    waitForNextUpdate() {
+        return new Promise(resolve => {
+            const listener = this.onUpdate(value => {
+                listener.remove();
+                resolve(value);
+            });
+        });
+    }
     /** Creates a `ReactiveValue` with an initial value, `initialValue`. */
     static fromInitialValue(initialValue) {
         return new ReactiveValueImpl(initialValue);
@@ -48,6 +57,8 @@ export class ReactiveValue {
                 callback(value);
                 return noOpUpdateListenerResult;
             },
+            // Never resolves -- immutable.
+            waitForNextUpdate: () => new Promise(() => { }),
         };
     }
     /**
@@ -92,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/util/bytesToSizeString.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns a size in bytes, KiB, or MiB with units suffix.
+ */
+declare const bytesToSizeString: (sizeBytes: number) => {
+    size: number;
+    units: string;
+};
+export default bytesToSizeString;

package/dist/mjs/util/bytesToSizeString.mjs

@@ -0,0 +1,24 @@
+/**
+ * Returns a size in bytes, KiB, or MiB with units suffix.
+ */
+const bytesToSizeString = (sizeBytes) => {
+    const sizeInKiB = sizeBytes / 1024;
+    const sizeInMiB = sizeInKiB / 1024;
+    const sizeInGiB = sizeInMiB / 1024;
+    let units = 'B';
+    let size = sizeBytes;
+    if (sizeInGiB >= 1) {
+        size = sizeInGiB;
+        units = 'GiB';
+    }
+    else if (sizeInMiB >= 1) {
+        size = sizeInMiB;
+        units = 'MiB';
+    }
+    else if (sizeInKiB >= 1) {
+        size = sizeInKiB;
+        units = 'KiB';
+    }
+    return { size, units };
+};
+export default bytesToSizeString;

package/dist/mjs/util/bytesToSizeString.test.d.ts

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

package/dist/mjs/util/stopPropagationOfScrollingWheelEvents.mjs

@@ -1,13 +1,17 @@
 const stopPropagationOfScrollingWheelEvents = (scrollingContainer) => {
+    const scrollsAxis = (delta, clientSize, scrollOffset, scrollSize) => {
+        const hasScroll = clientSize !== scrollSize && delta !== 0;
+        const eventScrollsPastStart = scrollOffset + delta <= 0;
+        const scrollEnd = scrollOffset + clientSize;
+        const eventScrollsPastEnd = scrollEnd + delta > scrollSize;
+        return hasScroll && !eventScrollsPastStart && !eventScrollsPastEnd;
+    };
     scrollingContainer.onwheel = (event) => {
-        const hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
-            && event.deltaX !== 0;
-        const eventScrollsPastLeft = scrollingContainer.scrollLeft + event.deltaX <= 0;
-        const scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
-        const eventScrollsPastRight = scrollRight + event.deltaX > scrollingContainer.scrollWidth;
+        const scrollsX = scrollsAxis(event.deltaX, scrollingContainer.clientWidth, scrollingContainer.scrollLeft, scrollingContainer.scrollWidth);
+        const scrollsY = scrollsAxis(event.deltaY, scrollingContainer.clientHeight, scrollingContainer.scrollTop, scrollingContainer.scrollHeight);
         // Stop the editor from receiving the event if it will scroll the pen type selector
         // instead.
-        if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
+        if (scrollsX || scrollsY) {
             event.stopPropagation();
         }
     };

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

@@ -1,6 +1,8 @@
 /**
  * Resolves when all given promises have resolved. If no promises are given,
  * does not return a Promise.
+ *
+ * If all elements of `results` are known to be `Promise`s, use `Promise.all`.
  */
 declare const waitForAll: (results: (Promise<void> | void)[]) => Promise<void> | void;
 export default waitForAll;

package/dist/mjs/util/waitForAll.mjs

@@ -1,6 +1,8 @@
 /**
  * Resolves when all given promises have resolved. If no promises are given,
  * does not return a Promise.
+ *
+ * If all elements of `results` are known to be `Promise`s, use `Promise.all`.
  */
 const waitForAll = (results) => {
     // If any are Promises...

package/dist/mjs/util/waitForImageLoaded.mjs

@@ -2,7 +2,10 @@ const waitForImageLoad = async (image) => {
     if (!image.complete) {
         await new Promise((resolve, reject) => {
             image.onload = event => resolve(event);
+            // TODO(v2): Return a `new Error(event.message)`
+            // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
             image.onerror = event => reject(event);
+            // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
             image.onabort = event => reject(event);
         });
     }

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

@@ -1,2 +1,3 @@
+/** Returns a promise that resolves after `timeout` milliseconds. */
 declare const waitForTimeout: (timeout: number) => Promise<void>;
 export default waitForTimeout;

package/dist/mjs/util/waitForTimeout.mjs

@@ -1,4 +1,4 @@
-// Returns a promise that resolves after `timeout` milliseconds.
+/** Returns a promise that resolves after `timeout` milliseconds. */
 const waitForTimeout = (timeout) => {
     return new Promise(resolve => {
         setTimeout(() => resolve(), timeout);

package/dist/mjs/version.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.18.0",
+  "version": "1.20.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,11 +64,11 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.18.0",
+    "@js-draw/math": "^1.19.0",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.17.0",
+    "@js-draw/build-tool": "^1.19.0",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "73c0d802a8439b5d408ba1e60f91be029db7e402"
+  "gitHead": "5bf4f42d0c3367a074c9e9bbb50370421d8bf7d0"
 }

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/toolbar.scss

@@ -1,10 +1,4 @@
-@use "./widgets/InsertImageWidget.scss";
-@use "./widgets/OverflowWidget.css";
-@use "./widgets/PenToolWidget.scss";
-@use "./widgets/HandToolWidget.scss";
-@use "./widgets/SelectionToolWidget.scss";
-@use "./widgets/DocumentPropertiesWidget.scss";
-@use "./widgets/components/components.scss";
+@use "./widgets/widgets.scss";
 
 @use "./AbstractToolbar.scss";
 @use "./EdgeToolbar.scss";

package/src/toolbar/widgets/{InsertImageWidget.scss → InsertImageWidget/index.scss}

@@ -11,8 +11,8 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 	}
 
 	img {
-		max-width: min(50vw, 75%);
-		max-height: min(300px, 50vh);
+		max-width: 100%;
+		max-height: 100%;
 	
 		/* Center */
 		display: block;
@@ -23,6 +23,7 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 	.insert-image-image-status-view {
 		display: flex;
 		justify-content: space-between;
+		padding-bottom: 0;
 	}
 
 	.action-button-row {

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

@@ -2,4 +2,5 @@
 @use "./makeColorInput.scss";
 @use "./makeSeparator.scss";
 @use "./makeFileInput.scss";
-@use "./makeGridSelector.scss";
+@use "./makeGridSelector.scss";
+@use "./makeSnappedList.scss";

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

@@ -2,7 +2,11 @@
 .toolbar-element .toolbar--file-input-container {
 	display: flex;
 
-	> input[type="file"] {
+	&.-loading {
+		opacity: 0.8;
+	}
+
+	> input.file-input {
 		// Hide in a way such that screen readers can still access the
 		// input.
 		opacity: 0;
@@ -11,6 +15,11 @@
 		min-width: 0 !important;
 		max-width: 0;
 		height: 0;
+
+		// Needed when the input is a button.
+		overflow: hidden;
+		padding: 0;
+		margin: 0;
 	}
 
 	> label {
@@ -28,6 +37,10 @@
 			in srgb, var(--foreground-color-1), transparent
 		);
 
+		> .cancel-button {
+			display: block;
+		}
+
 		> .toolbar--file-input-description {
 			background-color: var(--background-color-3);
 			color: var(--foreground-color-3);

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

@@ -0,0 +1,74 @@
+
+// Repeat for specificity.
+// TODO(v2): Refactor everything to use RCSS.
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
+	height: min(200px, 50vh);
+	position: relative;
+	display: flex;
+	align-items: center;
+
+	> .scroller {
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		scroll-snap-type: y mandatory;
+
+		height: 100%;
+		width: 100%;
+		flex-grow: 1;
+
+		> .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;
+			}
+		}
+	}
+}

package/src/toolbar/widgets/widgets.scss

@@ -0,0 +1,7 @@
+@use "./InsertImageWidget/index.scss";
+@use "./OverflowWidget.css";
+@use "./PenToolWidget.scss";
+@use "./HandToolWidget.scss";
+@use "./SelectionToolWidget.scss";
+@use "./DocumentPropertiesWidget.scss";
+@use "./components/components.scss";

package/dist/cjs/toolbar/widgets/InsertImageWidget.d.ts

@@ -1,22 +0,0 @@
-import Editor from '../../Editor';
-import { ToolbarLocalization } from '../localization';
-import BaseWidget from './BaseWidget';
-export default class InsertImageWidget extends BaseWidget {
-    private imagePreview;
-    private image;
-    private selectedFiles;
-    private imageAltTextInput;
-    private statusView;
-    private submitButton;
-    constructor(editor: Editor, localization?: ToolbarLocalization);
-    protected getTitle(): string;
-    protected createIcon(): Element | null;
-    protected setDropdownVisible(visible: boolean): void;
-    protected handleClick(): void;
-    private static nextInputId;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
-    private onImageDataUpdate;
-    private hideDialog;
-    private updateImageSizeDisplay;
-    private updateInputs;
-}