feat(mind map): offer the downward layout in the direction bar (#10940)

Author: eliandoran

apps/client/src/translations/en/translation.json

@@ -3775,7 +3775,8 @@
     "exit-fullscreen": "Exit fullscreen",
     "direction-left": "Branches to the left",
     "direction-right": "Branches to the right",
-    "direction-side": "Branches to both sides"
+    "direction-side": "Branches to both sides",
+    "direction-down": "Branches downwards"
   },
   "llm": {
     "disabled_placeholder": "AI features are turned off. Enable them to configure providers and MCP.",

apps/client/src/widgets/type_widgets/mind_map/MapToolbar.css

@@ -22,13 +22,13 @@
 }
 
 /*
- * The three marks a direction is chosen by, which are Mind Elixir's own (MIT, © 2019 DjZhou): each
+ * The four marks a direction is chosen by, which are Mind Elixir's own (MIT, © 2019 DjZhou): each
  * draws the very layout it sets, and Trilium's icon set has nothing that says it. They are drawn as
  * a mask filled with the button's own color rather than as pictures, so that they take the color a
  * boxicon would — including the one a pressed or hovered button lends its icon.
  *
- * Sized in `em` against the font size the theme gives an icon button's mark, so that the three sit
- * at the size the four beside them do and follow that setting wherever it is changed.
+ * Sized in `em` against the font size the theme gives an icon button's mark, so that the four sit
+ * at the size the ones beside them do and follow that setting wherever it is changed.
  */
 .mind-map-container .mind-map-direction-icon::before {
     content: "";
@@ -60,3 +60,10 @@
     -webkit-mask-image: url("./direction-side.svg");
     mask-image: url("./direction-side.svg");
 }
+
+/* The layout Mind Elixir added last came without a mark of its own, its own bar never having offered
+   it. Drawn here from the rightward one turned a quarter turn, which is what the layout itself is. */
+.mind-map-container .mind-map-direction-down::before {
+    -webkit-mask-image: url("./direction-down.svg");
+    mask-image: url("./direction-down.svg");
+}

apps/client/src/widgets/type_widgets/mind_map/MapToolbar.spec.tsx

@@ -27,7 +27,7 @@ function buildMind({ scaleVal = 1, direction = 1, isFocusMode = false } = {}) {
     });
 
     // As the map does: it is laid out afresh, and says only that its branches have been drawn.
-    const relayOut = (value: 0 | 1 | 2) => vi.fn(() => {
+    const relayOut = (value: 0 | 1 | 2 | 3) => vi.fn(() => {
         mind.direction = value;
         fire("linkDiv");
     });
@@ -48,6 +48,7 @@ function buildMind({ scaleVal = 1, direction = 1, isFocusMode = false } = {}) {
         initLeft: relayOut(0),
         initRight: relayOut(1),
         initSide: relayOut(2),
+        initDown: relayOut(3),
         // As the map does: it is laid out afresh, showing all it has again.
         cancelFocus: vi.fn(() => {
             mind.isFocusMode = false;
@@ -79,6 +80,7 @@ const FULLSCREEN = 4;
 const LEFT = 0;
 const RIGHT = 1;
 const SIDE = 2;
+const DOWN = 3;
 
 /** Builds a bar and settles it, so that what it listens to is listened to before it is spoken to. */
 function renderBar(bar: ComponentChild) {
@@ -260,13 +262,16 @@ describe("MapToolbar", () => {
 });
 
 describe("DirectionToolbar", () => {
-    it("offers the three layouts the map's own bar did, each wearing its own mark", () => {
+    // The three the map's own bar offered, and the downward one Mind Elixir added without ever
+    // putting it in that bar.
+    it("offers every layout the map can take, each wearing its own mark", () => {
         const container = renderDirections(buildMind());
 
         expect(buttons(container).map((button) => button.className)).toEqual([
             expect.stringContaining("mind-map-direction-left"),
             expect.stringContaining("mind-map-direction-right"),
-            expect.stringContaining("mind-map-direction-side")
+            expect.stringContaining("mind-map-direction-side"),
+            expect.stringContaining("mind-map-direction-down")
         ]);
     });
 
@@ -280,6 +285,9 @@ describe("DirectionToolbar", () => {
         press(container, SIDE);
         expect(mind.initSide).toHaveBeenCalled();
 
+        press(container, DOWN);
+        expect(mind.initDown).toHaveBeenCalled();
+
         press(container, RIGHT);
         expect(mind.initRight).toHaveBeenCalled();
     });
@@ -289,12 +297,17 @@ describe("DirectionToolbar", () => {
         const container = renderDirections(mind);
 
         expect(buttons(container).map((button) => button.classList.contains("active")))
-            .toEqual([ false, true, false ]);
+            .toEqual([ false, true, false, false ]);
 
         press(container, SIDE);
 
         expect(buttons(container).map((button) => button.classList.contains("active")))
-            .toEqual([ false, false, true ]);
+            .toEqual([ false, false, true, false ]);
+
+        press(container, DOWN);
+
+        expect(buttons(container).map((button) => button.classList.contains("active")))
+            .toEqual([ false, false, false, true ]);
     });
 
     it("catches up with a map that took a direction from the content it was filled with", () => {
@@ -306,6 +319,6 @@ describe("DirectionToolbar", () => {
         act(() => mind.bus.fire("linkDiv"));
 
         expect(buttons(container).map((button) => button.classList.contains("active")))
-            .toEqual([ true, false, false ]);
+            .toEqual([ true, false, false, false ]);
     });
 });

apps/client/src/widgets/type_widgets/mind_map/MapToolbar.tsx

@@ -127,9 +127,9 @@ export default function MapToolbar({ mind }: MapToolbarProps) {
 
 /**
  * The bar standing in the top corner opposite: which way the map's branches run from its root —
- * to the left of it, to the right of it, or to either side.
+ * to the left of it, to the right of it, to either side, or below it.
  *
- * The three are a choice rather than three things to do, so the one the map is laid out by is shown
+ * The four are a choice rather than four things to do, so the one the map is laid out by is shown
  * pressed. Their marks are Mind Elixir's own, kept because they draw the very thing they set and
  * nothing in Trilium's icon set says it (see MapToolbar.css).
  */
@@ -153,7 +153,8 @@ export function DirectionToolbar({ mind }: MapToolbarProps) {
 }
 
 /**
- * The ways a map is laid out, in the order Mind Elixir offered them: each with the value
+ * The ways a map is laid out, in the order Mind Elixir offered them — the downward one last, being
+ * the one it added last, and the only one its own bar never carried: each with the value
  * `mind.direction` reads as, the mark it wears, and the call that lays the map out that way.
  *
  * Named afresh on every render, which follows a change of locale.
@@ -177,6 +178,12 @@ function buildDirections() {
             icon: "mind-map-direction-side",
             label: t("mind-map.direction-side"),
             apply: (mind: MindElixirInstance) => mind.initSide()
+        },
+        {
+            value: 3,
+            icon: "mind-map-direction-down",
+            label: t("mind-map.direction-down"),
+            apply: (mind: MindElixirInstance) => mind.initDown()
         }
     ];
 }