js-draw 0.0.1

package/dist/src/types.d.ts

@@ -0,0 +1,88 @@
+import EventDispatcher from './EventDispatcher';
+import Mat33 from './geometry/Mat33';
+import { Point2, Vec2 } from './geometry/Vec2';
+import Vec3 from './geometry/Vec3';
+import BaseTool from './tools/BaseTool';
+import AbstractComponent from './components/AbstractComponent';
+import Rect2 from './geometry/Rect2';
+import Pointer from './Pointer';
+export interface PointerEvtListener {
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+}
+export declare enum InputEvtType {
+    PointerDownEvt = 0,
+    PointerMoveEvt = 1,
+    PointerUpEvt = 2,
+    GestureCancelEvt = 3,
+    WheelEvt = 4,
+    KeyPressEvent = 5
+}
+export interface WheelEvt {
+    readonly kind: InputEvtType.WheelEvt;
+    readonly delta: Vec3;
+    readonly screenPos: Point2;
+}
+export interface KeyPressEvent {
+    readonly kind: InputEvtType.KeyPressEvent;
+    readonly key: string;
+}
+export interface GestureCancelEvt {
+    readonly kind: InputEvtType.GestureCancelEvt;
+}
+interface PointerEvtBase {
+    readonly current: Pointer;
+    readonly allPointers: Pointer[];
+}
+export interface PointerDownEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerDownEvt;
+}
+export interface PointerMoveEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerMoveEvt;
+}
+export interface PointerUpEvt extends PointerEvtBase {
+    readonly kind: InputEvtType.PointerUpEvt;
+}
+export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+export declare type InputEvt = KeyPressEvent | WheelEvt | GestureCancelEvt | PointerEvt;
+export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+export declare enum EditorEventType {
+    ToolEnabled = 0,
+    ToolDisabled = 1,
+    ToolUpdated = 2,
+    UndoRedoStackUpdated = 3,
+    ObjectAdded = 4,
+    ViewportChanged = 5,
+    DisplayResized = 6
+}
+declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
+export interface EditorToolEvent {
+    readonly kind: EditorToolEventType;
+    readonly tool: BaseTool;
+}
+export interface EditorObjectEvent {
+    readonly kind: EditorEventType.ObjectAdded;
+    readonly object: AbstractComponent;
+}
+export interface EditorViewportChangedEvent {
+    readonly kind: EditorEventType.ViewportChanged;
+    readonly newTransform: Mat33;
+}
+export interface DisplayResizedEvent {
+    readonly kind: EditorEventType.DisplayResized;
+    readonly newSize: Vec2;
+}
+export interface EditorUndoStackUpdated {
+    readonly kind: EditorEventType.UndoRedoStackUpdated;
+    readonly undoStackSize: number;
+    readonly redoStackSize: number;
+}
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated;
+export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
+export declare type ComponentAddedListener = (component: AbstractComponent) => void;
+export interface ImageLoader {
+    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener): Promise<Rect2>;
+}
+export {};

package/dist/src/types.js

@@ -0,0 +1,20 @@
+// Types related to the image editor
+export var InputEvtType;
+(function (InputEvtType) {
+    InputEvtType[InputEvtType["PointerDownEvt"] = 0] = "PointerDownEvt";
+    InputEvtType[InputEvtType["PointerMoveEvt"] = 1] = "PointerMoveEvt";
+    InputEvtType[InputEvtType["PointerUpEvt"] = 2] = "PointerUpEvt";
+    InputEvtType[InputEvtType["GestureCancelEvt"] = 3] = "GestureCancelEvt";
+    InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
+    InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
+})(InputEvtType || (InputEvtType = {}));
+export var EditorEventType;
+(function (EditorEventType) {
+    EditorEventType[EditorEventType["ToolEnabled"] = 0] = "ToolEnabled";
+    EditorEventType[EditorEventType["ToolDisabled"] = 1] = "ToolDisabled";
+    EditorEventType[EditorEventType["ToolUpdated"] = 2] = "ToolUpdated";
+    EditorEventType[EditorEventType["UndoRedoStackUpdated"] = 3] = "UndoRedoStackUpdated";
+    EditorEventType[EditorEventType["ObjectAdded"] = 4] = "ObjectAdded";
+    EditorEventType[EditorEventType["ViewportChanged"] = 5] = "ViewportChanged";
+    EditorEventType[EditorEventType["DisplayResized"] = 6] = "DisplayResized";
+})(EditorEventType || (EditorEventType = {}));

package/jest.config.js

