working splash

This commit is contained in:
howard 2021-05-03 15:21:21 -07:00
parent 7eea185fe3
commit a3338c5e33
25 changed files with 308 additions and 205 deletions

BIN
demo/gif/1.xcf Normal file

Binary file not shown.

BIN
demo/gif/Untitled.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

BIN
demo/gif/combined.xcf Normal file

Binary file not shown.

BIN
demo/gif/extrude.xcf Normal file

Binary file not shown.

BIN
demo/gif/sculpt.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

BIN
demo/gif/sculpt.xcf Normal file

Binary file not shown.

BIN
demo/gif/sketch.xcf Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

BIN
dist/extrude.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
dist/headphones-stand.json.gz vendored Normal file

Binary file not shown.

BIN
dist/sculpt.gif vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

BIN
dist/sketch.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -7,13 +7,13 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="left-click.svg"
sodipodi:docname="mouseLeft.svg"
inkscape:version="1.0.2 (1.0.2+r75+1)"
id="svg8"
version="1.1"
viewBox="0 0 126.99952 185.20821"
height="700"
width="480">
viewBox="0 0 105.83293 169.33322"
height="640"
width="400">
<defs
id="defs2" />
<sodipodi:namedview
@ -23,9 +23,9 @@
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:zoom="0.54116056"
inkscape:cx="372.27334"
inkscape:cy="277.94027"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
@ -35,8 +35,8 @@
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-x="250"
inkscape:window-y="68"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
@ -76,7 +76,7 @@
<path
sodipodi:nodetypes="ccssssssccccsssssscc"
inkscape:connector-curvature="0"
d="m 57.143525,34.384496 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.430706,18.031964 -40.430706,40.430406 v 61.835008 c 0,22.39862 18.032094,40.43072 40.430706,40.43072 h 19.026222 c 22.398612,0 40.430715,-18.0321 40.430715,-40.43072 V 74.814902 c 0,-22.398442 -18.032103,-40.430406 -40.430715,-40.430406 z"
d="m 46.559996,30.570985 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.4307056,18.031964 -40.4307056,40.430406 v 54.928399 c 0,22.39862 18.0320936,40.43072 40.4307056,40.43072 h 19.026222 c 22.398612,0 40.430714,-18.0321 40.430714,-40.43072 V 71.001391 c 0,-22.398442 -18.032102,-40.430406 -40.430714,-40.430406 z"
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect4559" />
</g>
@ -87,7 +87,7 @@
inkscape:groupmode="layer">
<path
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="M 46.23194,44.336396 C 32.052243,49.048938 21.880146,62.386753 21.880146,78.188753 V 101.4958 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 55.9867 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
d="M 35.64824,40.523027 C 21.468543,45.235569 11.296446,58.573384 11.296446,74.375384 v 23.307047 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 52.173331 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
@ -102,8 +102,8 @@
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
x="46.376202"
y="47.756729"
rx="4.7565541"
ry="4.7565541" />
</g>
@ -116,7 +116,7 @@
sodipodi:nodetypes="cscccsssc"
inkscape:connector-curvature="0"
id="path4664"
d="m 80.768052,44.336396 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 101.4958 H 63.499996 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 55.9867 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
d="m 70.18449,40.523027 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 97.682431 H 52.916434 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 52.173331 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
@ -127,7 +127,7 @@
<path
id="path4588"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 53.19098,18.360058 63.533489,8.0175498 73.809009,18.293074 M 63.533489,29.640336 V 8.0175498"
d="M 42.607486,14.546746 52.949995,4.2042382 63.225515,14.479762 M 52.949995,25.827024 V 4.2042382"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
@ -139,7 +139,7 @@
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
d="m 53.19098,105.46811 10.342509,10.3425 10.27552,-10.27552 M 63.533489,94.187874 v 21.622736"
d="m 42.607485,101.6547 10.342509,10.3425 10.27552,-10.27552 M 52.949994,90.374462 V 111.9972"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4591" />
</g>

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -7,13 +7,13 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="middle-click.svg"
sodipodi:docname="mouseMiddle.svg"
inkscape:version="1.0.2 (1.0.2+r75+1)"
id="svg8"
version="1.1"
viewBox="0 0 126.99952 185.20821"
height="700"
width="480">
viewBox="0 0 105.83293 169.33322"
height="640"
width="400">
<defs
id="defs2" />
<sodipodi:namedview
@ -23,9 +23,9 @@
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:zoom="0.54116056"
inkscape:cx="372.27334"
inkscape:cy="277.94027"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
@ -35,8 +35,8 @@
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-x="250"
inkscape:window-y="68"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
@ -76,7 +76,7 @@
<path
sodipodi:nodetypes="ccssssssccccsssssscc"
inkscape:connector-curvature="0"
d="m 57.143525,34.384496 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.430706,18.031964 -40.430706,40.430406 v 61.835008 c 0,22.39862 18.032094,40.43072 40.430706,40.43072 h 19.026222 c 22.398612,0 40.430715,-18.0321 40.430715,-40.43072 V 74.814902 c 0,-22.398442 -18.032103,-40.430406 -40.430715,-40.430406 z"
d="m 46.559996,30.570985 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.4307056,18.031964 -40.4307056,40.430406 v 54.928399 c 0,22.39862 18.0320936,40.43072 40.4307056,40.43072 h 19.026222 c 22.398612,0 40.430714,-18.0321 40.430714,-40.43072 V 71.001391 c 0,-22.398442 -18.032102,-40.430406 -40.430714,-40.430406 z"
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect4559" />
</g>
@ -87,7 +87,7 @@
inkscape:groupmode="layer">
<path
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="M 46.23194,44.336396 C 32.052243,49.048938 21.880146,62.386753 21.880146,78.188753 V 101.4958 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 55.9867 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
d="M 35.64824,40.523027 C 21.468543,45.235569 11.296446,58.573384 11.296446,74.375384 v 23.307047 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 52.173331 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
@ -102,8 +102,8 @@
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
x="46.376202"
y="47.756729"
rx="4.7565541"
ry="4.7565541" />
</g>
@ -116,7 +116,7 @@
sodipodi:nodetypes="cscccsssc"
inkscape:connector-curvature="0"
id="path4664"
d="m 80.768052,44.336396 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 101.4958 H 63.499996 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 55.9867 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
d="m 70.18449,40.523027 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 97.682431 H 52.916434 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 52.173331 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
@ -127,7 +127,7 @@
<path
id="path4588"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 53.19098,18.360058 63.533489,8.0175498 73.809009,18.293074 M 63.533489,29.640336 V 8.0175498"
d="M 42.607486,14.546746 52.949995,4.2042382 63.225515,14.479762 M 52.949995,25.827024 V 4.2042382"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
@ -139,7 +139,7 @@
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
d="m 53.19098,105.46811 10.342509,10.3425 10.27552,-10.27552 M 63.533489,94.187874 v 21.622736"
d="m 42.607485,101.6547 10.342509,10.3425 10.27552,-10.27552 M 52.949994,90.374462 V 111.9972"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4591" />
</g>

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -7,13 +7,13 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="right-click.svg"
sodipodi:docname="mouseRight.svg"
inkscape:version="1.0.2 (1.0.2+r75+1)"
id="svg8"
version="1.1"
viewBox="0 0 126.99952 185.20821"
height="700"
width="480">
viewBox="0 0 105.83293 169.33322"
height="640"
width="400">
<defs
id="defs2" />
<sodipodi:namedview
@ -23,9 +23,9 @@
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:zoom="0.54116056"
inkscape:cx="372.27334"
inkscape:cy="277.94027"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
@ -35,8 +35,8 @@
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="462"
inkscape:window-y="87"
inkscape:window-x="250"
inkscape:window-y="68"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
@ -76,7 +76,7 @@
<path
sodipodi:nodetypes="ccssssssccccsssssscc"
inkscape:connector-curvature="0"
d="m 57.143525,34.384496 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.430706,18.031964 -40.430706,40.430406 v 61.835008 c 0,22.39862 18.032094,40.43072 40.430706,40.43072 h 19.026222 c 22.398612,0 40.430715,-18.0321 40.430715,-40.43072 V 74.814902 c 0,-22.398442 -18.032103,-40.430406 -40.430715,-40.430406 z"
d="m 46.559996,30.570985 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.4307056,18.031964 -40.4307056,40.430406 v 54.928399 c 0,22.39862 18.0320936,40.43072 40.4307056,40.43072 h 19.026222 c 22.398612,0 40.430714,-18.0321 40.430714,-40.43072 V 71.001391 c 0,-22.398442 -18.032102,-40.430406 -40.430714,-40.430406 z"
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect4559" />
</g>
@ -87,7 +87,7 @@
inkscape:groupmode="layer">
<path
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="M 46.23194,44.336396 C 32.052243,49.048938 21.880146,62.386753 21.880146,78.188753 V 101.4958 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 55.9867 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
d="M 35.64824,40.523027 C 21.468543,45.235569 11.296446,58.573384 11.296446,74.375384 v 23.307047 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 52.173331 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
@ -102,8 +102,8 @@
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
x="46.376202"
y="47.756729"
rx="4.7565541"
ry="4.7565541" />
</g>
@ -116,7 +116,7 @@
sodipodi:nodetypes="cscccsssc"
inkscape:connector-curvature="0"
id="path4664"
d="m 80.768052,44.336396 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 101.4958 H 63.499996 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 55.9867 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
d="m 70.18449,40.523027 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 97.682431 H 52.916434 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 52.173331 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
@ -127,7 +127,7 @@
<path
id="path4588"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 53.19098,18.360058 63.533489,8.0175498 73.809009,18.293074 M 63.533489,29.640336 V 8.0175498"
d="M 42.607486,14.546746 52.949995,4.2042382 63.225515,14.479762 M 52.949995,25.827024 V 4.2042382"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
@ -139,7 +139,7 @@
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
d="m 53.19098,105.46811 10.342509,10.3425 10.27552,-10.27552 M 63.533489,94.187874 v 21.622736"
d="m 42.607485,101.6547 10.342509,10.3425 10.27552,-10.27552 M 52.949994,90.374462 V 111.9972"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4591" />
</g>

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -7,13 +7,13 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="scroll.svg"
sodipodi:docname="mouseScroll.svg"
inkscape:version="1.0.2 (1.0.2+r75+1)"
id="svg8"
version="1.1"
viewBox="0 0 126.99952 185.20821"
height="700"
width="480">
viewBox="0 0 105.83293 169.33322"
height="640"
width="400">
<defs
id="defs2" />
<sodipodi:namedview
@ -23,9 +23,9 @@
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:zoom="0.54116056"
inkscape:cx="372.27334"
inkscape:cy="277.94027"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
@ -35,8 +35,8 @@
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-x="250"
inkscape:window-y="68"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
@ -76,7 +76,7 @@
<path
sodipodi:nodetypes="ccssssssccccsssssscc"
inkscape:connector-curvature="0"
d="m 57.143525,34.384496 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.430706,18.031964 -40.430706,40.430406 v 61.835008 c 0,22.39862 18.032094,40.43072 40.430706,40.43072 h 19.026222 c 22.398612,0 40.430715,-18.0321 40.430715,-40.43072 V 74.814902 c 0,-22.398442 -18.032103,-40.430406 -40.430715,-40.430406 z"
d="m 46.559996,30.570985 -0.0013,9.986098 c -4.619332,1.640928 -7.911862,6.034282 -7.911862,11.224912 v 21.40433 c 0,6.587782 5.303559,11.891298 11.891385,11.891298 h 4.756555 c 6.587828,0 11.891386,-5.303516 11.891386,-11.891298 v -21.40433 c 0,-5.20858 -3.315345,-9.614594 -7.958982,-11.230262 l -0.03128,-9.980748 z m -3.156642,0 c -22.398612,0 -40.4307056,18.031964 -40.4307056,40.430406 v 54.928399 c 0,22.39862 18.0320936,40.43072 40.4307056,40.43072 h 19.026222 c 22.398612,0 40.430714,-18.0321 40.430714,-40.43072 V 71.001391 c 0,-22.398442 -18.032102,-40.430406 -40.430714,-40.430406 z"
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect4559" />
</g>
@ -87,7 +87,7 @@
inkscape:groupmode="layer">
<path
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="M 46.23194,44.336396 C 32.052243,49.048938 21.880146,62.386753 21.880146,78.188753 V 101.4958 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 55.9867 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
d="M 35.64824,40.523027 C 21.468543,45.235569 11.296446,58.573384 11.296446,74.375384 v 23.307047 h 41.619849 v -4.972052 h -2.37874 c -10.504585,0 -19.130733,-8.629161 -19.130733,-19.132555 V 52.173331 c 0,-4.456035 1.625405,-8.462768 4.241418,-11.650304 z"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
@ -102,8 +102,8 @@
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
x="46.376202"
y="47.756729"
rx="4.7565541"
ry="4.7565541" />
</g>
@ -116,7 +116,7 @@
sodipodi:nodetypes="cscccsssc"
inkscape:connector-curvature="0"
id="path4664"
d="m 80.768052,44.336396 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 101.4958 H 63.499996 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 55.9867 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
d="m 70.18449,40.523027 c 14.179695,4.712542 24.351798,18.050357 24.351798,33.852357 V 97.682431 H 52.916434 v -4.972062 h 2.37874 c 10.504583,0 19.130731,-8.629151 19.130731,-19.132545 V 52.173331 c 0,-4.456035 -1.625405,-8.462768 -4.241415,-11.650304 z"
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.94569;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
</g>
<g
@ -127,7 +127,7 @@
<path
id="path4588"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 53.19098,18.360058 63.533489,8.0175498 73.809009,18.293074 M 63.533489,29.640336 V 8.0175498"
d="M 42.607486,14.546746 52.949995,4.2042382 63.225515,14.479762 M 52.949995,25.827024 V 4.2042382"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
@ -139,7 +139,7 @@
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
d="m 53.19098,105.46811 10.342509,10.3425 10.27552,-10.27552 M 63.533489,94.187874 v 21.622736"
d="m 42.607485,101.6547 10.342509,10.3425 10.27552,-10.27552 M 52.949994,90.374462 V 111.9972"
style="display:inline;fill:none;stroke:#ffffff;stroke-width:5.94569;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4591" />
</g>

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -1,5 +1,5 @@
import ReactDOM from 'react-dom'
import React from 'react'
import React, { useState } from 'react'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
@ -22,11 +22,15 @@ if (process.env.NODE_ENV === 'production') {
}
const visitedFlagStorage = sessionStorage
const App = ({ store }) => {
const [modal, setModal] = useState(!visitedFlagStorage.getItem('visited'))
return <Provider store={store}>
<NavBar />
<Tree />
<ToolTip />
{modal && < Help {...{ setModal }} />}
</Provider>
}
@ -34,7 +38,7 @@ const App = ({ store }) => {
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<App store={store} />, document.getElementById('react'));
visitedFlagStorage.setItem('visited', true);
});

