From 143f90fb859c67c8f731409bcf2501d0ff2462a3 Mon Sep 17 00:00:00 2001
From: Oleg Butakov <butakovoleg@gmail.com>
Date: Tue, 19 Nov 2024 18:50:33 +0100
Subject: [PATCH] Some progress on the frontend.

---
 source/titfront/package.json                  |   4 +-
 source/titfront/src/components/App.tsx        |  56 ++++++
 .../titfront/src/components/PhysicsPanel.tsx  | 103 ++++++++++
 .../src/components/common/ResizableDiv.tsx    | 136 +++++++++++++
 .../src/components/common/Sidebar.tsx         |  75 +++++++
 .../src/components/common/TreeView.tsx        | 133 ++++++++++++
 .../titfront/src/components/view/Canvas.tsx   | 189 ++++++++++++++++++
 source/titfront/src/main.tsx                  |  37 +---
 8 files changed, 699 insertions(+), 34 deletions(-)
 create mode 100644 source/titfront/src/components/App.tsx
 create mode 100644 source/titfront/src/components/PhysicsPanel.tsx
 create mode 100644 source/titfront/src/components/common/ResizableDiv.tsx
 create mode 100644 source/titfront/src/components/common/Sidebar.tsx
 create mode 100644 source/titfront/src/components/common/TreeView.tsx
 create mode 100644 source/titfront/src/components/view/Canvas.tsx

diff --git a/source/titfront/package.json b/source/titfront/package.json
index e7cc6092c..6b3192668 100644
--- a/source/titfront/package.json
+++ b/source/titfront/package.json
@@ -13,7 +13,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "three": "^0.170.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -21,6 +22,7 @@
     "@types/node": "^18.3.12",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/three": "^0.170.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
