fix 3D text

frontend/__test_support__/three_d_mocks.tsx

@@ -556,7 +556,9 @@ jest.mock("@react-three/drei", () => {
       <div className={"trail"}>{name}</div>,
     Tube: ({ name, children }: { name: string, children: ReactNode }) =>
       <div className={"tube" + name}>{children}</div>,
-    Text: ({ children }: { children: ReactNode }) =>
+    Center: ({ children }: { children: ReactNode }) =>
+      <div className={"center"}>{children}</div>,
+    Text3D: ({ children }: { children: ReactNode }) =>
       <div className={"text"}>{children}</div>,
     Detailed: ({ children }: { children: ReactNode }) =>
       <div className={"detailed"}>{children}</div>,

frontend/css/farm_designer/three_d_garden.scss

@@ -1,6 +1,22 @@
 @use "../variables" as *;
 @use "sass:color";
 
+.promo {
+  &.three-d-garden {
+    .garden-bed-3d-model {
+      width: 100vw;
+    }
+
+    .overlay {
+      .settings-bar {
+        button {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
 .three-d-garden {
   position: relative;
   height: 100vh;

frontend/promo/promo.tsx

@@ -26,7 +26,7 @@ export const Promo = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // intentionally empty dependency array
 
-  return <div className={"three-d-garden"}>
+  return <div className={"three-d-garden promo"}>
     <div className={"garden-bed-3d-model"}>
       <Canvas shadows={true}>
         <GardenModel {...common} />

frontend/three_d_garden/button.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import * as THREE from "three";
-import { Box, Text } from "@react-three/drei";
+import { Box } from "@react-three/drei";
 import { BufferGeometry } from "three";
-import { ASSETS } from "./constants";
 import { Group, MeshPhongMaterial } from "./components";
+import { Text } from "./text";
 
 export interface PresetButtonProps {
   preset: string;
@@ -58,12 +58,9 @@ export const PresetButton = (props: PresetButtonProps) => {
         position={[0, 0, 0]}>
         <MeshPhongMaterial color={hovered == preset ? "lightgray" : "gray"} />
       </Box>
-      <Text fontSize={200}
-        font={ASSETS.fonts.cabinBold}
+      <Text
+        fontSize={200}
         color={"black"}
-        strokeColor={"black"}
-        strokeWidth={7}
-        fontWeight={"bold"}
         position={[0, 0, btnHeight / 2 + 1]}
         rotation={[0, 0, 0]}>
         {preset}

frontend/three_d_garden/constants.ts

@@ -5,7 +5,7 @@ export const LIB_DIR = "/3D/lib/";
 
 export const ASSETS = {
   fonts: {
-    cabinBold: "/3D/fonts/Cabin_Bold.ttf",
+    cabinBold: "/3D/fonts/Cabin_Bold.json",
   },
   textures: {
     cloud: "/3D/textures/cloud.avif",

frontend/three_d_garden/distance_indicator.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Box, Text } from "@react-three/drei";
-import { ASSETS } from "./constants";
+import { Box } from "@react-three/drei";
 import { Arrow } from "./arrow";
 import { Group, MeshPhongMaterial } from "./components";
+import { Text } from "./text";
 
 enum BoxDimension {
   width = 300,
@@ -56,11 +56,7 @@ export const DistanceIndicator = (props: DistanceIndicatorProps) => {
       {LABELS.map(({ position, rotation }) =>
         <Text name={"distance-label"}
           fontSize={50}
-          font={ASSETS.fonts.cabinBold}
           color={"black"}
-          strokeColor={"black"}
-          strokeWidth={7}
-          fontWeight={"bold"}
           rotation={rotation}
           position={position}>
           {distance.toFixed(0)}mm

frontend/three_d_garden/garden.tsx

@@ -3,7 +3,7 @@ import { ThreeEvent } from "@react-three/fiber";
 import {
   GizmoHelper, GizmoViewcube,
   OrbitControls, PerspectiveCamera,
-  Circle, Stats, Billboard, Text, Image, Clouds, Cloud, OrthographicCamera,
+  Circle, Stats, Billboard, Image, Clouds, Cloud, OrthographicCamera,
   Detailed, Sphere,
   useTexture,
 } from "@react-three/drei";
@@ -24,6 +24,7 @@ import {
   AmbientLight, AxesHelper, Group, MeshBasicMaterial, MeshPhongMaterial,
 } from "./components";
 import { isDesktop } from "../screen_size";
+import { Text } from "./text";
 
 export interface GardenModelProps {
   config: Config;
@@ -121,14 +122,10 @@ export const GardenModel = (props: GardenModelProps) => {
       {labelOnly
         ? <Text visible={alwaysShowLabels || i === hoveredPlant}
           renderOrder={2}
-          material-depthTest={false}
           fontSize={50}
+          color={"dark-gray"}
           position={[0, plant.size / 2 + 40, 0]}
-          font={ASSETS.fonts.cabinBold}
-          outlineColor={"black"}
-          outlineWidth={3}
-          outlineBlur={15}
-          outlineOpacity={0.7}>
+          rotation={[0, 0, 0]}>
           {plant.label}
         </Text>
         : <Image url={plant.icon} scale={plant.size} name={"" + i}

frontend/three_d_garden/packaging.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Box, Text } from "@react-three/drei";
+import { Box } from "@react-three/drei";
 import { threeSpace } from "./helpers";
 import { Config } from "./config";
 import { Group, MeshPhongMaterial } from "./components";
-import { ASSETS } from "./constants";
+import { Text } from "./text";
 
 export interface PackagingProps {
   config: Config;
@@ -45,8 +45,8 @@ export const Packaging = (props: PackagingProps) => {
         args={[mainCartonLength, mainCartonWidth, mainCartonHeight]}>
         <MeshPhongMaterial color={boxColor} />
       </Box>
-      <Text fontSize={55}
-        font={ASSETS.fonts.cabinBold}
+      <Text
+        fontSize={55}
         color={"black"}
         position={[0, -mainCartonWidth / 2 - 1, 0]}
         rotation={[Math.PI / 2, 0, 0]}>

frontend/three_d_garden/text.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Center, Text3D } from "@react-three/drei";
+import { ASSETS } from "./constants";
+import { MeshPhongMaterial } from "./components";
+
+interface TextProps {
+  children: React.ReactNode;
+  position: [number, number, number];
+  rotation: [number, number, number];
+  fontSize: number;
+  color: string;
+  name?: string;
+  visible?: boolean;
+  renderOrder?: number;
+}
+
+export const Text = (props: TextProps) => {
+  return <Center
+    name={props.name}
+    visible={props.visible}
+    renderOrder={props.renderOrder}
+    position={props.position}>
+    <Text3D
+      font={ASSETS.fonts.cabinBold}
+      size={props.fontSize}
+      height={0.01}
+      rotation={props.rotation}>
+      {props.children}
+      <MeshPhongMaterial color={props.color} />
+    </Text3D>
+  </Center>;
+};

package.json

@@ -34,8 +34,8 @@
     "@parcel/watcher": "2.1.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "5.13.1",
-    "@blueprintjs/select": "5.2.5",
+    "@blueprintjs/core": "5.14.0",
+    "@blueprintjs/select": "5.3.1",
     "@monaco-editor/react": "4.6.0",
     "@parcel/transformer-sass": "2.12.0",
     "@parcel/transformer-typescript-tsc": "2.12.0",
@@ -45,13 +45,13 @@
     "@rollbar/react": "0.12.0-beta",
     "@types/lodash": "4.17.13",
     "@types/markdown-it": "14.1.2",
-    "@types/node": "22.8.6",
+    "@types/node": "22.9.0",
     "@types/promise-timeout": "1.3.3",
     "@types/react": "18.3.12",
     "@types/react-color": "3.0.12",
     "@types/react-dom": "18.3.1",
     "@types/three": "0.169.0",
-    "@types/ws": "8.5.12",
+    "@types/ws": "8.5.13",
     "@xterm/xterm": "5.5.0",
     "axios": "1.7.7",
     "bowser": "2.11.0",
@@ -75,7 +75,7 @@
     "react-color": "2.19.3",
     "react-dom": "18.3.1",
     "react-redux": "9.1.2",
-    "react-router-dom": "6.27.0",
+    "react-router-dom": "6.28.0",
     "redux": "5.0.1",
     "redux-immutable-state-invariant": "2.1.0",
     "redux-thunk": "3.1.0",
@@ -97,7 +97,7 @@
     "eslint": "8.57.0",
     "eslint-plugin-eslint-comments": "3.2.0",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jest": "28.8.3",
+    "eslint-plugin-jest": "28.9.0",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-promise": "7.1.0",
     "eslint-plugin-react": "7.37.2",
@@ -113,7 +113,7 @@
     "raf": "3.4.1",
     "react-addons-test-utils": "15.6.2",
     "react-test-renderer": "18.3.1",
-    "sass": "1.80.5",
+    "sass": "1.80.6",
     "sass-lint": "1.13.1",
     "ts-jest": "29.2.5",
     "tslint": "5.20.1"