colour head of lines (the sphere) with the same constraint colours (#95)

* colour head of lines (the sphere) with the same constraint colours

* tweak arrow size

src/components/RenderViewerArtifacts.tsx

@@ -49,6 +49,7 @@ function MovingSphere({
   const point2DRef = useRef<Vector3>(new Vector3())
   const [hovered, setHover] = useState(false)
   const [isMouseDown, setIsMouseDown] = useState(false)
+  const baseColor = useConstraintColors(sourceRange)
 
   const { setHighlightRange, guiMode, ast, updateAst, programMemory } =
     useStore((s) => ({
@@ -145,7 +146,7 @@ function MovingSphere({
       >
         <primitive object={geo} scale={hovered ? 2 : 1} />
         <meshStandardMaterial
-          color={hovered ? 'hotpink' : editorCursor ? 'skyblue' : 'orange'}
+          color={hovered ? 'hotpink' : editorCursor ? 'skyblue' : baseColor}
         />
       </mesh>
       {isMouseDown && (
@@ -462,35 +463,15 @@ function LineRender({
   position: Position
   onClick?: () => void
 }) {
-  const { setHighlightRange, guiMode, ast } = useStore((s) => ({
+  const { setHighlightRange } = useStore((s) => ({
     setHighlightRange: s.setHighlightRange,
-    guiMode: s.guiMode,
-    ast: s.ast,
   }))
   const onClick = useSetCursor(sourceRange)
   // This reference will give us direct access to the mesh
   const ref = useRef<BufferGeometry | undefined>() as any
   const [hovered, setHover] = useState(false)
 
-  const [baseColor, setBaseColor] = useState('orange')
+  const baseColor = useConstraintColors(sourceRange)
-  useEffect(() => {
-    if (!ast || guiMode.mode !== 'sketch') {
-      setBaseColor('orange')
-      return
-    }
-    try {
-      const level = getConstraintLevelFromSourceRange(sourceRange, ast)
-      if (level === 'free') {
-        setBaseColor('orange')
-      } else if (level === 'partial') {
-        setBaseColor('IndianRed')
-      } else if (level === 'full') {
-        setBaseColor('lightgreen')
-      }
-    } catch (e) {
-      setBaseColor('orange')
-    }
-  }, [guiMode, ast, sourceRange])
 
   return (
     <>
@@ -615,3 +596,31 @@ function useSetAppModeFromCursorLocation(artifacts: Artifact[]) {
     }
   }, [artifacts, selectionRanges])
 }
+
+function useConstraintColors(sourceRange: [number, number]): string {
+  const { guiMode, ast } = useStore((s) => ({
+    guiMode: s.guiMode,
+    ast: s.ast,
+  }))
+  const [baseColor, setBaseColor] = useState('orange')
+  useEffect(() => {
+    if (!ast || guiMode.mode !== 'sketch') {
+      setBaseColor('orange')
+      return
+    }
+    try {
+      const level = getConstraintLevelFromSourceRange(sourceRange, ast)
+      if (level === 'free') {
+        setBaseColor('orange')
+      } else if (level === 'partial') {
+        setBaseColor('IndianRed')
+      } else if (level === 'full') {
+        setBaseColor('lightgreen')
+      }
+    } catch (e) {
+      setBaseColor('orange')
+    }
+  }, [guiMode, ast, sourceRange])
+
+  return baseColor
+}

src/lang/engine.tsx

@@ -5,6 +5,7 @@ import {
   PlaneGeometry,
   Quaternion,
   Euler,
+  CylinderGeometry,
 } from 'three'
 import { Rotation, Position } from './executor'
 
@@ -63,7 +64,7 @@ export function lineGeo({
     Hypotenuse: Hypotenuse3d,
     ry,
     rz,
-    // sign,
+    sign,
   } = trigCalcs({ from, to })
 
   // create BoxGeometry with size [Hypotenuse3d, 0.1, 0.1] centered at center, with rotation of [0, ry, rz]
@@ -72,8 +73,13 @@ export function lineGeo({
   lineBody.rotateZ(rz)
   lineBody.translate(centre[0], centre[1], centre[2])
 
-  // create line end balls with SphereGeometry at `to` and `from` with radius of 0.15
+  // create line end points with CylinderGeometry at `to`
-  const lineEnd1 = new SphereGeometry(0.15)
+  const lineEnd1 = new CylinderGeometry(0.05, 0.22, 0.25, 4)
+  lineEnd1.translate(0, -0.1, 0)
+  lineEnd1.rotateY(Math.PI / 4)
+  lineEnd1.rotateZ(rz)
+  const _sign = to[0] === from[0] ? -sign : sign
+  lineEnd1.rotateZ((_sign * Math.PI) / 2)
   lineEnd1.translate(to[0], to[1], to[2])
 
   const centreSphere = new SphereGeometry(0.15)