View File

@ -3,16 +3,22 @@ import { MdCancel} from 'react-icons/md'
export const Clip = ({ setClip, clip }) => {
let width;
if (window.innerWidth / 1.6 > window.innerHeight) {
width = window.innerHeight * 1.6
} else {
width = window.innerWidth
}
const width = window.innerWidth * 0.9
const top = (window.innerHeight - (width / 1.6)) / 2
width = Math.min(width* 0.9, 1024)
const top = (window.innerHeight - (width / 1.6) - 32) / 2
// console.log(width, width/1.6, window.innerHeight, top)
return (
<div className='absolute left-0 right-0 m-auto bg-gray-700 flex flex-col
border-2 border-gray-500 rounded-2xl overflow-hidden
border-2 border-gray-500 rounded-2xl overflow-hidden
'
style={{
maxWidth: '1024px',
width,
top,
}}
@ -21,9 +27,6 @@ export const Clip = ({ setClip, clip }) => {
<div className='text-gray-50'>
{clip[1]}
</div>
<MdCancel className="absolute btn-green right-2"
onClick={() => setClip(null)}
/>
</div>
<video src={clip[0]} width='100%' controls muted type="video/mp4" />
</div>

View File

@ -25,9 +25,11 @@ export const DropDown = () => {
document.addEventListener( // handles click outside buttona & dropdown
'pointerdown',
(e) => { !e.composedPath().includes(ev.target.parentNode) && setOpen(false) }
(e) => {
console.log(e.composedPath())
!e.composedPath().includes(ev.target.parentNode) && setOpen(false) }
,
{ capture: true, once: true } // capture phase to allow for stopPropogation on others
{ capture: false, once: true } // capture phase to allow for stopPropogation on others
)
}

View File

@ -26,7 +26,7 @@ function reducer(state, action) {
switch (action.type) {
case 'resize':
const rect = Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7),800)
const rect = Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800)
return {
...state,
rect,
@ -46,10 +46,17 @@ function reducer(state, action) {
dragging: true
};
case 'drag':
return {
...state,
dragLeft: state.dragLeft - action.move
};
const dragLeft = state.dragLeft - action.move
if (dragLeft < 0 || dragLeft > state.rect * arr.length) {
return state
} else {
return {
...state,
dragLeft
}
}
case 'drag-end':
return {
...state,
@ -67,10 +74,10 @@ const transTime = 300
const elastic = `transform ${transTime}ms cubic-bezier(0.4, 0.0, 0.2, 1)`;
const arr = [
['Sketch out your ideas in 2D outlines.', 'link'],
['Transform the sketched shapes into 3D solids.', 'link'],
['Combine multiple solids to form more complex ones.', 'link'],
['Export your design to a 3D printer and turn into reality.', 'link'],
['Sketch out your idea in a 2D outline.', 'sketch.png'],
['Transform the sketched shape into a 3D solid.', 'extrude.png'],
['Use additional sketches to sculpt or extend the model.', 'sculpt.gif'],
['Export your design to a 3D printer and turn into reality.', ''],
]
@ -82,31 +89,10 @@ const arr = [
export const Help = ({ setModal }) => {
const dispatch = useDispatch()
const status = useSelector(state => state.ui.help)
// useEffect(() => {
// if (!status) return
// document.addEventListener( // handles click outside buttona & dropdown
// 'click',
// handleClick
// ,
// { capture: true } // capture phase to allow for stopPropogation on others
// )
// return () => {
// document.removeEventListener('click', handleClick, { capture: true }) // important to include options if it was specified
// }
// }, [status])
const ref = useRef(null)
const rect = Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7),800)
const rect = Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800)
const [state, carouselDispatch] = useReducer(reducer, { rect, pg: 0, dragLeft: 0, dragging: false })
@ -132,15 +118,25 @@ export const Help = ({ setModal }) => {
document.addEventListener('mousedown', handleMouseDown)
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
return () => {
window.removeEventListener('resize', updateSize)
document.removeEventListener('mousedown', handleMouseDown)
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
}
}, [])
// if (status) {
return <div className="absolute left-0 right-0 top-0 bottom-0 m-auto bg-gray-700 rounded-xl
return <div className="absolute left-0 right-0 mx-auto bg-gray-700 rounded-xl
flex flex-col items-center border-gray-500 border-2
text-sm lg:text-base xl:text-lg select-none
"
style={{
width: state.rect,
height: 1.1 * state.rect,
top: (window.innerHeight - 1.1 * state.rect) / 3
}}
ref={ref}
>
@ -148,28 +144,32 @@ export const Help = ({ setModal }) => {
<div className='w-full overflow-hidden relative rounded-t-xl'
style={{
height: state.rect,
// height: '100%',
}}
>
<div className='bg-transparent h-full flex select-none'
style={{
width: state.rect * (arr.length + 1),
transform: `translateX(${state.dragging ? -state.dragLeft-4 : -state.pg * state.rect-4}px)`,
transform: `translateX(${state.dragging ? -state.dragLeft - 4 : -state.pg * state.rect - 4}px)`,
transition: state.dragging ? null : elastic
}}
>
{
arr.map(
(e, idx) => <div className='flex flex-col items-center text-base lg:text-xl'
(e, idx) => <div className='flex flex-col items-center'
style={{ width: state.rect, height: '100%' }} key={idx}
>
<div className="bg-gray-800"
<img className="bg-gray-800"
src={e[1]}
style={{
width: state.rect * 0.8,
height: state.rect * 0.8,
}}
></div>
<div className='my-auto text-center text-gray-50'>
></img>
<div className='my-auto text-center text-gray-50 text-sm sm:text-base md:text-xl'>
{e[0]}
</div>
</div>
@ -177,10 +177,10 @@ export const Help = ({ setModal }) => {
}
<div className='flex flex-col items-center text-base lg:text-xl text-gray-50'
<div className='flex flex-col items-center'
style={{ width: state.rect, height: '100%' }}
>
<QuickStart/>
<QuickStart {...{ setModal }} />
</div>
</div>
@ -188,19 +188,28 @@ export const Help = ({ setModal }) => {
</div>
<div
className="pointer-cursor bg-gray-200 rounded p-1 inline-block"
className="cursor-pointer text-gray-50 bg-green-500 rounded p-1.5 inline-block hover:bg-green-600"
// style={{
// position:'absolute'
// bottom: 0.1 * state.rect}}
onClick={() => setModal(false)}
>
Get Started
</div>
<div className='select-none absolute w-12 h-12 top-0 bottom-0 my-auto -left-24 fill-current bg-gray-100 rounded-full'
<div className='cursor-pointer select-none absolute w-12 h-12 top-0 bottom-0 my-auto -left-24 fill-current bg-gray-100 hover:bg-gray-300 rounded-full'
onClick={() => carouselDispatch({ type: "move", del: -1 })}
style={{
visibility: state.pg == 0 ? 'hidden' : 'visible'
}}
>
<MdArrowBack className="w-full h-full text-gray-700 p-3" />
</div>
<div className='select-none absolute w-12 h-12 top-0 bottom-0 my-auto -right-24 fill-current bg-gray-100 rounded-full'
<div className='cursor-pointer select-none absolute w-12 h-12 top-0 bottom-0 my-auto -right-24 fill-current bg-gray-100 hover:bg-gray-300 rounded-full'
onClick={() => carouselDispatch({ type: "move", del: 1 })}
style={{
visibility: state.pg == arr.length ? 'hidden' : 'visible'
}}
>
<MdArrowForward className="w-full h-full text-gray-700 p-3" />
</div>

View File

@ -318,13 +318,13 @@ function MouseLeft(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
viewBox="0 0 105.833 169.333"
height="1em"
width="1em"
{...props}
>
<path
d="M57.144 34.384l-.002 9.987a11.89 11.89 0 00-7.912 11.225V77A11.865 11.865 0 0061.122 88.89h4.756A11.865 11.865 0 0077.77 77V55.596c0-5.21-3.316-9.615-7.96-11.23l-.03-9.982zm-3.157 0c-22.399 0-40.43 18.032-40.43 40.43v61.836c0 22.399 18.031 40.43 40.43 40.43h19.026c22.399 0 40.43-18.031 40.43-40.43V74.815c0-22.399-18.031-40.43-40.43-40.43z"
d="M46.56 30.571l-.001 9.986a11.89 11.89 0 00-7.912 11.225v21.404a11.865 11.865 0 0011.891 11.892h4.757a11.865 11.865 0 0011.891-11.892V51.782c0-5.209-3.315-9.615-7.959-11.23l-.031-9.981zm-3.157 0c-22.398 0-40.43 18.032-40.43 40.43v54.929c0 22.398 18.032 40.43 40.43 40.43H62.43c22.398 0 40.43-18.032 40.43-40.43V71c0-22.398-18.032-40.43-40.43-40.43z"
fill="none"
stroke="#fff"
strokeWidth={5.946}
@ -332,7 +332,7 @@ function MouseLeft(props) {
paintOrder="markers stroke fill"
/>
<path
d="M46.232 44.336A35.596 35.596 0 0021.88 78.19v23.307H63.5v-4.972h-2.379c-10.504 0-19.13-8.63-19.13-19.133V55.987c0-4.456 1.625-8.463 4.24-11.65z"
d="M35.648 40.523a35.596 35.596 0 00-24.352 33.852v23.307h41.62V92.71h-2.378c-10.505 0-19.131-8.629-19.131-19.132V52.173c0-4.456 1.625-8.462 4.241-11.65z"
fill="#fff"
paintOrder="markers stroke fill"
/>
@ -344,13 +344,13 @@ function MouseMiddle(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
viewBox="0 0 105.833 169.333"
height="1em"
width="1em"
{...props}
>
<path
d="M57.144 34.384l-.002 9.987a11.89 11.89 0 00-7.912 11.225V77A11.865 11.865 0 0061.122 88.89h4.756A11.865 11.865 0 0077.77 77V55.596c0-5.21-3.316-9.615-7.96-11.23l-.03-9.982zm-3.157 0c-22.399 0-40.43 18.032-40.43 40.43v61.836c0 22.399 18.031 40.43 40.43 40.43h19.026c22.399 0 40.43-18.031 40.43-40.43V74.815c0-22.399-18.031-40.43-40.43-40.43z"
d="M46.56 30.571l-.001 9.986a11.89 11.89 0 00-7.912 11.225v21.404a11.865 11.865 0 0011.891 11.892h4.757a11.865 11.865 0 0011.891-11.892V51.782c0-5.209-3.315-9.615-7.959-11.23l-.031-9.981zm-3.157 0c-22.398 0-40.43 18.032-40.43 40.43v54.929c0 22.398 18.032 40.43 40.43 40.43H62.43c22.398 0 40.43-18.032 40.43-40.43V71c0-22.398-18.032-40.43-40.43-40.43z"
fill="none"
stroke="#fff"
strokeWidth={5.946}
@ -360,8 +360,8 @@ function MouseMiddle(props) {
<rect
width={13.081}
height={29.728}
x={56.96}
y={51.57}
x={46.376}
y={47.757}
rx={4.757}
ry={4.757}
fill="#fff"
@ -375,13 +375,13 @@ function MouseRight(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
viewBox="0 0 105.833 169.333"
height="1em"
width="1em"
{...props}
>
<path
d="M57.144 34.384l-.002 9.987a11.89 11.89 0 00-7.912 11.225V77A11.865 11.865 0 0061.122 88.89h4.756A11.865 11.865 0 0077.77 77V55.596c0-5.21-3.316-9.615-7.96-11.23l-.03-9.982zm-3.157 0c-22.399 0-40.43 18.032-40.43 40.43v61.836c0 22.399 18.031 40.43 40.43 40.43h19.026c22.399 0 40.43-18.031 40.43-40.43V74.815c0-22.399-18.031-40.43-40.43-40.43z"
d="M46.56 30.571l-.001 9.986a11.89 11.89 0 00-7.912 11.225v21.404a11.865 11.865 0 0011.891 11.892h4.757a11.865 11.865 0 0011.891-11.892V51.782c0-5.209-3.315-9.615-7.959-11.23l-.031-9.981zm-3.157 0c-22.398 0-40.43 18.032-40.43 40.43v54.929c0 22.398 18.032 40.43 40.43 40.43H62.43c22.398 0 40.43-18.032 40.43-40.43V71c0-22.398-18.032-40.43-40.43-40.43z"
fill="none"
stroke="#fff"
strokeWidth={5.946}
@ -389,7 +389,7 @@ function MouseRight(props) {
paintOrder="markers stroke fill"
/>
<path
d="M80.768 44.336A35.596 35.596 0 01105.12 78.19v23.307H63.5v-4.972h2.379c10.504 0 19.13-8.63 19.13-19.133V55.987c0-4.456-1.625-8.463-4.24-11.65z"
d="M70.184 40.523a35.596 35.596 0 0124.352 33.852v23.307h-41.62V92.71h2.38c10.504 0 19.13-8.629 19.13-19.132V52.173c0-4.456-1.626-8.462-4.242-11.65z"
fill="#fff"
paintOrder="markers stroke fill"
/>
@ -401,13 +401,13 @@ function MouseScroll(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
viewBox="0 0 105.833 169.333"
height="1em"
width="1em"
{...props}
>
<path
d="M57.144 34.384l-.002 9.987a11.89 11.89 0 00-7.912 11.225V77A11.865 11.865 0 0061.122 88.89h4.756A11.865 11.865 0 0077.77 77V55.596c0-5.21-3.316-9.615-7.96-11.23l-.03-9.982zm-3.157 0c-22.399 0-40.43 18.032-40.43 40.43v61.836c0 22.399 18.031 40.43 40.43 40.43h19.026c22.399 0 40.43-18.031 40.43-40.43V74.815c0-22.399-18.031-40.43-40.43-40.43z"
d="M46.56 30.571l-.001 9.986a11.89 11.89 0 00-7.912 11.225v21.404a11.865 11.865 0 0011.891 11.892h4.757a11.865 11.865 0 0011.891-11.892V51.782c0-5.209-3.315-9.615-7.959-11.23l-.031-9.981zm-3.157 0c-22.398 0-40.43 18.032-40.43 40.43v54.929c0 22.398 18.032 40.43 40.43 40.43H62.43c22.398 0 40.43-18.032 40.43-40.43V71c0-22.398-18.032-40.43-40.43-40.43z"
fill="none"
stroke="#fff"
strokeWidth={5.946}
@ -415,7 +415,7 @@ function MouseScroll(props) {
paintOrder="markers stroke fill"
/>
<path
d="M53.191 18.36L63.533 8.018 73.81 18.293M63.533 29.64V8.018M53.191 105.468l10.342 10.343 10.276-10.276M63.533 94.188v21.623"
d="M42.607 14.547L52.95 4.204 63.226 14.48M52.95 25.827V4.204M42.607 101.655l10.343 10.342 10.276-10.275M52.95 90.374v21.623"
fill="none"
stroke="#fff"
strokeWidth={5.946}

View File

@ -2,17 +2,42 @@ import ReactDOM from 'react-dom'
import React from 'react'
const modalRoot = document.getElementById('react');
export class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
this.setModal = props.setModal
this.id = props.id
this.handleClickout = this.handleClickout.bind(this)
}
handleClickout(e) {
if (modalRoot.lastChild != this.el ) return
console.log(this.id, e.composedPath())
if (!e.composedPath().includes(this.el)) {
this.setModal(false)
e.stopPropagation()
}
}
componentDidMount() {
modalRoot.appendChild(this.el);
document.addEventListener( // handles click outside buttona & dropdown
'click', this.handleClickout
,
{ capture: true } // capture phase to allow for stopPropogation on others
)
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickout, { capture: true })
modalRoot.removeChild(this.el);
}

View File

@ -9,10 +9,9 @@ import { MdSave, MdFolder, MdInsertDriveFile, MdHelpOutline } from 'react-icons/
import * as Icon from "./icons";
import { Dialog } from './dialog'
import { Help } from './help'
import { Modal } from './modal'
import { STLExport, saveFile, openFile } from './fileHelpers'
import { DropDown} from './dropDown'
import { QuickStart } from './quickStart';
const buttonIdx = {
'line': 1,
@ -85,7 +84,6 @@ export const NavBar = () => {
useEffect(() => {
const onBeforeUnload = (e) => {
if (modified ||
@ -204,8 +202,6 @@ export const NavBar = () => {
}
} />
{/* <DropDown/> */}
<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>
@ -214,8 +210,10 @@ export const NavBar = () => {
</a>
</div>
{
modal && <Modal>
<Help {...{ setModal }} />
modal && <Modal {...{setModal, id: 'navbar'}}>
<QuickStartWrapper>
<QuickStart {...{setModal}}/>
</QuickStartWrapper>
</Modal>
}
@ -224,5 +222,29 @@ export const NavBar = () => {
export const QuickStartWrapper = ({ children }) => {
const [rect, setRect] = useState(Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800))
const updateSize = () => {
setRect(Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7), 800))
}
useEffect(() => {
window.addEventListener('resize', updateSize)
return () => {
window.removeEventListener('resize', updateSize)
}
}, [])
return <div className="absolute left-0 right-0 mx-auto bg-gray-700 rounded-xl flex flex-col items-center border-gray-500 border-2 overflow-hidden"
style={{
width: rect,
height: 1.1 * rect,
top: (window.innerHeight - 1.1 * rect) / 3,
}}
>
{children}
</div>
}

View File

@ -5,84 +5,123 @@ import { Clip } from './clip'
import { Modal } from './modal'
import { MdZoomIn, MdSave, MdFolder, MdInsertDriveFile, MdHelpOutline } from 'react-icons/md'
import { FaRegPlayCircle, FaEdit, FaLinkedin, FaGithub } from 'react-icons/fa'
import { FaRegPlayCircle, FaEdit, FaCubes } from 'react-icons/fa'
import * as Icon from "./icons";
const navArr = [
'\u00A0',
'Mouse Navigation',
[['Select', Icon.Select], [Icon.MouseLeft, 'left-click + drag']],
[['Rotate', Icon.Rotate], [Icon.MouseRight, 'right-click']],
[['Zoom', MdZoomIn], [Icon.MouseScroll, 'scroll up / down']],
[['Pan', Icon.Pan], [Icon.MouseMiddle, 'middle-click (or', () => <div className="border border-gray-300 rounded-lg mx-2">Ctrl</div>, ' + ', Icon.MouseRight, ' right-click) + drag']],
'\u00A0',
'Model Toolbar',
[['Sketch', FaEdit], ['Initiates a new sketch based on the the user must first select a plane, or three points on existing extrusions.']],
[['Extrude', Icon.Extrude], ['Intiates new extrusion dialog. before clickin gthis button. The user must firs select a sketch to extrude from']],
[['Union', Icon.Union], ['Creates a new solid that is a boolean union or two selected solids.']],
[['Substract', Icon.Subtract], ['Creates a new solid that is a boolean subtraction of the second selected solid from the first selected solid']],
[['Intersect', Icon.Intersect], ['Creates a new solid that is a boolean intersection or two selected solids.']],
[['New Document', MdInsertDriveFile], ['Wipes the current workspace and starts a fresh document']],
[['Save', MdSave], ['saves current document. on the inital save the user can specify save location and file name']],
[['Open', MdFolder], ['loads an existing document from the local disk.']],
[['Export to STL', Icon.Stl], ['Exports selected solid to 3d printer friendly stl format']],
'\u00A0',
'Sketch Toolbar',
[['Extrude', Icon.Extrude], ['Creates a new extrusion from the current sketch']],
[['Line', Icon.Line], ['Subsequent clicks on the canvas define the vertices of the line segment chain.']],
[['Arc', Icon.Arc], ['In the 3 subsequent mouse clicks, the first sets the start point, the seconds the endpoint, and the third the radius.']],
[['Dimension', Icon.Dimension], ['Adds a distance when 2 points, or 1 point and 1 line are selected. Adds an angle when two lines are selected.']],
[['Coincident', Icon.Coincident], ['Adds a coincident contraint between two points, or a line and a point.']],
[['Vertical', Icon.Vertical], ['Aligns the the selected line, or two selected points with the y-axis']],
[['Horizontal', Icon.Horizontal], ['Aligns the the selected line, or two selected points with the x-axis']],
[['Tangent', Icon.Tangent], ['Adds tangency between two selected arcs, or a line and a arc. Entities must be coincident with one another via 1 endpoint']],
]
const clipArr = [
['basic-workflow.mp4', 'Basic model creation workflow'],
['load-file-and-edit.mp4', 'Loading and editing models'],
['export-to-3dprint.mp4', 'Exporting model for 3D printing'],
['headphones-stand.json.gz', 'Headphones Stand Model'],
]
const navArr = [
'Mouse Navigation',
[Icon.Select, 'Select', [
Icon.MouseLeft, '+ drag'
]],
[Icon.Rotate, 'Rotate', [
Icon.MouseRight
]],
[MdZoomIn, 'Zoom', [
Icon.MouseScroll
]],
[Icon.Pan, 'Pan', [
Icon.MouseMiddle, '(or', () => <div className="border border-gray-300 rounded-lg mx-2">Ctrl</div>, ' + ', Icon.MouseRight, ') + drag'
]],
'\u00A0',
'Model Toolbar',
[FaEdit, 'Sketch', ['Initiates a new sketch based on the the user must first select a plane, or three points on existing extrusions.']],
[Icon.Extrude, 'Extrude', ['Intiates new extrusion dialog. before clickin gthis button. The user must firs select a sketch to extrude from']],
[Icon.Union, 'Union', ['Creates a new solid that is a boolean union or two selected solids.']],
[Icon.Subtract, 'Substract', ['Creates a new solid that is a boolean subtraction of the second selected solid from the first selected solid']],
[Icon.Intersect, 'Intersect', ['Creates a new solid that is a boolean intersection or two selected solids.']],
[MdInsertDriveFile, 'New Document', ['Wipes the current workspace and starts a fresh document']],
[MdSave, 'Save', ['saves current document. on the inital save the user can specify save location and file name']],
[MdFolder, 'Open', ['loads an existing document from the local disk.']],
[Icon.Stl, 'Export to STL', ['Exports selected solid to 3d print friendly stl format']],
'\u00A0',
'Sketch Toolbar',
[Icon.Extrude, 'Extrude', ['Creates a new extrusion from the current sketch']],
[Icon.Line, 'Line', ['Subsequent clicks on the canvas define the vertices of the line segment chain.']],
[Icon.Arc, 'Arc', ['In the 3 subsequent mouse clicks, the first sets the start point, the seconds the endpoint, and the third the radius.']],
[Icon.Dimension, 'Dimension', ['Adds a distance when 2 points, or 1 point and 1 line are selected. Adds an angle when two lines are selected.']],
[Icon.Coincident, 'Coincident', ['Adds a coincident contraint between two points, or a line and a point.']],
[Icon.Vertical, 'Vertical', ['Aligns the the selected line, or two selected points with the y-axis']],
[Icon.Horizontal, 'Horizontal', ['Aligns the the selected line, or two selected points with the x-axis']],
[Icon.Tangent, 'Tangent', ['Adds a tangent constraint between selected two arcs, or a line and a arc. Entities must first be coincident']],
]
export const QuickStart = () => {
const utf8decoder = new TextDecoder();
export const QuickStart = ({setModal}) => {
const dispatch = useDispatch()
const [clip, setClip] = useState(null)
return <div className="bg-transparent w-full h-full flex justify-center">
<div className="bg-transparent w-full h-full text-sm lg:text-base xl:text-lg flex flex-col overflow-y-auto overflow-x-hidden">
<div className='text-center'>
Common workflow walkthoughs
return <div className='bg-transparent w-full h-full flex justify-center'>
<div className="bg-transparent w-full h-full
text-sm lg:text-base xl:text-lg
flex flex-col items-center overflow-y-auto overflow-x-hidden text-gray-50">
<div className='text-center w-full text-lg lg:text-xl xl:text-2xl my-2 font-bold'>
Quick Start
</div>
{
clipArr.map((ele, idx) => (
<div className="flex h-6 w-full mx-2 rounded-lg items-center"
onClick={() => setClip(ele)}
key={idx}
>
<FaRegPlayCircle />
{ele[1]}
</div>
))
}
<div className='text-center text-base lg:text-lg xl:text-xl mb-2'>
Demos
</div>
<div className='mb-4 cursor-pointer'>
{
clipArr.map((ele, idx) => {
const isGz = ele[0].match(/\.[0-9a-z]+$/i)[0] == '.gz'
return <div className="flex h-12 mx-2 rounded-lg items-center hover:text-green-500"
onClick={async () => {
if (isGz) {
const state = sce.loadState(
utf8decoder.decode(
new Zlib.Gunzip(
new Uint8Array(
await (
await (
await fetch(ele[0])
).blob()
).arrayBuffer()
)
).decompress()
)
)
setModal(false)
dispatch({ type: 'restore-state', state, fileName: ele[0] })
sce.render()
} else {
setClip(ele)
}
}
}
key={idx}
>
{isGz ?
<FaCubes size={'2.5em'} style={{ padding: '0.625em' }} />
:
<FaRegPlayCircle size={'2.5em'} style={{ padding: '0.625em' }} />
}
{ele[1]}
</div>
})
}
</div>
<div
className='self-center h-full w-11/12'
className='h-full w-11/12'
style={{
display: 'grid',
grid: 'minmax(1em, auto) / 1fr',
@ -91,29 +130,29 @@ export const QuickStart = () => {
{
navArr.map((row, i) => (
typeof row === 'string' ?
<div className='col-span-2 flex justify-center'>
<div className='col-span-2 flex justify-center text-base lg:text-lg xl:text-xl mb-2' key={i}>
{row}
</div>
:
<React.Fragment key={i}>
<div className='flex items-center justify-end border-r-2 border-gray-50 text-right'>
{row[1]}
{React.createElement(row[0],
{row[0][0]}
{React.createElement(row[0][1],
{
className: "fill-current text-gray-100 flex-shrink-0",
width: '2.5em', height: '2.5em', size: '2.5em',
style: { padding: '0.5em' }
style: { padding: '0.5em' },
}
)}
</div>
<div className='flex items-center ml-2 my-2'>
{
row[2].map(
row[1].map(
(Col, key) => typeof Col === 'string' ?
Col
:
<Col className="fill-current text-gray-100 flex-none" key={key} width='auto' height='2.5em' />
<Col className={`fill-current text-gray-100 flex-none ${key == 0 ? 'mr-2' : 'mx-2'}`} key={key} width='1.5625em' height='2.5em' />
)
}
</div>
@ -126,7 +165,7 @@ export const QuickStart = () => {
{
clip && <Modal>
clip && <Modal setModal={setClip} id={'qs'}>
<Clip {...{ setClip, clip }} />
</Modal>
}

View File

@ -20,7 +20,7 @@ export const Tree = () => {
</div>
<div className='overflow-auto'>
{treeEntries.allIds.map((entId, idx) => (
<TreeEntry key={idx} entId={entId} />
<TreeEntry key={entId} entId={entId} />
))}
</div>
</div>