css/react carousel
This commit is contained in:
howard
parent
e23985a80f
commit
525a13171c
BIN
demo/basic-workflow.mp4
Normal file
BIN
demo/basic-workflow.mp4
Normal file
Binary file not shown.
1
demo/cube-with-hole.json
Normal file
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
BIN
demo/export-to-3dprint.mp4
Normal file
Binary file not shown.
281
demo/feature-screen-diagram.svg
Normal file
281
demo/feature-screen-diagram.svg
Normal 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 |
BIN
demo/feature-screen-extrude.png
Normal file
BIN
demo/feature-screen-extrude.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
demo/headphones-stand.json
Normal file
1
demo/headphones-stand.json
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/image874.png
Normal file
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
BIN
demo/load-file-and-edit.mp4
Normal file
Binary file not shown.
BIN
demo/sketch-screen.png
Normal file
BIN
demo/sketch-screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
demo/ui-diagram-labelled.png
Normal file
BIN
demo/ui-diagram-labelled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
demo/ui-diagram.png
Normal file
BIN
demo/ui-diagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
83
demo/user-guide.md
Normal file
83
demo/user-guide.md
Normal 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
BIN
dist/basic-workflow.mp4
vendored
Normal file
Binary file not shown.
104
extlib/cubicBezier.js
Normal file
104
extlib/cubicBezier.js
Normal 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);
|
||||
};
|
||||
};
|
||||
@ -364,7 +364,6 @@ function render() {
|
||||
this.camera.left = -canvas.clientWidth / canvas.clientHeight;
|
||||
this.camera.right = canvas.clientWidth / canvas.clientHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
console.log(this.camera.zoom)
|
||||
|
||||
this.controls.handleResize()
|
||||
Object.assign(this.rect, this.canvas.getBoundingClientRect().toJSON())
|
||||
|
||||
@ -10,6 +10,7 @@ import { NavBar } from './navBar'
|
||||
import { ToolTip } from './toolTip'
|
||||
|
||||
import './app.css'
|
||||
import { Help } from './help'
|
||||
|
||||
|
||||
let store
|
||||
@ -26,6 +27,7 @@ const App = ({ store }) => {
|
||||
<NavBar />
|
||||
<Tree />
|
||||
<ToolTip />
|
||||
<Help/>
|
||||
</Provider>
|
||||
}
|
||||
|
||||
|
||||
137
src/react/carousel.jsx
Normal file
137
src/react/carousel.jsx
Normal 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
141
src/react/carousel_raf.jsx
Normal 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>
|
||||
</>
|
||||
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
|
||||
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();
|
||||
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
</div>
|
||||
</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"
|
||||
|
||||
89
src/react/help.jsx
Normal file
89
src/react/help.jsx
Normal 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
|
||||
}
|
||||
}
|
||||
@ -5,11 +5,12 @@ import React, { useEffect, useReducer } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
|
||||
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 { Dialog } from './dialog'
|
||||
import { DropDown } from './dropDown'
|
||||
import { Help } from './help'
|
||||
import { STLExport, saveFile, openFile } from './fileHelpers'
|
||||
|
||||
const buttonIdx = {
|
||||
@ -115,13 +116,13 @@ export const NavBar = () => {
|
||||
|
||||
const sketchModeButtons = [
|
||||
[Icon.Extrude, () => dispatch({ type: 'set-dialog', action: 'extrude', target: sce.activeSketch.obj3d.name }), 'Extrude'],
|
||||
[Icon.Line, () => sce.activeSketch.command('line'), 'Line (L)'], //1
|
||||
[Icon.Arc, () => sce.activeSketch.command('arc'), 'Arc (A)'],
|
||||
[Icon.Dimension, () => sce.activeSketch.command('dimension'), 'Dimension (D)'],
|
||||
[Icon.Coincident, () => sce.activeSketch.command('coincident'), 'Coincident (C)'],
|
||||
[Icon.Vertical, () => sce.activeSketch.command('vertical'), 'Vertical (V)'],
|
||||
[Icon.Horizontal, () => sce.activeSketch.command('horizontal'), 'Horizontal (H)'],
|
||||
[Icon.Tangent, () => sce.activeSketch.command('tangent'), 'Tangent (T)'], //7
|
||||
[Icon.Line, () => sce.activeSketch.command('line'), 'Line (l)'], //1
|
||||
[Icon.Arc, () => sce.activeSketch.command('arc'), 'Arc (a)'],
|
||||
[Icon.Dimension, () => sce.activeSketch.command('dimension'), 'Dimension (d)'],
|
||||
[Icon.Coincident, () => sce.activeSketch.command('coincident'), 'Coincident (c)'],
|
||||
[Icon.Vertical, () => sce.activeSketch.command('vertical'), 'Vertical (v)'],
|
||||
[Icon.Horizontal, () => sce.activeSketch.command('horizontal'), 'Horizontal (h)'],
|
||||
[Icon.Tangent, () => sce.activeSketch.command('tangent'), 'Tangent (t)'], //7
|
||||
[MdSave, async () => saveFile(fileHandle, JSON.stringify([id, sce.sid, sce.mid, treeEntries]), dispatch, fileName), 'Save'],
|
||||
]
|
||||
|
||||
@ -193,7 +194,7 @@ export const NavBar = () => {
|
||||
}
|
||||
</div>
|
||||
<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'>
|
||||
<FaGithub className="btn-green w-auto h-full p-3.5"></FaGithub>
|
||||
</a>
|
||||
|
||||
@ -107,7 +107,7 @@ const defaultUIState = {
|
||||
fileName: 'Untitled',
|
||||
selectedList: [],
|
||||
selectedSet: {},
|
||||
|
||||
help: false
|
||||
}
|
||||
|
||||
export function ui(state = defaultUIState, action) {
|
||||
@ -195,6 +195,11 @@ export function ui(state = defaultUIState, action) {
|
||||
mode: { $set: action.mode }
|
||||
})
|
||||
|
||||
case 'set-help':
|
||||
return update(state, {
|
||||
help: { $set: action.status }
|
||||
})
|
||||
|
||||
default:
|
||||
return state
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user