js-draw 0.22.1 → 0.23.0

package/dist/mjs/src/rendering/renderers/AbstractRenderer.d.ts

@@ -19,6 +19,11 @@ export interface RenderableImage {
     base64Url: string;
     label?: string;
 }
+/**
+ * Abstract base class for renderers.
+ *
+ * @see {@link EditorImage.render}
+ */
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
@@ -40,9 +45,21 @@ export default abstract class AbstractRenderer {
     protected objectLevel: number;
     private currentPaths;
     private flushPath;
+    /**
+     * Draws a styled path. If within an object started by {@link startObject},
+     * the resultant path may not be visible until {@link endObject} is called.
+     */
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
+    /** Draws a filled rectangle. */
     fillRect(rect: Rect2, fill: Color4): void;
+    /**
+     * This should be called whenever a new object is being drawn.
+     *
+     * @param _boundingBox The bounding box of the object to be drawn.
+     * @param _clip Whether content outside `_boundingBox` should be drawn. Renderers
+     *              that override this method are not required to support `_clip`.
+     */
     startObject(_boundingBox: Rect2, _clip?: boolean): void;
     /**
      * Notes the end of an object.

package/dist/mjs/src/rendering/renderers/AbstractRenderer.mjs

@@ -1,6 +1,11 @@
 import  Path, { PathCommandType }  from '../../math/Path.mjs';
 import  { Vec2 }  from '../../math/Vec2.mjs';
 import  { stylesEqual }  from '../RenderingStyle.mjs';
+/**
+ * Abstract base class for renderers.
+ *
+ * @see {@link EditorImage.render}
+ */
 export default class AbstractRenderer {
     constructor(viewport) {
         this.viewport = viewport;
@@ -49,7 +54,12 @@ export default class AbstractRenderer {
         if (lastStyle) {
             this.endPath(lastStyle);
         }
+        this.currentPaths = [];
     }
+    /**
+     * Draws a styled path. If within an object started by {@link startObject},
+     * the resultant path may not be visible until {@link endObject} is called.
+     */
     drawPath(path) {
         // If we're being called outside of an object,
         // we can't delay rendering
@@ -70,14 +80,22 @@ export default class AbstractRenderer {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));
     }
-    // Fills a rectangle.
+    /** Draws a filled rectangle. */
     fillRect(rect, fill) {
         const path = Path.fromRect(rect);
         this.drawPath(path.toRenderable({ fill }));
     }
-    // Note the start of an object with the given bounding box.
-    // Renderers are not required to support [clip]
+    /**
+     * This should be called whenever a new object is being drawn.
+     *
+     * @param _boundingBox The bounding box of the object to be drawn.
+     * @param _clip Whether content outside `_boundingBox` should be drawn. Renderers
+     *              that override this method are not required to support `_clip`.
+     */
     startObject(_boundingBox, _clip) {
+        if (this.objectLevel > 0) {
+            this.flushPath();
+        }
         this.currentPaths = [];
         this.objectLevel++;
     }

package/dist/mjs/src/rendering/renderers/CanvasRenderer.mjs

@@ -175,14 +175,19 @@ export default class CanvasRenderer extends AbstractRenderer {
         super.startObject(boundingBox);
         this.currentObjectBBox = boundingBox;
         if (!this.ignoringObject && clip) {
-            this.clipLevels.push(this.objectLevel);
-            this.ctx.save();
-            this.ctx.beginPath();
-            for (const corner of boundingBox.corners) {
-                const screenCorner = this.canvasToScreen(corner);
-                this.ctx.lineTo(screenCorner.x, screenCorner.y);
+            // Don't clip if it would only remove content already trimmed by
+            // the edge of the screen.
+            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
+            if (!clippedIsOutsideScreen) {
+                this.clipLevels.push(this.objectLevel);
+                this.ctx.save();
+                this.ctx.beginPath();
+                for (const corner of boundingBox.corners) {
+                    const screenCorner = this.canvasToScreen(corner);
+                    this.ctx.lineTo(screenCorner.x, screenCorner.y);
+                }
+                this.ctx.clip();
             }
-            this.ctx.clip();
         }
     }
     endObject() {

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

@@ -46,6 +46,7 @@ export default abstract class BaseWidget {
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;
     setSelected(selected: boolean): void;
+    private hideDropdownTimeout;
     protected setDropdownVisible(visible: boolean): void;
     canBeInOverflowMenu(): boolean;
     getButtonWidth(): number;

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

@@ -23,6 +23,7 @@ export default class BaseWidget {
         this.subWidgets = {};
         this.toplevel = true;
         this.toolbarWidgetToggleListener = null;
+        this.hideDropdownTimeout = null;
         this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
         this.icon = null;
         this.container = document.createElement('div');
@@ -230,6 +231,13 @@ export default class BaseWidget {
         if (currentlyVisible === visible) {
             return;
         }
+        // If waiting to hide the dropdown, cancel it.
+        if (this.hideDropdownTimeout) {
+            clearTimeout(this.hideDropdownTimeout);
+            this.hideDropdownTimeout = null;
+            this.dropdownContainer.classList.remove('hiding');
+        }
+        const animationDuration = 150; // ms
         if (visible) {
             this.dropdownContainer.classList.remove('hidden');
             this.container.classList.add('dropdownVisible');
@@ -240,10 +248,20 @@ export default class BaseWidget {
             });
         }
         else {
-            this.dropdownContainer.classList.add('hidden');
             this.container.classList.remove('dropdownVisible');
             this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
+            this.dropdownContainer.classList.add('hiding');
+            // Hide the dropdown *slightly* before the animation finishes. This
+            // prevents flickering in some browsers.
+            const hideDelay = animationDuration * 0.95;
+            this.hideDropdownTimeout = setTimeout(() => {
+                this.dropdownContainer.classList.add('hidden');
+                this.dropdownContainer.classList.remove('hiding');
+            }, hideDelay);
         }
+        // Animate
+        const animationName = `var(--dropdown-${visible ? 'show' : 'hide'}-animation)`;
+        this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
         this.repositionDropdown();
     }
     canBeInOverflowMenu() {
@@ -262,11 +280,11 @@ export default class BaseWidget {
         const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
         const screenWidth = document.body.clientWidth;
         if (dropdownBBox.left > screenWidth / 2) {
-            this.dropdownContainer.style.marginLeft = this.button.clientWidth + 'px';
-            this.dropdownContainer.style.transform = 'translate(-100%, 0)';
+            // Use .translate so as not to conflict with CSS animating the
+            // transform property.
+            this.dropdownContainer.style.translate = `calc(${this.button.clientWidth + 'px'} - 100%) 0`;
         }
         else {
-            this.dropdownContainer.style.marginLeft = '';
             this.dropdownContainer.style.transform = '';
         }
     }

package/dist/mjs/src/tools/Pen.d.ts

@@ -14,9 +14,12 @@ export default class Pen extends BaseTool {
     private builderFactory;
     protected builder: ComponentBuilder | null;
     private lastPoint;
+    private startPoint;
     private ctrlKeyPressed;
+    private shiftKeyPressed;
     constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
+    private xyAxesSnap;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
     protected previewStroke(): void;
     protected addPointToStroke(point: StrokeDataPoint): void;
@@ -34,6 +37,7 @@ export default class Pen extends BaseTool {
     getStrokeFactory(): ComponentBuilderFactory;
     setEnabled(enabled: boolean): void;
     private isSnappingToGrid;
+    private isAngleLocked;
     onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
     onKeyUp({ key }: KeyUpEvent): boolean;
 }

package/dist/mjs/src/tools/Pen.mjs

@@ -11,14 +11,26 @@ export default class Pen extends BaseTool {
         this.builderFactory = builderFactory;
         this.builder = null;
         this.lastPoint = null;
+        this.startPoint = null;
         this.ctrlKeyPressed = false;
+        this.shiftKeyPressed = false;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
     }
+    // Snap the given pointer to the nearer of the x/y axes.
+    xyAxesSnap(pointer) {
+        if (!this.startPoint) {
+            return pointer;
+        }
+        return pointer.lockedToXYAxes(this.startPoint.pos, this.editor.viewport);
+    }
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
         var _a;
+        if (this.isAngleLocked() && this.lastPoint) {
+            pointer = this.xyAxesSnap(pointer);
+        }
         if (this.isSnappingToGrid()) {
             pointer = pointer.snappedToGrid(this.editor.viewport);
         }
@@ -64,7 +76,8 @@ export default class Pen extends BaseTool {
             }
         }
         if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
-            this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
+            this.startPoint = this.toStrokePoint(current);
+            this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
             return true;
         }
         return false;
@@ -104,6 +117,7 @@ export default class Pen extends BaseTool {
             }
         }
         this.builder = null;
+        this.lastPoint = null;
         this.editor.clearWetInk();
     }
     noteUpdated() {
@@ -138,6 +152,7 @@ export default class Pen extends BaseTool {
         this.ctrlKeyPressed = false;
     }
     isSnappingToGrid() { return this.ctrlKeyPressed; }
+    isAngleLocked() { return this.shiftKeyPressed; }
     onKeyPress({ key, ctrlKey }) {
         key = key.toLowerCase();
         let newThickness;
@@ -156,6 +171,10 @@ export default class Pen extends BaseTool {
             this.ctrlKeyPressed = true;
             return true;
         }
+        if (key === 'shift') {
+            this.shiftKeyPressed = true;
+            return true;
+        }
         // Ctrl+Z: End the stroke so that it can be undone/redone.
         if (key === 'z' && ctrlKey && this.builder) {
             this.finalizeStroke();
@@ -168,6 +187,10 @@ export default class Pen extends BaseTool {
             this.ctrlKeyPressed = false;
             return true;
         }
+        if (key === 'shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
         return false;
     }
 }

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

@@ -10,6 +10,7 @@ export default class SelectionTool extends BaseTool {
     private prevSelectionBox;
     private selectionBox;
     private lastEvtTarget;
+    private startPoint;
     private expandingSelectionBox;
     private shiftKeyPressed;
     private ctrlKeyPressed;

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

@@ -14,6 +14,7 @@ class SelectionTool extends BaseTool {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastEvtTarget = null;
+        this.startPoint = null; // canvas position
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
         this.ctrlKeyPressed = false;
@@ -24,6 +25,9 @@ class SelectionTool extends BaseTool {
         this.handleOverlay.classList.add('handleOverlay');
         editor.notifier.on(EditorEventType.ViewportChanged, _data => {
             var _a;
+            // The selection box could be using the wet ink display if its transformation
+            // hasn't been finalized yet. Clear before updating the UI.
+            this.editor.clearWetInk();
             (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);
@@ -61,6 +65,7 @@ class SelectionTool extends BaseTool {
             current = current.snappedToGrid(this.editor.viewport);
         }
         if (allPointers.length === 1 && current.isPrimary) {
+            this.startPoint = current.canvasPos;
             let transforming = false;
             if (this.lastEvtTarget && this.selectionBox) {
                 if (snapToGrid) {
@@ -86,6 +91,9 @@ class SelectionTool extends BaseTool {
         if (!this.selectionBox)
             return;
         let currentPointer = event.current;
+        if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
+            currentPointer = currentPointer.lockedToXYAxes(this.startPoint, this.editor.viewport);
+        }
         if (this.ctrlKeyPressed) {
             currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
         }

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

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

package/dist/mjs/src/util/waitForAll.mjs

@@ -0,0 +1,15 @@
+/**
+ * Resolves when all given promises have resolved. If no promises are given,
+ * does not return a Promise.
+ */
+const waitForAll = (results) => {
+    // If any are Promises...
+    if (results.some(command => command && command['then'])) {
+        // Wait for all commands to finish.
+        return Promise.all(results)
+            // Ensure we return a Promise<void> and not a Promise<void[]>
+            .then(() => { });
+    }
+    return;
+};
+export default waitForAll;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.22.1",
+	"version": "0.23.0",
 	"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",
@@ -89,25 +89,25 @@
 		"@types/bezier-js": "^4.1.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",
+		"@types/node": "^20.1.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.2",
+		"@typescript-eslint/parser": "^5.59.2",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.39.0",
+		"eslint": "^8.40.0",
 		"husky": "^8.0.3",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
-		"jsdom": "^21.1.1",
+		"jsdom": "^22.0.0",
 		"lint-staged": "^13.2.2",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.2",
-		"terser-webpack-plugin": "^5.3.7",
+		"terser-webpack-plugin": "^5.3.8",
 		"ts-jest": "^29.1.0",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.24.6",
+		"typedoc": "^0.24.7",
 		"typescript": "^5.0.4",
-		"webpack": "^5.81.0"
+		"webpack": "^5.82.0"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

package/src/toolbar/toolbar.css

@@ -81,6 +81,7 @@
 
 .toolbar-button > label {
 	cursor: inherit;
+	user-select: none;
 }
 
 /* Decrease the font size of labels in the main toolbar if they're long. */
@@ -105,6 +106,7 @@
 
 .toolbar-root .toolbar-icon {
 	flex-shrink: 1;
+	user-select: none;
 
 	width: 100%;
 	min-width: 30px;
@@ -131,7 +133,8 @@
 }
 
 .toolbar-dropdown.hidden,
-.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable)
+		> .toolbar-dropdown:not(.hiding) {
 	display: none;
 }
 
@@ -153,6 +156,37 @@
 	box-shadow: 0px 3px 3px var(--primary-shadow-color);
 }
 
+/* Animate showing/hiding the dropdown. Animations triggered in JavaScript. */
+@keyframes dropdown-transition-in {
+	0% {
+		opacity: 0;
+		transform: scale(1, 0);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes dropdown-transition-out {
+	0% {
+		opacity: 1;
+		transform: scale(1, 1);	
+	}
+	100% {
+		opacity: 0;
+		transform: scale(1, 0);
+	}
+}
+
+.toolbar-dropdown {
+	/* Ensure the animation begins from the correct location. */
+	transform-origin: top left;
+
+	--dropdown-show-animation: dropdown-transition-in;
+	--dropdown-hide-animation: dropdown-transition-out;
+}
+
 .toolbar-buttonGroup {
 	display: flex;
 	flex-direction: row;