From 4d2ec19ff1faba9a6c0531dcab08bddcb961b2aa Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 14 Sep 2026 09:57:30 +0100
Subject: [PATCH] Enhance GCodePreview Component with Render Mode and Travel
 Visibility Options

- Added render mode selection to toggle between 'lines' and 'pipes' for GCode visualization.
- Introduced travel visibility options to show or hide travel paths in the preview.
- Updated rendering logic to reflect changes in user-selected options, improving the flexibility and usability of the GCodePreview component.
---
 .../Dashboard/common/GCodePreview.jsx         | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/common/GCodePreview.jsx b/src/components/Dashboard/common/GCodePreview.jsx
index 3eeb5b02..baa58f53 100644
--- a/src/components/Dashboard/common/GCodePreview.jsx
+++ b/src/components/Dashboard/common/GCodePreview.jsx
@@ -1,6 +1,6 @@
 import * as GCodePreview from 'gcode-preview'
 import PropTypes from 'prop-types'
-import { Button, Card, Flex, Slider } from 'antd'
+import { Button, Card, Flex, Select, Slider } from 'antd'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
 import PlusIcon from '../../Icons/PlusIcon.jsx'
@@ -84,6 +84,12 @@ function GCodePreviewUI(props) {
   const [previewScale, setPreviewScale] = useState(1)
   const [panMode, setPanMode] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
+  const [renderMode, setRenderMode] = useState('lines')
+  const [travelVisibility, setTravelVisibility] = useState('hide')
+  const renderModeRef = useRef(renderMode)
+  const travelVisibilityRef = useRef(travelVisibility)
+  renderModeRef.current = renderMode
+  travelVisibilityRef.current = travelVisibility
 
   const resizePreview = useCallback(() => {
     previewRef.current?.resize()
@@ -117,6 +123,8 @@ function GCodePreviewUI(props) {
       initialCameraPosition: [0, 400, 450],
       allowDragNDrop: false
     })
+    instance.renderTubes = renderModeRef.current === 'pipes'
+    instance.renderTravel = travelVisibilityRef.current === 'show'
     previewRef.current = instance
 
     const { camera, controls } = instance
@@ -188,6 +196,21 @@ function GCodePreviewUI(props) {
     applyingScaleRef.current = false
   }, [preview, previewScale])
 
+  useEffect(() => {
+    if (!preview) return
+    const renderTubes = renderMode === 'pipes'
+    const renderTravel = travelVisibility === 'show'
+    if (
+      preview.renderTubes === renderTubes &&
+      preview.renderTravel === renderTravel
+    ) {
+      return
+    }
+    preview.renderTubes = renderTubes
+    preview.renderTravel = renderTravel
+    preview.render()
+  }, [preview, renderMode, travelVisibility])
+
   useEffect(() => {
     if (!preview) return
     preview.controls.mouseButtons = {
@@ -253,7 +276,7 @@ function GCodePreviewUI(props) {
       gap={'middle'}
       style={{ width: '100%', height: '100%', minHeight: 0, ...style }}
     >
-      <Flex gap={'small'}>
+      <Flex gap={'small'} wrap='wrap' align='center'>
         <KeyboardShortcut
           shortcut={'alt+p'}
           hint={'ALT P'}
@@ -293,6 +316,26 @@ function GCodePreviewUI(props) {
             setPreviewScale((prev) => clampPreviewScale(prev - 0.05))
           }}
         />
+        <Select
+          value={renderMode}
+          options={[
+            { value: 'lines', label: 'Lines' },
+            { value: 'pipes', label: 'Pipes' }
+          ]}
+          style={{ minWidth: 77 }}
+          popupMatchSelectWidth={false}
+          onChange={setRenderMode}
+        />
+        <Select
+          value={travelVisibility}
+          options={[
+            { value: 'show', label: 'Show Travel' },
+            { value: 'hide', label: 'Hide Travel' }
+          ]}
+          style={{ minWidth: 118 }}
+          popupMatchSelectWidth={false}
+          onChange={setTravelVisibility}
+        />
       </Flex>
 
       <div