js-draw 0.25.1 → 1.0.1

package/src/toolbar/widgets/PenToolWidget.ts

@@ -7,14 +7,17 @@ import { makeOutlinedCircleBuilder } from '../../components/builders/CircleBuild
 import { ComponentBuilderFactory } from '../../components/builders/types';
 import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
-import { EditorEventType, KeyPressEvent } from '../../types';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { EditorEventType } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
-import makeColorInput from '../makeColorInput';
+import makeColorInput from './components/makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
-import Color4 from '../../Color4';
+import { Color4 } from '@js-draw/math';
 import { SavedToolbuttonState } from './BaseWidget';
 import { selectStrokeTypeKeyboardShortcutIds } from './keybindings';
+import { toolbarCSSPrefix } from '../constants';
+import makeThicknessSlider from './components/makeThicknessSlider';
+import makeGridSelector from './components/makeGridSelector';
 
 export interface PenTypeRecord {
 	// Description of the factory (e.g. 'Freehand line')
@@ -23,6 +26,10 @@ export interface PenTypeRecord {
 	// A unique ID for the facotory (e.g. 'chisel-tip-pen')
 	id: string;
 
+	// True if the pen type generates shapes (and should thus be shown in the GUI
+	// as a shape generator). Defaults to false.
+	isShapeBuilder?: boolean;
+
 	// Creates an `AbstractComponent` from pen input.
 	factory: ComponentBuilderFactory;
 }
@@ -30,6 +37,7 @@ export interface PenTypeRecord {
 export default class PenToolWidget extends BaseToolWidget {
 	private updateInputs: ()=> void = () => {};
 	protected penTypes: PenTypeRecord[];
+	protected shapelikeIDs: string[];
 
 	// A counter variable that ensures different HTML elements are given unique names/ids.
 	private static idCounter: number = 0;
@@ -39,6 +47,9 @@ export default class PenToolWidget extends BaseToolWidget {
 	) {
 		super(editor, tool, 'pen', localization);
 
+		// Pen types that correspond to
+		this.shapelikeIDs = [ 'pressure-sensitive-pen', 'freehand-pen' ];
+
 		// Default pen types
 		this.penTypes = [
 			{
@@ -57,30 +68,35 @@ export default class PenToolWidget extends BaseToolWidget {
 				name: this.localizationTable.arrowPen,
 				id: 'arrow',
 
+				isShapeBuilder: true,
 				factory: makeArrowBuilder,
 			},
 			{
 				name: this.localizationTable.linePen,
 				id: 'line',
 
+				isShapeBuilder: true,
 				factory: makeLineBuilder,
 			},
 			{
 				name: this.localizationTable.filledRectanglePen,
 				id: 'filled-rectangle',
 
+				isShapeBuilder: true,
 				factory: makeFilledRectangleBuilder,
 			},
 			{
 				name: this.localizationTable.outlinedRectanglePen,
 				id: 'outlined-rectangle',
 
+				isShapeBuilder: true,
 				factory: makeOutlinedRectangleBuilder,
 			},
 			{
 				name: this.localizationTable.outlinedCirclePen,
 				id: 'outlined-circle',
 
+				isShapeBuilder: true,
 				factory: makeOutlinedCircleBuilder,
 			}
 		];
@@ -127,18 +143,19 @@ export default class PenToolWidget extends BaseToolWidget {
 	}
 
 	private createIconForRecord(record: PenTypeRecord|null) {
-		const color = this.tool.getColor();
+		const style = {
+			...this.tool.getStyleValue().get(),
+		};
+
+		if (record?.factory) {
+			style.factory = record.factory;
+		}
 
 		const strokeFactory = record?.factory;
 		if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
-			// Use a square-root scale to prevent the pen's tip from overflowing.
-			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
-			const roundedTip = strokeFactory === makeFreehandLineBuilder;
-
-			return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
+			return this.editor.icons.makePenIcon(style);
 		} else {
-			const hasTransparency = color.a < 1;
-			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory, hasTransparency);
+			return this.editor.icons.makeIconFromFactory(style);
 		}
 	}
 
@@ -149,168 +166,101 @@ export default class PenToolWidget extends BaseToolWidget {
 
 	// Creates a widget that allows selecting different pen types
 	private createPenTypeSelector() {
-		const outerContainer = document.createElement('div');
-		outerContainer.classList.add(`${toolbarCSSPrefix}pen-type-selector`);
-
-		const scrollingContainer = document.createElement('div');
-		scrollingContainer.setAttribute('role', 'menu');
-		scrollingContainer.id = `${toolbarCSSPrefix}-pen-type-selector-id-${PenToolWidget.idCounter++}`;
-
-		scrollingContainer.onwheel = (event) => {
-			const hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
-							&& event.deltaX !== 0;
-			const eventScrollsPastLeft =
-				scrollingContainer.scrollLeft + event.deltaX <= 0;
-			const scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
-			const eventScrollsPastRight =
-				scrollRight + event.deltaX > scrollingContainer.scrollWidth;
-
-			// Stop the editor from receiving the event if it will scroll the pen type selector
-			// instead.
-			if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
-				event.stopPropagation();
-			}
-		};
-
-		const label = document.createElement('label');
-		label.innerText = this.localizationTable.selectPenType;
-		label.htmlFor = scrollingContainer.id;
-		outerContainer.appendChild(label);
-
-		// All buttons in a radiogroup need the same name attribute.
-		const radiogroupName = `${toolbarCSSPrefix}-pen-type-selector-${PenToolWidget.idCounter++}`;
-
-		const createTypeSelectorButton = (record: PenTypeRecord) => {
-			const buttonContainer = document.createElement('div');
-			buttonContainer.classList.add('pen-type-button');
-
-			const button = document.createElement('input');
-			button.type = 'radio';
-			button.name = radiogroupName;
-			button.id = `${toolbarCSSPrefix}-pen-type-button-${PenToolWidget.idCounter++}`;
-
-			const labelContainer = document.createElement('label');
-
-			const rebuildLabel = () => {
-				const labelText = document.createElement('span');
-
-				const icon = this.createIconForRecord(record);
-				icon.classList.add('icon');
-
-				// The title of the record
-				labelText.innerText = record.name;
-				labelContainer.htmlFor = button.id;
-
-				labelContainer.replaceChildren(icon, labelText);
-			};
-			rebuildLabel();
-
-			const updateButtonCSS = () => {
-				if (button.checked) {
-					buttonContainer.classList.add('checked');
-				} else {
-					buttonContainer.classList.remove('checked');
-				}
+		const allChoices = this.penTypes.map((penType, index) => {
+			return {
+				id: index,
+				makeIcon: () => this.createIconForRecord(penType),
+				title: penType.name,
+				isShapeBuilder: penType.isShapeBuilder ?? false,
 			};
+		});
 
-			button.oninput = () => {
-				// Setting the stroke factory fires an event that causes the value
-				// of this button to be set.
-				if (button.checked) {
-					this.tool.setStrokeFactory(record.factory);
-				}
-
-				updateButtonCSS();
-			};
-
-			buttonContainer.replaceChildren(button, labelContainer);
-			scrollingContainer.appendChild(buttonContainer);
-
-			// Set whether the button is checked, assuming the stroke factory associated
-			// with the button was set elsewhere.
-			const setChecked = (checked: boolean) => {
-				button.checked = checked;
-				updateButtonCSS();
+		const penSelector = makeGridSelector(
+			this.localizationTable.selectPenTip,
+			this.getCurrentPenTypeIdx(),
+			allChoices.filter(choice => !choice.isShapeBuilder),
+		);
 
-				if (checked) {
-					button.scrollIntoView();
-				}
-			};
-			setChecked(false);
-
-			// Updates the factory's icon based on the current style of the tool.
-			const updateIcon = () => {
-				rebuildLabel();
-			};
+		const shapeSelector = makeGridSelector(
+			this.localizationTable.selectShape,
+			this.getCurrentPenTypeIdx(),
+			allChoices.filter(choice => choice.isShapeBuilder),
+		);
 
-			return { setChecked, updateIcon };
+		const onSelectorUpdate = (newPenTypeIndex: number) => {
+			this.tool.setStrokeFactory(this.penTypes[newPenTypeIndex].factory);
 		};
 
-		const buttons: Array<ReturnType<typeof createTypeSelectorButton>> = [];
-		for (const penType of this.penTypes) {
-			buttons.push(createTypeSelectorButton(penType));
-		}
-		// invariant: buttons.length = this.penTypes.length
-
-		outerContainer.appendChild(scrollingContainer);
+		penSelector.value.onUpdate(onSelectorUpdate);
+		shapeSelector.value.onUpdate(onSelectorUpdate);
 
 		return {
 			setValue: (penTypeIndex: number) => {
-				// Select the value specified
-				if (penTypeIndex < 0 || penTypeIndex >= this.penTypes.length) {
-					console.error('Invalid pen type index', penTypeIndex);
-					return;
-				}
-
-				for (let i = 0; i < buttons.length; i++) {
-					buttons[i].setChecked(i === penTypeIndex);
-				}
+				penSelector.value.set(penTypeIndex);
+				shapeSelector.value.set(penTypeIndex);
 			},
 
 			updateIcons: () => {
-				buttons.forEach(button => button.updateIcon());
+				penSelector.updateIcons();
+				shapeSelector.updateIcons();
 			},
 
 			addTo: (parent: HTMLElement) => {
-				parent.appendChild(outerContainer);
+				penSelector.addTo(parent);
+				shapeSelector.addTo(parent);
 			},
 		};
 	}
 
-	protected override fillDropdown(dropdown: HTMLElement): boolean {
-		const container = document.createElement('div');
-		container.classList.add(`${toolbarCSSPrefix}spacedList`);
+	private setInputStabilizationEnabled(enabled: boolean) {
+		this.tool.setHasStabilization(enabled);
+	}
 
-		const thicknessRow = document.createElement('div');
+	protected createStabilizationOption() {
+		const stabilizationOption = document.createElement('div');
+		const stabilizationCheckbox = document.createElement('input');
+		const stabilizationLabel = document.createElement('label');
+		stabilizationLabel.innerText = this.localizationTable.inputStabilization;
 
-		// Thickness: Value of the input is squared to allow for finer control/larger values.
-		const thicknessLabel = document.createElement('label');
-		const thicknessInput = document.createElement('input');
-		const penTypeSelect = this.createPenTypeSelector();
+		stabilizationCheckbox.type = 'checkbox';
+		stabilizationCheckbox.id = `${toolbarCSSPrefix}-penInputStabilizationCheckbox-${PenToolWidget.idCounter++}`;
+		stabilizationLabel.htmlFor = stabilizationCheckbox.id;
 
-		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
-		thicknessInput.id = `${toolbarCSSPrefix}penThicknessInput${PenToolWidget.idCounter++}`;
+		stabilizationOption.replaceChildren(stabilizationLabel, stabilizationCheckbox);
 
-		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
-		thicknessLabel.setAttribute('for', thicknessInput.id);
+		stabilizationCheckbox.oninput = () => {
+			this.setInputStabilizationEnabled(stabilizationCheckbox.checked);
+		};
 
-		// Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
-		const inverseThicknessInputFn = (t: number) => Math.log10(t);
-		const thicknessInputFn = (t: number) => 10**t;
+		return {
+			update: () => {
+				stabilizationCheckbox.checked = !!this.tool.getInputMapper();
+			},
 
-		thicknessInput.type = 'range';
-		thicknessInput.min = `${inverseThicknessInputFn(2)}`;
-		thicknessInput.max = `${inverseThicknessInputFn(400)}`;
-		thicknessInput.step = '0.1';
-		thicknessInput.oninput = () => {
-			this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
+			addTo: (parent: HTMLElement) => {
+				parent.appendChild(stabilizationOption);
+			}
 		};
-		thicknessRow.appendChild(thicknessLabel);
-		thicknessRow.appendChild(thicknessInput);
+	}
+
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(
+			`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`
+		);
+
+		// Thickness: Value of the input is squared to allow for finer control/larger values.
+		const { container: thicknessRow, setValue: setThickness } = makeThicknessSlider(this.editor, thickness => {
+			this.tool.setThickness(thickness);
+		});
+
+		const penTypeSelect = this.createPenTypeSelector();
 
 		const colorRow = document.createElement('div');
 		const colorLabel = document.createElement('label');
-		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
+		const {
+			input: colorInput, container: colorInputContainer, setValue: setColorInputValue
+		} = makeColorInput(this.editor, color => {
 			this.tool.setColor(color);
 		});
 
@@ -321,19 +271,24 @@ export default class PenToolWidget extends BaseToolWidget {
 		colorRow.appendChild(colorLabel);
 		colorRow.appendChild(colorInputContainer);
 
+		const stabilizationOption = this.createStabilizationOption();
+
 		this.updateInputs = () => {
 			setColorInputValue(this.tool.getColor());
-			thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
+			setThickness(this.tool.getThickness());
 
 			penTypeSelect.updateIcons();
 
 			// Update the selected stroke factory.
 			penTypeSelect.setValue(this.getCurrentPenTypeIdx());
+			stabilizationOption.update();
 		};
 		this.updateInputs();
 
 		container.replaceChildren(colorRow, thicknessRow);
 		penTypeSelect.addTo(container);
+		stabilizationOption.addTo(container);
+
 		dropdown.replaceChildren(container);
 		return true;
 	}
@@ -368,6 +323,7 @@ export default class PenToolWidget extends BaseToolWidget {
 			color: this.tool.getColor().toHexString(),
 			thickness: this.tool.getThickness(),
 			strokeFactoryId: this.getCurrentPenType()?.id,
+			inputStabilization: !!this.tool.getInputMapper(),
 		};
 	}
 
@@ -405,5 +361,9 @@ export default class PenToolWidget extends BaseToolWidget {
 				}
 			}
 		}
+
+		if (state.inputStabilization !== undefined) {
+			this.setInputStabilizationEnabled(!!state.inputStabilization);
+		}
 	}
 }

package/src/toolbar/widgets/SelectionToolWidget.scss

@@ -0,0 +1,6 @@
+
+.selection-format-menu {
+	&.disabled {
+		opacity: 0.5;
+	}
+}

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,99 +1,84 @@
-import Color4 from '../../Color4';
+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, KeyPressEvent } from '../../types';
+import { EditorEventType } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
-import makeColorInput from '../makeColorInput';
+import makeColorInput from './components/makeColorInput';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
-import BaseWidget from './BaseWidget';
 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();
 
-class RestyleSelectionWidget extends BaseWidget {
-	private updateFormatData: ()=>void = () => {};
-
-	public constructor(editor: Editor, private selectionTool: SelectionTool, localizationTable?: ToolbarLocalization) {
-		super(editor, 'restyle-selection', localizationTable);
-
-		// Allow showing the dropdown even if this widget isn't selected yet
-		this.container.classList.add('dropdownShowable');
-
-		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
-			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
-				throw new Error('Invalid event type!');
-			}
-
-			if (toolEvt.tool === this.selectionTool) {
-				this.updateFormatData();
-			}
-		});
-	}
-
-	protected getTitle(): string {
-		return this.localizationTable.reformatSelection;
-	}
-
-	protected createIcon(){
-		return this.editor.icons.makeFormatSelectionIcon();
-	}
-
-	protected handleClick(): void {
-		this.setDropdownVisible(!this.isDropdownVisible());
-	}
+		if (selection) {
+			const updateStyleCommands = [];
 
-	protected override fillDropdown(dropdown: HTMLElement): boolean {
-		const container = document.createElement('div');
-		const colorRow = document.createElement('div');
-		const colorLabel = document.createElement('label');
-		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
-			const selection = this.selectionTool.getSelection();
-
-			if (selection) {
-				const updateStyleCommands = [];
-
-				for (const elem of selection.getSelectedObjects()) {
-					if (isRestylableComponent(elem)) {
-						updateStyleCommands.push(elem.updateStyle({ color }));
-					}
+			for (const elem of selection.getSelectedObjects()) {
+				if (isRestylableComponent(elem)) {
+					updateStyleCommands.push(elem.updateStyle({ color }));
 				}
-
-				const unitedCommand = uniteCommands(updateStyleCommands);
-				this.editor.dispatch(unitedCommand);
 			}
-		});
-
-		colorLabel.innerText = this.localizationTable.colorLabel;
-
-		this.updateFormatData = () => {
-			const selection = this.selectionTool.getSelection();
-			if (selection) {
-				colorInput.disabled = false;
 
-				const colors = [];
-				for (const elem of selection.getSelectedObjects()) {
-					if (isRestylableComponent(elem)) {
-						const color = elem.getStyle().color;
-						if (color) {
-							colors.push(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;
 			}
-		};
+			setColorInputValue(Color4.average(colors));
+		} else {
+			colorInput.disabled = true;
+			container.classList.add('disabled');
+			setColorInputValue(Color4.transparent);
+		}
+	};
 
-		colorRow.replaceChildren(colorLabel, colorInputContainer);
-		container.replaceChildren(colorRow);
-		dropdown.replaceChildren(container);
-		return true;
-	}
-}
+	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
 	) {
@@ -101,7 +86,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
 
 		const resizeButton = new ActionButtonWidget(
 			editor, 'resize-btn',
-			() => editor.icons.makeResizeViewportIcon(),
+			() => editor.icons.makeResizeImageToSelectionIcon(),
 			this.localizationTable.resizeImageToSelection,
 			() => {
 				this.resizeImageToSelection();
@@ -126,25 +111,19 @@ export default class SelectionToolWidget extends BaseToolWidget {
 			async () => {
 				const selection = this.tool.getSelection();
 				this.editor.dispatch(await selection!.duplicateSelectedObjects());
+				this.setDropdownVisible(false);
 			},
 			localization,
 		);
-		const restyleButton = new RestyleSelectionWidget(
-			editor,
-			this.tool,
-			localization,
-		);
 
 		this.addSubWidget(resizeButton);
 		this.addSubWidget(deleteButton);
 		this.addSubWidget(duplicateButton);
-		this.addSubWidget(restyleButton);
 
 		const updateDisabled = (disabled: boolean) => {
 			resizeButton.setDisabled(disabled);
 			deleteButton.setDisabled(disabled);
 			duplicateButton.setDisabled(disabled);
-			restyleButton.setDisabled(disabled);
 		};
 		updateDisabled(true);
 
@@ -159,6 +138,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
 				const hasSelection = selection && selection.getSelectedItemCount() > 0;
 
 				updateDisabled(!hasSelection);
+				this.updateFormatMenu();
 			}
 		});
 	}