diff --git a/source/titfront/src/components/App.tsx b/source/titfront/src/components/App.tsx
new file mode 100644
index 000000000..ce4e85b21
--- /dev/null
+++ b/source/titfront/src/components/App.tsx
@@ -0,0 +1,56 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of the Tit Solver project, under the MIT License.
+ * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import React from "react";
+import { FiWind, FiPieChart, FiMove } from "react-icons/fi";
+
+import { MyCanvas } from "./view/Canvas";
+import { PhysicsPanel } from "./PhysicsPanel";
+import { Panel, Sidebar } from "./common/Sidebar";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+const Footer: React.FC = () => {
+  return <div className="h-6 bg-gradient-to-t from-gray-100 to-gray-200" />;
+};
+
+const Viewport: React.FC = () => {
+  return (
+    <div className="w-full h-full transition-none">
+      <MyCanvas />
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const App: React.FC = () => {
+  return (
+    <div className="flex flex-col h-screen w-screen select-none bg-gray-100">
+      <div className="flex-1 flex">
+        {/* Left sidebar. */}
+        <Sidebar>
+          <Panel label="Scene" icon={<FiMove />}>
+            Scene
+          </Panel>
+          <Panel label="Physics" icon={<FiWind />}>
+            <PhysicsPanel />
+          </Panel>
+          <Panel label="Visual" icon={<FiPieChart />}>
+            View
+          </Panel>
+        </Sidebar>
+        <div className="flex-grow relative">
+          {/* Main viewport. */}
+          <Viewport />
+        </div>
+      </div>
+      {/* Footer. */}
+      <Footer />
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/source/titfront/src/components/PhysicsPanel.tsx b/source/titfront/src/components/PhysicsPanel.tsx
new file mode 100644
index 000000000..4d18854b9
--- /dev/null
+++ b/source/titfront/src/components/PhysicsPanel.tsx
@@ -0,0 +1,103 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of the Tit Solver project, under the MIT License.
+ * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import React from "react";
+import { TreeView2 } from "./common/TreeView";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+const treeData = [
+  {
+    id: "14",
+    name: "Kernel",
+    descr:
+      "A very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+  },
+  {
+    id: "1",
+    name: "Parent 1",
+    descr:
+      "A very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+    children: [
+      {
+        id: "2",
+        value: "123",
+        name: "Child 1-1",
+      },
+      {
+        id: "3",
+        name: "Child 1-2",
+        descr:
+          "A very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+        children: [
+          {
+            id: "4",
+            name: "Child 1-2-1",
+            descr:
+              "A very very very **very** very very very very very very very very very very very very very very very very very very very very very very very long description.",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "5",
+    name: "Parent 2",
+    descr:
+      "A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+    children: [
+      {
+        id: "6",
+        name: "Child 2-1",
+        descr:
+          "A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+      },
+    ],
+  },
+  {
+    id: "7",
+    name: "Parent 3",
+    descr:
+      "A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+    children: [
+      {
+        id: "8",
+        name: "Child 3-1",
+        descr:
+          "A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+      },
+      {
+        id: "9",
+        name: "Child 3-2",
+        descr:
+          "A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+        children: [
+          {
+            id: "10",
+            name: "Child 3-2-1",
+            descr:
+              "A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+            children: [
+              {
+                id: "11",
+                name: "Child 3-2-1-1",
+                descr:
+                  "A very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long description.",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const PhysicsPanel: React.FC = () => {
+  return <TreeView2 nodes={treeData} />;
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/source/titfront/src/components/common/ResizableDiv.tsx b/source/titfront/src/components/common/ResizableDiv.tsx
new file mode 100644
index 000000000..29af2c401
--- /dev/null
+++ b/source/titfront/src/components/common/ResizableDiv.tsx
@@ -0,0 +1,136 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of the Tit Solver project, under the MIT License.
+ * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import React, { useState } from "react";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const HorizontalResizableDiv = ({
+  children,
+  minWidth = 120,
+  maxWidth = 720,
+  initWidth = 320,
+}: {
+  children: React.ReactNode;
+  minWidth?: number;
+  maxWidth?: number;
+  initWidth?: number;
+}) => {
+  const [widthState, setWidthState] = useState(initWidth);
+
+  const resizeHandler = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    // Save the initial mouse position.
+    const initX = e.clientX;
+
+    // Update the width of the sidebar once the mouse is moved.
+    const onMouseMove = (e: MouseEvent) => {
+      const delta = e.clientX - initX;
+      const newWidth = Math.max(
+        minWidth,
+        Math.min(maxWidth, widthState + delta)
+      );
+      setWidthState(newWidth);
+    };
+
+    // Remove the event listener once the mouse is released.
+    const onMouseUp = () => {
+      // Reset the cursor back to the default.
+      document.body.style.cursor = "default";
+      // Remove the event listener.
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+
+    // Change the cursor to the resize cursor.
+    document.body.style.cursor = "ew-resize";
+
+    // Setup the event listener.
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+
+  return (
+    <div className="flex w-full">
+      <div
+        className="flex-grow overflow-auto"
+        style={{ width: `${widthState}px` }}
+      >
+        {children}
+      </div>
+      <div
+        className="w-0.5 hover:cursor-ew-resize bg-gray-300"
+        onMouseDown={resizeHandler}
+      />
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const VerticalResizableDiv = ({
+  children,
+  minHeight = 120,
+  maxHeight = 720,
+  initHeight = 320,
+}: {
+  children: React.ReactNode;
+  minHeight?: number;
+  maxHeight?: number;
+  initHeight?: number;
+}) => {
+  const [heightState, setHeightState] = useState(initHeight);
+
+  const resizeHandler = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    // Save the initial mouse position.
+    const initY = e.clientY;
+
+    // Update the height of the sidebar once the mouse is moved.
+    const onMouseMove = (e: MouseEvent) => {
+      const delta = e.clientY - initY;
+      const newHeight = Math.max(
+        minHeight,
+        Math.min(maxHeight, heightState + delta)
+      );
+      setHeightState(newHeight);
+    };
+
+    // Remove the event listener once the mouse is released.
+    const onMouseUp = () => {
+      // Reset the cursor back to the default.
+      document.body.style.cursor = "default";
+      // Remove the event listener.
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+
+    // Change the cursor to the resize cursor.
+    document.body.style.cursor = "ns-resize";
+
+    // Setup the event listener.
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div
+        className="flex-grow overflow-auto"
+        style={{ height: `${heightState}px` }}
+      >
+        {children}
+      </div>
+      <div
+        className="h-0.5 hover:cursor-ns-resize bg-gray-300"
+        onMouseDown={resizeHandler}
+      />
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/source/titfront/src/components/common/Sidebar.tsx b/source/titfront/src/components/common/Sidebar.tsx
new file mode 100644
index 000000000..3eb34110a
--- /dev/null
+++ b/source/titfront/src/components/common/Sidebar.tsx
@@ -0,0 +1,75 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of the Tit Solver project, under the MIT License.
+ * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import React, { useState } from "react";
+
+import { HorizontalResizableDiv, VerticalResizableDiv } from "./ResizableDiv";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+interface TabProps {
+  label: string;
+  end?: boolean;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const Panel: React.FC<TabProps> = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const Sidebar = ({
+  children,
+}: {
+  children: React.ReactElement<TabProps>[];
+}) => {
+  // Handle the active panel.
+  const [activePanelIndex, setActivePanelIndex] = useState(1);
+
+  const togglePanel = (index: number) => {
+    setActivePanelIndex((prev) => (prev === index ? -1 : index));
+  };
+
+  return (
+    <div className="flex h-full">
+      {/* Sidebar panel icons. */}
+      <div className="w-12 pt-2 flex flex-col items-center shadow-inner bg-gradient-to-r from-gray-100 to-gray-200">
+        {children.map((panel, index) => (
+          <div
+            key={index}
+            className={`p-2 mb-4 w-10 h-10 flex items-center justify-center
+                        rounded text-6xl text-gray-800 ${
+                          index === activePanelIndex
+                            ? "bg-gray-400 shadow text-black"
+                            : "hover:bg-gray-300"
+                        }`}
+            onClick={() => togglePanel(index)}
+          >
+            {panel.props.icon}
+          </div>
+        ))}
+      </div>
+      {/* Sidebar active panel. */}
+      {activePanelIndex !== -1 && (
+        <HorizontalResizableDiv>
+          <div className="flex items-center h-10 border-b-2 border-gray-300 bg-gray-200">
+            <span className="p-3 text-sm font-bold cursor-default">
+              {children[activePanelIndex].props.label}
+            </span>
+          </div>
+          <VerticalResizableDiv>
+            <div className="p-1 inner-shadow-xl">
+              {children[activePanelIndex]}
+            </div>
+          </VerticalResizableDiv>
+        </HorizontalResizableDiv>
+      )}
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/source/titfront/src/components/common/TreeView.tsx b/source/titfront/src/components/common/TreeView.tsx
new file mode 100644
index 000000000..c1db8b01e
--- /dev/null
+++ b/source/titfront/src/components/common/TreeView.tsx
@@ -0,0 +1,133 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of the Tit Solver project, under the MIT License.
+ * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import React, { useState } from "react";
+import { FiChevronDown, FiChevronRight, FiDroplet } from "react-icons/fi";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+interface TreeNode {
+  name: string;
+  descr?: string;
+  value?: string;
+  parent?: TreeNode;
+  children?: TreeNode[];
+}
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const TreeView2 = ({ nodes }: { nodes: TreeNode[] }) => {
+  const [expandedNodes, setExpandedNodes] = useState<Set<TreeNode>>(new Set());
+
+  const showNode = (node: TreeNode) => {
+    setExpandedNodes((prevExpandedNodes) => {
+      const newExpandedNodes = new Set(prevExpandedNodes);
+      newExpandedNodes.add(node);
+      return newExpandedNodes;
+    });
+  };
+
+  const hideNode = (node: TreeNode) => {
+    setExpandedNodes((prevExpandedNodes) => {
+      const newExpandedNodes = new Set(prevExpandedNodes);
+      newExpandedNodes.delete(node);
+      return newExpandedNodes;
+    });
+  };
+
+  const toggleNode = (node: TreeNode) => {
+    setExpandedNodes((prevExpandedNodes) => {
+      const newExpandedNodes = new Set(prevExpandedNodes);
+      if (newExpandedNodes.has(node)) {
+        newExpandedNodes.delete(node);
+      } else {
+        newExpandedNodes.add(node);
+      }
+      return newExpandedNodes;
+    });
+  };
+
+  const [selectedNode, setSelectedNode] = useState<TreeNode | null>(null);
+
+  const flattenVisibleTree = (
+    depth: number,
+    nodes: TreeNode[]
+  ): [number, TreeNode][] => {
+    return nodes.flatMap((node) => [
+      [depth, node],
+      ...(expandedNodes.has(node) && node.children
+        ? flattenVisibleTree(depth + 1, node.children)
+        : []),
+    ]);
+  };
+
+  const visibleNodes = flattenVisibleTree(/*depth=*/ 0, nodes);
+
+  // Keyboard navigation.
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    const node = selectedNode || nodes[0];
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const index = visibleNodes.findIndex(([, n]) => n === node);
+      const nextIndex = (index + 1) % visibleNodes.length;
+      const nextNode = visibleNodes[nextIndex][1];
+      setSelectedNode(nextNode);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const index = visibleNodes.findIndex(([, n]) => n === node);
+      const prevIndex = (index - 1 + visibleNodes.length) % visibleNodes.length;
+      const prevNode = visibleNodes[prevIndex][1];
+      setSelectedNode(prevNode);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      if (node.children) showNode(node);
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      if (node.children) hideNode(node);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      if (node.children) {
+        if (expandedNodes.has(node)) hideNode(node);
+        else showNode(node);
+      }
+    }
+  };
+
+  // Determine the icon to display for a node.
+  const nodeIcon = (node: TreeNode) => {
+    if (!node.children) {
+      return <FiDroplet />;
+    }
+    return expandedNodes.has(node) ? <FiChevronDown /> : <FiChevronRight />;
+  };
+
+  return (
+    <div tabIndex={-1} onKeyDown={handleKeyDown} className="outline-none">
+      {visibleNodes.map(([depth, node]) => (
+        <div
+          key={node.name}
+          className={`flex rounded hover:bg-blue-200 focus:outline ${
+            node === selectedNode ? "bg-gray-300" : ""
+          }`}
+        >
+          {[...Array<number>(depth)].map(() => (
+            <div key={depth} className="ml-2.5 mr-0 w-0.5 bg-gray-200" />
+          ))}
+          <div className="flex-grow">
+            <div
+              className="flex items-center px-1.5 text-sm"
+              onClick={() => (toggleNode(node), setSelectedNode(node))}
+            >
+              <span className="mr-1">{nodeIcon(node)}</span>
+              <span className="cursor-default">{node.name}</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/source/titfront/src/components/view/Canvas.tsx b/source/titfront/src/components/view/Canvas.tsx
new file mode 100644
index 000000000..fca97fb46
--- /dev/null
+++ b/source/titfront/src/components/view/Canvas.tsx
@@ -0,0 +1,189 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of the Tit Solver project, under the MIT License.
+ * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import * as THREE from "three";
+import React, { useEffect, useRef } from "react";
+
+import { useTitView } from "../../TitViewProvider";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+const Orientation = ({ rotation }: { rotation?: THREE.Euler }) => {
+  if (!rotation) return null;
+
+  const q = new THREE.Quaternion();
+  q.setFromEuler(rotation);
+  q.invert();
+
+  const OrientAxis = (axis: "x" | "y" | "z") => {
+    const [lightBgColor, bgColor] = {
+      x: ["bg-red-100", "bg-red-200 hover:bg-red-300"],
+      y: ["bg-green-100", "bg-green-200 hover:bg-green-300"],
+      z: ["bg-blue-100", "bg-blue-200 hover:bg-blue-300"],
+    }[axis];
+
+    const borderColor = {
+      x: "border-red-200 hover:border-red-300",
+      y: "border-green-200 hover:border-green-300",
+      z: "border-blue-200 hover:border-blue-300",
+    }[axis];
+
+    let e = {
+      x: new THREE.Vector3(+1, 0, 0),
+      y: new THREE.Vector3(0, -1, 0),
+      z: new THREE.Vector3(0, 0, -1),
+    }[axis];
+
+    e = e.applyQuaternion(q);
+
+    const diam = 30; // Diameter of the axis circle, in pixels.
+    const dist = 45; // Distance from origin to axis, in pixels.
+
+    // Calculate the angle of the axis and the transformed distance.
+    const angle = Math.atan2(e.y, e.x);
+    const angledDist = dist * Math.hypot(e.x, e.y) - diam / 2;
+
+    // Calculate depth of the axis.
+    const baseZ = 20;
+    const posCircleZ = Math.round(baseZ * (1 - e.z));
+    const posLineZ = Math.round(baseZ * (1 - 0.5 * e.z));
+    const negLineZ = Math.round(baseZ * (1 + 0.5 * e.z));
+    const negCircleZ = Math.round(baseZ * (1 + e.z));
+
+    return (
+      <>
+        {/* Positive direction circle. */}
+        <div
+          className={`
+            absolute
+            flex items-center justify-center
+            rounded-full
+            shadow
+            ${bgColor}
+            font-black text-gray-400
+          `}
+          style={{
+            width: diam,
+            height: diam,
+            zIndex: posCircleZ,
+            transform: `
+              translate(-50%, -50%)
+              translate(${e.x * dist}px, ${e.y * dist}px)
+            `,
+          }}
+          onClick={() => rotation.set(0, 0, 0)}
+        >
+          {axis.toUpperCase()}
+        </div>
+        {/* Line from origin to positive direction. */}
+        <div
+          className={`
+            absolute
+            shadow
+            ${bgColor}
+          `}
+          style={{
+            width: angledDist,
+            height: 4,
+            zIndex: posLineZ,
+            transform: `
+              translate(-50%, -50%)
+              rotate(${angle}rad)
+              translate(50%, 0)
+            `,
+          }}
+        />
+        {/* Line from origin to negative direction. */}
+        <div
+          className={`
+            absolute
+            shadow
+            ${bgColor}
+          `}
+          style={{
+            width: angledDist,
+            height: 4,
+            zIndex: negLineZ,
+            transform: `
+              translate(-50%, -50%)
+              rotate(${angle}rad)
+              translate(-50%, 0)
+            `,
+          }}
+        />
+        {/* Negative direction circle. */}
+        <div
+          className={`
+            absolute
+            shadow
+            rounded-full
+            ${lightBgColor}
+            border-4 ${borderColor}
+          `}
+          style={{
+            width: diam,
+            height: diam,
+            zIndex: negCircleZ,
+            transform: `
+              translate(-50%, -50%)
+              translate(${-e.x * dist}px, ${-e.y * dist}px)
+            `,
+          }}
+        />
+      </>
+    );
+  };
+
+  return (
+    <div className="absolute top-20 left-20">
+      {OrientAxis("x")}
+      {OrientAxis("y")}
+      {OrientAxis("z")}
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+const Canvas: React.FC = () => {
+  const titView = useTitView();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  useEffect(() => {
+    if (canvasRef.current === null) {
+      throw new Error("Canvas element is not initialized!");
+    }
+    titView.canvas = canvasRef.current;
+    /** @todo Use the actual canvas size. */
+    titView.initializeRenderer(800.0, 600.0);
+
+    // Start the rendering loop.
+    let lastFrameTime = performance.now();
+    let animationFrameID: number;
+    const renderLoop = (currentTime: number) => {
+      const deltaTime = (currentTime - lastFrameTime) / 1000;
+      titView.renderFrame(deltaTime);
+      lastFrameTime = currentTime;
+      animationFrameID = requestAnimationFrame(renderLoop);
+    };
+    renderLoop(performance.now());
+
+    return () => cancelAnimationFrame(animationFrameID);
+  }, [titView, canvasRef]);
+
+  return <canvas ref={canvasRef} />;
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const MyCanvas: React.FC = () => {
+  return (
+    <div className="w-[99.99%] h-[99.99%]">
+      <Orientation rotation={new THREE.Euler()} />
+      <Canvas />
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/source/titfront/src/main.tsx b/source/titfront/src/main.tsx
index 78839b77e..dbee612cd 100644
--- a/source/titfront/src/main.tsx
+++ b/source/titfront/src/main.tsx
@@ -3,48 +3,19 @@
  * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
 \* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import ReactDOM from "react-dom/client";
 
-import TitViewProvider, { useTitView } from "./TitViewProvider";
+import TitViewProvider from "./TitViewProvider";
+import { App } from "./components/App";
 import "./index.css";
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-const Canvas: React.FC = () => {
-  const titView = useTitView();
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  useEffect(() => {
-    if (canvasRef.current === null) {
-      throw new Error("Canvas element is not initialized!");
-    }
-    titView.canvas = canvasRef.current;
-    /** @todo Use the actual canvas size. */
-    titView.initializeRenderer(800.0, 600.0);
-
-    // Start the rendering loop.
-    let lastFrameTime = performance.now();
-    let animationFrameID: number;
-    const renderLoop = (currentTime: number) => {
-      const deltaTime = (currentTime - lastFrameTime) / 1000;
-      titView.renderFrame(deltaTime);
-      lastFrameTime = currentTime;
-      animationFrameID = requestAnimationFrame(renderLoop);
-    };
-    renderLoop(performance.now());
-
-    return () => cancelAnimationFrame(animationFrameID);
-  }, [titView, canvasRef]);
-
-  return <canvas ref={canvasRef} />;
-};
-
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <TitViewProvider>
-      <Canvas />
+      <App />
     </TitViewProvider>
   </React.StrictMode>
 );