.eslintignore

@@ -0,0 +1 @@
+/web/src/cascade/*

.gitignore

@@ -9,3 +9,4 @@ dist-babel
 node_modules
 yarn-error.log
 web/public/mockServiceWorker.js
+web/public/CADWorker/*

.vscode/settings.json

@@ -17,7 +17,9 @@
     "./web/src/Routes.js",
   ],
   "cSpell.words": [
+    "Initialised",
     "Uploader",
+    "initialise",
     "redwoodjs"
   ]
 }

README.md

@@ -30,6 +30,12 @@ yarn rw db up
 yarn rw db seed
 ```
 
+Move some files to the public directory
+```
+yarn move-cad-worker
+```
+The above step should be repeated whenever you modify anything in the git submodule `web/src/cascade/*`
+
 ### Fire up dev
 ```terminal
 yarn rw dev

api/src/functions/identity-signup.js

@@ -1,6 +1,6 @@
 import { createUserInsecure } from 'src/services/users/users.js'
 import { db } from 'src/lib/db'
-import { enforceAlphaNumeric } from 'src/services/helpers'
+import { enforceAlphaNumeric, generateUniqueString } from 'src/services/helpers'
 
 export const handler = async (req, _context) => {
   const body = JSON.parse(req.body)
@@ -58,26 +58,12 @@ export const handler = async (req, _context) => {
 
   if (eventType === 'signup') {
     roles.push('user')
-    // const hi = {
-    //   email: 'kurt.hutten@gmail.com',
-    //   image: '',
-    //   bio: ''
-    // }
-
-    const generateUniqueUserName = async (seed, count = 0) => {
-      const isUnique = !(await db.user.findOne({
+    const isUniqueCallback = async (seed) =>
+      db.user.findOne({
         where: { userName: seed },
-      }))
-      if (isUnique) {
-        return seed
-      }
-      count += 1
-      const newSeed =
-        count === 1 ? `${seed}_${count}` : seed.slice(0, -1) + count
-      return generateUniqueUserName(newSeed, count)
-    }
+      })
     const userNameSeed = enforceAlphaNumeric(email.split('@')[0])
-    const userName = await generateUniqueUserName(userNameSeed) // TODO maybe come up with a better default userName?
+    const userName = await generateUniqueString(userNameSeed, isUniqueCallback) // TODO maybe come up with a better default userName?
     const input = {
       email,
       userName,

api/src/graphql/parts.sdl.js

@@ -37,6 +37,7 @@ export const schema = gql`
 
   type Mutation {
     createPart(input: CreatePartInput!): Part!
+    forkPart(input: CreatePartInput!): Part!
     updatePart(id: String!, input: UpdatePartInput!): Part!
     deletePart(id: String!): Part!
   }

api/src/services/helpers.js

@@ -14,3 +14,17 @@ export const foreignKeyReplacement = (input) => {
 
 export const enforceAlphaNumeric = (string) =>
   string.replace(/([^a-zA-Z\d_:])/g, '-')
+
+export const generateUniqueString = async (
+  seed,
+  isUniqueCallback,
+  count = 0
+) => {
+  const isUnique = !(await isUniqueCallback(seed))
+  if (isUnique) {
+    return seed
+  }
+  count += 1
+  const newSeed = count === 1 ? `${seed}_${count}` : seed.slice(0, -1) + count
+  return generateUniqueString(newSeed, isUniqueCallback, count)
+}

api/src/services/parts/parts.js

@@ -2,6 +2,7 @@ import { db } from 'src/lib/db'
 import {
   foreignKeyReplacement,
   enforceAlphaNumeric,
+  generateUniqueString,
 } from 'src/services/helpers'
 import { requireAuth } from 'src/lib/auth'
 import { requireOwnership } from 'src/lib/owner'
@@ -38,6 +39,25 @@ export const createPart = async ({ input }) => {
   })
 }
 
+export const forkPart = async ({ input }) => {
+  // Only difference between create nda clone part is that clone part will generate a unique title
+  // (for the user) if there is a conflict
+  const isUniqueCallback = async (seed) =>
+    db.part.findOne({
+      where: {
+        title_userId: {
+          title: seed,
+          userId: input.userId,
+        },
+      },
+    })
+  const title = await generateUniqueString(input.title, isUniqueCallback)
+  // TODO change the description to `forked from userName/partName ${rest of description}`
+  return db.part.create({
+    data: foreignKeyReplacement({ ...input, title }),
+  })
+}
+
 export const updatePart = async ({ id, input }) => {
   requireAuth()
   await requireOwnership({ partId: id })

netlify.toml

@@ -1,10 +1,10 @@
 [build]
-command = "yarn move-ts-defs && yarn rw build && yarn rw db up --no-db-client --auto-approve && yarn rw dataMigrate up"
+command = "yarn move-statics && yarn rw build && yarn rw db up --no-db-client --auto-approve && yarn rw dataMigrate up"
 publish = "web/dist"
 functions = "api/dist/functions"
 
 [dev]
-  command = "yarn move-ts-defs && yarn rw dev"
+  command = "yarn move-statics && yarn rw dev"
 
 [[redirects]]
   from = "/*"

package.json

@@ -8,7 +8,9 @@
   },
   "scripts": {
     "comment": "Rather crude approach to move ts definitions into the public folder so the browser can grab them later in CascadeMain.js",
-    "move-ts-defs": "cp ./node_modules/opencascade.js/dist/opencascade.d.ts ./web/public && cp ./node_modules/three/src/Three.d.ts ./web/public && cp ./web/src/cascade/js/StandardLibraryIntellisense.ts ./web/public"
+    "move-ts-defs": "cp ./web/src/cascade/js/StandardLibraryIntellisense.ts ./web/public",
+    "move-cad-worker": "rm -r web/public/CADWorker || true && mkdir web/public/CADWorker && mkdir web/public/CADWorker/node_modules && cp -r ./web/src/cascade/js/CADWorker ./web/public && cp -r ./web/src/cascade/node_modules ./web/public/CADWorker && cp -r ./web/src/cascade/fonts ./web/public/CADWorker",
+    "move-statics": "yarn move-ts-defs && yarn move-cad-worker"
   },
   "devDependencies": {
     "@redwoodjs/core": "^0.19.2"

web/config/webpack.config.js

@@ -1,7 +1,5 @@
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 module.exports = {
-  plugins: [
-    new MonacoWebpackPlugin()
-  ]
+  plugins: [new MonacoWebpackPlugin()],
 }

web/public/Three.d.ts

@@ -1,177 +0,0 @@
-export * from './polyfills';
-export * from './renderers/WebGLMultisampleRenderTarget';
-export * from './renderers/WebGLCubeRenderTarget';
-export * from './renderers/WebGLRenderTarget';
-export * from './renderers/WebGLRenderer';
-export * from './renderers/WebGL1Renderer';
-export * from './renderers/shaders/ShaderLib';
-export * from './renderers/shaders/UniformsLib';
-export * from './renderers/shaders/UniformsUtils';
-export * from './renderers/shaders/ShaderChunk';
-export * from './scenes/FogExp2';
-export * from './scenes/Fog';
-export * from './scenes/Scene';
-export * from './objects/Sprite';
-export * from './objects/LOD';
-export * from './objects/InstancedMesh';
-export * from './objects/SkinnedMesh';
-export * from './objects/Skeleton';
-export * from './objects/Bone';
-export * from './objects/Mesh';
-export * from './objects/LineSegments';
-export * from './objects/LineLoop';
-export * from './objects/Line';
-export * from './objects/Points';
-export * from './objects/Group';
-export * from './textures/VideoTexture';
-export * from './textures/DataTexture';
-export * from './textures/DataTexture3D';
-export * from './textures/CompressedTexture';
-export * from './textures/CubeTexture';
-export * from './textures/CanvasTexture';
-export * from './textures/DepthTexture';
-export * from './textures/Texture';
-export * from './geometries/Geometries';
-export * from './materials/Materials';
-export * from './loaders/AnimationLoader';
-export * from './loaders/CompressedTextureLoader';
-export * from './loaders/DataTextureLoader';
-export * from './loaders/CubeTextureLoader';
-export * from './loaders/TextureLoader';
-export * from './loaders/ObjectLoader';
-export * from './loaders/MaterialLoader';
-export * from './loaders/BufferGeometryLoader';
-export * from './loaders/LoadingManager';
-export * from './loaders/ImageLoader';
-export * from './loaders/ImageBitmapLoader';
-export * from './loaders/FontLoader';
-export * from './loaders/FileLoader';
-export * from './loaders/Loader';
-export * from './loaders/LoaderUtils';
-export * from './loaders/Cache';
-export * from './loaders/AudioLoader';
-export * from './lights/SpotLightShadow';
-export * from './lights/SpotLight';
-export * from './lights/PointLight';
-export * from './lights/RectAreaLight';
-export * from './lights/HemisphereLight';
-export * from './lights/DirectionalLightShadow';
-export * from './lights/DirectionalLight';
-export * from './lights/AmbientLight';
-export * from './lights/LightShadow';
-export * from './lights/Light';
-export * from './lights/AmbientLightProbe';
-export * from './lights/HemisphereLightProbe';
-export * from './lights/LightProbe';
-export * from './cameras/StereoCamera';
-export * from './cameras/PerspectiveCamera';
-export * from './cameras/OrthographicCamera';
-export * from './cameras/CubeCamera';
-export * from './cameras/ArrayCamera';
-export * from './cameras/Camera';
-export * from './audio/AudioListener';
-export * from './audio/PositionalAudio';
-export * from './audio/AudioContext';
-export * from './audio/AudioAnalyser';
-export * from './audio/Audio';
-export * from './animation/tracks/VectorKeyframeTrack';
-export * from './animation/tracks/StringKeyframeTrack';
-export * from './animation/tracks/QuaternionKeyframeTrack';
-export * from './animation/tracks/NumberKeyframeTrack';
-export * from './animation/tracks/ColorKeyframeTrack';
-export * from './animation/tracks/BooleanKeyframeTrack';
-export * from './animation/PropertyMixer';
-export * from './animation/PropertyBinding';
-export * from './animation/KeyframeTrack';
-export * from './animation/AnimationUtils';
-export * from './animation/AnimationObjectGroup';
-export * from './animation/AnimationMixer';
-export * from './animation/AnimationClip';
-export * from './animation/AnimationAction';
-export * from './core/Uniform';
-export * from './core/InstancedBufferGeometry';
-export * from './core/BufferGeometry';
-export * from './core/Geometry';
-export * from './core/InterleavedBufferAttribute';
-export * from './core/InstancedInterleavedBuffer';
-export * from './core/InterleavedBuffer';
-export * from './core/InstancedBufferAttribute';
-export * from './core/BufferAttribute';
-export * from './core/Face3';
-export * from './core/Object3D';
-export * from './core/Raycaster';
-export * from './core/Layers';
-export * from './core/EventDispatcher';
-export * from './core/DirectGeometry';
-export * from './core/Clock';
-export * from './math/interpolants/QuaternionLinearInterpolant';
-export * from './math/interpolants/LinearInterpolant';
-export * from './math/interpolants/DiscreteInterpolant';
-export * from './math/interpolants/CubicInterpolant';
-export * from './math/Interpolant';
-export * from './math/Triangle';
-export * from './math/MathUtils';
-export * from './math/Spherical';
-export * from './math/Cylindrical';
-export * from './math/Plane';
-export * from './math/Frustum';
-export * from './math/Sphere';
-export * from './math/Ray';
-export * from './math/Matrix4';
-export * from './math/Matrix3';
-export * from './math/Box3';
-export * from './math/Box2';
-export * from './math/Line3';
-export * from './math/Euler';
-export * from './math/Vector4';
-export * from './math/Vector3';
-export * from './math/Vector2';
-export * from './math/Quaternion';
-export * from './math/Color';
-export * from './math/SphericalHarmonics3';
-export * from './extras/objects/ImmediateRenderObject';
-export * from './helpers/SpotLightHelper';
-export * from './helpers/SkeletonHelper';
-export * from './helpers/PointLightHelper';
-export * from './helpers/HemisphereLightHelper';
-export * from './helpers/GridHelper';
-export * from './helpers/PolarGridHelper';
-export * from './helpers/DirectionalLightHelper';
-export * from './helpers/CameraHelper';
-export * from './helpers/BoxHelper';
-export * from './helpers/Box3Helper';
-export * from './helpers/PlaneHelper';
-export * from './helpers/ArrowHelper';
-export * from './helpers/AxesHelper';
-export * from './extras/curves/Curves';
-export * from './extras/core/Shape';
-export * from './extras/core/Path';
-export * from './extras/core/ShapePath';
-export * from './extras/core/Font';
-export * from './extras/core/CurvePath';
-export * from './extras/core/Curve';
-export * from './extras/ImageUtils';
-export * from './extras/ShapeUtils';
-export * from './extras/PMREMGenerator';
-export * from './renderers/webgl/WebGLBufferRenderer';
-export * from './renderers/webgl/WebGLCapabilities';
-export * from './renderers/webgl/WebGLClipping';
-export * from './renderers/webgl/WebGLExtensions';
-export * from './renderers/webgl/WebGLGeometries';
-export * from './renderers/webgl/WebGLIndexedBufferRenderer';
-export * from './renderers/webgl/WebGLInfo';
-export * from './renderers/webgl/WebGLLights';
-export * from './renderers/webgl/WebGLObjects';
-export * from './renderers/webgl/WebGLProgram';
-export * from './renderers/webgl/WebGLPrograms';
-export * from './renderers/webgl/WebGLProperties';
-export * from './renderers/webgl/WebGLRenderLists';
-export * from './renderers/webgl/WebGLShader';
-export * from './renderers/webgl/WebGLShadowMap';
-export * from './renderers/webgl/WebGLState';
-export * from './renderers/webgl/WebGLTextures';
-export * from './renderers/webgl/WebGLUniforms';
-export * from './constants';
-export * from './Three.Legacy';
-
-export as namespace THREE;

web/src/Routes.js

@@ -13,7 +13,6 @@ const Routes = () => {
   return (
     <Router>
       <Route path="/" page={PartsPage} name="home" />
-      {/* <Route path="/blah/*" page={PartsPage} name="home" /> */}
       <Route notfound page={NotFoundPage} />
 
       {/* Ownership enforced routes */}
