css/react carousel
howard
parent
e23985a80f
commit
525a13171c
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -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
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -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
|
||||||
Binary file not shown.
|
|
@ -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.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())
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,7 @@ 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();
|
||||||
|
|
@ -57,12 +58,13 @@ export const DropDown = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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"
|
||||||
|
|
|
||||||
|
|
@ -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 { 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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue