js-draw 1.0.1 → 1.0.2

package/src/components/util/StrokeSmoother.ts

@@ -1,302 +0,0 @@
-import { Point2, Vec2, Rect2, LineSegment2, QuadraticBezier } from '@js-draw/math';
-import { StrokeDataPoint } from '../../types';
-
-export interface Curve {
-	startPoint: Vec2;
-	startWidth: number;
-
-	controlPoint: Vec2;
-
-	endWidth: number;
-	endPoint: Vec2;
-}
-
-type OnCurveAddedCallback = (curve: Curve|null)=>void;
-
-// Handles stroke smoothing
-export class StrokeSmoother {
-	private isFirstSegment: boolean = true;
-
-	private buffer: Point2[];
-	private lastPoint: StrokeDataPoint;
-	private lastExitingVec: Vec2|null = null;
-	private currentCurve: QuadraticBezier|null = null;
-	private curveStartWidth: number;
-	private curveEndWidth: number;
-
-	// Stroke smoothing and tangent approximation
-	private momentum: Vec2;
-	private bbox: Rect2;
-
-	public constructor(
-		private startPoint: StrokeDataPoint,
-
-		// Maximum distance from the actual curve (irrespective of stroke width)
-		// for which a point is considered 'part of the curve'.
-		// Note that the maximum will be smaller if the stroke width is less than
-		// [maxFitAllowed].
-		private minFitAllowed: number,
-		private maxFitAllowed: number,
-
-		private onCurveAdded: OnCurveAddedCallback,
-	) {
-		this.lastPoint = this.startPoint;
-
-		this.buffer = [this.startPoint.pos];
-		this.momentum = Vec2.zero;
-		this.currentCurve = null;
-		this.curveStartWidth = startPoint.width;
-
-		this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
-	}
-
-	public getBBox(): Rect2 {
-		return this.bbox;
-	}
-
-	public preview(): Curve|null {
-		if (!this.currentCurve) {
-			return null;
-		}
-
-		return this.currentSegmentToPath();
-	}
-
-	// Returns the distance between the start, control, and end points of the curve.
-	private approxCurrentCurveLength() {
-		if (!this.currentCurve) {
-			return 0;
-		}
-		const startPt = this.currentCurve.p0;
-		const controlPt = this.currentCurve.p1;
-		const endPt = this.currentCurve.p2;
-		const toControlDist = startPt.minus(controlPt).length();
-		const toEndDist = endPt.minus(controlPt).length();
-		return toControlDist + toEndDist;
-	}
-
-	public finalizeCurrentCurve() {
-		// Case where no points have been added
-		if (!this.currentCurve) {
-			return;
-		}
-
-		this.onCurveAdded(this.currentSegmentToPath());
-
-		const lastPoint = this.buffer[this.buffer.length - 1];
-		this.lastExitingVec = this.currentCurve.p2.minus(this.currentCurve.p1);
-		console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
-
-		// Use the last two points to start a new curve (the last point isn't used
-		// in the current curve and we want connected curves to share end points)
-		this.buffer = [
-			this.buffer[this.buffer.length - 2], lastPoint,
-		];
-		this.currentCurve = null;
-
-		this.isFirstSegment = false;
-	}
-
-	// Returns [upper curve, connector, lower curve]
-	private currentSegmentToPath() {
-		if (this.currentCurve == null) {
-			throw new Error('Invalid State: currentCurve is null!');
-		}
-
-		const startVec = this.currentCurve.normal(0).normalized();
-
-		if (!isFinite(startVec.magnitude())) {
-			throw new Error(`startVec(${startVec}) is NaN or ∞`);
-		}
-
-		const startPt = this.currentCurve.at(0);
-		const endPt = this.currentCurve.at(1);
-		const controlPoint = this.currentCurve.p1;
-
-		return {
-			startPoint: startPt,
-			controlPoint,
-			endPoint: endPt,
-			startWidth: this.curveStartWidth,
-			endWidth: this.curveEndWidth,
-		};
-	}
-
-	// Compute the direction of the velocity at the end of this.buffer
-	private computeExitingVec(): Vec2 {
-		return this.momentum.normalized().times(this.lastPoint.width / 2);
-	}
-
-	public addPoint(newPoint: StrokeDataPoint) {
-		if (this.lastPoint) {
-			// Ignore points that are identical
-			const fuzzEq = 1e-10;
-			const deltaTime = newPoint.time - this.lastPoint.time;
-			if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
-				return;
-			} else if (isNaN(newPoint.pos.magnitude())) {
-				console.warn('Discarding NaN point.', newPoint);
-				return;
-			}
-
-			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
-			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
-				&& this.isFirstSegment;
-
-			// Snap to the starting point if the stroke is contained within a small ball centered
-			// at the starting point.
-			// This allows us to create a circle/dot at the start of the stroke.
-			if (shouldSnapToInitial) {
-				return;
-			}
-
-			const deltaTimeSeconds = deltaTime / 1000;
-			const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / deltaTimeSeconds);
-
-			// TODO: Do we need momentum smoothing? (this.momentum.lerp(velocity, 0.9);)
-			this.momentum = velocity;
-		}
-
-		const lastPoint = this.lastPoint ?? newPoint;
-		this.lastPoint = newPoint;
-
-		this.buffer.push(newPoint.pos);
-		const pointRadius = newPoint.width;
-		const prevEndWidth = this.curveEndWidth;
-		this.curveEndWidth = pointRadius;
-
-		// recompute bbox
-		this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
-
-		// If the last curve just ended or it's the first curve,
-		if (this.currentCurve === null) {
-			const p1 = lastPoint.pos;
-			const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
-			const p3 = newPoint.pos;
-
-			// Quadratic Bézier curve
-			this.currentCurve = new QuadraticBezier(p1, p2, p3);
-			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
-
-			if (this.isFirstSegment) {
-				// The start of a curve often lacks accurate pressure information. Update it.
-				this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
-			}
-			else {
-				this.curveStartWidth = prevEndWidth;
-			}
-		}
-
-		// If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
-		let enteringVec = this.lastExitingVec;
-		if (!enteringVec) {
-			let sampleIdx = Math.ceil(this.buffer.length / 2);
-			if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
-				sampleIdx = this.buffer.length - 1;
-			}
-
-			enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
-		}
-
-		let exitingVec = this.computeExitingVec();
-
-		// Find the intersection between the entering vector and the exiting vector
-		const maxRelativeLength = 2.4;
-		const segmentStart = this.buffer[0];
-		const segmentEnd = newPoint.pos;
-		const startEndDist = segmentEnd.minus(segmentStart).magnitude();
-		const maxControlPointDist = maxRelativeLength * startEndDist;
-
-		// Exit in cases where we would divide by zero
-		if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
-			return;
-		}
-
-		console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
-
-		enteringVec = enteringVec.normalized();
-		exitingVec = exitingVec.normalized();
-
-		console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
-
-		const lineFromStart = new LineSegment2(
-			segmentStart,
-			segmentStart.plus(enteringVec.times(maxControlPointDist))
-		);
-		const lineFromEnd = new LineSegment2(
-			segmentEnd.minus(exitingVec.times(maxControlPointDist)),
-			segmentEnd
-		);
-		const intersection = lineFromEnd.intersection(lineFromStart);
-
-		// Position the control point at this intersection
-		let controlPoint: Point2|null = null;
-		if (intersection) {
-			controlPoint = intersection.point;
-		}
-
-		// No intersection or the intersection is one of the end points?
-		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
-			// Position the control point closer to the first -- the connecting
-			// segment will be roughly a line.
-			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
-		}
-
-		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
-		console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
-
-		const prevCurve = this.currentCurve;
-		this.currentCurve = new QuadraticBezier(segmentStart, controlPoint, segmentEnd);
-
-		if (isNaN(this.currentCurve.normal(0).magnitude())) {
-			console.error('NaN normal at 0. Curve:', this.currentCurve);
-			this.currentCurve = prevCurve;
-		}
-
-		// Should we start making a new curve? Check whether all buffer points are within
-		// ±strokeWidth of the curve.
-		const curveMatchesPoints = (curve: QuadraticBezier): boolean => {
-			const minFit = Math.min(Math.max(
-				Math.min(this.curveStartWidth, this.curveEndWidth) / 4,
-				this.minFitAllowed
-			), this.maxFitAllowed);
-
-			// The sum of distances greater than minFit must not exceed this:
-			const maxNonMatchingDistSum = minFit;
-
-			// Sum of distances greater than minFit.
-			let nonMatchingDistSum = 0;
-
-			for (const point of this.buffer) {
-				let dist = curve.approximateDistance(point);
-
-				if (dist > minFit) {
-					// Use the more accurate distance function
-					dist = curve.distance(point);
-
-					nonMatchingDistSum += Math.max(0, dist - minFit);
-					if (nonMatchingDistSum > maxNonMatchingDistSum) {
-						return false; // false: Curve doesn't match points well enough.
-					}
-				}
-			}
-			return true;
-		};
-
-		if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth / 2) {
-			if (!curveMatchesPoints(this.currentCurve)) {
-				// Use a curve that better fits the points
-				this.currentCurve = prevCurve;
-				this.curveEndWidth = prevEndWidth;
-
-				// Reset the last point -- the current point was not added to the curve.
-				this.lastPoint = lastPoint;
-
-				this.finalizeCurrentCurve();
-				return;
-			}
-		}
-	}
-}
-
-export default StrokeSmoother;