@@ -24,7 +23,7 @@ const Routes = () => {
 
       <Route path="/u/{userName}" page={User2Page} name="user2" />
       <Route path="/u/{userName}/{partTitle}" page={Part2Page} name="part2" />
-      {/* <Route path="/u/{userName}/{partTitle}/ide" page={Part2Page} name="part2" /> */}
+      <Route path="/u/{userName}/{partTitle}/ide" page={IdePartPage} name="ide" />
 
       {/* GENERATED ROUTES BELOW, probably going to clean these up and delete most of them, but the CRUD functionality is useful for now */}
       {/* All private by default for safety and because the routes that are left after clean up will probably be admin pages */}

web/src/components/IdeCascadeStudio/IdeCascadeStudio.js

@@ -0,0 +1,57 @@
+import { useAuth } from '@redwoodjs/auth'
+import { Link, routes } from '@redwoodjs/router'
+import CascadeController from 'src/helpers/cascadeController'
+import IdeToolbar from 'src/components/IdeToolbar'
+import { useEffect, useState } from 'react'
+
+const domNode = document.createElement('div').setAttribute('id', 'sickId')
+
+const IdeCascadeStudio = ({ part, saveCode, loading, error }) => {
+  const [code, setCode] = useState(part.code)
+  const { currentUser } = useAuth()
+  const canEdit = currentUser?.sub === part?.user?.id
+  useEffect(() => {
+    // Cascade studio attaches "cascade-container" a div outside the react app in 'web/src/index.html', and so we are
+    // "opening" and "closing" it for the ide part of the app by displaying none or block. Which is why this useEffect
+    // returns a clean up function that hides the div again.
+    const onCodeChange = (code) => setCode(code)
+    CascadeController.initialise(onCodeChange, part.code, domNode)
+    const element = document.getElementById('cascade-container')
+    element.setAttribute('style', 'display: block; opacity: 100%; overflow: hidden; height: calc(100vh - 8rem)') // eslint-disable-line
+    return () => {
+      element.setAttribute('style',  'display: none; overflow: hidden; height: calc(100vh - 8rem)') // eslint-disable-line
+    }
+  }, [part.code])
+  const isChanges = code !== part.code
+
+  return (
+    <>
+      <div>
+        <IdeToolbar
+          canEdit={canEdit}
+          isChanges={isChanges && !loading}
+          onSave={() => {
+            saveCode({
+              input: {
+                code,
+                title: part?.title,
+                userId: currentUser?.sub,
+                description: part?.description,
+              },
+              id: part.id,
+              isFork: !canEdit,
+            })
+          }}
+          onExport={(type) => threejsViewport[`saveShape${type}`]()}
+          userNamePart={{
+            userName: part.user.userName,
+            partTitle: part.title,
+            image: part?.user?.image,
+          }}
+        />
+      </div>
+    </>
+  )
+}
+
+export default IdeCascadeStudio

web/src/components/IdeCascadeStudio/IdeCascadeStudio.stories.js

@@ -0,0 +1,7 @@
+import IdeCascadeStudio from './IdeCascadeStudio'
+
+export const generated = () => {
+  return <IdeCascadeStudio />
+}
+
+export default { title: 'Components/IdeCascadeStudio' }

web/src/components/IdeCascadeStudio/IdeCascadeStudio.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import IdeCascadeStudio from './IdeCascadeStudio'
+
+describe('IdeCascadeStudio', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<IdeCascadeStudio />)
+    }).not.toThrow()
+  })
+})