@@ -0,0 +1,22 @@
+// Test configuration
+// See https://jestjs.io/docs/configuration#testenvironment-string
+
+const config = {
+	preset: 'ts-jest',
+
+	// File extensions for imports, in order of precedence:
+	moduleFileExtensions: [
+		'ts',
+		'js',
+	],
+
+	// Mocks.
+	// See https://jestjs.io/docs/webpack#handling-static-assets
+	moduleNameMapper: {
+		// Webpack allows importing CSS files. Mock it.
+		'\\.(css|lessc)': '<rootDir>/__mocks__/styleMock.js',
+		'@melloware/coloris': '<rootDir>/__mocks__/coloris.ts',
+	},
+};
+
+module.exports = config;

package/lint-staged.config.js

@@ -0,0 +1,6 @@
+
+module.exports = {
+	'**/*.{js,ts}': [
+		'yarn run linter-precommit',
+	],
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "js-draw",
+  "version": "0.0.1",
+  "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",
+  "exports": {
+    ".": {
+      "types": "./dist/src/Editor.d.ts",
+      "default": "./dist/src/Editor.js"
+    },
+    "./styles": {
+      "default": "./src/editorStyles.js"
+    },
+    "./Editor": {
+      "types": "./dist/src/Editor.d.ts",
+      "default": "./dist/src/Editor.js"
+    },
+    "./localization": {
+      "types": "./dist/src/localization.d.ts",
+      "default": "./dist/src/localization.js"
+    },
+    "./toolbar/HTMLToolbar": {
+      "types": "./dist/src/toolbar/HTMLToolbar.d.ts",
+      "default": "./dist/src/toolbar/HTMLToolbar.js"
+    },
+    "./Editor.css": {
+      "default": "./src/Editor.css"
+    },
+    "./toolbar/toolbar.css": {
+      "default": "./src/toolbar/toolbar.css"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/personalizedrefrigerator/js-draw.git"
+  },
+  "author": "Henry Heino",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "test": "jest",
+    "build": "yarn tsc",
+    "lint": "eslint .",
+    "linter-precommit": "eslint --fix --ext .js --ext .ts",
+    "lint-staged": "lint-staged",
+    "_postinstall": "husky install",
+    "prepack": "pinst --disable",
+    "postpack": "pinst --enable"
+  },
+  "dependencies": {
+    "@melloware/coloris": "^0.16.0",
+    "bezier-js": "^6.1.0"
+  },
+  "devDependencies": {
+    "@types/bezier-js": "^4.1.0",
+    "@types/jest": "^28.1.7",
+    "@types/jsdom": "^20.0.0",
+    "@types/node": "^18.7.9",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
+    "eslint": "^8.22.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jsdom": "^20.0.0",
+    "lint-staged": "^13.0.3",
+    "pinst": "^3.0.0",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.7.4"
+  },
+  "bugs": {
+    "url": "https://github.com/personalizedrefrigerator/js-draw/issues"
+  },
+  "homepage": "https://github.com/personalizedrefrigerator/js-draw#readme",
+  "directories": {
+    "doc": "doc"
+  },
+  "keywords": [
+    "ink"
+  ]
+}

package/src/Color4.test.ts

@@ -0,0 +1,12 @@
+import Color4 from './Color4';
+
+describe('Color4', () => {
+	it('should convert to #RRGGBB-format hex strings (when no alpha)', () => {
+		expect(Color4.black.toHexString()).toBe('#000000');
+		expect(Color4.fromHex('#f0f').toHexString()).toBe('#f000f0');
+	});
+
+	it('should create #RRGGBBAA-format hex strings when there is an alpha component', () => {
+		expect(Color4.ofRGBA(1, 1, 1, 0.5).toHexString()).toBe('#ffffff80');
+	});
+});

package/src/Color4.ts

@@ -0,0 +1,122 @@
+
+export default class Color4 {
+	private constructor(
+		public readonly r: number,
+		public readonly g: number,
+		public readonly b: number,
+		public readonly a: number
+	) { }
+
+	// Each component should be in the range [0, 1]
+	public static ofRGB(red: number, green: number, blue: number): Color4 {
+		return new Color4(red, green, blue, 1.0);
+	}
+
+	public static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4 {
+		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 new Color4(components[0], components[1], components[2], components[3]);
+	}
+
+	// Like fromHex, but can handle additional colors if an HTML5Canvas is available.
+	public static fromString(text: string): Color4 {
+		if (text.startsWith('#')) {
+			return Color4.fromHex(text);
+		} else {
+			// Otherwise, try to use an HTML5Canvas to determine the color
+			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);
+		}
+	}
+
+	public eq(other: Color4|null|undefined): boolean {
+		if (other == null) {
+			return false;
+		}
+
+		return this.toHexString() === other.toHexString();
+	}
+
+	private hexString: string|null = null;
+	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 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 white = Color4.ofRGB(1, 1, 1);
+}

