js-draw 0.25.1 → 1.0.1

package/src/components/util/StrokeSmoother.ts

@@ -1,8 +1,5 @@
-import { Point2, Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/shapes/Rect2';
-import LineSegment2 from '../../math/shapes/LineSegment2';
+import { Point2, Vec2, Rect2, LineSegment2, QuadraticBezier } from '@js-draw/math';
 import { StrokeDataPoint } from '../../types';
-import QuadraticBezier from '../../math/shapes/QuadraticBezier';
 
 export interface Curve {
 	startPoint: Vec2;
@@ -153,8 +150,11 @@ export class StrokeSmoother {
 				return;
 			}
 
-			const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
-			this.momentum = this.momentum.lerp(velocity, 0.9);
+			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;
@@ -201,7 +201,7 @@ export class StrokeSmoother {
 		let exitingVec = this.computeExitingVec();
 
 		// Find the intersection between the entering vector and the exiting vector
-		const maxRelativeLength = 2;
+		const maxRelativeLength = 2.4;
 		const segmentStart = this.buffer[0];
 		const segmentEnd = newPoint.pos;
 		const startEndDist = segmentEnd.minus(segmentStart).magnitude();

package/src/dialogs/dialogs.scss

@@ -0,0 +1,36 @@
+
+@use './makeAboutDialog.scss';
+
+.dialog-container {
+	background-color: var( --background-color-transparent);
+
+	backdrop-filter: blur(5px);
+	-webkit-backdrop-filter: blur(5px);
+
+	// Show above other items
+	position: absolute;
+	z-index: 3;
+
+	// Fill the editor
+	width: var(--editor-current-width-px);
+	height: var(--editor-current-height-px);
+
+	display: flex;
+	flex-direction: column-reverse;
+	align-items: center;
+	justify-content: center;
+
+	dialog {
+		background-color: var(--background-color-1);
+		color: var(--foreground-color-1);
+		border: none;
+		outline: none;
+	
+		box-shadow: 0 0 2px var(--shadow-color);
+		border-radius: 8px;
+
+		max-height: 90vh;
+		width: min(100%, 500px);
+		box-sizing: border-box;
+	}
+}

package/src/dialogs/makeAboutDialog.scss

@@ -0,0 +1,41 @@
+
+.about-dialog-container dialog {
+	display: flex;
+	flex-direction: column;
+
+	.close-button {
+		// Center the close button
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.about-entry-container {
+		flex-grow: 1;
+		flex-shrink: 1;
+		overflow-y: auto;
+
+		margin-left: 20px;
+		margin-right: 20px;
+
+		padding-bottom: 20px;
+
+		white-space: pre-wrap;
+		font-family: monospace;
+
+		& > h2, & > details > summary {
+			cursor: pointer;
+			margin-top: 15px;
+
+			font-size: 1.2em;
+			font-weight: bold;
+
+			a {
+				color: var(--foreground-color-1);
+				text-decoration: underline;
+			}
+		}
+	}
+
+
+}

package/src/dialogs/makeAboutDialog.ts

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,143 @@
+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

@@ -3,8 +3,8 @@
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
  * @example
- * ```
- * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```ts,runnable
+ * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
@@ -14,8 +14,11 @@
  * (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>
@@ -24,13 +27,19 @@
  *       </svg>
  *   `);
  *
- *   toolbar.addActionButton({
- *      label: 'Save',
- *      icon: editor.icons.makeSaveIcon(),
- *   }, () => {
- *       const saveData = editor.toSVG().outerHTML;
+ *   // 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
+ *   });
  *
- *       // Do something with saveData
+ *   toolbar.addExitButton(() => {
+ *     // Save/confirm exiting here?
+ *     editor.remove();
  *   });
  * })();
  * ```
@@ -38,7 +47,7 @@
  * @see
  * {@link Editor}
  * {@link Editor.loadFromSVG}
- * {@link HTMLToolbar.addActionButton }
+ * {@link AbstractToolbar.addActionButton }
  *
  * @packageDocumentation
  */
@@ -46,13 +55,13 @@
 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 Color4 } from './Color4';
 export { default as SVGLoader } from './SVGLoader';
 export { default as Viewport } from './Viewport';
-export * from './math/lib';
+export * from '@js-draw/math';
 export * from './components/lib';
 export * from './commands/lib';
 export * from './tools/lib';
@@ -62,8 +71,21 @@ export * from './testing/lib';
 export * from './shortcuts/lib';
 export { default as EventDispatcher } from './EventDispatcher';
 export { default as Pointer, PointerDevice } from './Pointer';
-export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 export { default as UndoRedoHistory } from './UndoRedoHistory';
 
-export { Editor, EditorSettings };
+// @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/localizations/de.ts

@@ -37,7 +37,7 @@ const localization: EditorLocalization = {
 	touchPanning: 'Ansicht mit Touchscreen verschieben',
 	anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
 
-	selectPenType: 'Objekt-Typ: ',
+	selectPenTip: 'Objekt-Typ: ',
 	roundedTipPen: 'Freihand',
 	flatTipPen: 'Stift (druckempfindlich)',
 	arrowPen: 'Pfeil',
@@ -73,7 +73,7 @@ const localization: EditorLocalization = {
 	pasteHandler: 'Copy-Paste-Handler',
 	findLabel: 'Finde',
 	toNextMatch: 'Nächstes',
-	closeFindDialog: 'Schließen',
+	closeDialog: 'Schließen',
 	findDialogShown: 'Finde-Dialog angezeigt',
 	findDialogHidden: 'Finde-Dialog versteckt',
 	focusedFoundText: (matchIdx, totalMatches) => `Sieh Treffer ${matchIdx} von ${totalMatches} an`,

package/src/localizations/es.ts

@@ -19,8 +19,8 @@ const localization: EditorLocalization = {
 	pen: 'Lapiz',
 	eraser: 'Borrador',
 	select: 'Selecciona',
-	thicknessLabel: 'Tamaño: ',
-	colorLabel: 'Color: ',
+	thicknessLabel: 'Tamaño',
+	colorLabel: 'Color',
 	doneLoading: 'El cargado terminó',
 	fontLabel: 'Fuente: ',
 	anyDevicePanning: 'Mover la pantalla con todo dispotivo',
@@ -31,7 +31,7 @@ const localization: EditorLocalization = {
 	linePen: 'Línea',
 	arrowPen: 'Flecha',
 	roundedTipPen: 'Lapiz Redondeado',
-	selectPenType: 'Forma de dibuja:',
+	selectPenTip: 'Forma de dibuja',
 	handTool: 'Mover',
 	zoom: 'Zoom',
 	resetView: 'Reiniciar vista',
@@ -66,8 +66,8 @@ const localization: EditorLocalization = {
 	toggleOverflow: 'Más',
 
 	documentProperties: 'Fondo',
-	imageWidthOption: 'Ancho: ',
-	imageHeightOption: 'Alto: ',
+	imageWidthOption: 'Ancho',
+	imageHeightOption: 'Alto',
 	backgroundColor: 'Color de fondo: '
 };
 

package/src/rendering/Display.ts

@@ -3,10 +3,9 @@ import CanvasRenderer from './renderers/CanvasRenderer';
 import { Editor } from '../Editor';
 import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
-import { Point2, Vec2 } from '../math/Vec2';
+import { Point2, Vec2, Color4 } from '@js-draw/math';
 import RenderingCache from './caching/RenderingCache';
 import TextOnlyRenderer from './renderers/TextOnlyRenderer';
-import Color4 from '../Color4';
 
 export enum RenderingMode {
 	DummyRenderer,

package/src/rendering/RenderablePathSpec.ts

@@ -0,0 +1,88 @@
+
+import { Mat33, Path, PathCommand, PathCommandType, Point2, Rect2 } from '@js-draw/math';
+import RenderingStyle from './RenderingStyle';
+
+interface RenderablePathSpec {
+	startPoint: Point2;
+	commands: PathCommand[];
+	style: RenderingStyle;
+	path?: Path;
+}
+
+
+
+export const pathFromRenderable = (renderable: RenderablePathSpec): Path => {
+	if (renderable.path) {
+		return renderable.path;
+	}
+
+	return new Path(renderable.startPoint, renderable.commands);
+};
+
+export const pathToRenderable = (path: Path, style: RenderingStyle): RenderablePathSpec => {
+	return {
+		startPoint: path.startPoint,
+		style,
+		commands: path.parts,
+		path,
+	};
+};
+
+
+/**
+ * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ */
+export const visualEquivalent = (renderablePath: RenderablePathSpec, visibleRect: Rect2): RenderablePathSpec => {
+	const path = pathFromRenderable(renderablePath);
+	const strokeWidth = renderablePath.style.stroke?.width ?? 0;
+	const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+
+	// Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+	const expandedRect = visibleRect.grownBy(strokeWidth)
+		.transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
+
+	// TODO: Handle simplifying very small paths.
+	if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+		return renderablePath;
+	}
+	const parts: PathCommand[] = [];
+	let startPoint = path.startPoint;
+
+	for (const part of path.parts) {
+		const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+		let endPoint;
+
+		if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+			endPoint = part.point;
+		} else {
+			endPoint = part.endPoint;
+		}
+
+		const intersectsVisible = partBBox.intersects(visibleRect);
+
+		if (intersectsVisible) {
+			// TODO: Can we trim parts of paths that intersect the visible rectangle?
+			parts.push(part);
+		} else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
+			// We're stroking (not filling) and the path doesn't intersect the bounding box.
+			// Don't draw it, but preserve the endpoints.
+			parts.push({
+				kind: PathCommandType.MoveTo,
+				point: endPoint,
+			});
+		}
+		else {
+			// Otherwise, we may be filling. Try to roughly preserve the filled region.
+			parts.push({
+				kind: PathCommandType.LineTo,
+				point: endPoint,
+			});
+		}
+
+		startPoint = endPoint;
+	}
+
+	return pathToRenderable(new Path(path.startPoint, parts), renderablePath.style);
+};
+
+export default RenderablePathSpec;

package/src/rendering/RenderingStyle.test.ts

@@ -1,5 +1,5 @@
 
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 import RenderingStyle, { styleFromJSON, stylesEqual, styleToJSON } from './RenderingStyle';
 
 

package/src/rendering/RenderingStyle.ts

@@ -1,4 +1,4 @@
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 
 interface RenderingStyle {
 	readonly fill: Color4;

package/src/rendering/caching/CacheRecord.test.ts

@@ -1,7 +1,6 @@
 /* @jest-environment jsdom */
 
-import Rect2 from '../../math/shapes/Rect2';
-import { Vec2 } from '../../math/Vec2';
+import { Rect2, Vec2 } from '@js-draw/math';
 import CacheRecord from './CacheRecord';
 import { createCache } from './testUtils';
 

package/src/rendering/caching/CacheRecord.ts

@@ -1,5 +1,4 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
+import { Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { BeforeDeallocCallback, CacheState } from './types';
 

package/src/rendering/caching/CacheRecordManager.ts

@@ -1,6 +1,6 @@
 import { BeforeDeallocCallback, CacheProps, CacheState } from './types';
 import CacheRecord from './CacheRecord';
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 
 const debugMode = false;
 

package/src/rendering/caching/RenderingCache.test.ts

@@ -3,15 +3,14 @@
 import DummyRenderer from '../renderers/DummyRenderer';
 import { createCache } from './testUtils';
 import Stroke from '../../components/Stroke';
-import Path from '../../math/shapes/Path';
-import Color4 from '../../Color4';
+import { Path, Mat33, Color4 } from '@js-draw/math';
 import EditorImage from '../../EditorImage';
 import Viewport from '../../Viewport';
-import Mat33 from '../../math/Mat33';
+import { pathToRenderable } from '../RenderablePathSpec';
 
 describe('RenderingCache', () => {
 	const testPath = Path.fromString('M0,0 l100,500 l-20,20 L-100,-100');
-	const testStroke = new Stroke([ testPath.toRenderable({ fill: Color4.purple }) ]);
+	const testStroke = new Stroke([ pathToRenderable(testPath, { fill: Color4.purple }) ]);
 
 	it('should create a root node large enough to contain the viewport', () => {
 		let lastRenderer: DummyRenderer|null = null;

package/src/rendering/caching/RenderingCache.ts

@@ -1,5 +1,5 @@
 import { ImageNode } from '../../EditorImage';
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import RenderingCacheNode from './RenderingCacheNode';

package/src/rendering/caching/RenderingCacheNode.ts

@@ -1,9 +1,8 @@
 
 // A cache record with sub-nodes.
 
-import Color4 from '../../Color4';
 import { ImageNode, sortLeavesByZIndex } from '../../EditorImage';
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2, Color4 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import CacheRecord from './CacheRecord';

package/src/rendering/caching/testUtils.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../math/Vec2';
+import { Vec2 } from '@js-draw/math';
 import DummyRenderer from '../renderers/DummyRenderer';
 import createEditor from '../../testing/createEditor';
 import AbstractRenderer from '../renderers/AbstractRenderer';