js-draw 1.0.1 → 1.1.0

package/src/rendering/RenderingStyle.test.ts

@@ -1,68 +0,0 @@
-
-import { Color4 } from '@js-draw/math';
-import RenderingStyle, { styleFromJSON, stylesEqual, styleToJSON } from './RenderingStyle';
-
-
-describe('RenderingStyle', () => {
-	it('identical styles should be equal', () => {
-		const redFill: RenderingStyle = {
-			fill: Color4.red,
-		};
-		expect(stylesEqual(redFill, redFill)).toBe(true);
-		expect(stylesEqual(
-			{ fill: Color4.ofRGB(1, 0, 0.3), },
-			{ fill: Color4.ofRGB(1, 0, 0.3), },
-		)).toBe(true);
-		expect(stylesEqual(
-			{ fill: Color4.red },
-			{ fill: Color4.blue },
-		)).toBe(false);
-
-		expect(stylesEqual(
-			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
-			{ fill: Color4.red },
-		)).toBe(false);
-		expect(stylesEqual(
-			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
-			{ fill: Color4.red, stroke: { width: 1, color: Color4.blue }},
-		)).toBe(false);
-		expect(stylesEqual(
-			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
-			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
-		)).toBe(true);
-		expect(stylesEqual(
-			{ fill: Color4.red, stroke: { width: 1, color: Color4.red }},
-			{ fill: Color4.red, stroke: { width: 2, color: Color4.red }},
-		)).toBe(false);
-	});
-
-	it('styles should be convertable to JSON', () => {
-		expect(styleToJSON({
-			fill: Color4.red,
-		})).toMatchObject({
-			fill: '#ff0000',
-			stroke: undefined,
-		});
-
-		expect(styleToJSON({
-			fill: Color4.blue,
-			stroke: {
-				width: 4,
-				color: Color4.red,
-			}
-		})).toMatchObject({
-			fill: '#0000ff',
-			stroke: {
-				width: 4,
-				color: '#ff0000'
-			},
-		});
-	});
-
-	it('JSON should be convertable into styles', () => {
-		const redFillJSON = { fill: '#ff0000', };
-		const redFillBlueStrokeJSON = { fill: '#ff0000', stroke: { width: 4, color: '#0000ff' }};
-		expect(styleToJSON(styleFromJSON(redFillJSON))).toMatchObject(redFillJSON);
-		expect(styleToJSON(styleFromJSON(redFillBlueStrokeJSON))).toMatchObject(redFillBlueStrokeJSON);
-	});
-});

package/src/rendering/RenderingStyle.ts

@@ -1,55 +0,0 @@
-import { Color4 } from '@js-draw/math';
-
-interface RenderingStyle {
-	readonly fill: Color4;
-	readonly stroke?: {
-		readonly color: Color4;
-		readonly width: number;
-	};
-}
-
-export default RenderingStyle;
-
-export const cloneStyle = (style: RenderingStyle) => {
-	return {
-		fill: style.fill,
-		stroke: style.stroke ? {
-			...style.stroke
-		} : undefined,
-	};
-};
-
-export const stylesEqual = (a: RenderingStyle, b: RenderingStyle): boolean => {
-	const result = a === b || (a.fill.eq(b.fill)
-		&& (a.stroke == undefined) === (b.stroke == undefined)
-		&& (a.stroke?.color?.eq(b.stroke?.color) ?? true)
-		&& a.stroke?.width === b.stroke?.width);
-
-	// Map undefined/null -> false
-	return result ?? false;
-};
-
-// Returns an object that can be converted to a JSON string with
-// JSON.stringify.
-export const styleToJSON = (style: RenderingStyle) => {
-	const stroke = !style.stroke ? undefined : {
-		color: style.stroke.color.toHexString(),
-		width: style.stroke.width,
-	};
-
-	return {
-		fill: style.fill.toHexString(),
-		stroke,
-	};
-};
-
-export const styleFromJSON = (json: Record<string, any>) => {
-	const stroke = json.stroke ? {
-		color: Color4.fromHex(json.stroke.color),
-		width: json.stroke.width,
-	} : undefined;
-	return {
-		fill: Color4.fromHex(json.fill),
-		stroke,
-	};
-};

package/src/rendering/TextRenderingStyle.ts

