js-draw 1.0.0 → 1.0.1

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -0,0 +1,195 @@
+import { Color4 } from '@js-draw/math';
+import { isRestylableComponent } from '../../components/RestylableComponent';
+import Editor from '../../Editor';
+import uniteCommands from '../../commands/uniteCommands';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
+import { EditorEventType } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from './components/makeColorInput';
+import ActionButtonWidget from './ActionButtonWidget';
+import BaseToolWidget from './BaseToolWidget';
+import { resizeImageToSelectionKeyboardShortcut } from './keybindings';
+import makeSeparator from './components/makeSeparator';
+import { toolbarCSSPrefix } from '../constants';
+
+const makeFormatMenu = (editor: Editor, selectionTool: SelectionTool, localizationTable: ToolbarLocalization) => {
+	const container = document.createElement('div');
+	container.classList.add(
+		'selection-format-menu', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}indentedList`
+	);
+
+	const colorRow = document.createElement('div');
+	const colorLabel = document.createElement('label');
+	const {
+		input: colorInput, container: colorInputContainer, setValue: setColorInputValue
+	} = makeColorInput(editor, color => {
+		const selection = selectionTool.getSelection();
+
+		if (selection) {
+			const updateStyleCommands = [];
+
+			for (const elem of selection.getSelectedObjects()) {
+				if (isRestylableComponent(elem)) {
+					updateStyleCommands.push(elem.updateStyle({ color }));
+				}
+			}
+
+			const unitedCommand = uniteCommands(updateStyleCommands);
+			editor.dispatch(unitedCommand);
+		}
+	});
+
+	colorLabel.innerText = localizationTable.colorLabel;
+
+	const update = () => {
+		const selection = selectionTool.getSelection();
+		if (selection && selection.getSelectedItemCount() > 0) {
+			colorInput.disabled = false;
+			container.classList.remove('disabled');
+
+			const colors = [];
+			for (const elem of selection.getSelectedObjects()) {
+				if (isRestylableComponent(elem)) {
+					const color = elem.getStyle().color;
+					if (color) {
+						colors.push(color);
+					}
+				}
+			}
+			setColorInputValue(Color4.average(colors));
+		} else {
+			colorInput.disabled = true;
+			container.classList.add('disabled');
+			setColorInputValue(Color4.transparent);
+		}
+	};
+
+	colorRow.replaceChildren(colorLabel, colorInputContainer);
+	container.replaceChildren(colorRow);
+
+	return {
+		addTo: (parent: HTMLElement) => {
+			parent.appendChild(container);
+		},
+		update,
+	};
+};
+
+export default class SelectionToolWidget extends BaseToolWidget {
+	private updateFormatMenu: ()=>void = () => {};
+
+	public constructor(
+		editor: Editor, private tool: SelectionTool, localization?: ToolbarLocalization
+	) {
+		super(editor, tool, 'selection-tool-widget', localization);
+
+		const resizeButton = new ActionButtonWidget(
+			editor, 'resize-btn',
+			() => editor.icons.makeResizeImageToSelectionIcon(),
+			this.localizationTable.resizeImageToSelection,
+			() => {
+				this.resizeImageToSelection();
+			},
+			localization,
+		);
+		const deleteButton = new ActionButtonWidget(
+			editor, 'delete-btn',
+			() => editor.icons.makeDeleteSelectionIcon(),
+			this.localizationTable.deleteSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.deleteSelectedObjects());
+				this.tool.clearSelection();
+			},
+			localization,
+		);
+		const duplicateButton = new ActionButtonWidget(
+			editor, 'duplicate-btn',
+			() => editor.icons.makeDuplicateSelectionIcon(),
+			this.localizationTable.duplicateSelection,
+			async () => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(await selection!.duplicateSelectedObjects());
+				this.setDropdownVisible(false);
+			},
+			localization,
+		);
+
+		this.addSubWidget(resizeButton);
+		this.addSubWidget(deleteButton);
+		this.addSubWidget(duplicateButton);
+
+		const updateDisabled = (disabled: boolean) => {
+			resizeButton.setDisabled(disabled);
+			deleteButton.setDisabled(disabled);
+			duplicateButton.setDisabled(disabled);
+		};
+		updateDisabled(true);
+
+		// Enable/disable actions based on whether items are selected
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+				throw new Error('Invalid event type!');
+			}
+
+			if (toolEvt.tool === this.tool) {
+				const selection = this.tool.getSelection();
+				const hasSelection = selection && selection.getSelectedItemCount() > 0;
+
+				updateDisabled(!hasSelection);
+				this.updateFormatMenu();
+			}
+		});
+	}
+
+	private resizeImageToSelection() {
+		const selection = this.tool.getSelection();
+		if (selection) {
+			this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+		}
+	}
+
+	protected override onKeyPress(event: KeyPressEvent): boolean {
+		const shortcuts = this.editor.shortcuts;
+
+		// Resize image to selection:
+		// Other keys are handled directly by the selection tool.
+		if (shortcuts.matchesShortcut(resizeImageToSelectionKeyboardShortcut, event)) {
+			this.resizeImageToSelection();
+			return true;
+		}
+
+		// If we didn't handle the event, allow the superclass to handle it.
+		if (super.onKeyPress(event)) {
+			return true;
+		}
+		return false;
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.select;
+	}
+
+	protected createIcon(): Element {
+		return this.editor.icons.makeSelectionIcon();
+	}
+
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		super.fillDropdown(dropdown);
+
+		const controlsContainer = document.createElement('div');
+		controlsContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
+		dropdown.appendChild(controlsContainer);
+
+		makeSeparator(this.localizationTable.reformatSelection).addTo(controlsContainer);
+
+		const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
+		formatMenu.addTo(controlsContainer);
+		this.updateFormatMenu = () => formatMenu.update();
+
+		formatMenu.update();
+
+		return true;
+	}
+}

package/src/toolbar/widgets/TextToolWidget.ts

@@ -0,0 +1,149 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../../Editor';
+import TextTool from '../../tools/TextTool';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../constants';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from './components/makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
+
+export default class TextToolWidget extends BaseToolWidget {
+	private updateDropdownInputs: (()=>void)|null = null;
+	public constructor(editor: Editor, private tool: TextTool, localization?: ToolbarLocalization) {
+		super(editor, tool, 'text-tool-widget', localization);
+
+		editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+			if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+				this.updateIcon();
+				this.updateDropdownInputs?.();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.targetTool.description;
+	}
+
+	protected createIcon(): Element {
+		const textStyle = this.tool.getTextStyle();
+		return this.editor.icons.makeTextIcon(textStyle);
+	}
+
+	private static idCounter: number = 0;
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(
+			`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`
+		);
+		const fontRow = document.createElement('div');
+		const colorRow = document.createElement('div');
+		const sizeRow = document.createElement('div');
+
+		const fontInput = document.createElement('select');
+		const fontLabel = document.createElement('label');
+
+		const sizeInput = document.createElement('input');
+		const sizeLabel = document.createElement('label');
+
+		const {
+			input: colorInput, container: colorInputContainer, setValue: setColorInputValue
+		} = makeColorInput(this.editor, color => {
+			this.tool.setColor(color);
+		});
+		const colorLabel = document.createElement('label');
+
+		const fontsInInput = new Set();
+		const addFontToInput = (fontName: string) => {
+			const option = document.createElement('option');
+			option.value = fontName;
+			option.textContent = fontName;
+			fontInput.appendChild(option);
+			fontsInInput.add(fontName);
+		};
+
+		sizeInput.setAttribute('type', 'number');
+		sizeInput.min = '1';
+		sizeInput.max = '128';
+
+		fontLabel.innerText = this.localizationTable.fontLabel;
+		colorLabel.innerText = this.localizationTable.colorLabel;
+		sizeLabel.innerText = this.localizationTable.textSize;
+
+		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+		colorLabel.setAttribute('for', colorInput.id);
+
+		sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+		sizeLabel.setAttribute('for', sizeInput.id);
+
+		addFontToInput('monospace');
+		addFontToInput('serif');
+		addFontToInput('sans-serif');
+		fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+		fontLabel.setAttribute('for', fontInput.id);
+
+		fontInput.onchange = () => {
+			this.tool.setFontFamily(fontInput.value);
+		};
+
+		sizeInput.onchange = () => {
+			const size = parseInt(sizeInput.value);
+			if (!isNaN(size) && size > 0) {
+				this.tool.setFontSize(size);
+			}
+		};
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInputContainer);
+
+		fontRow.appendChild(fontLabel);
+		fontRow.appendChild(fontInput);
+
+		sizeRow.appendChild(sizeLabel);
+		sizeRow.appendChild(sizeInput);
+
+		this.updateDropdownInputs = () => {
+			const style = this.tool.getTextStyle();
+			setColorInputValue(style.renderingStyle.fill);
+
+			if (!fontsInInput.has(style.fontFamily)) {
+				addFontToInput(style.fontFamily);
+			}
+			fontInput.value = style.fontFamily;
+			sizeInput.value = `${style.size}`;
+		};
+		this.updateDropdownInputs();
+
+		container.replaceChildren(colorRow, sizeRow, fontRow);
+		dropdown.appendChild(container);
+		return true;
+	}
+
+	public override serializeState(): SavedToolbuttonState {
+		const textStyle = this.tool.getTextStyle();
+
+		return {
+			...super.serializeState(),
+
+			fontFamily: textStyle.fontFamily,
+			textSize: textStyle.size,
+			color: textStyle.renderingStyle.fill.toHexString(),
+		};
+	}
+
+	public override deserializeFrom(state: SavedToolbuttonState) {
+		if (state.fontFamily && typeof(state.fontFamily) === 'string') {
+			this.tool.setFontFamily(state.fontFamily);
+		}
+
+		if (state.color && typeof(state.color) === 'string') {
+			this.tool.setColor(Color4.fromHex(state.color));
+		}
+
+		if (state.textSize && typeof(state.textSize) === 'number') {
+			this.tool.setFontSize(state.textSize);
+		}
+
+		super.deserializeFrom(state);
+	}
+}

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

@@ -0,0 +1,184 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../../../Editor';
+import PipetteTool from '../../../tools/PipetteTool';
+import { EditorEventType } from '../../../types';
+
+type OnColorChangeListener = (color: Color4)=>void;
+
+// Returns [ color input, input container, callback to change the color value ].
+export const makeColorInput = (
+	editor: Editor, onColorChange: OnColorChangeListener
+) => {
+
+	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;
+	let isOpen = false;
+	colorInput.addEventListener('open', () => {
+		isOpen = true;
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: true,
+		});
+		pipetteController.cancel();
+		colorInputContainer.classList.add('picker-open');
+
+		// 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();
+	});
+
+	const onClose = () => {
+		isOpen = false;
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: false,
+		});
+		onInputEnd();
+
+		// Restore focus to the input that opened the color picker
+		colorInput.focus();
+
+		colorInputContainer.classList.remove('picker-open');
+	};
+	colorInput.addEventListener('close', () => {
+		onClose();
+	});
+
+	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 {
+		input: colorInput,
+		container: colorInputContainer,
+		setValue: setColorInputValue,
+		closePicker: () => {
+			if (isOpen) {
+				onInputEnd();
+			}
+		},
+	};
+};
+
+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 pickColorLabel = document.createElement('span');
+	pickColorLabel.classList.add('pickColorInstructions');
+	pickColorLabel.innerText = editor.localization.clickToPickColorAnnouncement;
+
+	const updatePipetteButtonContent = (color?: Color4) => {
+		pipetteButton.replaceChildren(
+			editor.icons.makePipetteIcon(color), pickColorLabel
+		);
+	};
+	updatePipetteButtonContent();
+
+	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(PipetteTool)[0];
+
+	const endColorSelectMode = () => {
+		pipetteTool?.clearColorListener();
+		updatePipetteButtonContent();
+		pipetteButton.classList.remove('active');
+	};
+
+	const pipetteColorSelect = (color: Color4|null) => {
+		endColorSelectMode();
+
+		if (color) {
+			onColorChange(color);
+		}
+	};
+
+	const pipetteColorPreview = (color: Color4|null) => {
+		if (color) {
+			updatePipetteButtonContent(color);
+		} else {
+			updatePipetteButtonContent();
+		}
+	};
+
+	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/widgets/components/makeFileInput.ts

@@ -0,0 +1,128 @@
+import ReactiveValue, { MutableReactiveValue } from '../../../util/ReactiveValue';
+import { ToolbarContext } from '../../types';
+
+let idCounter = 0;
+
+/**
+ * Creates a stylized file input.
+ */
+const makeFileInput = (labelText: string, context: ToolbarContext, accepts: string = '*') => {
+	const container = document.createElement('div');
+	const label = document.createElement('label');
+	const input = document.createElement('input');
+
+	const descriptionBox = document.createElement('div');
+	descriptionBox.classList.add('toolbar--file-input-description');
+	const descriptionText = document.createElement('span');
+
+	container.classList.add('toolbar--file-input-container');
+
+	label.appendChild(document.createTextNode(labelText));
+	input.accept = accepts;
+	input.type = 'file';
+
+	// Associate the label with the input
+	const inputId = `js-draw-file-input-${idCounter ++}`;
+	input.setAttribute('id', inputId);
+	label.htmlFor = inputId;
+
+	const icon = context.icons.makeUploadFileIcon();
+	icon.classList.add('icon');
+
+	descriptionBox.replaceChildren(icon, descriptionText);
+	label.appendChild(descriptionBox);
+	container.replaceChildren(label, input);
+
+	const selectedFiles: MutableReactiveValue<File[]> = ReactiveValue.fromInitialValue([]);
+
+	// Support droping files
+	label.addEventListener('dragover', event => {
+		event.preventDefault();
+		label.classList.add('drag-target');
+	});
+	label.addEventListener('dragenter', event => {
+		event.preventDefault();
+		label.classList.add('drag-target');
+	});
+	label.addEventListener('dragleave', event => {
+		event.preventDefault();
+
+		// Ensure the event wasn't targeting a child.
+		// See https://stackoverflow.com/a/54271161 and
+		//     https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget
+		const enteringElement = event.relatedTarget as HTMLElement;
+		if (!enteringElement || !label.contains(enteringElement)) {
+			label.classList.remove('drag-target');
+		}
+	});
+
+	// See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#process_the_drop
+	label.addEventListener('drop', event => {
+		event.preventDefault();
+		label.classList.remove('drag-target');
+
+		const fileList: File[] = [];
+
+		if (event.dataTransfer) {
+			fileList.push(...event.dataTransfer.files);
+		}
+
+		selectedFiles.set(fileList);
+	});
+	input.addEventListener('change', () => {
+		const fileList = input.files ?? [];
+		selectedFiles.set([ ...fileList ]);
+	});
+
+	selectedFiles.onUpdate(files => {
+		if (files.length === 0 && input.files && input.files.length > 0) {
+			input.value = '';
+		}
+	});
+
+	// Update the status text and hide/show the icon.
+	selectedFiles.onUpdateAndNow(files => {
+		if (files.length > 0) {
+			descriptionText.innerText = files.map(file => file.name).join('\n');
+
+			// Only show the icon when there are files
+			icon.style.display = 'none';
+		} else {
+			// Show the icon
+			icon.style.display = '';
+
+			const text = context.localization.dragAndDropHereOrBrowse;
+
+			// Split into regions surrounded by {{curly braces}} and regions that are
+			// not.
+			// When given a regular expression, `.split` outputs an array. For example,
+			//    "a test __of__ split".split(/__(.*)__/)
+			// results in
+			//    ['a test ', 'of', ' split'].
+			const segments = text.split(/[{]{2}(.*)[}]{2}/g);
+			descriptionText.replaceChildren();
+
+			for (let i = 0; i < segments.length; i++) {
+				// Inside a {{pair of curly braces}}?
+				if (i % 2 === 1) {
+					const boldedText = document.createElement('b');
+					boldedText.innerText = segments[i];
+					descriptionText.appendChild(boldedText);
+				} else {
+					descriptionText.appendChild(document.createTextNode(segments[i]));
+				}
+			}
+		}
+	});
+
+	return {
+		container,
+		input,
+		selectedFiles,
+		addTo: (parent: HTMLElement) => {
+			parent.appendChild(container);
+		},
+	};
+};
+
+export default makeFileInput;