js-draw 1.14.0 → 1.16.0

package/dist/mjs/tools/PanZoom.mjs

@@ -71,9 +71,11 @@ export default class PanZoom extends BaseTool {
         this.initialRotationSnapAngle = 0.22; // radians
         this.afterRotationStartSnapAngle = 0.07; // radians
         this.pinchZoomStartThreshold = 1.08; // scale factor
+        // Last timestamp at which a pointerdown event was received
         this.lastPointerDownTimestamp = 0;
         this.initialTouchAngle = 0;
         this.initialViewportRotation = 0;
+        this.initialViewportScale = 0;
         // Set to `true` only when scaling has started (if two fingers are down and have moved
         // far enough).
         this.isScaling = false;
@@ -113,11 +115,12 @@ export default class PanZoom extends BaseTool {
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
             const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
-            this.lastDist = dist;
-            this.startDist = dist;
+            this.lastTouchDist = dist;
+            this.startTouchDist = dist;
             this.lastScreenCenter = screenCenter;
             this.initialTouchAngle = angle;
             this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+            this.initialViewportScale = this.editor.viewport.getScaleFactor();
             this.isScaling = false;
             // We're initially rotated if `initialViewportRotation` isn't near a multiple of pi/2.
             // In other words, if sin(2 initialViewportRotation) is near zero.
@@ -193,6 +196,22 @@ export default class PanZoom extends BaseTool {
         }
         return fullRotation - this.editor.viewport.getRotationAngle();
     }
+    /**
+     * Given a scale update, `scaleFactor`, returns a new scale factor snapped
+     * to a power of two (if within some tolerance of that scale).
+     */
+    toSnappedScaleFactor(touchDist) {
+        // scaleFactor is applied to the current transformation of the viewport.
+        const newScale = this.initialViewportScale * touchDist / this.startTouchDist;
+        const currentScale = this.editor.viewport.getScaleFactor();
+        const logNewScale = Math.log(newScale) / Math.log(10);
+        const roundedLogNewScale = Math.round(logNewScale);
+        const logTolerance = 0.04;
+        if (Math.abs(roundedLogNewScale - logNewScale) < logTolerance) {
+            return Math.pow(10, roundedLogNewScale) / currentScale;
+        }
+        return touchDist / this.lastTouchDist;
+    }
     handleTwoFingerMove(allPointers) {
         const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
         const delta = this.getCenterDelta(screenCenter);
@@ -209,25 +228,25 @@ export default class PanZoom extends BaseTool {
             this.isRotating = true;
         }
         this.updateVelocity(screenCenter);
-        let scaleFactor = 1;
-        if (this.isScaling) {
-            scaleFactor = dist / this.lastDist;
-        }
-        else {
-            const initialScaleFactor = dist / this.startDist;
+        if (!this.isScaling) {
+            const initialScaleFactor = dist / this.startTouchDist;
             // Only start scaling if scaling done so far exceeds some threshold.
             const upperBound = this.pinchZoomStartThreshold;
             const lowerBound = 1 / this.pinchZoomStartThreshold;
             if (initialScaleFactor > upperBound || initialScaleFactor < lowerBound) {
-                scaleFactor = initialScaleFactor;
                 this.isScaling = true;
             }
         }
+        let scaleFactor = 1;
+        if (this.isScaling) {
+            scaleFactor = this.toSnappedScaleFactor(dist);
+            // Don't set lastDist until we start scaling --
+            this.lastTouchDist = dist;
+        }
         const transformUpdate = Mat33.translation(delta)
             .rightMul(Mat33.scaling2D(scaleFactor, canvasCenter))
             .rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
-        this.lastDist = dist;
         this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
         return transformUpdate;
     }

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

@@ -80,6 +80,7 @@ class Selection {
         for (const handle of this.handles) {
             handle.addTo(this.backgroundElem);
         }
+        this.updateUI();
     }
     // @internal Intended for unit tests
     getBackgroundElem() {
@@ -285,6 +286,13 @@ class Selection {
         else {
             this.innerContainer.classList.remove(perpendicularClassName);
         }
+        // Hide handles when empty
+        if (screenRegion.width === 0 && screenRegion.height === 0) {
+            this.innerContainer.classList.add('-empty');
+        }
+        else {
+            this.innerContainer.classList.remove('-empty');
+        }
         for (const handle of this.handles) {
             handle.updatePosition();
         }
@@ -533,7 +541,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         this.transformCommands = this.selectedElemIds.map(id => {
             const elem = editor.image.lookupElement(id);
             if (!elem) {
-                throw new Error(`Unable to find element with ID, ${id}.`);
+                // There may be valid reasons for an element lookup to fail:
+                // For example, if the element was deleted remotely and the remote deletion
+                // hasn't been undone.
+                console.warn(`Unable to find element with ID, ${id}.`);
+                return null;
             }
             let originalZIndex = elem.getZIndex();
             let targetZIndex = elem.getZIndex() + this.deltaZIndex;
@@ -544,7 +556,9 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
                 originalZIndex = elem.getZIndex() - this.deltaZIndex;
             }
             return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
-        });
+        }).filter(// Remove all null commands
+        // Remove all null commands
+        command => command !== null);
     }
     async apply(editor) {
         this.resolveToElems(editor, false);

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.16.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.14.0",
+  "version": "1.16.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,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.11.1",
+    "@js-draw/math": "^1.16.0",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "6870036bd8c8160dcb00ded1a4e13b3d9b75071a"
+  "gitHead": "b0b6d7165d76582e1c197d0f56a10bfe6b46e2bc"
 }

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";