@@ -1,55 +0,0 @@
-import RenderingStyle, { cloneStyle, styleFromJSON, styleToJSON } from './RenderingStyle';
-
-export interface TextRenderingStyle {
-	readonly size: number;
-
-	/** Name of the font. */
-	readonly fontFamily: string;
-
-	/** For example, `bold`. Like CSS `font-weight`. */
-	readonly fontWeight?: string;
-
-	/** For example, `italic`. Like CSS `font-style`. */
-	readonly fontStyle?: string;
-
-	readonly fontVariant?: string;
-
-	/** Fill and stroke of the text. */
-	readonly renderingStyle: RenderingStyle;
-}
-
-export default TextRenderingStyle;
-
-export const cloneTextStyle = (style: TextRenderingStyle) => {
-	return {
-		...style,
-		renderingStyle: cloneStyle(style.renderingStyle),
-	};
-};
-
-export const textStyleFromJSON = (json: any) => {
-	if (typeof json === 'string') {
-		json = JSON.parse(json);
-	}
-
-	if (typeof(json.fontFamily) !== 'string') {
-		throw new Error('Serialized textStyle missing string fontFamily attribute!');
-	}
-
-	const style: TextRenderingStyle = {
-		renderingStyle: styleFromJSON(json.renderingStyle),
-		size: json.size,
-		fontWeight: json.fontWeight,
-		fontVariant: json.fontVariant,
-		fontFamily: json.fontFamily,
-	};
-
-	return style;
-};
-
-export const textStyleToJSON = (style: TextRenderingStyle) => {
-	return {
-		...style,
-		renderingStyle: styleToJSON(style.renderingStyle),
-	};
-};

package/src/rendering/caching/CacheRecord.test.ts

@@ -1,48 +0,0 @@
-/* @jest-environment jsdom */
-
-import { Rect2, Vec2 } from '@js-draw/math';
-import CacheRecord from './CacheRecord';
-import { createCache } from './testUtils';
-
-describe('CacheRecord', () => {
-	describe('should map points in the cache renderer\'s region to the cache renderer', () => {
-		const blockResolution = Vec2.of(500, 500);
-		const { cache } = createCache(undefined, {
-			blockResolution,
-		});
-		const state = cache['sharedState'];
-
-		const record = new CacheRecord(() => {}, state);
-
-		describe('region has top left at (0, 0)', () => {
-			it('region as big as the cache block', () => {
-				const transform = record.getTransform(
-					new Rect2(0, 0, 500, 500)
-				);
-				expect(transform.transformVec2(Vec2.unitX)).toMatchObject(Vec2.unitX);
-				expect(transform.transformVec2(Vec2.unitY)).toMatchObject(Vec2.unitY);
-			});
-
-			it('region twice as big as cache block', () => {
-				const transform = record.getTransform(
-					new Rect2(0, 0, 1000, 1000)
-				);
-
-				// A size-one vector on the screen corresponds to a size 1/2 vector on the
-				// cached surface.
-				expect(transform.transformVec2(Vec2.unitX)).toMatchObject(Vec2.of(0.5, 0));
-				expect(transform.transformVec2(Vec2.unitY)).toMatchObject(Vec2.of(0, 0.5));
-			});
-		});
-
-		describe('region has top left at (100, 100)', () => {
-			it('region as big as the cache block', () => {
-				const transform = record.getTransform(
-					new Rect2(100, 100, 500, 500)
-				);
-				expect(transform.transformVec2(Vec2.of(100, 100))).toMatchObject(Vec2.zero);
-				expect(transform.transformVec2(Vec2.of(500, 500))).toMatchObject(Vec2.of(400, 400));
-			});
-		});
-	});
-});

package/src/rendering/caching/CacheRecord.ts

