js-draw 0.0.4 → 0.0.7

package/src/components/builders/FreehandLineBuilder.ts

@@ -183,7 +183,6 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 
 		// Approximate the normal at the location of the control point
 		let projectionT = this.currentCurve.project(controlPoint.xy).t;
-
 		if (!projectionT) {
 			if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
 				projectionT = 0.1;
@@ -192,11 +191,31 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			}
 		}
 
-		const halfVec = Vec2.ofXY(this.currentCurve.normal(projectionT))
+		const halfVecT = projectionT;
+		let halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
 			.normalized().times(
-				this.curveStartWidth / 2 * projectionT
-				+ this.curveEndWidth / 2 * (1 - projectionT)
+				this.curveStartWidth / 2 * halfVecT
+				+ this.curveEndWidth / 2 * (1 - halfVecT)
+			);
+
+		// Computes a boundary curve. [direction] should be either +1 or -1 (determines the side
+		// of the center curve to place the boundary).
+		const computeBoundaryCurve = (direction: number, halfVec: Vec2) => {
+			return new Bezier(
+				startPt.plus(startVec.times(direction)),
+				controlPoint.plus(halfVec.times(direction)),
+				endPt.plus(endVec.times(direction)),
 			);
+		};
+
+		const upperBoundary = computeBoundaryCurve(1, halfVec);
+		const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+
+		// If the boundaries have two intersections, increasing the half vector's length could fix this.
+		if (upperBoundary.intersects(lowerBoundary).length === 2) {
+			halfVec = halfVec.times(2);
+		}
+
 
 		const pathCommands: PathCommand[] = [
 			{

package/src/geometry/Path.fromString.test.ts

@@ -14,17 +14,13 @@ describe('Path.fromString', () => {
 		const path2 = Path.fromString('M 0 0');
 		const path3 = Path.fromString('M 1,1M 2,2 M 3,3');
 
-		expect(path1.parts[0]).toMatchObject({
-			kind: PathCommandType.MoveTo,
-			point: Vec2.zero,
-		});
-		expect(path2.parts).toMatchObject(path1.parts);
+		expect(path1.parts.length).toBe(0);
+		expect(path1.startPoint).toMatchObject(Vec2.zero);
+
+		expect(path2.parts.length).toBe(0);
+		expect(path2.startPoint).toMatchObject(Vec2.zero);
 
 		expect(path3.parts).toMatchObject([
-			{
-				kind: PathCommandType.MoveTo,
-				point: Vec2.of(1, 1),
-			},
 			{
 				kind: PathCommandType.MoveTo,
 				point: Vec2.of(2, 2),
@@ -44,27 +40,22 @@ describe('Path.fromString', () => {
 				kind: PathCommandType.MoveTo,
 				point: Vec2.of(1, 1),
 			},
-			{
-				kind: PathCommandType.MoveTo,
-				point: Vec2.of(1, 1),
-			},
 			{
 				kind: PathCommandType.MoveTo,
 				point: Vec2.of(4, 4),
 			},
 		]);
+		expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
 	});
 
 	it('should handle lineTo commands', () => {
 		const path = Path.fromString('l1,2L-1,0l0.1,-1.0');
+		// l is a relative lineTo, but because there
+		// is no previous command, it should act like an
+		// absolute moveTo.
+		expect(path.startPoint).toMatchObject(Vec2.of(1, 2));
+
 		expect(path.parts).toMatchObject([
-			{
-				kind: PathCommandType.LineTo,
-				// l is a relative lineTo, but because there
-				// is no previous command, it should act like an
-				// absolute moveTo.
-				point: Vec2.of(1, 2),
-			},
 			{
 				kind: PathCommandType.LineTo,
 				point: Vec2.of(-1, 0),
@@ -84,10 +75,6 @@ describe('Path.fromString', () => {
 		expect(path2.startPoint).toMatchObject(path1.startPoint);
 		expect(path1.parts).toMatchObject(path2.parts);
 		expect(path1.parts).toMatchObject([
-			{
-				kind: PathCommandType.MoveTo,
-				point: Vec2.of(3, 3),
-			},
 			{
 				kind: PathCommandType.LineTo,
 				point: Vec2.of(4, 5),

package/src/geometry/Path.ts

@@ -367,16 +367,28 @@ export default class Path {
 
 		let lastPos: Point2 = Vec2.zero;
 		let firstPos: Point2|null = null;
+		let isFirstCommand: boolean = true;
 		const commands: PathCommand[] = [];
 
 
 		const moveTo = (point: Point2) => {
+			// The first moveTo/lineTo is already handled by the [startPoint] parameter of the Path constructor.
+			if (isFirstCommand) {
+				isFirstCommand = false;
+				return;
+			}
+
 			commands.push({
 				kind: PathCommandType.MoveTo,
 				point,
 			});
 		};
 		const lineTo = (point: Point2) => {
+			if (isFirstCommand) {
+				isFirstCommand = false;
+				return;
+			}
+
 			commands.push({
 				kind: PathCommandType.LineTo,
 				point,
@@ -492,6 +504,7 @@ export default class Path {
 			if (args.length > 0) {
 				firstPos ??= args[0];
 			}
+			isFirstCommand = false;
 		}
 
 		return new Path(firstPos ?? Vec2.zero, commands);

package/src/localization.ts

@@ -1,7 +1,6 @@
 import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
-import HTMLToolbar from './toolbar/HTMLToolbar';
-import { ToolbarLocalization } from './toolbar/types';
+import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization, ToolLocalization } from './tools/localization';
 
 
@@ -14,7 +13,7 @@ export interface EditorLocalization extends ToolbarLocalization, ToolLocalizatio
 }
 
 export const defaultEditorLocalization: EditorLocalization = {
-	...HTMLToolbar.defaultLocalization,
+	...defaultToolbarLocalization,
 	...defaultToolLocalization,
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,

package/src/rendering/SVGRenderer.ts

@@ -15,12 +15,27 @@ export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStart: Point2|null;
 
 	private mainGroup: SVGGElement;
+	private overwrittenAttrs: Record<string, string|null> = {};
 
 	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
 		super(viewport);
 		this.clear();
 	}
 
+	// Sets an attribute on the root SVG element.
+	public setRootSVGAttribute(name: string, value: string|null) {
+		// Make the original value of the attribute restorable on clear
+		if (!(name in this.overwrittenAttrs)) {
+			this.overwrittenAttrs[name] = this.elem.getAttribute(name);
+		}
+
+		if (value !== null) {
+			this.elem.setAttribute(name, value);
+		} else {
+			this.elem.removeAttribute(name);
+		}
+	}
+
 	public displaySize(): Vec2 {
 		return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
 	}
@@ -28,6 +43,18 @@ export default class SVGRenderer extends AbstractRenderer {
 	public clear() {
 		this.mainGroup = document.createElementNS(svgNameSpace, 'g');
 
+		// Restore all alltributes
+		for (const attrName in this.overwrittenAttrs) {
+			const value = this.overwrittenAttrs[attrName];
+
+			if (value) {
+				this.elem.setAttribute(attrName, value);
+			} else {
+				this.elem.removeAttribute(attrName);
+			}
+		}
+		this.overwrittenAttrs = {};
+
 		// Remove all children
 		this.elem.replaceChildren(this.mainGroup);
 	}

package/src/toolbar/HTMLToolbar.ts

@@ -8,7 +8,6 @@ import Pen from '../tools/Pen';
 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';
@@ -18,6 +17,7 @@ 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';
+import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 
 const primaryForegroundFill = `
 	style='fill: var(--primary-foreground-color);'
@@ -533,31 +533,9 @@ export default class HTMLToolbar {
 	private container: HTMLElement;
 	private penTypes: PenTypeRecord[];
 
-	public static defaultLocalization: ToolbarLocalization = {
-		pen: 'Pen',
-		eraser: 'Eraser',
-		select: 'Select',
-		touchDrawing: 'Touch Drawing',
-		thicknessLabel: 'Thickness: ',
-		colorLabel: 'Color: ',
-		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`,
-	};
-
 	public constructor(
 		private editor: Editor, parent: HTMLElement,
-		private localizationTable: ToolbarLocalization = HTMLToolbar.defaultLocalization,
+		private localizationTable: ToolbarLocalization = defaultToolbarLocalization,
 	) {
 		this.container = document.createElement('div');
 		this.container.classList.add(`${toolbarCSSPrefix}root`);

package/src/toolbar/localization.ts

@@ -0,0 +1,44 @@
+
+
+export interface ToolbarLocalization {
+	outlinedRectanglePen: string;
+	filledRectanglePen: string;
+	linePen: string;
+	arrowPen: string;
+	freehandPen: string;
+	selectObjectType: string;
+	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;
+}
+
+export const defaultToolbarLocalization: ToolbarLocalization = {
+	pen: 'Pen',
+	eraser: 'Eraser',
+	select: 'Select',
+	touchDrawing: 'Touch Drawing',
+	thicknessLabel: 'Thickness: ',
+	colorLabel: 'Color: ',
+	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`,
+};

package/src/toolbar/types.ts

@@ -2,25 +2,3 @@ export enum ToolbarButtonType {
 	ToggleButton,
 	ActionButton,
 }
-
-
-export interface ToolbarLocalization {
-	outlinedRectanglePen: string;
-	filledRectanglePen: string;
-	linePen: string;
-	arrowPen: string;
-	freehandPen: string;
-	selectObjectType: string;
-	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/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;
 	}