js-draw 1.12.0 → 1.13.1

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

@@ -0,0 +1,10 @@
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+declare const addLongPressOrHoverCssClasses: (element: HTMLElement) => {
+    removeEventListeners: () => void;
+};
+export default addLongPressOrHoverCssClasses;

package/dist/mjs/util/addLongPressOrHoverCssClasses.mjs

@@ -0,0 +1,29 @@
+import  listenForLongPressOrHover  from './listenForLongPressOrHover.mjs';
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+const addLongPressOrHoverCssClasses = (element) => {
+    const hasLongPressClass = 'has-long-press-or-hover';
+    const noLongPressClass = 'no-long-press-or-hover';
+    element.classList.add('no-long-press-or-hover');
+    const { removeListeners } = listenForLongPressOrHover(element, {
+        onStart() {
+            element.classList.remove(noLongPressClass);
+            element.classList.add(hasLongPressClass);
+        },
+        onEnd() {
+            element.classList.add(noLongPressClass);
+            element.classList.remove(hasLongPressClass);
+        },
+    });
+    return {
+        removeEventListeners: () => {
+            element.classList.remove(noLongPressClass);
+            removeListeners();
+        },
+    };
+};
+export default addLongPressOrHoverCssClasses;

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

@@ -0,0 +1,13 @@
+type Options = {
+    onStart: () => void;
+    onEnd: () => void;
+    longPressTimeout?: number;
+};
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+declare const listenForLongPressOrHover: (target: HTMLElement, options: Options) => {
+    removeListeners: () => void;
+};
+export default listenForLongPressOrHover;

package/dist/mjs/util/listenForLongPressOrHover.mjs

@@ -0,0 +1,78 @@
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+const listenForLongPressOrHover = (target, options) => {
+    const pointersInside = new Map();
+    let timeoutId = null;
+    let isLongPressInProgress = false;
+    const updateTimeout = () => {
+        if (pointersInside.size === 0) {
+            if (isLongPressInProgress) {
+                isLongPressInProgress = false;
+                options.onEnd();
+            }
+            else if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        }
+        else {
+            const nowTime = Date.now();
+            let timeSinceFirstPointer = 0; // ms
+            for (const record of pointersInside.values()) {
+                const timeSince = nowTime - record.timeEnter;
+                timeSinceFirstPointer = Math.max(timeSince, timeSinceFirstPointer);
+            }
+            const longPressTimeout = options.longPressTimeout ?? 700; // ms
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            const timeLeft = longPressTimeout - timeSinceFirstPointer;
+            if (timeLeft <= 0) {
+                options.onStart();
+                isLongPressInProgress = true;
+            }
+            else {
+                timeoutId = setTimeout(() => {
+                    timeoutId = null;
+                    updateTimeout();
+                }, timeLeft);
+            }
+        }
+    };
+    // Detects long press
+    const pointerEventListener = (event) => {
+        const eventRecord = {
+            timeEnter: Date.now(),
+        };
+        if (event.type === 'pointerenter') {
+            pointersInside.set(event.pointerId, eventRecord);
+        }
+        else if (event.type === 'pointerleave' || event.type === 'pointercancel') {
+            // In some cases (for example, a click with a stylus on Android/Chrome), moving the pen
+            // over the target, clicking, then moving the pen out of the target produces input
+            // similar to this:
+            // - pointerenter (pointerId: 4)
+            // - pointerleave (pointerId: 4)
+            // - pointerenter (pointerId: 6)
+            // - pointerenter (pointerId: 1)
+            // - pointerleave (pointerId: 6)
+            // Observe that no pointerleave event was fired for the pointer with ID 1.
+            pointersInside.clear();
+        }
+        updateTimeout();
+    };
+    target.addEventListener('pointerenter', pointerEventListener);
+    target.addEventListener('pointerleave', pointerEventListener);
+    target.addEventListener('pointercancel', pointerEventListener);
+    return {
+        removeListeners: () => {
+            target.removeEventListener('pointerenter', pointerEventListener);
+            target.removeEventListener('pointerleave', pointerEventListener);
+            target.removeEventListener('pointercancel', pointerEventListener);
+        },
+    };
+};
+export default listenForLongPressOrHover;

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

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

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.12.0',
+    number: '1.13.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.12.0",
+  "version": "1.13.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": "c179c5b3ebca482dfb156527ec6631c8f5159033"
+  "gitHead": "814f5d57897fd16fd45860522d9ecbc6b8b04a38"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -1,3 +1,5 @@
+@use "./utils/labelVisibleOnHover.scss";
+
 @keyframes toolbar--edgemenu-transition-in {
 	from { transform: translate(0, 100%); }
 	to { transform: translate(0, 0); }
@@ -21,94 +23,6 @@
 	to { overflow-y: hidden; }
 }
 
-// Shows a lable on hover
-// Uses the --button-label-hover-offset-y and --button-label-hover-offset-x
-// variables to determine the label's position.
-//
-// If the label is in a scrolling container, that container should have position: relative;
-// as this allows absolutely positioned children to scroll with the container (rather than
-// remaining stationary).
-@mixin label-visible-on-hover($label-selector) {
-	$label-visible-opacity: 0.8;
-
-	// Make the label hide only when hovering.
-
-	@keyframes rehide-label {
-		0% { opacity: $label-visible-opacity; }
-		80% { opacity: $label-visible-opacity; }
-		100% { opacity: 0.1; }
-	}
-
-	@keyframes show-label {
-		0% { opacity: 0; }
-		// Keep the label hidden before showing
-		80% { opacity: 0; }
-		100% { opacity: $label-visible-opacity; }
-	}
-
-	@keyframes keep-label-hidden {
-		0% { opacity: 0; }
-		100% { opacity: 0; }
-	}
-
-
-	$hover-active-animation: ease show-label;
-
-	// Avoids sticky hover on touch devices. See
-	// https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
-	// When the primary device supports hover:
-	@media (hover: hover) {
-		// Only show an animation when opening the label due to a hover --
-		// show the label immediately otherwise.
-		&:hover:not(:focus-visible) > #{$label-selector} {
-			opacity: $label-visible-opacity;
-			animation: 1s $hover-active-animation;
-		}
-	}
-
-	// When the user is pressing/long-pressing the button
-	&:active > #{$label-selector} {
-		opacity: $label-visible-opacity;
-		animation: 1s $hover-active-animation;
-	}
-
-	$keyboard-hide-animation: 1.5s ease rehide-label;
-
-	&:focus-visible > #{$label-selector} {
-		animation: $keyboard-hide-animation;
-		opacity: 0;
-	}
-
-	// Make the :has selector separate its own statement -- some browsers don't
-	// support :has, which would make the entire statement block have no effect.
-	&:has(:focus-visible) > #{$label-selector} {
-		animation: $keyboard-hide-animation;
-		opacity: 0;
-	}
-
-	& > #{$label-selector} {
-		opacity: 0;
-		position: absolute;
-		margin-top: var(--button-label-hover-offset-y);
-		margin-left: var(--button-label-hover-offset-x);
-
-		// The label is often mostly invisible/just below a toolbar item.
-		// If there are multiple toolbar rows, ensure that a label doesn't prevent
-		// clicking on items in the second row:
-		pointer-events: none;
-
-		background-color: var(--background-color-1);
-		color: var(--foreground-color-1);
-		border-radius: 25px;
-		padding: 10px;
-
-		transition: 0.2s ease opacity, 0.2s ease margin-top;
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
-	}
-}
 
 // The toolbar portion (the bar along the top of the screen)
 .toolbar-edge-toolbar {
@@ -134,7 +48,7 @@
 		}
 	}
 
