js-draw 0.0.2 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "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",
@@ -10,7 +10,7 @@
       "default": "./dist/src/Editor.js"
     },
     "./styles": {
-      "default": "./src/editorStyles.js"
+      "default": "./src/styles.js"
     },
     "./Editor": {
       "types": "./dist/src/Editor.d.ts",
@@ -29,6 +29,9 @@
     },
     "./toolbar/toolbar.css": {
       "default": "./src/toolbar/toolbar.css"
+    },
+    "./bundle": {
+      "default": "./dist/bundle.js"
     }
   },
   "repository": {
@@ -40,7 +43,7 @@
   "private": false,
   "scripts": {
     "test": "jest",
-    "build": "yarn tsc",
+    "build": "rm -rf ./dist; mkdir dist && yarn tsc && ts-node ./build_tools/bundle.ts",
     "lint": "eslint .",
     "linter-precommit": "eslint --fix --ext .js --ext .ts",
     "lint-staged": "lint-staged",
@@ -59,6 +62,7 @@
     "@types/node": "^18.7.9",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
     "@typescript-eslint/parser": "^5.33.1",
+    "css-loader": "^6.7.1",
     "eslint": "^8.22.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
@@ -66,20 +70,26 @@
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
     "pinst": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.5",
     "ts-jest": "^28.0.8",
-    "typescript": "^4.7.4"
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4",
+    "webpack": "^5.74.0"
   },
   "bugs": {
     "url": "https://github.com/personalizedrefrigerator/js-draw/issues"
   },
   "homepage": "https://github.com/personalizedrefrigerator/js-draw#readme",
   "directories": {
-    "doc": "doc"
+    "doc": "docs"
   },
   "keywords": [
     "ink",
     "drawing",
     "pen",
+    "freehand",
     "svg"
   ]
 }

package/src/Display.ts