package/src/components/util/describeComponentList.ts

@@ -1,18 +0,0 @@
-import AbstractComponent from '../AbstractComponent';
-import { ImageComponentLocalization } from '../localization';
-
-// Returns the description of all given elements, if identical, otherwise,
-// returns null.
-export default (localizationTable: ImageComponentLocalization, elems: AbstractComponent[]) => {
-	if (elems.length === 0) {
-		return null;
-	}
-
-	const description = elems[0].description(localizationTable);
-	for (const elem of elems) {
-		if (elem.description(localizationTable) !== description) {
-			return null;
-		}
-	}
-	return description;
-};

package/src/dialogs/makeAboutDialog.ts

@@ -1,82 +0,0 @@
-import type Editor from '../Editor';
-
-export interface AboutDialogLink {
-	kind: 'link',
-	text: string;
-	href: string;
-}
-
-export interface AboutDialogEntry {
-	heading: string|AboutDialogLink;
-	text?: string;
-	minimized?: boolean;
-}
-
-const makeAboutDialog = (editor: Editor, entries: AboutDialogEntry[]) => {
-	const overlay = document.createElement('div');
-	const { remove: removeOverlay } = editor.createHTMLOverlay(overlay);
-
-	overlay.classList.add('dialog-container', 'about-dialog-container');
-	const dialog = document.createElement('dialog');
-
-	const heading = document.createElement('h1');
-	heading.innerText = editor.localization.about;
-	heading.setAttribute('autofocus', 'true');
-
-	const closeButton = document.createElement('button');
-	closeButton.innerText = editor.localization.closeDialog;
-	closeButton.classList.add('close-button');
-
-	closeButton.onclick = () => removeOverlay();
-	overlay.onclick = event => {
-		if (event.target === overlay) {
-			removeOverlay();
-		}
-	};
-
-	const licenseContainer = document.createElement('div');
-	licenseContainer.classList.add('about-entry-container');
-
-	// Allow scrolling in the license container -- don't forward wheel events.
-	licenseContainer.onwheel = evt => evt.stopPropagation();
-
-	for (const entry of entries) {
-		const container = document.createElement(entry.minimized ? 'details' : 'div');
-		container.classList.add('about-entry');
-
-		const header = document.createElement(entry.minimized ? 'summary' : 'h2');
-
-		if (typeof (entry.heading) === 'string') {
-			header.innerText = entry.heading;
-		} else {
-			const link = document.createElement('a');
-			link.href = entry.heading.href.replace(/^javascript:/i, '');
-			link.text = entry.heading.text;
-			header.appendChild(link);
-		}
-
-		container.appendChild(header);
-
-		if (entry.text) {
-			const bodyText = document.createElement('div');
-			bodyText.innerText = entry.text;
-
-			container.appendChild(bodyText);
-		}
-
-		licenseContainer.appendChild(container);
-	}
-
-	dialog.replaceChildren(heading, licenseContainer, closeButton);
-	overlay.replaceChildren(dialog);
-
-	dialog.show();
-
-	return {
-		close: () => {
-			removeOverlay();
-		},
-	};
-};
-
-export default makeAboutDialog;