web/src/components/IdePartCell/IdePartCell.js

@@ -1,46 +1,80 @@
 import { useMutation, useFlash } from '@redwoodjs/web'
 import { navigate, routes } from '@redwoodjs/router'
-// import Part from 'src/components/Part'
+import IdeCascadeStudio from 'src/components/IdeCascadeStudio'
 
 export const QUERY = gql`
-  query FIND_PART_BY_ID($id: Int!) {
-    part: part(id: $id) {
+  query FIND_PART_BY_USENAME_TITLE($partTitle: String!, $userName: String!) {
+    part: partByUserAndTitle(partTitle: $partTitle, userName: $userName) {
       id
       title
       description
       code
       mainImage
       createdAt
+      user {
+        id
+        userName
+      }
     }
   }
 `
 
 const UPDATE_PART_MUTATION = gql`
-  mutation UpdatePartMutation($id: Int!, $input: UpdatePartInput!) {
+  mutation UpdatePartMutation($id: String!, $input: UpdatePartInput!) {
     updatePart(id: $id, input: $input) {
       id
     }
   }
 `
+const FORK_PART_MUTATION = gql`
+  mutation ForkPartMutation($input: CreatePartInput!) {
+    forkPart(input: $input) {
+      id
+      title
+      user {
+        userName
+      }
+    }
+  }
+`
 
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Part not found</div>
 
