js-draw 0.0.10 → 0.1.2

package/src/toolbar/localization.ts

@@ -1,6 +1,8 @@
 
 
 export interface ToolbarLocalization {
+	anyDevicePanning: string;
+	touchPanning: string;
 	outlinedRectanglePen: string;
 	filledRectanglePen: string;
 	linePen: string;
@@ -11,7 +13,7 @@ export interface ToolbarLocalization {
 	pen: string;
 	eraser: string;
 	select: string;
-	touchDrawing: string;
+	handTool: string;
 	thicknessLabel: string;
 	resizeImageToSelection: string;
 	deleteSelection: string;
@@ -20,13 +22,14 @@ export interface ToolbarLocalization {
 
 	dropdownShown: (toolName: string)=>string;
 	dropdownHidden: (toolName: string)=>string;
+	zoomLevel: (zoomPercentage: number)=> string;
 }
 
 export const defaultToolbarLocalization: ToolbarLocalization = {
 	pen: 'Pen',
 	eraser: 'Eraser',
 	select: 'Select',
-	touchDrawing: 'Touch Drawing',
+	handTool: 'Pan',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	resizeImageToSelection: 'Resize image to selection',
@@ -35,6 +38,9 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',
 
+	touchPanning: 'Touchscreen panning',
+	anyDevicePanning: 'Any device panning',
+
 	freehandPen: 'Freehand',
 	arrowPen: 'Arrow',
 	linePen: 'Line',
@@ -43,4 +49,5 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,
 };

package/src/toolbar/toolbar.css

@@ -32,6 +32,7 @@
 
     min-width: 40px;
     max-width: 70px;
+    width: min-content;
     font-size: 11pt;
 
     cursor: pointer;
@@ -49,16 +50,12 @@
     box-shadow: 0px 2px 4px var(--primary-foreground-color);
 }
 
-.toolbar-root button {
-    height: auto;
-}
-
 .toolbar-root button:disabled {
     cursor: inherit;
     filter: opacity(0.5);
 }
 
-.toolbar-button .toolbar-icon {
+.toolbar-root .toolbar-icon {
     flex-shrink: 1;
     min-width: 30px;
 }
@@ -68,11 +65,11 @@
     color: var(--secondary-foreground-color);
 }
 
-.toolbar-toolContainer:not(.selected) .toolbar-showHideDropdownIcon {
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) .toolbar-showHideDropdownIcon {
     display: none;
 }
 
-.toolbar-toolContainer.selected .toolbar-showHideDropdownIcon {
+.toolbar-toolContainer .toolbar-showHideDropdownIcon {
     height: 10px;
     transition: transform 0.5s ease;
 }
@@ -81,7 +78,8 @@
     transform: rotate(180deg);
 }
 
-.toolbar-dropdown.hidden, .toolbar-toolContainer:not(.selected) > .toolbar-dropdown {
+.toolbar-dropdown.hidden,
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
     display: none;
 }
 
@@ -98,6 +96,7 @@
 .toolbar-buttonGroup {
     display: flex;
     flex-direction: row;
+    justify-content: center;
 }
 
 .toolbar-closeColorPickerOverlay {
@@ -120,3 +119,17 @@
     margin-left: 0;
     margin-right: 0;
 }
+
+.toolbar-root .toolbar-zoomLevelEditor {
+    display: flex;
+    flex-direction: row;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {
+    flex-grow: 1;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor button {
+    width: min-content;
+    height: min-content;
+}

package/src/toolbar/types.ts

@@ -2,3 +2,8 @@ export enum ToolbarButtonType {
 	ToggleButton,
 	ActionButton,
 }
+
+export interface ActionButtonIcon {
+	icon: Element;
+	label: string;
+}

package/src/tools/PanZoom.ts

@@ -4,7 +4,7 @@ import Mat33 from '../geometry/Mat33';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import Vec3 from '../geometry/Vec3';
 import Pointer, { PointerDevice } from '../Pointer';
-import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
@@ -17,18 +17,14 @@ interface PinchData {
 }
 
 export enum PanZoomMode {
-	// Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
-	OneFingerGestures = 0x1,
-
-	// Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
-	TwoFingerGestures = 0x1 << 1,
-
-	// / Handle gestures from any device, rather than just touch
-	AnyDevice = 0x1 << 2,
+	OneFingerTouchGestures = 0x1,
+	TwoFingerTouchGestures = 0x1 << 1,
+	RightClickDrags = 0x1 << 2,
+	SinglePointerGestures = 0x1 << 3,
 }
 
 export default class PanZoom extends BaseTool {
-	public readonly kind: ToolType.PanZoom|ToolType.TouchPanZoom = ToolType.PanZoom;
+	public readonly kind: ToolType.PanZoom = ToolType.PanZoom;
 	private transform: Viewport.ViewportTransform|null = null;
 
 	private lastAngle: number;
@@ -37,10 +33,6 @@ export default class PanZoom extends BaseTool {
 
 	public constructor(private editor: Editor, private mode: PanZoomMode, description: string) {
 		super(editor.notifier, description);
-
-		if (mode === PanZoomMode.OneFingerGestures) {
-			this.kind = ToolType.TouchPanZoom;
-		}
 	}
 
 	// Returns information about the pointers in a gesture
@@ -54,25 +46,28 @@ export default class PanZoom extends BaseTool {
 		return { canvasCenter, screenCenter, angle, dist };
 	}
 
-	private pointersHaveCorrectDeviceType(pointers: Pointer[]) {
-		return this.mode & PanZoomMode.AnyDevice || pointers.every(
-			pointer => pointer.device === PointerDevice.Touch
-		);
+	private allPointersAreOfType(pointers: Pointer[], kind: PointerDevice) {
+		return pointers.every(pointer => pointer.device === kind);
 	}
 
-	public onPointerDown({ allPointers }: PointerEvt): boolean {
+	public onPointerDown({ allPointers: pointers }: PointerEvt): boolean {
 		let handlingGesture = false;
 
-		if (!this.pointersHaveCorrectDeviceType(allPointers)) {
-			handlingGesture = false;
-		} else if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
-			const { screenCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+		const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
+		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.lastAngle = angle;
 			this.lastDist = dist;
 			this.lastScreenCenter = screenCenter;
 			handlingGesture = true;
-		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
-			this.lastScreenCenter = allPointers[0].screenPos;
+		} else if (pointers.length === 1 && (
+			(this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
+			|| (isRightClick && this.mode & PanZoomMode.RightClickDrags)
+			|| (this.mode & PanZoomMode.SinglePointerGestures)
+		)) {
+			this.lastScreenCenter = pointers[0].screenPos;
 			handlingGesture = true;
 		}
 
@@ -122,9 +117,9 @@ export default class PanZoom extends BaseTool {
 		this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
 
 		const lastTransform = this.transform;
-		if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+		if (allPointers.length === 2) {
 			this.handleTwoFingerMove(allPointers);
-		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+		} else if (allPointers.length === 1) {
 			this.handleOneFingerMove(allPointers[0]);
 		}
 		lastTransform.unapply(this.editor);
@@ -253,4 +248,19 @@ export default class PanZoom extends BaseTool {
 
 		return true;
 	}
+
+	public setMode(mode: PanZoomMode) {
+		if (mode !== this.mode) {
+			this.mode = mode;
+
+			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+				kind: EditorEventType.ToolUpdated,
+				tool: this,
+			});
+		}
+	}
+
+	public getMode(): PanZoomMode {
+		return this.mode;
+	}
 }

package/src/tools/Pen.ts

@@ -91,9 +91,13 @@ export default class Pen extends BaseTool {
 			const stroke = this.builder.build();
 			this.previewStroke();
 
-			const canFlatten = true;
-			const action = new EditorImage.AddElementCommand(stroke, canFlatten);
-			this.editor.dispatch(action);
+			if (stroke.getBBox().area > 0) {
+				const canFlatten = true;
+				const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+				this.editor.dispatch(action);
+			} else {
+				console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+			}
 		}
 		this.builder = null;
 		this.editor.clearWetInk();

package/src/tools/SelectionTool.test.ts

@@ -2,7 +2,7 @@
 
 import Color4 from '../Color4';
 import Stroke from '../components/Stroke';
-import { RenderingMode } from '../Display';
+import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Path from '../geometry/Path';

package/src/tools/SelectionTool.ts

@@ -7,7 +7,6 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import { EditorEventType, PointerEvt } from '../types';
-import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 
@@ -120,7 +119,7 @@ const makeDraggable = (element: HTMLElement, onDrag: DragCallback, onDragEnd: Dr
 };
 
 // Maximum number of strokes to transform without a re-render.
-const updateChunkSize = 50;
+const updateChunkSize = 100;
 
 class Selection {
 	public region: Rect2;
@@ -341,10 +340,16 @@ class Selection {
 		this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
 			if (this.region.containsRect(elem.getBBox())) {
 				return true;
-			} else if (this.region.getEdges().some(edge => elem.intersects(edge))) {
-				return true;
 			}
-			return false;
+
+			// Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+			// As such, test with more lines than just this' edges.
+			const testLines = [];
+			for (const subregion of this.region.divideIntoGrid(2, 2)) {
+				testLines.push(...subregion.getEdges());
+			}
+
+			return testLines.some(edge => elem.intersects(edge));
 		});
 
 		// Find the bounding box of all selected elements.
@@ -484,38 +489,12 @@ export default class SelectionTool extends BaseTool {
 		});
 
 		if (hasSelection) {
-			const visibleRect = this.editor.viewport.visibleRect;
-			const selectionRect = this.selectionBox.region;
-
 			this.editor.announceForAccessibility(
 				this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount())
 			);
 
-			// Try to move the selection within the center 2/3rds of the viewport.
-			const targetRect = visibleRect.transformedBoundingBox(
-				Mat33.scaling2D(2 / 3, visibleRect.center)
-			);
-
-			// Ensure that the selection fits within the target
-			if (targetRect.w < selectionRect.w || targetRect.h < selectionRect.h) {
-				const multiplier = Math.max(
-					selectionRect.w / targetRect.w, selectionRect.h / targetRect.h
-				);
-				const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
-				const viewportContentTransform = visibleRectTransform.inverse();
-
-				(new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-			}
-
-			// Ensure that the top left is visible
-			if (!targetRect.containsRect(selectionRect)) {
-				// target position - current position
-				const translation = selectionRect.center.minus(targetRect.center);
-				const visibleRectTransform = Mat33.translation(translation);
-				const viewportContentTransform = visibleRectTransform.inverse();
-
-				(new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-			}
+			const selectionRect = this.selectionBox.region;
+			this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
 		}
 	}
 

package/src/tools/ToolController.ts

@@ -11,7 +11,6 @@ import { ToolLocalization } from './localization';
 import UndoRedoShortcut from './UndoRedoShortcut';
 
 export enum ToolType {
-	TouchPanZoom,
 	Pen,
 	Selection,
 	Eraser,
@@ -25,7 +24,7 @@ export default class ToolController {
 
 	public constructor(editor: Editor, localization: ToolLocalization) {
 		const primaryToolEnabledGroup = new ToolEnabledGroup();
-		const touchPanZoom = new PanZoom(editor, PanZoomMode.OneFingerGestures, localization.touchPanTool);
+		const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
 		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
 		const primaryTools = [
 			new SelectionTool(editor, localization.selectionTool),
@@ -39,13 +38,12 @@ export default class ToolController {
 			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
 		];
 		this.tools = [
-			touchPanZoom,
+			panZoomTool,
 			...primaryTools,
-			new PanZoom(editor, PanZoomMode.TwoFingerGestures | PanZoomMode.AnyDevice, localization.twoFingerPanZoomTool),
 			new UndoRedoShortcut(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
-		touchPanZoom.setEnabled(false);
+		panZoomTool.setEnabled(true);
 		primaryPenTool.setEnabled(true);
 
 		editor.notifier.on(EditorEventType.ToolEnabled, event => {

package/src/tools/localization.ts

@@ -1,5 +1,6 @@
 
 export interface ToolLocalization {
+	RightClickDragPanTool: string;
     penTool: (penId: number)=>string;
     selectionTool: string;
     eraserTool: string;
@@ -18,6 +19,7 @@ export const defaultToolLocalization: ToolLocalization = {
 	touchPanTool: 'Touch Panning',
 	twoFingerPanZoomTool: 'Panning and Zooming',
 	undoRedoTool: 'Undo/Redo',
+	RightClickDragPanTool: 'Right-click drag',
 
 	toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
 	toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,

package/src/types.ts

@@ -134,11 +134,18 @@ export type OnProgressListener =
 	(amountProcessed: number, totalToProcess: number)=> Promise<void>|null;
 
 export type ComponentAddedListener = (component: AbstractComponent)=> void;
+
+// Called when a new estimate for the import/export rect has been generated. This can be called multiple times.
+// Only the last call to this listener must be accurate.
+// The import/export rect is also returned by [start].
+export type OnDetermineExportRectListener = (exportRect: Rect2)=> void;
+
 export interface ImageLoader {
-	// Returns the main region of the loaded image
 	start(
-		onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener
-	): Promise<Rect2>;
+		onAddComponent: ComponentAddedListener,
+		onProgressListener: OnProgressListener,
+		onDetermineExportRect?: OnDetermineExportRectListener,
+	): Promise<void>;
 }
 
 export interface StrokeDataPoint {

package/tsconfig.json

@@ -24,5 +24,6 @@
 
 		// Files that don't need transpilation
 		"**/*.test.ts",
+		"__mocks__/*"
 	],
 }

package/dist/__mocks__/coloris.d.ts

@@ -1,2 +0,0 @@
-export declare const coloris: (_options: any) => void;
-export declare const init: () => void;

package/dist/__mocks__/coloris.js

@@ -1,5 +0,0 @@
-// @melloware/coloris tries to use the HTML5Canvas on import, which is not supported by
-// JSDom (without installing additional packages). As such, we need to mock it.
-export const coloris = (_options) => {
-};
-export const init = () => { };