js-draw 0.25.1 → 1.0.1

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

@@ -0,0 +1,82 @@
+
+/* Make color selection buttons fill their containing label */
+.toolbar-element .clr-field {
+	* {
+		cursor: pointer;
+	}
+
+	// Make the preview circular.
+	button {
+		$size: 1.2em;
+		width: $size;
+		height: $size;
+
+		// Center & move to left of input
+		top: 50%;
+		left: 0;
+
+		border-radius: 50%;
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	input {
+		opacity: 0;
+	}
+}
+
+.color-input-container {
+	display: inline-flex;
+	flex-direction: row;
+
+	&.picker-open .clr-field {
+		// Work around what seems to be a Coloris bug -- clicking on the input button
+		// keeps the color picker open (while clicking anywhere else closes the picker).
+		pointer-events: none;
+	}
+}
+
+$pipette-button-size: 30px;
+
+:root .color-input-container > button.pipetteButton {
+	width: $pipette-button-size;
+	height: $pipette-button-size;
+	padding: 0;
+	display: inline-flex;
+}
+
+.color-input-container .pipetteButton > svg {
+	width: 100%;
+}
+
+.color-input-container .pipetteButton {
+	.pickColorInstructions {
+		display: none;
+
+		font-size: 1em;
+		position: absolute;
+		margin-left: $pipette-button-size;
+
+		background-color: var(--background-color-1);
+		border-radius: $pipette-button-size;
+		padding: 4px;
+
+		opacity: 0;
+
+		transition: 0.2s ease opacity;
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+}
+
+.color-input-container .pipetteButton.active {
+	background-color: var(--selection-background-color);
+	--icon-color: var(--selection-foreground-color);
+
+	.pickColorInstructions {
+		display: block;
+		opacity: 0.8;
+	}
+}
+

package/src/toolbar/{makeColorInput.ts → widgets/components/makeColorInput.ts}

@@ -1,15 +1,14 @@
-import Color4 from '../Color4';
-import Editor from '../Editor';
-import PipetteTool from '../tools/PipetteTool';
-import { EditorEventType } from '../types';
+import { Color4 } from '@js-draw/math';
+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');
@@ -53,12 +52,15 @@ export const makeColorInput = (
 	};
 
 	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,
@@ -66,7 +68,9 @@ export const makeColorInput = (
 		const colorPickerElem: HTMLElement|null = document.querySelector('#clr-picker #clr-hue-slider');
 		colorPickerElem?.focus();
 	});
-	colorInput.addEventListener('close', () => {
+
+	const onClose = () => {
+		isOpen = false;
 		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
 			kind: EditorEventType.ColorPickerToggled,
 			open: false,
@@ -75,6 +79,11 @@ export const makeColorInput = (
 
 		// 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) => {
@@ -89,7 +98,16 @@ export const makeColorInput = (
 		colorInput.dispatchEvent(new Event('input', { bubbles: true }));
 	};
 
-	return [ colorInput, colorInputContainer, setColorInputValue ];
+	return {
+		input: colorInput,
+		container: colorInputContainer,
+		setValue: setColorInputValue,
+		closePicker: () => {
+			if (isOpen) {
+				onInputEnd();
+			}
+		},
+	};
 };
 
 const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {
@@ -98,16 +116,22 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 	pipetteButton.title = editor.localization.pickColorFromScreen;
 	pipetteButton.setAttribute('alt', pipetteButton.title);
 
-	const updatePipetteIcon = (color?: Color4) => {
-		pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
+	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
+		);
 	};
-	updatePipetteIcon();
+	updatePipetteButtonContent();
 
 	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(PipetteTool)[0];
 
 	const endColorSelectMode = () => {
 		pipetteTool?.clearColorListener();
-		updatePipetteIcon();
+		updatePipetteButtonContent();
 		pipetteButton.classList.remove('active');
 	};
 
@@ -121,9 +145,9 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 
 	const pipetteColorPreview = (color: Color4|null) => {
 		if (color) {
-			updatePipetteIcon(color);
+			updatePipetteButtonContent(color);
 		} else {
-			updatePipetteIcon();
+			updatePipetteButtonContent();
 		}
 	};
 
@@ -142,6 +166,7 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 
 		if (pipetteTool) {
 			pipetteButton.classList.add('active');
+
 			editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
 		}
 	};

package/src/toolbar/widgets/components/makeFileInput.scss

@@ -0,0 +1,77 @@
+
+.toolbar-element .toolbar--file-input-container {
+	display: flex;
+
+	> input[type="file"] {
+		// Hide in a way such that screen readers can still access the
+		// input.
+		opacity: 0;
+		width: 0;
+		// Override the existing min-width set for other inputs
+		min-width: 0 !important;
+		max-width: 0;
+		height: 0;
+	}
+
+	> label {
+		display: block;
+		flex-grow: 1;
+
+		// Override existing padding rules.
+		padding: 0 !important;
+		padding-bottom: 5px;
+
+		// Default border color if color-mix is not supported
+		--active-border-color: rgba(100, 100, 100, 0.5);
+
+		--active-border-color: color-mix(
+			in srgb, var(--foreground-color-1), transparent
+		);
+
+		> .toolbar--file-input-description {
+			background-color: var(--background-color-3);
+			color: var(--foreground-color-3);
+
+			border: 1px dashed var(--active-border-color);
+			padding: 10px;
+			margin-top: 10px;
+
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			text-align: center;
+
+			--action-color: var(--primary-action-foreground-color);
+			--icon-color: var(--action-color);
+
+			> span {
+				// Allow `\n`s to create new lines
+				white-space: pre-wrap;
+
+				> b {
+					color: var(--action-color);
+					cursor: pointer;
+				}
+			}
+
+			> .icon {
+				$size: min(50vw, 42px);
+				width: $size;
+				height: $size;
+
+				margin-bottom: 8px;
+
+				display: block;
+			}
+		}
+
+
+		&:active, &:hover, &.drag-target {
+			--active-border-color: var(--foreground-color-1);
+		}
+
+		&.drag-target > .toolbar--file-input-description {
+			border-width: 2px;
+		}
+	}
+}

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;

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

@@ -0,0 +1,60 @@
+
+.toolbar-grid-selector {
+	position: relative;
+
+	& > div {
+		display: flex;
+		flex-direction: row;
+	
+		max-width: 350px;
+		flex-wrap: wrap;
+	
+		--button-size: 48px;
+	}
+
+	.choice-button {
+		display: flex;
+		flex-direction: column-reverse;
+		box-sizing: border-box;
+	
+		flex-shrink: 1;
+		margin: 2px;
+
+		&:focus-within {
+			outline: 2px solid var(--foreground-color-1);
+		}
+
+		// The choice buttons use input[type=radio] internally.
+		input {
+			opacity: 0;
+			height: 0;
+		}
+
+		label {
+			display: flex;
+			flex-direction: column;
+			box-sizing: border-box;
+		
+			width: var(--button-size);
+			height: var(--button-size);
+		
+			font-size: 0.7rem;
+			align-items: center;
+			justify-content: center;
+			padding: 4px;
+		}
+
+		.icon {
+			flex-grow: 1;
+			flex-shrink: 1;
+			width: 100%;
+		}
+		
+		&.checked {
+			background-color: var(--selection-background-color);
+			color: var(--selection-foreground-color);
+		}
+	}
+	
+
+}

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

@@ -0,0 +1,179 @@
+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.scss

@@ -0,0 +1,14 @@
+.tool-dropdown-separator {
+	// Default border color if color-mix is not supported.
+	--border-color: rgba(100, 100, 100, 0.2);
+
+	// A mostly-transparent version of the foreground color.
+	--border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);
+
+	border-top: 1px solid var(--border-color);
+
+	padding-left: 2px;
+
+	margin-top: 10px;
+	margin-bottom: 10px;
+}

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

@@ -0,0 +1,17 @@
+
+/**
+ * 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.scss

@@ -0,0 +1,9 @@
+
+.toolbar-thicknessSliderContainer {
+	display: flex;
+	flex-direction: row;
+
+	input {
+		flex-grow: 1;
+	}
+}