lots of css

master
howard 2021-05-02 16:44:54 -07:00
parent bdcc41176f
commit 7eea185fe3
26 changed files with 2326 additions and 120 deletions

170
demo/left-click.svg Normal file
View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="left-click.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:inline"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:none">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:none">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:none">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:none">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

170
demo/middle-click.svg Normal file
View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="middle-click.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:none"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:inline">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:none">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:none">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:none">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

262
demo/mouse.original.svg Normal file
View File

@ -0,0 +1,262 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="mouse.original.svg"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
id="svg8"
version="1.1"
viewBox="0 0 185.20764 211.66653"
height="800"
width="700">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="1.2553118"
inkscape:cx="344.69956"
inkscape:cy="335.82524"
inkscape:document-units="px"
inkscape:current-layer="layer14"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1916"
inkscape:window-height="1028"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="152.0289,75.975229"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer">
<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"
style="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;opacity:1"
id="rect4559" />
</g>
<g
style="display:inline"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="Ctrl (8)">
<g
id="text943"
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
<path
style="fill:#ffffff;stroke-width:0.264583"
d="m 146.52541,52.879491 v 2.128035 q -1.01906,-0.949124 -2.17799,-1.41869 -1.14894,-0.469566 -2.44774,-0.469566 -2.55764,0 -3.91638,1.568551 -1.35875,1.55856 -1.35875,4.515829 0,2.947277 1.35875,4.515828 1.35874,1.558561 3.91638,1.558561 1.2988,0 2.44774,-0.469567 1.15893,-0.469566 2.17799,-1.418689 v 2.108053 q -1.05902,0.719335 -2.24793,1.079003 -1.17891,0.359668 -2.49769,0.359668 -3.38687,0 -5.33507,-2.06809 -1.9482,-2.07808 -1.9482,-5.664767 0,-3.596678 1.9482,-5.664768 1.9482,-2.07808 5.33507,-2.07808 1.33876,0 2.51768,0.359668 1.1889,0.349677 2.22794,1.059021 z"
id="path1588" />
<path
d="m 151.38092,52.280045 v 3.177065 h 3.7865 v 1.428681 h -3.7865 v 6.074389 q 0,1.368735 0.36966,1.758375 0.37965,0.389641 1.52859,0.389641 h 1.88825 v 1.538578 h -1.88825 q -2.12804,0 -2.93729,-0.789271 -0.80925,-0.799261 -0.80925,-2.897323 v -6.074389 h -1.34875 V 55.45711 h 1.34875 v -3.177065 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1590" />
<path
d="m 164.0692,57.175523 q -0.30971,-0.179834 -0.67937,-0.25976 -0.35967,-0.08992 -0.79926,-0.08992 -1.55856,0 -2.39779,1.019059 -0.82923,1.009068 -0.82923,2.907314 v 5.894555 h -1.84829 V 55.45711 h 1.84829 v 1.738395 q 0.57946,-1.019059 1.50861,-1.508607 0.92914,-0.499538 2.25791,-0.499538 0.18982,0 0.41961,0.02997 0.22979,0.01998 0.50953,0.06994 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1592" />
<path
d="m 165.99742,51.101134 h 1.8383 v 15.54564 h -1.8383 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1594" />
</g>
<rect
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.9;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect953"
width="45.843319"
height="27.083668"
x="129.10742"
y="45.476986"
ry="0.18775558" />
</g>
<g
inkscape:groupmode="layer"
id="layer14"
inkscape:label="Alt (9)">
<g
id="text947"
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
<path
d="m 144.38377,99.443142 -2.73747,7.423148 h 5.48493 z m -1.13895,-1.988163 h 2.28789 l 5.68475,14.916221 h -2.09807 l -1.35874,-3.82646 h -6.72379 l -1.35875,3.82646 h -2.12803 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1597" />
<path
d="m 153.31552,96.82556 h 1.8383 v 15.54564 h -1.8383 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1599" />
<path
d="m 160.81859,98.004471 v 3.177069 h 3.7865 v 1.42868 h -3.7865 v 6.07439 q 0,1.36873 0.36966,1.75837 0.37965,0.38964 1.52858,0.38964 h 1.88826 v 1.53858 h -1.88826 q -2.12803,0 -2.93728,-0.78927 -0.80926,-0.79926 -0.80926,-2.89732 v -6.07439 h -1.34875 v -1.42868 h 1.34875 v -3.177069 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1601" />
</g>
<rect
ry="0.18775558"
y="91.383667"
x="132.16098"
height="27.083672"
width="39.736214"
id="rect953-4"
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.89999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="Shift (10)">
<g
id="text951"
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
<path
d="m 139.23953,144.18143 v 1.96819 q -1.14894,-0.5495 -2.168,-0.81925 -1.01906,-0.26975 -1.96818,-0.26975 -1.64848,0 -2.54765,0.63941 -0.88918,0.63941 -0.88918,1.81832 0,0.98909 0.58946,1.49862 0.59944,0.49954 2.25791,0.80925 l 1.21888,0.24977 q 2.25791,0.4296 3.32692,1.5186 1.07901,1.079 1.07901,2.89732 0,2.168 -1.45866,3.28696 -1.44866,1.11897 -4.25606,1.11897 -1.05903,0 -2.25792,-0.23978 -1.1889,-0.23978 -2.46772,-0.70934 v -2.07808 q 1.22887,0.68936 2.40778,1.03904 1.17891,0.34967 2.31786,0.34967 1.7284,0 2.66753,-0.67937 0.93913,-0.67937 0.93913,-1.93821 0,-1.09898 -0.67937,-1.71841 -0.66938,-0.61943 -2.20796,-0.92914 l -1.22886,-0.23978 q -2.25792,-0.44959 -3.26699,-1.4087 -1.00906,-0.95911 -1.00906,-2.66754 0,-1.97817 1.38871,-3.11712 1.39871,-1.13894 3.84645,-1.13894 1.04903,0 2.13803,0.18982 1.08899,0.18983 2.22794,0.56947 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1604" />
<path
d="m 152.50727,151.85435 v 6.75376 h -1.8383 v -6.69382 q 0,-1.58853 -0.61943,-2.3778 -0.61943,-0.78927 -1.85828,-0.78927 -1.48863,0 -2.34783,0.94912 -0.85921,0.94912 -0.85921,2.58761 v 6.32416 h -1.84829 v -15.54564 h 1.84829 v 6.09437 q 0.65939,-1.00907 1.54857,-1.50861 0.89917,-0.49954 2.06809,-0.49954 1.92822,0 2.91731,1.1989 0.98908,1.1889 0.98908,3.50676 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1606" />
<path
d="m 156.17389,147.41844 h 1.8383 v 11.18967 h -1.8383 z m 0,-4.35597 h 1.8383 v 2.32785 h -1.8383 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1608" />
<path
d="m 167.5234,143.06247 v 1.52859 h -1.75837 q -0.98909,0 -1.37873,0.39963 -0.37965,0.39963 -0.37965,1.43867 v 0.98908 h 3.0272 v 1.42868 h -3.0272 v 9.76099 h -1.84829 v -9.76099 h -1.75838 v -1.42868 h 1.75838 v -0.77928 q 0,-1.86827 0.8692,-2.71749 0.86919,-0.8592 2.75745,-0.8592 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1610" />
<path
d="m 170.52063,144.24138 v 3.17706 h 3.78651 v 1.42868 h -3.78651 v 6.07439 q 0,1.36874 0.36966,1.75838 0.37965,0.38964 1.52859,0.38964 h 1.88826 v 1.53858 h -1.88826 q -2.12803,0 -2.93729,-0.78927 -0.80925,-0.79926 -0.80925,-2.89733 v -6.07439 h -1.34875 v -1.42868 h 1.34875 v -3.17706 z"
style="fill:#ffffff;stroke-width:0.264583"
id="path1612" />
</g>
<rect
style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.89999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect953-4-3"
width="55.559566"
height="26.966721"
x="124.2493"
y="137.1413"
ry="0.18775558" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

