js-draw 0.4.1 → 0.6.0

package/src/components/Text.ts

@@ -14,8 +14,6 @@ export interface TextStyle {
 	renderingStyle: RenderingStyle;
 }
 
-type GetTextDimensCallback = (text: string, style: TextStyle) => Rect2;
-
 const componentTypeId = 'text';
 export default class Text extends AbstractComponent {
 	protected contentBBox: Rect2;
@@ -24,10 +22,6 @@ export default class Text extends AbstractComponent {
 		protected readonly textObjects: Array<string|Text>,
 		private transform: Mat33,
 		private readonly style: TextStyle,
-
-		// If not given, an HtmlCanvasElement is used to determine text boundaries.
-		// @internal
-		private readonly getTextDimens: GetTextDimensCallback = Text.getTextDimens,
 	) {
 		super(componentTypeId);
 		this.recomputeBBox();
@@ -47,9 +41,25 @@ export default class Text extends AbstractComponent {
 		ctx.textAlign = 'left';
 	}
 
-	private static textMeasuringCtx: CanvasRenderingContext2D;
+	private static textMeasuringCtx: CanvasRenderingContext2D|null = null;
+
+	// Roughly estimate the bounding box of `text`. Use if no CanvasRenderingContext2D is available.
+	private static estimateTextDimens(text: string, style: TextStyle): Rect2 {
+		const widthEst = text.length * style.size;
+		const heightEst = style.size;
+
+		// Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
+		// be above (0, 0).
+		return new Rect2(0, -heightEst * 2/3, widthEst, heightEst);
+	}
+
+	// Returns the bounding box of `text`. This is approximate if no Canvas is available.
 	private static getTextDimens(text: string, style: TextStyle): Rect2 {
-		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d')!;
+		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d') ?? null;
+		if (!Text.textMeasuringCtx) {
+			return this.estimateTextDimens(text, style);
+		}
+
 		const ctx = Text.textMeasuringCtx;
 		Text.applyTextStyles(ctx, style);
 
@@ -63,7 +73,7 @@ export default class Text extends AbstractComponent {
 
 	private computeBBoxOfPart(part: string|Text) {
 		if (typeof part === 'string') {
-			const textBBox = this.getTextDimens(part, this.style);
+			const textBBox = Text.getTextDimens(part, this.style);
 			return textBBox.transformedBoundingBox(this.transform);
 		} else {
 			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
@@ -178,7 +188,7 @@ export default class Text extends AbstractComponent {
 		};
 	}
 
-	public static deserializeFromString(json: any, getTextDimens: GetTextDimensCallback = Text.getTextDimens): Text {
+	public static deserializeFromString(json: any): Text {
 		const style: TextStyle = {
 			renderingStyle: styleFromJSON(json.style.renderingStyle),
 			size: json.style.size,
@@ -203,7 +213,7 @@ export default class Text extends AbstractComponent {
 		const transformData = json.transform as Mat33Array;
 		const transform = new Mat33(...transformData);
 
-		return new Text(textObjects, transform, style, getTextDimens);
+		return new Text(textObjects, transform, style);
 	}
 }
 

package/src/components/UnknownSVGObject.ts

@@ -37,6 +37,10 @@ export default class UnknownSVGObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	public isSelectable() {
+		return false;
+	}
+
 	protected createClone(): AbstractComponent {
 		return new UnknownSVGObject(this.svgObject.cloneNode(true) as SVGElement);
 	}

package/src/components/builders/FreehandLineBuilder.ts

@@ -415,8 +415,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 
 		let enteringVec = this.lastExitingVec;
 		if (!enteringVec) {
-			let sampleIdx = Math.ceil(this.buffer.length / 3);
-			if (sampleIdx === 0) {
+			let sampleIdx = Math.ceil(this.buffer.length / 2);
+			if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
 				sampleIdx = this.buffer.length - 1;
 			}
 
@@ -426,7 +426,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		let exitingVec = this.computeExitingVec();
 
 		// Find the intersection between the entering vector and the exiting vector
-		const maxRelativeLength = 3;
+		const maxRelativeLength = 2;
 		const segmentStart = this.buffer[0];
 		const segmentEnd = newPoint.pos;
 		const startEndDist = segmentEnd.minus(segmentStart).magnitude();

package/src/rendering/renderers/SVGRenderer.ts

@@ -88,7 +88,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	public drawPath(pathSpec: RenderablePathSpec) {
 		const style = pathSpec.style;
-		const path = Path.fromRenderable(pathSpec);
+		const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
 
 		// Try to extend the previous path, if possible
 		if (!style.fill.eq(this.lastPathStyle?.fill) || this.lastPathString.length === 0) {

package/src/testing/beforeEachFile.ts

@@ -1,3 +1,8 @@
 import loadExpectExtensions from './loadExpectExtensions';
 loadExpectExtensions();
-jest.useFakeTimers();
+jest.useFakeTimers();
+
+// jsdom doesn't support HTMLCanvasElement#getContext — it logs an error
+// to the console. Make it return null so we can handle a non-existent Canvas
+// at runtime (e.g. use something else, if available).
+HTMLCanvasElement.prototype.getContext = () => null;

package/src/toolbar/HTMLToolbar.ts

@@ -5,7 +5,6 @@ import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
-import { makeRedoIcon, makeUndoIcon } from './icons';
 import SelectionTool from '../tools/SelectionTool/SelectionTool';
 import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
@@ -156,13 +155,13 @@ export default class HTMLToolbar {
 
 		const undoButton = this.addActionButton({
 			label: this.localizationTable.undo,
-			icon: makeUndoIcon()
+			icon: this.editor.icons.makeUndoIcon()
 		}, () => {
 			this.editor.history.undo();
 		}, undoRedoGroup);
 		const redoButton = this.addActionButton({
 			label: this.localizationTable.redo,
-			icon: makeRedoIcon(),
+			icon: this.editor.icons.makeRedoIcon(),
 		}, () => {
 			this.editor.history.redo();
 		}, undoRedoGroup);

package/src/toolbar/IconProvider.ts

@@ -0,0 +1,476 @@
+import Color4 from '../Color4';
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
+import EventDispatcher from '../EventDispatcher';
+import { Vec2 } from '../math/Vec2';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import Pen from '../tools/Pen';
+import { StrokeDataPoint } from '../types';
+import Viewport from '../Viewport';
+
+
+
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const iconColorFill = `
+	style='fill: var(--icon-color);'
+`;
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-color);'
+`;
+const checkerboardPatternDef = `
+	<pattern
+		id='checkerboard'
+		viewBox='0,0,10,10'
+		width='20%'
+		height='20%'
+		patternUnits='userSpaceOnUse'
+	>
+		<rect x=0 y=0 width=10 height=10 fill='white'/>
+		<rect x=0 y=0 width=5 height=5 fill='gray'/>
+		<rect x=5 y=5 width=5 height=5 fill='gray'/>
+	</pattern>
+`;
+const checkerboardPatternRef = 'url(#checkerboard)';
+
+// Provides icons that can be used in the toolbar, etc.
+// Extend this class and override methods to customize icons.
+export default class IconProvider {
+	
+	public makeUndoIcon() {
+		return this.makeRedoIcon(true);
+	}
+
+	// @param mirror - reflect across the x-axis @internal
+	// @returns a redo icon.
+	public makeRedoIcon(mirror: boolean = false) {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		icon.innerHTML = `
+			<style>
+				.toolbar-svg-undo-redo-icon {
+					stroke: var(--icon-color);
+					stroke-width: 12;
+					stroke-linejoin: round;
+					stroke-linecap: round;
+					fill: none;
+	
+					transform-origin: center;
+				}
+			</style>
+			<path
+				d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
+				class='toolbar-svg-undo-redo-icon'
+				style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
+		`;
+		icon.setAttribute('viewBox', '0 0 100 100');
+		return icon;
+	}
+	
+	public makeDropdownIcon() {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		icon.innerHTML = `
+		<g>
+			<path
+				d='M5,10 L50,90 L95,10 Z'
+				${iconColorFill}
+			/>
+		</g>
+		`;
+		icon.setAttribute('viewBox', '0 0 100 100');
+		return icon;
+	}
+	
+	public makeEraserIcon() {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+	
+		// Draw an eraser-like shape
+		icon.innerHTML = `
+		<g>
+			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+			<rect
+				x=10 y=10 width=80 height=50
+				${iconColorFill}
+			/>
+		</g>
+		`;
+		icon.setAttribute('viewBox', '0 0 100 100');
+		return icon;
+	}
+	
+	public makeSelectionIcon() {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+	
+		// Draw a cursor-like shape
+		icon.innerHTML = `
+		<g>
+			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
+			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+		</g>
+		`;
+		icon.setAttribute('viewBox', '0 0 100 100');
+	
+		return icon;
+	}
+	
+	protected makeIconFromPath(
+		pathData: string,
+		fill: string = 'var(--icon-color)', 
+		strokeColor: string = 'none',
+		strokeWidth: string = '0px',
+	) {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		const path = document.createElementNS(svgNamespace, 'path');
+		path.setAttribute('d', pathData);
+		path.style.fill = fill;
+		path.style.stroke = strokeColor;
+		path.style.strokeWidth = strokeWidth;
+		icon.appendChild(path);
+		icon.setAttribute('viewBox', '0 0 100 100');
+	
+		return icon;
+	}
+	
+	public makeHandToolIcon() {
+		const fill = 'none';
+		const strokeColor = 'var(--icon-color)';
+		const strokeWidth = '3';
+	
+		// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+		return this.makeIconFromPath(`
+			m 10,60
+				5,30
+			H 90
+			V 30
+			C 90,20 75,20 75,30
+			V 60
+				20
+			C 75,10 60,10 60,20
+			V 60
+				15
+			C 60,5 45,5 45,15
+			V 60
+				25
+			C 45,15 30,15 30,25
+			V 60
+				75
+			L 25,60
+			C 20,45 10,50 10,60
+			Z
+		`, fill, strokeColor, strokeWidth);
+	}
+	
+	public makeTouchPanningIcon() {
+		const fill = 'none';
+		const strokeColor = 'var(--icon-color)';
+		const strokeWidth = '3';
+	
+		return this.makeIconFromPath(`
+			M 5,5.5
+			V 17.2
+			L 16.25,5.46
+			Z
+	
+			m 33.75,0
+			L 50,17
+			V 5.5
+			Z
+	
+			M 5,40.7
+			v 11.7
+			h 11.25
+			z
+	
+			M 26,19
+			C 19.8,19.4 17.65,30.4 21.9,34.8
+			L 50,70
+			H 27.5
+			c -11.25,0 -11.25,17.6 0,17.6
+			H 61.25
+			C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
+			L 33.1,23
+			C 30.3125,20.128192 27.9,19 25.830078,19.119756
+			Z
+		`, fill, strokeColor, strokeWidth);
+	}
+	
+	public makeAllDevicePanningIcon() {
+		const fill = 'none';
+		const strokeColor = 'var(--icon-color)';
+		const strokeWidth = '3';
+		return this.makeIconFromPath(`
+			M 5 5
+			L 5 17.5
+				17.5 5
+				5 5
+			z
+	
+			M 42.5 5
+			L 55 17.5
+				55 5
+				42.5 5
+			z
+	
+			M 70 10
+			L 70 21
+				61 15
+				55.5 23
+				66 30
+				56 37
+				61 45
+				70 39
+				70 50
+				80 50
+				80 39
+				89 45
+				95 36
+				84 30
+				95 23
+				89 15
+				80 21
+				80 10
+				70 10
+			z
+	
+			M 27.5 26.25
+			L 27.5 91.25
+			L 43.75 83.125
+			L 52 99
+			L 68 91
+			L 60 75
+			L 76.25 66.875
+			L 27.5 26.25
+			z
+	
+			M 5 42.5
+			L 5 55
+			L 17.5 55
+			L 5 42.5
+			z
+		`, fill, strokeColor, strokeWidth);
+	}
+	
+	public makeZoomIcon = () => {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		icon.setAttribute('viewBox', '0 0 100 100');
+	
+		const addTextNode = (text: string, x: number, y: number) => {
+			const textNode = document.createElementNS(svgNamespace, 'text');
+			textNode.appendChild(document.createTextNode(text));
+			textNode.setAttribute('x', x.toString());
+			textNode.setAttribute('y', y.toString());
+			textNode.style.textAlign = 'center';
+			textNode.style.textAnchor = 'middle';
+			textNode.style.fontSize = '55px';
+			textNode.style.fill = 'var(--icon-color)';
+			textNode.style.fontFamily = 'monospace';
+	
+			icon.appendChild(textNode);
+		};
+	
+		addTextNode('+', 40, 45);
+		addTextNode('-', 70, 75);
+	
+		return icon;
+	};
+	
+	public makeTextIcon(textStyle: TextStyle) {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		icon.setAttribute('viewBox', '0 0 100 100');
+	
+		const textNode = document.createElementNS(svgNamespace, 'text');
+		textNode.appendChild(document.createTextNode('T'));
+	
+		textNode.style.fontFamily = textStyle.fontFamily;
+		textNode.style.fontWeight = textStyle.fontWeight ?? '';
+		textNode.style.fontVariant = textStyle.fontVariant ?? '';
+		textNode.style.fill = textStyle.renderingStyle.fill.toHexString();
+	
+		textNode.style.textAnchor = 'middle';
+		textNode.setAttribute('x', '50');
+		textNode.setAttribute('y', '75');
+		textNode.style.fontSize = '65px';
+		textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
+	
+		icon.appendChild(textNode);
+	
+		return icon;
+	}
+	
+	public makePenIcon(tipThickness: number, color: string|Color4) {
+		if (color instanceof Color4) {
+			color = color.toHexString();
+		}
+	
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		icon.setAttribute('viewBox', '0 0 100 100');
+	
+		const halfThickness = tipThickness / 2;
+	
+		// Draw a pen-like shape
+		const primaryStrokeTipPath = `M14,63 L${50 - halfThickness},95 L${50 + halfThickness},90 L88,60 Z`;
+		const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
+		icon.innerHTML = `
+		<defs>
+			${checkerboardPatternDef}
+		</defs>
+		<g>
+			<!-- Pen grip -->
+			<path
+				d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
+				${iconColorStrokeFill}
+			/>
+		</g>
+		<g>
+			<!-- Checkerboard background for slightly transparent pens -->
+			<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
+	
+			<!-- Actual pen tip -->
+			<path
+				d='${primaryStrokeTipPath}'
+				fill='${color}'
+				stroke='${color}'
+			/>
+		</g>
+		`;
+		return icon;
+	}
+	
+	public makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory) {
+		const toolThickness = pen.getThickness();
+	
+		const nowTime = (new Date()).getTime();
+		const startPoint: StrokeDataPoint = {
+			pos: Vec2.of(10, 10),
+			width: toolThickness / 5,
+			color: pen.getColor(),
+			time: nowTime - 100,
+		};
+		const endPoint: StrokeDataPoint = {
+			pos: Vec2.of(90, 90),
+			width: toolThickness / 5,
+			color: pen.getColor(),
+			time: nowTime,
+		};
+	
+		const viewport = new Viewport(new EventDispatcher());
+		const builder = factory(startPoint, viewport);
+		builder.addPoint(endPoint);
+	
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		icon.setAttribute('viewBox', '0 0 100 100');
+		viewport.updateScreenSize(Vec2.of(100, 100));
+	
+		const renderer = new SVGRenderer(icon, viewport);
+		builder.preview(renderer);
+	
+		return icon;
+	}
+	
+	public makePipetteIcon(color?: Color4) {
+		const icon = document.createElementNS(svgNamespace, 'svg');
+		const pipette = document.createElementNS(svgNamespace, 'path');
+	
+		pipette.setAttribute('d', `
+			M 47,6
+			C 35,5 25,15 35,30
+			c -9.2,1.3 -15,0 -15,3
+				0,2 5,5 15,7
+			V 81
+			L 40,90
+			h 6
+			L 40,80
+			V 40
+			h 15
+			v 40
+			l -6,10
+			h 6
+			l 5,-9.2
+			V 40
+			C 70,38 75,35 75,33
+				75,30 69.2,31.2 60,30
+				65,15 65,5      47,6
+			Z
+		`);
+		pipette.style.fill = 'var(--icon-color)';
+	
+		if (color) {
+			const defs = document.createElementNS(svgNamespace, 'defs');
+			defs.innerHTML = checkerboardPatternDef;
+			icon.appendChild(defs);
+	
+			const fluidBackground = document.createElementNS(svgNamespace, 'path');
+			const fluid = document.createElementNS(svgNamespace, 'path');
+	
+			const fluidPathData = `
+				m 40,50 c 5,5 10,0 15,-5 V 80 L 50,90 H 45 L 40,80 Z
+			`;
+	
+			fluid.setAttribute('d', fluidPathData);
+			fluidBackground.setAttribute('d', fluidPathData);
+	
+			fluid.style.fill = color.toHexString();
+			fluidBackground.style.fill = checkerboardPatternRef;
+	
+			icon.appendChild(fluidBackground);
+			icon.appendChild(fluid);
+		}
+		icon.appendChild(pipette);
+	
+		icon.setAttribute('viewBox', '0 0 100 100');
+		return icon;
+	}
+	
+	public makeResizeViewportIcon() {
+		return this.makeIconFromPath(`
+			M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z
+			M 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z
+			M 84 15 82 17 81 16 81 20 85 20 84 19 86 17 84 15 z
+			M 26 24 24 26 26 28 25 29 29 29 29 25 28 26 26 24 z
+			M 25 71 26 72 24 74 26 76 28 74 29 75 29 71 25 71 z
+			M 15 75 15 85 25 85 25 80 20 80 20 75 15 75 z
+			M 90 75 90 90 75 90 75 95 95 95 95 75 90 75 z
+			M 81 81 81 85 82 84 84 86 86 84 84 82 85 81 81 81 z
+		`);
+	}
+	
+	public makeDuplicateSelectionIcon() {
+		return this.makeIconFromPath(`
+			M 45,10 45,55 90,55 90,10 45,10 z
+			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+		`);
+	}
+	
+	public makeDeleteSelectionIcon() {
+		const strokeWidth = '5px';
+		const strokeColor = 'var(--icon-color)';
+		const fillColor = 'none';
+	
+		return this.makeIconFromPath(`
+			M 10,10 90,90
+			M 10,90 90,10
+		`, fillColor, strokeColor, strokeWidth);
+	}
+
+	public makeSaveIcon() {
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		svg.innerHTML = `
+			<style>
+				.toolbar-save-icon {
+					stroke: var(--icon-color);
+					stroke-width: 10;
+					stroke-linejoin: round;
+					stroke-linecap: round;
+					fill: none;
+				}
+			</style>
+			<path
+				d='
+					M 15,55 30,70 85,20
+				'
+				class='toolbar-save-icon'
+			/>
+		`;
+		svg.setAttribute('viewBox', '0 0 100 100');
+		return svg;
+	}
+	
+}

package/src/toolbar/lib.ts

@@ -1,4 +1,4 @@
 
 export * from './widgets/lib';
-export * as icons from './icons';
 export * from './makeColorInput';
+export { default as IconProvider } from './IconProvider';

package/src/toolbar/localization.ts

@@ -2,7 +2,6 @@
 
 export interface ToolbarLocalization {
 	fontLabel: string;
-	anyDevicePanning: string;
 	touchPanning: string;
 	outlinedRectanglePen: string;
 	filledRectanglePen: string;
@@ -54,7 +53,6 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
 
 	touchPanning: 'Touchscreen panning',
-	anyDevicePanning: 'Any device panning',
 
 	freehandPen: 'Freehand',
 	arrowPen: 'Arrow',

package/src/toolbar/makeColorInput.ts

@@ -2,7 +2,6 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import PipetteTool from '../tools/PipetteTool';
 import { EditorEventType } from '../types';
-import { makePipetteIcon } from './icons';
 
 type OnColorChangeListener = (color: Color4)=>void;
 
@@ -72,7 +71,7 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 	pipetteButton.setAttribute('alt', pipetteButton.title);
 
 	const updatePipetteIcon = (color?: Color4) => {
-		pipetteButton.replaceChildren(makePipetteIcon(color));
+		pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
 	};
 	updatePipetteIcon();