css/react carousel

master
howard 2021-04-29 03:42:52 -07:00
parent e23985a80f
commit 525a13171c
23 changed files with 862 additions and 16 deletions

BIN
demo/basic-workflow.mp4 Normal file

Binary file not shown.

1
demo/cube-with-hole.json Normal file

File diff suppressed because one or more lines are too long

BIN
demo/export-to-3dprint.mp4 Normal file

Binary file not shown.

View File

@ -0,0 +1,281 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="580"
height="470"
viewBox="0 0 579.99995 470.00002"
version="1.1"
id="svg2112"
inkscape:version="1.0.2 (1.0.2+r75+1)"
sodipodi:docname="feature-screen-diagram.svg"
inkscape:export-filename="/home/howard/Documents/three_again/demo/ui-diagram-labelled.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<defs
id="defs2106">
<linearGradient
inkscape:collect="always"
id="linearGradient1400">
<stop
style="stop-color:#000000;stop-opacity:0"
offset="0"
id="stop1396" />
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"
id="stop1398" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient1344">
<stop
style="stop-color:#000000;stop-opacity:0"
offset="0"
id="stop1340" />
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"
id="stop1342" />
</linearGradient>
<rect
x="184.93768"
y="398.17691"
width="145.55893"
height="30.240499"
id="rect1171" />
<linearGradient
inkscape:collect="always"
id="linearGradient1042">
<stop
style="stop-color:#000000;stop-opacity:0"
offset="0"
id="stop1038" />
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"
id="stop1040" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1042"
id="linearGradient1030"
x1="445.22595"
y1="424.96655"
x2="682.62335"
y2="424.96655"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0086706,0,0,1.0122555,-3.8603581,-9.4157352)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1042"
id="linearGradient1091"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.46236616,0,0,0.77071983,-134.78789,198.55535)"
x1="816.16608"
y1="106.28653"
x2="816.16608"
y2="232.19882" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1042"
id="linearGradient1105"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.46236616,0,0,0.77071983,-134.78789,198.55535)"
x1="816.16608"
y1="185.95866"
x2="816.16608"
y2="405.76633" />
<rect
x="184.93768"
y="398.17691"
width="143.17085"
height="33.860397"
id="rect1171-0" />
<rect
x="184.93768"
y="398.17691"
width="156.64307"
height="104.99782"
id="rect1186" />
<rect
x="184.93768"
y="398.17691"
width="170.47702"
height="29.928768"
id="rect1171-0-3" />
<rect
x="184.93768"
y="398.17691"
width="156.64307"
height="104.99782"
id="rect1230" />
<rect
x="184.93768"
y="398.17691"
width="121.1055"
height="33.602245"
id="rect1171-0-0" />
<rect
x="184.93768"
y="398.17691"
width="156.64307"
height="104.99782"
id="rect1230-6" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1400"
id="linearGradient1346"
x1="396.75552"
y1="258.31982"
x2="562.50885"
y2="258.31982"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.84392839,0,0,0.97305033,105.20295,13.440827)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1344"
id="linearGradient1375"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.675829,0,0,0.87460688,89.776288,-404.94328)"
x1="356.03503"
y1="258.31982"
x2="562.54382"
y2="258.31982" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="0.77327252"
inkscape:cx="86.383774"
inkscape:cy="270.02082"
inkscape:document-units="px"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="2069"
inkscape:window-height="1215"
inkscape:window-x="208"
inkscape:window-y="91"
inkscape:window-maximized="0"
units="px" />
<metadata
id="metadata2109">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g1097"
transform="translate(-141.06952,-106.88704)">
<image
sodipodi:absref="/home/howard/Documents/three_again/demo/ui-diagram.png"
xlink:href="ui-diagram.png"
inkscape:export-ydpi="96"
inkscape:export-xdpi="96"
style="fill:none;fill-opacity:1"
y="141.88704"
x="141.06952"
id="image874"
preserveAspectRatio="none"
height="637"
width="1024" />
</g>
<rect
style="display:inline;fill:none;stroke:#ff8000;stroke-width:4.33957;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect862-6-5"
width="271.57394"
height="43.660435"
x="352.16977"
y="37.169781" />
<rect
style="display:inline;fill:none;stroke:#00aaff;stroke-width:4.463;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect862-6-5-1"
width="381.37656"
height="414.56198"
x="242.23149"
y="85.231499" />
<rect
style="display:inline;fill:none;stroke:#ff00ff;stroke-width:4.03483;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect862-6-5-2"
width="195.96516"
height="43.965168"
x="152.01743"
y="37.017414" />
<rect
style="display:inline;fill:none;stroke:#80ff00;stroke-width:4.19643;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect862-6-5-2-7"
width="235.80357"
height="379.07791"
x="2.0982153"
y="121.09821" />
<text
xml:space="preserve"
id="text1169"
style="font-style:normal;font-weight:normal;font-size:24px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1171);fill:#000000;fill-opacity:1;stroke:none;"
transform="translate(-94.997535,-272.17773)"><tspan
x="184.9375"
y="419.41211"><tspan
style="font-size:24px;fill:#80ff00;fill-opacity:1">Design Tree</tspan></tspan></text>
<text
xml:space="preserve"
id="text1169-9"
style="font-style:normal;font-weight:normal;font-size:24px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1171-0);display:inline;fill:#ff00ff;fill-opacity:1;stroke:none;"
transform="translate(-27.292969,-391.17773)"><tspan
x="184.9375"
y="419.41211"><tspan
style="font-size:24px;fill:#ff00ff;fill-opacity:1">Dialog Box</tspan></tspan></text>
<text
xml:space="preserve"
id="text1169-9-6"
style="font-style:normal;font-weight:normal;font-size:24px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1171-0-3);display:inline;fill:#000000;fill-opacity:1;stroke:none;"
transform="translate(64.722662,-308.17773)"><tspan
x="184.9375"
y="419.41211"><tspan
style="font-size:24px;fill:#00aaff;fill-opacity:1">Canvas</tspan></tspan></text>
<text
xml:space="preserve"
id="text1169-9-2"
style="font-style:normal;font-weight:normal;font-size:24px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1171-0-0);display:inline;fill:#000000;fill-opacity:1;stroke:none;"
transform="translate(175.13281,-391.17773)"><tspan
x="184.9375"
y="419.41211"><tspan
style="font-size:24px;fill:#ff8000;fill-opacity:1">Toolbar</tspan></tspan></text>
<rect
style="opacity:1;fill:url(#linearGradient1346);fill-opacity:1;stroke:none;stroke-width:3.62476;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect1338"
width="140"
height="467.87961"
x="440"
y="30.859051" />
<rect
style="display:inline;fill:url(#linearGradient1375);fill-opacity:1;stroke:none;stroke-width:3.07528;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect1338-2"
width="140"
height="381.08569"
x="330"
y="-349.8287"
transform="rotate(90)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

