js-draw 0.0.10 → 0.1.0

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -0,0 +1,43 @@
+
+import EventDispatcher from '../../EventDispatcher';
+import Mat33 from '../../geometry/Mat33';
+import { Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
+import DummyRenderer from './DummyRenderer';
+
+const makeRenderer = (): [DummyRenderer, Viewport] => {
+	const viewport = new Viewport(new EventDispatcher());
+	return [ new DummyRenderer(viewport), viewport ];
+};
+
+describe('DummyRenderer', () => {
+	it('should correctly calculate the size of a pixel on the screen', () => {
+		const [ renderer, viewport ] = makeRenderer();
+		viewport.updateScreenSize(Vec2.of(100, 100));
+		viewport.resetTransform(Mat33.identity);
+
+		expect(1/viewport.getScaleFactor()).toBe(1);
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+
+		// Updating the translation matrix shouldn't affect the size of a pixel on the
+		// screen.
+		renderer.setTransform(Mat33.translation(Vec2.of(-1, -2)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+		viewport.resetTransform(Mat33.translation(Vec2.of(3, 4)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+
+		// Scale objects by a factor of 2 when drawing
+		renderer.setTransform(Mat33.scaling2D(2));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
+		viewport.resetTransform(Mat33.scaling2D(0.5));
+
+		// When a renderer transform is set, **only** the renderer transform should be used.
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
+		renderer.setTransform(null);
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(0.5);
+
+		// Rotating should not affect the size of a pixel
+		renderer.setTransform(Mat33.zRotation(Math.PI / 4).rightMul(Mat33.scaling2D(4)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(4);
+	});
+});

package/src/rendering/{DummyRenderer.ts → renderers/DummyRenderer.ts}

@@ -1,9 +1,10 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
-import Viewport from '../Viewport';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
 export default class DummyRenderer extends AbstractRenderer {
@@ -22,8 +23,17 @@ export default class DummyRenderer extends AbstractRenderer {
 	}
 
 	public displaySize(): Vec2 {
-		// Return a dummy
-		return Vec2.of(640, 480);
+		// Do we have a stored viewport size?
+		const viewportSize = this.getViewport().getResolution();
+
+		// Don't use a 0x0 viewport — DummyRenderer is often used
+		// for tests that run without a display, so pretend we have a
+		// reasonable-sized display.
+		if (viewportSize.x === 0 || viewportSize.y === 0) {
+			return Vec2.of(640, 480);
+		}
+
+		return viewportSize;
 	}
 
 	public clear() {
@@ -47,18 +57,29 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.lastFillStyle = style;
 	}
 	protected lineTo(point: Vec3) {
+		point = this.canvasToScreen(point);
+
 		this.lastPoint = point;
 		this.pointBuffer.push(point);
 	}
 	protected moveTo(point: Point2) {
+		point = this.canvasToScreen(point);
+
 		this.lastPoint = point;
 		this.pointBuffer.push(point);
 	}
 	protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3) {
+		p1 = this.canvasToScreen(p1);
+		p2 = this.canvasToScreen(p2);
+		p3 = this.canvasToScreen(p3);
+
 		this.lastPoint = p3;
 		this.pointBuffer.push(p1, p2, p3);
 	}
 	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
+
 		this.lastPoint = endPoint;
 		this.pointBuffer.push(controlPoint, endPoint);
 	}
@@ -67,7 +88,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		// As such, it is unlikely to be the target of automated tests.
 	}
 
-	public startObject(boundingBox: Rect2) {
+	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);
 
 		this.objectNestingLevel += 1;
@@ -77,4 +98,26 @@ export default class DummyRenderer extends AbstractRenderer {
 
 		this.objectNestingLevel -= 1;
 	}
+
+	public isTooSmallToRender(_rect: Rect2): boolean {
+		return false;
+	}
+
+
+	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
+		return other instanceof DummyRenderer;
+	}
+
+	public renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void {
+		if (!(other instanceof DummyRenderer)) {
+			throw new Error(`${other} cannot be rendered onto ${this}`);
+		}
+
+		this.renderedPathCount += other.renderedPathCount;
+		this.lastFillStyle = other.lastFillStyle;
+		this.lastPoint = other.lastPoint;
+		this.pointBuffer.push(...other.pointBuffer.map(point => {
+			return transform.transformVec2(point);
+		}));
+	}
 }

package/src/rendering/{SVGRenderer.ts → renderers/SVGRenderer.ts}

@@ -1,8 +1,8 @@
 
-import Path, { PathCommand, PathCommandType } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -61,7 +61,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	protected beginPath(startPoint: Point2) {
 		this.currentPath = [];
-		this.pathStart = this.viewport.canvasToScreen(startPoint);
+		this.pathStart = this.canvasToScreen(startPoint);
 		this.lastPathStart ??= this.pathStart;
 	}
 
@@ -126,7 +126,7 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected lineTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 
 		this.currentPath!.push({
 			kind: PathCommandType.LineTo,
@@ -135,7 +135,7 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected moveTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 
 		this.currentPath!.push({
 			kind: PathCommandType.MoveTo,
@@ -146,9 +146,9 @@ export default class SVGRenderer extends AbstractRenderer {
 	protected traceCubicBezierCurve(
 		controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2
 	) {
-		controlPoint1 = this.viewport.canvasToScreen(controlPoint1);
-		controlPoint2 = this.viewport.canvasToScreen(controlPoint2);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint1 = this.canvasToScreen(controlPoint1);
+		controlPoint2 = this.canvasToScreen(controlPoint2);
+		endPoint = this.canvasToScreen(endPoint);
 
 		this.currentPath!.push({
 			kind: PathCommandType.CubicBezierTo,
@@ -159,8 +159,8 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2) {
-		controlPoint = this.viewport.canvasToScreen(controlPoint);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
 
 		this.currentPath!.push({
 			kind: PathCommandType.QuadraticBezierTo,
@@ -179,8 +179,12 @@ export default class SVGRenderer extends AbstractRenderer {
 		});
 	}
 
-	// Renders a copy of the given element.
+	// Renders a **copy** of the given element.
 	public drawSVGElem(elem: SVGElement) {
 		this.elem.appendChild(elem.cloneNode(true));
 	}
+
+	public isTooSmallToRender(_rect: Rect2): boolean {
+		return false;
+	}
 }

package/src/testing/createEditor.ts

@@ -1,4 +1,4 @@
-import { RenderingMode } from '../Display';
+import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 
 export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });

package/src/toolbar/HTMLToolbar.ts

@@ -10,7 +10,7 @@ import BaseTool from '../tools/BaseTool';
 import SelectionTool from '../tools/SelectionTool';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import { Vec2 } from '../geometry/Vec2';
-import SVGRenderer from '../rendering/SVGRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
 import EventDispatcher from '../EventDispatcher';
 import { ComponentBuilderFactory } from '../components/builders/types';

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/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 = () => { };