diff --git a/src/react/app.jsx b/src/react/app.jsx index a7152a8..ed9ed0f 100644 --- a/src/react/app.jsx +++ b/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 diff --git a/src/react/carousel_raf.jsx b/src/react/carousel_raf.jsx deleted file mode 100644 index 04d63b6..0000000 --- a/src/react/carousel_raf.jsx +++ /dev/null @@ -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 <> -
inc(1) - }>1
-
inc(-1) - } - >2
-
- {rect.width && -
- { - arr.map((e, idx) => { - - return
- hi {e} -
- }) - } -
- } -
- - -} diff --git a/src/react/dropDown.jsx b/src/react/dropDown.jsx deleted file mode 100644 index d687785..0000000 --- a/src/react/dropDown.jsx +++ /dev/null @@ -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
- {/*
- Demo Parts -
*/} - - { - open && -
- {arr.map(([url, name], idx) => ( -
- {name} -
- ))} -
-
- } -
-} \ No newline at end of file diff --git a/src/react/navBar.jsx b/src/react/navBar.jsx index cac6bc4..e58e77e 100644 --- a/src/react/navBar.jsx +++ b/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 = () => { { splash && - + } { diff --git a/src/react/help.jsx b/src/react/onboard.jsx similarity index 99% rename from src/react/help.jsx rename to src/react/onboard.jsx index d20bc28..73eb467 100644 --- a/src/react/help.jsx +++ b/src/react/onboard.jsx @@ -87,7 +87,7 @@ const arr = [ -export const Help = ({ setModal, setQs }) => { +export const Onboard = ({ setModal, setQs }) => { diff --git a/src/react/reducer.js b/src/react/reducer.js index a7bde75..9d0d388 100644 --- a/src/react/reducer.js +++ b/src/react/reducer.js @@ -107,7 +107,6 @@ const defaultUIState = { fileName: 'Untitled', selectedList: [], selectedSet: {}, - help: false } export function ui(state = defaultUIState, action) {