13
demo/mouse.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="700" height="800" version="1.1" viewBox="0 0 185.21 211.67" xmlns="http://www.w3.org/2000/svg">
<path d="m57.144 34.384-0.0013 9.9861c-4.6193 1.6409-7.9119 6.0343-7.9119 11.225v21.404c0 6.5878 5.3036 11.891 11.891 11.891h4.7566c6.5878 0 11.891-5.3035 11.891-11.891v-21.404c0-5.2086-3.3153-9.6146-7.959-11.23l-0.03128-9.9807zm-3.1566 0c-22.399 0-40.431 18.032-40.431 40.43v61.835c0 22.399 18.032 40.431 40.431 40.431h19.026c22.399 0 40.431-18.032 40.431-40.431v-61.835c0-22.398-18.032-40.43-40.431-40.43z" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="5.9457" style="paint-order:markers stroke fill"/>
<path d="m46.232 44.336c-14.18 4.7125-24.352 18.05-24.352 33.852v23.307h41.62v-4.9721h-2.3787c-10.505 0-19.131-8.6292-19.131-19.133v-21.404c0-4.456 1.6254-8.4628 4.2414-11.65z" fill="#fff" style="paint-order:markers stroke fill"/>
<rect x="56.96" y="51.57" width="13.081" height="29.728" rx="4.7566" ry="4.7566" fill="#fff" style="paint-order:markers stroke fill"/>
<path d="m80.768 44.336c14.18 4.7125 24.352 18.05 24.352 33.852v23.307h-41.62v-4.9721h2.3787c10.505 0 19.131-8.6292 19.131-19.133v-21.404c0-4.456-1.6254-8.4628-4.2414-11.65z" fill="#fff" style="paint-order:markers stroke fill"/>
<path d="m53.191 18.36 10.343-10.343 10.276 10.276m-10.276 11.347v-21.623" fill="none" stroke="#fff" stroke-width="5.9457"/>
<path d="m53.191 105.47 10.343 10.342 10.276-10.276m-10.276-11.347v21.623" fill="none" stroke="#fff" stroke-width="5.9457"/>
<path d="m33.065 56.638-10.343 10.343 10.276 10.276m11.347-10.276h-21.623" fill="none" stroke="#fff" stroke-width="5.9457"/>
<path d="m93.935 77.256 10.343-10.343-10.276-10.276m-11.347 10.276h21.623" fill="none" stroke="#fff" stroke-width="5.9457"/>
<g><g fill="#fff" stroke-width=".26458" aria-label="Ctrl"><path d="m146.53 52.879v2.128q-1.0191-0.94912-2.178-1.4187-1.1489-0.46957-2.4477-0.46957-2.5576 0-3.9164 1.5686-1.3588 1.5586-1.3588 4.5158 0 2.9473 1.3588 4.5158 1.3587 1.5586 3.9164 1.5586 1.2988 0 2.4477-0.46957 1.1589-0.46957 2.178-1.4187v2.1081q-1.059 0.71934-2.2479 1.079-1.1789 0.35967-2.4977 0.35967-3.3869 0-5.3351-2.0681-1.9482-2.0781-1.9482-5.6648 0-3.5967 1.9482-5.6648 1.9482-2.0781 5.3351-2.0781 1.3388 0 2.5177 0.35967 1.1889 0.34968 2.2279 1.059z"/><path d="m151.38 52.28v3.1771h3.7865v1.4287h-3.7865v6.0744q0 1.3687 0.36966 1.7584 0.37965 0.38964 1.5286 0.38964h1.8882v1.5386h-1.8882q-2.128 0-2.9373-0.78927-0.80925-0.79926-0.80925-2.8973v-6.0744h-1.3488v-1.4287h1.3488v-3.1771z"/><path d="m164.07 57.176q-0.30971-0.17983-0.67937-0.25976-0.35967-0.08992-0.79926-0.08992-1.5586 0-2.3978 1.0191-0.82923 1.0091-0.82923 2.9073v5.8946h-1.8483v-11.19h1.8483v1.7384q0.57946-1.0191 1.5086-1.5086 0.92914-0.49954 2.2579-0.49954 0.18982 0 0.41961 0.02997 0.22979 0.01998 0.50953 0.06994z"/><path d="m166 51.101h1.8383v15.546h-1.8383z"/></g><rect x="129.11" y="45.477" width="45.843" height="27.084" ry=".18776" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="2.9"/></g>
<g><g fill="#fff" stroke-width=".26458" aria-label="Alt"><path d="m144.38 99.443-2.7375 7.4231h5.4849zm-1.139-1.9882h2.2879l5.6848 14.916h-2.0981l-1.3587-3.8265h-6.7238l-1.3588 3.8265h-2.128z"/><path d="m153.32 96.826h1.8383v15.546h-1.8383z"/><path d="m160.82 98.004v3.1771h3.7865v1.4287h-3.7865v6.0744q0 1.3687 0.36966 1.7584 0.37965 0.38964 1.5286 0.38964h1.8883v1.5386h-1.8883q-2.128 0-2.9373-0.78927-0.80926-0.79926-0.80926-2.8973v-6.0744h-1.3488v-1.4287h1.3488v-3.1771z"/></g><rect x="132.16" y="91.384" width="39.736" height="27.084" ry=".18776" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="2.9"/></g>
<g><g fill="#fff" stroke-width=".26458" aria-label="Shift"><path d="m139.24 144.18v1.9682q-1.1489-0.5495-2.168-0.81925t-1.9682-0.26975q-1.6485 0-2.5476 0.63941-0.88918 0.63941-0.88918 1.8183 0 0.98909 0.58946 1.4986 0.59944 0.49954 2.2579 0.80925l1.2189 0.24977q2.2579 0.4296 3.3269 1.5186 1.079 1.079 1.079 2.8973 0 2.168-1.4587 3.287-1.4487 1.119-4.2561 1.119-1.059 0-2.2579-0.23978-1.1889-0.23978-2.4677-0.70934v-2.0781q1.2289 0.68936 2.4078 1.039 1.1789 0.34967 2.3179 0.34967 1.7284 0 2.6675-0.67937t0.93913-1.9382q0-1.099-0.67937-1.7184-0.66938-0.61943-2.208-0.92914l-1.2289-0.23978q-2.2579-0.44959-3.267-1.4087-1.0091-0.95911-1.0091-2.6675 0-1.9782 1.3887-3.1171 1.3987-1.1389 3.8464-1.1389 1.049 0 2.138 0.18982 1.089 0.18983 2.2279 0.56947z"/><path d="m152.51 151.85v6.7538h-1.8383v-6.6938q0-1.5885-0.61943-2.3778t-1.8583-0.78927q-1.4886 0-2.3478 0.94912-0.85921 0.94912-0.85921 2.5876v6.3242h-1.8483v-15.546h1.8483v6.0944q0.65939-1.0091 1.5486-1.5086 0.89917-0.49954 2.0681-0.49954 1.9282 0 2.9173 1.1989 0.98908 1.1889 0.98908 3.5068z"/><path d="m156.17 147.42h1.8383v11.19h-1.8383zm0-4.356h1.8383v2.3278h-1.8383z"/><path d="m167.52 143.06v1.5286h-1.7584q-0.98909 0-1.3787 0.39963-0.37965 0.39963-0.37965 1.4387v0.98908h3.0272v1.4287h-3.0272v9.761h-1.8483v-9.761h-1.7584v-1.4287h1.7584v-0.77928q0-1.8683 0.8692-2.7175 0.86919-0.8592 2.7574-0.8592z"/><path d="m170.52 144.24v3.1771h3.7865v1.4287h-3.7865v6.0744q0 1.3687 0.36966 1.7584 0.37965 0.38964 1.5286 0.38964h1.8883v1.5386h-1.8883q-2.128 0-2.9373-0.78927-0.80925-0.79926-0.80925-2.8973v-6.0744h-1.3488v-1.4287h1.3488v-3.1771z"/></g><rect x="124.25" y="137.14" width="55.56" height="26.967" ry=".18776" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="2.9"/></g>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