@@ -1,76 +0,0 @@
-import { Mat33, Rect2 } from '@js-draw/math';
-import AbstractRenderer from '../renderers/AbstractRenderer';
-import { BeforeDeallocCallback, CacheState } from './types';
-
-// Represents a cached renderer/canvas
-// This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
-
-export default class CacheRecord {
-	private renderer: AbstractRenderer;
-	private lastUsedCycle: number;
-	private allocd: boolean = false;
-
-	// For debugging
-	public allocCount: number = 0;
-
-	public constructor(
-		private onBeforeDeallocCallback: BeforeDeallocCallback|null,
-		private cacheState: CacheState,
-	) {
-		this.renderer = cacheState.props.createRenderer();
-		this.lastUsedCycle = -1;
-		this.allocd = true;
-	}
-
-	public startRender(): AbstractRenderer {
-		this.lastUsedCycle = this.cacheState.currentRenderingCycle;
-		if (!this.allocd) {
-			throw new Error('Only alloc\'d canvases can be rendered to');
-		}
-		return this.renderer;
-	}
-
-	public dealloc() {
-		this.onBeforeDeallocCallback?.();
-		this.allocd = false;
-		this.onBeforeDeallocCallback = null;
-		this.lastUsedCycle = 0;
-	}
-
-	public isAllocd() {
-		return this.allocd;
-	}
-
-	public realloc(newDeallocCallback: BeforeDeallocCallback) {
-		if (this.allocd) {
-			this.dealloc();
-		}
-		this.allocd = true;
-		this.onBeforeDeallocCallback = newDeallocCallback;
-		this.lastUsedCycle = this.cacheState.currentRenderingCycle;
-		this.allocCount ++;
-	}
-
-	public getLastUsedCycle(): number {
-		return this.lastUsedCycle;
-	}
-
-	// Returns the transformation that maps [drawTo] to this' renderable region
-	// (i.e. a [cacheProps.blockResolution]-sized rectangle with top left at (0, 0))
-	public getTransform(drawTo: Rect2): Mat33 {
-		const transform = Mat33.scaling2D(
-			this.cacheState.props.blockResolution.x / drawTo.size.x
-		).rightMul(
-			Mat33.translation(drawTo.topLeft.times(-1))
-		);
-
-		return transform;
-	}
-
-	public setRenderingRegion(drawTo: Rect2) {
-		this.renderer.setTransform(
-			// Invert to map objects instead of the viewport
-			this.getTransform(drawTo)
-		);
-	}
-}

package/src/rendering/caching/CacheRecordManager.ts

@@ -1,71 +0,0 @@
-import { BeforeDeallocCallback, CacheProps, CacheState } from './types';
-import CacheRecord from './CacheRecord';
-import { Rect2 } from '@js-draw/math';
-
-const debugMode = false;
-
-export class CacheRecordManager {
-	// Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
-	private cacheRecords: CacheRecord[] = [];
-	private maxCanvases: number;
-	private cacheState: CacheState;
-
-	public constructor(cacheProps: CacheProps) {
-		this.maxCanvases = Math.ceil(
-			// Assuming four components per pixel:
-			cacheProps.cacheSize / 4 / cacheProps.blockResolution.x / cacheProps.blockResolution.y
-		);
-	}
-
-	public setSharedState(state: CacheState) {
-		this.cacheState = state;
-	}
-
-	public allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord {
-		if (this.cacheRecords.length < this.maxCanvases) {
-			const record: CacheRecord = new CacheRecord(
-				onDealloc,
-				this.cacheState,
-			);
-			record.setRenderingRegion(drawTo);
-			this.cacheRecords.push(record);
-
-			if (debugMode) {
-				console.log('[Cache] Cache spaces used: ', this.cacheRecords.length, ' of ', this.maxCanvases);
-			}
-
-			return record;
-		} else {
-			const lru = this.getLeastRecentlyUsedRecord()!;
-
-			if (debugMode) {
-				console.log(
-					'[Cache] Re-alloc. Times allocated: ', lru.allocCount,
-					'\nLast used cycle: ', lru.getLastUsedCycle(),
-					'\nCurrent cycle: ', this.cacheState.currentRenderingCycle
-				);
-			}
-
-			lru.realloc(onDealloc);
-			lru.setRenderingRegion(drawTo);
-
-			if (debugMode) {
-				console.log(
-					'[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle()
-				);
-				console.assert(
-					lru['cacheState'] === this.cacheState,
-					'[Cache] Unequal cache states! cacheState should be a shared object!'
-				);
-			}
-
-			return lru;
-		}
-	}
-
-	// Returns null if there are no cache records. Returns an unalloc'd record if one exists.
-	private getLeastRecentlyUsedRecord(): CacheRecord|null {
-		this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
-		return this.cacheRecords[0];
-	}
-}

