From 02de0927baed98514133cbd961e411f9cd6c0ada Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Wed, 10 Mar 2021 20:47:40 +1100
Subject: [PATCH] Bunch of tweaks

Resolves #225 and # 226
a weird state issue and some formatting
---
 web/src/Routes.js                             | 15 ++++++----
 web/src/components/IdeToolbar/IdeToolbar.js   | 12 ++++++--
 .../components/IdeToolbarNew/IdeToolbarNew.js | 28 +++++++++++++++----
 web/src/components/IdeViewer/IdeViewer.js     |  8 ++++--
 web/src/pages/DevIdePage/DevIdePage.js        | 14 ++++++++++
 5 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/web/src/Routes.js b/web/src/Routes.js
index df8edfb..dd9d3dc 100644
--- a/web/src/Routes.js
+++ b/web/src/Routes.js
@@ -13,8 +13,9 @@ const welcomeMessage = `
 %cHey, 👋.
 %c______________________________________________________________________________
 
-%cCadHub is in active development - Want to lend a hand?
-%chttps://github.com/Irev-Dev/cadhub
+%cCadHub is in active development - Want to lend a hand?          %chttps://github.com/Irev-Dev/cadhub
+
+%cOr get a sneak peak of work under construction?          %chttps://cadhub.xyz/dev-ide
 
 `
 
@@ -23,10 +24,12 @@ const Routes = () => {
     () =>
       console.log(
         welcomeMessage,
-        'font-family: Georgia, serif; font-weight:bold; line-height: 2rem; font-size: 32px; color: #3c366b; padding-left: 5rem;',
-        'font-size: 10px; color:#D3D3D3; padding-left: 5rem;',
-        'font-family: "Ropa Sans",Georgia, serif; font-size: 16px;line-height:3rem; padding-left: 5rem;',
-        'font-family: Helvetica Neue, sans-serif; font-size: 16px; line-height: 1.5rem; color:#gray;padding-left: 5rem'
+        'font-family: Georgia, serif; font-weight:bold; line-height: 2rem; font-size: 32px; color: #3c366b',
+        'font-size: 10px; color:#D3D3D3',
+        'font-family: "Ropa Sans",Georgia, serif; font-size: 16px; line-height:3rem',
+        'font-family: Helvetica Neue, sans-serif; font-size: 16px; line-height: 1.5rem; color:#gray',
+        'font-family: "Ropa Sans",Georgia, serif; font-size: 16px; line-height:3rem',
+        'font-family: Helvetica Neue, sans-serif; font-size: 16px; line-height: 1.5rem'
       ),
     []
   )
diff --git a/web/src/components/IdeToolbar/IdeToolbar.js b/web/src/components/IdeToolbar/IdeToolbar.js
index a7a9bb2..133efbb 100644
--- a/web/src/components/IdeToolbar/IdeToolbar.js
+++ b/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>
diff --git a/web/src/components/IdeToolbarNew/IdeToolbarNew.js b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
index 0b18e68..b945460 100644
--- a/web/src/components/IdeToolbarNew/IdeToolbarNew.js
+++ b/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>
diff --git a/web/src/components/IdeViewer/IdeViewer.js b/web/src/components/IdeViewer/IdeViewer.js
index da37100..9f8eb43 100644
--- a/web/src/components/IdeViewer/IdeViewer.js
+++ b/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,
diff --git a/web/src/pages/DevIdePage/DevIdePage.js b/web/src/pages/DevIdePage/DevIdePage.js
index 1960ec5..805a022 100644
--- a/web/src/pages/DevIdePage/DevIdePage.js
+++ b/web/src/pages/DevIdePage/DevIdePage.js
@@ -1,6 +1,7 @@
 import MainLayout from 'src/layouts/MainLayout'
 import Seo from 'src/components/Seo/Seo'
 import IdeToolbar from 'src/components/IdeToolbarNew'
+import OutBound from 'src/components/OutBound'
 
 const DevIdePage = () => {
   return (
@@ -10,6 +11,19 @@ const DevIdePage = () => {
         description="new ide in development"
         lang="en-US"
       />
+      <div className="py-4 bg-pink-200">
+        <div className="mx-auto max-w-6xl">
+          Woah, woah. You shouldn't be here! We're still working on this. Since
+          you've seen it now, have a look what{' '}
+          <OutBound
+            className="text-pink-700"
+            to="https://github.com/Irev-Dev/cadhub/discussions/212"
+          >
+            we've got planned
+          </OutBound>
+          .
+        </div>
+      </div>
       <IdeToolbar />
     </MainLayout>
   )