170
demo/right-click.svg Normal file
View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="right-click.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="462"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:none"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:none">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:inline">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:none">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:none">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

170
demo/scroll.svg Normal file
View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="scroll.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:none"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:none">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:none">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:inline">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -6,15 +6,18 @@
Draw a two outline using lines and arcs
Extrude the ouline into a 3d solid
s
combine multiple solids to form the part you desire
Turn the shapes you drew into 3D solids
Combine multiple solids to form more complex solids
uplaod your design to a 3d printer
navigation tips
navigation tip
offer to watch three video demos

BIN
dist/export-to-3dprint.mp4 vendored Normal file

Binary file not shown.

BIN
dist/load-file-and-edit.mp4 vendored Normal file

Binary file not shown.

170
icon/svgr_raw/mouseLeft.svg Normal file
View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="left-click.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:inline"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:none">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:none">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:none">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:none">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="middle-click.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:none"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:inline">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:none">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:none">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:none">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="right-click.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="462"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:none"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:none">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:inline">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:none">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:none">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="scroll.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">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.41960784"
inkscape:pageshadow="2"
inkscape:zoom="0.7549995"
inkscape:cx="171.58915"
inkscape:cy="210.46929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:snap-others="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2012"
inkscape:window-height="1206"
inkscape:window-x="461"
inkscape:window-y="87"
inkscape:window-maximized="0"
inkscape:object-nodes="false"
inkscape:snap-nodes="true"
inkscape:pagecheckerboard="false"
inkscape:document-rotation="0"
inkscape:snap-text-baseline="false"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-object-midpoints="false"
inkscape:snap-center="false"
inkscape:snap-to-guides="true">
<sodipodi:guide
position="129.58681,136.23525"
orientation="1,0"
id="guide1020" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Mouse frame (0)"
id="layer1"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
style="display:none"
inkscape:label="Left click (1)"
id="layer2"
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"
id="rect4605"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscccsssc" />
</g>
<g
inkscape:label="Middle click (2)"
id="layer3"
inkscape:groupmode="layer"
style="display:none">
<rect
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"
id="rect4603"
width="13.080523"
height="29.72846"
x="56.959732"
y="51.570152"
rx="4.7565541"
ry="4.7565541" />
</g>
<g
inkscape:label="Right click (3)"
id="layer4"
inkscape:groupmode="layer"
style="display:none">
<path
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"
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
inkscape:label="Scroll up (4)"
id="layer5"
inkscape:groupmode="layer"
style="display:inline">
<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"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll down (5)"
id="layer6"
inkscape:groupmode="layer"
style="display:inline">
<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"
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>
<g
inkscape:label="Scroll left (6)"
id="layer7"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4593"
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 33.064815,56.637818 22.722307,66.980326 32.997831,77.25584 M 44.345093,66.980326 H 22.722307"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<g
inkscape:label="Scroll right (7)"
id="layer8"
inkscape:groupmode="layer"
style="display:none">
<path
id="path4595"
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 93.935173,77.25584 104.27769,66.913333 94.002157,56.637818 M 82.654895,66.913333 h 21.622795"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