package/src/inputEvents.ts

@@ -1,143 +0,0 @@
-import Pointer from './Pointer';
-import { Point2, Vec3 } from '@js-draw/math';
-
-export type HTMLPointerEventName = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
-export type HTMLPointerEventFilter = (eventName: HTMLPointerEventName, event: PointerEvent)=>boolean;
-
-export interface PointerEvtListener {
-	onPointerDown(event: PointerEvt): boolean;
-	onPointerMove(event: PointerEvt): void;
-	onPointerUp(event: PointerEvt): void;
-
-	// Called if a pointer that has been captured by this listener (by returning
-	// `true` from `onPointerDown`) is re-captured by another listener.
-	//
-	// When called, this method should cancel any changes being made by the current
-	// gesture.
-	onGestureCancel(): void;
-}
-
-
-export enum InputEvtType {
-	PointerDownEvt,
-	PointerMoveEvt,
-	PointerUpEvt,
-	GestureCancelEvt,
-
-	WheelEvt,
-	KeyPressEvent,
-	KeyUpEvent,
-
-	CopyEvent,
-	PasteEvent,
-}
-
-// [delta.x] is horizontal scroll,
-// [delta.y] is vertical scroll,
-// [delta.z] is zoom scroll (ctrl+scroll or pinch zoom)
-export interface WheelEvt {
-	readonly kind: InputEvtType.WheelEvt;
-	readonly delta: Vec3;
-	readonly screenPos: Point2;
-}
-
-interface BaseKeyEvent {
-	// key, as given by an HTML `KeyboardEvent`
-	readonly key: string;
-	readonly code: string;
-
-	// If `ctrlKey` is undefined, that is equivalent to `ctrlKey = false`.
-	readonly ctrlKey: boolean|undefined;
-
-	// If falsey, the `alt` key is not pressed.
-	readonly altKey: boolean|undefined;
-
-	// If falsey, the `shift` key is not pressed.
-	readonly shiftKey: boolean|undefined;
-}
-
-/**
- * Represents a keydown or auto-repeated keydown event.
- *
- * Use {@link keyPressEventFromHTMLEvent} where possible rather than
- * constructing directly (required properties may change between minor
- * releases).
- */
-export interface KeyPressEvent extends BaseKeyEvent {
-	readonly kind: InputEvtType.KeyPressEvent;
-}
-
-/**
- * Represents a key release or auto-repeated key releae event.
- *
- * Use {@link keyUpEventFromHTMLEvent} where possible rather than
- * constructing directly (required properties may change between minor
- * releases).
- */
-export interface KeyUpEvent extends BaseKeyEvent {
-	readonly kind: InputEvtType.KeyUpEvent;
-}
-
-export interface CopyEvent {
-	readonly kind: InputEvtType.CopyEvent;
-	setData(mime: string, data: string): void;
-}
-
-export interface PasteEvent {
-	readonly kind: InputEvtType.PasteEvent;
-	readonly data: string;
-	readonly mime: string;
-}
-
-// Event triggered when pointer capture is taken by a different [PointerEvtListener].
-export interface GestureCancelEvt {
-	readonly kind: InputEvtType.GestureCancelEvt;
-}
-
-interface PointerEvtBase {
-	readonly current: Pointer;
-	readonly allPointers: Pointer[];
-}
-
-export interface PointerDownEvt extends PointerEvtBase {
-	readonly kind: InputEvtType.PointerDownEvt;
-}
-
-export interface PointerMoveEvt extends PointerEvtBase {
-	readonly kind: InputEvtType.PointerMoveEvt;
-}
-
-export interface PointerUpEvt extends PointerEvtBase {
-	readonly kind: InputEvtType.PointerUpEvt;
-}
-
-export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
-
-type KeyEventType = InputEvtType.KeyPressEvent|InputEvtType.KeyUpEvent;
-
-// Constructor
-const keyEventFromHTMLEvent = (kind: KeyEventType, event: KeyboardEvent): KeyPressEvent|KeyUpEvent => {
-	return {
-		kind,
-		key: event.key,
-		code: event.code,
-		ctrlKey: event.ctrlKey || event.metaKey,
-		altKey: event.altKey,
-		shiftKey: event.shiftKey,
-	};
-};
-
-export const keyUpEventFromHTMLEvent = (event: KeyboardEvent) => {
-	return keyEventFromHTMLEvent(InputEvtType.KeyUpEvent, event) as KeyUpEvent;
-};
-
-export const keyPressEventFromHTMLEvent = (event: KeyboardEvent) => {
-	return keyEventFromHTMLEvent(InputEvtType.KeyPressEvent, event) as KeyPressEvent;
-};
-
-export const isPointerEvt = (event: InputEvt): event is PointerEvt => {
-	return event.kind === InputEvtType.PointerDownEvt
-		|| event.kind === InputEvtType.PointerMoveEvt
-		|| event.kind === InputEvtType.PointerUpEvt;
-};

package/src/lib.ts

@@ -1,91 +0,0 @@
-/**
- * The main entrypoint for the NPM package. Everything exported by this file
- * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
- *
- * @example
- * ```ts,runnable
- * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
- *
- * // Apply js-draw CSS
- * import 'js-draw/styles';
- * // If your bundler doesn't support the above, try
- * // import 'js-draw/bundledStyles';
- *
- * (async () => {
- *   const editor = new Editor(document.body);
- *   const toolbar = editor.addToolbar();
- *
- *   // Increases the minimum height of the editor
- *   editor.getRootElement().style.height = '600px';
- *
- *   // Loads from SVG data
- *   await editor.loadFromSVG(`
- *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
- *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
- *       </svg>
- *   `);
- *
- *   // Adding tags to a toolbar button allows different styles to be applied.
- *   // Also see addActionButton.
- *   const buttonLabels = [ ToolbarWidgetTag.Save ];
- *
- *   toolbar.addSaveButton(() => {
- *     const saveData = editor.toSVG().outerHTML;
- *
- *     // Do something with saveData
- *   });
- *
- *   toolbar.addExitButton(() => {
- *     // Save/confirm exiting here?
- *     editor.remove();
- *   });
- * })();
- * ```
- *
- * @see
- * {@link Editor}
- * {@link Editor.loadFromSVG}
- * {@link AbstractToolbar.addActionButton }
- *
- * @packageDocumentation
- */
-
-import Editor, { EditorSettings } from './Editor';
-export { default as EditorImage } from './EditorImage';
-export * from './types';
-export * from './inputEvents';
-export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable';
-export * from './localization';
-
-export { default as SVGLoader } from './SVGLoader';
-export { default as Viewport } from './Viewport';
-export * from '@js-draw/math';
-export * from './components/lib';
-export * from './commands/lib';
-export * from './tools/lib';
-export * from './toolbar/lib';
-export * from './rendering/lib';
-export * from './testing/lib';
-export * from './shortcuts/lib';
-export { default as EventDispatcher } from './EventDispatcher';
-export { default as Pointer, PointerDevice } from './Pointer';
-export { default as UndoRedoHistory } from './UndoRedoHistory';
-
-// @internal
-export { default as __js_draw__version } from './version';
-
-import AbstractToolbar from './toolbar/AbstractToolbar';
-
-export {
-	Editor, EditorSettings, AbstractToolbar,
-
-	/**
-	 * Using the HTMLToolbar alias is deprecated. Use
-	 * `AbstractToolbar` instead.
-	 * @deprecated
-	 */
-	AbstractToolbar as HTMLToolbar,
-};
-export default Editor;

