js-draw 0.25.1 → 1.0.1

package/src/Color4.ts

@@ -1,304 +0,0 @@
-import Vec3 from './math/Vec3';
-
-export default class Color4 {
-	private constructor(
-		/** Red component. Should be in the range [0, 1]. */
-		public readonly r: number,
-
-		/** Green component. `g` ∈ [0, 1] */
-		public readonly g: number,
-
-		/** Blue component. `b` ∈ [0, 1] */
-		public readonly b: number,
-
-		/** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
-		public readonly a: number
-	) {
-	}
-
-	/**
-	 * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
-	 *
-	 * Each component should be in the range [0, 1].
-	 */
-	public static ofRGB(red: number, green: number, blue: number): Color4 {
-		return Color4.ofRGBA(red, green, blue, 1.0);
-	}
-
-	public static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4 {
-		red = Math.max(0, Math.min(red, 1));
-		green = Math.max(0, Math.min(green, 1));
-		blue = Math.max(0, Math.min(blue, 1));
-		alpha = Math.max(0, Math.min(alpha, 1));
-
-		return new Color4(red, green, blue, alpha);
-	}
-
-	public static fromHex(hexString: string): Color4 {
-		// Remove starting '#' (if present)
-		hexString = (hexString.match(/^[#]?(.*)$/) ?? [])[1];
-		hexString = hexString.toUpperCase();
-
-		if (!hexString.match(/^[0-9A-F]+$/)) {
-			throw new Error(`${hexString} is not in a valid format.`);
-		}
-
-		// RGBA or RGB
-		if (hexString.length === 3 || hexString.length === 4) {
-			// Each character is a component
-			const components = hexString.split('');
-
-			// Convert to RRGGBBAA or RRGGBB format
-			hexString = components.map(component => `${component}0`).join('');
-		}
-
-		if (hexString.length === 6) {
-			// Alpha component
-			hexString += 'FF';
-		}
-
-		const components: number[] = [];
-		for (let i = 2; i <= hexString.length; i += 2) {
-			const chunk = hexString.substring(i - 2, i);
-			components.push(parseInt(chunk, 16) / 255);
-		}
-
-		if (components.length !== 4) {
-			throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
-		}
-
-		return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
-	}
-
-	/** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
-	public static fromString(text: string): Color4 {
-		if (text.startsWith('#')) {
-			return Color4.fromHex(text);
-		}
-
-		if (text === 'none' || text === 'transparent') {
-			return Color4.transparent;
-		}
-
-		// rgba?: Match both rgb and rgba strings.
-		// ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
-		const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
-		const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
-
-		if (rgbMatch) {
-			const componentsListStr = rgbMatch[1];
-			const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
-
-			if (componentsList.length === 3) {
-				return Color4.ofRGB(
-					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255
-				);
-			} else if (componentsList.length === 4) {
-				return Color4.ofRGBA(
-					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]
-				);
-			} else {
-				throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
-			}
-		}
-
-		// Otherwise, try to use an HTMLCanvasElement to determine the color.
-		// Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
-		const canvas = document.createElement('canvas');
-		canvas.width = 1;
-		canvas.height = 1;
-
-		const ctx = canvas.getContext('2d')!;
-		ctx.fillStyle = text;
-		ctx.fillRect(0, 0, 1, 1);
-
-		const data = ctx.getImageData(0, 0, 1, 1);
-		const red = data.data[0] / 255;
-		const green = data.data[1] / 255;
-		const blue = data.data[2] / 255;
-		const alpha = data.data[3] / 255;
-
-		return Color4.ofRGBA(red, green, blue, alpha);
-	}
-
-	/** @returns true if `this` and `other` are approximately equal. */
-	public eq(other: Color4|null|undefined): boolean {
-		if (other == null) {
-			return false;
-		}
-
-		// If both completely transparent,
-		if (this.a === 0 && other.a === 0) {
-			return true;
-		}
-
-		return this.toHexString() === other.toHexString();
-	}
-
-	/**
-	 * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
-	 * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
-	 *
-	 * @returns a color `fractionTo` of the way from this color to `other`.
-	 *
-	 * @example
-	 * ```ts
-	 * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
-	 * ```
-	 */
-	public mix(other: Color4, fractionTo: number): Color4 {
-		fractionTo = Math.min(Math.max(fractionTo, 0), 1);
-		const fractionOfThis = 1 - fractionTo;
-		return new Color4(
-			this.r * fractionOfThis + other.r * fractionTo,
-			this.g * fractionOfThis + other.g * fractionTo,
-			this.b * fractionOfThis + other.b * fractionTo,
-			this.a * fractionOfThis + other.a * fractionTo,
-		);
-	}
-
-	/**
-	 * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
-	 */
-	public static average(colors: Color4[]) {
-		let averageA = 0;
-		let averageR = 0;
-		let averageG = 0;
-		let averageB = 0;
-
-		for (const color of colors) {
-			averageA += color.a;
-			averageR += color.r;
-			averageG += color.g;
-			averageB += color.b;
-		}
-
-		if (colors.length > 0) {
-			averageA /= colors.length;
-			averageR /= colors.length;
-			averageG /= colors.length;
-			averageB /= colors.length;
-		}
-
-		return new Color4(averageR, averageG, averageB, averageA);
-	}
-
-	/**
-	 * Converts to (hue, saturation, value).
-	 * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
-	 *
-	 * The resultant hue is represented in radians and is thus in [0, 2pi].
-	 */
-	public asHSV(): Vec3 {
-		// Ref: https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
-		//
-		// HUE:
-		// First, consider the unit cube. Rotate it such that one vertex is at the origin
-		// of a plane and its three neighboring vertices are equidistant from that plane:
-		//
-		//         /\
-		//       /  | \
-		//   2 /    3   \ 1
-		//     \    |   /
-		//       \  | /
-		//   .     \/      .
-		//
-		//        .
-		//
-		// Let z be up and (x, y, 0) be in the plane.
-		//
-		// Label vectors 1,2,3 with R, G, and B, respectively. Let R's projection into the plane
-		// lie along the x axis.
-		//
-		// Because R is a unit vector and R, G, B are equidistant from the plane, they must
-		// form 30-60-90 triangles, which have side lengths proportional to (1, √3, 2)
-		//
-		//       /|
-		//    1/  | (√3)/2
-		//    /   |
-		//      1/2
-		//
-		const minComponent = Math.min(this.r, this.g, this.b);
-		const maxComponent = Math.max(this.r, this.g, this.b);
-		const chroma = maxComponent - minComponent;
-
-		let hue;
-
-		// See https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
-		if (chroma === 0) {
-			hue = 0;
-		} else if (this.r >= this.g && this.r >= this.b) {
-			hue = ((this.g - this.b) / chroma) % 6;
-		} else if (this.g >= this.r && this.g >= this.b) {
-			hue = (this.b - this.r) / chroma + 2;
-		} else {
-			hue = (this.r - this.g) / chroma + 4;
-		}
-
-		// Convert to degree representation, then to radians.
-		hue *= 60;
-		hue *= Math.PI / 180;
-
-		// Ensure positivity.
-		if (hue < 0) {
-			hue += Math.PI * 2;
-		}
-
-		const value = maxComponent;
-		const saturation = value > 0 ? chroma / value : 0;
-
-		return Vec3.of(hue, saturation, value);
-	}
-
-	private hexString: string|null = null;
-
-	/**
-	 * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
-	 *
-	 * @example
-	 * ```
-	 * Color4.red.toHexString(); // -> #ff0000ff
-	 * ```
-	 */
-	public toHexString(): string {
-		if (this.hexString) {
-			return this.hexString;
-		}
-
-		const componentToHex = (component: number): string => {
-			const res = Math.round(255 * component).toString(16);
-
-			if (res.length === 1) {
-				return `0${res}`;
-			}
-			return res;
-		};
-
-		const alpha = componentToHex(this.a);
-		const red = componentToHex(this.r);
-		const green = componentToHex(this.g);
-		const blue = componentToHex(this.b);
-		if (alpha === 'ff') {
-			return `#${red}${green}${blue}`;
-		}
-		this.hexString = `#${red}${green}${blue}${alpha}`;
-		return this.hexString;
-	}
-
-	public toString() {
-		return this.toHexString();
-	}
-
-	public static transparent = Color4.ofRGBA(0, 0, 0, 0);
-	public static red = Color4.ofRGB(1.0, 0.0, 0.0);
-	public static green = Color4.ofRGB(0.0, 1.0, 0.0);
-	public static blue = Color4.ofRGB(0.0, 0.0, 1.0);
-	public static purple = Color4.ofRGB(0.5, 0.2, 0.5);
-	public static yellow = Color4.ofRGB(1, 1, 0.1);
-	public static clay = Color4.ofRGB(0.8, 0.4, 0.2);
-	public static black = Color4.ofRGB(0, 0, 0);
-	public static gray = Color4.ofRGB(0.5, 0.5, 0.5);
-	public static white = Color4.ofRGB(1, 1, 1);
-}
-
-export { Color4 };

package/src/Editor.css

@@ -1,98 +0,0 @@
-
-@import url('./toolbar/toolbar.css');
-@import url('./tools/tools.css');
-@import url('./Coloris.css');
-
-.imageEditorContainer {
-	/* Deafult colors for the editor */
-    --primary-background-color: white;
-    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);
-    --secondary-background-color: #faf;
-    --primary-foreground-color: black;
-    --secondary-foreground-color: black;
-	--primary-shadow-color: rgba(0, 0, 0, 0.5);
-}
-
-@media (prefers-color-scheme: dark) {
-	.imageEditorContainer {
-		--primary-background-color: #151515;
-		--primary-background-color-transparent: rgba(50, 50, 50, 0.5);
-		--secondary-background-color: #607;
-		--primary-foreground-color: white;
-		--secondary-foreground-color: white;
-		--primary-shadow-color: rgba(250, 250, 250, 0.5);
-	}
-}
-
-.imageEditorContainer {
-	color: var(--primary-foreground-color);
-	font-family: system-ui, -apple-system, sans-serif;
-	background-color: var(--primary-background-color);
-
-	display: flex;
-	flex-direction: column-reverse;
-}
-
-.imageEditorContainer .imageEditorRenderArea {
-	display: grid;
-	grid-template-columns: 1fr;
-	flex-grow: 2;
-	flex-shrink: 1;
-	min-height: 100px;
-}
-
-.imageEditorContainer .imageEditorRenderArea canvas {
-	/* Stack all canvases on top of each other */
-	grid-row: 1 / 1;
-	grid-column: 1 / 1;
-	touch-action: none;
-
-	/* Fill the container */
-	box-sizing: border-box;
-	width: 100%;
-	height: 100%;
-
-	/* Allow the canvas to shrink (needed in Chrome) */
-	min-height: 0px;
-	max-height: inherit;
-}
-
-.imageEditorContainer .loadingMessage {
-	position: fixed;
-	text-align: center;
-	font-size: 2em;
-
-	bottom: 0;
-	left: 0;
-	right: 0;
-}
-
-.imageEditorContainer .accessibilityAnnouncement {
-	opacity: 0;
-	width: 0;
-	height: 0;
-	overflow: hidden;
-	pointer-events: none;
-}
-
-.imageEditorContainer .textRendererOutputContainer {
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-}
-
-.imageEditorContainer .textRendererOutputContainer:focus-within {
-	overflow: visible;
-	z-index: 5;
-}
-
-@media print {
-	.imageEditorContainer .loadingMessage {
-		display: none;
-	}
-
-	.imageEditorContainer .imageEditorRenderArea canvas {
-		width: 100%;
-		height: initial;
-	}
-}

package/src/math/Mat33.test.ts

@@ -1,244 +0,0 @@
-import Mat33 from './Mat33';
-import { Point2, Vec2 } from './Vec2';
-import Vec3 from './Vec3';
-
-
-describe('Mat33 tests', () => {
-	it('equality', () => {
-		expect(Mat33.identity).objEq(Mat33.identity);
-		expect(new Mat33(
-			0.1, 0.2, 0.3,
-			0.4, 0.5, 0.6,
-			0.7, 0.8, -0.9
-		)).objEq(new Mat33(
-			0.2, 0.1, 0.4,
-			0.5, 0.5, 0.7,
-			0.7, 0.8, -0.9
-		), 0.2);
-	});
-
-	it('transposition', () => {
-		expect(Mat33.identity.transposed()).objEq(Mat33.identity);
-		expect(new Mat33(
-			1, 2, 0,
-			0, 0, 0,
-			0, 1, 0
-		).transposed()).objEq(new Mat33(
-			1, 0, 0,
-			2, 0, 1,
-			0, 0, 0
-		));
-	});
-
-	it('multiplication', () => {
-		const M = new Mat33(
-			1, 2, 3,
-			4, 5, 6,
-			7, 8, 9
-		);
-
-		expect(Mat33.identity.rightMul(Mat33.identity)).objEq(Mat33.identity);
-		expect(M.rightMul(Mat33.identity)).objEq(M);
-		expect(M.rightMul(new Mat33(
-			1, 0, 0,
-			0, 2, 0,
-			0, 0, 1
-		))).objEq(new Mat33(
-			1, 4, 3,
-			4, 10, 6,
-			7, 16, 9
-		));
-		expect(M.rightMul(new Mat33(
-			2, 0, 1,
-			0, 1, 0,
-			0, 0, 3
-		))).objEq(new Mat33(
-			2, 2, 10,
-			8, 5, 22,
-			14, 8, 34
-		));
-	});
-
-	it('the inverse of the identity matrix should be the identity matrix', () => {
-		const fuzz = 0.01;
-		expect(Mat33.identity.inverse()).objEq(Mat33.identity, fuzz);
-
-		const M = new Mat33(
-			1, 2, 3,
-			4, 1, 0,
-			2, 3, 0
-		);
-		expect(M.inverse().rightMul(M)).objEq(Mat33.identity, fuzz);
-	});
-
-	it('90 degree z-rotation matricies should rotate 90 degrees counter clockwise', () => {
-		const fuzz = 0.001;
-
-		const M = Mat33.zRotation(Math.PI / 2);
-		const rotated = M.transformVec2(Vec2.unitX);
-		expect(rotated).objEq(Vec2.unitY, fuzz);
-		expect(M.transformVec2(rotated)).objEq(Vec2.unitX.times(-1), fuzz);
-	});
-
-	it('z-rotation matricies should preserve the given origin', () => {
-		const testPairs: Array<[number, Vec2]> = [
-			[ Math.PI / 2, Vec2.zero ],
-			[ -Math.PI / 2, Vec2.zero ],
-			[ -Math.PI / 2, Vec2.of(10, 10) ],
-		];
-
-		for (const [ angle, center ] of testPairs) {
-			expect(Mat33.zRotation(angle, center).transformVec2(center)).objEq(center);
-		}
-	});
-
-	it('translation matricies should translate Vec2s', () => {
-		const fuzz = 0.01;
-
-		const M = Mat33.translation(Vec2.of(1, -4));
-		expect(M.transformVec2(Vec2.of(0, 0))).objEq(Vec2.of(1, -4), fuzz);
-		expect(M.transformVec2(Vec2.of(-1, 3))).objEq(Vec2.of(0, -1), fuzz);
-	});
-
-	it('scaling matricies should scale about the provided center', () => {
-		const fuzz = 0.01;
-
-		const center = Vec2.of(1, -4);
-		const M = Mat33.scaling2D(2, center);
-		expect(M.transformVec2(center)).objEq(center, fuzz);
-		expect(M.transformVec2(Vec2.of(0, 0))).objEq(Vec2.of(-1, 4), fuzz);
-	});
-
-	it('calling inverse on singular matricies should result in the identity matrix', () => {
-		const fuzz = 0.001;
-		const singularMat = Mat33.ofRows(
-			Vec3.of(0, 0, 1),
-			Vec3.of(0, 1, 0),
-			Vec3.of(0, 1, 1)
-		);
-		expect(singularMat.invertable()).toBe(false);
-		expect(singularMat.inverse()).objEq(Mat33.identity, fuzz);
-	});
-
-	it('z-rotation matricies should be invertable', () => {
-		const fuzz = 0.01;
-		const M = Mat33.zRotation(-0.2617993877991494, Vec2.of(481, 329.5));
-		expect(
-			M.inverse().transformVec2(M.transformVec2(Vec2.unitX))
-		).objEq(Vec2.unitX, fuzz);
-		expect(M.invertable());
-
-		const starterTransform = new Mat33(
-			-0.2588190451025205, -0.9659258262890688, 923.7645204565603,
-			0.9659258262890688,  -0.2588190451025205, -49.829447083761465,
-			0, 0, 1
-		);
-		expect(starterTransform.invertable()).toBe(true);
-
-		const fullTransform = starterTransform.rightMul(M);
-		const fullTransformInverse = fullTransform.inverse();
-		expect(fullTransform.invertable()).toBe(true);
-
-		expect(
-			fullTransformInverse.rightMul(fullTransform)
-		).objEq(Mat33.identity, fuzz);
-
-		expect(
-			fullTransform.transformVec2(fullTransformInverse.transformVec2(Vec2.unitX))
-		).objEq(Vec2.unitX, fuzz);
-
-		expect(
-			fullTransformInverse.transformVec2(fullTransform.transformVec2(Vec2.unitX))
-		).objEq(Vec2.unitX, fuzz);
-	});
-
-	it('z-rotation matrix inverses should undo the z-rotation', () => {
-		const testCases: Array<[ number, Point2 ]> = [
-			[ Math.PI / 2, Vec2.zero ],
-			[ Math.PI, Vec2.of(1, 1) ],
-			[ -Math.PI, Vec2.of(1, 1) ],
-			[ -Math.PI * 2, Vec2.of(1, 1) ],
-			[ -Math.PI * 2, Vec2.of(123, 456) ],
-			[ -Math.PI / 4, Vec2.of(123, 456) ],
-			[ 0.1, Vec2.of(1, 2) ],
-		];
-
-		const fuzz = 0.00001;
-		for (const [ angle, center ] of testCases) {
-			const mat = Mat33.zRotation(angle, center);
-			expect(mat.inverse().rightMul(mat)).objEq(Mat33.identity, fuzz);
-			expect(mat.rightMul(mat.inverse())).objEq(Mat33.identity, fuzz);
-		}
-	});
-
-	it('z-rotation should preserve given origin', () => {
-		const testCases: Array<[ number, Point2 ]> = [
-			[ 6.205048847547065, Vec2.of(75.16363373235318, 104.29870408043762) ],
-			[ 1.234, Vec2.of(-56, 789) ],
-			[ -Math.PI, Vec2.of(-56, 789) ],
-			[ -Math.PI / 2, Vec2.of(-0.001, 1.0002) ],
-		];
-
-		for (const [angle, rotationOrigin] of testCases) {
-			expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
-		}
-	});
-
-	it('should correctly apply a mapping to all components', () => {
-		expect(
-			new Mat33(
-				1, 2, 3,
-				4, 5, 6,
-				7, 8, 9,
-			).mapEntries(component => component - 1)
-		).toMatchObject(new Mat33(
-			0, 1, 2,
-			3, 4, 5,
-			6, 7, 8,
-		));
-	});
-
-	it('should convert CSS matrix(...) strings to matricies', () => {
-		// From MDN:
-		// 		⎡ a c e ⎤
-		// 		⎢ b d f ⎥  =  matrix(a,b,c,d,e,f)
-		// 		⎣ 0 0 1 ⎦
-		const identity = Mat33.fromCSSMatrix('matrix(1, 0, 0, 1, 0, 0)');
-		expect(identity).objEq(Mat33.identity);
-		expect(Mat33.fromCSSMatrix('matrix(1, 2, 3, 4, 5, 6)')).objEq(new Mat33(
-			1, 3, 5,
-			2, 4, 6,
-			0, 0, 1,
-		));
-		expect(Mat33.fromCSSMatrix('matrix(1e2, 2, 3, 4, 5, 6)')).objEq(new Mat33(
-			1e2, 3, 5,
-			2, 4, 6,
-			0, 0, 1,
-		));
-		expect(Mat33.fromCSSMatrix('matrix(1.6, 2, .3, 4, 5, 6)')).objEq(new Mat33(
-			1.6, .3, 5,
-			2, 4, 6,
-			0, 0, 1,
-		));
-		expect(Mat33.fromCSSMatrix('matrix(-1, 2, 3.E-2, 4, -5.123, -6.5)')).objEq(new Mat33(
-			-1, 0.03, -5.123,
-			2, 4, -6.5,
-			0, 0, 1,
-		));
-		expect(Mat33.fromCSSMatrix('matrix(1.6,\n\t2, .3, 4, 5, 6)')).objEq(new Mat33(
-			1.6, .3, 5,
-			2, 4, 6,
-			0, 0, 1,
-		));
-		expect(Mat33.fromCSSMatrix('matrix(1.6,2, .3E-2, 4, 5, 6)')).objEq(new Mat33(
-			1.6, 3e-3, 5,
-			2, 4, 6,
-			0, 0, 1,
-		));
-		expect(Mat33.fromCSSMatrix('matrix(-1, 2e6,	3E-2,-5.123, -6.5e-1, 0.01)')).objEq(new Mat33(
-			-1, 	3E-2,  	-6.5e-1,
-			2e6,	-5.123,	0.01,
-			0,  	0,     	1,
-		));
-	});
-});