55
icon/svgr_raw/pan.svg Normal file
View File

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
aria-label="Pan"
viewBox="0 0 24 24"
class="StyledIcon-ofa7kd-0 dSCMyp"
version="1.1"
id="svg4"
sodipodi:docname="pan.svg"
inkscape:version="1.0.2 (1.0.2+r75+1)">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1921"
inkscape:window-height="1363"
id="namedview6"
showgrid="false"
inkscape:zoom="15.440718"
inkscape:cx="0.7436903"
inkscape:cy="10.151829"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg4"
inkscape:document-rotation="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.876112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
d="M 12.000001,2.0000003 8.3141689,5.685832 9.5530463,6.9247095 11.123888,5.3538676 V 11.123888 H 5.3538676 L 6.9247095,9.5530463 5.685832,8.3141689 2.0000003,12.000001 5.685832,15.685832 6.9247095,14.446955 5.3538676,12.876113 h 5.7700204 v 5.770021 L 9.5530463,17.075292 8.3141689,18.314169 12.000001,22 l 3.685831,-3.685831 -1.238877,-1.238877 -1.570842,1.570842 v -5.770021 h 5.770021 l -1.570842,1.570842 1.238877,1.238877 L 22,12.000001 18.314169,8.3141689 17.075292,9.5530463 18.646134,11.123888 H 12.876113 V 5.3538676 l 1.570842,1.5708419 1.238877,-1.2388775 z"
id="path2" />
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

