feat: Hide "shape" or "pen type" selectors when they have no content

packages/js-draw/src/testing/createEditor.ts

@@ -1,11 +1,16 @@
 import { RenderingMode } from '../rendering/Display';
 import Editor, { EditorSettings } from '../Editor';
+import getLocalizationTable from '../localizations/getLocalizationTable';
 
 /** Creates an editor. Should only be used in test files. */
 export default (settings?: Partial<EditorSettings>) => {
 	if (jest === undefined) {
 		throw new Error('Files in the testing/ folder should only be used in tests!');
 	}
 
-	return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer, ...settings });
+	return new Editor(document.body, {
+		renderingMode: RenderingMode.DummyRenderer,
+		localization: getLocalizationTable(['en']),
+		...settings,
+	});
 };

packages/js-draw/src/testing/findNodeWithText.ts

@@ -1,11 +1,21 @@
+interface Options {
+	tag?: string;
+}
+
 /** Returns the first node or element with `textContent` matching `expectedText`. */
-const findNodeWithText = (expectedText: string, parent: Node): Node | null => {
+const findNodeWithText = (expectedText: string, parent: Node, options: Options): Node | null => {
+	const { tag } = options;
+
 	if (parent.textContent === expectedText) {
-		return parent;
+		const matchesTag = parent instanceof Element && (!tag || tag.toUpperCase() === parent.tagName);
+
+		if (matchesTag) {
+			return parent;
+		}
 	}
 
 	for (const child of parent.childNodes) {
-		const results = findNodeWithText(expectedText, child);
+		const results = findNodeWithText(expectedText, child, options);
 		if (results) {
 			return results;
 		}

packages/js-draw/src/toolbar/widgets/PenToolWidget.test.ts

@@ -1,8 +1,9 @@
+import Editor from '../../Editor';
 import { PenTool } from '../../tools/lib';
 import createEditor from '../../testing/createEditor';
 import { makeDropdownToolbar } from '../DropdownToolbar';
 import PenToolWidget, { PenTypeRecord } from './PenToolWidget';
-import getLocalizationTable from '../../localizations/getLocalizationTable';
+import findNodeWithText from '../../testing/findNodeWithText';
 
 // Exposes protected methods for testing
 class TestPenToolWidget extends PenToolWidget {
@@ -14,6 +15,17 @@ class TestPenToolWidget extends PenToolWidget {
 	}
 }
 
+const addAndOpenTestWidget = (editor: Editor) => {
+	const toolbar = makeDropdownToolbar(editor);
+
+	const pen = editor.toolController.getMatchingTools(PenTool)[0];
+	const toolWidget = new TestPenToolWidget(editor, pen);
+	toolbar.addWidget(toolWidget);
+
+	toolWidget.toggleDropdownVisible();
+	expect(toolWidget.getDropdownVisible()).toBe(true);
+};
+
 describe('PenToolWidget', () => {
 	test.each([
 		{
@@ -33,16 +45,8 @@ describe('PenToolWidget', () => {
 				pens: {
 					filterPenTypes: filter,
 				},
-				localization: getLocalizationTable(['en']),
 			});
-			const toolbar = makeDropdownToolbar(editor);
-
-			const pen = editor.toolController.getMatchingTools(PenTool)[0];
-			const toolWidget = new TestPenToolWidget(editor, pen);
-			toolbar.addWidget(toolWidget);
-
-			toolWidget.toggleDropdownVisible();
-			expect(toolWidget.getDropdownVisible()).toBe(true);
+			addAndOpenTestWidget(editor);
 
 			const opionExists = (name: string) => {
 				return !!document.querySelector(`.toolbar-grid-selector *[title=${JSON.stringify(name)}]`);
@@ -58,4 +62,23 @@ describe('PenToolWidget', () => {
 			editor.remove();
 		},
 	);
+
+	test.each([true, false])(
+		'if there are no shape pens, the shape type selector should be invisible (or vice versa) (where mustBeShapeBuilder = %j)',
+		(mustBeShapeBuilder) => {
+			const editor = createEditor({
+				pens: {
+					filterPenTypes: (penType) => !!penType.isShapeBuilder === mustBeShapeBuilder,
+				},
+			});
+			addAndOpenTestWidget(editor);
+
+			expect(!!findNodeWithText('Pen type', editor.getRootElement(), { tag: 'label' })).toBe(
+				!mustBeShapeBuilder,
+			);
+			expect(!!findNodeWithText('Shape', editor.getRootElement(), { tag: 'label' })).toBe(
+				mustBeShapeBuilder,
+			);
+		},
+	);
 });

packages/js-draw/src/toolbar/widgets/PenToolWidget.ts

@@ -208,16 +208,18 @@ export default class PenToolWidget extends BaseToolWidget {
 			};
 		});
 
+		const penItems = allChoices.filter((choice) => !choice.isShapeBuilder);
 		const penSelector = makeGridSelector(
 			this.localizationTable.selectPenType,
 			this.getCurrentPenTypeIdx(),
-			allChoices.filter((choice) => !choice.isShapeBuilder),
+			penItems,
 		);
 
+		const shapeItems = allChoices.filter((choice) => choice.isShapeBuilder);
 		const shapeSelector = makeGridSelector(
 			this.localizationTable.selectShape,
 			this.getCurrentPenTypeIdx(),
-			allChoices.filter((choice) => choice.isShapeBuilder),
+			shapeItems,
 		);
 
 		const onSelectorUpdate = (newPenTypeIndex: number) => {
@@ -244,8 +246,13 @@ export default class PenToolWidget extends BaseToolWidget {
 			},
 
 			addTo: (parent: HTMLElement) => {
-				penSelector.addTo(parent);
-				shapeSelector.addTo(parent);
+				if (penItems.length) {
+					penSelector.addTo(parent);
+				}
+
+				if (shapeItems.length) {
+					shapeSelector.addTo(parent);
+				}
 			},
 		};
 	}

packages/js-draw/src/toolbar/widgets/components/makeGridSelector.ts

@@ -57,7 +57,7 @@ const makeGridSelector = <ChoiceIdType>(
 	stopPropagationOfScrollingWheelEvents(menuContainer);
 
 	const label = document.createElement('label');
-	label.innerText = labelText;
+	label.textContent = labelText;
 	label.htmlFor = menuContainer.id;
 	outerContainer.appendChild(label);