Bunch of tweaks

Resolves #225 and # 226
a weird state issue and some formatting

web/src/components/IdeToolbar/IdeToolbar.js

@@ -328,8 +328,16 @@ const IdeToolbar = ({
             transformOrigin={transformOrigin}
             className="material-ui-overrides transform translate-y-4"
           >
-            <div className="text-sm p-2 text-gray-500">
-              Press F5 to regenerate model
+            <div className="p-4">
+              <div className="text-sm p-2 text-gray-500">
+                Press F5 to regenerate model
+              </div>
+              <OutBound
+                className="text-gray-600 underline p-2"
+                to="https://ronie.medium.com/cascade-studio-tutorial-ee2f1c42c829"
+              >
+                See the tutorial
+              </OutBound>
             </div>
           </Popover>
         </div>

web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -6,17 +6,33 @@ export const IdeContext = createContext()
 
 const IdeToolbarNew = () => {
   const [state, dispatch] = useIdeState()
-  function setIdeType(ide) { dispatch({ type: 'setIdeType', payload: { message: ide } }) }
-  function handleRender() { dispatch({ type: 'render', payload: { code: state.code } }) }
+  function setIdeType(ide) {
+    dispatch({ type: 'setIdeType', payload: { message: ide } })
+  }
+  function handleRender() {
+    dispatch({ type: 'render', payload: { code: state.code } })
+  }
 
   return (
     <IdeContext.Provider value={{ state, dispatch }}>
       <div className="p-8 border-2">
         <div>hi I'm the toolbar</div>
-        <nav class="flex">
-          <button onClick={() => setIdeType('openCascade')} class="p-2 br-2 border-2 m-2 bg-blue-200">Switch to OpenCascade</button>
-          <button onClick={() => setIdeType('openScad')} class="p-2 br-2 border-2 m-2 bg-indigo-200">Switch to OpenSCAD</button>
-          <button onClick={ handleRender } class="p-2 br-2 border-2 m-2">Render</button>
+        <nav className="flex">
+          <button
+            onClick={() => setIdeType('openCascade')}
+            className="p-2 br-2 border-2 m-2 bg-blue-200"
+          >
+            Switch to OpenCascade
+          </button>
+          <button
+            onClick={() => setIdeType('openScad')}
+            className="p-2 br-2 border-2 m-2 bg-indigo-200"
+          >
+            Switch to OpenSCAD
+          </button>
+          <button onClick={handleRender} className="p-2 br-2 border-2 m-2">
+            Render
+          </button>
         </nav>
         <IdeContainer />
       </div>

web/src/components/IdeViewer/IdeViewer.js

@@ -31,7 +31,8 @@ function Controls({ onCameraChange }) {
         })
       }
       controls.current.addEventListener('end', callback)
-      return () => controls.current.removeEventListener('end', callback)
+      const oldCurrent = controls.current
+      return () => oldCurrent.removeEventListener('end', callback)
     }
   }, [])
 
@@ -69,7 +70,7 @@ function Box(props) {
     </mesh>
   )
 }
-
+let currentCode // I have no idea why this works and using state.code is the dispatch doesn't but it was always stale
 const IdeViewer = () => {
   const { state, dispatch } = useContext(IdeContext)
   const [isDragging, setIsDragging] = useState(false)
@@ -81,6 +82,7 @@ const IdeViewer = () => {
       window.URL.createObjectURL(state.objectData?.data),
     [state.objectData]
   )
+  currentCode = state.code
   return (
     <div className="p-8 border-2 m-2">
       <div className="pb-4">
@@ -113,7 +115,7 @@ const IdeViewer = () => {
                 dispatch({
                   type: 'render',
                   payload: {
-                    code: state.code,
+                    code: currentCode,
                     camera: {
                       position,
                       rotation,