-export const Success = ({ part }) => {
+export const Success = ({ part, refetch }) => {
   const { addMessage } = useFlash()
   const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
     onCompleted: () => {
-      // navigate(routes.part({id: updatePart.id}))
       addMessage('Part updated.', { classes: 'rw-flash-success' })
     },
   })
-  console.log({ updatePart })
+  const [forkPart] = useMutation(FORK_PART_MUTATION, {
+    onCompleted: ({ forkPart }) => {
+      navigate(
+        routes.ide({
+          userName: forkPart?.user?.userName,
+          partTitle: forkPart?.title,
+        })
+      )
+      addMessage('Part Forked.', { classes: 'rw-flash-success' })
+    },
+  })
 
-  const saveCode = (input, id) => {
-    console.log(id, input, 'wowow')
-    updatePart({ variables: { id, input } })
+  const saveCode = ({ input, id, isFork }) => {
+    if (!isFork) {
+      updatePart({ variables: { id, input } })
+      refetch()
+      return
+    }
+    forkPart({ variables: { input } })
   }
-  return <div>TODO part</div>
-  // return <Part part={{...part, code: part.code}} saveCode={saveCode} loading={loading} error={error} />
+  return (
+    <IdeCascadeStudio
+      part={part}
+      saveCode={saveCode}
+      loading={loading}
+      error={error}
+    />
+  )
 }

