js-draw 0.23.0 → 0.24.0

package/src/toolbar/lib.ts

@@ -0,0 +1,4 @@
+
+export * from './widgets/lib';
+export * from './makeColorInput';
+export { default as IconProvider } from './IconProvider';

package/src/toolbar/localization.ts

@@ -0,0 +1,114 @@
+
+
+export interface ToolbarLocalization {
+	fontLabel: string;
+	textSize: string;
+	touchPanning: string;
+	lockRotation: string;
+	outlinedRectanglePen: string;
+	outlinedCirclePen: string,
+	filledRectanglePen: string;
+	linePen: string;
+	arrowPen: string;
+	image: string;
+	inputAltText: string;
+	chooseFile: string;
+	cancel: string;
+	submit: string;
+	freehandPen: string;
+	pressureSensitiveFreehandPen: string;
+	selectPenType: string;
+	colorLabel: string;
+	pen: string;
+	eraser: string;
+	select: string;
+	handTool: string;
+	thicknessLabel: string;
+	resizeImageToSelection: string;
+	deleteSelection: string;
+	duplicateSelection: string;
+
+	pickColorFromScreen: string;
+	clickToPickColorAnnouncement: string;
+	colorSelectionCanceledAnnouncement: string;
+
+	reformatSelection: string;
+	undo: string;
+	redo: string;
+	zoom: string;
+	resetView: string;
+	selectionToolKeyboardShortcuts: string;
+	paste: string;
+	documentProperties: string;
+	backgroundColor: string;
+	imageWidthOption: string;
+	imageHeightOption: string;
+	useGridOption: string;
+	toggleOverflow: string,
+
+	errorImageHasZeroSize: string;
+
+	dropdownShown: (toolName: string)=> string;
+	dropdownHidden: (toolName: string)=> string;
+	zoomLevel: (zoomPercentage: number)=> string;
+	colorChangedAnnouncement: (color: string)=> string;
+	imageSize: (size: number, units: string)=> string;
+	imageLoadError: (message: string)=> string;
+}
+
+export const defaultToolbarLocalization: ToolbarLocalization = {
+	pen: 'Pen',
+	eraser: 'Eraser',
+	select: 'Select',
+	handTool: 'Pan',
+	zoom: 'Zoom',
+	image: 'Image',
+	reformatSelection: 'Format selection',
+	inputAltText: 'Alt text: ',
+	chooseFile: 'Choose file: ',
+	submit: 'Submit',
+	cancel: 'Cancel',
+	resetView: 'Reset view',
+	thicknessLabel: 'Thickness: ',
+	colorLabel: 'Color: ',
+	fontLabel: 'Font: ',
+	textSize: 'Size: ',
+	resizeImageToSelection: 'Resize image to selection',
+	deleteSelection: 'Delete selection',
+	duplicateSelection: 'Duplicate selection',
+	undo: 'Undo',
+	redo: 'Redo',
+	selectPenType: 'Pen type: ',
+	pickColorFromScreen: 'Pick color from screen',
+	clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+	colorSelectionCanceledAnnouncement: 'Color selection canceled',
+	selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
+	documentProperties: 'Page',
+	backgroundColor: 'Background Color: ',
+	imageWidthOption: 'Width: ',
+	imageHeightOption: 'Height: ',
+	useGridOption: 'Grid: ',
+	toggleOverflow: 'More',
+
+	touchPanning: 'Touchscreen panning',
+
+	freehandPen: 'Freehand',
+	pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
+	arrowPen: 'Arrow',
+	linePen: 'Line',
+	outlinedRectanglePen: 'Outlined rectangle',
+	filledRectanglePen: 'Filled rectangle',
+	outlinedCirclePen: 'Outlined circle',
+	lockRotation: 'Lock rotation',
+
+	paste: 'Paste',
+
+	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
+	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,
+	colorChangedAnnouncement: (color: string) => `Color changed to ${color}`,
+	imageSize: (size: number, units: string) => `Image size: ${size} ${units}`,
+
+	errorImageHasZeroSize: 'Error: Image has zero size',
+	imageLoadError: (message: string)=> `Error loading image: ${message}`,
+};

