working splash
BIN
demo/gif/1.xcf
Normal file
BIN
demo/gif/Untitled.gif
Normal file
After Width: | Height: | Size: 55 KiB |
BIN
demo/gif/combined.xcf
Normal file
BIN
demo/gif/extrude.xcf
Normal file
BIN
demo/gif/sculpt.gif
Normal file
After Width: | Height: | Size: 94 KiB |
BIN
demo/gif/sculpt.xcf
Normal file
BIN
demo/gif/sketch.xcf
Normal file
BIN
dist/extrude.png
vendored
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
dist/headphones-stand.json.gz
vendored
Normal file
BIN
dist/sculpt.gif
vendored
Normal file
After Width: | Height: | Size: 94 KiB |
BIN
dist/sketch.png
vendored
Normal file
After Width: | Height: | Size: 18 KiB |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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);
|
||||
|
||||
});
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
)
|
||||
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
@ -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>
|
||||
}
|
||||
|
@ -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>
|
||||
|