reshot animations

demo/user-guide.md

@@ -1,5 +1,24 @@
 
 
+const basicWorkflowTS = [
+  10, 'Sketching on a plane',
+  10, 'Extruding a sketch to a solid',
+  10, 'Sketch on a face of a solid',
+  10, 'Peforming boolean operation between solids',
+]
+
+const editWorkflowTS = [
+  10, 'opening a file from disk',
+  10, 'editing an existing sketch',
+  10, 'accepting the edit and exiting',
+]
+
+const exportTS = [
+  10, 'selecting a body for export',
+  10, 'initiate export',
+  10, 'loading exported stl into 3dprint slicer',
+  10, 'result',
+]
 
 
 

src/react/clip.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, useReducer } from "react"
+import React from "react"
 import { MdCancel } from 'react-icons/md'
 
 
@@ -12,7 +12,6 @@ export const Clip = ({ setClip, clip }) => {
 
   width = Math.min(width * 0.9, 1024)
   const top = (window.innerHeight - (width / 1.6) - 32) / 2
-  // console.log(width, width/1.6, window.innerHeight, top)
 
   return (
     <div className='absolute left-0 right-0 m-auto flex flex-col
@@ -23,7 +22,7 @@ export const Clip = ({ setClip, clip }) => {
         top,
       }}
     >
-      <div className='text-xl flex justify-center items-center bg-green-900 '>
+      <div className='text-xl flex justify-center items-center bg-green-500 '>
         <div className='text-gray-50'>
           {clip[1]}
         </div>
@@ -39,22 +38,3 @@ export const Clip = ({ setClip, clip }) => {
   )
 }
 
-const basicWorkflowTS = [
-  10, 'Sketching on a plane',
-  10, 'Extruding a sketch to a solid',
-  10, 'Sketch on a face of a solid',
-  10, 'Peforming boolean operation between solids',
-]
-
-const editWorkflowTS = [
-  10, 'opening a file from disk',
-  10, 'editing an existing sketch',
-  10, 'accepting the edit and exiting',
-]
-
-const exportTS = [
-  10, 'selecting a body for export',
-  10, 'initiate export',
-  10, 'loading exported stl into 3dprint slicer',
-  10, 'result',
-]

src/react/help.jsx

@@ -48,7 +48,7 @@ function reducer(state, action) {
     case 'drag':
       const dragLeft = state.dragLeft - action.move
 
-      if (dragLeft < 0 || dragLeft > state.rect * arr.length - 1) {
+      if (dragLeft < 0 || dragLeft > state.rect * (arr.length - 1)) {
         return state
       } else {
         return {
@@ -74,7 +74,7 @@ const transTime = 300
 const elastic = `transform ${transTime}ms cubic-bezier(0.4, 0.0, 0.2, 1)`;
 
 const arr = [
-  ['Sketch out your idea in a 2D outline.', 'sketch.png'],
+  ['Sketch out the 2D outline of your idea.', 'sketch.mp4'],
   ['Extrude the sketched shape into a 3D solid.', 'extrude.png'],
   ['Use additional sketches to sculpt or extend the model.', 'sculpt.gif'],
   ['Export your design to a 3D printer and turn into reality!', '3dprint.mp4'],
@@ -178,6 +178,7 @@ export const Help = ({ setModal, setQs }) => {
                         width: state.rect * 0.8,
                         height: state.rect * 0.8,
                       }}
+                      draggable='false'
                     ></img>
                 }
 
@@ -203,7 +204,7 @@ export const Help = ({ setModal, setQs }) => {
     </div>
 
     <div
-      className="cursor-pointer text-gray-50 bg-green-500 rounded p-1.5 inline-block hover:bg-green-600"
+      className="cursor-pointer text-gray-50 bg-green-500 rounded p-1.5 inline-block hover:bg-green-500"
       // style={{ 
       //   position:'absolute'
       //   bottom: 0.1 * state.rect}}

src/react/navBar.jsx

@@ -32,7 +32,6 @@ export const NavBar = () => {
   const modified = useSelector(state => state.ui.modified)
   const fileName = useSelector(state => state.ui.fileName)
   const mode = useSelector(state => state.ui.mode)
-  const help = useSelector(state => state.ui.help)
 
   const boolOp = (code) => {
     if (sce.selected.length != 2 || !sce.selected.every(e => e.userData.type == 'mesh')) {
@@ -190,7 +189,7 @@ export const NavBar = () => {
         ([Icon, fcn, txt], idx) => (
           Icon !== undefined ?
             <Icon className={`cursor-pointer fill-current w-auto h-full p-3.5
-            ${idx == buttonIdx[mode] ? 'bg-green-800' : 'hover:bg-gray-600 bg-transparent'}`} tooltip={txt}
+            ${idx == buttonIdx[mode] ? 'bg-green-500' : 'hover:bg-gray-600 bg-transparent'}`} tooltip={txt}
               onClick={fcn} key={idx}
             /> :
             <div className="w-12 h-full"></div>
@@ -200,7 +199,7 @@ export const NavBar = () => {
     <div className='w-auto h-full flex-1 justify-end flex-shrink-1 hidden md:flex'>
 
       <MdHelpOutline className={`cursor-pointer fill-current w-auto h-full p-3
-            ${modal ? 'bg-green-800' : 'hover:bg-gray-600 bg-transparent'}`} onClick={() => {
+            ${modal ? 'bg-green-500' : 'hover:bg-gray-600 bg-transparent'}`} onClick={() => {
         setModal(true)
       }
       } />

src/react/quickStart.jsx

@@ -59,24 +59,14 @@ export const QuickStart = ({ setModal }) => {
   const dispatch = useDispatch()
 
   const [clip, setClip] = useState(null)
-  const [rect, setRect] = useState(Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800))
 
-  const updateSize = () => {
-    setRect(Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800))
-  }
-  useEffect(() => {
-    window.addEventListener('resize', updateSize)
-    return () => {
-      window.removeEventListener('resize', updateSize)
-    }
-  }, [])
 
   return <div className="absolute left-0 right-0 mx-auto bg-gray-700 flex flex-col items-center
   text-sm lg:text-base xl:text-lg text-gray-50"
     style={{
-      width: rect,
+      width: 'min(800px, 70%)',
-      height: 1.1 * rect,
+      height: '90%' ,
-      top: (window.innerHeight - 1.1 * rect) / 2,
+      top: 'calc(5% + 14px)' ,
     }}
   >
     <div className='w-full h-full bg-transparent overflow-y-auto overflow-x-hidden flex flex-col items-center'>
@@ -175,7 +165,7 @@ export const QuickStart = ({ setModal }) => {
       </div>
     </div>
 
-    <div className='absolute -top-7 w-full text-xl flex justify-center items-center bg-green-800'>
+    <div className='absolute -top-7 w-full text-xl flex justify-center items-center bg-green-500'>
       <div className='text-gray-50'>
         Quick Start
         </div>

src/shared.js

@@ -12,7 +12,8 @@ raycaster.params.Points.threshold = 1;
 
 
 const color = {
-  background: 0x18181B,
+  // background: 0x181818,
+  background: 0x404040,
   lighting: 0xFFFFFF,
   emissive: 0x072534,
   meshTempHover: 0x9DCFED,