package/src/toolbar/makeColorInput.ts

@@ -0,0 +1,159 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import PipetteTool from '../tools/PipetteTool';
+import { EditorEventType } from '../types';
+
+type OnColorChangeListener = (color: Color4)=>void;
+type SetColorCallback = (color: Color4|string) => void;
+
+// Returns [ color input, input container, callback to change the color value ].
+export const makeColorInput = (
+	editor: Editor, onColorChange: OnColorChangeListener
+): [ HTMLInputElement, HTMLElement, SetColorCallback ] => {
+
+	const colorInputContainer = document.createElement('span');
+	const colorInput = document.createElement('input');
+
+	colorInput.type = 'button';
+	colorInput.classList.add('coloris_input');
+	colorInputContainer.classList.add('color-input-container');
+
+	colorInputContainer.appendChild(colorInput);
+	const pipetteController = addPipetteTool(editor, colorInputContainer, (color: Color4) => {
+		colorInput.value = color.toHexString();
+		onInputEnd();
+
+		// Update the color preview, if it exists (may be managed by Coloris).
+		const parentElem = colorInput.parentElement;
+		if (parentElem && parentElem.classList.contains('clr-field')) {
+			parentElem.style.color = colorInput.value;
+		}
+	});
+
+	let currentColor: Color4|undefined;
+	const handleColorInput = () => {
+		currentColor = Color4.fromHex(colorInput.value);
+	};
+
+	// Only change the pen color when we finish sending input (this limits the number of
+	// editor events triggered and accessibility announcements).
+	const onInputEnd = () => {
+		handleColorInput();
+
+		if (currentColor) {
+			editor.announceForAccessibility(
+				editor.localization.colorChangedAnnouncement(currentColor.toHexString())
+			);
+			onColorChange(currentColor);
+			editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
+				kind: EditorEventType.ColorPickerColorSelected,
+				color: currentColor,
+			});
+		}
+	};
+
+	colorInput.oninput = handleColorInput;
+	colorInput.addEventListener('open', () => {
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: true,
+		});
+		pipetteController.cancel();
+
+		// Focus the Coloris color picker, if it exists.
+		// Don't focus the text input within the color picker, however,
+		// as this displays a keyboard on mobile devices.
+		const colorPickerElem: HTMLElement|null = document.querySelector('#clr-picker #clr-hue-slider');
+		colorPickerElem?.focus();
+	});
+	colorInput.addEventListener('close', () => {
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: false,
+		});
+		onInputEnd();
+
+		// Restore focus to the input that opened the color picker
+		colorInput.focus();
+	});
+
+	const setColorInputValue = (color: Color4|string) => {
+		if (typeof color === 'object') {
+			color = color.toHexString();
+		}
+
+		colorInput.value = color;
+
+		// Fire all color event listeners. See
+		// https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
+		colorInput.dispatchEvent(new Event('input', { bubbles: true }));
+	};
+
+	return [ colorInput, colorInputContainer, setColorInputValue ];
+};
+
+const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {
+	const pipetteButton = document.createElement('button');
+	pipetteButton.classList.add('pipetteButton');
+	pipetteButton.title = editor.localization.pickColorFromScreen;
+	pipetteButton.setAttribute('alt', pipetteButton.title);
+
+	const updatePipetteIcon = (color?: Color4) => {
+		pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
+	};
+	updatePipetteIcon();
+
+	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(PipetteTool)[0];
+
+	const endColorSelectMode = () => {
+		pipetteTool?.clearColorListener();
+		updatePipetteIcon();
+		pipetteButton.classList.remove('active');
+	};
+
+	const pipetteColorSelect = (color: Color4|null) => {
+		endColorSelectMode();
+
+		if (color) {
+			onColorChange(color);
+		}
+	};
+
+	const pipetteColorPreview = (color: Color4|null) => {
+		if (color) {
+			updatePipetteIcon(color);
+		} else {
+			updatePipetteIcon();
+		}
+	};
+
+	pipetteButton.onclick = () => {
+		// If already picking, cancel it.
+		if (pipetteButton.classList.contains('active')) {
+			endColorSelectMode();
+			editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
+			return;
+		}
+
+		pipetteTool?.setColorListener(
+			pipetteColorPreview,
+			pipetteColorSelect,
+		);
+
+		if (pipetteTool) {
+			pipetteButton.classList.add('active');
+			editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
+		}
+	};
+
+	container.appendChild(pipetteButton);
+
+	return {
+		// Cancel a pipette color selection if one is in progress.
+		cancel: () => {
+			endColorSelectMode();
+		},
+	};
+};
+
+export default makeColorInput;