File diff suppressed because one or more lines are too long

BIN
demo/image874.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
demo/load-file-and-edit.mp4 Normal file

Binary file not shown.

BIN
demo/sketch-screen.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
demo/ui-diagram.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

83
demo/user-guide.md Normal file
View File

@ -0,0 +1,83 @@
Draw a two outline using lines and arcs
Extrude the ouline into a 3d solid
combine multiple solids to form the part you desire
uplaod your design to a 3d printer
General Workflow for part creation
Specify a sketch plane
Draw a closed loop shape
Extrude 2D sketch
the program consists of 4 major areas labelled below
Dialog Box
Normally hidden. This box appears when the user is adding or editting a sketch or extrusion
input area: This specifies the extrusion amount
flip icon: This flips the extrusion direction
green check: When clicked the program will proceed with adding or editting a sketch/extrusion
red x: allows the user to bail out of adding or editting a sketch/extrusion
Toolbar
sketch: Initiates a new sketch, before clicking this button, the user must first select a plane, or three points on existing extrusions to define a sketch plane.
extrude: Intiates new extrusion dialog. before clickin gthis button. The user must firs select a sketch to extrude from
boolean add: Creates a new solid that is a boolean union or two selected solids.
boolean subtract: Creates a new solid that is a boolean subtraction of the second selected solid from the first selected solid.
boolean add: Creates a new solid that is a boolean intersection or two selected solids.
new document: Wipes the current workspace and starts a fresh document
save: saves current document. on the inital save the user can specify save location and file name
open: loads an existing document from the local disk.
STL: Exports selected solid to 3d print friendly stl format
extrude: creates a new extrusion from the current sketch.
line: initiates line sketch mode. Subsequent clicks on the canvas define the vertices of the line segment chain.
arc: initiates arc sketch mode. Subsequently, a three click sequence on the canvas spefies the arc shape. The first sets the start point, the seconds the endpoint, and the third the radius.
dimension: allows hte user to add distance or angle constraints to the sketch. When 2 points, or 1 point and 1 line are selected, a distance contraint is added. When two lines are selected, an angle constraint is added
coincident: Adds a coincident contraint between two points, or a line and a point
vertical: adds a vertical constraint the the selected line, or two selected points
horizontal: adds a horizontal constraint the the selected line, or two selected points
tangent: adds a tangent constraint between selected two arcs, or a line and a arc. The selected entities must first between connected by a coicident contraint on their endpoints
User can click this again or escape to exit this mode
Design Tree

