js-draw 0.1.1 → 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/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`,