Update polygon-editor.tsx

apps/editor/components/tools/shared/polygon-editor.tsx

@@ -1,8 +1,7 @@
 import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
 import { createPortal } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { BufferGeometry, Float32BufferAttribute, type Mesh } from 'three'
+import { BufferGeometry, Float32BufferAttribute, type Line } from 'three'
 import { EDITOR_LAYER } from '@/lib/constants'
 import { sfxEmitter } from '@/lib/sfx-bus'
 
@@ -61,7 +60,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
   const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
 
-  const lineRef = useRef<Mesh>(null!)
+  const lineRef = useRef<Line>(null!)
   const previousPositionRef = useRef<[number, number] | null>(null)
 
   // Track the last polygon prop to detect external changes (undo/redo)
@@ -145,8 +144,12 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
       const newPosition: [number, number] = [gridX, gridZ]
 
       // Play snap sound when cursor moves to a new grid cell during drag
-      if (dragState?.isDragging && previousPositionRef.current &&
+      if (
-          (newPosition[0] !== previousPositionRef.current[0] || newPosition[1] !== previousPositionRef.current[1])) {
+        dragState?.isDragging &&
+        previousPositionRef.current &&
+        (newPosition[0] !== previousPositionRef.current[0] ||
+          newPosition[1] !== previousPositionRef.current[1])
+      ) {
         sfxEmitter.emit('sfx:grid-snap')
       }
 
@@ -171,7 +174,12 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
     const handlePointerUp = (e: PointerEvent | MouseEvent) => {
       // Only handle the specific pointer that started the drag, if it's a PointerEvent
-      if ('pointerId' in e && dragState.pointerId !== undefined && e.pointerId !== dragState.pointerId) return
+      if (
+        'pointerId' in e &&
+        dragState.pointerId !== undefined &&
+        e.pointerId !== dragState.pointerId
+      )
+        return
 
       // Stop the event from propagating to prevent grid click
       e.stopImmediatePropagation()
@@ -225,10 +233,16 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const canDelete = displayPolygon.length > minVertices
 
   const editorContent = (
-    <group >
+    <group>
       {/* Border line */}
-      {/* @ts-ignore */}
+      <line
-      <line ref={lineRef} frustumCulled={false} renderOrder={10} raycast={() => {}} layers={EDITOR_LAYER}>
+        // @ts-expect-error R3F <line> element conflicts with SVG <line> type
+        ref={lineRef}
+        frustumCulled={false}
+        renderOrder={10}
+        raycast={() => {}}
+        layers={EDITOR_LAYER}
+      >
         <bufferGeometry />
         <lineBasicNodeMaterial
           color={color}