package/src/Display.ts

@@ -0,0 +1,118 @@
+import AbstractRenderer from './rendering/AbstractRenderer';
+import CanvasRenderer from './rendering/CanvasRenderer';
+import { Editor } from './Editor';
+import { EditorEventType } from './types';
+import DummyRenderer from './rendering/DummyRenderer';
+import { Vec2 } from './geometry/Vec2';
+
+export enum RenderingMode {
+	DummyRenderer,
+	CanvasRenderer,
+	// SVGRenderer is not supported by the main display
+}
+
+export default class Display {
+	private dryInkRenderer: AbstractRenderer;
+	private wetInkRenderer: AbstractRenderer;
+	private resizeSurfacesCallback?: ()=> void;
+	private flattenCallback?: ()=> void;
+
+	public constructor(
+		private editor: Editor, mode: RenderingMode, private parent: HTMLElement|null
+	) {
+		if (mode === RenderingMode.CanvasRenderer) {
+			this.initializeCanvasRendering();
+		} else {
+			this.dryInkRenderer = new DummyRenderer(editor.viewport);
+			this.wetInkRenderer = new DummyRenderer(editor.viewport);
+		}
+
+
+		this.editor.notifier.on(EditorEventType.DisplayResized, event => {
+			if (event.kind !== EditorEventType.DisplayResized) {
+				throw new Error('Mismatched event.kinds!');
+			}
+
+			this.resizeSurfacesCallback?.();
+		});
+	}
+
+	// Returns the visible width of the display (e.g. how much
+	// space the display's element takes up in the x direction
+	// in the DOM).
+	public get width(): number {
+		return this.dryInkRenderer.displaySize().x;
+	}
+
+	public get height(): number {
+		return this.dryInkRenderer.displaySize().y;
+	}
+
+	private initializeCanvasRendering() {
+		const dryInkCanvas = document.createElement('canvas');
+		const wetInkCanvas = document.createElement('canvas');
+		const dryInkCtx = dryInkCanvas.getContext('2d')!;
+		const wetInkCtx = wetInkCanvas.getContext('2d')!;
+
+		this.dryInkRenderer = new CanvasRenderer(dryInkCtx, this.editor.viewport);
+		this.wetInkRenderer = new CanvasRenderer(wetInkCtx, this.editor.viewport);
+
+		dryInkCanvas.className = 'dryInkCanvas';
+		wetInkCanvas.className = 'wetInkCanvas';
+
+		if (this.parent) {
+			this.parent.appendChild(dryInkCanvas);
+			this.parent.appendChild(wetInkCanvas);
+		}
+
+		this.resizeSurfacesCallback = () => {
+			const hasSizeMismatch = (canvas: HTMLCanvasElement): boolean => {
+				return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
+			};
+
+			// Ensure that the drawing surfaces sizes match the
+			// canvas' sizes to prevent stretching.
+			if (hasSizeMismatch(dryInkCanvas) || hasSizeMismatch(wetInkCanvas)) {
+				dryInkCanvas.width = dryInkCanvas.clientWidth;
+				dryInkCanvas.height = dryInkCanvas.clientHeight;
+				wetInkCanvas.width = wetInkCanvas.clientWidth;
+				wetInkCanvas.height = wetInkCanvas.clientHeight;
+
+				this.editor.notifier.dispatch(EditorEventType.DisplayResized, {
+					kind: EditorEventType.DisplayResized,
+					newSize: Vec2.of(
+						this.width,
+						this.height,
+					),
+				});
+			}
+		};
+		this.resizeSurfacesCallback();
+
+		this.flattenCallback = () => {
+			dryInkCtx.drawImage(wetInkCanvas, 0, 0);
+		};
+	}
+
+	// Clears the drawing surfaces and otherwise prepares for a rerender.
+	public startRerender(): AbstractRenderer {
+		this.resizeSurfacesCallback?.();
+		this.wetInkRenderer.clear();
+		this.dryInkRenderer.clear();
+
+		return this.dryInkRenderer;
+	}
+
+	public getDryInkRenderer(): AbstractRenderer {
+		return this.dryInkRenderer;
+	}
+
+	public getWetInkRenderer(): AbstractRenderer {
+		return this.wetInkRenderer;
+	}
+
+	// Re-renders the contents of the wetInkRenderer onto the dryInkRenderer
+	public flatten() {
+		this.flattenCallback?.();
+	}
+}

package/src/Editor.css

@@ -0,0 +1,58 @@
+
+@import url('./toolbar/toolbar.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;
+}
+
+.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%;
+}
+
+.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;
+}