js-draw 0.0.3 → 0.0.4

package/src/toolbar/HTMLToolbar.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import { ToolType } from '../tools/ToolController';
-import { EditorEventType } from '../types';
+import { EditorEventType, StrokeDataPoint } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
@@ -9,6 +9,15 @@ import Eraser from '../tools/Eraser';
 import BaseTool from '../tools/BaseTool';
 import SelectionTool from '../tools/SelectionTool';
 import { ToolbarLocalization } from './types';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import { Vec2 } from '../geometry/Vec2';
+import SVGRenderer from '../rendering/SVGRenderer';
+import Viewport from '../Viewport';
+import EventDispatcher from '../EventDispatcher';
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
+import { makeLineBuilder } from '../components/builders/LineBuilder';
+import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 
 const primaryForegroundFill = `
 	style='fill: var(--primary-foreground-color);'
@@ -18,6 +27,8 @@ const primaryForegroundStrokeFill = `
 `;
 
 const toolbarCSSPrefix = 'toolbar-';
+const svgNamespace = 'http://www.w3.org/2000/svg';
+
 abstract class ToolbarWidget {
 	protected readonly container: HTMLElement;
 	private button: HTMLElement;
@@ -163,7 +174,7 @@ abstract class ToolbarWidget {
 	}
 
 	private createDropdownIcon(): Element {
-		const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.innerHTML = `
 		<g>
 			<path