package/src/toolbar/toolbar.css

@@ -187,6 +187,28 @@
 	--dropdown-hide-animation: dropdown-transition-out;
 }
 
+@media (prefers-reduced-motion: reduce) {
+	/* Disable toolbar animations if reducing motion */
+	.toolbar-dropdown {
+		--dropdown-show-animation: none;
+		--dropdown-hide-animation: none;
+	}
+
+	.toolbar-dropdown.hiding {
+		display: none;
+	}
+
+	/* Also disable arrow rotation */
+	.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
+		transition: none;
+	}
+
+	/* ...and background color animation. */
+	.toolbar-button, .toolbar-root button {
+		transition: none;
+	}
+}
+
 .toolbar-buttonGroup {
 	display: flex;
 	flex-direction: row;

package/src/toolbar/types.ts

@@ -0,0 +1,5 @@
+
+export interface ActionButtonIcon {
+	icon: Element;
+	label: string;
+}

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -0,0 +1,39 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+export default class ActionButtonWidget extends BaseWidget {
+	public constructor(
+		editor: Editor,
+		id: string,
+
+		protected makeIcon: ()=> Element|null,
+		protected title: string,
+		protected clickAction: ()=>void,
+
+		localizationTable?: ToolbarLocalization,
+		protected mustBeToplevel: boolean = false,
+	) {
+		super(editor, id, localizationTable);
+	}
+
+	protected handleClick() {
+		this.clickAction();
+	}
+
+	protected getTitle(): string {
+		return this.title;
+	}
+
+	protected createIcon(): Element|null {
+		return this.makeIcon();
+	}
+
+	protected override fillDropdown(_dropdown: HTMLElement): boolean {
+		return false;
+	}
+
+	public override canBeInOverflowMenu(): boolean {
+		return !this.mustBeToplevel;
+	}
+}

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -0,0 +1,56 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { EditorEventType } from '../../types';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+export default abstract class BaseToolWidget extends BaseWidget {
+	public constructor(
+		editor: Editor,
+		protected targetTool: BaseTool,
+		id: string,
+		localizationTable?: ToolbarLocalization,
+	) {
+		super(editor, id, localizationTable);
+
+		editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolEnabled) {
+				throw new Error('Incorrect event type! (Expected ToolEnabled)');
+			}
+
+			if (toolEvt.tool === targetTool) {
+				this.setSelected(true);
+			}
+		});
+
+		editor.notifier.on(EditorEventType.ToolDisabled, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolDisabled) {
+				throw new Error('Incorrect event type! (Expected ToolDisabled)');
+			}
+
+			if (toolEvt.tool === targetTool) {
+				this.setSelected(false);
+				this.setDropdownVisible(false);
+			}
+		});
+	}
+
+	protected handleClick() {
+		if (this.hasDropdown) {
+			if (!this.targetTool.isEnabled()) {
+				this.targetTool.setEnabled(true);
+			} else {
+				this.setDropdownVisible(!this.isDropdownVisible());
+			}
+		} else {
+			this.targetTool.setEnabled(!this.targetTool.isEnabled());
+		}
+	}
+
+	public override addTo(parent: HTMLElement) {
+		const result = super.addTo(parent);
+		this.setSelected(this.targetTool.isEnabled());
+
+		return result;
+	}
+}