Iniit
No files matched your search
@@ -0,0 +1,3 @@
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.7539 3.98326C13.8457 3.17488 12.8126 2.76135 12.3213 3.40985L4.22204 14.1009C3.82288 14.6278 4.19869 15.384 4.85971 15.384H12.1039C12.5815 15.384 12.9528 15.7998 12.8988 16.2743L12.2461 22.018C12.1543 22.8264 13.1874 23.24 13.6787 22.5914L21.778 11.9004C22.1771 11.3735 21.8013 10.6173 21.1403 10.6173H13.8961C13.4185 10.6173 13.0472 10.2015 13.1012 9.72699L13.7539 3.98326Z" fill="#808292"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 509 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9205 4.14928C16.0124 3.3409 14.9793 2.92737 14.488 3.57587L4.72203 16.4669C4.32287 16.9938 4.69869 17.75 5.35971 17.75H14.1039C14.5815 17.75 14.9528 18.1658 14.8988 18.6403L14.0795 25.8507C13.9876 26.6591 15.0207 27.0726 15.512 26.4241L25.278 13.5331C25.6771 13.0062 25.3013 12.25 24.6403 12.25H15.8961C15.4185 12.25 15.0472 11.8342 15.1012 11.3597L15.9205 4.14928Z" fill="#217CE8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 500 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.8372 4.06628C14.9291 3.25789 13.8959 2.84436 13.4046 3.49286L4.47203 15.2839C4.07287 15.8108 4.44869 16.567 5.10971 16.567H13.1039C13.5815 16.567 13.9528 16.9828 13.8988 17.4573L13.1628 23.9344C13.0709 24.7428 14.1041 25.1563 14.5954 24.5078L23.528 12.7167C23.9271 12.1899 23.5513 11.4337 22.8903 11.4337H14.8961C14.4185 11.4337 14.0472 11.0179 14.1012 10.5433L14.8372 4.06628Z" fill="#E88C21"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 512 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5c3.453 0 5.891 2.797 5.567 6.78 1.745-.046 4.433.751 4.433 3.72 0 1.93-1.57 3.5-3.5 3.5h-13c-1.93 0-3.5-1.57-3.5-3.5 0-2.797 2.479-3.833 4.433-3.72-.167-4.218 2.208-6.78 5.567-6.78zm0-2c-4.006 0-7.267 3.141-7.479 7.092-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h13c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408-.212-3.951-3.473-7.092-7.479-7.092zm-1 14l.58-3h-2.496l3.916-5-.912 3h2.828l-3.916 5z"/></svg>
|
||||
|
After Width: | Height: | Size: 530 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 2L2.18437 6.84636C2.08842 6.92631 2.08842 7.07369 2.18437 7.15364L8 12" stroke="#393C44" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#dc7d7d"><path d="M15 21c0 1.598-1.392 3-2.971 3s-3.029-1.402-3.029-3h6zm.137-17.055c-.644-.374-1.042-1.07-1.041-1.82v-.003c.001-1.172-.938-2.122-2.096-2.122s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.668 2.709-1.985 11.715-6.862 13.306v1.749h20v-1.749c-4.877-1.591-2.193-10.598-6.863-13.306zm-3.137-2.945c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1zm-6.451 16c1.189-1.667 1.605-3.891 1.964-5.815.447-2.39.869-4.648 2.354-5.509 1.38-.801 2.956-.76 4.267 0 1.485.861 1.907 3.119 2.354 5.509.359 1.924.775 4.148 1.964 5.815h-12.903z"/></svg>
|
||||
|
After Width: | Height: | Size: 666 B |
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M383.945,490L230.694,364.254H50.716c-27.924,0-50.63-23.11-50.63-51.527V51.535C0.086,23.118,22.792,0,50.716,0h388.568
|
||||
c27.924,0,50.63,23.118,50.63,51.535v261.193c0,28.417-22.707,51.527-50.63,51.527h-55.339V490z M50.716,30.614
|
||||
c-11.032,0-20.016,9.388-20.016,20.92v261.193c0,11.525,8.984,20.913,20.016,20.913h190.921l111.694,91.633V333.64h85.953
|
||||
c11.032,0,20.016-9.388,20.016-20.913V51.535c0-11.533-8.984-20.92-20.016-20.92H50.716z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 952 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="20" height="20" rx="4.5" stroke="#E8E8EF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 176 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="21" height="21" rx="5" fill="#217CE8"/>
|
||||
<path d="M15.6654 7.5L9.2487 13.9167L6.33203 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 286 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.25 4.75L4.75 14.25" stroke="#A6A6B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.75 4.75L14.25 14.25" stroke="#A6A6B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 339 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 17L6 12L11 7" stroke="#B3B6C9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 17L13 12L18 7" stroke="#B3B6C9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 324 B |
@@ -0,0 +1,13 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M11 7.33301C15.5563 7.33301 19.25 6.10179 19.25 4.58301C19.25 3.06422 15.5563 1.83301 11 1.83301C6.44365 1.83301 2.75 3.06422 2.75 4.58301C2.75 6.10179 6.44365 7.33301 11 7.33301Z" fill="#808292"/>
|
||||
<path d="M2.75 4.58301V17.4163C2.75 18.938 6.41667 20.1663 11 20.1663C15.5833 20.1663 19.25 18.938 19.25 17.4163V4.58301" fill="#808292"/>
|
||||
<path d="M21.0846 9.16699C21.0846 10.6887 16.6032 11.917 11.0013 11.917C5.39945 11.917 0.917969 10.6887 0.917969 9.16699" stroke="#F1F4FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21.0846 3.66699C21.0846 5.18866 16.6032 6.41699 11.0013 6.41699C5.39945 6.41699 0.917969 5.18866 0.917969 3.66699" stroke="#F1F4FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="22" height="22" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 988 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 8C16.9706 8 21 6.65685 21 5C21 3.34315 16.9706 2 12 2C7.02944 2 3 3.34315 3 5C3 6.65685 7.02944 8 12 8Z" fill="#E88C21"/>
|
||||
<path d="M3 5V19C3 20.66 7 22 12 22C17 22 21 20.66 21 19V5" fill="#E88C21"/>
|
||||
<path d="M23 10C23 11.66 18.1111 13 12 13C5.88889 13 1 11.66 1 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M23 4C23 5.66 18.1111 7 12 7C5.88889 7 1 5.66 1 4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 604 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 1L6.14142 5.85858C6.06332 5.93668 5.93668 5.93668 5.85858 5.85858L1 1" stroke="#B3B6C9" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 244 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="blue">
|
||||
<path d="M0 3v18h24v-18h-24zm6.623 7.929l-4.623 5.712v-9.458l4.623 3.746zm-4.141-5.929h19.035l-9.517 7.713-9.518-7.713zm5.694 7.188l3.824 3.099 3.83-3.104 5.612 6.817h-18.779l5.513-6.812zm9.208-1.264l4.616-3.741v9.348l-4.616-5.607z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 340 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.57465 3.21635L1.51632 14.9997C1.37079 15.2517 1.29379 15.5374 1.29298 15.8284C1.29216 16.1195 1.36756 16.4056 1.51167 16.6585C1.65579 16.9113 1.86359 17.122 2.11441 17.2696C2.36523 17.4171 2.65032 17.4965 2.94132 17.4997H17.058C17.349 17.4965 17.6341 17.4171 17.8849 17.2696C18.1357 17.122 18.3435 16.9113 18.4876 16.6585C18.6317 16.4056 18.7071 16.1195 18.7063 15.8284C18.7055 15.5374 18.6285 15.2517 18.483 14.9997L11.4247 3.21635C11.2761 2.97144 11.0669 2.76895 10.8173 2.62842C10.5677 2.48789 10.2861 2.41406 9.99965 2.41406C9.71321 2.41406 9.43159 2.48789 9.18199 2.62842C8.93238 2.76895 8.72321 2.97144 8.57465 3.21635Z" fill="#808292"/>
|
||||
<path d="M10 7.5V10.8333" stroke="#F1F4FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 14.166H10.0083" stroke="#F1F4FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 980 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.86222 3.69997L1.74513 17.2508C1.57778 17.5406 1.48923 17.8692 1.48829 18.2039C1.48735 18.5386 1.57406 18.8676 1.73979 19.1584C1.90552 19.4491 2.14449 19.6914 2.43294 19.8612C2.72138 20.0309 3.04923 20.1221 3.38388 20.1258H19.6181C19.9527 20.1221 20.2806 20.0309 20.569 19.8612C20.8574 19.6914 21.0964 19.4491 21.2621 19.1584C21.4279 18.8676 21.5146 18.5386 21.5136 18.2039C21.5127 17.8692 21.4242 17.5406 21.2568 17.2508L13.1397 3.69997C12.9689 3.41833 12.7283 3.18546 12.4413 3.02385C12.1542 2.86224 11.8304 2.77734 11.501 2.77734C11.1716 2.77734 10.8477 2.86224 10.5607 3.02385C10.2736 3.18546 10.0331 3.41833 9.86222 3.69997V3.69997Z" fill="#217CE8"/>
|
||||
<path d="M11.5 8.625V12.4583" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.5 16.291H11.5083" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 993 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.86222 3.699L1.74513 17.2498C1.57778 17.5397 1.48923 17.8682 1.48829 18.2029C1.48735 18.5376 1.57406 18.8667 1.73979 19.1574C1.90552 19.4482 2.14449 19.6905 2.43294 19.8602C2.72138 20.0299 3.04923 20.1212 3.38388 20.1248H19.618C19.9527 20.1212 20.2806 20.0299 20.569 19.8602C20.8574 19.6905 21.0964 19.4482 21.2621 19.1574C21.4279 18.8667 21.5146 18.5376 21.5136 18.2029C21.5127 17.8682 21.4242 17.5397 21.2568 17.2498L13.1397 3.699C12.9689 3.41735 12.7283 3.18449 12.4413 3.02288C12.1542 2.86127 11.8304 2.77637 11.501 2.77637C11.1716 2.77637 10.8477 2.86127 10.5607 3.02288C10.2736 3.18449 10.0331 3.41735 9.86222 3.699V3.699Z" fill="#E8215D"/>
|
||||
<path d="M11.5 8.625V12.4583" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.5 16.292H11.5096" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 984 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.875 10.5C0.875 10.5 4.375 3.5 10.5 3.5C16.625 3.5 20.125 10.5 20.125 10.5C20.125 10.5 16.625 17.5 10.5 17.5C4.375 17.5 0.875 10.5 0.875 10.5Z" fill="#808292"/>
|
||||
<path d="M10.5 13.125C11.9497 13.125 13.125 11.9497 13.125 10.5C13.125 9.05025 11.9497 7.875 10.5 7.875C9.05025 7.875 7.875 9.05025 7.875 10.5C7.875 11.9497 9.05025 13.125 10.5 13.125Z" fill="#F1F4FC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 478 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.16699 14.0003C1.16699 14.0003 5.83366 4.66699 14.0003 4.66699C22.167 4.66699 26.8337 14.0003 26.8337 14.0003C26.8337 14.0003 22.167 23.3337 14.0003 23.3337C5.83366 23.3337 1.16699 14.0003 1.16699 14.0003Z" fill="#217CE8"/>
|
||||
<path d="M14 17.5C15.933 17.5 17.5 15.933 17.5 14C17.5 12.067 15.933 10.5 14 10.5C12.067 10.5 10.5 12.067 10.5 14C10.5 15.933 12.067 17.5 14 17.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 501 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="2.22798" cy="1.45455" r="1.45455" fill="#CED0D7"/>
|
||||
<circle cx="8.77486" cy="1.45455" r="1.45455" fill="#CED0D7"/>
|
||||
<circle cx="2.22798" cy="14.5454" r="1.45455" fill="#CED0D7"/>
|
||||
<circle cx="8.77486" cy="14.5454" r="1.45455" fill="#CED0D7"/>
|
||||
<circle cx="2.22798" cy="8.00044" r="1.45455" fill="#CED0D7"/>
|
||||
<circle cx="8.77486" cy="8.00044" r="1.45455" fill="#CED0D7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 481 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.3651 1.84124C15.9395 1.41541 15.4342 1.07761 14.8779 0.847138C14.3217 0.61667 13.7255 0.498047 13.1235 0.498047C12.5214 0.498047 11.9252 0.61667 11.369 0.847138C10.8128 1.07761 10.3074 1.41541 9.88181 1.84124L8.99847 2.72457L8.11514 1.84124C7.25539 0.981492 6.08933 0.498493 4.87347 0.498493C3.65761 0.498493 2.49155 0.981492 1.6318 1.84124C0.772061 2.70098 0.289063 3.86704 0.289062 5.0829C0.289062 6.29876 0.772061 7.46483 1.6318 8.32457L2.51514 9.2079L8.99847 15.6912L15.4818 9.2079L16.3651 8.32457C16.791 7.89894 17.1288 7.39358 17.3592 6.83736C17.5897 6.28115 17.7083 5.68497 17.7083 5.0829C17.7083 4.48083 17.5897 3.88465 17.3592 3.32844C17.1288 2.77222 16.791 2.26686 16.3651 1.84124V1.84124Z" fill="#393C44"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 834 B |
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.66797 15.583L9.16797 10.083L3.66797 4.58301" stroke="#808292" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11 17.417H18.3333" stroke="#808292" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 17L10 11L4 5" stroke="#E8215D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 19H20" stroke="#E8215D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 315 B |
|
After Width: | Height: | Size: 236 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="12" height="3" viewBox="0 0 12 3" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="1.2" cy="1.2" r="1.2" fill="#C5C5D0"/>
|
||||
<circle cx="5.9998" cy="1.2" r="1.2" fill="#C5C5D0"/>
|
||||
<circle cx="10.7996" cy="1.2" r="1.2" fill="#C5C5D0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 261 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z" stroke="#A5A5B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.0016 13.9996L11.1016 11.0996" stroke="#A5A5B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="green"><path d="M12 3c5.514 0 10 3.592 10 8.007 0 4.917-5.144 7.961-9.91 7.961-1.937 0-3.384-.397-4.394-.644-1 .613-1.594 1.037-4.272 1.82.535-1.373.722-2.748.601-4.265-.837-1-2.025-2.4-2.025-4.872 0-4.415 4.486-8.007 10-8.007zm0-2c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625.055 1.83-1.023 4.456-1.993 6.368 2.602-.47 6.301-1.508 7.978-2.536 1.417.345 2.774.503 4.059.503 7.084 0 11.91-4.837 11.91-9.961-.001-5.811-5.702-10.006-12.001-10.006zm-4.449 10.151c.246.277.369.621.369 1.034 0 .529-.208.958-.624 1.289-.416.33-.996.495-1.74.495-.637 0-1.201-.123-1.69-.367l.274-1.083c.494.249.993.375 1.501.375.293 0 .521-.056.686-.167.315-.214.334-.646.023-.892-.149-.117-.404-.236-.769-.357-1.097-.366-1.645-.937-1.645-1.716 0-.503.202-.917.604-1.243.404-.325.943-.488 1.614-.488.586 0 1.096.099 1.535.298l-.299 1.049c-.401-.187-.82-.28-1.254-.28-.267 0-.476.052-.627.153-.299.204-.293.57-.035.787.126.107.428.246.91.416.532.187.92.42 1.167.697zm12.205-.021c-.249-.28-.645-.518-1.181-.706-.475-.168-.776-.307-.899-.41-.243-.205-.249-.545.032-.738.146-.099.352-.148.609-.148.464 0 .87.104 1.274.295l.316-1.111-.022-.012c-.441-.199-.962-.3-1.55-.3-.675 0-1.225.166-1.632.495-.41.33-.618.757-.618 1.267 0 .791.562 1.377 1.67 1.745.357.122.612.239.757.353.292.231.28.637-.022.841-.157.108-.381.162-.667.162-.549 0-1.042-.145-1.522-.39l-.29 1.147c.549.273 1.122.38 1.728.38.749 0 1.34-.168 1.759-.502.422-.334.636-.776.636-1.313 0-.418-.127-.772-.378-1.055zm-6.644-3.005l-1.228 3.967-1.014-3.967h-1.791l-.366 5.75h1.229l.204-4.642h.018s.702 2.878 1.178 4.547h1.031c.794-2.419 1.261-3.936 1.399-4.547h.026c0 .813.045 2.36.136 4.642h1.298l-.309-5.75h-1.811z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg id="Layer_1_1_" style="enable-background:new 0 0 64 64;" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#5e7a8a"><path d="M32,27c7.168,0,13-5.832,13-13S39.168,1,32,1S19,6.832,19,14S24.832,27,32,27z M32,3c6.065,0,11,4.935,11,11 s-4.935,11-11,11s-11-4.935-11-11S25.935,3,32,3z"/><path d="M14,37C6.832,37,1,42.832,1,50s5.832,13,13,13s13-5.832,13-13S21.168,37,14,37z M14,61C7.935,61,3,56.065,3,50 s4.935-11,11-11s11,4.935,11,11S20.065,61,14,61z"/><path d="M50,37c-7.168,0-13,5.832-13,13s5.832,13,13,13s13-5.832,13-13S57.168,37,50,37z M50,61c-6.065,0-11-4.935-11-11 s4.935-11,11-11s11,4.935,11,11S56.065,61,50,61z"/><path d="M50,47c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S51.654,47,50,47z M50,51c-0.552,0-1-0.448-1-1s0.448-1,1-1 s1,0.448,1,1S50.552,51,50,51z"/><path d="M43,47c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S44.654,47,43,47z M43,51c-0.552,0-1-0.448-1-1s0.448-1,1-1 s1,0.448,1,1S43.552,51,43,51z"/><path d="M54,50c0,1.654,1.346,3,3,3s3-1.346,3-3s-1.346-3-3-3S54,48.346,54,50z M58,50c0,0.552-0.448,1-1,1s-1-0.448-1-1 s0.448-1,1-1S58,49.448,58,50z"/><path d="M35.5,17c1.654,0,3-1.346,3-3s-1.346-3-3-3s-3,1.346-3,3S33.846,17,35.5,17z M35.5,13c0.552,0,1,0.448,1,1s-0.448,1-1,1 s-1-0.448-1-1S34.948,13,35.5,13z"/><path d="M28.5,17c1.654,0,3-1.346,3-3s-1.346-3-3-3s-3,1.346-3,3S26.846,17,28.5,17z M28.5,13c0.552,0,1,0.448,1,1s-0.448,1-1,1 s-1-0.448-1-1S27.948,13,28.5,13z"/><path d="M14,47c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S15.654,47,14,47z M14,51c-0.552,0-1-0.448-1-1s0.448-1,1-1 s1,0.448,1,1S14.552,51,14,51z"/><path d="M17.599,15.8l-1.201-1.6C9.79,19.164,6,26.745,6,35c0,0.348,0.007,0.693,0.021,1.038l1.998-0.076 C8.007,35.643,8,35.322,8,35C8,27.38,11.499,20.382,17.599,15.8z"/><path d="M26.239,58.305l-0.479,1.941C27.79,60.746,29.889,61,32,61s4.21-0.254,6.239-0.754l-0.479-1.941 C34.015,59.227,29.985,59.227,26.239,58.305z"/><path d="M57.979,36.038C57.993,35.693,58,35.348,58,35c0-8.255-3.79-15.836-10.397-20.8l-1.201,1.6C52.501,20.382,56,27.38,56,35 c0,0.322-0.007,0.643-0.019,0.962L57.979,36.038z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" fill="#5682a9"><path d="M13.403 24h-13.403v-22h3c1.231 0 2.181-1.084 3-2h8c.821.916 1.772 2 3 2h3v9.15c-.485-.098-.987-.15-1.5-.15l-.5.016v-7.016h-4l-2 2h-3.897l-2.103-2h-4v18h9.866c.397.751.919 1.427 1.537 2zm5.097-11c3.035 0 5.5 2.464 5.5 5.5s-2.465 5.5-5.5 5.5c-3.036 0-5.5-2.464-5.5-5.5s2.464-5.5 5.5-5.5zm0 2c1.931 0 3.5 1.568 3.5 3.5s-1.569 3.5-3.5 3.5c-1.932 0-3.5-1.568-3.5-3.5s1.568-3.5 3.5-3.5zm2.5 4h-3v-3h1v2h2v1zm-15.151-4.052l-1.049-.984-.8.823 1.864 1.776 3.136-3.192-.815-.808-2.336 2.385zm6.151 1.052h-2v-1h2v1zm2-2h-4v-1h4v1zm-8.151-4.025l-1.049-.983-.8.823 1.864 1.776 3.136-3.192-.815-.808-2.336 2.384zm8.151 1.025h-4v-1h4v1zm0-2h-4v-1h4v1zm-5-6c0 .552.449 1 1 1 .553 0 1-.448 1-1s-.447-1-1-1c-.551 0-1 .448-1 1z"/></svg>
|
||||
|
After Width: | Height: | Size: 844 B |
|
After Width: | Height: | Size: 10 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0013 18.3327C14.6037 18.3327 18.3346 14.6017 18.3346 9.99935C18.3346 5.39698 14.6037 1.66602 10.0013 1.66602C5.39893 1.66602 1.66797 5.39698 1.66797 9.99935C1.66797 14.6017 5.39893 18.3327 10.0013 18.3327Z" fill="#808292"/>
|
||||
<path d="M10 5V10L13.3333 11.6667" stroke="#F1F4FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 458 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#217CE8"/>
|
||||
<path d="M12 6V12L16 14" stroke="#F1F4FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M21 3.98717C20.2274 4.33017 19.397 4.56117 18.5255 4.6653C19.4154 4.13242 20.0987 3.28805 20.4199 2.2818C19.5877 2.7753 18.6655 3.13405 17.6837 3.32742C16.8989 2.49005 15.778 1.9668 14.539 1.9668C11.7574 1.9668 9.71338 4.56205 10.3416 7.25617C6.762 7.0768 3.5875 5.3618 1.46213 2.75517C0.333375 4.69155 0.87675 7.22467 2.79475 8.50742C2.0895 8.48467 1.4245 8.2913 0.844375 7.96842C0.797125 9.9643 2.22775 11.8315 4.29975 12.2472C3.69338 12.4117 3.02925 12.4502 2.35375 12.3207C2.9015 14.0322 4.49225 15.2773 6.37875 15.3123C4.5675 16.7324 2.2855 17.3668 0 17.0973C1.90662 18.3197 4.172 19.0328 6.6045 19.0328C14.6038 19.0328 19.1231 12.2769 18.8501 6.21755C19.6919 5.60942 20.4225 4.8508 21 3.98717V3.98717Z" fill="#808292"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="21" height="21" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 964 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M23 4.36709C22.1538 4.74276 21.2443 4.99575 20.2898 5.1098C21.2645 4.52617 22.0129 3.60138 22.3646 2.4993C21.4532 3.0398 20.4432 3.43271 19.3679 3.64451C18.5083 2.72738 17.2807 2.1543 15.9237 2.1543C12.8771 2.1543 10.6385 4.99671 11.3265 7.94742C7.406 7.75096 3.92917 5.87263 1.60137 3.01776C0.365125 5.13855 0.96025 7.91292 3.06092 9.31784C2.2885 9.29292 1.56017 9.08113 0.924792 8.7275C0.873042 10.9135 2.43992 12.9585 4.70925 13.4138C4.04512 13.5939 3.31775 13.6361 2.57792 13.4943C3.17783 15.3688 4.92008 16.7325 6.98625 16.7708C5.0025 18.3262 2.50317 19.021 0 18.7258C2.08821 20.0646 4.56933 20.8456 7.2335 20.8456C15.9946 20.8456 20.9444 13.4463 20.6454 6.80988C21.5673 6.14384 22.3675 5.31296 23 4.36709V4.36709Z" fill="#E88C21"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="23" height="23" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 976 B |
@@ -0,0 +1 @@
|
||||
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309534 2 2 12.309534 2 25 C 2 29.079097 3.1186875 32.88588 4.984375 36.208984 L 2.0371094 46.730469 A 1.0001 1.0001 0 0 0 3.2402344 47.970703 L 14.210938 45.251953 C 17.434629 46.972929 21.092591 48 25 48 C 37.690466 48 48 37.690466 48 25 C 48 12.309534 37.690466 2 25 2 z M 25 4 C 36.609534 4 46 13.390466 46 25 C 46 36.609534 36.609534 46 25 46 C 21.278025 46 17.792121 45.029635 14.761719 43.333984 A 1.0001 1.0001 0 0 0 14.033203 43.236328 L 4.4257812 45.617188 L 7.0019531 36.425781 A 1.0001 1.0001 0 0 0 6.9023438 35.646484 C 5.0606869 32.523592 4 28.890107 4 25 C 4 13.390466 13.390466 4 25 4 z M 16.642578 13 C 16.001539 13 15.086045 13.23849 14.333984 14.048828 C 13.882268 14.535548 12 16.369511 12 19.59375 C 12 22.955271 14.331391 25.855848 14.613281 26.228516 L 14.615234 26.228516 L 14.615234 26.230469 C 14.588494 26.195329 14.973031 26.752191 15.486328 27.419922 C 15.999626 28.087653 16.717405 28.96464 17.619141 29.914062 C 19.422612 31.812909 21.958282 34.007419 25.105469 35.349609 C 26.554789 35.966779 27.698179 36.339417 28.564453 36.611328 C 30.169845 37.115426 31.632073 37.038799 32.730469 36.876953 C 33.55263 36.755876 34.456878 36.361114 35.351562 35.794922 C 36.246248 35.22873 37.12309 34.524722 37.509766 33.455078 C 37.786772 32.688244 37.927591 31.979598 37.978516 31.396484 C 38.003976 31.104927 38.007211 30.847602 37.988281 30.609375 C 37.969311 30.371148 37.989581 30.188664 37.767578 29.824219 C 37.302009 29.059804 36.774753 29.039853 36.224609 28.767578 C 35.918939 28.616297 35.048661 28.191329 34.175781 27.775391 C 33.303883 27.35992 32.54892 26.991953 32.083984 26.826172 C 31.790239 26.720488 31.431556 26.568352 30.914062 26.626953 C 30.396569 26.685553 29.88546 27.058933 29.587891 27.5 C 29.305837 27.918069 28.170387 29.258349 27.824219 29.652344 C 27.819619 29.649544 27.849659 29.663383 27.712891 29.595703 C 27.284761 29.383815 26.761157 29.203652 25.986328 28.794922 C 25.2115 28.386192 24.242255 27.782635 23.181641 26.847656 L 23.181641 26.845703 C 21.603029 25.455949 20.497272 23.711106 20.148438 23.125 C 20.171937 23.09704 20.145643 23.130901 20.195312 23.082031 L 20.197266 23.080078 C 20.553781 22.728924 20.869739 22.309521 21.136719 22.001953 C 21.515257 21.565866 21.68231 21.181437 21.863281 20.822266 C 22.223954 20.10644 22.02313 19.318742 21.814453 18.904297 L 21.814453 18.902344 C 21.828863 18.931014 21.701572 18.650157 21.564453 18.326172 C 21.426943 18.001263 21.251663 17.580039 21.064453 17.130859 C 20.690033 16.232501 20.272027 15.224912 20.023438 14.634766 L 20.023438 14.632812 C 19.730591 13.937684 19.334395 13.436908 18.816406 13.195312 C 18.298417 12.953717 17.840778 13.022402 17.822266 13.021484 L 17.820312 13.021484 C 17.450668 13.004432 17.045038 13 16.642578 13 z M 16.642578 15 C 17.028118 15 17.408214 15.004701 17.726562 15.019531 C 18.054056 15.035851 18.033687 15.037192 17.970703 15.007812 C 17.906713 14.977972 17.993533 14.968282 18.179688 15.410156 C 18.423098 15.98801 18.84317 16.999249 19.21875 17.900391 C 19.40654 18.350961 19.582292 18.773816 19.722656 19.105469 C 19.863021 19.437122 19.939077 19.622295 20.027344 19.798828 L 20.027344 19.800781 L 20.029297 19.802734 C 20.115837 19.973483 20.108185 19.864164 20.078125 19.923828 C 19.867096 20.342656 19.838461 20.445493 19.625 20.691406 C 19.29998 21.065838 18.968453 21.483404 18.792969 21.65625 C 18.639439 21.80707 18.36242 22.042032 18.189453 22.501953 C 18.016221 22.962578 18.097073 23.59457 18.375 24.066406 C 18.745032 24.6946 19.964406 26.679307 21.859375 28.347656 C 23.05276 29.399678 24.164563 30.095933 25.052734 30.564453 C 25.940906 31.032973 26.664301 31.306607 26.826172 31.386719 C 27.210549 31.576953 27.630655 31.72467 28.119141 31.666016 C 28.607627 31.607366 29.02878 31.310979 29.296875 31.007812 L 29.298828 31.005859 C 29.655629 30.601347 30.715848 29.390728 31.224609 28.644531 C 31.246169 28.652131 31.239109 28.646231 31.408203 28.707031 L 31.408203 28.708984 L 31.410156 28.708984 C 31.487356 28.736474 32.454286 29.169267 33.316406 29.580078 C 34.178526 29.990889 35.053561 30.417875 35.337891 30.558594 C 35.748225 30.761674 35.942113 30.893881 35.992188 30.894531 C 35.995572 30.982516 35.998992 31.07786 35.986328 31.222656 C 35.951258 31.624292 35.8439 32.180225 35.628906 32.775391 C 35.523582 33.066746 34.975018 33.667661 34.283203 34.105469 C 33.591388 34.543277 32.749338 34.852514 32.4375 34.898438 C 31.499896 35.036591 30.386672 35.087027 29.164062 34.703125 C 28.316336 34.437036 27.259305 34.092596 25.890625 33.509766 C 23.114812 32.325956 20.755591 30.311513 19.070312 28.537109 C 18.227674 27.649908 17.552562 26.824019 17.072266 26.199219 C 16.592866 25.575584 16.383528 25.251054 16.208984 25.021484 L 16.207031 25.019531 C 15.897202 24.609805 14 21.970851 14 19.59375 C 14 17.077989 15.168497 16.091436 15.800781 15.410156 C 16.132721 15.052495 16.495617 15 16.642578Line truncated
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1,722 @@
|
||||
var flowy = function (canvas, grab, release, snapping, rearrange, spacing_x, spacing_y) {
|
||||
try {
|
||||
if (!grab) {
|
||||
grab = function () { };
|
||||
}
|
||||
if (!release) {
|
||||
release = function () { };
|
||||
}
|
||||
if (!snapping) {
|
||||
snapping = function () {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (!rearrange) {
|
||||
rearrange = function () {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (!spacing_x) {
|
||||
spacing_x = 20;
|
||||
}
|
||||
if (!spacing_y) {
|
||||
spacing_y = 80;
|
||||
}
|
||||
if (!Element.prototype.matches) {
|
||||
|
||||
Element.prototype.matches = Element.prototype.msMatchesSelector ||
|
||||
Element.prototype.webkitMatchesSelector;
|
||||
}
|
||||
if (!Element.prototype.closest) {
|
||||
|
||||
Element.prototype.closest = function (s) {
|
||||
var el = this;
|
||||
do {
|
||||
if (Element.prototype.matches.call(el, s)) return el;
|
||||
el = el.parentElement || el.parentNode;
|
||||
} while (el !== null && el.nodeType === 1);
|
||||
return null;
|
||||
};
|
||||
}
|
||||
var loaded = false;
|
||||
flowy.load = function () {
|
||||
if (!loaded)
|
||||
loaded = true;
|
||||
else
|
||||
return;
|
||||
var blocks = [];
|
||||
var blockstemp = [];
|
||||
var canvas_div = canvas;
|
||||
var absx = 0;
|
||||
var absy = 0;
|
||||
if (window.getComputedStyle(canvas_div).position == "absolute" || window.getComputedStyle(canvas_div).position == "fixed") {
|
||||
absx = canvas_div.getBoundingClientRect().left;
|
||||
absy = canvas_div.getBoundingClientRect().top;
|
||||
}
|
||||
var active = false;
|
||||
var paddingx = spacing_x;
|
||||
var paddingy = spacing_y;
|
||||
var offsetleft = 0;
|
||||
var rearrange = false;
|
||||
var drag, dragx, dragy, original;
|
||||
var mouse_x, mouse_y;
|
||||
var dragblock = false;
|
||||
var prevblock = 0;
|
||||
var el = document.createElement("DIV");
|
||||
el.classList.add('indicator');
|
||||
el.classList.add('invisible');
|
||||
canvas_div.appendChild(el);
|
||||
flowy.import = function (output) {
|
||||
debugger
|
||||
canvas_div.innerHTML = output.html;
|
||||
for (var a = 0; a < output.blockarr.length; a++) {
|
||||
blocks.push({
|
||||
childwidth: parseFloat(output.blockarr[a].childwidth),
|
||||
parent: parseFloat(output.blockarr[a].parent),
|
||||
id: parseFloat(output.blockarr[a].id),
|
||||
x: parseFloat(output.blockarr[a].x),
|
||||
y: parseFloat(output.blockarr[a].y),
|
||||
width: parseFloat(output.blockarr[a].width),
|
||||
height: parseFloat(output.blockarr[a].height)
|
||||
})
|
||||
}
|
||||
if (blocks.length > 1) {
|
||||
rearrangeMe();
|
||||
checkOffset();
|
||||
}
|
||||
}
|
||||
flowy.output = function () {
|
||||
var html_ser = canvas_div.innerHTML;
|
||||
var json_data = {
|
||||
html: html_ser,
|
||||
blockarr: blocks,
|
||||
blocks: []
|
||||
};
|
||||
if (blocks.length > 0) {
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
json_data.blocks.push({
|
||||
id: blocks[i].id,
|
||||
parent: blocks[i].parent,
|
||||
data: [],
|
||||
attr: []
|
||||
});
|
||||
var blockParent = document.querySelector(".blockid[value='" + blocks[i].id + "']").parentNode;
|
||||
blockParent.querySelectorAll("input").forEach(function (block) {
|
||||
var json_name = block.getAttribute("name");
|
||||
var json_value = block.value;
|
||||
json_data.blocks[i].data.push({
|
||||
name: json_name,
|
||||
value: json_value
|
||||
});
|
||||
});
|
||||
//Customized To Get Block Id of Class .blockyinfo
|
||||
blockParent.querySelectorAll(".blockyinfo").forEach(function (block) {
|
||||
var json_name = block.innerHTML;
|
||||
var json_value = block.id;
|
||||
json_data.blocks[i].data.push({
|
||||
name: json_name,
|
||||
value: json_value
|
||||
});
|
||||
});
|
||||
Array.prototype.slice.call(blockParent.attributes).forEach(function (attribute) {
|
||||
var jsonobj = {};
|
||||
jsonobj[attribute.name] = attribute.value;
|
||||
json_data.blocks[i].attr.push(jsonobj);
|
||||
});
|
||||
}
|
||||
return json_data;
|
||||
}
|
||||
}
|
||||
//flowy.deleteBlocks = function () {
|
||||
// blocks = [];
|
||||
// canvas_div.innerHTML = "<div class='indicator invisible'></div>";
|
||||
//}
|
||||
flowy.deleteBlock = function (id, removeChildren) {
|
||||
//Track orginal parent
|
||||
let newParentId;
|
||||
|
||||
if (!Number.isInteger(id)) {
|
||||
id = parseInt(id);
|
||||
}
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
if (blocks[i].id === id) {
|
||||
newParentId = blocks[i].parent;
|
||||
removeBlockEls(blocks[i].id, blocks[i].parent);
|
||||
blocks.splice(i, 1);
|
||||
modifyChildBlocks(id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
rearrangeMe();
|
||||
function modifyChildBlocks(parentId) {
|
||||
let children = [];
|
||||
for (var i = blocks.length - 1; i >= 0; i--) {
|
||||
if (blocks[i].parent === parentId) {
|
||||
children.push(blocks[i].id);
|
||||
if (removeChildren === true) {
|
||||
removeBlockEls(blocks[i].id, blocks[i].parent);
|
||||
blocks.splice(i, 1);
|
||||
} else {
|
||||
blocks[i].parent = newParentId;
|
||||
rearrange = true;
|
||||
document.querySelector(".arrowid[value='" + blocks[i].id + "']").parentNode.remove();
|
||||
blockstemp = [];
|
||||
blockstemp.push(blocks.filter(a => a.id == blocks[i].id)[0]);
|
||||
snap(document.querySelector(".blockid[value='" + blocks[i].id + "']").parentNode, newParentId, blocks.map(a => a.id));
|
||||
rearrange = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Only call repeat of function if removing children
|
||||
if (removeChildren === true) {
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
modifyChildBlocks(children[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
function removeBlockEls(id, parentid) {
|
||||
if (parentid == -1) {
|
||||
document.querySelector(".blockid[value='" + id + "']").parentNode.remove();
|
||||
}
|
||||
else {
|
||||
document.querySelector(".blockid[value='" + id + "']").parentNode.remove();
|
||||
document.querySelector(".arrowid[value='" + id + "']").parentNode.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
flowy.beginDrag = function (event) {
|
||||
if (window.getComputedStyle(canvas_div).position == "absolute" || window.getComputedStyle(canvas_div).position == "fixed") {
|
||||
absx = canvas_div.getBoundingClientRect().left;
|
||||
absy = canvas_div.getBoundingClientRect().top;
|
||||
}
|
||||
if (event.targetTouches) {
|
||||
mouse_x = event.changedTouches[0].clientX;
|
||||
mouse_y = event.changedTouches[0].clientY;
|
||||
} else {
|
||||
mouse_x = event.clientX;
|
||||
mouse_y = event.clientY;
|
||||
}
|
||||
if (event.which != 3 && event.target.closest(".create-flowy")) {
|
||||
original = event.target.closest(".create-flowy");
|
||||
var newNode = event.target.closest(".create-flowy").cloneNode(true);
|
||||
event.target.closest(".create-flowy").classList.add("dragnow");
|
||||
newNode.classList.add("block");
|
||||
newNode.classList.remove("create-flowy");
|
||||
if (blocks.length === 0) {
|
||||
newNode.innerHTML += "<input type='hidden' name='blockid' class='blockid' value='" + blocks.length + "'>";
|
||||
//document.body.appendChild(newNode);
|
||||
$('._bizgaze_popup_container').append(newNode);
|
||||
drag = document.querySelector(".blockid[value='" + blocks.length + "']").parentNode;
|
||||
} else {
|
||||
newNode.innerHTML += "<input type='hidden' name='blockid' class='blockid' value='" + (Math.max.apply(Math, blocks.map(a => a.id)) + 1) + "'>";
|
||||
//document.body.appendChild(newNode);
|
||||
$('._bizgaze_popup_container').append(newNode);
|
||||
drag = document.querySelector(".blockid[value='" + (parseInt(Math.max.apply(Math, blocks.map(a => a.id))) + 1) + "']").parentNode;
|
||||
}
|
||||
blockGrabbed(event.target.closest(".create-flowy"));
|
||||
drag.classList.add("dragging");
|
||||
active = true;
|
||||
dragx = mouse_x - (event.target.closest(".create-flowy").getBoundingClientRect().left);
|
||||
dragy = mouse_y - (event.target.closest(".create-flowy").getBoundingClientRect().top);
|
||||
drag.style.left = mouse_x - dragx + "px";
|
||||
drag.style.top = mouse_y - dragy + "px";
|
||||
}
|
||||
}
|
||||
flowy.endDrag = function (event) {
|
||||
if (event.which != 3 && (active || rearrange)) {
|
||||
dragblock = false;
|
||||
blockReleased(event);
|
||||
if (!document.querySelector(".indicator").classList.contains("invisible")) {
|
||||
document.querySelector(".indicator").classList.add("invisible");
|
||||
}
|
||||
if (active) {
|
||||
original.classList.remove("dragnow");
|
||||
drag.classList.remove("dragging");
|
||||
}
|
||||
if (parseInt(drag.querySelector(".blockid").value) === 0 && rearrange) {
|
||||
firstBlock("rearrange")
|
||||
} else if (active && blocks.length == 0 && (drag.getBoundingClientRect().top + window.scrollY) > (canvas_div.getBoundingClientRect().top + window.scrollY) && (drag.getBoundingClientRect().left + window.scrollX) > (canvas_div.getBoundingClientRect().left + window.scrollX)) {
|
||||
firstBlock("drop");
|
||||
} else if (active && blocks.length == 0) {
|
||||
removeSelection();
|
||||
} else if (active) {
|
||||
var blocko = blocks.map(a => a.id);
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
if (checkAttach(blocko[i])) {
|
||||
active = false;
|
||||
if (blockSnap(drag, false, document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode)) {
|
||||
snap(drag, i, blocko);
|
||||
} else {
|
||||
active = false;
|
||||
removeSelection();
|
||||
}
|
||||
break;
|
||||
} else if (i == blocks.length - 1) {
|
||||
active = false;
|
||||
removeSelection();
|
||||
}
|
||||
}
|
||||
} else if (rearrange) {
|
||||
var blocko = blocks.map(a => a.id);
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
if (checkAttach(blocko[i])) {
|
||||
active = false;
|
||||
drag.classList.remove("dragging");
|
||||
snap(drag, i, blocko);
|
||||
break;
|
||||
} else if (i == blocks.length - 1) {
|
||||
if (beforeDelete(drag, blocks.filter(id => id.id == blocko[i])[0])) {
|
||||
active = false;
|
||||
drag.classList.remove("dragging");
|
||||
snap(drag, blocko.indexOf(prevblock), blocko);
|
||||
break;
|
||||
} else {
|
||||
rearrange = false;
|
||||
blockstemp = [];
|
||||
active = false;
|
||||
removeSelection();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
eval("bizgaze_automation_flow_main.Deleteblock()");
|
||||
}
|
||||
function checkAttach(id) {
|
||||
const xpos = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left;
|
||||
const ypos = (drag.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top;
|
||||
if (xpos >= blocks.filter(a => a.id == id)[0].x - (blocks.filter(a => a.id == id)[0].width / 2) - paddingx && xpos <= blocks.filter(a => a.id == id)[0].x + (blocks.filter(a => a.id == id)[0].width / 2) + paddingx && ypos >= blocks.filter(a => a.id == id)[0].y - (blocks.filter(a => a.id == id)[0].height / 2) && ypos <= blocks.filter(a => a.id == id)[0].y + blocks.filter(a => a.id == id)[0].height) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function removeSelection() {
|
||||
canvas_div.appendChild(document.querySelector(".indicator"));
|
||||
drag.parentNode.removeChild(drag);
|
||||
}
|
||||
function firstBlock(type) {
|
||||
if (type == "drop") {
|
||||
blockSnap(drag, true, undefined);
|
||||
active = false;
|
||||
drag.style.top = (drag.getBoundingClientRect().top + window.scrollY) - (absy + window.scrollY) + canvas_div.scrollTop + "px";
|
||||
drag.style.left = (drag.getBoundingClientRect().left + window.scrollX) - (absx + window.scrollX) + canvas_div.scrollLeft + "px";
|
||||
canvas_div.appendChild(drag);
|
||||
blocks.push({
|
||||
parent: -1,
|
||||
childwidth: 0,
|
||||
id: parseInt(drag.querySelector(".blockid").value),
|
||||
x: (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left,
|
||||
y: (drag.getBoundingClientRect().top + window.scrollY) + (parseInt(window.getComputedStyle(drag).height) / 2) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top,
|
||||
width: parseInt(window.getComputedStyle(drag).width),
|
||||
height: parseInt(window.getComputedStyle(drag).height)
|
||||
});
|
||||
} else if (type == "rearrange") {
|
||||
drag.classList.remove("dragging");
|
||||
rearrange = false;
|
||||
for (var w = 0; w < blockstemp.length; w++) {
|
||||
if (blockstemp[w].id != parseInt(drag.querySelector(".blockid").value)) {
|
||||
const blockParent = document.querySelector(".blockid[value='" + blockstemp[w].id + "']").parentNode;
|
||||
const arrowParent = document.querySelector(".arrowid[value='" + blockstemp[w].id + "']").parentNode;
|
||||
blockParent.style.left = (blockParent.getBoundingClientRect().left + window.scrollX) - (window.scrollX) + canvas_div.scrollLeft - 1 - absx + "px";
|
||||
blockParent.style.top = (blockParent.getBoundingClientRect().top + window.scrollY) - (window.scrollY) + canvas_div.scrollTop - absy - 1 + "px";
|
||||
arrowParent.style.left = (arrowParent.getBoundingClientRect().left + window.scrollX) - (window.scrollX) + canvas_div.scrollLeft - absx - 1 + "px";
|
||||
arrowParent.style.top = (arrowParent.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop - 1 - absy + "px";
|
||||
canvas_div.appendChild(blockParent);
|
||||
canvas_div.appendChild(arrowParent);
|
||||
blockstemp[w].x = (blockParent.getBoundingClientRect().left + window.scrollX) + (parseInt(blockParent.offsetWidth) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left - 1;
|
||||
blockstemp[w].y = (blockParent.getBoundingClientRect().top + window.scrollY) + (parseInt(blockParent.offsetHeight) / 2) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top - 1;
|
||||
}
|
||||
}
|
||||
blockstemp.filter(a => a.id == 0)[0].x = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left;
|
||||
blockstemp.filter(a => a.id == 0)[0].y = (drag.getBoundingClientRect().top + window.scrollY) + (parseInt(window.getComputedStyle(drag).height) / 2) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top;
|
||||
blocks = blocks.concat(blockstemp);
|
||||
blockstemp = [];
|
||||
}
|
||||
}
|
||||
function drawArrow(arrow, x, y, id) {
|
||||
if (x < 0) {
|
||||
canvas_div.innerHTML += '<div class="arrowblock"><input type="hidden" class="arrowid" value="' + drag.querySelector(".blockid").value + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M' + (blocks.filter(a => a.id == id)[0].x - arrow.x + 5) + ' 0L' + (blocks.filter(a => a.id == id)[0].x - arrow.x + 5) + ' ' + (paddingy / 2) + 'L5 ' + (paddingy / 2) + 'L5 ' + y + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M0 ' + (y - 5) + 'H10L5 ' + y + 'L0 ' + (y - 5) + 'Z" fill="#C5CCD0"/></svg></div>';
|
||||
document.querySelector('.arrowid[value="' + drag.querySelector(".blockid").value + '"]').parentNode.style.left = (arrow.x - 5) - (absx + window.scrollX) + canvas_div.scrollLeft + canvas_div.getBoundingClientRect().left + "px";
|
||||
} else {
|
||||
canvas_div.innerHTML += '<div class="arrowblock"><input type="hidden" class="arrowid" value="' + drag.querySelector(".blockid").value + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0L20 ' + (paddingy / 2) + 'L' + (x) + ' ' + (paddingy / 2) + 'L' + x + ' ' + y + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M' + (x - 5) + ' ' + (y - 5) + 'H' + (x + 5) + 'L' + x + ' ' + y + 'L' + (x - 5) + ' ' + (y - 5) + 'Z" fill="#C5CCD0"/></svg></div>';
|
||||
document.querySelector('.arrowid[value="' + parseInt(drag.querySelector(".blockid").value) + '"]').parentNode.style.left = blocks.filter(a => a.id == id)[0].x - 20 - (absx + window.scrollX) + canvas_div.scrollLeft + canvas_div.getBoundingClientRect().left + "px";
|
||||
}
|
||||
document.querySelector('.arrowid[value="' + parseInt(drag.querySelector(".blockid").value) + '"]').parentNode.style.top = blocks.filter(a => a.id == id)[0].y + (blocks.filter(a => a.id == id)[0].height / 2) + canvas_div.getBoundingClientRect().top - absy + "px";
|
||||
}
|
||||
function updateArrow(arrow, x, y, children) {
|
||||
if (x < 0) {
|
||||
document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.style.left = (arrow.x - 5) - (absx + window.scrollX) + canvas_div.getBoundingClientRect().left + "px";
|
||||
document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.innerHTML = '<input type="hidden" class="arrowid" value="' + children.id + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M' + (blocks.filter(id => id.id == children.parent)[0].x - arrow.x + 5) + ' 0L' + (blocks.filter(id => id.id == children.parent)[0].x - arrow.x + 5) + ' ' + (paddingy / 2) + 'L5 ' + (paddingy / 2) + 'L5 ' + y + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M0 ' + (y - 5) + 'H10L5 ' + y + 'L0 ' + (y - 5) + 'Z" fill="#C5CCD0"/></svg>';
|
||||
} else {
|
||||
document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.style.left = blocks.filter(id => id.id == children.parent)[0].x - 20 - (absx + window.scrollX) + canvas_div.getBoundingClientRect().left + "px";
|
||||
document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.innerHTML = '<input type="hidden" class="arrowid" value="' + children.id + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0L20 ' + (paddingy / 2) + 'L' + (x) + ' ' + (paddingy / 2) + 'L' + x + ' ' + y + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M' + (x - 5) + ' ' + (y - 5) + 'H' + (x + 5) + 'L' + x + ' ' + y + 'L' + (x - 5) + ' ' + (y - 5) + 'Z" fill="#C5CCD0"/></svg>';
|
||||
}
|
||||
}
|
||||
function snap(drag, i, blocko) {
|
||||
if (!rearrange) {
|
||||
canvas_div.appendChild(drag);
|
||||
}
|
||||
var totalwidth = 0;
|
||||
var totalremove = 0;
|
||||
var maxheight = 0;
|
||||
for (var w = 0; w < blocks.filter(id => id.parent == blocko[i]).length; w++) {
|
||||
var children = blocks.filter(id => id.parent == blocko[i])[w];
|
||||
if (children.childwidth > children.width) {
|
||||
totalwidth += children.childwidth + paddingx;
|
||||
} else {
|
||||
totalwidth += children.width + paddingx;
|
||||
}
|
||||
}
|
||||
totalwidth += parseInt(window.getComputedStyle(drag).width);
|
||||
for (var w = 0; w < blocks.filter(id => id.parent == blocko[i]).length; w++) {
|
||||
var children = blocks.filter(id => id.parent == blocko[i])[w];
|
||||
if (children.childwidth > children.width) {
|
||||
document.querySelector(".blockid[value='" + children.id + "']").parentNode.style.left = blocks.filter(a => a.id == blocko[i])[0].x - (totalwidth / 2) + totalremove + (children.childwidth / 2) - (children.width / 2) + "px";
|
||||
children.x = blocks.filter(id => id.parent == blocko[i])[0].x - (totalwidth / 2) + totalremove + (children.childwidth / 2);
|
||||
totalremove += children.childwidth + paddingx;
|
||||
} else {
|
||||
document.querySelector(".blockid[value='" + children.id + "']").parentNode.style.left = blocks.filter(a => a.id == blocko[i])[0].x - (totalwidth / 2) + totalremove + "px";
|
||||
children.x = blocks.filter(id => id.parent == blocko[i])[0].x - (totalwidth / 2) + totalremove + (children.width / 2);
|
||||
totalremove += children.width + paddingx;
|
||||
}
|
||||
}
|
||||
drag.style.left = blocks.filter(id => id.id == blocko[i])[0].x - (totalwidth / 2) + totalremove - (window.scrollX + absx) + canvas_div.scrollLeft + canvas_div.getBoundingClientRect().left + "px";
|
||||
drag.style.top = blocks.filter(id => id.id == blocko[i])[0].y + (blocks.filter(id => id.id == blocko[i])[0].height / 2) + paddingy - (window.scrollY + absy) + canvas_div.getBoundingClientRect().top + "px";
|
||||
if (rearrange) {
|
||||
blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value))[0].x = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left;
|
||||
blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value))[0].y = (drag.getBoundingClientRect().top + window.scrollY + absy) + (parseInt(window.getComputedStyle(drag).height) / 2) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top;
|
||||
blockstemp.filter(a => a.id == drag.querySelector(".blockid").value)[0].parent = blocko[i];
|
||||
for (var w = 0; w < blockstemp.length; w++) {
|
||||
if (blockstemp[w].id != parseInt(drag.querySelector(".blockid").value)) {
|
||||
const blockParent = document.querySelector(".blockid[value='" + blockstemp[w].id + "']").parentNode;
|
||||
const arrowParent = document.querySelector(".arrowid[value='" + blockstemp[w].id + "']").parentNode;
|
||||
blockParent.style.left = (blockParent.getBoundingClientRect().left + window.scrollX) - (window.scrollX + canvas_div.getBoundingClientRect().left) + canvas_div.scrollLeft + "px";
|
||||
blockParent.style.top = (blockParent.getBoundingClientRect().top + window.scrollY) - (window.scrollY + canvas_div.getBoundingClientRect().top) + canvas_div.scrollTop + "px";
|
||||
arrowParent.style.left = (arrowParent.getBoundingClientRect().left + window.scrollX) - (window.scrollX + canvas_div.getBoundingClientRect().left) + canvas_div.scrollLeft + 20 + "px";
|
||||
arrowParent.style.top = (arrowParent.getBoundingClientRect().top + window.scrollY) - (window.scrollY + canvas_div.getBoundingClientRect().top) + canvas_div.scrollTop + "px";
|
||||
canvas_div.appendChild(blockParent);
|
||||
canvas_div.appendChild(arrowParent);
|
||||
|
||||
blockstemp[w].x = (blockParent.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(blockParent).width) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left;
|
||||
blockstemp[w].y = (blockParent.getBoundingClientRect().top + window.scrollY) + (parseInt(window.getComputedStyle(blockParent).height) / 2) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top;
|
||||
}
|
||||
}
|
||||
blocks = blocks.concat(blockstemp);
|
||||
blockstemp = [];
|
||||
} else {
|
||||
blocks.push({
|
||||
childwidth: 0,
|
||||
parent: blocko[i],
|
||||
id: parseInt(drag.querySelector(".blockid").value),
|
||||
x: (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left,
|
||||
y: (drag.getBoundingClientRect().top + window.scrollY) + (parseInt(window.getComputedStyle(drag).height) / 2) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top,
|
||||
width: parseInt(window.getComputedStyle(drag).width),
|
||||
height: parseInt(window.getComputedStyle(drag).height)
|
||||
});
|
||||
}
|
||||
var arrowblock = blocks.filter(a => a.id == parseInt(drag.querySelector(".blockid").value))[0];
|
||||
var arrowx = arrowblock.x - blocks.filter(a => a.id == blocko[i])[0].x + 20;
|
||||
var arrowy = paddingy;
|
||||
drawArrow(arrowblock, arrowx, arrowy, blocko[i]);
|
||||
if (blocks.filter(a => a.id == blocko[i])[0].parent != -1) {
|
||||
var flag = false;
|
||||
var idval = blocko[i];
|
||||
while (!flag) {
|
||||
if (blocks.filter(a => a.id == idval)[0].parent == -1) {
|
||||
flag = true;
|
||||
} else {
|
||||
var zwidth = 0;
|
||||
for (var w = 0; w < blocks.filter(id => id.parent == idval).length; w++) {
|
||||
var children = blocks.filter(id => id.parent == idval)[w];
|
||||
if (children.childwidth > children.width) {
|
||||
if (w == blocks.filter(id => id.parent == idval).length - 1) {
|
||||
zwidth += children.childwidth;
|
||||
} else {
|
||||
zwidth += children.childwidth + paddingx;
|
||||
}
|
||||
} else {
|
||||
if (w == blocks.filter(id => id.parent == idval).length - 1) {
|
||||
zwidth += children.width;
|
||||
} else {
|
||||
zwidth += children.width + paddingx;
|
||||
}
|
||||
}
|
||||
}
|
||||
blocks.filter(a => a.id == idval)[0].childwidth = zwidth;
|
||||
idval = blocks.filter(a => a.id == idval)[0].parent;
|
||||
}
|
||||
}
|
||||
blocks.filter(id => id.id == idval)[0].childwidth = totalwidth;
|
||||
}
|
||||
if (rearrange) {
|
||||
rearrange = false;
|
||||
drag.classList.remove("dragging");
|
||||
}
|
||||
rearrangeMe();
|
||||
checkOffset();
|
||||
}
|
||||
function touchblock(event) {
|
||||
dragblock = false;
|
||||
if (hasParentClass(event.target, "block")) {
|
||||
var theblock = event.target.closest(".block");
|
||||
if (event.targetTouches) {
|
||||
mouse_x = event.targetTouches[0].clientX;
|
||||
mouse_y = event.targetTouches[0].clientY;
|
||||
} else {
|
||||
mouse_x = event.clientX;
|
||||
mouse_y = event.clientY;
|
||||
}
|
||||
if (event.type !== "mouseup" && hasParentClass(event.target, "block")) {
|
||||
if (event.which != 3) {
|
||||
if (!active && !rearrange) {
|
||||
dragblock = true;
|
||||
drag = theblock;
|
||||
dragx = mouse_x - (drag.getBoundingClientRect().left + window.scrollX);
|
||||
dragy = mouse_y - (drag.getBoundingClientRect().top + window.scrollY);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function hasParentClass(element, classname) {
|
||||
if (element.className) {
|
||||
if (element.className.split(' ').indexOf(classname) >= 0) return true;
|
||||
}
|
||||
return element.parentNode && hasParentClass(element.parentNode, classname);
|
||||
}
|
||||
flowy.moveBlock = function (event) {
|
||||
if (event.targetTouches) {
|
||||
mouse_x = event.targetTouches[0].clientX;
|
||||
mouse_y = event.targetTouches[0].clientY;
|
||||
} else {
|
||||
mouse_x = event.clientX;
|
||||
mouse_y = event.clientY;
|
||||
}
|
||||
if (dragblock) {
|
||||
rearrange = true;
|
||||
drag.classList.add("dragging");
|
||||
var blockid = parseInt(drag.querySelector(".blockid").value);
|
||||
prevblock = blocks.filter(a => a.id == blockid)[0].parent;
|
||||
blockstemp.push(blocks.filter(a => a.id == blockid)[0]);
|
||||
blocks = blocks.filter(function (e) {
|
||||
return e.id != blockid
|
||||
});
|
||||
if (blockid != 0) {
|
||||
document.querySelector(".arrowid[value='" + blockid + "']").parentNode.remove();
|
||||
}
|
||||
var layer = blocks.filter(a => a.parent == blockid);
|
||||
var flag = false;
|
||||
var foundids = [];
|
||||
var allids = [];
|
||||
while (!flag) {
|
||||
for (var i = 0; i < layer.length; i++) {
|
||||
if (layer[i] != blockid) {
|
||||
blockstemp.push(blocks.filter(a => a.id == layer[i].id)[0]);
|
||||
const blockParent = document.querySelector(".blockid[value='" + layer[i].id + "']").parentNode;
|
||||
const arrowParent = document.querySelector(".arrowid[value='" + layer[i].id + "']").parentNode;
|
||||
blockParent.style.left = (blockParent.getBoundingClientRect().left + window.scrollX) - (drag.getBoundingClientRect().left + window.scrollX) + "px";
|
||||
blockParent.style.top = (blockParent.getBoundingClientRect().top + window.scrollY) - (drag.getBoundingClientRect().top + window.scrollY) + "px";
|
||||
arrowParent.style.left = (arrowParent.getBoundingClientRect().left + window.scrollX) - (drag.getBoundingClientRect().left + window.scrollX) + "px";
|
||||
arrowParent.style.top = (arrowParent.getBoundingClientRect().top + window.scrollY) - (drag.getBoundingClientRect().top + window.scrollY) + "px";
|
||||
drag.appendChild(blockParent);
|
||||
drag.appendChild(arrowParent);
|
||||
foundids.push(layer[i].id);
|
||||
allids.push(layer[i].id);
|
||||
}
|
||||
}
|
||||
if (foundids.length == 0) {
|
||||
flag = true;
|
||||
} else {
|
||||
layer = blocks.filter(a => foundids.includes(a.parent));
|
||||
foundids = [];
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < blocks.filter(a => a.parent == blockid).length; i++) {
|
||||
var blocknumber = blocks.filter(a => a.parent == blockid)[i];
|
||||
blocks = blocks.filter(function (e) {
|
||||
return e.id != blocknumber
|
||||
});
|
||||
}
|
||||
for (var i = 0; i < allids.length; i++) {
|
||||
var blocknumber = allids[i];
|
||||
blocks = blocks.filter(function (e) {
|
||||
return e.id != blocknumber
|
||||
});
|
||||
}
|
||||
if (blocks.length > 1) {
|
||||
rearrangeMe();
|
||||
}
|
||||
dragblock = false;
|
||||
}
|
||||
if (active) {
|
||||
drag.style.left = mouse_x - dragx + "px";
|
||||
drag.style.top = mouse_y - dragy + "px";
|
||||
} else if (rearrange) {
|
||||
drag.style.left = mouse_x - dragx - (window.scrollX + absx) + canvas_div.scrollLeft + "px";
|
||||
drag.style.top = mouse_y - dragy - (window.scrollY + absy) + canvas_div.scrollTop + "px";
|
||||
blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value)).x = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft;
|
||||
blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value)).y = (drag.getBoundingClientRect().top + window.scrollY) + (parseInt(window.getComputedStyle(drag).height) / 2) + canvas_div.scrollTop;
|
||||
}
|
||||
if (active || rearrange) {
|
||||
if (mouse_x > canvas_div.getBoundingClientRect().width + canvas_div.getBoundingClientRect().left - 10 && mouse_x < canvas_div.getBoundingClientRect().width + canvas_div.getBoundingClientRect().left + 10) {
|
||||
canvas_div.scrollLeft += 10;
|
||||
} else if (mouse_x < canvas_div.getBoundingClientRect().left + 10 && mouse_x > canvas_div.getBoundingClientRect().left - 10) {
|
||||
canvas_div.scrollLeft -= 10;
|
||||
} else if (mouse_y > canvas_div.getBoundingClientRect().height + canvas_div.getBoundingClientRect().top - 10 && mouse_y < canvas_div.getBoundingClientRect().height + canvas_div.getBoundingClientRect().top + 10) {
|
||||
canvas_div.scrollTop += 10;
|
||||
} else if (mouse_y < canvas_div.getBoundingClientRect().top + 10 && mouse_y > canvas_div.getBoundingClientRect().top - 10) {
|
||||
canvas_div.scrollLeft -= 10;
|
||||
}
|
||||
var xpos = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft - canvas_div.getBoundingClientRect().left;
|
||||
var ypos = (drag.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop - canvas_div.getBoundingClientRect().top;
|
||||
var blocko = blocks.map(a => a.id);
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
if (checkAttach(blocko[i])) {
|
||||
document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode.appendChild(document.querySelector(".indicator"));
|
||||
document.querySelector(".indicator").style.left = (document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode.offsetWidth / 2) - 5 + "px";
|
||||
document.querySelector(".indicator").style.top = document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode.offsetHeight + "px";
|
||||
document.querySelector(".indicator").classList.remove("invisible");
|
||||
break;
|
||||
} else if (i == blocks.length - 1) {
|
||||
if (!document.querySelector(".indicator").classList.contains("invisible")) {
|
||||
document.querySelector(".indicator").classList.add("invisible");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function checkOffset() {
|
||||
offsetleft = blocks.map(a => a.x);
|
||||
var widths = blocks.map(a => a.width);
|
||||
var mathmin = offsetleft.map(function (item, index) {
|
||||
return item - (widths[index] / 2);
|
||||
})
|
||||
offsetleft = Math.min.apply(Math, mathmin);
|
||||
if (offsetleft < (canvas_div.getBoundingClientRect().left + window.scrollX - absx)) {
|
||||
var blocko = blocks.map(a => a.id);
|
||||
for (var w = 0; w < blocks.length; w++) {
|
||||
document.querySelector(".blockid[value='" + blocks.filter(a => a.id == blocko[w])[0].id + "']").parentNode.style.left = blocks.filter(a => a.id == blocko[w])[0].x - (blocks.filter(a => a.id == blocko[w])[0].width / 2) - offsetleft + canvas_div.getBoundingClientRect().left - absx + 20 + "px";
|
||||
if (blocks.filter(a => a.id == blocko[w])[0].parent != -1) {
|
||||
var arrowblock = blocks.filter(a => a.id == blocko[w])[0];
|
||||
var arrowx = arrowblock.x - blocks.filter(a => a.id == blocks.filter(a => a.id == blocko[w])[0].parent)[0].x;
|
||||
if (arrowx < 0) {
|
||||
document.querySelector('.arrowid[value="' + blocko[w] + '"]').parentNode.style.left = (arrowblock.x - offsetleft + 20 - 5) + canvas_div.getBoundingClientRect().left - absx + "px";
|
||||
} else {
|
||||
document.querySelector('.arrowid[value="' + blocko[w] + '"]').parentNode.style.left = blocks.filter(id => id.id == blocks.filter(a => a.id == blocko[w])[0].parent)[0].x - 20 - offsetleft + canvas_div.getBoundingClientRect().left - absx + 20 + "px";
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var w = 0; w < blocks.length; w++) {
|
||||
blocks[w].x = (document.querySelector(".blockid[value='" + blocks[w].id + "']").parentNode.getBoundingClientRect().left + window.scrollX) + (canvas_div.scrollLeft) + (parseInt(window.getComputedStyle(document.querySelector(".blockid[value='" + blocks[w].id + "']").parentNode).width) / 2) - 20 - canvas_div.getBoundingClientRect().left;
|
||||
}
|
||||
}
|
||||
}
|
||||
function rearrangeMe() {
|
||||
var result = blocks.map(a => a.parent);
|
||||
for (var z = 0; z < result.length; z++) {
|
||||
if (result[z] == -1) {
|
||||
z++;
|
||||
}
|
||||
var totalwidth = 0;
|
||||
var totalremove = 0;
|
||||
var maxheight = 0;
|
||||
for (var w = 0; w < blocks.filter(id => id.parent == result[z]).length; w++) {
|
||||
var children = blocks.filter(id => id.parent == result[z])[w];
|
||||
if (blocks.filter(id => id.parent == children.id).length == 0) {
|
||||
children.childwidth = 0;
|
||||
}
|
||||
if (children.childwidth > children.width) {
|
||||
if (w == blocks.filter(id => id.parent == result[z]).length - 1) {
|
||||
totalwidth += children.childwidth;
|
||||
} else {
|
||||
totalwidth += children.childwidth + paddingx;
|
||||
}
|
||||
} else {
|
||||
if (w == blocks.filter(id => id.parent == result[z]).length - 1) {
|
||||
totalwidth += children.width;
|
||||
} else {
|
||||
totalwidth += children.width + paddingx;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (result[z] != -1) {
|
||||
blocks.filter(a => a.id == result[z])[0].childwidth = totalwidth;
|
||||
}
|
||||
for (var w = 0; w < blocks.filter(id => id.parent == result[z]).length; w++) {
|
||||
var children = blocks.filter(id => id.parent == result[z])[w];
|
||||
const r_block = document.querySelector(".blockid[value='" + children.id + "']").parentNode;
|
||||
const r_array = blocks.filter(id => id.id == result[z]);
|
||||
r_block.style.top = r_array.y + paddingy + canvas_div.getBoundingClientRect().top - absy + "px";
|
||||
r_array.y = r_array.y + paddingy;
|
||||
if (children.childwidth > children.width) {
|
||||
r_block.style.left = r_array[0].x - (totalwidth / 2) + totalremove + (children.childwidth / 2) - (children.width / 2) - (absx + window.scrollX) + canvas_div.getBoundingClientRect().left + "px";
|
||||
children.x = r_array[0].x - (totalwidth / 2) + totalremove + (children.childwidth / 2);
|
||||
totalremove += children.childwidth + paddingx;
|
||||
} else {
|
||||
r_block.style.left = r_array[0].x - (totalwidth / 2) + totalremove - (absx + window.scrollX) + canvas_div.getBoundingClientRect().left + "px";
|
||||
children.x = r_array[0].x - (totalwidth / 2) + totalremove + (children.width / 2);
|
||||
totalremove += children.width + paddingx;
|
||||
}
|
||||
var arrowblock = blocks.filter(a => a.id == children.id)[0];
|
||||
var arrowx = arrowblock.x - blocks.filter(a => a.id == children.parent)[0].x + 20;
|
||||
var arrowy = paddingy;
|
||||
updateArrow(arrowblock, arrowx, arrowy, children);
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", flowy.beginDrag);
|
||||
document.addEventListener("mousedown", touchblock, false);
|
||||
document.addEventListener("touchstart", flowy.beginDrag);
|
||||
document.addEventListener("touchstart", touchblock, false);
|
||||
document.addEventListener("mouseup", touchblock, false);
|
||||
document.addEventListener("mousemove", flowy.moveBlock, false);
|
||||
document.addEventListener("touchmove", flowy.moveBlock, false);
|
||||
document.addEventListener("mouseup", flowy.endDrag, false);
|
||||
document.addEventListener("touchend", flowy.endDrag, false);
|
||||
flowy.remove = function () {
|
||||
document.removeEventListener("touchstart", touchblock, false);
|
||||
document.removeEventListener("mouseup", touchblock, false);
|
||||
document.removeEventListener("mousedown", touchblock, false);
|
||||
}
|
||||
}
|
||||
function blockGrabbed(block) {
|
||||
grab(block);
|
||||
}
|
||||
function blockReleased(event) {
|
||||
release(event);
|
||||
}
|
||||
function blockSnap(drag, first, parent) {
|
||||
return snapping(drag, first, parent);
|
||||
}
|
||||
function beforeDelete(drag, parent) {
|
||||
return rearrange(drag, parent);
|
||||
}
|
||||
function addEventListenerMulti(type, listener, capture, selector) {
|
||||
var nodes = document.querySelectorAll(selector);
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].addEventListener(type, listener, capture);
|
||||
}
|
||||
}
|
||||
function removeEventListenerMulti(type, listener, capture, selector) {
|
||||
var nodes = document.querySelectorAll(selector);
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].removeEventListener(type, listener, capture);
|
||||
}
|
||||
}
|
||||
flowy.load();
|
||||
flowy.destroy = function () {
|
||||
document.removeEventListener("mousedown", flowy.beginDrag);
|
||||
document.removeEventListener("touchstart", flowy.beginDrag);
|
||||
document.removeEventListener("mousemove", flowy.moveBlock, false);
|
||||
document.removeEventListener("touchmove", flowy.moveBlock, false);
|
||||
document.removeEventListener("mouseup", flowy.endDrag, false);
|
||||
document.removeEventListener("touchend", flowy.endDrag, false);
|
||||
eval("flowy.remove()");
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
flowy.destroy();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.dragging {z-index: 111 !important}.block {position: absolute;z-index: 9}.indicator {width: 12px;height: 12px;border-radius: 60px;background-color: #217ce8;margin-top: -5px;opacity: 1;transition: all .3s cubic-bezier(.05,.03,.35,1);transform: scale(1);position: absolute;z-index: 2}.invisible {opacity: 0 !important;transform: scale(0)}.indicator:after {content: "";display: block;width: 12px;height: 12px;background-color: #217ce8;transform: scale(1.7);opacity: .2;border-radius: 60px}.arrowblock {position: absolute;width: 100%;overflow: visible;pointer-events: none}.arrowblock svg {width: -webkit-fill-available;overflow: visible;}
|
||||
@@ -0,0 +1 @@
|
||||
var flowy = function (e, t, l, i, n, o, r) { t || (t = function () { }), l || (l = function () { }), i || (i = function () { return !0 }), n || (n = function () { return !1 }), o || (o = 20), r || (r = 80), Element.prototype.matches || (Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector), Element.prototype.closest || (Element.prototype.closest = function (e) { var t = this; do { if (Element.prototype.matches.call(t, e)) return t; t = t.parentElement || t.parentNode } while (null !== t && 1 === t.nodeType); return null }); var d = !1; function c(e, t, l) { return i(e, t, l) } function a(e, t) { return n(e, t) } flowy.load = function () { if (!d) { d = !0; var i = [], n = [], s = e, u = 0, p = 0; "absolute" != window.getComputedStyle(s).position && "fixed" != window.getComputedStyle(s).position || (u = s.getBoundingClientRect().left, p = s.getBoundingClientRect().top); var g, w, f, h, y, C, v = !1, m = o, B = r, x = 0, R = !1, S = !1, b = 0, L = document.createElement("DIV"); L.classList.add("indicator"), L.classList.add("invisible"), s.appendChild(L), flowy.import = function (e) { s.innerHTML = e.html; for (var t = 0; t < e.blockarr.length; t++)i.push({ childwidth: parseFloat(e.blockarr[t].childwidth), parent: parseFloat(e.blockarr[t].parent), id: parseFloat(e.blockarr[t].id), x: parseFloat(e.blockarr[t].x), y: parseFloat(e.blockarr[t].y), width: parseFloat(e.blockarr[t].width), height: parseFloat(e.blockarr[t].height) }); i.length > 1 && (D(), E()) }, flowy.output = function () { var e = { html: s.innerHTML, blockarr: i, blocks: [] }; if (i.length > 0) { for (var t = 0; t < i.length; t++) { e.blocks.push({ id: i[t].id, parent: i[t].parent, data: [], attr: [] }); var l = document.querySelector(".blockid[value='" + i[t].id + "']").parentNode; l.querySelectorAll("input").forEach(function (l) { var i = l.getAttribute("name"), n = l.value; e.blocks[t].data.push({ name: i, value: n }) }), Array.prototype.slice.call(l.attributes).forEach(function (l) { var i = {}; i[l.name] = l.value, e.blocks[t].attr.push(i) }) } return e } }, flowy.deleteBlocks = function () { i = [], s.innerHTML = "<div class='indicator invisible'></div>" }, flowy.beginDrag = function (e) { if ("absolute" != window.getComputedStyle(s).position && "fixed" != window.getComputedStyle(s).position || (u = s.getBoundingClientRect().left, p = s.getBoundingClientRect().top), e.targetTouches ? (y = e.changedTouches[0].clientX, C = e.changedTouches[0].clientY) : (y = e.clientX, C = e.clientY), 3 != e.which && e.target.closest(".create-flowy")) { h = e.target.closest(".create-flowy"); var l = e.target.closest(".create-flowy").cloneNode(!0); e.target.closest(".create-flowy").classList.add("dragnow"), l.classList.add("block"), l.classList.remove("create-flowy"), 0 === i.length ? (l.innerHTML += "<input type='hidden' name='blockid' class='blockid' value='" + i.length + "'>", document.body.appendChild(l), g = document.querySelector(".blockid[value='" + i.length + "']").parentNode) : (l.innerHTML += "<input type='hidden' name='blockid' class='blockid' value='" + (Math.max.apply(Math, i.map(e => e.id)) + 1) + "'>", document.body.appendChild(l), g = document.querySelector(".blockid[value='" + (parseInt(Math.max.apply(Math, i.map(e => e.id))) + 1) + "']").parentNode), n = e.target.closest(".create-flowy"), t(n), g.classList.add("dragging"), v = !0, w = y - e.target.closest(".create-flowy").getBoundingClientRect().left, f = C - e.target.closest(".create-flowy").getBoundingClientRect().top, g.style.left = y - w + "px", g.style.top = C - f + "px" } var n }, flowy.endDrag = function (e) { if (3 != e.which && (v || R)) if (S = !1, l(), document.querySelector(".indicator").classList.contains("invisible") || document.querySelector(".indicator").classList.add("invisible"), v && (h.classList.remove("dragnow"), g.classList.remove("dragging")), 0 === parseInt(g.querySelector(".blockid").value) && R) X("rearrange"); else if (v && 0 == i.length && g.getBoundingClientRect().top + window.scrollY > s.getBoundingClientRect().top + window.scrollY && g.getBoundingClientRect().left + window.scrollX > s.getBoundingClientRect().left + window.scrollX) X("drop"); else if (v && 0 == i.length) q(); else if (v) for (var t = i.map(e => e.id), o = 0; o < i.length; o++) { if (k(t[o])) { v = !1, c(g, !1, document.querySelector(".blockid[value='" + t[o] + "']").parentNode) ? T(g, o, t) : (v = !1, q()); break } o == i.length - 1 && (v = !1, q()) } else if (R) for (t = i.map(e => e.id), o = 0; o < i.length; o++) { if (k(t[o])) { v = !1, g.classList.remove("dragging"), T(g, o, t); break } if (o == i.length - 1) { if (a(g, i.filter(e => e.id == t[o])[0])) { v = !1, g.classList.remove("dragging"), T(g, t.indexOf(b), t); break } R = !1, n = [], v = !1, q(); break } } }, flowy.moveBlock = function (e) { if (e.targetTouches ? (y = e.targetTouches[0].clientX, C = e.targetTouches[0].clientY) : (y = e.clientX, C = e.clientY), S) { R = !0, g.classLisLine truncated
|
||||
@@ -0,0 +1,640 @@
|
||||
body, html {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
background-image: url(assets/tile.png);
|
||||
background-repeat: repeat;
|
||||
background-size: 30px 30px;
|
||||
background-color: #FBFBFB;
|
||||
height: 100%;
|
||||
}
|
||||
#navigation {
|
||||
height: 71px;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #E8E8EF;
|
||||
width: 100%;
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 9
|
||||
}
|
||||
#back {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
background-color: #F1F4FC;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 12px;
|
||||
margin-right: 10px
|
||||
}
|
||||
#back img {
|
||||
margin-top: 13px;
|
||||
}
|
||||
#names {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
#title {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #393C44;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#subtitle {
|
||||
font-family: Roboto;
|
||||
color: #808292;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#leftside {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#centerswitch {
|
||||
position: absolute;
|
||||
width: 222px;
|
||||
left: 50%;
|
||||
margin-left: -111px;
|
||||
top: 15px;
|
||||
}
|
||||
#leftswitch {
|
||||
border: 1px solid #E8E8EF;
|
||||
background-color: #FBFBFB;
|
||||
width: 111px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
font-family: Roboto;
|
||||
color: #393C44;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
#rightswitch {
|
||||
font-family: Roboto;
|
||||
color: #808292;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
border: 1px solid #E8E8EF;
|
||||
height: 39px;
|
||||
width: 102px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
margin-left: -5px;
|
||||
}
|
||||
#discard {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #A6A6B3;
|
||||
width: 95px;
|
||||
height: 38px;
|
||||
border: 1px solid #E8E8EF;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transition: all .2s cubic-bezier(.05,.03,.35,1);
|
||||
}
|
||||
#discard:hover {
|
||||
cursor: pointer;
|
||||
opacity: .7;
|
||||
}
|
||||
#publish {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #FFF;
|
||||
background-color: #217CE8;
|
||||
border-radius: 5px;
|
||||
width: 143px;
|
||||
height: 38px;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
margin-right: 20px;
|
||||
transition: all .2s cubic-bezier(.05,.03,.35,1);
|
||||
}
|
||||
#publish:hover {
|
||||
cursor: pointer;
|
||||
opacity: .7;
|
||||
}
|
||||
#buttonsright {
|
||||
float: right;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#leftcard {
|
||||
width: 363px;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #E8E8EF;
|
||||
box-sizing: border-box;
|
||||
padding-top: 85px;
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
#search input {
|
||||
width: 318px;
|
||||
height: 40px;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #E8E8EF;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 2px 8px rgba(34,34,87,0.05);
|
||||
border-radius: 5px;
|
||||
text-indent: 35px;
|
||||
font-family: Roboto;
|
||||
font-size: 16px;
|
||||
}
|
||||
::-webkit-input-placeholder { /* Edge */
|
||||
color: #C9C9D5;
|
||||
}
|
||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #C9C9D5
|
||||
}
|
||||
::placeholder {
|
||||
color: #C9C9D5;
|
||||
}
|
||||
#search img {
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
width: 18px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
#header {
|
||||
font-size: 20px;
|
||||
font-family: Roboto;
|
||||
font-weight: bold;
|
||||
color: #393C44;
|
||||
}
|
||||
#subnav {
|
||||
border-bottom: 1px solid #E8E8EF;
|
||||
width: calc(100% + 20px);
|
||||
margin-left: -20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.navdisabled {
|
||||
transition: all .3s cubic-bezier(.05,.03,.35,1);
|
||||
}
|
||||
.navdisabled:hover {
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
}
|
||||
.navactive {
|
||||
color: #393C44 !important;
|
||||
}
|
||||
#triggers {
|
||||
margin-left: 20px;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #808292;
|
||||
width: calc(88% / 3);
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
.navactive:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #217CE8;
|
||||
margin-top: -4px;
|
||||
}
|
||||
#actions {
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
color: #808292;
|
||||
font-size: 14px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
width: calc(88% / 3);
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
#loggers {
|
||||
width: calc(88% / 3);
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
color: #808292;
|
||||
font-size: 14px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
#footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding-left: 20px;
|
||||
line-height: 40px;
|
||||
bottom: 0;
|
||||
width: 362px;
|
||||
border: 1px solid #E8E8EF;
|
||||
height: 67px;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFF;
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
text-decoration: none;
|
||||
color: #393C44;
|
||||
transition: all .2s cubic-bezier(.05,.03,.35,1);
|
||||
}
|
||||
#footer a:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
#footer span {
|
||||
color: #808292;
|
||||
}
|
||||
#footer p {
|
||||
display: inline-block;
|
||||
color: #808292;
|
||||
}
|
||||
#footer img {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.blockelem:first-child {
|
||||
margin-top: 20px
|
||||
}
|
||||
.blockelem {
|
||||
padding-top: 10px;
|
||||
width: 318px;
|
||||
border: 1px solid transparent;
|
||||
transition-property: box-shadow, height;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: cubic-bezier(.05,.03,.35,1);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 30px rgba(22, 33, 74, 0);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.blockelem:hover {
|
||||
box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.08);
|
||||
border-radius: 5px;
|
||||
background-color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.grabme, .blockico {
|
||||
display: inline-block;
|
||||
}
|
||||
.grabme {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: -14px;
|
||||
width: 15px;
|
||||
}
|
||||
#blocklist {
|
||||
height: calc(100% - 220px);
|
||||
overflow: auto;
|
||||
float: left;
|
||||
}
|
||||
#proplist {
|
||||
height: calc(100% - 305px);
|
||||
overflow: auto;
|
||||
margin-top: -30px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.blockin {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.blockico {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: #F1F4FC;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.blockico span {
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.blockico img {
|
||||
vertical-align: middle;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
.blocktext {
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
vertical-align: top;
|
||||
margin-left: 12px
|
||||
}
|
||||
.blocktitle {
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #393C44;
|
||||
}
|
||||
.blockdesc {
|
||||
margin-top: 5px;
|
||||
font-family: Roboto;
|
||||
color: #808292;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.blockdisabled {
|
||||
background-color: #F0F2F9;
|
||||
opacity: .5;
|
||||
}
|
||||
#closecard {
|
||||
position: absolute;
|
||||
margin-left: 340px;
|
||||
background-color: #FFF;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
border-bottom: 1px solid #E8E8EF;
|
||||
border-right: 1px solid #E8E8EF;
|
||||
border-top: 1px solid #E8E8EF;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
#closecard img {
|
||||
margin-top: 15px
|
||||
}
|
||||
#canvas {
|
||||
position: absolute;
|
||||
width: calc(100% - 361px);
|
||||
height: calc(100% - 71px);
|
||||
top: 71px;
|
||||
left: 361px;
|
||||
z-index: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
#propwrap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 311px;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
overflow: hidden;
|
||||
z-index: -2;
|
||||
}
|
||||
#properties {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 311px;
|
||||
background-color: #FFF;
|
||||
right: -150px;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
top: 0px;
|
||||
box-shadow: -4px 0px 40px rgba(26, 26, 73, 0);
|
||||
padding-left: 20px;
|
||||
transition: all .25s cubic-bezier(.05,.03,.35,1);
|
||||
}
|
||||
.itson {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
.expanded {
|
||||
right: 0 !important;
|
||||
opacity: 1 !important;
|
||||
box-shadow: -4px 0px 40px rgba(26, 26, 73, 0.05);
|
||||
z-index: 2;
|
||||
}
|
||||
#header2 {
|
||||
font-size: 20px;
|
||||
font-family: Roboto;
|
||||
font-weight: bold;
|
||||
color: #393C44;
|
||||
margin-top: 101px;
|
||||
}
|
||||
#close {
|
||||
margin-top: 100px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
transition: all .25s cubic-bezier(.05,.03,.35,1);
|
||||
}
|
||||
#close:hover {
|
||||
cursor: pointer;
|
||||
opacity: .7;
|
||||
}
|
||||
#propswitch {
|
||||
border-bottom: 1px solid #E8E8EF;
|
||||
width: 331px;
|
||||
margin-top: 10px;
|
||||
margin-left: -20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#dataprop {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #393C44;
|
||||
width: calc(88% / 3);
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#dataprop:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #217CE8;
|
||||
margin-top: -4px;
|
||||
}
|
||||
#alertprop {
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
color: #808292;
|
||||
font-size: 14px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
width: calc(88% / 3);
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
#logsprop {
|
||||
width: calc(88% / 3);
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
color: #808292;
|
||||
font-size: 14px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
.inputlabel {
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
color: #253134;
|
||||
}
|
||||
.dropme {
|
||||
background-color: #FFF;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #E8E8EF;
|
||||
box-shadow: 0px 2px 8px rgba(34, 34, 87, 0.05);
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
color: #253134;
|
||||
text-indent: 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 287px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.dropme img {
|
||||
margin-top: 17px;
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.checkus {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.checkus img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.checkus p {
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#divisionthing {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #E8E8EF;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 80;
|
||||
}
|
||||
#removeblock {
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
width: 287px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
color: #253134;
|
||||
border: 1px solid #E8E8EF;
|
||||
transition: all .3s cubic-bezier(.05,.03,.35,1);
|
||||
}
|
||||
#removeblock:hover {
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
}
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Opera and Firefox */
|
||||
}
|
||||
.blockyname {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
color: #253134;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.blockyleft img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.blockyright {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
background-color: #FFF;
|
||||
transition: all .3s cubic-bezier(.05,.03,.35,1);
|
||||
z-index: 10;
|
||||
}
|
||||
.blockyright:hover {
|
||||
background-color: #F1F4FC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.blockyright img {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.blockyleft {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.blockydiv {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #E9E9EF;
|
||||
}
|
||||
.blockyinfo {
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
color: #808292;
|
||||
margin-top: 15px;
|
||||
text-indent: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blockyinfo span {
|
||||
color: #253134;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #D3DCEA;
|
||||
line-height: 20px;
|
||||
text-indent: 0px;
|
||||
}
|
||||
.block {
|
||||
background-color: #FFF;
|
||||
margin-top: 0px !important;
|
||||
box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.05);
|
||||
}
|
||||
.selectedblock {
|
||||
border: 2px solid #217CE8;
|
||||
box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.08);
|
||||
}
|
||||
@media only screen and (max-width: 832px) {
|
||||
#centerswitch {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 560px) {
|
||||
#names {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||