@@ -183,9 +194,7 @@ class EraserWidget extends ToolbarWidget {
 		return this.localizationTable.eraser;
 	}
 	protected createIcon(): Element {
-		const icon = document.createElementNS(
-			'http://www.w3.org/2000/svg', 'svg'
-		);
+		const icon = document.createElementNS(svgNamespace, 'svg');
 
 		// Draw an eraser-like shape
 		icon.innerHTML = `
@@ -220,7 +229,7 @@ class SelectionWidget extends ToolbarWidget {
 	}
 
 	protected createIcon(): Element {
-		const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		const icon = document.createElementNS(svgNamespace, 'svg');
 
 		// Draw a cursor-like shape
 		icon.innerHTML = `
@@ -270,7 +279,7 @@ class TouchDrawingWidget extends ToolbarWidget {
 	}
 
 	protected createIcon(): Element {
-		const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		const icon = document.createElementNS(svgNamespace, 'svg');
 
 		// Draw a cursor-like shape
 		icon.innerHTML = `
@@ -307,7 +316,7 @@ class PenWidget extends ToolbarWidget {
 	private updateInputs: ()=> void = () => {};
 
 	public constructor(
-		editor: Editor, private tool: Pen, localization: ToolbarLocalization
+		editor: Editor, private tool: Pen, localization: ToolbarLocalization, private penTypes: PenTypeRecord[]
 	) {
 		super(editor, tool, localization);
 
@@ -328,13 +337,7 @@ class PenWidget extends ToolbarWidget {
 		return this.targetTool.description;
 	}
 
-	protected createIcon(): Element {
-		// We need to use createElementNS to embed an SVG element in HTML.
-		// See http://zhangwenli.com/blog/2017/07/26/createelementns/
-		const icon = document.createElementNS(
-			'http://www.w3.org/2000/svg', 'svg'
-		);
-
+	private makePenIcon(elem: SVGSVGElement) {
 		// Use a square-root scale to prevent the pen's tip from overflowing.
 		const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 2);
 		const color = this.tool.getColor();
@@ -342,7 +345,7 @@ class PenWidget extends ToolbarWidget {
 		// Draw a pen-like shape
 		const primaryStrokeTipPath = `M14,63 L${50 - scale},95 L${50 + scale},90 L88,60 Z`;
 		const backgroundStrokeTipPath = `M14,63 L${50 - scale},85 L${50 + scale},83 L88,60 Z`;
-		icon.innerHTML = `
+		elem.innerHTML = `
 		<defs>
 			<pattern
 				id='checkerboard'
@@ -375,8 +378,50 @@ class PenWidget extends ToolbarWidget {
 			/>
 		</g>
 		`;
+	}
+
+	// Draws an icon with the pen.
+	private makeDrawnIcon(icon: SVGSVGElement) {
+		const strokeFactory = this.tool.getStrokeFactory();
+
+		const toolThickness = this.tool.getThickness();
+
+		const nowTime = (new Date()).getTime();
+		const startPoint: StrokeDataPoint = {
+			pos: Vec2.of(10, 10),
+			width: toolThickness / 5,
+			color: this.tool.getColor(),
+			time: nowTime - 100,
+		};
+		const endPoint: StrokeDataPoint = {
+			pos: Vec2.of(90, 90),
+			width: toolThickness / 5,
+			color: this.tool.getColor(),
+			time: nowTime,
+		};
+
+		const builder = strokeFactory(startPoint, this.editor.viewport);
+		builder.addPoint(endPoint);
+
+		const viewport = new Viewport(new EventDispatcher());
+		viewport.updateScreenSize(Vec2.of(100, 100));
+		const renderer = new SVGRenderer(icon, viewport);
+		builder.preview(renderer);
+	}
+
+	protected createIcon(): Element {
+		// We need to use createElementNS to embed an SVG element in HTML.
+		// See http://zhangwenli.com/blog/2017/07/26/createelementns/
+		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.setAttribute('viewBox', '0 0 100 100');
 
+		const strokeFactory = this.tool.getStrokeFactory();
+		if (strokeFactory === makeFreehandLineBuilder) {
+			this.makePenIcon(icon);
+		} else {
+			this.makeDrawnIcon(icon);
+		}
+
 		return icon;
 	}
 
@@ -384,15 +429,23 @@ class PenWidget extends ToolbarWidget {
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
 
-		// Thickness: Value of the input is squared to allow for finer control/larger values.
 		const thicknessRow = document.createElement('div');
+		const objectTypeRow = document.createElement('div');
+
+		// Thickness: Value of the input is squared to allow for finer control/larger values.
 		const thicknessLabel = document.createElement('label');
 		const thicknessInput = document.createElement('input');
+		const objectSelectLabel = document.createElement('label');
+		const objectTypeSelect = document.createElement('select');
 
+		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
 		thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenWidget.idCounter++}`;
+		objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenWidget.idCounter++}`;
 
 		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
 		thicknessLabel.setAttribute('for', thicknessInput.id);
+		objectSelectLabel.innerText = this.localizationTable.selectObjectType;
+		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
 
 		thicknessInput.type = 'range';
 		thicknessInput.min = '1';
@@ -404,6 +457,18 @@ class PenWidget extends ToolbarWidget {
 		thicknessRow.appendChild(thicknessLabel);
 		thicknessRow.appendChild(thicknessInput);
 
+		objectTypeSelect.oninput = () => {
+			const penTypeIdx = parseInt(objectTypeSelect.value);
+			if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
+				console.error('Invalid pen type index', penTypeIdx);
+				return;
+			}
+
+			this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+		};
+		objectTypeRow.appendChild(objectSelectLabel);
+		objectTypeRow.appendChild(objectTypeSelect);
+
 		const colorRow = document.createElement('div');
 		const colorLabel = document.createElement('label');
 		const colorInput = document.createElement('input');
@@ -417,6 +482,18 @@ class PenWidget extends ToolbarWidget {
 		colorInput.oninput = () => {
 			this.tool.setColor(Color4.fromHex(colorInput.value));
 		};
+		colorInput.addEventListener('open', () => {
+			this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+				kind: EditorEventType.ColorPickerToggled,
+				open: true,
+			});
+		});
+		colorInput.addEventListener('close', () => {
+			this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+				kind: EditorEventType.ColorPickerToggled,
+				open: false,
+			});
+		});
 
 		colorRow.appendChild(colorLabel);
 		colorRow.appendChild(colorInput);
@@ -424,17 +501,37 @@ class PenWidget extends ToolbarWidget {
 		this.updateInputs = () => {
 			colorInput.value = this.tool.getColor().toHexString();
 			thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+
+			objectTypeSelect.replaceChildren();
+			for (let i = 0; i < this.penTypes.length; i ++) {
+				const penType = this.penTypes[i];
+				const option = document.createElement('option');
+				option.value = i.toString();
+				option.innerText = penType.name;
+
+				objectTypeSelect.appendChild(option);
+
+				if (penType.factory === this.tool.getStrokeFactory()) {
+					objectTypeSelect.value = i.toString();
+				}
+			}
 		};
 		this.updateInputs();
 
-		container.replaceChildren(colorRow, thicknessRow);
+		container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
 		dropdown.replaceChildren(container);
 		return true;
 	}
 }
 