55
icon/svgr_raw/rotate.svg Normal file
View File

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
aria-label="PowerCycle"
viewBox="0 0 24 24"
class="StyledIcon-ofa7kd-0 dSCMyp"
version="1.1"
id="svg4"
sodipodi:docname="rotate.svg"
inkscape:version="1.0.2 (1.0.2+r75+1)">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2203"
inkscape:window-height="1092"
id="namedview6"
showgrid="false"
inkscape:zoom="11.310484"
inkscape:cx="-12.276243"
inkscape:cy="-2.0543577"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg4"
inkscape:document-rotation="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.9;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
d="M 11.966602,3 C 7.022804,3 3,7.042128 3,12 h 1.8 c 0,-3.9889462 3.1995729,-7.2 7.166602,-7.2 2.259868,0 4.23351,1.0679515 5.545898,2.7 H 14.7 V 9.3 H 21 V 3 H 19.2 V 6.8109375 C 17.571605,4.5300126 14.968586,3 11.966602,3 Z M 19.2,12 c 0,3.988946 -3.199573,7.2 -7.166602,7.2 C 9.7735304,19.2 7.7998877,18.132048 6.4875,16.5 H 9.3 V 14.7 H 3 V 21 H 4.8 V 17.189063 C 6.4283949,19.469987 9.0314142,21 12.033398,21 16.977196,21 21,16.957872 21,12 Z"
id="path2" />
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

1
icon/svgr_raw/select.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><path d="M17,5h-2V3h2V5z M15,15v6l2.29-2.29L19.59,21L21,19.59l-2.29-2.29L21,15H15z M19,9h2V7h-2V9z M19,13h2v-2h-2V13z M11,21h2 v-2h-2V21z M7,5h2V3H7V5z M3,17h2v-2H3V17z M5,21v-2H3C3,20.1,3.9,21,5,21z M19,3v2h2C21,3.9,20.1,3,19,3z M11,5h2V3h-2V5z M3,9h2 V7H3V9z M7,21h2v-2H7V21z M3,13h2v-2H3V13z M3,5h2V3C3.9,3,3,3.9,3,5z"/></g></svg>

After

Width:  |  Height:  |  Size: 514 B

View File

@ -5,6 +5,8 @@
box-sizing: border-box;
scrollbar-color: lightgray #262626;
scrollbar-width: thin;
border-width: 0;
border-style: solid;
}
body {

View File

@ -27,7 +27,6 @@ const App = ({ store }) => {
<NavBar />
<Tree />
<ToolTip />
<Help/>
</Provider>
}

51
src/react/clip.jsx Normal file
View File

@ -0,0 +1,51 @@
import React, { useState, useEffect, useRef, useCallback, useReducer } from "react"
import { MdCancel} from 'react-icons/md'
export const Clip = ({ setClip, clip }) => {
const width = window.innerWidth * 0.9
const top = (window.innerHeight - (width / 1.6)) / 2
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
'
style={{
maxWidth: '1024px',
width,
top,
}}
>
<div className='text-2xl flex justify-center items-center'>
<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>
)
}
const basicWorkflowTS = [
10, 'Sketching on a plane',
10, 'Extruding a sketch to a solid',
10, 'Sketch on a face of a solid',
10, 'Peforming boolean operation between solids',
]
const editWorkflowTS = [
10, 'opening a file from disk',
10, 'editing an existing sketch',
10, 'accepting the edit and exiting',
]
const exportTS = [
10, 'selecting a body for export',
10, 'initiate export',
10, 'loading exported stl into 3dprint slicer',
10, 'result',
]

View File

