js-draw 1.0.1 → 1.1.0

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

@@ -1,179 +0,0 @@
-import { MutableReactiveValue } from '../../../util/ReactiveValue';
-import stopPropagationOfScrollingWheelEvents from '../../../util/stopPropagationOfScrollingWheelEvents';
-import { IconElemType } from '../../IconProvider';
-import { toolbarCSSPrefix } from '../../constants';
-
-interface GridSelectChoice<ChoiceIdType> {
-	// `id` should be unique in all choices
-	id: ChoiceIdType;
-	makeIcon: ()=>IconElemType;
-	title: string;
-}
-
-interface GridSelector<ChoiceIdType> {
-	value: MutableReactiveValue<ChoiceIdType>,
-	linkWith: (other: GridSelector<ChoiceIdType>)=>void;
-	updateIcons: ()=>void;
-	addTo: (parent: HTMLElement)=>void;
-
-	/** Used internally @internal */
-	_radiogroupName: string;
-}
-
-let idCounter = 0;
-
-/**
- * Creates a widget that allows users to select one of serveral items from a list.
- *
- * `ChoiceIdType` should be `string`, a `number`, or an `enum` (or similar).
- *
- * If this input is set to an ID that is not in `choices`, no item is selected.
- */
-const makeGridSelector = <ChoiceIdType> (
-	// Text before the grid selector used as a label
-	labelText: string,
-	defaultId: ChoiceIdType,
-	choices: GridSelectChoice<ChoiceIdType>[],
-): GridSelector<ChoiceIdType> => {
-	const outerContainer = document.createElement('div');
-	outerContainer.classList.add(`${toolbarCSSPrefix}grid-selector`);
-
-	const selectedValue = MutableReactiveValue.fromInitialValue(defaultId);
-
-	const menuContainer = document.createElement('div');
-	menuContainer.setAttribute('role', 'menu');
-	menuContainer.id = `${toolbarCSSPrefix}-grid-select-id-${idCounter++}`;
-
-	stopPropagationOfScrollingWheelEvents(menuContainer);
-
-	const label = document.createElement('label');
-	label.innerText = labelText;
-	label.htmlFor = menuContainer.id;
-	outerContainer.appendChild(label);
-
-	// All buttons in a radiogroup need the same name attribute.
-	let radiogroupName = `${toolbarCSSPrefix}-grid-selector-${idCounter++}`;
-
-	type ChoiceType = GridSelectChoice<ChoiceIdType>;
-
-	const createChoiceButton = (record: ChoiceType) => {
-		const buttonContainer = document.createElement('div');
-		buttonContainer.classList.add('choice-button');
-
-		const button = document.createElement('input');
-		button.type = 'radio';
-		button.id = `${toolbarCSSPrefix}-grid-select-button-${idCounter++}`;
-
-		// Clicking any part of labelContainer triggers the radio button.
-		const labelContainer = document.createElement('label');
-
-		const rebuildLabel = () => {
-			labelContainer.setAttribute('title', record.title);
-
-			const labelText = document.createElement('span');
-			labelText.classList.add('button-label-text');
-
-			const icon = record.makeIcon();
-			icon.classList.add('icon');
-
-			// The title of the record
-			labelText.innerText = record.title;
-			labelContainer.htmlFor = button.id;
-
-			labelContainer.replaceChildren(icon, labelText);
-		};
-		rebuildLabel();
-
-		// Mark the button as belonging to the current group (causes
-		// other buttons in the same group to automatically uncheck
-		// when this button is checked).
-		const updateButtonRadiogroupName = () => {
-			button.name = radiogroupName;
-		};
-
-		updateButtonRadiogroupName();
-
-		const updateButtonCSS = () => {
-			if (button.checked) {
-				buttonContainer.classList.add('checked');
-			} else {
-				buttonContainer.classList.remove('checked');
-			}
-		};
-
-		button.oninput = () => {
-			// Setting the selected value fires an event that causes the value
-			// of this button to be set.
-			if (button.checked) {
-				selectedValue.set(record.id);
-			}
-
-			updateButtonCSS();
-		};
-
-		buttonContainer.replaceChildren(button, labelContainer);
-		menuContainer.appendChild(buttonContainer);
-
-		// Set whether the current button is checked
-		const setChecked = (checked: boolean) => {
-			button.checked = checked;
-			updateButtonCSS();
-		};
-		setChecked(false);
-
-		// Updates the factory's icon based on the current style of the tool.
-		const updateIcon = () => {
-			rebuildLabel();
-		};
-
-		return {
-			choiceRecord: record,
-			setChecked,
-			updateIcon,
-			updateButtonRadiogroupName
-		};
-	};
-
-	const buttons: Array<ReturnType<typeof createChoiceButton>> = [];
-	for (const choice of choices) {
-		buttons.push(createChoiceButton(choice));
-	}
-	// invariant: buttons.length = choices.length
-	// However, it is still possible that selectedValue does not correspond
-	// to a choice in `choices`. This is acceptable.
-
-	outerContainer.appendChild(menuContainer);
-
-	selectedValue.onUpdateAndNow(choiceId => {
-		for (let i = 0; i < buttons.length; i++) {
-			buttons[i].setChecked(buttons[i].choiceRecord.id === choiceId);
-		}
-	});
-
-	const result = {
-		value: selectedValue,
-
-		_radiogroupName: radiogroupName,
-
-		linkWith: (other: GridSelector<ChoiceIdType>) => {
-			result._radiogroupName = other._radiogroupName;
-			radiogroupName = other._radiogroupName;
-
-			for (const button of buttons) {
-				button.updateButtonRadiogroupName();
-			}
-		},
-
-		updateIcons: () => {
-			buttons.forEach(button => button.updateIcon());
-		},
-
-		addTo: (parent: HTMLElement) => {
-			parent.appendChild(outerContainer);
-		},
-	};
-
-	return result;
-};
-
-export default makeGridSelector;

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

