rename files

master
howard 2021-05-04 02:46:05 -07:00
parent 6ddf353f6e
commit e90bc13fea
6 changed files with 4 additions and 233 deletions

View File

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

View File

@ -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>
</>
}

View File

@ -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>
}

View File

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

View File

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

View File

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