-	// Hide labels when above a certain width
+	// Hide inline labels when above a certain width
 	@media screen and (max-width: 700px) {
 		&.one-row > * > .toolbar-toolContainer.label-inline {
 			font-size: 0.9em;
@@ -152,7 +66,8 @@
 					animation: 0.2s linear hide-initially;
 				}
 
-				@include label-visible-on-hover(label);
+				// DO show the labels on hover.
+				@include labelVisibleOnHover.label-visible-on-hover(label);
 
 				// Clear additional margins added because of the left/right side labels.
 				// (Repeat selector to increase specificity).
@@ -296,14 +211,21 @@
 	--button-label-hover-offset-y: var(--label-hover-offset-size);
 	--button-label-hover-offset-x: 0;
 
-	.toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button {
-		width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
+	.toolbar-toolContainer:not(.no-icon):not(.label-inline) {
+
+		.toolbar-button {
+			width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
+
+			// Note: EdgeToolbar.ts currently assumes that the height of a button is
+			//       equivalent to --toolbar-button-size.
+			height: var(--toolbar-button-size);
 
-		// Note: EdgeToolbar.ts currently assumes that the height of a button is
-		//       equivalent to --toolbar-button-size.
-		height: var(--toolbar-button-size);
+			@include labelVisibleOnHover.label-visible-on-hover(label);
+		}
 
-		@include label-visible-on-hover(label);
+		&.dropdownVisible > .toolbar-button {
+			@include labelVisibleOnHover.show-label-now(label);
+		}
 	}
 
 	& > div > .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
@@ -388,7 +310,7 @@
 	// Special styles for the enum selector 
 	.toolbar-grid-selector .choice-button {
 		--button-label-hover-offset-y: var(--button-size);
-		@include label-visible-on-hover('label > .button-label-text');
+		@include labelVisibleOnHover.label-visible-on-hover('label > .button-label-text');
 	}
 }
 

package/src/toolbar/utils/labelVisibleOnHover.scss

@@ -0,0 +1,114 @@
+
+$label-visible-opacity: 0.8;
+$show-delay: 0.3s;
+
+@keyframes rehide-label {
+	0% { opacity: $label-visible-opacity; }
+	80% { opacity: $label-visible-opacity; }
+	100% { opacity: 0.1; }
+}
+
+@keyframes show-label-delayed {
+	0% { opacity: 0; }
+	// Keep the label hidden before showing
+	80% { opacity: 0; }
+	100% { opacity: $label-visible-opacity; }
+}
+
+@keyframes show-label-now {
+	0% { opacity: 0; }
+	5% { opacity: 0; }
+	100% { opacity: $label-visible-opacity; }
+}
+
+@keyframes keep-label-hidden {
+	0% { opacity: 0; }
+	100% { opacity: 0; }
+}
+
+// Shows a lable on hover
+// Uses the --button-label-hover-offset-y and --button-label-hover-offset-x
+// variables to determine the label's position.
+//
+// If the label is in a scrolling container, that container should have position: relative;
+// as this allows absolutely positioned children to scroll with the container (rather than
+// remaining stationary).
+@mixin label-visible-on-hover($label-selector) {
+	// Using CSS classes set by addLongPressOrHoverCssClasses avoids sticky
+	// hover on touch devices.
+	&:not(.no-long-press-or-hover):not(.has-long-press-or-hover) {
+		// Only show an animation when opening the label due to a hover --
+		// show the label immediately otherwise.
+		&:hover:not(:focus-visible) > #{$label-selector},
+		// When the user is pressing/long-pressing the button
+		&:active > #{$label-selector}
+		{
+			opacity: $label-visible-opacity;
+			animation: 1s ease show-label-delayed;
+		}
+	}
+
+	&.has-long-press-or-hover > #{$label-selector} {
+		opacity: $label-visible-opacity;
+	}
+
+	$keyboard-hide-animation: 1.5s ease rehide-label;
+
+	// .focus-visible: Allow setting focus-visible from JS (in cases where this
+	// element isn't the focus target and the browser doesn't support :has).
+	&:focus-visible, &.focus-visible {
+		& > #{$label-selector} {
+			animation: $keyboard-hide-animation;
+			opacity: 0;
+		}
+	}
+
+	// Make the :has selector separate its own statement -- some browsers don't
+	// support :has, which would make the entire statement block have no effect.
+	&:has(:focus-visible) > #{$label-selector} {
+		animation: $keyboard-hide-animation;
+		opacity: 0;
+	}
+
+	& > #{$label-selector} {
+		opacity: 0;
+		position: absolute;
+		margin-top: var(--button-label-hover-offset-y);
+		margin-left: var(--button-label-hover-offset-x);
+		z-index: 1;
+
+		// The label is often mostly invisible/just below a toolbar item.
+		// If there are multiple toolbar rows, ensure that a label doesn't prevent
+		// clicking on items in the second row:
+		pointer-events: none;
+
+		background-color: var(--background-color-1);
+		color: var(--foreground-color-1);
+		border-radius: 25px;
+		padding: 10px;
+
+		transition: $show-delay ease opacity, 0.2s ease margin-top;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+}
+
+// Allows manually showing the label
+@mixin show-label-now($label-selector) {
+	& > #{$label-selector} {
+		// Set opacity manually (rather than in an animation) to take advantage of
+		// `transition`. Without this, when animations are cancelled and replaced,
+		// the label may flicker.
+		opacity: $label-visible-opacity;
+
+		$hide-animation-length: 1.5s;
+		$keep-hidden-delay: calc($hide-animation-length + $show-delay);
+
+		$hide-animation: 1.5s ease rehide-label $show-delay;
+		$keep-hidden-animation: 1s ease keep-label-hidden $keep-hidden-delay infinite;
+
+		animation: $hide-animation, $keep-hidden-animation;
+	}
+}

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

@@ -16,6 +16,7 @@
 		display: flex;
 		flex-direction: column-reverse;
 		box-sizing: border-box;
+		cursor: pointer;
 	
 		flex-shrink: 1;
 		margin: 2px;