package/src/rendering/caching/RenderingCache.test.ts

@@ -1,43 +0,0 @@
-/* @jest-environment jsdom */
-
-import DummyRenderer from '../renderers/DummyRenderer';
-import { createCache } from './testUtils';
-import Stroke from '../../components/Stroke';
-import { Path, Mat33, Color4 } from '@js-draw/math';
-import EditorImage from '../../EditorImage';
-import Viewport from '../../Viewport';
-import { pathToRenderable } from '../RenderablePathSpec';
-
-describe('RenderingCache', () => {
-	const testPath = Path.fromString('M0,0 l100,500 l-20,20 L-100,-100');
-	const testStroke = new Stroke([ pathToRenderable(testPath, { fill: Color4.purple }) ]);
-
-	it('should create a root node large enough to contain the viewport', () => {
-		let lastRenderer: DummyRenderer|null = null;
-		let allocdRenderers: number = 0;
-
-		const { editor, cache } = createCache((renderer) => {
-			allocdRenderers ++;
-			lastRenderer = renderer;
-		});
-		const screenRenderer = editor.display.getDryInkRenderer() as DummyRenderer;
-
-		// No objects: Should not create a renderer.
-		expect(lastRenderer).toBeNull();
-		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
-		expect(lastRenderer).toBeNull();
-
-		editor.dispatch(EditorImage.addElement(testStroke));
-		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
-
-		expect(allocdRenderers).toBeGreaterThanOrEqual(1);
-		expect(lastRenderer).not.toBeNull();
-		expect(lastRenderer!.renderedPathCount).toBe(1);
-
-		editor.dispatch(Viewport.transformBy(Mat33.scaling2D(0.1)));
-		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
-		expect(allocdRenderers).toBe(1);
-		expect(lastRenderer!.renderedPathCount).toBe(1);
-		expect(screenRenderer.renderedPathCount).toBeGreaterThanOrEqual(1);
-	});
-});

package/src/rendering/caching/RenderingCache.ts

@@ -1,66 +0,0 @@
-import { ImageNode } from '../../EditorImage';
-import { Rect2 } from '@js-draw/math';
-import Viewport from '../../Viewport';
-import AbstractRenderer from '../renderers/AbstractRenderer';
-import RenderingCacheNode from './RenderingCacheNode';
-import { CacheRecordManager } from './CacheRecordManager';
-import { CacheProps, CacheState } from './types';
-
-export default class RenderingCache {
-	private sharedState: CacheState;
-	private recordManager: CacheRecordManager;
-	private rootNode: RenderingCacheNode|null;
-
-	public constructor(cacheProps: CacheProps) {
-		this.recordManager = new CacheRecordManager(cacheProps);
-		this.sharedState = {
-			props: cacheProps,
-			currentRenderingCycle: 0,
-			recordManager: this.recordManager,
-		};
-		this.recordManager.setSharedState(this.sharedState);
-	}
-
-	public render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport) {
-		const visibleRect = viewport.visibleRect;
-		this.sharedState.currentRenderingCycle ++;
-
-		// If we can't use the cache,
-		if (!this.sharedState.props.isOfCorrectType(screenRenderer)) {
-			image.render(screenRenderer, visibleRect);
-			return;
-		}
-
-		if (!this.rootNode) {
-			// Adjust the node so that it has the correct aspect ratio
-			const res = this.sharedState.props.blockResolution;
-
-			const topLeft = visibleRect.topLeft;
-			this.rootNode = new RenderingCacheNode(
-				new Rect2(topLeft.x, topLeft.y, res.x, res.y),
-				this.sharedState
-			);
-		}
-
-		while (!this.rootNode!.region.containsRect(visibleRect)) {
-			this.rootNode = this.rootNode!.generateParent();
-		}
-
-		this.rootNode = this.rootNode!.smallestChildContaining(visibleRect) ?? this.rootNode;
-
-		const visibleLeaves = image.getLeavesIntersectingRegion(
-			viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect)
-		);
-
-		let approxVisibleRenderTime = 0;
-		for (const leaf of visibleLeaves) {
-			approxVisibleRenderTime += leaf.getContent()!.getProportionalRenderingTime();
-		}
-
-		if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
-			this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
-		} else {
-			image.render(screenRenderer, visibleRect);
-		}
-	}
-}