web/src/components/IdeToolbar/IdeToolbar.js

@@ -0,0 +1,111 @@
+import { useState } from 'react'
+import Popover from '@material-ui/core/Popover'
+import { Link, routes, navigate } from '@redwoodjs/router'
+
+import Button from 'src/components/Button'
+import ImageUploader from 'src/components/ImageUploader'
+
+const IdeToolbar = ({ canEdit, isChanges, onSave, onExport, userNamePart }) => {
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+  const id = open ? 'simple-popover' : undefined
+
+  return (
+    <div
+      id="cadhub-ide-toolbar"
+      className="flex bg-gradient-to-r from-gray-900 to-indigo-900 pt-1"
+    >
+      <div className="flex items-center">
+        <div className="h-8 w-8 ml-4">
+          <ImageUploader
+            className="rounded-full object-cover"
+            onImageUpload={() => {}}
+            aspectRatio={1}
+            imageUrl={userNamePart?.image}
+            width={80}
+          />
+        </div>
+        <div className="text-indigo-400 ml-2 mr-8">
+          <Link to={routes.user2({ userName: userNamePart?.userName })}>
+            {userNamePart?.userName}
+          </Link>
+        </div>
+      </div>
+      <Button
+        iconName="arrow-left"
+        className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
+        shouldAnimateHover
+        onClick={() => {
+          navigate(routes.part2(userNamePart))
+        }}
+      >
+        Part Profile
+      </Button>
+      <Button
+        iconName={canEdit ? 'save' : 'fork'}
+        className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
+        shouldAnimateHover
+        onClick={onSave}
+      >
+        {canEdit ? 'Save' : 'Fork'}
+        {isChanges && (
+          <span className="relative h-4">
+            <span className="text-pink-400 text-2xl absolute transform -translate-y-3">
+              *
+            </span>
+          </span>
+        )}
+      </Button>
+      <div>
+        <Button
+          iconName="logout"
+          className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
+          shouldAnimateHover
+          aria-describedby={id}
+          onClick={handleClick}
+        >
+          Export
+        </Button>
+        <Popover
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+          className="material-ui-overrides transform translate-y-4"
+        >
+          <ul className="text-sm py-2 text-gray-500">
+            {['STEP', 'STL', 'OBJ'].map((exportType) => (
+              <li key={exportType} className="px-4 py-2 hover:bg-gray-200">
+                <button onClick={() => onExport(exportType)}>
+                  export
+                  <span className="pl-1 text-base text-indigo-600">
+                    {exportType}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+export default IdeToolbar

web/src/components/IdeToolbar/IdeToolbar.stories.js

@@ -0,0 +1,20 @@
+import IdeToolbar from './IdeToolbar'
+
+export const generated = () => {
+  return (
+    <div>
+      {[
+        <IdeToolbar canEdit />,
+        <IdeToolbar canEdit isChanges />,
+        <IdeToolbar />,
+        <IdeToolbar isChanges />,
+      ].map((toolbar, index) => (
+        <div key={index} className="pb-2">
+          {toolbar}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default { title: 'Components/IdeToolbar' }

web/src/components/IdeToolbar/IdeToolbar.test.js

@@ -1,11 +1,11 @@
 import { render } from '@redwoodjs/testing'
 
-import HomePage from './HomePage'
+import IdeToolbar from './IdeToolbar'
 
-describe('HomePage', () => {
+describe('IdeToolbar', () => {
   it('renders successfully', () => {
     expect(() => {
-      render(<HomePage />)
+      render(<IdeToolbar />)
     }).not.toThrow()
   })
 })

web/src/components/PartProfile/PartProfile.js

@@ -92,14 +92,21 @@ const PartProfile = ({
           >
             Comments 11
           </Button>
-          <Button
-            className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200"
-            shouldAnimateHover
-            iconName="terminal"
-            onClick={() => {}}
+          <Link
+            to={routes.ide({
+              userName: userPart.userName,
+              partTitle: part.title,
+            })}
           >
-            Open IDE
-          </Button>
+            <Button
+              className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200"
+              shouldAnimateHover
+              iconName="terminal"
+              onClick={() => {}}
+            >
+              Open IDE
+            </Button>
+          </Link>
           {canEdit && (
             <Button
               className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20"

web/src/components/Svg/Svg.js

@@ -1,5 +1,20 @@
 const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
   const svgs = {
+    'arrow-left': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M10 19l-7-7m0 0l7-7m-7 7h18"
+        />
+      </svg>
+    ),
     'chevron-down': (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -30,6 +45,34 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    fork: (
+      <svg
+        viewBox="-3 -3 32 32" // TODO size this properly, or get a better icon
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+      >
+        <path
+          d="M7.5 21C7.5 20.1719 6.82812 19.5 6 19.5C5.17188 19.5 4.5 20.1719 4.5 21C4.5 21.8281 5.17188 22.5 6 22.5C6.82812 22.5 7.5 21.8281 7.5 21ZM7.5 3C7.5 2.17188 6.82812 1.5 6 1.5C5.17188 1.5 4.5 2.17188 4.5 3C4.5 3.82812 5.17188 4.5 6 4.5C6.82812 4.5 7.5 3.82812 7.5 3ZM20.5 5C20.5 4.17188 19.8281 3.5 19 3.5C18.1719 3.5 17.5 4.17188 17.5 5C17.5 5.82812 18.1719 6.5 19 6.5C19.8281 6.5 20.5 5.82812 20.5 5ZM22 5C22 6.10938 21.3906 7.07812 20.5 7.59375C20.4531 13.2344 13.4531 14.4844 10.7969 15.3281C8.3125 16.1094 7.5 16.4844 7.5 18V18.4062C8.39062 18.9219 9 19.8906 9 21C9 22.6562 7.65625 24 6 24C4.34375 24 3 22.6562 3 21C3 19.8906 3.60938 18.9219 4.5 18.4062V5.59375C3.60938 5.07812 3 4.10938 3 3C3 1.34375 4.34375 0 6 0C7.65625 0 9 1.34375 9 3C9 4.10938 8.39062 5.07812 7.5 5.59375V13.3594C8.29688 12.9688 9.14062 12.7031 9.90625 12.4688C12.8125 11.5469 17.4688 10.8594 17.5 7.59375C16.6094 7.07812 16 6.10938 16 5C16 3.34375 17.3438 2 19 2C20.6562 2 22 3.34375 22 5Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+    logout: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+        />
+      </svg>
+    ),
     pencil: (
       <svg
         xmlns="http://www.w3.org/2000/svg"

web/src/helpers/cascadeController.js

@@ -0,0 +1,25 @@
+import { initialize, getEditor } from 'src/cascade/js/MainPage/CascadeMain'
+
+class CascadeController {
+  _hasInitialised = false
+  incomingOnCodeChang = () => {}
+  controllerOnCodeChange = (code) => {
+    this.incomingOnCodeChang(code)
+  }
+
+  initialise(onCodeChange, code) {
+    // only inits on first call, after that it just updates the editor and revaluates code, maybe should rename?
+    this.incomingOnCodeChang = onCodeChange
+    if (!this._hasInitialised) {
+      initialize(this.controllerOnCodeChange, code)
+      this._hasInitialised = true
+      return
+    }
+    const editor = getEditor()
+    editor.setValue(code)
+    editor.evaluateCode(false)
+    return this.domNode
+  }
+}
+
+export default new CascadeController()

web/src/index.css

@@ -44,6 +44,11 @@
   @apply list-disc;
 }
 
+.material-ui-overrides,.MuiPopover-paper {
+  /* stop pop over from scrolling */
+  overflow: visible !important;
+}
+
 body {
   /* TODO can I use a tailwind class here? */
   background-color: #f7fafc;

web/src/index.html

@@ -11,23 +11,25 @@
       // Install Cascade Studio as a Progressive Web App for Offline Access
       // This needs to be put before ANY HTTP Requests are made, so it can cache them.
       var messageHandlers = {};
+      var threejsViewport = {};
+      messageHandlers["resetWorking"] = () => { workerWorking = false; }
       var cascadeStudioWorker
       var workerWorking = false
       var galleryProject = undefined
-      function coolGuy() {
-        if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.register('service-worker.js').then(function(registration) {
-                registration.update(); // Always update the registration for the latest assets
-            }, function() {
-                console.log('Could not register Cascade Studio for offline use!');
-            });
-        } else {
-            console.log('Browser does not support offline access!');
-        }
+      function initCascadeStudio() {
+        // if ('serviceWorker' in navigator) {
+        //     navigator.serviceWorker.register('service-worker.js').then(function(registration) {
+        //         registration.update(); // Always update the registration for the latest assets
+        //     }, function() {
+        //         console.log('Could not register Cascade Studio for offline use!');
+        //     });
+        // } else {
+        //     console.log('Browser does not support offline access!');
+        // }
 
         // Begins loading the CAD Kernel Web Worker
         if (window.Worker) {
-            cascadeStudioWorker = new Worker('/src/cascade/js/CADWorker/CascadeStudioMainWorker.js');
+            cascadeStudioWorker = new Worker('/CADWorker/CascadeStudioMainWorker.js');
             // Ping Pong Messages Back and Forth based on their registration in messageHandlers
             // var messageHandlers = {};
             cascadeStudioWorker.onmessage = function (e) {
@@ -38,10 +40,14 @@
             }
         }
       }
-      // coolGuy()
+      initCascadeStudio()
     </script>
   </head>
   <body>
     <div id="redwood-app"></div>
+    <div
+      id="cascade-container"
+      style="opacity: 0; overflow: hidden; height: calc(100vh - 8rem)"
+    ></div>
   </body>
 </html>

web/src/layouts/MainLayout/MainLayout.js

@@ -51,7 +51,7 @@ const MainLayout = ({ children }) => {
   }
   return (
     <>
-      <header>
+      <header id="cadhub-main-header">
         <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
           <ul className="flex items-center">
             <li>
@@ -128,7 +128,7 @@ const MainLayout = ({ children }) => {
             }}
           >
             {isAuthenticated && currentUser ? (
-              <div style={{ padding: '1em', width: '15em' }}>
+              <div className="p-4 w-40">
                 <Link to={routes.user2({ userName: data?.user?.userName })}>
                   <h3 className="text-indigo-800" style={{ fontWeight: '500' }}>
                     Hello {data?.user?.name}

web/src/pages/HomePage/HomePage.js

@@ -1,123 +0,0 @@
-import MainLayout from 'src/layouts/MainLayout'
-// import BlogPostsCell from 'src/components/BlogPostsCell'
-import { initialize } from 'src/cascade/js/MainPage/CascadeMain'
-import { useEffect, useState } from 'react'
-
-const starterCode = `// Welcome to Cascade Studio!   Here are some useful functions:
-//  Translate(), Rotate(), Scale(), Union(), Difference(), Intersection()
-//  Box(), Sphere(), Cylinder(), Cone(), Text3D(), Polygon()
-//  Offset(), Extrude(), RotatedExtrude(), Revolve(), Pipe(), Loft(),
-//  FilletEdges(), ChamferEdges(),
-//  Slider(), Button(), Checkbox()
-
-// Uncomment and hover over them to see their apis
-
-let holeRadius = Slider("Radius", 30 , 20 , 40);
-
-let sphere     = Sphere(50);
-let cylinderZ  =                     Cylinder(holeRadius, 200, true);
-let cylinderY  = Rotate([0,1,0], 90, Cylinder(holeRadius, 200, true));
-let cylinderX  = Rotate([1,0,0], 90, Cylinder(holeRadius, 200, true));
-
-Translate([0, 0, 50], Difference(sphere, [cylinderX, cylinderY, cylinderZ]));
-
-Translate([-100, 0, 100], Text3D("cadhub.xyz"));
-
-// Don't forget to push imported or oc-defined shapes into sceneShapes to add them to the workspace!
-`
-
-const HomePage1 = () => {
-  const [code, setCode] = useState(starterCode)
-  useEffect(() => {
-    const sickCallback = (code) => setCode(code)
-    new initialize(sickCallback, starterCode)
-  }, [])
-  return (
-    <MainLayout>
-      <div>current code {code}</div>
-      <BlogPostsCell />
-      <div>
-        <div id="topnav" className="topnav">
-          <a href="https://github.com/zalo/CascadeStudio">
-            Cascade Studio 0.0.6
-          </a>
-          <a
-            href="#"
-            id="main-proj-button"
-            title="Sets this project to save in local storage."
-            onClick={() => makeMainProject()}
-          >
-            Make Main Project
-          </a>
-          <a
-            href="#"
-            title="Save Project to .json"
-            onClick={() => saveProject()}
-          >
-            Save Project
-          </a>
-          <label htmlFor="project-file" title="Load Project from .json">
-            Load Project
-            <input
-              id="project-file"
-              name="project-file"
-              type="file"
-              accept=".json"
-              style={{ display: 'none' }}
-              onInput={() => loadProject()}
-            />
-          </label>
-          <a href="#" onClick={() => threejsViewport.saveShapeSTEP()}>
-            Save STEP
-          </a>
-          <a href="#" onClick={() => threejsViewport.saveShapeSTL()}>
-            Save STL
-          </a>
-          <a href="#" onClick={() => threejsViewport.saveShapeOBJ()}>
-            Save OBJ
-          </a>
-          <label
-            htmlFor="files"
-            title="Import STEP, IGES, or (ASCII) STL from File"
-          >
-            Import STEP/IGES/STL
-            <input
-              id="files"
-              name="files"
-              type="file"
-              accept=".iges,.step,.igs,.stp,.stl"
-              multiple
-              style={{ display: 'none' }}
-              onInput={() => loadFiles()}
-            />
-          </label>
-          <a
-            href="#"
-            title="Clears the external step/iges/stl files stored in the project."
-            onClick={() => clearExternalFiles()}
-          >
-            Clear Imported Files
-          </a>
-          <a
-            href=""
-            title="Resets the project and localstorage."
-            onClick={() => {
-              window.localStorage.clear()
-              window.history.replaceState({}, 'Cascade Studio', '?')
-            }}
-          >
-            Reset Project
-          </a>
-        </div>
-        <div id="cascade-container" style={{ height: 'auto' }}></div>
-        <footer>footer</footer>
-      </div>
-    </MainLayout>
-  )
-}
-
-const HomePage = () => {
-  return <MainLayout>hi</MainLayout>
-}
-
-export default HomePage

web/src/pages/HomePage/HomePage.stories.js

@@ -1,7 +0,0 @@
-import HomePage from './HomePage'
-
-export const generated = () => {
-  return <HomePage />
-}
-
-export default { title: 'Pages/HomePage' }

web/src/pages/IdePartPage/IdePartPage.js

@@ -1,11 +1,10 @@
-import { Link, routes } from '@redwoodjs/router'
 import MainLayout from 'src/layouts/MainLayout'
 import IdePartCell from 'src/components/IdePartCell'
 
-const IdePartPage = ({ id }) => {
+const IdePartPage = ({ userName, partTitle }) => {
   return (
     <MainLayout>
-      <IdePartCell id={id} />
+      <IdePartCell userName={userName} partTitle={partTitle} />
     </MainLayout>
   )
 }

yarn.lock

@@ -11912,16 +11912,24 @@ open@^7.0.0:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
-opencascade.js@^0.1.15:
-  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/opencascade.js/-/opencascade.js-0.1.19.tgz#32d545ca4add213d168eb6e6973dceba1bcab35b"
-  integrity sha512-7q8LNihtU7BzsIXXoqTHq2/7ASfDdK5OycuI1oscc/9Opmew8OXjcv/oTSF+w5U+0dwUt8LewdG/xYSIkkf8Ig==
+opencascade.js@0.1.15:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/opencascade.js/-/opencascade.js-0.1.15.tgz#2898494707472c53b99bc6e3b5f99ff24c33b4e0"
+  integrity sha512-Xg3Po97wkNaBGjDR88+xI6vJPrxrAnF0eYZ1+jhIjy9p/GYp3fVi4zO4mL9H+F1aagd977XY5kHdScOlWiQfhQ==
 
 opener@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
   integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
 
+opentype.js@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-1.3.3.tgz#65b8645b090a1ad444065b784d442fa19d1061f6"
+  integrity sha512-/qIY/+WnKGlPIIPhbeNjynfD2PO15G9lA/xqlX2bDH+4lc3Xz5GCQ68mqxj3DdUv6AJqCeaPvuAoH8mVL0zcuA==
+  dependencies:
+    string.prototype.codepointat "^0.2.1"
+    tiny-inflate "^1.0.3"
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -14586,6 +14594,11 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string.prototype.codepointat@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc"
+  integrity sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==
+
 "string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
@@ -15086,6 +15099,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-inflate@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
 tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"