+interface PenTypeRecord {
+	name: string;
+	factory: ComponentBuilderFactory;
+}
+
 export default class HTMLToolbar {
 	private container: HTMLElement;
+	private penTypes: PenTypeRecord[];
 
 	public static defaultLocalization: ToolbarLocalization = {
 		pen: 'Pen',
@@ -446,6 +543,13 @@ export default class HTMLToolbar {
 		resizeImageToSelection: 'Resize image to selection',
 		undo: 'Undo',
 		redo: 'Redo',
+		selectObjectType: 'Object type: ',
+
+		freehandPen: 'Freehand',
+		arrowPen: 'Arrow',
+		linePen: 'Line',
+		outlinedRectanglePen: 'Outlined rectangle',
+		filledRectanglePen: 'Filled rectangle',
 
 		dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 		dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
@@ -458,11 +562,41 @@ export default class HTMLToolbar {
 		this.container = document.createElement('div');
 		this.container.classList.add(`${toolbarCSSPrefix}root`);
 		this.container.setAttribute('role', 'toolbar');
-		this.addElements();
 		parent.appendChild(this.container);
 
-		// Initialize color choosers
 		colorisInit();
+		this.setupColorPickers();
+
+		// Default pen types
+		this.penTypes = [
+			{
+				name: localizationTable.freehandPen,
+				factory: makeFreehandLineBuilder,
+			},
+			{
+				name: localizationTable.arrowPen,
+				factory: makeArrowBuilder,
+			},
+			{
+				name: localizationTable.linePen,
+				factory: makeLineBuilder,
+			},
+			{
+				name: localizationTable.filledRectanglePen,
+				factory: makeFilledRectangleBuilder,
+			},
+			{
+				name: localizationTable.outlinedRectanglePen,
+				factory: makeOutlinedRectangleBuilder,
+			},
+		];
+	}
+
+	public setupColorPickers() {
+		const closePickerOverlay = document.createElement('div');
+		closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
+		this.editor.createHTMLOverlay(closePickerOverlay);
+
 		coloris({
 			el: '.coloris_input',
 			format: 'hex',
@@ -479,6 +613,16 @@ export default class HTMLToolbar {
 				Color4.white.toHexString(),
 			],
 		});
+
+		this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+			if (event.kind !== EditorEventType.ColorPickerToggled) {
+				return;
+			}
+
+			// Show/hide the overlay. Making the overlay visible gives users a surface to click
+			// on that shows/hides the color picker.
+			closePickerOverlay.style.display = event.open ? 'block' : 'none';
+		});
 	}
 
 	public addActionButton(text: string, command: ()=> void, parent?: Element) {
@@ -515,14 +659,16 @@ export default class HTMLToolbar {
 		});
 	}
 
-	private addElements() {
+	public addDefaultToolWidgets() {
 		const toolController = this.editor.toolController;
 		for (const tool of toolController.getMatchingTools(ToolType.Pen)) {
 			if (!(tool instanceof Pen)) {
 				throw new Error('All `Pen` tools must have kind === ToolType.Pen');
 			}
 
-			const widget = new PenWidget(this.editor, tool, this.localizationTable);
+			const widget = new PenWidget(
+				this.editor, tool, this.localizationTable, this.penTypes,
+			);
 			widget.addTo(this.container);
 		}
 
@@ -546,6 +692,10 @@ export default class HTMLToolbar {
 			(new TouchDrawingWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
 		}
 
+		this.setupColorPickers();
+	}
+
+	public addDefaultActionButtons() {
 		this.addUndoRedoButtons();
 	}
 }

package/src/toolbar/toolbar.css

@@ -100,6 +100,18 @@
     flex-direction: row;
 }
 
+.toolbar-closeColorPickerOverlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    background-color: var(--primary-background-color);
+    opacity: 0.3;
+}
+
 /* Make color selection buttons fill their containing label */
 .toolbar-dropdown .clr-field button {
     width: 100%;

package/src/toolbar/types.ts

@@ -5,6 +5,12 @@ export enum ToolbarButtonType {
 
 
 export interface ToolbarLocalization {
+	outlinedRectanglePen: string;
+	filledRectanglePen: string;
+	linePen: string;
+	arrowPen: string;
+	freehandPen: string;
+	selectObjectType: string;
 	colorLabel: string;
 	pen: string;
 	eraser: 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/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;
+}