@@ -22,9 +22,11 @@ export default class Display {
 	) {
 		if (mode === RenderingMode.CanvasRenderer) {
 			this.initializeCanvasRendering();
-		} else {
+		} else if (mode === RenderingMode.DummyRenderer) {
 			this.dryInkRenderer = new DummyRenderer(editor.viewport);
 			this.wetInkRenderer = new DummyRenderer(editor.viewport);
+		} else {
+			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
 

package/src/Editor.css

@@ -12,7 +12,6 @@
 
 @media (prefers-color-scheme: dark) {
 	.imageEditorContainer {
-		/* Deafult colors for the editor */
 		--primary-background-color: #151515;
 		--primary-background-color-transparent: rgba(50, 50, 50, 0.5);
 		--secondary-background-color: #607;

package/src/Editor.ts

@@ -19,6 +19,19 @@ import Mat33 from './geometry/Mat33';
 import Rect2 from './geometry/Rect2';
 import { defaultEditorLocalization, EditorLocalization } from './localization';
 
+export interface EditorSettings {
+	// Defaults to RenderingMode.CanvasRenderer
+	renderingMode: RenderingMode,
+
+	// Uses a default English localization if a translation is not given.
+	localization: Partial<EditorLocalization>,
+
+	// True if touchpad/mousewheel scrolling should scroll the editor instead of the document.
+	// This does not include pinch-zoom events.
+	// Defaults to true.
+	wheelEventsEnabled: boolean;
+}
+
 export class Editor {
 	// Wrapper around the viewport and toolbar
 	private container: HTMLElement;
@@ -39,23 +52,29 @@ export class Editor {
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
 
+	private settings: EditorSettings;
+
 	public constructor(
 		parent: HTMLElement,
-		renderingMode: RenderingMode = RenderingMode.CanvasRenderer,
-
-		// Uses a default English localization if a translation is not given.
-		localization?: Partial<EditorLocalization>,
+		settings: Partial<EditorSettings> = {},
 	) {
+		this.localization = {
+			...this.localization,
+			...settings.localization,
+		};
+
+		// Fill default settings.
+		this.settings = {
+			wheelEventsEnabled: settings.wheelEventsEnabled ?? true,
+			renderingMode: settings.renderingMode ?? RenderingMode.CanvasRenderer,
+			localization: this.localization,
+		};
+
 		this.container = document.createElement('div');
 		this.renderingRegion = document.createElement('div');
 		this.container.appendChild(this.renderingRegion);
 		this.container.className = 'imageEditorContainer';
 
-		this.localization = {
-			...this.localization,
-			...localization,
-		};
-
 		this.loadingWarning = document.createElement('div');
 		this.loadingWarning.classList.add('loadingMessage');
 		this.loadingWarning.ariaLive = 'polite';
@@ -74,7 +93,7 @@ export class Editor {
 		this.notifier = new EventDispatcher();
 		this.importExportViewport = new Viewport(this.notifier);
 		this.viewport = new Viewport(this.notifier);
-		this.display = new Display(this, renderingMode, this.renderingRegion);
+		this.display = new Display(this, this.settings.renderingMode, this.renderingRegion);
 		this.image = new EditorImage();
 		this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
 		this.toolController = new ToolController(this, this.localization);
@@ -93,6 +112,13 @@ export class Editor {
 		this.hideLoadingWarning();
 	}
 
+	// Returns a reference to this' container.
+	// Example usage:
+	//   editor.getRootElement().style.height = '500px';
+	public getRootElement(): HTMLElement {
+		return this.container;
+	}
+
 	// [fractionLoaded] should be a number from 0 to 1, where 1 represents completely loaded.
 	public showLoadingWarning(fractionLoaded: number) {
 		const loadingPercent = Math.round(fractionLoaded * 100);
@@ -110,8 +136,15 @@ export class Editor {
 		this.accessibilityAnnounceArea.innerText = message;
 	}
 
-	public addToolbar(): HTMLToolbar {
-		return new HTMLToolbar(this, this.container, this.localization);
+	public addToolbar(defaultLayout: boolean = true): HTMLToolbar {
+		const toolbar = new HTMLToolbar(this, this.container, this.localization);
+
+		if (defaultLayout) {
+			toolbar.addDefaultToolWidgets();
+			toolbar.addDefaultActionButtons();
+		}
+
+		return toolbar;
 	}
 
 	private registerListeners() {
@@ -203,6 +236,12 @@ export class Editor {
 		this.container.addEventListener('wheel', evt => {
 			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
 
+			// Process wheel events if the ctrl key is down -- we do want to handle
+			// pinch-zooming.
+			if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
+				return;
+			}
+
 			if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
 				delta = delta.times(15);
 			} else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {

package/src/EditorImage.test.ts

@@ -10,6 +10,8 @@ import { RenderingMode } from './Display';
 import DummyRenderer from './rendering/DummyRenderer';
 import { RenderingStyle } from './rendering/AbstractRenderer';
 
+const createEditor = () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+
 describe('EditorImage', () => {
 	const testStroke = new Stroke([
 		{
@@ -29,7 +31,7 @@ describe('EditorImage', () => {
 	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
 
 	it('elements added to the image should be findable', () => {
-		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const editor = createEditor();
 		const image = editor.image;
 
 		// We haven't activated the command, so testStroke's parent should be null.
@@ -39,7 +41,7 @@ describe('EditorImage', () => {
 	});
 
 	it('should render an element added to the image', () => {
-		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const editor = createEditor();
 		const renderer = editor.display.getDryInkRenderer();
 		if (!(renderer instanceof DummyRenderer)) {
 			throw new Error('Wrong display type!');
@@ -56,7 +58,7 @@ describe('EditorImage', () => {
 	});
 
 	it('should have a 1-deep tree if two non-overlapping strokes are added', () => {
-		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const editor = createEditor();
 		const image = editor.image;
 
 		const leftmostStroke = new Stroke([

package/src/EditorImage.ts

@@ -107,6 +107,8 @@ export class ImageNode {
 	private bbox: Rect2;
 	private children: ImageNode[];
 	private targetChildCount: number = 30;
+	private minZIndex: number|null;
+	private maxZIndex: number|null;
 
 	public constructor(
 		private parent: ImageNode|null = null
@@ -114,6 +116,9 @@ export class ImageNode {
 		this.children = [];
 		this.bbox = Rect2.empty;
 		this.content = null;
+
+		this.minZIndex = null;
+		this.maxZIndex = null;
 	}
 
 	public getContent(): AbstractComponent|null {
@@ -130,7 +135,7 @@ export class ImageNode {
 		});
 	}
 
-	// / Returns a list of `ImageNode`s with content (and thus no children).
+	// Returns a list of `ImageNode`s with content (and thus no children).
 	public getLeavesInRegion(region: Rect2, minFractionOfRegion: number = 0): ImageNode[] {
 		const result: ImageNode[] = [];
 
@@ -228,16 +233,36 @@ export class ImageNode {
 	}
 
 	// Recomputes this' bounding box. If [bubbleUp], also recompute
-	// this' ancestors bounding boxes
+	// this' ancestors bounding boxes. This also re-computes this' bounding box
+	// in the z-direction (z-indicies).
 	public recomputeBBox(bubbleUp: boolean) {
 		const oldBBox = this.bbox;
 		if (this.content !== null) {
 			this.bbox = this.content.getBBox();
+			this.minZIndex = this.content.zIndex;
+			this.maxZIndex = this.content.zIndex;
 		} else {
 			this.bbox = Rect2.empty;
+			this.minZIndex = null;
+			this.maxZIndex = null;
+			let isFirst = true;
 
 			for (const child of this.children) {
-				this.bbox = this.bbox.union(child.getBBox());
+				if (isFirst) {
+					this.bbox = child.getBBox();
+					isFirst = false;
+				} else {
+					this.bbox = this.bbox.union(child.getBBox());
+				}
+
+				this.minZIndex ??= child.minZIndex;
+				this.maxZIndex ??= child.maxZIndex;
+				if (child.minZIndex !== null && this.minZIndex !== null) {
+					this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
+				}
+				if (child.maxZIndex !== null && this.maxZIndex !== null) {
+					this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
+				}
 			}
 		}
 
@@ -270,6 +295,9 @@ export class ImageNode {
 
 	// Remove this node and all of its children
 	public remove() {
+		this.minZIndex = null;
+		this.maxZIndex = null;
+
 		if (!this.parent) {
 			this.content = null;
 			this.children = [];

package/src/Pointer.ts

@@ -51,7 +51,7 @@ export default class Pointer {
 		}
 
 		const timeStamp = (new Date()).getTime();
-		const canvasPos = viewport.screenToCanvas(screenPos);
+		const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
 
 		return new Pointer(
 			screenPos,

package/src/Viewport.ts

@@ -5,7 +5,7 @@ import Mat33 from './geometry/Mat33';
 import Rect2 from './geometry/Rect2';
 import { Point2, Vec2 } from './geometry/Vec2';
 import Vec3 from './geometry/Vec3';
-import { StrokeDataPoint } from './StrokeBuilder';
+import { StrokeDataPoint } from './types';
 import { EditorEventType, EditorNotifier } from './types';
 
 // Returns the base type of some type of point/number

package/src/bundle/bundled.ts

@@ -0,0 +1,7 @@
+// Main entrypoint for Webpack when building a bundle for release.
+
+import '../styles';
+import Editor from '../Editor';
+
+export default Editor;
+export { Editor };

package/src/components/AbstractComponent.ts

@@ -23,7 +23,7 @@ export default abstract class AbstractComponent {
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}
-	public abstract render(canvas: AbstractRenderer, visibleRect: Rect2): void;
+	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 	public abstract intersects(lineSegment: LineSegment2): boolean;
 
 	// Private helper for transformBy: Apply the given transformation to all points of this.

package/src/components/Stroke.ts

@@ -50,11 +50,11 @@ export default class Stroke extends AbstractComponent {
 		return false;
 	}
 
-	public render(canvas: AbstractRenderer, visibleRect: Rect2): void {
+	public render(canvas: AbstractRenderer, visibleRect?: Rect2): void {
 		canvas.startObject(this.getBBox());
 		for (const part of this.parts) {
 			const bbox = part.bbox;
-			if (bbox.intersects(visibleRect)) {
+			if (!visibleRect || bbox.intersects(visibleRect)) {
 				canvas.drawPath(part);
 			}
 		}

package/src/components/UnknownSVGObject.ts

@@ -14,7 +14,7 @@ export default class UnknownSVGObject extends AbstractComponent {
 		this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
 	}
 
-	public render(canvas: AbstractRenderer, _visibleRect: Rect2): void {
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
 		if (!(canvas instanceof SVGRenderer)) {
 			// Don't draw unrenderable objects if we can't
 			return;

package/src/components/builders/ArrowBuilder.ts

@@ -0,0 +1,104 @@
+import { PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new ArrowBuilder(initialPoint);
+};
+
+export default class ArrowBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint) {
+		this.endPoint = startPoint;
+	}
+
+	private getLineWidth(): number {
+		return Math.max(this.endPoint.width, this.startPoint.width);
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const toEnd = endPoint.minus(startPoint).normalized();
+		const arrowLength = endPoint.minus(startPoint).length();
+
+		// Ensure that the arrow tip is smaller than the arrow.
+		const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
+		const startSize = this.startPoint.width / 2;
+		const endSize = this.endPoint.width / 2;
+
+		const arrowTipBase = endPoint.minus(toEnd.times(arrowTipSize));
+
+		// Scaled normal vectors.
+		const lineNormal = toEnd.orthog();
+		const scaledStartNormal = lineNormal.times(startSize);
+		const scaledBaseNormal = lineNormal.times(endSize);
+
+		const preview = new Stroke([
+			{
+				startPoint: arrowTipBase.minus(scaledBaseNormal),
+				commands: [
+					// Stem
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.minus(scaledStartNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.plus(scaledStartNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.plus(scaledBaseNormal),
+					},
+
+					// Head
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.plus(toEnd.times(endSize)),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.minus(scaledBaseNormal),
+					},
+				],
+				style: {
+					fill: this.startPoint.color,
+				}
+			}
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}

package/src/{StrokeBuilder.ts → components/builders/FreehandLineBuilder.ts}

@@ -1,22 +1,28 @@
-import Color4 from './Color4';
 import { Bezier } from 'bezier-js';
-import { RenderingStyle, RenderablePathSpec } from './rendering/AbstractRenderer';
-import { Point2, Vec2 } from './geometry/Vec2';
-import Rect2 from './geometry/Rect2';
-import { PathCommand, PathCommandType } from './geometry/Path';
-import LineSegment2 from './geometry/LineSegment2';
-import Stroke from './components/Stroke';
-import Viewport from './Viewport';
-
-export interface StrokeDataPoint {
-	pos: Point2;
-	width: number;
-	time: number;
-	color: Color4;
-}
+import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/AbstractRenderer';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Rect2 from '../../geometry/Rect2';
+import { PathCommand, PathCommandType } from '../../geometry/Path';
+import LineSegment2 from '../../geometry/LineSegment2';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
+	// less than ± 2 px from the curve.
+	const canvasTransform = viewport.screenToCanvasTransform;
+	const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
+	const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+
+	return new FreehandLineBuilder(
+		initialPoint, minSmoothingDist, maxSmoothingDist
+	);
+};
 
 // Handles stroke smoothing and creates Strokes from user/stylus input.
-export default class StrokeBuilder {
+export default class FreehandLineBuilder implements ComponentBuilder {
 	private segments: RenderablePathSpec[];
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
@@ -59,7 +65,7 @@ export default class StrokeBuilder {
 	}
 
 	// Get the segments that make up this' path. Can be called after calling build()
-	public preview(): RenderablePathSpec[] {
+	private getPreview(): RenderablePathSpec[] {
 		if (this.currentCurve && this.lastPoint) {
 			const currentPath = this.currentSegmentToPath();
 			return this.segments.concat(currentPath);
@@ -68,6 +74,12 @@ export default class StrokeBuilder {
 		return this.segments;
 	}
 
+	public preview(renderer: AbstractRenderer) {
+		for (const part of this.getPreview()) {
+			renderer.drawPath(part);
+		}
+	}
+
 	public build(): Stroke {
 		if (this.lastPoint) {
 			this.finalizeCurrentCurve();
@@ -231,7 +243,13 @@ export default class StrokeBuilder {
 			}
 			
 			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
-			if (this.lastPoint.pos.minus(newPoint.pos).magnitude() < threshold) {
+			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+				&& this.segments.length === 0;
+			
+			// Snap to the starting point if the stroke is contained within a small ball centered
+			// at the starting point.
+			// This allows us to create a circle/dot at the start of the stroke.
+			if (shouldSnapToInitial) {
 				return;
 			}
 

package/src/components/builders/LineBuilder.ts

@@ -0,0 +1,75 @@
+import { PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new LineBuilder(initialPoint);
+};
+
+export default class LineBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint) {
+		this.endPoint = startPoint;
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const toEnd = endPoint.minus(startPoint).normalized();
+
+		const startSize = this.startPoint.width / 2;
+		const endSize = this.endPoint.width / 2;
+
+		const lineNormal = toEnd.orthog();
+		const scaledStartNormal = lineNormal.times(startSize);
+		const scaledEndNormal = lineNormal.times(endSize);
+
+		const preview = new Stroke([
+			{
+				startPoint: startPoint.minus(scaledStartNormal),
+				commands: [
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.plus(scaledStartNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.plus(scaledEndNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.minus(scaledEndNormal),
+					},
+				],
+				style: {
+					fill: this.startPoint.color,
+				}
+			}
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}