js-draw 1.0.1 → 1.1.0

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,232 +0,0 @@
-import { Color4, Mat33, Point2, Vec2, Rect2, Path, PathCommandType } from '@js-draw/math';
-import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import Viewport from '../../Viewport';
-import RenderingStyle, { stylesEqual } from '../RenderingStyle';
-import TextRenderingStyle from '../TextRenderingStyle';
-import RenderablePathSpec, { pathToRenderable } from '../RenderablePathSpec';
-
-export interface RenderableImage {
-	transform: Mat33;
-
-	// An Image or HTMLCanvasElement. If an Image, it must be loaded from the same origin as this
-	// (and should have `src=this.base64Url`).
-	image: HTMLImageElement|HTMLCanvasElement;
-
-	// All images that can be drawn **must** have a base64 URL in the form
-	// data:image/[format];base64,[data here]
-	// If `image` is an Image, this should be equivalent to `image.src`.
-	base64Url: string;
-
-	label?: string;
-}
-
-/**
- * Abstract base class for renderers.
- *
- * @see {@link EditorImage.render}
- */
-export default abstract class AbstractRenderer {
-	// If null, this' transformation is linked to the Viewport
-	private selfTransform: Mat33|null = null;
-	private transformStack: Array<Mat33|null> = [];
-
-	protected constructor(private viewport: Viewport) { }
-
-	// this.canvasToScreen, etc. should be used instead of the corresponding
-	// methods on Viewport.
-	protected getViewport(): Viewport { return this.viewport; }
-
-	// Returns the size of the rendered region of this on
-	// the display (in pixels).
-	public abstract displaySize(): Vec2;
-
-	public abstract clear(): void;
-	protected abstract beginPath(startPoint: Point2): void;
-	protected abstract endPath(style: RenderingStyle): void;
-	protected abstract lineTo(point: Point2): void;
-	protected abstract moveTo(point: Point2): void;
-	protected abstract traceCubicBezierCurve(
-		p1: Point2, p2: Point2, p3: Point2,
-	): void;
-	protected abstract traceQuadraticBezierCurve(
-		controlPoint: Point2, endPoint: Point2,
-	): void;
-	public abstract drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
-	public abstract drawImage(image: RenderableImage): void;
-
-	// Returns true iff the given rectangle is so small, rendering anything within
-	// it has no effect on the image.
-	public abstract isTooSmallToRender(rect: Rect2): boolean;
-
-	public setDraftMode(_draftMode: boolean) { }
-
-	protected objectLevel: number = 0;
-	private currentPaths: RenderablePathSpec[]|null = null;
-	private flushPath() {
-		if (!this.currentPaths) {
-			return;
-		}
-
-		let lastStyle: RenderingStyle|null = null;
-		for (const path of this.currentPaths) {
-			const { startPoint, commands, style } = path;
-
-			if (!lastStyle || !stylesEqual(lastStyle, style)) {
-				if (lastStyle) {
-					this.endPath(lastStyle);
-				}
-
-				this.beginPath(startPoint);
-				lastStyle = style;
-			} else {
-				this.moveTo(startPoint);
-			}
-
-			for (const command of commands) {
-				if (command.kind === PathCommandType.LineTo) {
-					this.lineTo(command.point);
-				} else if (command.kind === PathCommandType.MoveTo) {
-					this.moveTo(command.point);
-				} else if (command.kind === PathCommandType.CubicBezierTo) {
-					this.traceCubicBezierCurve(
-						command.controlPoint1, command.controlPoint2, command.endPoint
-					);
-				} else if (command.kind === PathCommandType.QuadraticBezierTo) {
-					this.traceQuadraticBezierCurve(
-						command.controlPoint, command.endPoint
-					);
-				}
-			}
-		}
-
-		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.
-	 */
-	public drawPath(path: RenderablePathSpec) {
-		// If we're being called outside of an object,
-		// we can't delay rendering
-		if (this.objectLevel === 0) {
-			this.currentPaths = [path];
-			this.flushPath();
-			this.currentPaths = null;
-		} else {
-			// Otherwise, don't render paths all at once. This prevents faint lines between
-			// segments of the same stroke from being visible.
-			this.currentPaths!.push(path);
-		}
-	}
-
-	// Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
-	// This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
-	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle) {
-		const path = Path.fromRect(rect, lineWidth);
-		this.drawPath(pathToRenderable(path, lineFill));
-	}
-
-	/** Draws a filled rectangle. */
-	public fillRect(rect: Rect2, fill: Color4) {
-		const path = Path.fromRect(rect);
-		this.drawPath(pathToRenderable(path, { fill }));
-	}
-
-	/**
-	 * 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`.
-	 */
-	public startObject(_boundingBox: Rect2, _clip?: boolean) {
-		if (this.objectLevel > 0) {
-			this.flushPath();
-		}
-
-		this.currentPaths = [];
-		this.objectLevel ++;
-	}
-
-	/**
-	 * Notes the end of an object.
-	 * @param _loaderData - a map from strings to JSON-ifyable objects
-	 * and contains properties attached to the object by whatever loader loaded the image. This
-	 * is used to preserve attributes not supported by js-draw when loading/saving an image.
-	 * Renderers may ignore this.
-	 *
-	 * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
-	 * Renderers may ignore this.
-	 */
-	public endObject(_loaderData?: LoadSaveDataTable, _objectTags?: string[]) {
-		// Render the paths all at once
-		this.flushPath();
-		this.currentPaths = null;
-		this.objectLevel --;
-
-		if (this.objectLevel < 0) {
-			throw new Error(
-				'More objects have ended than have been started (negative object nesting level)!'
-			);
-		}
-	}
-
-	protected getNestingLevel() {
-		return this.objectLevel;
-	}
-
-	// Draw a representation of [points]. Intended for debugging.
-	public abstract drawPoints(...points: Point2[]): void;
-
-
-	// Returns true iff other can be rendered onto this without data loss.
-	public canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean {
-		return false;
-	}
-
-	// MUST throw if other and this are not of the same base class.
-	public renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer) {
-		throw new Error(`Unable to render from ${other}: Not implemented`);
-	}
-
-	// Set a transformation to apply to things before rendering,
-	// replacing the viewport's transform.
-	public setTransform(transform: Mat33|null) {
-		this.selfTransform = transform;
-	}
-
-	public pushTransform(transform: Mat33) {
-		this.transformStack.push(this.selfTransform);
-		this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
-	}
-
-	public popTransform() {
-		if (this.transformStack.length === 0) {
-			throw new Error('Unable to pop more transforms than have been pushed!');
-		}
-
-		this.setTransform(this.transformStack.pop() ?? null);
-	}
-
-	// Get the matrix that transforms a vector on the canvas to a vector on this'
-	// rendering target.
-	public getCanvasToScreenTransform(): Mat33 {
-		if (this.selfTransform) {
-			return this.selfTransform;
-		}
-		return this.viewport.canvasToScreenTransform;
-	}
-
-	public canvasToScreen(vec: Vec2): Vec2 {
-		return this.getCanvasToScreenTransform().transformVec2(vec);
-	}
-
-	public getSizeOfCanvasPixelOnScreen(): number {
-		return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
-	}
-}

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,312 +0,0 @@
-import TextComponent from '../../components/TextComponent';
-import { Mat33, Rect2, Point2, Vec2, Vec3, Color4 } from '@js-draw/math';
-import Viewport from '../../Viewport';
-import RenderingStyle from '../RenderingStyle';
-import TextRenderingStyle from '../TextRenderingStyle';
-import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
-import RenderablePathSpec, { visualEquivalent } from '../RenderablePathSpec';
-
-/**
- * Renders onto a `CanvasRenderingContext2D`.
- *
- * @example
- * ```ts
- * const editor = new Editor(document.body);
- *
- * const canvas = document.createElement('canvas');
- * const ctx = canvas.getContext('2d');
- *
- * // Ensure that the canvas can fit the entire rendering
- * const viewport = editor.image.getImportExportViewport();
- * canvas.width = viewport.getScreenRectSize().x;
- * canvas.height = viewport.getScreenRectSize().y;
- *
- * // Render editor.image onto the renderer
- * const renderer = new CanvasRenderer(ctx, viewport);
- * editor.image.render(renderer, viewport);
- * ```
- */
-export default class CanvasRenderer extends AbstractRenderer {
-	private ignoreObjectsAboveLevel: number|null = null;
-	private ignoringObject: boolean = false;
-	private currentObjectBBox: Rect2|null = null;
-
-	// Minimum square distance of a control point from the line between the end points
-	// for the curve not to be drawn as a line.
-	// For example, if [minSquareCurveApproxDist] = 25 = 5², then a control point on a quadratic
-	// bezier curve needs to be at least 5 units away from the line between the curve's end points
-	// for the curve to be drawn as a Bezier curve (and not a line).
-	private minSquareCurveApproxDist: number;
-
-	// Minimum size of an object (in pixels) for it to be rendered.
-	private minRenderSizeAnyDimen: number;
-	private minRenderSizeBothDimens: number;
-
-	/**
-	 * Creates a new `CanvasRenderer` that renders to the given rendering context.
-	 * The `viewport` is used to determine the translation/rotation/scaling of the content
-	 * to draw.
-	 */
-	public constructor(private ctx: CanvasRenderingContext2D, viewport: Viewport) {
-		super(viewport);
-		this.setDraftMode(false);
-	}
-
-	private transformBy(transformBy: Mat33) {
-		// From MDN, transform(a,b,c,d,e,f)
-		// takes input such that
-		// ⎡ a c e ⎤
-		// ⎢ b d f ⎥ transforms content drawn to [ctx].
-		// ⎣ 0 0 1 ⎦
-		this.ctx.transform(
-			transformBy.a1, transformBy.b1, // a, b
-			transformBy.a2, transformBy.b2, // c, d
-			transformBy.a3, transformBy.b3, // e, f
-		);
-	}
-
-	public override canRenderFromWithoutDataLoss(other: AbstractRenderer) {
-		return other instanceof CanvasRenderer;
-	}
-
-	public override renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
-		if (!(other instanceof CanvasRenderer)) {
-			throw new Error(`${other} cannot be rendered onto ${this}`);
-		}
-		transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
-		this.ctx.save();
-		this.transformBy(transformBy);
-		this.ctx.drawImage(other.ctx.canvas, 0, 0);
-		this.ctx.restore();
-	}
-
-	// Set parameters for lower/higher quality rendering
-	public override setDraftMode(draftMode: boolean) {
-		if (draftMode) {
-			this.minSquareCurveApproxDist = 9;
-			this.minRenderSizeBothDimens = 2;
-			this.minRenderSizeAnyDimen = 0.5;
-		} else {
-			this.minSquareCurveApproxDist = 0.5;
-			this.minRenderSizeBothDimens = 0.2;
-			this.minRenderSizeAnyDimen = 1e-6;
-		}
-	}
-
-	public displaySize(): Vec2 {
-		return Vec2.of(
-			this.ctx.canvas.clientWidth,
-			this.ctx.canvas.clientHeight,
-		);
-	}
-
-	public clear() {
-		this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-	}
-
-	protected beginPath(startPoint: Point2) {
-		startPoint = this.canvasToScreen(startPoint);
-
-		this.ctx.beginPath();
-		this.ctx.moveTo(startPoint.x, startPoint.y);
-	}
-
-	protected endPath(style: RenderingStyle) {
-		// Saving and restoring can be slow in some browsers
-		// (e.g. 0.50ms). Avoid.
-		//this.ctx.save();
-
-		// If not a transparent fill
-		if (style.fill.a > 0) {
-			this.ctx.fillStyle = style.fill.toHexString();
-			this.ctx.fill();
-		}
-
-		if (style.stroke) {
-			this.ctx.strokeStyle = style.stroke.color.toHexString();
-			this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
-			this.ctx.lineCap = 'round';
-			this.ctx.lineJoin = 'round';
-			this.ctx.stroke();
-
-			this.ctx.lineWidth = 1;
-		}
-
-		this.ctx.closePath();
-		//this.ctx.restore();
-	}
-
-	protected lineTo(point: Point2) {
-		point = this.canvasToScreen(point);
-		this.ctx.lineTo(point.x, point.y);
-	}
-
-	protected moveTo(point: Point2) {
-		point = this.canvasToScreen(point);
-		this.ctx.moveTo(point.x, point.y);
-	}
-
-	protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2) {
-		p1 = this.canvasToScreen(p1);
-		p2 = this.canvasToScreen(p2);
-		p3 = this.canvasToScreen(p3);
-
-		// Approximate the curve if small enough.
-		const delta1 = p2.minus(p1);
-		const delta2 = p3.minus(p2);
-		if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
-			&& delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
-			this.ctx.lineTo(p3.x, p3.y);
-		} else {
-			this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
-		}
-	}
-
-	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
-		controlPoint = this.canvasToScreen(controlPoint);
-		endPoint = this.canvasToScreen(endPoint);
-
-		// Approximate the curve with a line if small enough
-		const delta = controlPoint.minus(endPoint);
-		if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
-			this.ctx.lineTo(endPoint.x, endPoint.y);
-		} else {
-			this.ctx.quadraticCurveTo(
-				controlPoint.x, controlPoint.y, endPoint.x, endPoint.y
-			);
-		}
-	}
-
-	public override drawPath(path: RenderablePathSpec) {
-		if (this.ignoringObject) {
-			return;
-		}
-
-		// If part of a huge object, it might be worth trimming the path
-		if (this.currentObjectBBox?.containsRect(this.getViewport().visibleRect)) {
-			// Try to trim/remove parts of the path outside of the bounding box.
-			path = visualEquivalent(
-				path,
-				this.getViewport().visibleRect
-			);
-		}
-
-		super.drawPath(path);
-	}
-
-	public drawText(text: string, transform: Mat33, style: TextRenderingStyle): void {
-		this.ctx.save();
-		transform = this.getCanvasToScreenTransform().rightMul(transform);
-		this.transformBy(transform);
-		TextComponent.applyTextStyles(this.ctx, style);
-
-		if (style.renderingStyle.fill.a !== 0) {
-			this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
-			this.ctx.fillText(text, 0, 0);
-		}
-		if (style.renderingStyle.stroke) {
-			this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
-			this.ctx.lineWidth = style.renderingStyle.stroke.width;
-			this.ctx.strokeText(text, 0, 0);
-		}
-
-		this.ctx.restore();
-	}
-
-	public drawImage(image: RenderableImage) {
-		this.ctx.save();
-		const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
-		this.transformBy(transform);
-
-		this.ctx.drawImage(image.image, 0, 0);
-		this.ctx.restore();
-	}
-
-	private clipLevels: number[] = [];
-	public override startObject(boundingBox: Rect2, clip?: boolean) {
-		if (this.isTooSmallToRender(boundingBox)) {
-			this.ignoreObjectsAboveLevel = this.getNestingLevel();
-			this.ignoringObject = true;
-		}
-
-		super.startObject(boundingBox);
-		this.currentObjectBBox = boundingBox;
-
-		if (!this.ignoringObject && clip) {
-			// 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();
-			}
-		}
-	}
-
-	public override endObject() {
-		// Cache this.objectLevel — it may be decremented by super.endObject.
-		const objectLevel = this.objectLevel;
-
-		this.currentObjectBBox = null;
-		super.endObject();
-
-		if (!this.ignoringObject && this.clipLevels.length > 0) {
-			if (this.clipLevels[this.clipLevels.length - 1] === objectLevel) {
-				this.ctx.restore();
-				this.clipLevels.pop();
-			}
-		}
-
-		// If exiting an object with a too-small-to-draw bounding box,
-		if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
-			this.ignoreObjectsAboveLevel = null;
-			this.ignoringObject = false;
-		}
-	}
-
-	// @internal
-	public drawPoints(...points: Point2[]) {
-		const pointRadius = 10;
-
-		for (let i = 0; i < points.length; i++) {
-			const point = this.canvasToScreen(points[i]);
-
-			this.ctx.beginPath();
-			this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
-			this.ctx.fillStyle = Color4.ofRGBA(
-				0.5 + Math.sin(i) / 2,
-				1.0,
-				0.5 + Math.cos(i * 0.2) / 4, 0.5
-			).toHexString();
-			this.ctx.lineWidth = 2;
-			this.ctx.fill();
-			this.ctx.stroke();
-			this.ctx.closePath();
-
-			this.ctx.textAlign = 'center';
-			this.ctx.textBaseline = 'middle';
-			this.ctx.fillStyle = 'black';
-			this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
-		}
-	}
-
-	// @internal
-	public isTooSmallToRender(rect: Rect2): boolean {
-		// Should we ignore all objects within this object's bbox?
-		const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
-
-		const bothDimenMinSize = this.minRenderSizeBothDimens;
-		const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
-		const anyDimenMinSize = this.minRenderSizeAnyDimen;
-		const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
-
-		return bothTooSmall || anyTooSmall;
-	}
-}

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

@@ -1,41 +0,0 @@
-
-import { Mat33, Vec2 } from '@js-draw/math';
-import Viewport from '../../Viewport';
-import DummyRenderer from './DummyRenderer';
-
-const makeRenderer = (): [DummyRenderer, Viewport] => {
-	const viewport = new Viewport(() => {});
-	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);
-	});
-});