WIP: map with transparent default bg
This commit is contained in:
Cindy Chang committed
1 parent
fb335f996d
commit
9a7442b4ef
7 files changed
+63
-16
No files matched your search
@@ -0,0 +1,10 @@
|
||||
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
|
||||
<rect x="4" y="4" width="40" height="40" rx="20" fill="#BFE5FF"/>
|
||||
<rect x="9" y="9" width="30" height="30" rx="15" fill="#80CCFF"/>
|
||||
<rect x="14" y="14" width="20" height="20" rx="10" fill="#0099FF"/>
|
||||
<rect x="19" y="19" width="10" height="10" rx="5" fill="#0073BF"/>
|
||||
<path d="M58.46 17.9844C58.46 17.752 58.4235 17.5469 58.3506 17.3691C58.2822 17.1868 58.1592 17.0228 57.9814 16.877C57.8083 16.7311 57.5667 16.5921 57.2568 16.46C56.9515 16.3278 56.5641 16.1934 56.0947 16.0566C55.6025 15.9108 55.1582 15.749 54.7617 15.5713C54.3652 15.389 54.0257 15.1816 53.7432 14.9492C53.4606 14.7168 53.2441 14.4502 53.0938 14.1494C52.9434 13.8486 52.8682 13.5046 52.8682 13.1172C52.8682 12.7298 52.9479 12.3721 53.1074 12.0439C53.2669 11.7158 53.4948 11.431 53.791 11.1895C54.0918 10.9434 54.4495 10.752 54.8643 10.6152C55.279 10.4785 55.7415 10.4102 56.252 10.4102C56.9993 10.4102 57.6328 10.5537 58.1523 10.8408C58.6764 11.1234 59.0752 11.4948 59.3486 11.9551C59.6221 12.4108 59.7588 12.8984 59.7588 13.418H58.4463C58.4463 13.0443 58.3665 12.7139 58.207 12.4268C58.0475 12.1351 57.806 11.9072 57.4824 11.7432C57.1589 11.5745 56.7487 11.4902 56.252 11.4902C55.7826 11.4902 55.3952 11.5609 55.0898 11.7021C54.7845 11.8434 54.5566 12.0348 54.4062 12.2764C54.2604 12.5179 54.1875 12.7936 54.1875 13.1035C54.1875 13.3132 54.2308 13.5046 54.3174 13.6777C54.4085 13.8464 54.5475 14.0036 54.7344 14.1494C54.9258 14.2952 55.1673 14.4297 55.459 14.5527C55.7552 14.6758 56.1084 14.7943 56.5186 14.9082C57.0837 15.0677 57.5713 15.2454 57.9814 15.4414C58.3916 15.6374 58.7288 15.8584 58.9932 16.1045C59.262 16.346 59.4603 16.6217 59.5879 16.9316C59.7201 17.237 59.7861 17.5833 59.7861 17.9707C59.7861 18.3763 59.7041 18.7432 59.54 19.0713C59.376 19.3994 59.1413 19.6797 58.8359 19.9121C58.5306 20.1445 58.1637 20.3245 57.7354 20.4521C57.3115 20.5752 56.8376 20.6367 56.3135 20.6367C55.8532 20.6367 55.3997 20.5729 54.9531 20.4453C54.5111 20.3177 54.1077 20.1263 53.7432 19.8711C53.3831 19.6159 53.0938 19.3014 52.875 18.9277C52.6608 18.5495 52.5537 18.112 52.5537 17.6152H53.8662C53.8662 17.957 53.9323 18.251 54.0645 18.4971C54.1966 18.7386 54.3766 18.9391 54.6045 19.0986C54.8369 19.2581 55.099 19.3766 55.3906 19.4541C55.6868 19.527 55.9945 19.5635 56.3135 19.5635C56.7738 19.5635 57.1634 19.4997 57.4824 19.3721C57.8014 19.2445 58.043 19.0622 58.207 18.8252C58.3757 18.5882 58.46 18.3079 58.46 17.9844ZM65.5218 18.791V13.1035H66.7932V20.5H65.5833L65.5218 18.791ZM65.761 17.2324L66.2874 17.2188C66.2874 17.7109 66.235 18.1667 66.1302 18.5859C66.0299 19.0007 65.8658 19.3607 65.638 19.666C65.4101 19.9714 65.1116 20.2106 64.7425 20.3838C64.3733 20.5524 63.9244 20.6367 63.3958 20.6367C63.0358 20.6367 62.7054 20.5843 62.4046 20.4795C62.1083 20.3747 61.8531 20.2129 61.6389 19.9941C61.4248 19.7754 61.2584 19.4906 61.1399 19.1396C61.026 18.7887 60.969 18.3672 60.969 17.875V13.1035H62.2337V17.8887C62.2337 18.2214 62.2701 18.4971 62.343 18.7158C62.4205 18.93 62.5231 19.1009 62.6507 19.2285C62.7828 19.3516 62.9287 19.4382 63.0882 19.4883C63.2522 19.5384 63.4208 19.5635 63.594 19.5635C64.1318 19.5635 64.5579 19.4609 64.8723 19.2559C65.1868 19.0462 65.4124 18.766 65.5491 18.415C65.6904 18.0596 65.761 17.6654 65.761 17.2324ZM69.7056 14.2656V20.5H68.441V13.1035H69.6714L69.7056 14.2656ZM72.0162 13.0625L72.0093 14.2383C71.9045 14.2155 71.8043 14.2018 71.7086 14.1973C71.6174 14.1882 71.5126 14.1836 71.3941 14.1836C71.1024 14.1836 70.8449 14.2292 70.6216 14.3203C70.3983 14.4115 70.2092 14.5391 70.0543 14.7031C69.8993 14.8672 69.7763 15.0632 69.6851 15.291C69.5985 15.5143 69.5416 15.7604 69.5142 16.0293L69.1587 16.2344C69.1587 15.7878 69.202 15.3685 69.2886 14.9766C69.3798 14.5846 69.5188 14.2383 69.7056 13.9375C69.8925 13.6322 70.1295 13.3952 70.4166 13.2266C70.7082 13.0534 71.0546 12.9668 71.4556 12.9668C71.5468 12.9668 71.6516 12.9782 71.7701 13.001C71.8886 13.0192 71.9706 13.0397 72.0162 13.0625ZM77.5604 13.1035H78.7088V20.3428C78.7088 20.9945 78.5767 21.5505 78.3123 22.0107C78.048 22.471 77.6789 22.8197 77.2049 23.0566C76.7355 23.2982 76.1932 23.4189 75.578 23.4189C75.3228 23.4189 75.022 23.3779 74.6756 23.2959C74.3338 23.2184 73.9966 23.084 73.6639 22.8926C73.3358 22.7057 73.0601 22.4528 72.8368 22.1338L73.4998 21.3818C73.8097 21.7555 74.1333 22.0153 74.4705 22.1611C74.8123 22.307 75.1496 22.3799 75.4823 22.3799C75.8833 22.3799 76.2297 22.3047 76.5213 22.1543C76.813 22.0039 77.0386 21.7806 77.1981 21.4844C77.3621 21.1927 77.4442 20.8327 77.4442 20.4043V14.7305L77.5604 13.1035ZM72.4676 16.8838V16.7402C72.4676 16.1751 72.5337 15.6624 72.6659 15.2021C72.8026 14.7373 72.9963 14.3385 73.2469 14.0059C73.5021 13.6732 73.8097 13.418 74.1698 13.2402C74.5298 13.0579 74.9354 12.9668 75.3866 12.9668C75.8514 12.9668 76.257 13.0488 76.6034 13.2129C76.9543 13.3724 77.2505 13.6071 77.492 13.917C77.7381 14.2223 77.9318 14.5915 78.0731 15.0244C78.2144 15.4574 78.3123 15.9473 78.367 16.4941V17.123C78.3169 17.6654 78.2189 18.153 78.0731 18.5859C77.9318 19.0189 77.7381 19.388 77.492 19.6934C77.2505 19.9987 76.9543 20.2334 76.6034 20.3975C76.2524 20.557 75.8423 20.6367 75.3729 20.6367C74.9308 20.6367 74.5298 20.5433 74.1698 20.3564C73.8143 20.1696 73.509 19.9076 73.2537 19.5703C72.9985 19.2331 72.8026 18.8366 72.6659 18.3809C72.5337 17.9206 72.4676 17.4215 72.4676 16.Line truncated
|
||||
<path d="M58.2988 36.6094V37.5H52.7148V36.7207L55.5098 33.6094C55.8535 33.2266 56.1191 32.9023 56.3066 32.6367C56.498 32.3672 56.6309 32.127 56.7051 31.916C56.7832 31.7012 56.8223 31.4824 56.8223 31.2598C56.8223 30.9785 56.7637 30.7246 56.6465 30.498C56.5332 30.2676 56.3652 30.084 56.1426 29.9473C55.9199 29.8105 55.6504 29.7422 55.334 29.7422C54.9551 29.7422 54.6387 29.8164 54.3848 29.9648C54.1348 30.1094 53.9473 30.3125 53.8223 30.5742C53.6973 30.8359 53.6348 31.1367 53.6348 31.4766H52.5508C52.5508 30.9961 52.6562 30.5566 52.8672 30.1582C53.0781 29.7598 53.3906 29.4434 53.8047 29.209C54.2188 28.9707 54.7285 28.8516 55.334 28.8516C55.873 28.8516 56.334 28.9473 56.7168 29.1387C57.0996 29.3262 57.3926 29.5918 57.5957 29.9355C57.8027 30.2754 57.9062 30.6738 57.9062 31.1309C57.9062 31.3809 57.8633 31.6348 57.7773 31.8926C57.6953 32.1465 57.5801 32.4004 57.4316 32.6543C57.2871 32.9082 57.1172 33.1582 56.9219 33.4043C56.7305 33.6504 56.5254 33.8926 56.3066 34.1309L54.0215 36.6094H58.2988ZM65.4646 34.6289V35.5195H59.3005V34.8809L63.1209 28.9688H64.0056L63.0564 30.6797L60.531 34.6289H65.4646ZM64.2752 28.9688V37.5H63.1912V28.9688H64.2752ZM67.7905 36.2109V37.084C67.7905 37.4395 67.7007 37.8145 67.521 38.209C67.3413 38.6074 67.0894 38.9395 66.7652 39.2051L66.1499 38.7773C66.2749 38.6055 66.3804 38.4297 66.4663 38.25C66.5523 38.0742 66.6167 37.8906 66.6597 37.6992C66.7066 37.5117 66.73 37.3125 66.73 37.1016V36.2109H67.7905ZM74.8098 28.9688V29.5781L71.2766 37.5H70.1341L73.6614 29.8594H69.0442V28.9688H74.8098ZM77.6573 33.4395L76.7901 33.2168L77.2178 28.9688H81.5948V29.9707H78.1377L77.8799 32.291C78.0362 32.2012 78.2334 32.1172 78.4717 32.0391C78.7139 31.9609 78.9912 31.9219 79.3037 31.9219C79.6983 31.9219 80.0518 31.9902 80.3643 32.127C80.6768 32.2598 80.9424 32.4512 81.1612 32.7012C81.3838 32.9512 81.5537 33.252 81.6709 33.6035C81.7881 33.9551 81.8467 34.3477 81.8467 34.7812C81.8467 35.1914 81.7901 35.5684 81.6768 35.9121C81.5674 36.2559 81.4014 36.5566 81.1787 36.8145C80.9561 37.0684 80.6748 37.2656 80.335 37.4062C79.9991 37.5469 79.6026 37.6172 79.1455 37.6172C78.8018 37.6172 78.4756 37.5703 78.167 37.4766C77.8623 37.3789 77.5889 37.2324 77.3467 37.0371C77.1084 36.8379 76.9131 36.5918 76.7608 36.2988C76.6123 36.002 76.5186 35.6543 76.4795 35.2559H77.5108C77.5577 35.5762 77.6514 35.8457 77.792 36.0645C77.9327 36.2832 78.1162 36.4492 78.3428 36.5625C78.5733 36.6719 78.8409 36.7266 79.1455 36.7266C79.4034 36.7266 79.6319 36.6816 79.8311 36.5918C80.0303 36.502 80.1983 36.373 80.335 36.2051C80.4717 36.0371 80.5752 35.834 80.6455 35.5957C80.7198 35.3574 80.7569 35.0898 80.7569 34.793C80.7569 34.5234 80.7198 34.2734 80.6455 34.043C80.5713 33.8125 80.46 33.6113 80.3116 33.4395C80.167 33.2676 79.9893 33.1348 79.7784 33.041C79.5674 32.9434 79.3252 32.8945 79.0518 32.8945C78.6885 32.8945 78.4131 32.9434 78.2256 33.041C78.042 33.1387 77.8526 33.2715 77.6573 33.4395ZM87.4363 28.957H87.5301V29.877H87.4363C86.8621 29.877 86.3816 29.9707 85.9949 30.1582C85.6082 30.3418 85.3016 30.5898 85.075 30.9023C84.8484 31.2109 84.6844 31.5586 84.5828 31.9453C84.4852 32.332 84.4363 32.7246 84.4363 33.123V34.377C84.4363 34.7559 84.4813 35.0918 84.5711 35.3848C84.6609 35.6738 84.784 35.918 84.9402 36.1172C85.0965 36.3164 85.2723 36.4668 85.4676 36.5684C85.6668 36.6699 85.8738 36.7207 86.0887 36.7207C86.3387 36.7207 86.5613 36.6738 86.7566 36.5801C86.952 36.4824 87.116 36.3477 87.2488 36.1758C87.3855 36 87.4891 35.793 87.5594 35.5547C87.6297 35.3164 87.6648 35.0547 87.6648 34.7695C87.6648 34.5156 87.6336 34.2715 87.5711 34.0371C87.5086 33.7988 87.4129 33.5879 87.284 33.4043C87.1551 33.2168 86.993 33.0703 86.7977 32.9648C86.6063 32.8555 86.3777 32.8008 86.1121 32.8008C85.8113 32.8008 85.5301 32.875 85.2684 33.0234C85.0105 33.168 84.7977 33.3594 84.6297 33.5977C84.4656 33.832 84.3719 34.0879 84.3484 34.3652L83.7742 34.3594C83.8289 33.9219 83.9305 33.5488 84.0789 33.2402C84.2313 32.9277 84.4188 32.6738 84.6414 32.4785C84.868 32.2793 85.1199 32.1348 85.3973 32.0449C85.6785 31.9512 85.9754 31.9043 86.2879 31.9043C86.7137 31.9043 87.0809 31.9844 87.3895 32.1445C87.698 32.3047 87.952 32.5195 88.1512 32.7891C88.3504 33.0547 88.4969 33.3555 88.5906 33.6914C88.6883 34.0234 88.7371 34.3652 88.7371 34.7168C88.7371 35.1191 88.6805 35.4961 88.5672 35.8477C88.4539 36.1992 88.284 36.5078 88.0574 36.7734C87.8348 37.0391 87.5594 37.2461 87.2313 37.3945C86.9031 37.543 86.5223 37.6172 86.0887 37.6172C85.6277 37.6172 85.2254 37.5234 84.8816 37.3359C84.5379 37.1445 84.2527 36.8906 84.0262 36.5742C83.7996 36.2578 83.6297 35.9062 83.5164 35.5195C83.4031 35.1328 83.3465 34.7402 83.3465 34.3418V33.832C83.3465 33.2305 83.407 32.6406 83.5281 32.0625C83.6492 31.4844 83.8582 30.9609 84.1551 30.4922C84.4559 30.0234 84.8719 29.6504 85.4031 29.373C85.9344 29.0957 86.6121 28.957 87.4363 28.957Z" fill="#4E5969"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
|
||||
<rect x="4" y="4" width="40" height="40" rx="20" fill="white"/>
|
||||
<rect x="19" y="19" width="10" height="10" rx="5" fill="#BFE5FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 382 B |
@@ -0,0 +1,7 @@
|
||||
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
|
||||
<rect x="4" y="4" width="40" height="40" rx="20" fill="white"/>
|
||||
<rect x="14" y="14" width="20" height="20" rx="10" fill="#BFE5FF"/>
|
||||
<rect x="19" y="19" width="10" height="10" rx="5" fill="#80CCFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 450 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
|
||||
<rect x="4" y="4" width="40" height="40" rx="20" fill="white"/>
|
||||
<rect x="9" y="9" width="30" height="30" rx="15" fill="#BFE5FF"/>
|
||||
<rect x="14" y="14" width="20" height="20" rx="10" fill="#80CCFF"/>
|
||||
<rect x="19" y="19" width="10" height="10" rx="5" fill="#0099FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
|
||||
<rect x="4" y="4" width="40" height="40" rx="20" fill="#BFE5FF"/>
|
||||
<rect x="9" y="9" width="30" height="30" rx="15" fill="#80CCFF"/>
|
||||
<rect x="14" y="14" width="20" height="20" rx="10" fill="#0099FF"/>
|
||||
<rect x="19" y="19" width="10" height="10" rx="5" fill="#0073BF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 518 B |
@@ -157,7 +157,9 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
|
||||
function(node) {
|
||||
return node.data('type') === 'activity' ? '1' : '2';
|
||||
},
|
||||
'background-image': 'url(capsule.svg)',
|
||||
'background-image': 'data(nodeImageUrl)',
|
||||
'background-opacity': 'data(backgroundOpacity)', // 透明背景
|
||||
'border-opacity': 'data(borderOpacity)', // 透明邊框
|
||||
'shape':'data(shape)',
|
||||
'text-wrap': 'wrap',
|
||||
'text-max-width': 'data(width)', // 在 div 內換行
|
||||
|
||||
@@ -67,6 +67,10 @@ import SidebarView from '@/components/Discover/Map/SidebarView.vue';
|
||||
import SidebarState from '@/components/Discover/Map/SidebarState.vue';
|
||||
import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
|
||||
import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
|
||||
import ImgCapsule1 from '@/assets/capsule1.svg';
|
||||
import ImgCapsule2 from '@/assets/capsule2.svg';
|
||||
import ImgCapsule3 from '@/assets/capsule3.svg';
|
||||
import ImgCapsule4 from '@/assets/capsule4.svg';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@@ -335,21 +339,23 @@ export default {
|
||||
break;
|
||||
// add type of 'activity' node
|
||||
default:
|
||||
mapData.nodes.push({
|
||||
data:{
|
||||
id:node.id,
|
||||
type:node.type,
|
||||
label:node.label,
|
||||
height: 48,
|
||||
width: 216,
|
||||
backgroundColor:'#FFFFFF',
|
||||
bordercolor:'#64748B',
|
||||
radius: '999px',
|
||||
shape:"round-rectangle",
|
||||
freq:node.freq,
|
||||
duration:node.duration,
|
||||
}
|
||||
})
|
||||
mapData.nodes.push({
|
||||
data:{
|
||||
id:node.id,
|
||||
type:node.type,
|
||||
label:node.label,
|
||||
height: 48,
|
||||
width: 216,
|
||||
backgroundColor:'rgba(0, 0, 0, 0)',
|
||||
borderradius: 999,
|
||||
shape:"round-rectangle",
|
||||
freq:node.freq,
|
||||
duration:node.duration,
|
||||
nodeImageUrl: ImgCapsule1,
|
||||
backgroundOpacity: 0,
|
||||
borderOpacity: 0,
|
||||
}
|
||||
})
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
Reference in new issue
Block a user