js-draw 1.14.0 → 1.15.0

package/dist/mjs/toolbar/widgets/SelectionToolWidget.mjs

@@ -13,7 +13,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
     container.classList.add('selection-format-menu', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}indentedList`);
     const colorRow = document.createElement('div');
     const colorLabel = document.createElement('label');
-    const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = makeColorInput(editor, color => {
+    const colorInputControl = makeColorInput(editor, color => {
         const selection = selectionTool.getSelection();
         if (selection) {
             const updateStyleCommands = [];
@@ -26,6 +26,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
             editor.dispatch(unitedCommand);
         }
     });
+    const { input: colorInput, container: colorInputContainer } = colorInputControl;
     colorLabel.innerText = localizationTable.colorLabel;
     const update = () => {
         const selection = selectionTool.getSelection();
@@ -41,12 +42,12 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
                     }
                 }
             }
-            setColorInputValue(Color4.average(colors));
+            colorInputControl.setValue(Color4.average(colors));
         }
         else {
             colorInput.disabled = true;
             container.classList.add('disabled');
-            setColorInputValue(Color4.transparent);
+            colorInputControl.setValue(Color4.transparent);
         }
     };
     colorRow.replaceChildren(colorLabel, colorInputContainer);
@@ -56,6 +57,10 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
             parent.appendChild(container);
         },
         update,
+        registerHelpText: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(colorRow, localizationTable.selectionDropdown__changeColorHelpText);
+            colorInputControl.registerWithHelpTextDisplay(helpDisplay);
+        },
     };
 };
 export default class SelectionToolWidget extends BaseToolWidget {
@@ -66,16 +71,19 @@ export default class SelectionToolWidget extends BaseToolWidget {
         const resizeButton = new ActionButtonWidget(editor, 'resize-btn', () => editor.icons.makeResizeImageToSelectionIcon(), this.localizationTable.resizeImageToSelection, () => {
             this.resizeImageToSelection();
         }, localization);
+        resizeButton.setHelpText(this.localizationTable.selectionDropdown__resizeToHelpText);
         const deleteButton = new ActionButtonWidget(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
         }, localization);
+        deleteButton.setHelpText(this.localizationTable.selectionDropdown__deleteHelpText);
         const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, async () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(await selection.duplicateSelectedObjects());
             this.setDropdownVisible(false);
         }, localization);
+        duplicateButton.setHelpText(this.localizationTable.selectionDropdown__duplicateHelpText);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);
@@ -124,8 +132,11 @@ export default class SelectionToolWidget extends BaseToolWidget {
     createIcon() {
         return this.editor.icons.makeSelectionIcon();
     }
-    fillDropdown(dropdown) {
-        super.fillDropdown(dropdown);
+    getHelpText() {
+        return this.localizationTable.selectionDropdown__baseHelpText;
+    }
+    fillDropdown(dropdown, helpDisplay) {
+        super.fillDropdown(dropdown, helpDisplay);
         const controlsContainer = document.createElement('div');
         controlsContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
         dropdown.appendChild(controlsContainer);
@@ -133,6 +144,9 @@ export default class SelectionToolWidget extends BaseToolWidget {
         const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
         formatMenu.addTo(controlsContainer);
         this.updateFormatMenu = () => formatMenu.update();
+        if (helpDisplay) {
+            formatMenu.registerHelpText(helpDisplay);
+        }
         formatMenu.update();
         return true;
     }

package/dist/mjs/toolbar/widgets/components/makeColorInput.d.ts

@@ -1,10 +1,12 @@
 import { Color4 } from '@js-draw/math';
 import Editor from '../../../Editor';
+import type HelpDisplay from '../../utils/HelpDisplay';
 type OnColorChangeListener = (color: Color4) => void;
 export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => {
     input: HTMLInputElement;
     container: HTMLSpanElement;
     setValue: (color: Color4 | string) => void;
     closePicker: () => void;
+    registerWithHelpTextDisplay: (helpDisplay: HelpDisplay) => void;
 };
 export default makeColorInput;

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

@@ -3,13 +3,16 @@ import  PipetteTool  from '../../../tools/PipetteTool.mjs';
 import  { EditorEventType }  from '../../../types.mjs';
 // Returns [ color input, input container, callback to change the color value ].
 export const makeColorInput = (editor, onColorChange) => {
-    const colorInputContainer = document.createElement('span');
+    const container = document.createElement('span');
+    const inputWrapper = document.createElement('span');
     const colorInput = document.createElement('input');
     colorInput.type = 'button';
     colorInput.classList.add('coloris_input');
-    colorInputContainer.classList.add('color-input-container');
-    colorInputContainer.appendChild(colorInput);
-    const pipetteController = addPipetteTool(editor, colorInputContainer, (color) => {
+    container.classList.add('color-input-container');
+    inputWrapper.classList.add('color-input-wrapper');
+    inputWrapper.appendChild(colorInput);
+    container.appendChild(inputWrapper);
+    const pipetteController = addPipetteTool(editor, container, (color) => {
         colorInput.value = color.toHexString();
         onInputEnd();
         // Update the color preview, if it exists (may be managed by Coloris).
@@ -44,7 +47,7 @@ export const makeColorInput = (editor, onColorChange) => {
             open: true,
         });
         pipetteController.cancel();
-        colorInputContainer.classList.add('picker-open');
+        container.classList.add('picker-open');
         // 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.
@@ -60,7 +63,7 @@ export const makeColorInput = (editor, onColorChange) => {
         onInputEnd();
         // Restore focus to the input that opened the color picker
         colorInput.focus();
-        colorInputContainer.classList.remove('picker-open');
+        container.classList.remove('picker-open');
     };
     colorInput.addEventListener('close', () => {
         onClose();
@@ -76,13 +79,17 @@ export const makeColorInput = (editor, onColorChange) => {
     };
     return {
         input: colorInput,
-        container: colorInputContainer,
+        container,
         setValue: setColorInputValue,
         closePicker: () => {
             if (isOpen) {
                 onInputEnd();
             }
         },
+        registerWithHelpTextDisplay: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(inputWrapper, editor.localization.colorPickerToggleHelpText);
+            pipetteController.registerWithHelpTextDisplay(helpDisplay);
+        },
     };
 };
 const addPipetteTool = (editor, container, onColorChange) => {
@@ -136,6 +143,9 @@ const addPipetteTool = (editor, container, onColorChange) => {
         cancel: () => {
             endColorSelectMode();
         },
+        registerWithHelpTextDisplay: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(pipetteButton, editor.localization.colorPickerPipetteHelpText);
+        },
     };
 };
 export default makeColorInput;

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

@@ -7,8 +7,14 @@ interface GridSelectChoice<ChoiceIdType> {
 }
 interface GridSelector<ChoiceIdType> {
     value: MutableReactiveValue<ChoiceIdType>;
+    /**
+     * Connects this grid selector with `other` such that only one item in
+     * either this or `other` can be selected at a time.
+     */
     linkWith: (other: GridSelector<ChoiceIdType>) => void;
+    /** Re-builds the icons shown in the grid selector. */
     updateIcons: () => void;
+    getRootElement: () => HTMLElement;
     addTo: (parent: HTMLElement) => void;
     /** Used internally @internal */
     _radiogroupName: string;

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

@@ -131,6 +131,9 @@ labelText, defaultId, choices) => {
         updateIcons: () => {
             buttons.forEach(button => button.updateIcon());
         },
+        getRootElement() {
+            return outerContainer;
+        },
         addTo: (parent) => {
             parent.appendChild(outerContainer);
         },

package/dist/mjs/tools/FindTool.mjs

@@ -2,6 +2,7 @@
 //
 // @packageDocumentation
 import  TextComponent  from '../components/TextComponent.mjs';
+import  ImageComponent  from '../components/ImageComponent.mjs';
 import  BaseTool  from './BaseTool.mjs';
 import  { toggleFindVisibleShortcutId }  from './keybindings.mjs';
 const cssPrefix = 'find-tool';
@@ -20,11 +21,23 @@ export default class FindTool extends BaseTool {
         return true;
     }
     getMatches(searchFor) {
-        searchFor = searchFor.toLocaleLowerCase();
-        const allTextComponents = this.editor.image.getAllElements()
-            .filter(elem => elem instanceof TextComponent);
-        const matches = allTextComponents.filter(text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1);
-        return matches.map(match => match.getBBox());
+        const lowerSearchFor = searchFor.toLocaleLowerCase();
+        const matchingComponents = this.editor.image.getAllElements().filter(component => {
+            let text = '';
+            if (component instanceof TextComponent) {
+                text = component.getText();
+            }
+            else if (component instanceof ImageComponent) {
+                text = component.getAltText() ?? '';
+            }
+            else {
+                return false;
+            }
+            const hasLowercaseMatch = text.toLocaleLowerCase().indexOf(lowerSearchFor) !== -1;
+            const hasSameCaseMatch = text.indexOf(searchFor) !== -1;
+            return hasLowercaseMatch || hasSameCaseMatch;
+        });
+        return matchingComponents.map(match => match.getBBox());
     }
     focusCurrentMatch() {
         const matches = this.getMatches(this.searchInput.value);

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

@@ -4,7 +4,9 @@
  *
  * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
  */
-declare const addLongPressOrHoverCssClasses: (element: HTMLElement) => {
+declare const addLongPressOrHoverCssClasses: (element: HTMLElement, options?: {
+    timeout: number;
+}) => {
     removeEventListeners: () => void;
 };
 export default addLongPressOrHoverCssClasses;

package/dist/mjs/util/addLongPressOrHoverCssClasses.mjs

@@ -5,7 +5,7 @@ import  listenForLongPressOrHover  from './listenForLongPressOrHover.mjs';
  *
  * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
  */
-const addLongPressOrHoverCssClasses = (element) => {
+const addLongPressOrHoverCssClasses = (element, options) => {
     const hasLongPressClass = 'has-long-press-or-hover';
     const noLongPressClass = 'no-long-press-or-hover';
     element.classList.add('no-long-press-or-hover');
@@ -18,6 +18,7 @@ const addLongPressOrHoverCssClasses = (element) => {
             element.classList.add(noLongPressClass);
             element.classList.remove(hasLongPressClass);
         },
+        longPressTimeout: options?.timeout,
     });
     return {
         removeEventListeners: () => {

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

@@ -0,0 +1,6 @@
+/**
+ * Makes a clone of `element` and recursively applies styles from the original to the
+ * clone's children.
+ */
+declare const cloneElementWithStyles: (element: HTMLElement) => HTMLElement;
+export default cloneElementWithStyles;

package/dist/mjs/util/cloneElementWithStyles.mjs

@@ -0,0 +1,30 @@
+/**
+ * Makes a clone of `element` and recursively applies styles from the original to the
+ * clone's children.
+ */
+const cloneElementWithStyles = (element) => {
+    const restyle = (originalElement, clonedElement) => {
+        const originalComputedStyle = getComputedStyle(originalElement);
+        // jsdom doesn't support iterators in CSSStyleDeclarations. Iterate with
+        // an index.
+        for (let index = 0; index < originalComputedStyle.length; index++) {
+            const propertyName = originalComputedStyle.item(index);
+            const propertyValue = originalComputedStyle.getPropertyValue(propertyName);
+            clonedElement.style.setProperty(propertyName, propertyValue);
+        }
+        for (let i = 0; i < originalElement.children.length; i++) {
+            const originalChild = originalElement.children.item(i);
+            const clonedChild = clonedElement.children.item(i);
+            if (originalChild && clonedChild) {
+                restyle(originalChild, clonedChild);
+            }
+            else {
+                console.warn('CloneElement: Missing child');
+            }
+        }
+    };
+    const elementClone = element.cloneNode(true);
+    restyle(element, elementClone);
+    return elementClone;
+};
+export default cloneElementWithStyles;

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.14.0',
+    number: '1.15.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.14.0",
+  "version": "1.15.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",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "6870036bd8c8160dcb00ded1a4e13b3d9b75071a"
+  "gitHead": "d723c028faa43c7661df54606064f6237a8a767b"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -5,12 +5,22 @@
 	to { transform: translate(0, 0); }
 }
 
+@keyframes toolbar--edgemenu-transition-in-reduce-motion {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
 @keyframes toolbar--edgemenu-transition-out {
 	// Don't include `from { translate: 0 }` because initially,
 	// the translation might not be zero (e.g. during a drag).
 	to { transform: translate(0, 100%); }
 }
 
+@keyframes toolbar--edgemenu-transition-out-reduce-motion {
+	from { opacity: 1; }
+	to { opacity: 0; }
+}
+
 @keyframes toolbar--edgemenu-container-transition-in {
 	// Include overflow-y: hidden so that the bottom of the menu doesn't go below
 	// the editor.
@@ -269,9 +279,11 @@
 .toolbar-edgemenu-container {
 	background-color: var(--background-color-transparent);
 
-	transition: 0.15s ease-in-out height, 0.15s ease-in-out background-color, 0.2s ease-in-out opacity;
+	$motion-transition: 0.15s ease-in-out height;
+	$non-motion-transition: 0.15s ease-in-out background-color, 0.2s ease-in-out opacity;
+	transition: $motion-transition, $non-motion-transition;
 	@media (prefers-reduced-motion: reduce) {
-		transition: none;
+		transition: $non-motion-transition;
 	}
 
 	position: absolute;
@@ -312,6 +324,10 @@
 		--button-label-hover-offset-y: var(--button-size);
 		@include labelVisibleOnHover.label-visible-on-hover('label > .button-label-text');
 	}
+
+	.toolbar-help-overlay-button {
+		align-items: last baseline;
+	}
 }
 
 .toolbar-edgemenu-container .toolbar-edgemenu {
@@ -432,6 +448,11 @@
 			margin-top: 5px;
 			min-height: 35px;
 
+			// No extra space above the first
+			&:first-child {
+				margin-top: 0;
+			}
+
 			// Align inputs (assumes labels come first)
 			& > label {
 				padding-right: 35px;

package/src/toolbar/toolbar.scss

@@ -9,3 +9,5 @@
 @use "./AbstractToolbar.scss";
 @use "./EdgeToolbar.scss";
 @use "./DropdownToolbar.scss";
+
+@use "./utils/HelpDisplay.scss";