BIN
dist/basic-workflow.mp4 vendored Normal file

Binary file not shown.

104
extlib/cubicBezier.js Normal file
View File

@ -0,0 +1,104 @@
/**
* https://github.com/gre/bezier-easing
* BezierEasing - use bezier curve for transition easing function
* by Gaëtan Renaudeau 2014 - 2015 MIT License
*/
// These values are established by empiricism with tests (tradeoff: performance VS precision)
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;
var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
var float32ArraySupported = typeof Float32Array === 'function';
function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C(aA1) { return 3.0 * aA1; }
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
function binarySubdivide(aX, aA, aB, mX1, mX2) {
var currentX, currentT, i = 0;
do {
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
return currentT;
}
function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
var currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope === 0.0) {
return aGuessT;
}
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
function LinearEasing(x) {
return x;
}
export const Bezier = function (mX1, mY1, mX2, mY2) {
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
throw new Error('bezier x values must be in [0, 1] range');
}
if (mX1 === mY1 && mX2 === mY2) {
return LinearEasing;
}
// Precompute samples table
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
for (var i = 0; i < kSplineTableSize; ++i) {
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}
function getTForX(aX) {
var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
intervalStart += kSampleStepSize;
}
--currentSample;
// Interpolate to provide an initial guess for t
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;
var initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} else if (initialSlope === 0.0) {
return guessForT;
} else {
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
}
}
return function BezierEasing(x) {
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
if (x === 0 || x === 1) {
return x;
}
return calcBezier(getTForX(x), mY1, mY2);
};
};

View File

@ -364,7 +364,6 @@ function render() {
this.camera.left = -canvas.clientWidth / canvas.clientHeight; this.camera.left = -canvas.clientWidth / canvas.clientHeight;
this.camera.right = canvas.clientWidth / canvas.clientHeight; this.camera.right = canvas.clientWidth / canvas.clientHeight;
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
console.log(this.camera.zoom)
this.controls.handleResize() this.controls.handleResize()
Object.assign(this.rect, this.canvas.getBoundingClientRect().toJSON()) Object.assign(this.rect, this.canvas.getBoundingClientRect().toJSON())

View File

@ -10,6 +10,7 @@ import { NavBar } from './navBar'
import { ToolTip } from './toolTip' import { ToolTip } from './toolTip'
import './app.css' import './app.css'
import { Help } from './help'
let store let store
@ -26,6 +27,7 @@ const App = ({ store }) => {
<NavBar /> <NavBar />
<Tree /> <Tree />
<ToolTip /> <ToolTip />
<Help/>
</Provider> </Provider>
} }

137
src/react/carousel.jsx Normal file
View File

