working visibility
howard
parent
7b9ce380b7
commit
ff584e8a21
|
|
@ -1,2 +1,3 @@
|
|||
node_modules/
|
||||
dist/*bundle.js*
|
||||
dist/*bundle.js*
|
||||
dist/index.css
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
/* @tailwind base; */
|
||||
|
||||
.bg-blue-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.border-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(0, 0, 0, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.leading-loose {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
* {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
|
||||
* {
|
||||
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgba(59, 130, 246, 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
}
|
||||
|
||||
.text-red-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(239, 68, 68, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.w-1\/2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.w-1\/5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ping {
|
||||
75%, 100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8,0,1,1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0,0,0.2,1);
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#c {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
cursor: pointer;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(239, 68, 68, var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.btn-red:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(249, 250, 251, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-grn {
|
||||
cursor: pointer;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(16, 185, 129, var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.btn-grn:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.btn-grn {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(249, 250, 251, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-blu {
|
||||
cursor: pointer;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(59, 130, 246, var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.btn-blu:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.btn-blu {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(249, 250, 251, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "icon",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@svgr/core": "^5.5.0",
|
||||
"@svgr/plugin-jsx": "^5.5.0",
|
||||
"@svgr/plugin-prettier": "^5.5.0",
|
||||
"@svgr/plugin-svgo": "^5.5.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
const { default: svgr } = require('@svgr/core')
|
||||
const fs = require('fs')
|
||||
|
||||
|
||||
const dir = './svgr_raw/'
|
||||
|
||||
|
||||
async function main() {
|
||||
|
||||
const output = ['import * as React from "react";']
|
||||
const names = []
|
||||
|
||||
try {
|
||||
const files = await fs.promises.readdir(dir);
|
||||
for (const file of files) {
|
||||
const res = await fs.promises.readFile(dir+file, 'utf-8')
|
||||
let name = file.split('.')[0]
|
||||
name = name[0].toUpperCase() + name.slice(1)
|
||||
names.push(name)
|
||||
const jsx = await svgr(res, { icon: true, plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'] }, { componentName: name })
|
||||
const split = jsx.split('\n')
|
||||
output.push(split.slice(1,split.length-2).join('\n'))
|
||||
}
|
||||
|
||||
output.push(`export { ${names.join(', ')} };`)
|
||||
|
||||
|
||||
const data = fs.writeFileSync('../src/icons.jsx', output.join(''))
|
||||
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
main()
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<?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"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16.000001"
|
||||
version="1.1"
|
||||
id="svg2112"
|
||||
inkscape:version="1.0.2 (1.0.2+r75+1)"
|
||||
sodipodi:docname="arc.svg">
|
||||
<defs
|
||||
id="defs2106" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="10.270466"
|
||||
inkscape:cx="-8.3938354"
|
||||
inkscape:cy="-3.3545709"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1514"
|
||||
inkscape:window-height="1199"
|
||||
inkscape:window-x="254"
|
||||
inkscape:window-y="48"
|
||||
inkscape:window-maximized="0"
|
||||
units="px"
|
||||
inkscape:snap-object-midpoints="true"
|
||||
inkscape:snap-text-baseline="true"
|
||||
inkscape:snap-center="true" />
|
||||
<metadata
|
||||
id="metadata2109">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;fill-opacity:0.7;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="path1525"
|
||||
sodipodi:type="arc"
|
||||
sodipodi:cx="1.25"
|
||||
sodipodi:cy="13.60833"
|
||||
sodipodi:rx="13"
|
||||
sodipodi:ry="13"
|
||||
sodipodi:start="5.2359878"
|
||||
sodipodi:end="0.0017453293"
|
||||
sodipodi:arc-type="arc"
|
||||
d="M 7.75,2.3499995 A 13,13 0 0 1 14.24998,13.631019"
|
||||
sodipodi:open="true" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1542-6"
|
||||
width="2"
|
||||
height="2"
|
||||
x="0.75"
|
||||
y="12.631019" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1542-6-7"
|
||||
width="2"
|
||||
height="2"
|
||||
x="6.75"
|
||||
y="1.3499995" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1542-6-5"
|
||||
width="2"
|
||||
height="2"
|
||||
x="13.24998"
|
||||
y="12.631019" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,73 @@
|
|||
<?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"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-intersect"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="intersect.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" />
|
||||
<dc:title></dc:title>
|
||||
</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="1514"
|
||||
inkscape:window-height="1169"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="15.534389"
|
||||
inkscape:cx="-4.8559631"
|
||||
inkscape:cy="6.7608656"
|
||||
inkscape:window-x="184"
|
||||
inkscape:window-y="114"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4"
|
||||
inkscape:document-rotation="0" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:0.69999999;stroke:none;stroke-width:1.16507;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 5.5507812,5.5 C 5.5322504,5.6663789 5.5,5.828554 5.5,6 c 0,2.4912037 2.0087963,4.5 4.5,4.5 0.171446,0 0.333621,-0.03225 0.5,-0.05078 V 6 C 10.5,5.7143514 10.285649,5.5 10,5.5 Z"
|
||||
id="path958" />
|
||||
<rect
|
||||
style="fill:none;fill-opacity:0.697106;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect833"
|
||||
width="10"
|
||||
height="10"
|
||||
x="1"
|
||||
y="5"
|
||||
rx="1"
|
||||
ry="1" />
|
||||
<circle
|
||||
style="fill:none;fill-opacity:0.697106;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path835"
|
||||
cx="10"
|
||||
cy="6"
|
||||
r="5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,92 @@
|
|||
<?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"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16.000001"
|
||||
version="1.1"
|
||||
id="svg2112"
|
||||
inkscape:version="1.0.2 (1.0.2+r75+1)"
|
||||
sodipodi:docname="line.svg">
|
||||
<defs
|
||||
id="defs2106" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="29.049263"
|
||||
inkscape:cx="12.144995"
|
||||
inkscape:cy="6.0925762"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1514"
|
||||
inkscape:window-height="1199"
|
||||
inkscape:window-x="603"
|
||||
inkscape:window-y="114"
|
||||
inkscape:window-maximized="0"
|
||||
units="px"
|
||||
inkscape:snap-object-midpoints="true"
|
||||
inkscape:snap-text-baseline="true"
|
||||
inkscape:snap-center="true" />
|
||||
<metadata
|
||||
id="metadata2109">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 2,14 5,8 h 6 l 3,-6"
|
||||
id="path1710"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1542-6-5-6"
|
||||
width="2"
|
||||
height="2"
|
||||
x="1"
|
||||
y="13" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1542-6-5-6-2"
|
||||
width="2"
|
||||
height="2"
|
||||
x="4"
|
||||
y="7" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1542-6-5-6-9"
|
||||
width="2"
|
||||
height="2"
|
||||
x="10"
|
||||
y="7" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1542-6-5-6-1"
|
||||
width="2"
|
||||
height="2"
|
||||
x="13"
|
||||
y="1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,73 @@
|
|||
<?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"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-intersect"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="subtract.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" />
|
||||
<dc:title></dc:title>
|
||||
</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="1514"
|
||||
inkscape:window-height="1169"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="15.534389"
|
||||
inkscape:cx="-4.8559631"
|
||||
inkscape:cy="6.7608656"
|
||||
inkscape:window-x="184"
|
||||
inkscape:window-y="114"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4"
|
||||
inkscape:document-rotation="0" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:0.69999999;stroke:none;stroke-width:1.16507;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 2,5.5 C 1.7143514,5.5 1.5,5.7143514 1.5,6 v 8 c 0,0.285649 0.2143514,0.5 0.5,0.5 h 8 c 0.285649,0 0.5,-0.214351 0.5,-0.5 V 11.474609 C 10.334832,11.48962 10.168998,11.5 10,11.5 6.9683562,11.5 4.5,9.0316438 4.5,6 c 0,-0.1689984 0.01038,-0.3348324 0.025391,-0.5 z"
|
||||
id="path956" />
|
||||
<rect
|
||||
style="fill:none;fill-opacity:0.697106;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect833"
|
||||
width="10"
|
||||
height="10"
|
||||
x="1"
|
||||
y="5"
|
||||
rx="1"
|
||||
ry="1" />
|
||||
<circle
|
||||
style="fill:none;fill-opacity:0.697106;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path835"
|
||||
cx="10"
|
||||
cy="6"
|
||||
r="5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,81 @@
|
|||
<?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"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-intersect"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="union.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" />
|
||||
<dc:title></dc:title>
|
||||
</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="1514"
|
||||
inkscape:window-height="1169"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="15.534389"
|
||||
inkscape:cx="-4.8559631"
|
||||
inkscape:cy="6.7608656"
|
||||
inkscape:window-x="184"
|
||||
inkscape:window-y="114"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4"
|
||||
inkscape:document-rotation="0" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:0.69999999;stroke:none;stroke-width:1.16507;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 5.5507812,5.5 C 5.5322504,5.6663789 5.5,5.828554 5.5,6 c 0,2.4912037 2.0087963,4.5 4.5,4.5 0.171446,0 0.333621,-0.03225 0.5,-0.05078 V 6 C 10.5,5.7143514 10.285649,5.5 10,5.5 Z"
|
||||
id="path958" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:0.69999999;stroke:none;stroke-width:1.16507;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 2,5.5 C 1.7143514,5.5 1.5,5.7143514 1.5,6 v 8 c 0,0.285649 0.2143514,0.5 0.5,0.5 h 8 c 0.285649,0 0.5,-0.214351 0.5,-0.5 V 11.474609 C 10.334832,11.48962 10.168998,11.5 10,11.5 6.9683562,11.5 4.5,9.0316438 4.5,6 c 0,-0.1689984 0.01038,-0.3348324 0.025391,-0.5 z"
|
||||
id="path956" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:0.69999999;stroke:none;stroke-width:1.16507;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="m 10,1.5 c -1.9618479,0 -3.6065883,1.253877 -4.2246094,3 H 10 c 0.822351,0 1.5,0.6776486 1.5,1.5 v 4.224609 C 13.246123,9.6065887 14.5,7.9618479 14.5,6 14.5,3.5087963 12.491204,1.5 10,1.5 Z"
|
||||
id="path954" />
|
||||
<rect
|
||||
style="fill:none;fill-opacity:0.697106;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect833"
|
||||
width="10"
|
||||
height="10"
|
||||
x="1"
|
||||
y="5"
|
||||
rx="1"
|
||||
ry="1" />
|
||||
<circle
|
||||
style="fill:none;fill-opacity:0.697106;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path835"
|
||||
cx="10"
|
||||
cy="6"
|
||||
r="5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
126
src/app.jsx
126
src/app.jsx
|
|
@ -1,13 +1,14 @@
|
|||
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useReducer, useRef, useState } from 'react';
|
||||
import './app.css'
|
||||
|
||||
import { Provider, useDispatch, useSelector } from 'react-redux'
|
||||
// import { sc } from './index'
|
||||
import { BsPencilSquare } from 'react-icons/bs'
|
||||
import { FaCube, FaCheck } from 'react-icons/fa'
|
||||
import { MdAdd, MdEdit, MdDone } from 'react-icons/md'
|
||||
import { FaCube, FaEdit } from 'react-icons/fa'
|
||||
import { MdEdit, MdDone, MdVisibilityOff, MdVisibility } from 'react-icons/md'
|
||||
import { RiShape2Fill } from 'react-icons/ri'
|
||||
import { Union, Subtract, Intersect, Line, Arc } from './icons'
|
||||
import { color } from './utils/static'
|
||||
|
||||
export const Root = ({ store }) => (
|
||||
<Provider store={store}>
|
||||
|
|
@ -28,6 +29,7 @@ const App = () => {
|
|||
// console.log('hereeee')
|
||||
// },[state])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeSketchNid) {
|
||||
sc.canvas.addEventListener('pointermove', sc.onHover)
|
||||
|
|
@ -43,41 +45,117 @@ const App = () => {
|
|||
const btnz = [
|
||||
activeSketchNid ?
|
||||
[MdDone, () => treeEntries.byNid[activeSketchNid].deactivate(), 'Finish'] :
|
||||
[MdAdd, sc.addSketch, 'Sketch']
|
||||
[FaEdit, sc.addSketch, 'Sketch']
|
||||
,
|
||||
[FaCube, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Extrude']
|
||||
[FaCube, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Extrude'],
|
||||
[Union, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Union'],
|
||||
[Subtract, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Subtract'],
|
||||
[Intersect, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Intersect'],
|
||||
[Line, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Line'],
|
||||
[Arc, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Arc'],
|
||||
]
|
||||
|
||||
return <div className='absolute left-0 w-1/6 flex flex-col'>
|
||||
{
|
||||
btnz.map(([Icon, fcn, txt]) => (
|
||||
<div className="btn flex items-center justify-end p-1 text-xs w-16"
|
||||
btnz.map(([Icon, fcn, txt], idx) => (
|
||||
<div className="btn flex items-center justify-end p-1 text-lg w-36" key={idx}
|
||||
onClick={fcn}
|
||||
>
|
||||
<div>{txt}</div>
|
||||
<Icon className="w-4 h-4 ml-1" />
|
||||
<Icon className="w-6 h-6 ml-1" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
|
||||
<div className=''>
|
||||
{treeEntries.allNids.map((entId, idx) => (
|
||||
<div className='bg-gray-50 flex justify-between'
|
||||
key={idx}>
|
||||
<div className='btn'
|
||||
onClick={() => {
|
||||
activeSketchNid && treeEntries.byNid[activeSketchNid].deactivate()
|
||||
treeEntries.byNid[entId].activate()
|
||||
}}
|
||||
>
|
||||
<MdEdit />
|
||||
</div>
|
||||
<div class="btn">{entId}</div>
|
||||
</div>
|
||||
<TreeEntry key={idx} entId={entId} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
const TreeEntry = ({ entId }) => {
|
||||
|
||||
const treeEntries = useSelector(state => state.treeEntries.byNid)
|
||||
|
||||
const activeSketchNid = useSelector(state => state.activeSketchNid)
|
||||
|
||||
let entry;
|
||||
if (entId[0]=="s") {
|
||||
entry = treeEntries[entId].obj3d
|
||||
} else {
|
||||
entry = treeEntries[entId]
|
||||
}
|
||||
|
||||
const [_, forceUpdate] = useReducer(x => x + 1, 0);
|
||||
|
||||
const vis = entry.visible
|
||||
|
||||
return <div className='bg-gray-50 flex justify-between'>
|
||||
<div className='btn'
|
||||
onClick={() => {
|
||||
activeSketchNid && treeEntries[activeSketchNid].deactivate()
|
||||
entry.activate()
|
||||
}}
|
||||
>
|
||||
<MdEdit />
|
||||
</div>
|
||||
|
||||
{
|
||||
vis ?
|
||||
<div className='btn'
|
||||
onClick={() => {
|
||||
entry.visible = false;
|
||||
sc.render()
|
||||
forceUpdate()
|
||||
}}
|
||||
>
|
||||
<MdVisibility />
|
||||
</div>
|
||||
:
|
||||
<div className='btn'
|
||||
onClick={() => {
|
||||
entry.visible = true;
|
||||
sc.render()
|
||||
forceUpdate()
|
||||
}}
|
||||
>
|
||||
<MdVisibilityOff />
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="btn"
|
||||
onPointerEnter={() => {
|
||||
if (entId[0] == 'm') {
|
||||
entry.material.color.set(color.hover)
|
||||
sc.render()
|
||||
}
|
||||
}}
|
||||
onPointerLeave={() => {
|
||||
const obj = entry
|
||||
if (entId[0] == 'm' && !sc.selected.includes(obj)) {
|
||||
obj.material.color.set(color.m)
|
||||
sc.render()
|
||||
}
|
||||
}}
|
||||
onPointerDown={() => {
|
||||
if (entId[0] == 'm') {
|
||||
sc.selected.push(
|
||||
entry
|
||||
)
|
||||
sc.render()
|
||||
}
|
||||
}}
|
||||
>
|
||||
{entId}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
const DesignLeaf = () => {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
import * as React from "react";
|
||||
function Arc(props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
>
|
||||
<g stroke="currentColor" strokeLinecap="round">
|
||||
<path
|
||||
d="M7.75 2.35a13 13 0 016.5 11.281"
|
||||
fill="none"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M.75 12.631h2v2h-2zM6.75 1.35h2v2h-2zM13.25 12.631h2v2h-2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Intersect(props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
className="prefix__bi prefix__bi-intersect"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M5.55 5.5c-.018.166-.05.329-.05.5 0 2.491 2.009 4.5 4.5 4.5.171 0 .334-.032.5-.05V6c0-.286-.214-.5-.5-.5z"
|
||||
fill="currentColor"
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
<rect
|
||||
width={10}
|
||||
height={10}
|
||||
x={1}
|
||||
y={5}
|
||||
rx={1}
|
||||
ry={1}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle
|
||||
cx={10}
|
||||
cy={6}
|
||||
r={5}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Line(props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
>
|
||||
<g stroke="currentColor">
|
||||
<path d="M2 14l3-6h6l3-6" fill="none" strokeWidth={1.5} />
|
||||
<path
|
||||
fill="#fff"
|
||||
strokeLinecap="round"
|
||||
d="M1 13h2v2H1zM4 7h2v2H4zM10 7h2v2h-2zM13 1h2v2h-2z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Subtract(props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
className="prefix__bi prefix__bi-intersect"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M2 5.5c-.286 0-.5.214-.5.5v8c0 .286.214.5.5.5h8c.286 0 .5-.214.5-.5v-2.525a5.504 5.504 0 01-.5.025A5.508 5.508 0 014.5 6c0-.169.01-.335.025-.5z"
|
||||
fill="currentColor"
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
<rect
|
||||
width={10}
|
||||
height={10}
|
||||
x={1}
|
||||
y={5}
|
||||
rx={1}
|
||||
ry={1}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle
|
||||
cx={10}
|
||||
cy={6}
|
||||
r={5}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Union(props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
className="prefix__bi prefix__bi-intersect"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M5.55 5.5c-.018.166-.05.329-.05.5 0 2.491 2.009 4.5 4.5 4.5.171 0 .334-.032.5-.05V6c0-.286-.214-.5-.5-.5z"
|
||||
fill="currentColor"
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
<path
|
||||
d="M2 5.5c-.286 0-.5.214-.5.5v8c0 .286.214.5.5.5h8c.286 0 .5-.214.5-.5v-2.525a5.504 5.504 0 01-.5.025A5.508 5.508 0 014.5 6c0-.169.01-.335.025-.5zM10 1.5a4.477 4.477 0 00-4.225 3H10c.822 0 1.5.678 1.5 1.5v4.225A4.477 4.477 0 0014.5 6c0-2.491-2.009-4.5-4.5-4.5z"
|
||||
fill="currentColor"
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
<rect
|
||||
width={10}
|
||||
height={10}
|
||||
x={1}
|
||||
y={5}
|
||||
rx={1}
|
||||
ry={1}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle
|
||||
cx={10}
|
||||
cy={6}
|
||||
r={5}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
export { Arc, Intersect, Line, Subtract, Union };
|
||||
|
|
@ -65,6 +65,7 @@ window.store = createStore(reducer, preloadedState, applyMiddleware(logger))
|
|||
|
||||
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
ReactDOM.render(
|
||||
React.createElement(Root, { store: store }, null)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ export function onHover(e) {
|
|||
|
||||
const obj = this.hovered[this.hovered.length - 1]
|
||||
if (obj && !this.selected.includes(obj)) {
|
||||
// obj.material.color.set(0x555555)
|
||||
obj.material.color.set(color[obj.name[0]])
|
||||
}
|
||||
this.hovered = []
|
||||
|
|
|
|||
Loading…
Reference in New Issue