package/src/localization.ts

@@ -1,34 +0,0 @@
-import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
-import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
-import { defaultTextRendererLocalization, TextRendererLocalization } from './rendering/localization';
-import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
-import { defaultToolLocalization, ToolLocalization } from './tools/localization';
-
-
-export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
-	accessibilityInputInstructions: string;
-	undoAnnouncement: (actionDescription: string)=> string;
-	redoAnnouncement: (actionDescription: string)=> string;
-	doneLoading: string;
-	loading: (percentage: number)=>string;
-	imageEditor: string;
-}
-
-export const defaultEditorLocalization: EditorLocalization = {
-	...defaultToolbarLocalization,
-	...defaultToolLocalization,
-	...defaultCommandLocalization,
-	...defaultComponentLocalization,
-	...defaultTextRendererLocalization,
-	accessibilityInputInstructions: [
-		'Press "t" to read the contents of the viewport as text.',
-		'Use the arrow keys to move the viewport, click and drag to draw strokes.',
-		'Press "w" to zoom in and "s" to zoom out.',
-	].join(' '),
-	loading: (percentage: number) => `Loading ${percentage}%...`,
-	imageEditor: 'Image Editor',
-	doneLoading: 'Done loading',
-
-	undoAnnouncement: (commandDescription: string) => `Undid ${commandDescription}`,
-	redoAnnouncement: (commandDescription: string) => `Redid ${commandDescription}`,
-};