js-draw 0.0.2 → 0.0.5

package/src/toolbar/types.ts

@@ -2,19 +2,3 @@ export enum ToolbarButtonType {
 	ToggleButton,
 	ActionButton,
 }
-
-
-export interface ToolbarLocalization {
-	colorLabel: string;
-	pen: string;
-	eraser: string;
-	select: string;
-	touchDrawing: string;
-	thicknessLabel: string;
-	resizeImageToSelection: string;
-	undo: string;
-	redo: string;
-
-	dropdownShown: (toolName: string)=>string;
-	dropdownHidden: (toolName: string)=>string;
-}

package/src/tools/Pen.ts

@@ -1,49 +1,60 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import { Vec2 } from '../geometry/Vec2';
 import Pointer, { PointerDevice } from '../Pointer';
-import StrokeBuilder from '../StrokeBuilder';
-import { EditorEventType, PointerEvt } from '../types';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import { EditorEventType, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
+import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
+
+interface PenStyle {
+    color: Color4;
+    thickness: number;
+}
 
 export default class Pen extends BaseTool {
-	private builder: StrokeBuilder|null = null;
+	private builder: ComponentBuilder|null = null;
+	private builderFactory: ComponentBuilderFactory = makeFreehandLineBuilder;
+	private lastPoint: StrokeDataPoint|null = null;
+
 	public readonly kind: ToolType = ToolType.Pen;
 
 	public constructor(
 		private editor: Editor,
 		description: string,
-		private color: Color4 = Color4.purple,
-		private thickness: number = 16.0,
+		private style: PenStyle,
 	) {
 		super(editor.notifier, description);
 	}
 
 	private getPressureMultiplier() {
-		return 1 / this.editor.viewport.getScaleFactor() * this.thickness;
+		return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
 	}
 
-	private getStrokePoint(pointer: Pointer) {
+	private getStrokePoint(pointer: Pointer): StrokeDataPoint {
 		const minPressure = 0.3;
 		const pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
 		return {
 			pos: pointer.canvasPos,
 			width: pressure * this.getPressureMultiplier(),
-			color: this.color,
+			color: this.style.color,
 			time: pointer.timeStamp,
 		};
 	}
 
-	private addPointToStroke(pointer: Pointer) {
+	private previewStroke() {
+		this.editor.clearWetInk();
+		this.builder?.preview(this.editor.display.getWetInkRenderer());
+	}
+
+	private addPointToStroke(point: StrokeDataPoint) {
 		if (!this.builder) {
 			throw new Error('No stroke is currently being generated.');
 		}
-		this.builder.addPoint(this.getStrokePoint(pointer));
-
-		this.editor.clearWetInk();
-		this.editor.drawWetInk(...this.builder.preview());
+		this.builder.addPoint(point);
+		this.lastPoint = point;
+		this.previewStroke();
 	}
 
 	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
@@ -52,15 +63,7 @@ export default class Pen extends BaseTool {
 		}
 
 		if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
-			// 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 = this.editor.viewport.screenToCanvasTransform;
-			const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
-			const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
-
-			this.builder = new StrokeBuilder(
-				this.getStrokePoint(current), minSmoothingDist, maxSmoothingDist
-			);
+			this.builder = this.builderFactory(this.getStrokePoint(current), this.editor.viewport);
 			return true;
 		}
 
@@ -68,7 +71,7 @@ export default class Pen extends BaseTool {
 	}
 
 	public onPointerMove({ current }: PointerEvt): void {
-		this.addPointToStroke(current);
+		this.addPointToStroke(this.getStrokePoint(current));
 	}
 
 	public onPointerUp({ current }: PointerEvt): void {
@@ -76,12 +79,17 @@ export default class Pen extends BaseTool {
 			return;
 		}
 
-		this.addPointToStroke(current);
+		// onPointerUp events can have zero pressure. Use the last pressure instead.
+		const currentPoint = this.getStrokePoint(current);
+		const strokePoint = {
+			...currentPoint,
+			width: this.lastPoint?.width ?? currentPoint.width,
+		};
+
+		this.addPointToStroke(strokePoint);
 		if (this.builder && current.isPrimary) {
 			const stroke = this.builder.build();
-
-			this.editor.clearWetInk();
-			this.editor.drawWetInk(...this.builder.preview());
+			this.previewStroke();
 
 			const canFlatten = true;
 			const action = new EditorImage.AddElementCommand(stroke, canFlatten);
@@ -103,19 +111,33 @@ export default class Pen extends BaseTool {
 	}
 
 	public setColor(color: Color4): void {
-		if (color.toHexString() !== this.color.toHexString()) {
-			this.color = color;
+		if (color.toHexString() !== this.style.color.toHexString()) {
+			this.style = {
+				...this.style,
+				color,
+			};
 			this.noteUpdated();
 		}
 	}
 
 	public setThickness(thickness: number) {
-		if (thickness !== this.thickness) {
-			this.thickness = thickness;
+		if (thickness !== this.style.thickness) {
+			this.style = {
+				...this.style,
+				thickness,
+			};
+			this.noteUpdated();
+		}
+	}
+
+	public setStrokeFactory(factory: ComponentBuilderFactory) {
+		if (factory !== this.builderFactory) {
+			this.builderFactory = factory;
 			this.noteUpdated();
 		}
 	}
 
-	public getThickness() { return this.thickness; }
-	public getColor() { return this.color; }
+	public getThickness() { return this.style.thickness; }
+	public getColor() { return this.style.color; }
+	public getStrokeFactory() { return this.builderFactory; }
 }

package/src/tools/SelectionTool.test.ts

@@ -15,7 +15,7 @@ const getSelectionTool = (editor: Editor): SelectionTool => {
 	return editor.toolController.getMatchingTools(ToolType.Selection)[0] as SelectionTool;
 };
 
-const createEditor = () => new Editor(document.body, RenderingMode.DummyRenderer);
+const createEditor = () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
 
 const createSquareStroke = () => {
 	const testStroke = new Stroke([

package/src/tools/SelectionTool.ts

@@ -16,7 +16,7 @@ const styles = `
 	}
 
 	.handleOverlay > .selectionBox {
-		position: fixed;
+		position: absolute;
 		z-index: 0;
 		transform-origin: center;
 	}

package/src/tools/ToolController.ts

@@ -24,17 +24,17 @@ export default class ToolController {
 	public constructor(editor: Editor, localization: ToolLocalization) {
 		const primaryToolEnabledGroup = new ToolEnabledGroup();
 		const touchPanZoom = new PanZoom(editor, PanZoomMode.OneFingerGestures, localization.touchPanTool);
-		const primaryPenTool = new Pen(editor, localization.penTool(1));
+		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
 		const primaryTools = [
 			new SelectionTool(editor, localization.selectionTool),
 			new Eraser(editor, localization.eraserTool),
 
 			// Three pens
 			primaryPenTool,
-			new Pen(editor, localization.penTool(2), Color4.clay, 8),
+			new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
 
 			// Highlighter-like pen with width=64
-			new Pen(editor, localization.penTool(3), Color4.ofRGBA(1, 1, 0, 0.5), 64),
+			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
 		];
 		this.tools = [
 			touchPanZoom,

package/src/types.ts

@@ -8,6 +8,7 @@ import BaseTool from './tools/BaseTool';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import Pointer from './Pointer';
+import Color4 from './Color4';
 
 
 export interface PointerEvtListener {
@@ -74,6 +75,7 @@ export type InputEvt = KeyPressEvent | WheelEvt | GestureCancelEvt | PointerEvt;
 
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 
+
 export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,
@@ -82,6 +84,7 @@ export enum EditorEventType {
 	ObjectAdded,
 	ViewportChanged,
 	DisplayResized,
+	ColorPickerToggled,
 }
 
 type EditorToolEventType = EditorEventType.ToolEnabled
@@ -115,7 +118,12 @@ export interface EditorUndoStackUpdated {
 	readonly redoStackSize: number;
 }
 
-export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated;
+export interface ColorPickerToggled {
+	readonly kind: EditorEventType.ColorPickerToggled;
+	readonly open: boolean;
+}
+
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
 
 
 // Returns a Promise to indicate that the event source should pause until the Promise resolves.
@@ -131,3 +139,10 @@ export interface ImageLoader {
 		onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener
 	): Promise<Rect2>;
 }
+
+export interface StrokeDataPoint {
+	pos: Point2;
+	width: number;
+	time: number;
+	color: Color4;
+}