@ -1,13 +1,12 @@
import React, { useCallback, useEffect, useReducer, useRef } from 'react';
import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { MdCancel, MdArrowBack, MdArrowForward } from 'react-icons/md'
import { Carousel } from './carousel'
import { MdArrowBack, MdArrowForward } from 'react-icons/md'
import { QuickStart } from './quickStart'
// 10, 'Use the line tool',
// 10, 'Adding dimensions',
@ -15,26 +14,6 @@ import { Carousel } from './carousel'
// 10, 'Drawing an arc',
// 10, 'Adding coincident constraints',
const basicWorkflowTS = [
10, 'Sketching on a plane',
10, 'Extruding a sketch to a solid',
10, 'Sketch on a face of a solid',
10, 'Peforming boolean operation between solids',
]
const editWorkflowTS = [
10, 'opening a file from disk',
10, 'editing an existing sketch',
10, 'accepting the edit and exiting',
]
const exportTS = [
10, 'selecting a body for export',
10, 'initiate export',
10, 'loading exported stl into 3dprint slicer',
10, 'result',
]
function debounce(callback, delay) {
let handler = null;
return (...args) => {
@ -46,10 +25,12 @@ function debounce(callback, delay) {
function reducer(state, action) {
switch (action.type) {
case 'resize':
const rect = Math.min(Math.min(window.innerHeight * 0.8, window.innerWidth * 0.7),800)
return {
...state,
rect: window.innerHeight * 0.6,
dragLeft: state.pg * window.innerHeight * 0.6,
rect,
dragLeft: state.pg * rect,
dragging: true
};
case 'move':
@ -81,47 +62,52 @@ function reducer(state, action) {
}
}
const transTime = 200
const transTime = 300
const elastic = `transform ${transTime}ms cubic-bezier(0.4, 0.0, 0.2, 1)`;
export const Help = () => {
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'],
]
export const Help = ({ setModal }) => {
const dispatch = useDispatch()
const status = useSelector(state => state.ui.help)
const handleClick = (e) => {
if (!e.composedPath().includes(ref.current)
) {
e.stopPropagation() // prevents mouse from immediately clicking nav button if over it
dispatch({ type: 'set-help', status: false })
}
}
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])
// 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 arr = [1, 2, 3]
const ref = useRef(null)
const [state, carouselDispatch] = useReducer(reducer, { rect: window.innerHeight * 0.6, pg: 0, dragLeft: 0, dragging: false })
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 })
@ -137,62 +123,96 @@ export const Help = () => {
)
const handleMouseDown = () => carouselDispatch({ type: 'drag-start' })
const handleMouseMove = (e) => e.buttons == 1 && carouselDispatch({ type: 'drag', move: e.movementX })
const handleMouseUp = () => carouselDispatch({ type: 'drag-end' })
useEffect(() => {
window.addEventListener('resize', updateSize)
document.addEventListener('mousedown', handleMouseDown)
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
}, [])
if (status) {
return <div className="absolute h-3/5 left-0 top-0 right-0 bottom-0 m-auto bg-transparent
flex flex-col items-center
// if (status) {
return <div className="absolute left-0 right-0 top-0 bottom-0 m-auto bg-gray-700 rounded-xl
flex flex-col items-center border-gray-500 border-2
"
style={{
width: 1 * state.rect,
}}
ref={ref}
>
<div className='absolute top-0 overflow-visible bg-green-400 h-full'
style={{
width: state.rect,
height: 1.1 * state.rect,
}}
ref={ref}
>
onMouseDown={() => carouselDispatch({ type: 'drag-start' })}
onMouseMove={(e) => e.buttons == 1 && carouselDispatch({ type: 'drag', move: e.movementX })}
onMouseUp={() => carouselDispatch({ type: 'drag-end' })}
<div className='w-full overflow-hidden relative rounded-t-xl'
style={{
height: state.rect,
}}
>
<div className='bg-transparent h-full flex select-none'
style={{
width: 1 * state.rect,
transform: `translateX(${state.dragging ? -state.dragLeft : -state.pg * state.rect}px)`,
width: state.rect * (arr.length + 1),
transform: `translateX(${state.dragging ? -state.dragLeft-4 : -state.pg * state.rect-4}px)`,
transition: state.dragging ? null : elastic
}}
>
{
arr.map((e, idx) => {
return <div key={idx} style={{}}>
hi {e}
arr.map(
(e, idx) => <div className='flex flex-col items-center text-base lg:text-xl'
style={{ width: state.rect, height: '100%' }} key={idx}
>
<div className="bg-gray-800"
style={{
width: state.rect * 0.8,
height: state.rect * 0.8,
}}
></div>
<div className='my-auto text-center text-gray-50'>
{e[0]}
</div>
</div>
})
)
}
<div className='flex flex-col items-center text-base lg:text-xl text-gray-50'
style={{ width: state.rect, height: '100%' }}
>
<QuickStart/>
</div>
</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'
onClick={() => carouselDispatch({ type: "move", del: -1 })}
>
<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'
onClick={() => carouselDispatch({ type: "move", del: 1 })}
>
<MdArrowForward className="w-full h-full text-gray-700 p-3" />
</div>
<div className="flex w-full -bottom-8 absolute flex justify-center items-center">
{arr.map((ele, idx) => (
<div key={idx} className={`h-2 w-2 mx-1 rounded-full ${idx == state.pg ? 'bg-gray-50' : 'bg-gray-500'}`}></div>
))}
</div>
<MdCancel className="btn-green absolute h-7 w-auto right-4 top-4"
onClick={() => dispatch({ type: 'set-help', status: false })}
/>
</div >
} else {
return null
}
</div>
<div
className="pointer-cursor bg-gray-200 rounded p-1 inline-block"
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'
onClick={() => carouselDispatch({ type: "move", del: -1 })}
>
<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'
onClick={() => carouselDispatch({ type: "move", del: 1 })}
>
<MdArrowForward className="w-full h-full text-gray-700 p-3" />
</div>
<div className="flex -bottom-8 absolute flex justify-center items-center">
{Array(arr.length + 1).fill().map((ele, idx) => (
<div key={idx} className={`h-2 w-2 mx-1 rounded-full ${idx == state.pg ? 'bg-gray-50' : 'bg-gray-500'}`}></div>
))}
</div>
</div >
// } else {
// return null
// }
}

