feat: Add a "Zoom to Object" button on the starmap editor.

client/src/components/Starmap/Nebula/index.tsx

@@ -26,7 +26,6 @@ const nebulaGeometry = new BoxBufferGeometry(1, 1, 1);
 const sides = ["back", "bottom", "front", "left", "right", "top"];
 function generateMaterial(primary: boolean, index: number) {
   const canvas = document.createElement("canvas");
-  document.body.appendChild(canvas);
   canvas.width = canvas.height = CANVAS_WIDTH;
 
   if ("transferControlToOffscreen" in canvas) {

client/src/components/Starmap/Planet/index.tsx

@@ -103,10 +103,7 @@ export function Planet({
   const position = getOrbitPosition(planet.satellite);
 
   // TODO - April 7, 2022 - Figure out how to make the scales nice for solar system editing
-  const size =
-    viewingMode !== "editor"
-      ? radius
-      : (((isSatellite ? 1 : 5) + 100 * radius * 10) as Kilometer);
+  const size = radius;
 
   // TODO - April 7, 2022 - Add moons
   const satellites: PlanetPlugin[] = [];
@@ -133,7 +130,7 @@ export function Planet({
       if (
         size &&
         distance / size > 100 &&
-        (viewingMode === "core" || showSprite)
+        (viewingMode === "core" || viewingMode === "editor" || showSprite)
       ) {
         planetSpriteRef.current.visible = true;
         planetMeshRef.current.visible = false;

client/src/components/Starmap/SolarSystemMap.tsx

@@ -8,6 +8,7 @@ import CameraControlsClass from "camera-controls";
 import {
   astronomicalUnitToKilometer,
   Kilometer,
+  solarRadiusToKilometers,
 } from "server/src/utils/unitTypes";
 import {Box3, Camera, Vector3} from "three";
 import Button from "../ui/Button";
@@ -30,6 +31,9 @@ import Input from "@thorium/ui/Input";
 import Checkbox from "@thorium/ui/Checkbox";
 import {useParams} from "react-router-dom";
 import {q} from "@client/context/AppContext";
+import PlanetPlugin from "@server/classes/Plugins/Universe/Planet";
+import SolarSystemPlugin from "@server/classes/Plugins/Universe/SolarSystem";
+import {getOrbitPosition} from "@server/utils/getOrbitPosition";
 const ACTION = CameraControlsClass.ACTION;
 
 // 10% further than Neptune's orbit
@@ -428,6 +432,7 @@ export function SolarSystemPalette() {
       className="w-full h-full overflow-y-auto overflow-x-hidden text-white"
       key={results.object.name}
     >
+      <ZoomToObject object={results.object} />
       <BasicDisclosure object={results.object} type={results.type} />
       {results.type === "planet" && (
         <>
@@ -441,6 +446,49 @@ export function SolarSystemPalette() {
   );
 }
 
+function ZoomToObject({
+  object,
+}: {
+  object: StarPlugin | PlanetPlugin | SolarSystemPlugin;
+}) {
+  const useStarmapStore = useGetStarmapStore();
+
+  if (!("satellite" in object)) {
+    return null;
+  }
+
+  return (
+    <Button
+      className="btn-block btn-xs"
+      onClick={() => {
+        const position = getOrbitPosition(object.satellite);
+        let radius = 0;
+        if ("isPlanet" in object) {
+          radius = object.isPlanet.radius;
+        } else {
+          radius = solarRadiusToKilometers(object.radius);
+        }
+
+        const box = new Box3(
+          new Vector3(
+            position.x - radius,
+            position.y - radius,
+            position.z - radius
+          ),
+          new Vector3(
+            position.x + radius,
+            position.y + radius,
+            position.z + radius
+          )
+        );
+        useStarmapStore.getState().cameraControls?.current?.fitToBox(box, true);
+      }}
+    >
+      Zoom to Object
+    </Button>
+  );
+}
+
 function StarDisclosure({object}: {object: StarPlugin}) {
   const [pluginId, solarSystemId] = useSystemIds();