Init multiple types of cadPackages

web/src/components/IdeEditor/IdeEditor.js

@@ -12,25 +12,6 @@ const IdeEditor = () => {
     openScad: 'cpp',
   }
 
-  const scriptKey = 'encoded_script'
-  useEffect(() => {
-    // load code from hash if it's there
-    let hash
-    if (isBrowser) {
-      hash = window.location.hash
-    }
-    const [key, scriptBase64] = hash.slice(1).split('=')
-    if (key === scriptKey) {
-      const script = atob(scriptBase64)
-      thunkDispatch({ type: 'updateCode', payload: script })
-    }
-  }, [])
-  useEffect(() => {
-    if (isBrowser) {
-      window.location.hash = ''
-    }
-  }, [state.code])
-
   function handleCodeChange(value, _event) {
     thunkDispatch({ type: 'updateCode', payload: value })
   }
@@ -61,6 +42,7 @@ const IdeEditor = () => {
       <Suspense fallback={<div>. . . loading</div>}>
         <Editor
           defaultValue={state.code}
+          value={state.code}
           // TODO #247 cpp seems better than js for the time being
           defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
           language={ideTypeToLanguageMap[state.ideType] || 'cpp'}

web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -1,4 +1,4 @@
-import { createContext } from 'react'
+import { createContext, useEffect } from 'react'
 import IdeContainer from 'src/components/IdeContainer'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
 import { useIdeState, codeStorageKey } from 'src/helpers/hooks/useIdeState'
@@ -6,11 +6,27 @@ import { copyTextToClipboard } from 'src/helpers/clipboard'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 
 export const IdeContext = createContext()
-const IdeToolbarNew = () => {
+const IdeToolbarNew = ({ cadPackage }) => {
   const [state, thunkDispatch] = useIdeState()
-  function setIdeType(ide) {
-    thunkDispatch({ type: 'setIdeType', payload: { message: ide } })
-  }
+  const scriptKey = 'encoded_script'
+  useEffect(() => {
+    thunkDispatch({
+      type: 'initIde',
+      payload: { cadPackage },
+    })
+    // load code from hash if it's there
+    let hash
+    if (isBrowser) {
+      hash = window.location.hash
+    }
+    const [key, scriptBase64] = hash.slice(1).split('=')
+    if (key === scriptKey) {
+      const script = atob(scriptBase64)
+      thunkDispatch({ type: 'updateCode', payload: script })
+    }
+    window.location.hash = ''
+    setTimeout(() => handleRender()) // definitely a little hacky, timeout with no delay is just to push it into the next event loop.
+  }, [cadPackage])
   function handleRender() {
     thunkDispatch((dispatch, getState) => {
       const state = getState()
@@ -37,14 +53,6 @@ const IdeToolbarNew = () => {
     <IdeContext.Provider value={{ state, thunkDispatch: thunkDispatch }}>
       <div className="h-full flex flex-col">
         <nav className="flex">
-          <button
-            onClick={() =>
-              setIdeType(state.ideType === 'openScad' ? 'cadQuery' : 'openScad')
-            }
-            className="p-2 br-2 border-2 m-2 bg-blue-200"
-          >
-            Switch to {state.ideType === 'openScad' ? 'CadQuery' : 'OpenSCAD'}
-          </button>
           <button onClick={handleRender} className="p-2 br-2 border-2 m-2">
             Render
           </button>

web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -0,0 +1,48 @@
+import { Link, routes } from '@redwoodjs/router'
+import Svg from 'src/components/Svg/Svg'
+import { Popover } from '@headlessui/react'
+
+const NavPlusButton: React.FC = () => {
+  return (
+    <Popover className="relative outline-none w-full h-full">
+      <Popover.Button className="h-full w-full outline-none">
+        <Svg name="plus" className="text-indigo-300" />
+      </Popover.Button>
+
+      <Popover.Panel className="absolute z-10">
+        <ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
+          {[
+            {
+              name: 'OpenSCAD',
+              sub: 'beta',
+              ideType: 'openScad',
+            },
+            { name: 'CadQuery', sub: 'beta', ideType: 'cadQuery' },
+            {
+              name: 'CascadeStudio',
+              sub: 'soon to be deprecated',
+            },
+          ].map(({ name, sub, ideType }) => (
+            <li
+              key={name}
+              className="px-4 py-2 hover:bg-gray-400 text-gray-800"
+            >
+              <Link
+                to={
+                  name === 'CascadeStudio'
+                    ? routes.draftPart()
+                    : routes.devIde({ cadPackage: ideType })
+                }
+              >
+                <div>{name}</div>
+                <div className="text-xs text-gray-600 font-light">{sub}</div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </Popover.Panel>
+    </Popover>
+  )
+}
+
+export default NavPlusButton