@@ -1,17 +0,0 @@
-
-/**
- * Creates a separator element that renders a line and, optionally, a header.
- */
-const makeSeparator = (header: string = '') => {
-	const container = document.createElement('div');
-	container.classList.add('tool-dropdown-separator');
-	container.innerText = header;
-
-	return {
-		addTo: (parent: HTMLElement) => {
-			parent.appendChild(container);
-		},
-	};
-};
-
-export default makeSeparator;

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

@@ -1,62 +0,0 @@
-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,19 +0,0 @@
-import KeyboardShortcutManager from '../../shortcuts/KeyboardShortcutManager';
-
-// Selection
-export const resizeImageToSelectionKeyboardShortcut =
-		'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
-KeyboardShortcutManager.registerDefaultKeyboardShortcut(
-	resizeImageToSelectionKeyboardShortcut, [ 'ctrlOrMeta+r' ], 'Resize image to selection'
-);
-
-// Pen tool
-export const selectStrokeTypeKeyboardShortcutIds: string[] =
-		[1, 2, 3, 4, 5, 6, 7].map(id => `jsdraw.toolbar.PenTool.select-pen-${id}`);
-
-for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
-	const id = selectStrokeTypeKeyboardShortcutIds[i];
-	KeyboardShortcutManager.registerDefaultKeyboardShortcut(
-		id, [ `CtrlOrMeta+Digit${(i + 1)}` ], 'Select pen style ' + (i + 1),
-	);
-}

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

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

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

@@ -1,74 +0,0 @@
-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,13 +0,0 @@
-
-export { default as ActionButtonWidget } from './ActionButtonWidget';
-export { default as BaseToolWidget } from './BaseToolWidget';
-export { default as BaseWidget, ToolbarWidgetTag } from './BaseWidget';
-
-export { default as PenToolWidget } from './PenToolWidget';
-export { default as TextToolWidget } from './TextToolWidget';
-export { default as HandToolWidget } from './HandToolWidget';
-export { default as SelectionToolWidget } from './SelectionToolWidget';
-export { default as EraserToolWidget } from './EraserToolWidget';
-
-export { default as InsertImageWidget } from './InsertImageWidget';
-export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';