View File

@ -314,6 +314,227 @@ function Logo(props) {
);
}
function MouseLeft(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
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"
fill="none"
stroke="#fff"
strokeWidth={5.946}
strokeLinecap="round"
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"
fill="#fff"
paintOrder="markers stroke fill"
/>
</svg>
);
}
function MouseMiddle(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
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"
fill="none"
stroke="#fff"
strokeWidth={5.946}
strokeLinecap="round"
paintOrder="markers stroke fill"
/>
<rect
width={13.081}
height={29.728}
x={56.96}
y={51.57}
rx={4.757}
ry={4.757}
fill="#fff"
paintOrder="markers stroke fill"
/>
</svg>
);
}
function MouseRight(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
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"
fill="none"
stroke="#fff"
strokeWidth={5.946}
strokeLinecap="round"
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"
fill="#fff"
paintOrder="markers stroke fill"
/>
</svg>
);
}
function MouseScroll(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127 185.208"
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"
fill="none"
stroke="#fff"
strokeWidth={5.946}
strokeLinecap="round"
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"
fill="none"
stroke="#fff"
strokeWidth={5.946}
/>
</svg>
);
}
function Pan(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
aria-label="Pan"
viewBox="0 0 24 24"
className="prefix__StyledIcon-ofa7kd-0 prefix__dSCMyp"
width="1em"
height="1em"
{...props}
>
<path
style={{
lineHeight: "normal",
fontVariantLigatures: "normal",
fontVariantPosition: "normal",
fontVariantCaps: "normal",
fontVariantNumeric: "normal",
fontVariantAlternates: "normal",
fontVariantEastAsian: "normal",
fontFeatureSettings: "normal",
fontVariationSettings: "normal",
textIndent: 0,
textAlign: "start",
textDecorationLine: "none",
textDecorationStyle: "solid",
textDecorationColor: "#000",
textTransform: "none",
textOrientation: "mixed",
whiteSpace: "normal",
shapePadding: 0,
shapeMargin: 0,
inlineSize: 0,
isolation: "auto",
mixBlendMode: "normal",
solidColor: "#000",
solidOpacity: 1,
}}
d="M12 2L8.314 5.686l1.239 1.239 1.57-1.571v5.77h-5.77l1.572-1.571-1.24-1.239L2 12l3.686 3.686 1.239-1.239-1.571-1.57h5.77v5.77l-1.571-1.572-1.239 1.24L12 22l3.686-3.686-1.239-1.239-1.57 1.571v-5.77h5.77l-1.572 1.571 1.24 1.239L22 12l-3.686-3.686-1.239 1.239 1.571 1.57h-5.77v-5.77l1.571 1.572 1.239-1.24z"
color="currentColor"
fontWeight={400}
fontFamily="sans-serif"
overflow="visible"
/>
</svg>
);
}
function Rotate(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
aria-label="PowerCycle"
viewBox="0 0 24 24"
className="prefix__StyledIcon-ofa7kd-0 prefix__dSCMyp"
width="1em"
height="1em"
{...props}
>
<path
style={{
lineHeight: "normal",
fontVariantLigatures: "normal",
fontVariantPosition: "normal",
fontVariantCaps: "normal",
fontVariantNumeric: "normal",
fontVariantAlternates: "normal",
fontVariantEastAsian: "normal",
fontFeatureSettings: "normal",
fontVariationSettings: "normal",
textIndent: 0,
textAlign: "start",
textDecorationLine: "none",
textDecorationStyle: "solid",
textDecorationColor: "#000",
textTransform: "none",
textOrientation: "mixed",
whiteSpace: "normal",
shapePadding: 0,
shapeMargin: 0,
inlineSize: 0,
isolation: "auto",
mixBlendMode: "normal",
solidColor: "#000",
solidOpacity: 1,
}}
d="M11.967 3C7.023 3 3 7.042 3 12h1.8c0-3.989 3.2-7.2 7.167-7.2 2.26 0 4.233 1.068 5.545 2.7H14.7v1.8H21V3h-1.8v3.81C17.572 4.53 14.969 3 11.967 3zm7.233 9c0 3.989-3.2 7.2-7.167 7.2-2.26 0-4.233-1.068-5.545-2.7H9.3v-1.8H3V21h1.8v-3.81C6.428 19.47 9.031 21 12.033 21 16.977 21 21 16.958 21 12z"
color="currentColor"
fontWeight={400}
fontFamily="sans-serif"
overflow="visible"
/>
</svg>
);
}
function Select(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path fill="none" d="M0 0h24v24H0z" />
<path d="M17 5h-2V3h2v2zm-2 10v6l2.29-2.29 2.3 2.29L21 19.59l-2.29-2.29L21 15h-6zm4-6h2V7h-2v2zm0 4h2v-2h-2v2zm-8 8h2v-2h-2v2zM7 5h2V3H7v2zM3 17h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM19 3v2h2c0-1.1-.9-2-2-2zm-8 2h2V3h-2v2zM3 9h2V7H3v2zm4 12h2v-2H7v2zm-4-8h2v-2H3v2zm0-8h2V3c-1.1 0-2 .9-2 2z" />
</svg>
);
}
function Stl(props) {
return (
<svg
@ -475,4 +696,4 @@ function Vertical(props) {
</svg>
);
}
export { Arc, Coincident, Dimension, Extrude, Flip, Horizontal, Intersect, Line, Logo, Stl, Subtract, Tangent, Union, Vertical };
export { Arc, Coincident, Dimension, Extrude, Flip, Horizontal, Intersect, Line, Logo, MouseLeft, MouseMiddle, MouseRight, MouseScroll, Pan, Rotate, Select, Stl, Subtract, Tangent, Union, Vertical };

22
src/react/modal.jsx Normal file
View File

@ -0,0 +1,22 @@
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');
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(this.props.children, this.el);
}
}

