js-draw 0.21.0 → 0.22.1

package/dist/mjs/src/toolbar/HTMLToolbar.mjs

@@ -16,8 +16,9 @@ import  ActionButtonWidget  from './widgets/ActionButtonWidget.mjs';
 import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
 import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
 import  OverflowWidget  from './widgets/OverflowWidget.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
 export const toolbarCSSPrefix = 'toolbar-';
-export default class HTMLToolbar {
+class HTMLToolbar {
     /** @internal */
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
@@ -30,6 +31,7 @@ export default class HTMLToolbar {
         // Widget to toggle overflow menu.
         this.overflowWidget = null;
         this.updateColoris = null;
+        this.closeColorPickerOverlay = null;
         this.reLayoutQueued = false;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}root`);
@@ -50,6 +52,68 @@ export default class HTMLToolbar {
             console.warn('ResizeObserver not supported. Toolbar will not resize.');
         }
     }
+    setupCloseColorPickerOverlay() {
+        if (this.closeColorPickerOverlay)
+            return;
+        this.closeColorPickerOverlay = document.createElement('div');
+        this.closeColorPickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
+        this.editor.createHTMLOverlay(this.closeColorPickerOverlay);
+        // Buffer events: Send events to the editor only if the pointer has moved enough to
+        // suggest that the user is attempting to draw, rather than click to close the color picker.
+        let eventBuffer = [];
+        let gestureStartPos = null;
+        // Hide the color picker when attempting to draw on the overlay.
+        this.listeners.push(this.editor.handlePointerEventsFrom(this.closeColorPickerOverlay, (eventName, event) => {
+            var _a, _b;
+            // Position of the current event.
+            const currentPos = Vec2.of(event.pageX, event.pageY);
+            // Whether to send the current event to the editor
+            let sendToEditor = true;
+            if (eventName === 'pointerdown') {
+                closeColoris();
+                // Buffer the event, but don't send it to the editor yet.
+                // We don't want to send single-click events, but we do want to send full strokes.
+                eventBuffer = [];
+                eventBuffer.push([eventName, event]);
+                gestureStartPos = currentPos;
+                // Capture the pointer so we receive future events even if the overlay is hidden.
+                (_a = this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.setPointerCapture(event.pointerId);
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            else if (eventName === 'pointermove') {
+                // Skip if the pointer hasn't moved enough to not be a "click".
+                const strokeStartThreshold = 10;
+                if (gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold) {
+                    eventBuffer.push([eventName, event]);
+                    sendToEditor = false;
+                }
+                else {
+                    // Send all buffered events to the editor -- start the stroke.
+                    for (const [eventName, event] of eventBuffer) {
+                        this.editor.handleHTMLPointerEvent(eventName, event);
+                    }
+                    eventBuffer = [];
+                    sendToEditor = true;
+                }
+            }
+            // Otherwise, if we received a pointerup/pointercancel without flushing all pointerevents from the
+            // buffer, the gesture wasn't recognised as a stroke. Thus, the editor isn't expecting a pointerup/
+            // pointercancel event.
+            else if ((eventName === 'pointerup' || eventName === 'pointercancel') && eventBuffer.length > 0) {
+                (_b = this.closeColorPickerOverlay) === null || _b === void 0 ? void 0 : _b.releasePointerCapture(event.pointerId);
+                eventBuffer = [];
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            // Transfer focus to the editor to allow keyboard events to be handled.
+            if (eventName === 'pointerup') {
+                this.editor.focus();
+            }
+            // Forward all other events to the editor.
+            return sendToEditor;
+        }));
+    }
     // @internal
     setupColorPickers() {
         // Much of the setup only needs to be done once.
@@ -57,16 +121,7 @@ export default class HTMLToolbar {
             this.updateColoris();
             return;
         }
-        const closePickerOverlay = document.createElement('div');
-        closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
-        this.editor.createHTMLOverlay(closePickerOverlay);
-        // Hide the color picker when attempting to draw on the overlay.
-        this.listeners.push(this.editor.handlePointerEventsFrom(closePickerOverlay, (eventName) => {
-            if (eventName === 'pointerdown') {
-                closeColoris();
-            }
-            return true;
-        }));
+        this.setupCloseColorPickerOverlay();
         const maxSwatchLen = 12;
         const swatches = [
             Color4.red.toHexString(),
@@ -111,7 +166,9 @@ export default class HTMLToolbar {
             }
             // Show/hide the overlay. Making the overlay visible gives users a surface to click
             // on that shows/hides the color picker.
-            closePickerOverlay.style.display = event.open ? 'block' : 'none';
+            if (this.closeColorPickerOverlay) {
+                this.closeColorPickerOverlay.style.display = event.open ? 'block' : 'none';
+            }
         }));
         // Add newly-selected colors to the swatch.
         this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
@@ -373,11 +430,14 @@ export default class HTMLToolbar {
         this.addDefaultActionButtons();
     }
     remove() {
+        var _a;
         this.container.remove();
         this.resizeObserver.disconnect();
+        (_a = this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.remove();
         for (const listener of this.listeners) {
             listener.remove();
         }
     }
 }
 HTMLToolbar.colorisStarted = false;
+export default HTMLToolbar;

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

@@ -26,6 +26,7 @@ export interface ToolbarLocalization {
     duplicateSelection: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
+    colorSelectionCanceledAnnouncement: string;
     reformatSelection: string;
     undo: string;
     redo: string;

package/dist/mjs/src/toolbar/localization.mjs

@@ -23,6 +23,7 @@ export const defaultToolbarLocalization = {
     selectPenType: 'Pen type: ',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+    colorSelectionCanceledAnnouncement: 'Color selection canceled',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     documentProperties: 'Page',
     backgroundColor: 'Background Color: ',

package/dist/mjs/src/toolbar/makeColorInput.mjs

@@ -42,6 +42,11 @@ export const makeColorInput = (editor, onColorChange) => {
             open: true,
         });
         pipetteController.cancel();
+        // Focus the Coloris color picker, if it exists.
+        // Don't focus the text input within the color picker, however,
+        // as this displays a keyboard on mobile devices.
+        const colorPickerElem = document.querySelector('#clr-picker #clr-hue-slider');
+        colorPickerElem === null || colorPickerElem === void 0 ? void 0 : colorPickerElem.focus();
     });
     colorInput.addEventListener('close', () => {
         editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
@@ -49,6 +54,8 @@ export const makeColorInput = (editor, onColorChange) => {
             open: false,
         });
         onInputEnd();
+        // Restore focus to the input that opened the color picker
+        colorInput.focus();
     });
     const setColorInputValue = (color) => {
         if (typeof color === 'object') {
@@ -94,6 +101,7 @@ const addPipetteTool = (editor, container, onColorChange) => {
         // If already picking, cancel it.
         if (pipetteButton.classList.contains('active')) {
             endColorSelectMode();
+            editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
             return;
         }
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);

package/dist/mjs/src/toolbar/widgets/BaseToolWidget.d.ts

@@ -3,7 +3,6 @@ import BaseTool from '../../tools/BaseTool';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default abstract class BaseToolWidget extends BaseWidget {
-    protected editor: Editor;
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;

package/dist/mjs/src/toolbar/widgets/BaseToolWidget.mjs

@@ -3,7 +3,6 @@ import  BaseWidget  from './BaseWidget.mjs';
 export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
-        this.editor = editor;
         this.targetTool = targetTool;
         editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolEnabled) {

package/dist/mjs/src/toolbar/widgets/BaseWidget.d.ts

@@ -37,6 +37,11 @@ export default abstract class BaseWidget {
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;
     private toolbarWidgetToggleListener;
+    /**
+     * Adds this to `parent`. This can only be called once for each ToolbarWidget.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
     addTo(parent: HTMLElement): HTMLElement;
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;

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

@@ -135,14 +135,26 @@ export default class BaseWidget {
         const id = widget.getUniqueIdIn(this.subWidgets);
         this.subWidgets[id] = widget;
     }
-    // Adds this to [parent]. This can only be called once for each ToolbarWidget.
-    // Returns the element that was just added to `parent`.
-    // @internal
+    /**
+     * Adds this to `parent`. This can only be called once for each ToolbarWidget.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
     addTo(parent) {
-        this.label.innerText = this.getTitle();
-        this.setupActionBtnClickListener(this.button);
+        // Update title and icon
         this.icon = null;
         this.updateIcon();
+        this.label.innerText = this.getTitle();
+        const longLabelCSSClass = 'long-label';
+        if (this.label.innerText.length > 7) {
+            this.label.classList.add(longLabelCSSClass);
+        }
+        else {
+            this.label.classList.remove(longLabelCSSClass);
+        }
+        // Click functionality
+        this.setupActionBtnClickListener(this.button);
+        // Clear anything already in this.container.
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
@@ -199,13 +211,18 @@ export default class BaseWidget {
         if (currentlySelected === selected) {
             return;
         }
+        // Ensure that accessibility tools check and read the value of
+        // aria-checked.
+        // TODO: Ensure that 'role' is set to 'switch' by default for selectable
+        //       buttons.
+        this.button.setAttribute('role', 'switch');
         if (selected) {
             this.container.classList.add('selected');
-            this.button.ariaSelected = 'true';
+            this.button.setAttribute('aria-checked', 'true');
         }
         else {
             this.container.classList.remove('selected');
-            this.button.ariaSelected = 'false';
+            this.button.setAttribute('aria-checked', 'false');
         }
     }
     setDropdownVisible(visible) {

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

@@ -7,7 +7,7 @@ import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
-export default class DocumentPropertiesWidget extends BaseWidget {
+class DocumentPropertiesWidget extends BaseWidget {
     constructor(editor, localizationTable) {
         super(editor, 'document-properties-widget', localizationTable);
         this.updateDropdownContent = () => { };
@@ -170,3 +170,4 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     }
 }
 DocumentPropertiesWidget.idCounter = 0;
+export default DocumentPropertiesWidget;

package/dist/mjs/src/toolbar/widgets/EraserToolWidget.mjs

@@ -1,7 +1,7 @@
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
-export default class EraserToolWidget extends BaseToolWidget {
+class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
@@ -55,3 +55,4 @@ export default class EraserToolWidget extends BaseToolWidget {
     }
 }
 EraserToolWidget.nextThicknessInputId = 0;
+export default EraserToolWidget;

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

@@ -15,7 +15,7 @@ import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
 import  Mat33  from '../../math/Mat33.mjs';
 import  fileToBase64  from '../../util/fileToBase64.mjs';
 import  ActionButtonWidget  from './ActionButtonWidget.mjs';
-export default class InsertImageWidget extends ActionButtonWidget {
+class InsertImageWidget extends ActionButtonWidget {
     constructor(editor, localization) {
         localization !== null && localization !== void 0 ? localization : (localization = editor.localization);
         super(editor, 'insert-image-widget', () => editor.icons.makeInsertImageIcon(), localization.image, () => this.onClicked());
@@ -168,3 +168,4 @@ export default class InsertImageWidget extends ActionButtonWidget {
     }
 }
 InsertImageWidget.nextInputId = 0;
+export default InsertImageWidget;

package/dist/mjs/src/toolbar/widgets/PenToolWidget.mjs

@@ -8,7 +8,7 @@ import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  Color4  from '../../Color4.mjs';
-export default class PenToolWidget extends BaseToolWidget {
+class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);
         this.tool = tool;
@@ -218,3 +218,4 @@ export default class PenToolWidget extends BaseToolWidget {
     }
 }
 PenToolWidget.idCounter = 0;
+export default PenToolWidget;

package/dist/mjs/src/toolbar/widgets/TextToolWidget.mjs

@@ -3,7 +3,7 @@ import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
-export default class TextToolWidget extends BaseToolWidget {
+class TextToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'text-tool-widget', localization);
         this.tool = tool;
@@ -107,3 +107,4 @@ export default class TextToolWidget extends BaseToolWidget {
     }
 }
 TextToolWidget.idCounter = 0;
+export default TextToolWidget;

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

@@ -27,7 +27,7 @@ import  EditorImage  from '../../EditorImage.mjs';
 const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
-export default class Selection {
+class Selection {
     constructor(startPoint, editor) {
         this.editor = editor;
         this.transform = Mat33.identity;
@@ -125,6 +125,9 @@ export default class Selection {
         this.transform = Mat33.identity;
         // Make the commands undo-able
         this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        // Clear renderings of any in-progress transformations
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        wetInkRenderer.clear();
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
@@ -442,7 +445,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
             yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
-            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity);
+            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity, false);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
         });
@@ -457,3 +460,4 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         return localizationTable.transformedElements(this.selectedElemIds.length);
     }
 };
+export default Selection;

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

@@ -9,7 +9,7 @@ import  TextComponent  from '../../components/TextComponent.mjs';
 export const cssPrefix = 'selection-tool-';
 // Allows users to select/transform portions of the `EditorImage`.
 // With respect to `extend`ing, `SelectionTool` is not stable.
-export default class SelectionTool extends BaseTool {
+class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
@@ -396,3 +396,4 @@ SelectionTool.handleableKeys = [
     'i', 'I', 'o', 'O',
     'Control', 'Meta',
 ];
+export default SelectionTool;

package/dist/mjs/src/types.d.ts

@@ -9,6 +9,8 @@ import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
 import BaseWidget from './toolbar/widgets/BaseWidget';
+export type HTMLPointerEventName = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+export type HTMLPointerEventFilter = (eventName: HTMLPointerEventName, event: PointerEvent) => boolean;
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.21.0",
+	"version": "0.22.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/src/lib.d.ts",
 	"main": "./dist/cjs/src/lib.js",
@@ -82,32 +82,32 @@
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {
-		"@melloware/coloris": "^0.18.0",
+		"@melloware/coloris": "^0.19.1",
 		"bezier-js": "^6.1.3"
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.4.2",
-		"@types/jsdom": "^21.1.0",
-		"@types/node": "^18.15.3",
-		"@typescript-eslint/eslint-plugin": "^5.55.0",
-		"@typescript-eslint/parser": "^5.55.0",
+		"@types/jest": "^29.5.1",
+		"@types/jsdom": "^21.1.1",
+		"@types/node": "^18.16.2",
+		"@typescript-eslint/eslint-plugin": "^5.59.1",
+		"@typescript-eslint/parser": "^5.59.1",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.36.0",
+		"eslint": "^8.39.0",
 		"husky": "^8.0.3",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
 		"jsdom": "^21.1.1",
-		"lint-staged": "^13.2.0",
+		"lint-staged": "^13.2.2",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.2",
 		"terser-webpack-plugin": "^5.3.7",
-		"ts-jest": "^29.0.5",
+		"ts-jest": "^29.1.0",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.28",
-		"typescript": "^4.9.5",
-		"webpack": "^5.76.1"
+		"typedoc": "^0.24.6",
+		"typescript": "^5.0.4",
+		"webpack": "^5.81.0"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

package/src/toolbar/toolbar.css

@@ -74,6 +74,7 @@
 	margin-right: 3px;
 
 	min-width: 40px;
+	max-width: 105px;
 	width: min-content;
 	font-size: 1em;
 }
@@ -82,6 +83,12 @@
 	cursor: inherit;
 }
 
+/* Decrease the font size of labels in the main toolbar if they're long. */
+:not(.toolbar-dropdown) > .toolbar-toolContainer >
+		.toolbar-button > label.long-label {
+	font-size: 0.75em;
+}
+
 .toolbar-dropdown > .toolbar-toolContainer > button,
 .toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
 	width: 6em;

package/tsconfig-typedoc.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+
+	"include": [
+		"src/**/*.ts",
+	],
+}

package/tsconfig.json

@@ -8,7 +8,9 @@
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitAny": true,
 		"noImplicitReturns": true,
+		"noImplicitOverride": true,
 		"noUnusedLocals": true,
+
 		"strictBindCallApply": true,
 		"strictFunctionTypes": true,
 		"strictNullChecks": true,

package/typedoc.json

@@ -15,6 +15,7 @@
 	"readme": "README.md",
 	"entryPointStrategy": "expand",
 	"out": "docs/typedoc/",
+	"tsconfig": "tsconfig-typedoc.json",
 
 	"validation": {
 		"notExported": false,