@@ -194,4 +174,22 @@ export default class SelectionToolWidget extends BaseToolWidget {
 	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

@@ -1,10 +1,10 @@
-import Color4 from '../../Color4';
+import { Color4 } from '@js-draw/math';
 import Editor from '../../Editor';
 import TextTool from '../../tools/TextTool';
 import { EditorEventType } from '../../types';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { toolbarCSSPrefix } from '../constants';
 import { ToolbarLocalization } from '../localization';
-import makeColorInput from '../makeColorInput';
+import makeColorInput from './components/makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 
@@ -33,7 +33,9 @@ export default class TextToolWidget extends BaseToolWidget {
 	private static idCounter: number = 0;
 	protected override fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
-		container.classList.add(`${toolbarCSSPrefix}spacedList`);
+		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');
@@ -44,7 +46,9 @@ export default class TextToolWidget extends BaseToolWidget {
 		const sizeInput = document.createElement('input');
 		const sizeLabel = document.createElement('label');
 
-		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
+		const {
+			input: colorInput, container: colorInputContainer, setValue: setColorInputValue
+		} = makeColorInput(this.editor, color => {
 			this.tool.setColor(color);
 		});
 		const colorLabel = document.createElement('label');

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

@@ -0,0 +1,5 @@
+@use "./makeThicknessSlider.scss";
+@use "./makeColorInput.scss";
+@use "./makeSeparator.scss";
+@use "./makeFileInput.scss";
+@use "./makeGridSelector.scss";