rename files

src/react/app.jsx

@@ -10,7 +10,7 @@ import { NavBar } from './navBar'
 import { ToolTip } from './toolTip'
 
 import './app.css'
-import { Help } from './help'
+import { Onboard } from './onboard'
 
 
 let store

src/react/carousel_raf.jsx

@@ -1,141 +0,0 @@
-import { Bezier } from '../../extlib/cubicBezier'
-
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-const bezier = Bezier(0.4, 0.0, 0.2, 1);
-
-
-export function throttle(callback, limit) {
-  let handler = null;                      // Initially, we're not waiting
-  return (...args) => {                      // We return a throttled function
-    if (!handler) {                       // If we're not waiting
-      callback(...args);  // Execute users function
-      handler = setTimeout(() => handler = null, limit);
-    }
-  }
-}
-
-
-function debounce(callback, delay) {
-  let handler = null;
-  return (...args) => {
-    clearTimeout(handler);
-    handler = setTimeout(() => callback(...args), delay);
-  }
-}
-
-
-export const Carousel = () => {
-  const arr = [1, 2, 3]
-
-
-  const [pg, setPg] = useState(0)
-  const [left, setLeft] = useState(0)
-  const cardSlideStartTime = useRef(null)
-  const leftStart = useRef(null)
-  const delta = useRef(null)
-  const ref = useRef(null)
-
-  const [rect, setRect] = useState({})
-  window.pp = pg
-
-  const cardSlideLoop = useCallback(
-    function (timestamp) {
-      if (!rect.width) return;
-      if (!cardSlideStartTime.current) { // first req anim call
-        cardSlideStartTime.current = timestamp;
-        leftStart.current = left;
-
-        delta.current = pg * rect.width - left;
-      }
-
-      const elapsed = timestamp - cardSlideStartTime.current;
-
-      if (elapsed < 200) { // when animation is stil running
-        setLeft(leftStart.current + bezier(elapsed / 200) * delta.current)
-        requestAnimationFrame(cardSlideLoop);
-      } else {  // when animation completes
-        setLeft(leftStart.current + delta.current)
-        cardSlideStartTime.current = null;
-      }
-    }, [pg, rect]
-  )
-
-  const inc = useCallback(
-    throttle(
-      (dir) => setPg(state => state + dir)
-      , 200
-    )
-    , []
-  )
-
-
-
-  const updateSize = useCallback(
-    debounce(
-      () => {
-        const rect = ref.current.getBoundingClientRect()
-        setRect(rect)
-        setLeft(pg * rect.width)
-      }
-      , 200
-    )
-    , [pg]
-  )
-
-
-  useEffect(() => requestAnimationFrame(cardSlideLoop), [pg])
-
-  useEffect(() => {
-    setRect(ref.current.getBoundingClientRect())
-  }, [])
-
-
-  useLayoutEffect(() => {
-
-
-    window.addEventListener('resize', updateSize)
-
-    return () => window.removeEventListener('resize', updateSize)
-
-  }, [pg])
-
-  return <>
-    <div
-      className='select-none'
-      onClick={
-        () => inc(1)
-      }>1</div>
-    <div
-      className='select-none'
-      onClick={
-        () => inc(-1)
-      }
-    >2</div>
-    <div
-      ref={ref}
-      className='relative overflow-visible bg-gray-200 h-full w-full'
-    >
-      {rect.width &&
-        <div
-          className='absolute overflow-visible bg-green-400'
-          style={{
-            height: '80%',
-            width: 3 * rect.width,
-            top: 0,
-            left,
-          }}>
-          {
-            arr.map((e, idx) => {
-
-              return <div key={idx} style={{}}>
-                hi {e}
-              </div>
-            })
-          }
-        </div>
-      }
-    </div>
-  </>
-
-}

src/react/dropDown.jsx