View File

@ -1,17 +1,18 @@
import React, { useEffect, useReducer } from 'react';
import React, { useEffect, useReducer, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { FaEdit, FaLinkedin, FaGithub } from 'react-icons/fa'
import { MdSave, MdFolder, MdInsertDriveFile, MdHelpOutline } from 'react-icons/md'
import * as Icon from "./icons";
import { Dialog } from './dialog'
import { DropDown } from './dropDown'
import { Help } from './help'
import { Modal } from './modal'
import { STLExport, saveFile, openFile } from './fileHelpers'
import { DropDown} from './dropDown'
const buttonIdx = {
'line': 1,
@ -171,10 +172,12 @@ export const NavBar = () => {
const [_, forceUpdate] = useReducer(x => x + 1, 0);
return <div className='topNav flex justify-center items-center bg-gray-800'>
const [modal, setModal] = useState(false)
<div className='w-auto h-full flex-1 flex items-center justify-end md:justify-between'>
<div className='w-100 h-full items-center font-mono text-lg text-gray-200 select-none hidden lg:flex mr-8'>
return <div className='topNav flex justify-center bg-gray-800'>
<div className='w-auto h-full flex-1 flex justify-end lg:justify-between'>
<div className='w-100 h-full font-mono text-lg text-gray-200 select-none hidden lg:flex mr-8 items-center'>
<Icon.Logo className='w-auto h-6 mx-1' />
three.cad
</div>
@ -194,11 +197,15 @@ export const NavBar = () => {
))
}
</div>
<div className='w-auto h-full flex-1 items-center justify-end flex-shrink-1 hidden md:flex'>
<div className='w-auto h-full flex-1 justify-end flex-shrink-1 hidden md:flex'>
<MdHelpOutline className="btn-green w-auto h-full p-3" onClick={() => {
dispatch({ type: 'set-help', status: true })
setModal(true)
}
} />
{/* <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>
@ -206,6 +213,11 @@ export const NavBar = () => {
<FaLinkedin className="btn-green w-auto h-full p-3.5"></FaLinkedin>
</a>
</div>
{
modal && <Modal>
<Help {...{ setModal }} />
</Modal>
}
</div>
}

139
src/react/quickStart.jsx Normal file
View File

@ -0,0 +1,139 @@
import React, { useState, useEffect, useRef, useCallback, useReducer } from "react"
import { useDispatch, useSelector } from "react-redux"
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 * as Icon from "./icons";
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'],
]
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 [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
</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='self-center h-full w-11/12'
style={{
display: 'grid',
grid: 'minmax(1em, auto) / 1fr',
}}
>
{
navArr.map((row, i) => (
typeof row === 'string' ?
<div className='col-span-2 flex justify-center'>
{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],
{
className: "fill-current text-gray-100 flex-shrink-0",
width: '2.5em', height: '2.5em', size: '2.5em',
style: { padding: '0.5em' }
}
)}
</div>
<div className='flex items-center ml-2 my-2'>
{
row[2].map(
(Col, key) => typeof Col === 'string' ?
Col
:
<Col className="fill-current text-gray-100 flex-none" key={key} width='auto' height='2.5em' />
)
}
</div>
</React.Fragment>
))
}
</div>
{
clip && <Modal>
<Clip {...{ setClip, clip }} />
</Modal>
}
</div>
</div>
}

View File

@ -195,15 +195,6 @@ export function ui(state = defaultUIState, action) {
mode: { $set: action.mode }
})
case 'set-help':
return update(state, {
help: { $set: action.status }
})
case 'toggle-help':
return update(state, {
help: { $set: !state.help }
})
default:
return state
}

View File

@ -14,7 +14,7 @@ module.exports = {
gray: colors.trueGray,
green: colors.emerald,
red: colors.red,
}
},
},
variants: {
extend: {},