rename files
howard
parent
6ddf353f6e
commit
e90bc13fea
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
}
|
||||
|
|
@ -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>
|
||||
}
|
||||
{
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ const arr = [
|
|||
|
||||
|
||||
|
||||
export const Help = ({ setModal, setQs }) => {
|
||||
export const Onboard = ({ setModal, setQs }) => {
|
||||
|
||||
|
||||
|
||||
|
|
@ -107,7 +107,6 @@ const defaultUIState = {
|
|||
fileName: 'Untitled',
|
||||
selectedList: [],
|
||||
selectedSet: {},
|
||||
help: false
|
||||
}
|
||||
|
||||
export function ui(state = defaultUIState, action) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue