js-draw 0.3.0 → 0.3.1

package/src/rendering/Display.ts

@@ -76,9 +76,9 @@ export default class Display {
 				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
 			},
 			blockResolution: cacheBlockResolution,
-			cacheSize: 600 * 600 * 4 * 120,
+			cacheSize: 600 * 600 * 4 * 90,
 			maxScale: 1.4,
-			minComponentsPerCache: 45,
+			minComponentsPerCache: 20,
 			minComponentsToUseCache: 105,
 		});
 

package/src/rendering/renderers/AbstractRenderer.ts

@@ -11,6 +11,7 @@ export interface RenderablePathSpec {
 	startPoint: Point2;
 	commands: PathCommand[];
 	style: RenderingStyle;
+	path?: Path;
 }
 
 export default abstract class AbstractRenderer {

package/src/rendering/renderers/SVGRenderer.ts

@@ -2,23 +2,19 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
 import Mat33 from '../../math/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { toRoundedString } from '../../math/rounding';
 import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
-	private currentPath: PathCommand[]|null;
-	private pathStart: Point2|null;
-
-	private lastPathStyle: RenderingStyle|null;
-	private lastPath: PathCommand[]|null;
-	private lastPathStart: Point2|null;
+	private lastPathStyle: RenderingStyle|null = null;
+	private lastPathString: string[] = [];
 	private objectElems: SVGElement[]|null = null;
 
 	private overwrittenAttrs: Record<string, string|null> = {};
@@ -58,46 +54,17 @@ export default class SVGRenderer extends AbstractRenderer {
 			}
 		}
 		this.overwrittenAttrs = {};
-	}
-
-	protected beginPath(startPoint: Point2) {
-		this.currentPath = [];
-		this.pathStart = this.canvasToScreen(startPoint);
-		this.lastPathStart ??= this.pathStart;
-	}
-
-	protected endPath(style: RenderingStyle) {
-		if (this.currentPath == null) {
-			throw new Error('No path exists to end! Make sure beginPath was called!');
-		}
-
-		// Try to extend the previous path, if possible
-		if (style.fill.eq(this.lastPathStyle?.fill) && this.lastPath != null) {
-			this.lastPath.push({
-				kind: PathCommandType.MoveTo,
-				point: this.pathStart!,
-			}, ...this.currentPath);
-			this.pathStart = null;
-			this.currentPath = null;
-		} else {
-			this.addPathToSVG();
-			this.lastPathStart = this.pathStart;
-			this.lastPathStyle = style;
-			this.lastPath = this.currentPath;
-
-			this.pathStart = null;
-			this.currentPath = null;
-		}
+		this.lastPathString = [];
 	}
 
 	// Push [this.fullPath] to the SVG
 	private addPathToSVG() {
-		if (!this.lastPathStyle || !this.lastPath) {
+		if (!this.lastPathStyle || this.lastPathString.length === 0) {
 			return;
 		}
 
 		const pathElem = document.createElementNS(svgNameSpace, 'path');
-		pathElem.setAttribute('d', Path.toString(this.lastPathStart!, this.lastPath));
+		pathElem.setAttribute('d', this.lastPathString.join(' '));
 
 		const style = this.lastPathStyle;
 		pathElem.setAttribute('fill', style.fill.toHexString());
@@ -111,6 +78,19 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(pathElem);
 	}
 
+	public drawPath(pathSpec: RenderablePathSpec) {
+		const style = pathSpec.style;
+		const path = Path.fromRenderable(pathSpec);
+
+		// Try to extend the previous path, if possible
+		if (!style.fill.eq(this.lastPathStyle?.fill) || this.lastPathString.length === 0) {
+			this.addPathToSVG();
+			this.lastPathStyle = style;
+			this.lastPathString = [];
+		}
+		this.lastPathString.push(path.toString());
+	}
+
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
 		transform = this.getCanvasToScreenTransform().rightMul(transform);
 
@@ -146,8 +126,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		super.startObject(boundingBox);
 
 		// Only accumulate a path within an object
-		this.lastPath = null;
-		this.lastPathStart = null;
+		this.lastPathString = [];
 		this.lastPathStyle = null;
 		this.objectElems = [];
 	}
@@ -179,49 +158,16 @@ export default class SVGRenderer extends AbstractRenderer {
 		}
 	}
 