package/src/toolbar/utils/HelpDisplay.scss

@@ -0,0 +1,315 @@
+
+.toolbar-help-overlay {
+	width: 100%;
+	height: 100%;
+	max-width: none;
+	max-height: none;
+	border: none;
+	margin: 0;
+	padding: 0;
+	z-index: 5;
+	touch-action: none;
+	overflow: hidden;
+
+	// TODO: Use theme colors
+	$help-overlay-foreground: white;
+	$help-overlay-background: rgba(0, 0, 0, 0.8);
+
+	color: $help-overlay-foreground;
+	--icon-color: #{$help-overlay-foreground};
+
+	// We use ::backdrop for background styling
+	background-color: transparent;
+
+	&::backdrop {
+		background-color: $help-overlay-background;
+
+		backdrop-filter: blur(1px);
+		-webkit-backdrop-filter: blur(1px);
+	}
+
+	display: flex;
+	flex-direction: column;
+
+	// Show/hide animations
+	&, &::backdrop {
+		@keyframes transition-in {
+			0% { opacity: 0; }
+			100% { opacity: 1; }
+		}
+		animation: 0.25s ease transition-in;
+	}
+
+	&.-hiding {
+		@keyframes transition-out {
+			0% { opacity: 1; }
+			100% { opacity: 0; }
+		}
+
+		&, &::backdrop {
+			animation: 0.25s ease transition-out;
+			opacity: 0;
+		}
+	}
+
+
+	// For drag transitions
+	transition: 0.3s ease transform;
+	&.-dragging {
+		transition: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
+
+	@media screen and (min-width: 800px) {
+		// Move the navigation buttons to the bottom of the screen
+		> .navigation-buttons {
+			order: 1;
+			margin-top: auto;
+		}
+	}
+
+	// -- sub-components --
+
+	.with-text-shadow {
+		text-shadow: 0 0 3px rgba(20, 20, 20, 0.9);
+		filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
+	}
+
+	button:not(:disabled) {
+		cursor: pointer;
+	}
+
+	button {
+		@extend .with-text-shadow;
+
+		background: transparent;
+		border: none;
+		color: var(--help-overlay-foreground);
+
+		border-radius: 15px;
+	}
+
+	.close-button {
+		align-self: flex-start;
+		width: 48px;
+		height: 48px;
+		z-index: 1;
+
+		> svg {
+			width: 100%;
+		}
+	}
+
+	.navigation-content {
+		flex-grow: 1;
+		display: flex;
+	}
+
+	.help-page-container {
+		display: flex;
+		align-items: center;
+		flex-grow: 1;
+		touch-action: none;
+
+		> .label {
+			@extend .with-text-shadow;
+
+			flex-grow: 1;
+			text-align: center;
+			font-size: 18.5pt;
+			margin-left: 15px;
+			margin-right: 15px;
+			margin-top: 0px;
+
+			z-index: 1;
+
+			&.-large-space-below {
+				margin-top: 0;
+				margin-bottom: auto;
+			}
+
+			&.-small-space-above {
+				margin-top: 40px;
+				margin-bottom: auto;
+			}
+
+			&.-large-space-above {
+				margin-top: auto;
+				margin-bottom: 10px;
+			}
+
+			transition: 0.5s ease margin-top;
+
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+		}
+
+		> .cloned-element-container {
+			position: absolute;
+			z-index: 0;
+
+			// Prevent selecton on long-press
+			user-select: none;
+			-webkit-user-select: none;
+
+			border-radius: 10px;
+
+			* {
+				pointer-events: none !important;
+			}
+
+			> * {
+				margin: 0;
+				opacity: 0.01 !important;
+				transition: 0.3s ease opacity !important;
+			}
+
+			&:not(.-clickable) * {
+				cursor: unset !important;
+			}
+
+			&.-clickable, &.-background {
+				z-index: 1;
+				touch-action: none;
+			}
+
+			&.-clickable {
+				cursor: pointer;
+
+				z-index: 2;
+
+				&.has-long-press-or-hover {
+					opacity: 0.5 !important;
+				}
+			}
+
+			&.-clickable.has-long-press-or-hover, &.-active {
+				background-color: var(--background-color-1);
+			}
+
+			opacity: 0.01;
+			background-color: rgba(100, 100, 100, 0.01);
+			box-shadow: none;
+
+			&.-active {
+				opacity: 1;
+				background-color: var(--background-color-1);
+				box-shadow: 0 0 3px rgba(100, 100, 100, 0.5);
+
+				> * {
+					opacity: 1 !important;
+				}
+			}
+
+			transition: 0.5s ease opacity, 0.5s ease background-color;
+		}
+	}
+
+	.navigation-buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		// Enforce left-to-right (enforces consistency with drag)
+		direction: ltr;
+
+		> button:disabled {
+			opacity: 0.5;
+		}
+
+		> .next, > .previous {
+			font-size: 1em;
+			padding: 10px;
+			transition: 0.2s ease font-size;
+			z-index: 3;
+
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+		}
+
+		&:not(.-has-previous) > .next:not(:disabled) {
+			@keyframes highlight-button {
+				0% { transform: scale(1); }
+				50% { transform: scale(1.2); }
+				55% { transform: scale(1.2) rotate(2deg); }
+				65% { transform: scale(1.2) rotate(-2deg); }
+				100% { transform: scale(1); }
+			}
+			animation: 0.5s ease highlight-button 0.5s;
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
+		}
+
+		> .next::after {
+			content: "❯";
+			margin-left: 3px;
+		}
+
+		> .previous::before {
+			content: "❮";
+			margin-right: 3px;
+		}
+
+		&.-has-next > .next {
+			font-size: 1.4em;
+		}
+
+		&.-has-previous > .previous {
+			font-size: 1.4em;
+		}
+
+		&.-highlight-next > .next, &.-highlight-previous > .previous {
+			font-weight: bold;
+			background-color: rgba(200, 200, 200, 0.1);
+			font-size: 1.4em;
+		}
+	}
+
+	.navigation-help {
+		margin-top: 1em;
+		font-size: 0.7em;	
+	}
+}
+
+
+.toolbar-element .toolbar-help-overlay-button {
+	height: 0;
+	position: relative;
+
+	// Use flex so that items reverse in RTL
+	display: flex;
+	justify-content: end;
+
+	> .button {
+		margin: 0;
+		padding: 5px;
+		padding-top: 0;
+		padding-bottom: 0;
+
+		box-shadow: none;
+
+		text-align: center;
+		opacity: 0.5;
+
+		> .icon {
+			width: 1.18em;
+			height: 1.18em;
+
+			transition: 0.2s ease filter;
+		}
+
+		&:focus-visible, &:hover {
+			> .icon {
+				filter: drop-shadow(0px 0px 1px var(--shadow-color));
+			}
+		}
+	}
+}

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

@@ -53,6 +53,13 @@ $pipette-button-size: 30px;
 	display: inline-flex;
 }
 
+.color-input-container {
+	> .color-input-wrapper {
+		display: flex;
+		justify-content: stretch;
+	}
+}
+
 .color-input-container .pipetteButton > svg {
 	width: 100%;
 }

package/src/tools/SelectionTool/SelectionTool.scss

@@ -117,6 +117,10 @@
 			// handles.
 			pointer-events: all;
 		}
+
+		&.-empty {
+			opacity: 0;
+		}
 	}
 }