@@ -1,87 +0,0 @@
-
-import React, { useState } from 'react';
-
-import { useDispatch } from 'react-redux'
-
-import { MdHelpOutline } from 'react-icons/md'
-
-
-const utf8decoder = new TextDecoder();
-
-export const DropDown = () => {
-  const arr = [
-    ['https://raw.githubusercontent.com/twpride/threeCAD/master/demo_parts/headphones-stand.json.gz', 'headphones-stand'],
-  ]
-
-  const dispatch = useDispatch()
-  const [open, setOpen] = useState(false)
-
-  const handleOutsideClick = (ev) => {
-    /*
-      this handles inside click as well due to bubbling, 
-      sets the open/close state of drop down
-    */
-    setOpen(state => !state) // handle click on button & dropdown, always a toggle
-
-    document.addEventListener( // handles click outside buttona & dropdown
-      'pointerdown',
-      (e) => { 
-        console.log(e.composedPath())
-        !e.composedPath().includes(ev.target.parentNode) && setOpen(false) }
-      ,
-      { capture: false, once: true } // capture phase to allow for stopPropogation on others
-    )
-
-  }
-
-  const handleInsideClick = async (e) => {
-    // handles click inside dropdown, business logic here
-    const idx = Array.prototype.indexOf.call(e.target.parentNode.children, e.target)
-
-    if (idx !== -1) {
-      setOpen(false)
-
-      const state = sce.loadState(
-        utf8decoder.decode(
-          new Zlib.Gunzip(
-            new Uint8Array(
-              await (
-                await (
-                  await fetch(arr[idx][0])
-                ).blob()
-              ).arrayBuffer()
-            )
-          ).decompress()
-        )
-      )
-
-      dispatch({ type: 'restore-state', state, fileName: arr[idx][1] })
-      sce.render()
-    }
-  }
-
-  return <div className="cursor-pointer w-auto h-full overflow-visible relative select-none"
-
-  >
-    {/* <div className="btn text-gray-200 h-full w-full flex items-center justify-center" onClick={handleOutsideClick}>
-      Demo Parts
-    </div> */}
-    <MdHelpOutline className="btn-green w-auto h-full p-3" onClick={handleOutsideClick} />
-    {
-      open &&
-      <div className="absolute drop-down-top -left-10 w-48 p-1 rounded bg-gray-700"
-        onClick={handleInsideClick}
-      >
-        {arr.map(([url, name], idx) => (
-          <div className="w-full h-8 p-0.5 flex items-center bg-transparent text-gray-200
-          hover:bg-gray-500 "
-            key={idx}
-          >
-            {name}
-          </div>
-        ))}
-        <div className="arrow"></div>
-      </div>
-    }
-  </div>
-}

src/react/navBar.jsx

@@ -12,7 +12,7 @@ import { Dialog } from './dialog'
 import { Modal } from './modal'
 import { STLExport, saveFile, openFile } from './fileHelpers'
 import { QuickStart } from './quickStart';
-import { Help } from './help'
+import { Onboard } from './onboard'
 const visitedFlagStorage = sessionStorage
 const buttonIdx = {
   'line': 1,
@@ -213,7 +213,7 @@ export const NavBar = () => {
     </div>
     {
       splash && <Modal {...{ setModal: setSplash, clickOut: false}}>
-        <Help {...{ setModal: setSplash, setQs: setModal }} />
+        <Onboard {...{ setModal: setSplash, setQs: setModal }} />
       </Modal>
     }
     {

src/react/onboard.jsx

@@ -87,7 +87,7 @@ const arr = [
 
 
 
-export const Help = ({ setModal, setQs }) => {
+export const Onboard = ({ setModal, setQs }) => {
 
 
 

src/react/reducer.js

@@ -107,7 +107,6 @@ const defaultUIState = {
   fileName: 'Untitled',
   selectedList: [],
   selectedSet: {},
-  help: false
 }
 
 export function ui(state = defaultUIState, action) {