js-draw 0.25.1 → 1.0.1

package/src/toolbar/widgets/components/makeThicknessSlider.ts

@@ -0,0 +1,62 @@
+import { toRoundedString } from '@js-draw/math';
+import { toolbarCSSPrefix } from '../../constants';
+import { ToolbarContext } from '../../types';
+
+let idCounter = 0;
+
+const makeThicknessSlider = (
+	context: ToolbarContext,
+	onChange: (value: number)=>void
+) => {
+	const container = document.createElement('div');
+
+	const thicknessLabel = document.createElement('label');
+	const thicknessInput = document.createElement('input');
+
+	container.classList.add(`${toolbarCSSPrefix}thicknessSliderContainer`);
+
+	// Give inputs IDs so we can label them with a <label for=...>Label text</label>
+	thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${idCounter++}`;
+
+	thicknessLabel.innerText = context.localization.thicknessLabel;
+	thicknessLabel.setAttribute('for', thicknessInput.id);
+
+	// Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+	const inverseThicknessInputFn = (t: number) => Math.log10(t);
+	const thicknessInputFn = (t: number) => 10**t;
+
+	thicknessInput.type = 'range';
+	thicknessInput.oninput = () => {
+		onChange(thicknessInputFn(parseFloat(thicknessInput.value)));
+	};
+	container.appendChild(thicknessLabel);
+	container.appendChild(thicknessInput);
+
+	const setBounds = (min: number, max: number) => {
+		const round = (value: number, roundUp: boolean) => {
+			const roundFn = roundUp ? Math.ceil : Math.floor;
+			return roundFn(value * 100) / 100;
+		};
+		const sliderMin = round(inverseThicknessInputFn(min), false);
+		const sliderMax = round(inverseThicknessInputFn(max), true);
+
+		thicknessInput.min = `${sliderMin}`;
+		thicknessInput.max = `${sliderMax}`;
+		thicknessInput.step = `${toRoundedString((sliderMax - sliderMin) / 20)}`;
+	};
+
+	setBounds(2, 262);
+
+	return {
+		container,
+		addTo: (parent: HTMLElement) => {
+			parent.appendChild(container);
+		},
+		setBounds,
+		setValue: (thickness: number) => {
+			thicknessInput.value = inverseThicknessInputFn(thickness).toString();
+		},
+	};
+};
+
+export default makeThicknessSlider;

package/src/toolbar/widgets/keybindings.ts

@@ -1,5 +1,3 @@
-
-
 import KeyboardShortcutManager from '../../shortcuts/KeyboardShortcutManager';
 
 // Selection
@@ -16,6 +14,6 @@ export const selectStrokeTypeKeyboardShortcutIds: string[] =
 for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
 	const id = selectStrokeTypeKeyboardShortcutIds[i];
 	KeyboardShortcutManager.registerDefaultKeyboardShortcut(
-		id, [ `ctrlOrMeta+${(i + 1)}` ], 'Select pen style ' + (i + 1),
+		id, [ `CtrlOrMeta+Digit${(i + 1)}` ], 'Select pen style ' + (i + 1),
 	);
 }

package/src/toolbar/widgets/layout/DropdownLayoutManager.ts

@@ -0,0 +1,262 @@
+import { EditorEventType, EditorNotifier } from '../../../types';
+import EventDispatcher, { DispatcherEventListener } from '../../../EventDispatcher';
+import { ToolbarLocalization } from '../../localization';
+import { ToolMenu, WidgetContentLayoutManager, ToolMenuParent } from './types';
+import { toolbarCSSPrefix } from '../../constants';
+import { MutableReactiveValue, ReactiveValue } from '../../../util/ReactiveValue';
+
+enum DropdownEventType {
+	DropdownShown,
+	DropdownHidden,
+}
+
+interface DropdownShownEvent {
+	// If undefined, the event is forwarded from a different layout manager
+	dropdown?: Dropdown;
+
+	fromToplevelDropdown: boolean;
+}
+
+type NotifierType = EventDispatcher<DropdownEventType, DropdownShownEvent>;
+
+class Dropdown implements ToolMenu {
+	private dropdownContainer: HTMLElement;
+	public readonly visible: MutableReactiveValue<boolean>;
+
+	private dropdownToggleListener: DispatcherEventListener|null = null;
+
+	public constructor(
+		public parent: ToolMenuParent,
+		private notifier: NotifierType,
+		private onDestroy: ()=>void,
+	) {
+		this.visible = ReactiveValue.fromInitialValue(false);
+
+		this.dropdownContainer = document.createElement('div');
+		this.dropdownContainer.classList.add(`${toolbarCSSPrefix}dropdown`);
+		this.dropdownContainer.classList.add('hidden');
+
+		parent.target.insertAdjacentElement('afterend', this.dropdownContainer);
+
+		// When another dropdown is shown,
+		this.dropdownToggleListener = this.notifier.on(DropdownEventType.DropdownShown, (evt) => {
+			if (
+				evt.dropdown !== this &&
+
+				// Don't hide if a submenu was shown (it might be a submenu of
+				// the current menu).
+				evt.fromToplevelDropdown
+			) {
+				this.setVisible(false);
+			}
+		});
+	}
+
+	public onActivated(): void {
+		// Do nothing.
+	}
+
+	protected repositionDropdown() {
+		const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
+		const screenWidth = document.scrollingElement?.clientWidth ?? document.body.clientHeight;
+		const screenHeight = document.scrollingElement?.clientHeight ?? document.body.clientHeight;
+
+		let translateX = undefined;
+		let translateY = undefined;
+
+		if (dropdownBBox.left > screenWidth / 2) {
+			const targetElem = this.parent.target;
+			translateX = `calc(${targetElem.clientWidth + 'px'} - 100%)`;
+		}
+
+		// Shift the dropdown if it's off the screen, but only if doing so moves it on to the screen
+		// (prevents dropdowns from going almost completely offscreen on small screens).
+		if (dropdownBBox.bottom > screenHeight && (dropdownBBox.top - dropdownBBox.height > 0)) {
+			const targetElem = this.parent.target;
+			translateY = `calc(-${targetElem.clientHeight}px - 100%)`;
+		}
+
+		// Use .translate so as not to conflict with CSS animating the
+		// transform property.
+		if (translateX || translateY) {
+			this.dropdownContainer.style.translate = `${translateX ?? '0'} ${translateY ?? '0'}`;
+		} else {
+			this.dropdownContainer.style.translate = '';
+		}
+	}
+
+	private hideDropdownTimeout: any|null = null;
+	private setVisible(visible: boolean) {
+		const currentlyVisible = this.visible.get();
+		if (currentlyVisible === visible) {
+			return;
+		}
+
+		// If waiting to hide the dropdown, cancel it.
+		if (this.hideDropdownTimeout) {
+			clearTimeout(this.hideDropdownTimeout);
+			this.hideDropdownTimeout = null;
+			this.dropdownContainer.classList.remove('hiding');
+			this.repositionDropdown();
+		}
+
+
+		const animationDuration = 150; // ms
+
+		this.visible.set(visible);
+		if (visible) {
+			this.dropdownContainer.classList.remove('hidden');
+
+			this.notifier.dispatch(DropdownEventType.DropdownShown, {
+				dropdown: this,
+				fromToplevelDropdown: this.parent.isToplevel(),
+			});
+
+			this.repositionDropdown();
+		} else {
+			this.notifier.dispatch(DropdownEventType.DropdownHidden, {
+				dropdown: this,
+				fromToplevelDropdown: this.parent.isToplevel(),
+			});
+
+			this.dropdownContainer.classList.add('hiding');
+
+			// Hide the dropdown *slightly* before the animation finishes. This
+			// prevents flickering in some browsers.
+			const hideDelay = animationDuration * 0.95;
+
+			this.hideDropdownTimeout = setTimeout(() => {
+				this.dropdownContainer.classList.add('hidden');
+				this.dropdownContainer.classList.remove('hiding');
+				this.repositionDropdown();
+			}, hideDelay);
+		}
+
+		// Animate
+		const animationName = `var(--dropdown-${
+			visible ? 'show' : 'hide'
+		}-animation)`;
+		this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
+	}
+
+	public requestShow(): void {
+		this.setVisible(true);
+	}
+
+	public requestHide(): void {
+		this.setVisible(false);
+	}
+
+	public appendChild(item: HTMLElement): void {
+		this.dropdownContainer.appendChild(item);
+	}
+
+	public clearChildren(): void {
+		this.dropdownContainer.replaceChildren();
+	}
+
+	public destroy(): void {
+		this.setVisible(false);
+		this.dropdownContainer.remove();
+		this.dropdownToggleListener?.remove();
+
+		// Allow children to be added to other parents
+		this.clearChildren();
+		this.onDestroy();
+	}
+}
+
+export default class DropdownLayoutManager implements WidgetContentLayoutManager {
+	private notifier: NotifierType;
+	private dropdowns: Set<Dropdown> = new Set();
+
+	public constructor(
+		announceForAccessibility: (text: string)=>void,
+		private localization: ToolbarLocalization,
+	) {
+		this.notifier = new EventDispatcher();
+		this.notifier.on(DropdownEventType.DropdownShown, ({ dropdown, fromToplevelDropdown }) => {
+			if (!dropdown) return;
+
+			announceForAccessibility(
+				this.localization.dropdownShown(dropdown.parent.getTitle())
+			);
+
+			// Share the event with other connected notifiers
+			this.connectedNotifiers.forEach(notifier => {
+				notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+					kind: EditorEventType.ToolbarDropdownShown,
+					fromToplevelDropdown,
+					layoutManager: this,
+				});
+			});
+		});
+
+		this.notifier.on(DropdownEventType.DropdownHidden, ({ dropdown }) => {
+			if (!dropdown) return;
+
+			announceForAccessibility(
+				this.localization.dropdownHidden(dropdown.parent.getTitle())
+			);
+		});
+	}
+
+	private listeners: DispatcherEventListener[] = [];
+	private connectedNotifiers: EditorNotifier[] = [];
+	public connectToEditorNotifier(notifier: EditorNotifier) {
+		this.connectedNotifiers.push(notifier);
+		this.refreshListeners();
+	}
+
+	/** Creates a dropdown within `parent`. */
+	public createToolMenu(parent: ToolMenuParent): ToolMenu {
+		const dropdown = new Dropdown(
+			parent,
+			this.notifier,
+			() => {
+				this.dropdowns.delete(dropdown);
+
+				this.refreshListeners();
+			}
+		);
+		this.dropdowns.add(dropdown);
+		this.refreshListeners();
+
+		return dropdown;
+	}
+
+	/**
+	 * Adds/removes listeners based on whether we have any managed dropdowns.
+	 *
+	 * We attempt to clean up all resources when `dropdowns.size == 0`, at which
+	 * point, an instance of this could be safely garbage collected.
+	 */
+	private refreshListeners() {
+		const clearListeners = () => {
+			// Remove all listeners & resources that won't be garbage collected.
+			this.listeners.forEach(l => l.remove());
+			this.listeners = [];
+		};
+
+		if (this.dropdowns.size === 0) {
+			clearListeners();
+		} else if (this.listeners.length !== this.connectedNotifiers.length) {
+			clearListeners();
+
+			this.listeners = this.connectedNotifiers.map(notifier => {
+				return notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+					if (evt.kind !== EditorEventType.ToolbarDropdownShown
+
+						// Don't forward to ourselves events that we originally triggered.
+						|| evt.layoutManager === this) {
+						return;
+					}
+
+					this.notifier.dispatch(DropdownEventType.DropdownShown, {
+						fromToplevelDropdown: evt.fromToplevelDropdown,
+					});
+				});
+			});
+		}
+	}
+}

package/src/toolbar/widgets/layout/EdgeToolbarLayoutManager.ts

@@ -0,0 +1,71 @@
+import { MutableReactiveValue, ReactiveValue } from '../../../util/ReactiveValue';
+import { ToolbarLocalization } from '../../localization';
+import { ToolMenu, WidgetContentLayoutManager, ToolMenuParent } from './types';
+
+export default class EdgeToolbarLayoutManager implements WidgetContentLayoutManager {
+	private visibleWidgetContent: MutableReactiveValue<ToolMenu|null> = ReactiveValue.fromInitialValue(null);
+
+	// @internal
+	public constructor(
+		private setSidebarContent: (...content: HTMLElement[])=>void,
+		private sidebarTitle: MutableReactiveValue<string>,
+		private sidebarVisibility: MutableReactiveValue<boolean>,
+		private announceForAccessibility: (text: string)=>void,
+		private localization: ToolbarLocalization,
+	) {
+
+	}
+
+	/** Creates a dropdown within `parent`. */
+	public createToolMenu(parent: ToolMenuParent): ToolMenu {
+		const contentElem = document.createElement('div');
+		let result: ToolMenu|null = null;
+
+		const visible = ReactiveValue.fromCallback(() => {
+			return this.visibleWidgetContent.get() === result && this.sidebarVisibility.get();
+		}, [ this.visibleWidgetContent, this.sidebarVisibility ]);
+
+		result = {
+			visible,
+			requestShow: () => {
+				this.setSidebarContent(contentElem);
+				this.sidebarTitle.set(parent.getTitle());
+
+				// Set visibleWidgetContent first -- this causes the previously visible (if any)
+				// item to not be sent a shown event.
+				this.visibleWidgetContent.set(result);
+				this.sidebarVisibility.set(true);
+
+				this.announceForAccessibility(this.localization.dropdownShown(parent.getTitle()));
+			},
+			onActivated: () => {
+				// TODO: Only request show when in sidebar mode
+				//result?.requestShow();
+			},
+			requestHide: () => {
+				if (visible.get()) {
+					this.sidebarVisibility.set(false);
+				}
+			},
+			appendChild: (item: HTMLElement) => {
+				contentElem.appendChild(item);
+			},
+			clearChildren: () => {
+				contentElem.replaceChildren();
+			},
+			destroy: () => {
+				result?.requestHide();
+
+				if (contentElem.parentElement) {
+					contentElem.remove();
+				}
+
+				if (this.visibleWidgetContent.get() === result) {
+					this.visibleWidgetContent.set(null);
+				}
+			},
+		};
+
+		return result;
+	}
+}

package/src/toolbar/widgets/layout/types.ts

@@ -0,0 +1,74 @@
+import ReactiveValue from 'js-draw/src/util/ReactiveValue';
+
+/**
+ * A class that manages whether/what content is shown for a widget.
+ *
+ * This might be a dropdown menu or a sidebar.
+ *
+ * TODO: Shouldn't be an interface, unless always internal.
+ * @internal
+ */
+export interface ToolMenu {
+	/**
+	 * Request that the layout manager show the dropdown. In general,
+	 * this makes the content of the dropdown visible.
+	 */
+	requestShow(): void;
+
+	/**
+	 * Request that the layout manager hide the dropdown. Even after calling this,
+	 * the dropdown may still be visible.
+	 */
+	requestHide(): void;
+
+	/** Whether the dropdown is visible (not hidden). */
+	readonly visible: ReactiveValue<boolean>;
+
+	/** Note that the tool associated with this dropdown has been activated. */
+	onActivated(): void;
+
+	/** Adds the given `child` to the content of the dropdown. */
+	appendChild(child: HTMLElement): void;
+
+	/** Removes all children from this dropdown. */
+	clearChildren(): void;
+
+	/**
+	 * Destroy the dropdown and remove it from the document. This should be called when
+	 * the creator of the dropdown is destroyed.
+	 */
+	destroy(): void;
+}
+
+/**
+ * Provides information about the element a tool menu is attached to.
+ */
+export interface ToolMenuParent {
+	/** The dropdown may be added **after** this element. */
+	target: HTMLElement;
+
+	/**
+	 * @returns the title of the element the dropdown is associated with.
+	 *
+	 * This is used for accessibility announcements (and possibly to display
+	 * a heading).
+	 */
+	getTitle(): string;
+
+	/**
+	 * Returns true iff the parent is a toplevel element (not contained within
+	 * a ContentLayoutManager of the same type as the current).
+	 */
+	isToplevel(): boolean;
+}
+
+export interface WidgetContentLayoutManager {
+	/**
+	 * Creates a tool menu (e.g. a dropdown). The dropdown *may* be added to `parent` or addded
+	 * elsewhere (this depends on the layout manager).
+	 *
+	 * Regardless, `parent` should be a place where an absolutely-positioned dropdown
+	 * element could be added.
+	 */
+	createToolMenu(parent: ToolMenuParent): ToolMenu;
+}

package/src/toolbar/widgets/lib.ts

@@ -1,7 +1,7 @@
 
 export { default as ActionButtonWidget } from './ActionButtonWidget';
 export { default as BaseToolWidget } from './BaseToolWidget';
-export { default as BaseWidget } from './BaseWidget';
+export { default as BaseWidget, ToolbarWidgetTag } from './BaseWidget';
 
 export { default as PenToolWidget } from './PenToolWidget';
 export { default as TextToolWidget } from './TextToolWidget';
@@ -10,4 +10,4 @@ export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
 
 export { default as InsertImageWidget } from './InsertImageWidget';
-export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';

package/src/tools/BaseTool.ts

@@ -1,16 +1,89 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
+import { EditorNotifier, EditorEventType } from '../types';
+import { WheelEvt, PointerEvt, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent, InputEvt, InputEvtType, GestureCancelEvt, PointerDownEvt, PointerMoveEvt, PointerUpEvt } from '../inputEvents';
 import ToolEnabledGroup from './ToolEnabledGroup';
+import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
+import { MutableReactiveValue, ReactiveValue } from '../util/ReactiveValue';
 
-export default abstract class BaseTool implements PointerEvtListener {
-	private enabled: boolean = true;
-	private group: ToolEnabledGroup|null = null;
+export default abstract class BaseTool implements InputEventListener {
+	#enabled: MutableReactiveValue<boolean>;
+	#group: ToolEnabledGroup|null = null;
+
+	#inputMapper: InputMapper|null = null;
+
+	protected constructor(private notifier: EditorNotifier, public readonly description: string) {
+		this.#enabled = ReactiveValue.fromInitialValue(true);
+		this.#enabled.onUpdate(enabled => {
+			// Ensure that at most one tool in the group is enabled.
+			if (enabled) {
+				this.#group?.notifyEnabled(this);
+				this.notifier.dispatch(EditorEventType.ToolEnabled, {
+					kind: EditorEventType.ToolEnabled,
+					tool: this,
+				});
+			} else {
+				this.notifier.dispatch(EditorEventType.ToolDisabled, {
+					kind: EditorEventType.ToolDisabled,
+					tool: this,
+				});
+			}
+		});
+	}
+
+	public setInputMapper(mapper: InputMapper|null) {
+		this.#inputMapper = mapper;
+		if (mapper) {
+			mapper.setEmitListener(event => this.dispatchEventToCallback(event));
+		}
+	}
+
+	public getInputMapper() {
+		return this.#inputMapper;
+	}
+
+	private dispatchEventToCallback(event: InputEvt) {
+		let exhaustivenessCheck: never;
+		switch (event.kind) {
+		case InputEvtType.PointerDownEvt:
+			return this.onPointerDown(event);
+		case InputEvtType.PointerMoveEvt:
+			this.onPointerMove(event);
+			break;
+		case InputEvtType.PointerUpEvt:
+			return this.onPointerUp(event) ?? false;
+		case InputEvtType.GestureCancelEvt:
+			this.onGestureCancel(event);
+			break;
+		case InputEvtType.WheelEvt:
+			return this.onWheel(event);
+		case InputEvtType.KeyPressEvent:
+			return this.onKeyPress(event);
+		case InputEvtType.KeyUpEvent:
+			return this.onKeyUp(event);
+		case InputEvtType.CopyEvent:
+			return this.onCopy(event);
+		case InputEvtType.PasteEvent:
+			return this.onPaste(event);
+		default:
+			exhaustivenessCheck = event;
+			return exhaustivenessCheck;
+		}
+		return true;
+	}
+
+	// @internal
+	public onEvent(event: InputEvt): boolean {
+		if (this.#inputMapper) {
+			return this.#inputMapper.onEvent(event);
+		}
+		return this.dispatchEventToCallback(event);
+	}
 
 	/**
 	 * Returns true iff the tool handled the event and thus should receive additional
 	 * events.
 	 */
-	public onPointerDown(_event: PointerEvt): boolean { return false; }
-	public onPointerMove(_event: PointerEvt) { }
+	public onPointerDown(_event: PointerDownEvt): boolean { return false; }
+	public onPointerMove(_event: PointerMoveEvt) { }
 
 	/**
 	 * Returns true iff there are additional pointers down and the tool should
@@ -18,12 +91,9 @@ export default abstract class BaseTool implements PointerEvtListener {
 	 *
 	 * For most purposes, this should return `false` or nothing.
 	 */
-	public onPointerUp(_event: PointerEvt): boolean|void { }
+	public onPointerUp(_event: PointerUpEvt): boolean|void { }
 
-	public onGestureCancel() { }
-
-	protected constructor(private notifier: EditorNotifier, public readonly description: string) {
-	}
+	public onGestureCancel(_event: GestureCancelEvt) { }
 
 	public onWheel(_event: WheelEvt): boolean {
 		return false;
@@ -55,25 +125,27 @@ export default abstract class BaseTool implements PointerEvtListener {
 	}
 
 	public setEnabled(enabled: boolean) {
-		this.enabled = enabled;
-
-		// Ensure that at most one tool in the group is enabled.
-		if (enabled) {
-			this.group?.notifyEnabled(this);
-			this.notifier.dispatch(EditorEventType.ToolEnabled, {
-				kind: EditorEventType.ToolEnabled,
-				tool: this,
-			});
-		} else {
-			this.notifier.dispatch(EditorEventType.ToolDisabled, {
-				kind: EditorEventType.ToolDisabled,
-				tool: this,
-			});
-		}
+		this.#enabled.set(enabled);
 	}
 
 	public isEnabled(): boolean {
-		return this.enabled;
+		return this.#enabled.get();
+	}
+
+	/**
+	 * Returns a {@link ReactiveValue} that updates based on whether this tool is
+	 * enabled.
+	 *
+	 * @example
+	 * ```ts
+	 * const tool = new SomeTool();
+	 *
+	 * // Watch for changes in enabled status
+	 * tool.enabledValue().onUpdate(enabled => doSomething(enabled));
+	 * ```
+	 */
+	public enabledValue(): ReactiveValue<boolean> {
+		return this.#enabled;
 	}
 
 	// Connect this tool to a set of other tools, ensuring that at most one
@@ -83,12 +155,12 @@ export default abstract class BaseTool implements PointerEvtListener {
 			group.notifyEnabled(this);
 		}
 
-		this.group = group;
+		this.#group = group;
 	}
 
 	public getToolGroup(): ToolEnabledGroup|null {
-		if (this.group) {
-			return this.group;
+		if (this.#group) {
+			return this.#group;
 		}
 
 		return null;

package/src/tools/Eraser.test.ts

@@ -1,10 +1,10 @@
 import UnknownSVGObject from '../components/UnknownSVGObject';
 import Editor from '../Editor';
 import { EditorImage, Rect2, StrokeComponent } from '../lib';
-import { Vec2 } from '../math/Vec2';
+import { Vec2 } from '@js-draw/math';
 import createEditor from '../testing/createEditor';
 import sendPenEvent from '../testing/sendPenEvent';
-import { InputEvtType } from '../types';
+import { InputEvtType } from '../inputEvents';
 import Eraser from './Eraser';
 
 const selectEraser = (editor: Editor) => {