@ -0,0 +1,137 @@
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
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);
}
}
const transTime = 200
const elastic = `transform ${transTime}ms cubic-bezier(0.4, 0.0, 0.2, 1)`;
export const Carousel = () => {
const arr = [1, 2, 3]
const ref = useRef(null)
const [dragging, setDragging] = useState(false)
// const dragging = useRef(false)
const [rect, setRect] = useState({})
const [pg, setPg] = useState(0)
const [dragLeft, setDragLeft] = useState(0)
useEffect(() => {
setRect(ref.current.getBoundingClientRect())
}, [ref])
const updateSize = useCallback(
debounce(
// throttle(
() => {
setRect(ref.current.getBoundingClientRect())
}
, 200
)
, []
)
// const updateSize = () => setRect(ref.current.getBoundingClientRect())
useEffect(() => {
// dragging.current = false
// console.log(dragging)
// setDragLeft(pg * rect.width)
// setDragging(false)
}, [rect])
useEffect(() => {
window.addEventListener('resize', updateSize)
return () => window.removeEventListener('resize', updateSize)
}, [])
return <>
<div
className='select-none'
onClick={
() => setPg(pg + 1)
}>1</div>
<div
className='select-none'
onClick={
() => setPg(pg - 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'
onMouseDown={() => {
setDragging(true)
// dragging.current = true
setDragLeft(pg * rect.width)
}}
onMouseMove={(e) => {
if (e.buttons != 1) return
setDragLeft(state => state + e.movementX)
}}
onMouseUp={(e) => {
// dragging.current = false
setPg(Math.round(dragLeft / rect.width))
setDragging(false)
}}
style={{
height: '80%',
width: 1 * rect.width,
top: 0,
// left: dragging ? dragLeft : pg * rect.width,
left: 0,
transform: `translateX(${dragging ? dragLeft : pg * rect.width}px)`,
transition: dragging ? null : elastic
}}>
{
arr.map((e, idx) => {
return <div key={idx} style={{}}>
hi {e}
</div>
})
}
</div>
}
</div>
</>
}

141
src/react/carousel_raf.jsx Normal file
View File

@ -0,0 +1,141 @@
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,8 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useDispatch} from 'react-redux' import { useDispatch } from 'react-redux'
import { MdHelpOutline } from 'react-icons/md'
const utf8decoder = new TextDecoder(); const utf8decoder = new TextDecoder();
@ -52,17 +53,18 @@ export const DropDown = () => {
) )
) )
dispatch({ type: 'restore-state', state, fileName:arr[idx][1]}) dispatch({ type: 'restore-state', state, fileName: arr[idx][1] })
sce.render() sce.render()
} }
} }
return <div className="cursor-pointer w-28 h-full overflow-visible relative select-none" 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}> {/* <div className="btn text-gray-200 h-full w-full flex items-center justify-center" onClick={handleOutsideClick}>
Demo Parts Demo Parts
</div> </div> */}
<MdHelpOutline className="btn-green w-auto h-full p-3" onClick={handleOutsideClick} />
{ {
open && open &&
<div className="absolute drop-down-top -left-10 w-48 p-1 rounded bg-gray-700" <div className="absolute drop-down-top -left-10 w-48 p-1 rounded bg-gray-700"

89
src/react/help.jsx Normal file
View File

@ -0,0 +1,89 @@
import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { MdCancel, MdClose, MdHelpOutline } from 'react-icons/md'
import { Carousel } from './carousel'
// 10, 'Use the line tool',
// 10, 'Adding dimensions',
// 10, 'Adding vetical/horizontal constraints',
// 10, 'Drawing an arc',
// 10, 'Adding coincident constraints',
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',
]
export const Help = () => {
const handleClick = (e) => {
/*
this handles inside click as well due to bubbling,
sets the open/close state of drop down
*/
!e.composedPath().includes(ref.current) && dispatch({ type: 'set-help', status: false })
}
const handleTimeUpdate = (e) => {
}
const ref = useRef()
const vidRef = useRef()
useEffect(() => {
document.addEventListener( // handles click outside buttona & dropdown
'pointerdown',
handleClick
,
{ capture: true } // capture phase to allow for stopPropogation on others
)
return () => document.removeEventListener('pointerdown', handleClick)
}, [])
const dispatch = useDispatch()
const [open, setOpen] = useState(false)
const status = useSelector(state => state.ui.help)
if (status) {
return <div className="absolute w-1/5 h-1/5 left-0 top-0 right-0 bottom-0 m-auto bg-green-200
flex flex-col items-center
"
// return <div className="absolute w-full h-full bg-green-200"
// onClick={handleInsideClick}
ref={ref}
>
<MdCancel className="btn-green absolute h-7 w-auto right-4 top-4"/>
<Carousel />
</div >
} else {
return null
}
}

View File

@ -5,11 +5,12 @@ import React, { useEffect, useReducer } from 'react';
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { FaEdit, FaLinkedin, FaGithub } from 'react-icons/fa' import { FaEdit, FaLinkedin, FaGithub } from 'react-icons/fa'
import { MdSave, MdFolder, MdInsertDriveFile } from 'react-icons/md' import { MdSave, MdFolder, MdInsertDriveFile, MdHelpOutline } from 'react-icons/md'
import * as Icon from "./icons"; import * as Icon from "./icons";
import { Dialog } from './dialog' import { Dialog } from './dialog'
import { DropDown } from './dropDown' import { DropDown } from './dropDown'
import { Help } from './help'
import { STLExport, saveFile, openFile } from './fileHelpers' import { STLExport, saveFile, openFile } from './fileHelpers'
const buttonIdx = { const buttonIdx = {
@ -115,13 +116,13 @@ export const NavBar = () => {
const sketchModeButtons = [ const sketchModeButtons = [
[Icon.Extrude, () => dispatch({ type: 'set-dialog', action: 'extrude', target: sce.activeSketch.obj3d.name }), 'Extrude'], [Icon.Extrude, () => dispatch({ type: 'set-dialog', action: 'extrude', target: sce.activeSketch.obj3d.name }), 'Extrude'],
[Icon.Line, () => sce.activeSketch.command('line'), 'Line (L)'], //1 [Icon.Line, () => sce.activeSketch.command('line'), 'Line (l)'], //1
[Icon.Arc, () => sce.activeSketch.command('arc'), 'Arc (A)'], [Icon.Arc, () => sce.activeSketch.command('arc'), 'Arc (a)'],
[Icon.Dimension, () => sce.activeSketch.command('dimension'), 'Dimension (D)'], [Icon.Dimension, () => sce.activeSketch.command('dimension'), 'Dimension (d)'],
[Icon.Coincident, () => sce.activeSketch.command('coincident'), 'Coincident (C)'], [Icon.Coincident, () => sce.activeSketch.command('coincident'), 'Coincident (c)'],
[Icon.Vertical, () => sce.activeSketch.command('vertical'), 'Vertical (V)'], [Icon.Vertical, () => sce.activeSketch.command('vertical'), 'Vertical (v)'],
[Icon.Horizontal, () => sce.activeSketch.command('horizontal'), 'Horizontal (H)'], [Icon.Horizontal, () => sce.activeSketch.command('horizontal'), 'Horizontal (h)'],
[Icon.Tangent, () => sce.activeSketch.command('tangent'), 'Tangent (T)'], //7 [Icon.Tangent, () => sce.activeSketch.command('tangent'), 'Tangent (t)'], //7
[MdSave, async () => saveFile(fileHandle, JSON.stringify([id, sce.sid, sce.mid, treeEntries]), dispatch, fileName), 'Save'], [MdSave, async () => saveFile(fileHandle, JSON.stringify([id, sce.sid, sce.mid, treeEntries]), dispatch, fileName), 'Save'],
] ]
@ -193,7 +194,7 @@ export const NavBar = () => {
} }
</div> </div>
<div className='w-auto h-full flex-1 items-center justify-end flex-shrink-1 hidden md:flex'> <div className='w-auto h-full flex-1 items-center justify-end flex-shrink-1 hidden md:flex'>
<DropDown /> <MdHelpOutline className="btn-green w-auto h-full p-3" onClick={()=>dispatch({type:'set-help', status:true})}/>
<a href='https://github.com/twpride/three.cad' className='h-full w=auto'> <a href='https://github.com/twpride/three.cad' className='h-full w=auto'>
<FaGithub className="btn-green w-auto h-full p-3.5"></FaGithub> <FaGithub className="btn-green w-auto h-full p-3.5"></FaGithub>
</a> </a>

View File

@ -107,7 +107,7 @@ const defaultUIState = {
fileName: 'Untitled', fileName: 'Untitled',
selectedList: [], selectedList: [],
selectedSet: {}, selectedSet: {},
help: false
} }
export function ui(state = defaultUIState, action) { export function ui(state = defaultUIState, action) {
@ -195,6 +195,11 @@ export function ui(state = defaultUIState, action) {
mode: { $set: action.mode } mode: { $set: action.mode }
}) })
case 'set-help':
return update(state, {
help: { $set: action.status }
})
default: default:
return state return state
} }