-	protected lineTo(point: Point2) {
-		point = this.canvasToScreen(point);
-
-		this.currentPath!.push({
-			kind: PathCommandType.LineTo,
-			point,
-		});
-	}
-
-	protected moveTo(point: Point2) {
-		point = this.canvasToScreen(point);
-
-		this.currentPath!.push({
-			kind: PathCommandType.MoveTo,
-			point,
-		});
-	}
-
+	// Not implemented -- use drawPath instead.
+	private unimplementedMessage() { throw new Error('Not implemenented!'); }
+	protected beginPath(_startPoint: Point2) { this.unimplementedMessage(); }
+	protected endPath(_style: RenderingStyle) { this.unimplementedMessage(); }
+	protected lineTo(_point: Point2) { this.unimplementedMessage(); }
+	protected moveTo(_point: Point2) { this.unimplementedMessage(); }
 	protected traceCubicBezierCurve(
-		controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2
-	) {
-		controlPoint1 = this.canvasToScreen(controlPoint1);
-		controlPoint2 = this.canvasToScreen(controlPoint2);
-		endPoint = this.canvasToScreen(endPoint);
-
-		this.currentPath!.push({
-			kind: PathCommandType.CubicBezierTo,
-			controlPoint1,
-			controlPoint2,
-			endPoint,
-		});
-	}
-
-	protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2) {
-		controlPoint = this.canvasToScreen(controlPoint);
-		endPoint = this.canvasToScreen(endPoint);
-
-		this.currentPath!.push({
-			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint,
-			endPoint,
-		});
-	}
+		_controlPoint1: Point2, _controlPoint2: Point2, _endPoint: Point2
+	) { this.unimplementedMessage(); }
+	protected traceQuadraticBezierCurve(_controlPoint: Point2, _endPoint: Point2) { this.unimplementedMessage(); }
 
 	public drawPoints(...points: Point2[]) {
 		points.map(point => {

package/src/toolbar/HTMLToolbar.ts

@@ -17,7 +17,6 @@ import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
 import { EraserTool, PenTool } from '../tools/lib';
 
-
 export const toolbarCSSPrefix = 'toolbar-';
 
 type UpdateColorisCallback = ()=>void;
@@ -28,6 +27,7 @@ export default class HTMLToolbar {
 	private static colorisStarted: boolean = false;
 	private updateColoris: UpdateColorisCallback|null = null;
 
+	/** @internal */
 	public constructor(
 		private editor: Editor, parent: HTMLElement,
 		private localizationTable: ToolbarLocalization = defaultToolbarLocalization,

package/src/toolbar/types.ts

@@ -2,4 +2,4 @@
 export interface ActionButtonIcon {
 	icon: Element;
 	label: string;
-}
+}

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import { InputEvtType } from '../../types';
+import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
@@ -14,6 +14,7 @@ export default abstract class BaseWidget {
 	#hasDropdown: boolean;
 	private disabled: boolean = false;
 	private subWidgets: BaseWidget[] = [];
+	private toplevel: boolean = true;
 
 	public constructor(
 		protected editor: Editor,
@@ -46,6 +47,7 @@ export default abstract class BaseWidget {
 
 		for (const widget of this.subWidgets) {
 			widget.addTo(dropdown);
+			widget.setIsToplevel(false);
 		}
 		return true;
 	}
@@ -103,6 +105,7 @@ export default abstract class BaseWidget {
 	}
 
 	// Adds this to [parent]. This can only be called once for each ToolbarWidget.
+	// @internal
 	public addTo(parent: HTMLElement) {
 		this.label.innerText = this.getTitle();
 
@@ -119,6 +122,19 @@ export default abstract class BaseWidget {
 			this.dropdownIcon = this.createDropdownIcon();
 			this.button.appendChild(this.dropdownIcon);
 			this.container.appendChild(this.dropdownContainer);
+
+			this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+				if (
+					evt.kind === EditorEventType.ToolbarDropdownShown
+					&& evt.parentWidget !== this
+
+					// Don't hide if a submenu wash shown (it might be a submenu of
+					// the current menu).
+					&& evt.parentWidget.toplevel
+				) {
+					this.setDropdownVisible(false);
+				}
+			});
 		}
 
 		this.setDropdownVisible(false);
@@ -171,6 +187,11 @@ export default abstract class BaseWidget {
 			this.editor.announceForAccessibility(
 				this.localizationTable.dropdownShown(this.getTitle())
 			);
+
+			this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+				kind: EditorEventType.ToolbarDropdownShown,
+				parentWidget: this,
+			});
 		} else {
 			this.dropdownContainer.classList.add('hidden');
 			this.container.classList.remove('dropdownVisible');
@@ -195,6 +216,11 @@ export default abstract class BaseWidget {
 		}
 	}
 
+	/** Set whether the widget is contained within another. @internal */
+	protected setIsToplevel(toplevel: boolean) {
+		this.toplevel = toplevel;
+	}
+
 	protected isDropdownVisible(): boolean {
 		return !this.dropdownContainer.classList.contains('hidden');
 	}

package/src/tools/BaseTool.ts

@@ -56,5 +56,13 @@ export default abstract class BaseTool implements PointerEvtListener {
 
 		this.group = group;
 	}
+
+	public getToolGroup(): ToolEnabledGroup|null {
+		if (this.group) {
+			return this.group;
+		}
+
+		return null;
+	}
 }
 

package/src/tools/Pen.ts

@@ -3,7 +3,7 @@ import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Pointer, { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { EditorEventType, PointerEvt, StrokeDataPoint } from '../types';
+import { EditorEventType, KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 
@@ -159,4 +159,23 @@ export default class Pen extends BaseTool {
 	public getThickness() { return this.style.thickness; }
 	public getColor() { return this.style.color; }
 	public getStrokeFactory() { return this.builderFactory; }
+
+	public onKeyPress({ key }: KeyPressEvent): boolean {
+		key = key.toLowerCase();
+
+		let newThickness: number|undefined;
+		if (key === '-' || key === '_') {
+			newThickness = this.getThickness() * 2/3;
+		} else if (key === '+' || key === '=') {
+			newThickness = this.getThickness() * 3/2;
+		}
+
+		if (newThickness !== undefined) {
+			newThickness = Math.min(Math.max(1, newThickness), 128);
+			this.setThickness(newThickness);
+			return true;
+		}
+
+		return false;
+	}
 }

package/src/tools/ToolController.ts

@@ -11,6 +11,7 @@ import { ToolLocalization } from './localization';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
+import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 
 export default class ToolController {
 	private tools: BaseTool[];
@@ -26,9 +27,6 @@ export default class ToolController {
 		const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
 		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), { color: Color4.clay, thickness: 4 }),
@@ -36,6 +34,8 @@ export default class ToolController {
 			// Highlighter-like pen with width=64
 			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
 
+			new Eraser(editor, localization.eraserTool),
+			new SelectionTool(editor, localization.selectionTool),
 			new TextTool(editor, localization.textTool, localization),
 		];
 		this.tools = [
@@ -44,6 +44,7 @@ export default class ToolController {
 			...primaryTools,
 			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
+			new ToolSwitcherShortcut(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
 		panZoomTool.setEnabled(true);
@@ -81,6 +82,12 @@ export default class ToolController {
 		this.addTool(tool);
 	}
 
+	public getPrimaryTools(): BaseTool[] {
+		return this.tools.filter(tool => {
+			return tool.getToolGroup() === this.primaryToolGroup;
+		});
+	}
+
 	// Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
 	// This should be called before creating the app's toolbar.
 	public addTool(tool: BaseTool) {

package/src/tools/ToolSwitcherShortcut.ts

@@ -0,0 +1,34 @@
+// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
+// @packageDocumentation
+
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+// {@inheritDoc ToolSwitcherShortcut!}
+export default class ToolSwitcherShortcut extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.changeTool);
+	}
+	
+	public onKeyPress({ key }: KeyPressEvent): boolean {
+		const toolController = this.editor.toolController;
+		const primaryTools = toolController.getPrimaryTools();
+
+		// Map keys 0-9 to primary tools.
+		const keyMatch = /^[0-9]$/.exec(key);
+
+		let targetTool: BaseTool|undefined;
+		if (keyMatch) {
+			const targetIdx = parseInt(keyMatch[0], 10) - 1;
+			targetTool = primaryTools[targetIdx];
+		}
+
+		if (targetTool) {
+			targetTool.setEnabled(true);
+			return true;
+		}
+
+		return false;
+	}
+}

package/src/tools/lib.ts

@@ -8,6 +8,7 @@ export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';
 
 export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 
 export { default as PenTool, PenStyle } from './Pen';

package/src/tools/localization.ts

@@ -12,6 +12,7 @@ export interface ToolLocalization {
 
 	textTool: string;
 	enterTextToInsert: string;
+	changeTool: string;
 
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
@@ -30,6 +31,7 @@ export const defaultToolLocalization: ToolLocalization = {
 
 	textTool: 'Text',
 	enterTextToInsert: 'Text to insert',
+	changeTool: 'Change tool',
 
 	toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
 	toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,

package/src/types.ts

@@ -10,6 +10,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
+import { BaseWidget } from './lib';
 
 
 export interface PointerEvtListener {
@@ -88,6 +89,10 @@ export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataTyp
 
 
 
+
+
+
+
 export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,
@@ -103,6 +108,7 @@ export enum EditorEventType {
 
 	ColorPickerToggled,
 	ColorPickerColorSelected,
+	ToolbarDropdownShown,
 }
 
 type EditorToolEventType = EditorEventType.ToolEnabled
@@ -157,10 +163,16 @@ export interface ColorPickerColorSelected {
 	readonly color: Color4;
 }
 
+export interface ToolbarDropdownShownEvent {
+	readonly kind: EditorEventType.ToolbarDropdownShown;
+	readonly parentWidget: BaseWidget;
+}
+
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent
 	| EditorViewportChangedEvent | DisplayResizedEvent
 	| EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent
-	| ColorPickerToggled | ColorPickerColorSelected;
+	| ColorPickerToggled | ColorPickerColorSelected
+	| ToolbarDropdownShownEvent;
 
 
 // Returns a Promise to indicate that the event source should pause until the Promise resolves.