js-draw 0.0.10 → 0.1.2

package/dist/src/tools/PanZoom.d.ts

@@ -11,22 +11,23 @@ interface PinchData {
     dist: number;
 }
 export declare enum PanZoomMode {
-    OneFingerGestures = 1,
-    TwoFingerGestures = 2,
-    AnyDevice = 4
+    OneFingerTouchGestures = 1,
+    TwoFingerTouchGestures = 2,
+    RightClickDrags = 4,
+    SinglePointerGestures = 8
 }
 export default class PanZoom extends BaseTool {
     private editor;
     private mode;
-    readonly kind: ToolType.PanZoom | ToolType.TouchPanZoom;
+    readonly kind: ToolType.PanZoom;
     private transform;
     private lastAngle;
     private lastDist;
     private lastScreenCenter;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
-    private pointersHaveCorrectDeviceType;
-    onPointerDown({ allPointers }: PointerEvt): boolean;
+    private allPointersAreOfType;
+    onPointerDown({ allPointers: pointers }: PointerEvt): boolean;
     private getCenterDelta;
     private handleTwoFingerMove;
     private handleOneFingerMove;
@@ -36,5 +37,7 @@ export default class PanZoom extends BaseTool {
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress({ key }: KeyPressEvent): boolean;
+    setMode(mode: PanZoomMode): void;
+    getMode(): PanZoomMode;
 }
 export {};

package/dist/src/tools/PanZoom.js

@@ -2,17 +2,16 @@ import Mat33 from '../geometry/Mat33';
 import { Vec2 } from '../geometry/Vec2';
 import Vec3 from '../geometry/Vec3';
 import { PointerDevice } from '../Pointer';
+import { EditorEventType } from '../types';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 export var PanZoomMode;
 (function (PanZoomMode) {
-    // Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
-    PanZoomMode[PanZoomMode["OneFingerGestures"] = 1] = "OneFingerGestures";
-    // Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
-    PanZoomMode[PanZoomMode["TwoFingerGestures"] = 2] = "TwoFingerGestures";
-    // / Handle gestures from any device, rather than just touch
-    PanZoomMode[PanZoomMode["AnyDevice"] = 4] = "AnyDevice";
+    PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
+    PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
 })(PanZoomMode || (PanZoomMode = {}));
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
@@ -21,9 +20,6 @@ export default class PanZoom extends BaseTool {
         this.mode = mode;
         this.kind = ToolType.PanZoom;
         this.transform = null;
-        if (mode === PanZoomMode.OneFingerGestures) {
-            this.kind = ToolType.TouchPanZoom;
-        }
     }
     // Returns information about the pointers in a gesture
     computePinchData(p1, p2) {
@@ -34,24 +30,25 @@ export default class PanZoom extends BaseTool {
         const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
         return { canvasCenter, screenCenter, angle, dist };
     }
-    pointersHaveCorrectDeviceType(pointers) {
-        return this.mode & PanZoomMode.AnyDevice || pointers.every(pointer => pointer.device === PointerDevice.Touch);
+    allPointersAreOfType(pointers, kind) {
+        return pointers.every(pointer => pointer.device === kind);
     }
-    onPointerDown({ allPointers }) {
+    onPointerDown({ allPointers: pointers }) {
         var _a;
         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;
         }
         if (handlingGesture) {
@@ -87,10 +84,10 @@ export default class PanZoom extends BaseTool {
         var _a;
         (_a = this.transform) !== null && _a !== void 0 ? _a : (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);
@@ -191,4 +188,16 @@ export default class PanZoom extends BaseTool {
         this.updateTransform(transformUpdate);
         return true;
     }
+    setMode(mode) {
+        if (mode !== this.mode) {
+            this.mode = mode;
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        }
+    }
+    getMode() {
+        return this.mode;
+    }
 }

package/dist/src/tools/Pen.js

@@ -66,9 +66,14 @@ export default class Pen extends BaseTool {
         if (this.builder && current.isPrimary) {
             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/dist/src/tools/SelectionTool.js

@@ -13,7 +13,6 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Vec2 } from '../geometry/Vec2';
 import { EditorEventType } from '../types';
-import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 const handleScreenSize = 30;
@@ -115,7 +114,7 @@ const makeDraggable = (element, onDrag, onDragEnd) => {
     element.addEventListener('pointercancel', onPointerEnd);
 };
 // Maximum number of strokes to transform without a re-render.
-const updateChunkSize = 50;
+const updateChunkSize = 100;
 class Selection {
     constructor(startPoint, editor) {
         this.startPoint = startPoint;
@@ -285,10 +284,13 @@ class Selection {
             if (this.region.containsRect(elem.getBBox())) {
                 return true;
             }
-            else if (this.region.getEdges().some(edge => elem.intersects(edge))) {
-                return true;
+            // 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 false;
+            return testLines.some(edge => elem.intersects(edge));
         });
         // Find the bounding box of all selected elements.
         if (!this.recomputeRegion()) {
@@ -392,26 +394,9 @@ export default class SelectionTool extends BaseTool {
             tool: this,
         });
         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);
         }
     }
     onPointerUp(event) {

package/dist/src/tools/ToolController.d.ts

@@ -3,12 +3,11 @@ import Editor from '../Editor';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
 export declare enum ToolType {
-    TouchPanZoom = 0,
-    Pen = 1,
-    Selection = 2,
-    Eraser = 3,
-    PanZoom = 4,
-    UndoRedoShortcut = 5
+    Pen = 0,
+    Selection = 1,
+    Eraser = 2,
+    PanZoom = 3,
+    UndoRedoShortcut = 4
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/ToolController.js

@@ -8,17 +8,16 @@ import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 export var ToolType;
 (function (ToolType) {
-    ToolType[ToolType["TouchPanZoom"] = 0] = "TouchPanZoom";
-    ToolType[ToolType["Pen"] = 1] = "Pen";
-    ToolType[ToolType["Selection"] = 2] = "Selection";
-    ToolType[ToolType["Eraser"] = 3] = "Eraser";
-    ToolType[ToolType["PanZoom"] = 4] = "PanZoom";
-    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
+    ToolType[ToolType["Pen"] = 0] = "Pen";
+    ToolType[ToolType["Selection"] = 1] = "Selection";
+    ToolType[ToolType["Eraser"] = 2] = "Eraser";
+    ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
+    ToolType[ToolType["UndoRedoShortcut"] = 4] = "UndoRedoShortcut";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
         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),
@@ -30,13 +29,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 => {
             if (event.kind === EditorEventType.ToolEnabled) {

package/dist/src/tools/localization.d.ts

@@ -1,4 +1,5 @@
 export interface ToolLocalization {
+    RightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;

package/dist/src/tools/localization.js

@@ -5,6 +5,7 @@ export const defaultToolLocalization = {
     touchPanTool: 'Touch Panning',
     twoFingerPanZoomTool: 'Panning and Zooming',
     undoRedoTool: 'Undo/Redo',
+    RightClickDragPanTool: 'Right-click drag',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/src/types.d.ts

@@ -89,8 +89,9 @@ export interface ColorPickerToggled {
 export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
+export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
-    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener): Promise<Rect2>;
+    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }
 export interface StrokeDataPoint {
     pos: Point2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.10",
+  "version": "0.1.2",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -9,9 +9,9 @@ import EventDispatcher from './EventDispatcher';
 import { Point2, Vec2 } from './geometry/Vec2';
 import Vec3 from './geometry/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/AbstractRenderer';
-import Display, { RenderingMode } from './Display';
-import SVGRenderer from './rendering/SVGRenderer';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import Display, { RenderingMode } from './rendering/Display';
+import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
@@ -165,6 +165,10 @@ export class Editor {
 		// May be required to prevent text selection on iOS/Safari:
 		// See https://stackoverflow.com/a/70992717/17055750
 		this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
+		this.renderingRegion.addEventListener('contextmenu', evt => {
+			// Don't show a context menu
+			evt.preventDefault();
+		});
 
 		this.renderingRegion.addEventListener('pointerdown', evt => {
 			const pointer = Pointer.ofEvent(evt, true, this.viewport);
@@ -380,7 +384,8 @@ export class Editor {
 			);
 		}
 
-		this.image.render(renderer, this.viewport);
+		//this.image.render(renderer, this.viewport);
+		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 		this.rerenderQueued = false;
 	}
 
@@ -463,22 +468,28 @@ export class Editor {
 
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
-		const imageRect = await loader.start((component) => {
+		this.display.setDraftMode(true);
+
+		await loader.start((component) => {
 			(new EditorImage.AddElementCommand(component)).apply(this);
 		}, (countProcessed: number, totalToProcess: number) => {
-			if (countProcessed % 100 === 0) {
+			if (countProcessed % 500 === 0) {
 				this.showLoadingWarning(countProcessed / totalToProcess);
-				this.rerender(false);
+				this.rerender();
 				return new Promise(resolve => {
 					requestAnimationFrame(() => resolve());
 				});
 			}
 
 			return null;
+		}, (importExportRect: Rect2) => {
+			this.setImportExportRect(importExportRect).apply(this);
+			this.viewport.zoomTo(importExportRect).apply(this);
 		});
 		this.hideLoadingWarning();
 
-		this.setImportExportRect(imageRect).apply(this);
+		this.display.setDraftMode(false);
+		this.queueRerender();
 	}
 
 	// Returns the size of the visible region of the output SVG

package/src/EditorImage.test.ts

@@ -5,8 +5,8 @@ import Stroke from './components/Stroke';
 import { Vec2 } from './geometry/Vec2';
 import Path, { PathCommandType } from './geometry/Path';
 import Color4 from './Color4';
-import DummyRenderer from './rendering/DummyRenderer';
-import { RenderingStyle } from './rendering/AbstractRenderer';
+import DummyRenderer from './rendering/renderers/DummyRenderer';
+import { RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import createEditor from './testing/createEditor';
 
 describe('EditorImage', () => {

package/src/EditorImage.ts

@@ -1,10 +1,15 @@
 import Editor from './Editor';
-import AbstractRenderer from './rendering/AbstractRenderer';
+import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Command from './commands/Command';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';
+import RenderingCache from './rendering/caching/RenderingCache';
+
+export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
+	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
+};
 
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
@@ -20,7 +25,7 @@ export default class EditorImage {
 
 	// Returns the parent of the given element, if it exists.
 	public findParent(elem: AbstractComponent): ImageNode|null {
-		const candidates = this.root.getLeavesInRegion(elem.getBBox());
+		const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
 		for (const candidate of candidates) {
 			if (candidate.getContent() === elem) {
 				return candidate;
@@ -29,25 +34,18 @@ export default class EditorImage {
 		return null;
 	}
 
-	private sortLeaves(leaves: ImageNode[]) {
-		leaves.sort((a, b) => a.getContent()!.zIndex - b.getContent()!.zIndex);
+	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
+		cache.render(screenRenderer, this.root, viewport);
 	}
 
-	public render(renderer: AbstractRenderer, viewport: Viewport, minFraction: number = 0.001) {
-		// Don't render components that are < 0.1% of the viewport.
-		const leaves = this.root.getLeavesInRegion(viewport.visibleRect, minFraction);
-		this.sortLeaves(leaves);
-
-		for (const leaf of leaves) {
-			// Leaves by definition have content
-			leaf.getContent()!.render(renderer, viewport.visibleRect);
-		}
+	public render(renderer: AbstractRenderer, viewport: Viewport) {
+		this.root.render(renderer, viewport.visibleRect);
 	}
 
 	// Renders all nodes, even ones not within the viewport
 	public renderAll(renderer: AbstractRenderer) {
 		const leaves = this.root.getLeaves();
-		this.sortLeaves(leaves);
+		sortLeavesByZIndex(leaves);
 
 		for (const leaf of leaves) {
 			leaf.getContent()!.render(renderer, leaf.getBBox());
@@ -55,8 +53,9 @@ export default class EditorImage {
 	}
 
 	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
-		const leaves = this.root.getLeavesInRegion(region);
-		this.sortLeaves(leaves);
+		const leaves = this.root.getLeavesIntersectingRegion(region);
+		sortLeavesByZIndex(leaves);
+
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
@@ -74,6 +73,10 @@ export default class EditorImage {
 		) {
 			this.#element = element;
 			this.#applyByFlattening = applyByFlattening;
+
+			if (isNaN(this.#element.getBBox().area)) {
+				throw new Error('Elements in the image cannot have NaN bounding boxes');
+			}
 		}
 
 		public apply(editor: Editor) {
@@ -100,15 +103,17 @@ export default class EditorImage {
 }
 
 export type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
+type TooSmallToRenderCheck = (rect: Rect2)=> boolean;
 
-
+// TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
 export class ImageNode {
 	private content: AbstractComponent|null;
 	private bbox: Rect2;
 	private children: ImageNode[];
 	private targetChildCount: number = 30;
-	private minZIndex: number|null;
-	private maxZIndex: number|null;
+
+	private id: number;
+	private static idCounter: number = 0;
 
 	public constructor(
 		private parent: ImageNode|null = null
@@ -117,8 +122,15 @@ export class ImageNode {
 		this.bbox = Rect2.empty;
 		this.content = null;
 
-		this.minZIndex = null;
-		this.maxZIndex = null;
+		this.id = ImageNode.idCounter++;
+	}
+
+	public getId() {
+		return this.id;
+	}
+
+	public onContentChange() {
+		this.id = ImageNode.idCounter++;
 	}
 
 	public getContent(): AbstractComponent|null {
@@ -129,18 +141,25 @@ export class ImageNode {
 		return this.parent;
 	}
 
-	private getChildrenInRegion(region: Rect2): ImageNode[] {
+	private getChildrenIntersectingRegion(region: Rect2): ImageNode[] {
 		return this.children.filter(child => {
 			return child.getBBox().intersects(region);
 		});
 	}
 
+	public getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[] {
+		if (this.content) {
+			return [this];
+		}
+		return this.getChildrenIntersectingRegion(region);
+	}
+
 	// Returns a list of `ImageNode`s with content (and thus no children).
-	public getLeavesInRegion(region: Rect2, minFractionOfRegion: number = 0): ImageNode[] {
+	public getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[] {
 		const result: ImageNode[] = [];
 
 		// Don't render if too small
-		if (this.bbox.maxDimension / region.maxDimension <= minFractionOfRegion) {
+		if (isTooSmall?.(this.bbox)) {
 			return [];
 		}
 
@@ -148,9 +167,9 @@ export class ImageNode {
 			result.push(this);
 		}
 
-		const children = this.getChildrenInRegion(region);
+		const children = this.getChildrenIntersectingRegion(region);
 		for (const child of children) {
-			result.push(...child.getLeavesInRegion(region, minFractionOfRegion));
+			result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
 		}
 
 		return result;
@@ -172,6 +191,8 @@ export class ImageNode {
 	}
 
 	public addLeaf(leaf: AbstractComponent): ImageNode {
+		this.onContentChange();
+
 		if (this.content === null && this.children.length === 0) {
 			this.content = leaf;
 			this.recomputeBBox(true);
@@ -239,12 +260,8 @@ export class ImageNode {
 		const oldBBox = this.bbox;
 		if (this.content !== null) {
 			this.bbox = this.content.getBBox();
-			this.minZIndex = this.content.zIndex;
-			this.maxZIndex = this.content.zIndex;
 		} else {
 			this.bbox = Rect2.empty;
-			this.minZIndex = null;
-			this.maxZIndex = null;
 			let isFirst = true;
 
 			for (const child of this.children) {
@@ -254,15 +271,6 @@ export class ImageNode {
 				} else {
 					this.bbox = this.bbox.union(child.getBBox());
 				}
-
-				this.minZIndex ??= child.minZIndex;
-				this.maxZIndex ??= child.maxZIndex;
-				if (child.minZIndex !== null && this.minZIndex !== null) {
-					this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
-				}
-				if (child.maxZIndex !== null && this.maxZIndex !== null) {
-					this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
-				}
 			}
 		}
 
@@ -295,9 +303,6 @@ export class ImageNode {
 
 	// Remove this node and all of its children
 	public remove() {
-		this.minZIndex = null;
-		this.maxZIndex = null;
-
 		if (!this.parent) {
 			this.content = null;
 			this.children = [];
@@ -322,4 +327,15 @@ export class ImageNode {
 		this.parent = null;
 		this.children = [];
 	}
+
+	public render(renderer: AbstractRenderer, visibleRect: Rect2) {
+		// Don't render components that are < 0.1% of the viewport.
+		const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+		sortLeavesByZIndex(leaves);
+
+		for (const leaf of leaves) {
+			// Leaves by definition have content
+			leaf.getContent()!.render(renderer, visibleRect);
+		}
+	}
 }

package/src/Pointer.ts

@@ -5,7 +5,8 @@ export enum PointerDevice {
 	Pen,
 	Eraser,
 	Touch,
-	Mouse,
+	PrimaryButtonMouse,
+	RightButtonMouse,
 	Other,
 }
 
@@ -31,7 +32,7 @@ export default class Pointer {
         public readonly id: number,
 
         // Numeric timestamp (milliseconds, as from (new Date).getTime())
-        public readonly timeStamp: number
+        public readonly timeStamp: number,
 	) {
 	}
 
@@ -39,7 +40,7 @@ export default class Pointer {
 		const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
 
 		const pointerTypeToDevice: Record<string, PointerDevice> = {
-			'mouse': PointerDevice.Mouse,
+			'mouse': PointerDevice.PrimaryButtonMouse,
 			'pen': PointerDevice.Pen,
 			'touch': PointerDevice.Touch,
 		};
@@ -53,6 +54,14 @@ export default class Pointer {
 		const timeStamp = (new Date()).getTime();
 		const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
 
+		if (device === PointerDevice.PrimaryButtonMouse) {
+			if (evt.buttons & 0x2) {
+				device = PointerDevice.RightButtonMouse;
+			} else if (!(evt.buttons & 0x1)) {
+				device = PointerDevice.Other;
+			}
+		} 
+
 		return new Pointer(
 			screenPos,
 			canvasPos,
@@ -61,7 +70,7 @@ export default class Pointer {
 			isDown,
 			device,
 			evt.pointerId,
-			timeStamp
+			timeStamp,
 		);
 	}