From fb335f996dc9e4af2136661c790ae54dffddba89 Mon Sep 17 00:00:00 2001 From: Cindy Chang Date: Thu, 15 Aug 2024 10:54:04 +0800 Subject: [PATCH] Map. dagre and spread algorithm --- package-lock.json | 33 +++++++++++++++++++++++++++++++++ package.json | 1 + src/module/cytoscapeMap.js | 13 +++++++++++-- src/views/Discover/Map/Map.vue | 9 +++++---- yarn.lock | 14 +++++++++++++- 5 files changed, 63 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4d707b9..1f48cfb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "cytoscape": "^3.30.0", "cytoscape-dagre": "^2.5.0", "cytoscape-popper": "^2.0.0", + "cytoscape-spread": "^3.0.0", "date-fns": "^2.30.0", "decimal.js": "^10.4.3", "i18next": "^23.11.5", @@ -2352,6 +2353,17 @@ "cytoscape": "^3.2.0" } }, + "node_modules/cytoscape-spread": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz", + "integrity": "sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ==", + "dependencies": { + "weaverjs": "^1.2.0" + }, + "peerDependencies": { + "cytoscape": "^3.0.0" + } + }, "node_modules/d3-dispatch": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz", @@ -13950,6 +13962,14 @@ "node": ">=10.13.0" } }, + "node_modules/weaverjs": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz", + "integrity": "sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw==", + "engines": { + "node": ">=0.6" + } + }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", @@ -15929,6 +15949,14 @@ "@popperjs/core": "^2.0.0" } }, + "cytoscape-spread": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz", + "integrity": "sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ==", + "requires": { + "weaverjs": "^1.2.0" + } + }, "d3-dispatch": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz", @@ -24287,6 +24315,11 @@ "graceful-fs": "^4.1.2" } }, + "weaverjs": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz", + "integrity": "sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw==" + }, "webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", diff --git a/package.json b/package.json index edc0fd8..b71a348 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "cytoscape": "^3.30.0", "cytoscape-dagre": "^2.5.0", "cytoscape-popper": "^2.0.0", + "cytoscape-spread": "^3.0.0", "date-fns": "^2.30.0", "decimal.js": "^10.4.3", "i18next": "^23.11.5", diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index 1109237..a03adcd 100644 --- a/src/module/cytoscapeMap.js +++ b/src/module/cytoscapeMap.js @@ -1,4 +1,5 @@ import cytoscape from 'cytoscape'; +import spread from 'cytoscape-spread'; import dagre from 'cytoscape-dagre'; import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css'; @@ -16,7 +17,9 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona return text; }; +// 註冊布局演算法 cytoscape.use( dagre ); +cytoscape.use(spread); /** * @param {object} mapData processMapData | bpmnData，可選以上任一。 @@ -55,7 +58,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu // 產生 node 色階 gradientArray = new Gradient() - .setColorGradient("#CCE5FF", "#66b2ff") + .setColorGradient("#FFFFFF", "#FFFFFF") .setMidpoint(nodeOption.length) .getColors(); @@ -154,7 +157,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu function(node) { return node.data('type') === 'activity' ? '1' : '2'; }, - //'border-radius': '5', + 'background-image': 'url(capsule.svg)', 'shape':'data(shape)', 'text-wrap': 'wrap', 'text-max-width': 'data(width)', // 在 div 內換行 @@ -220,6 +223,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu ], }); + // 讓節點不要左右重疊的演算法 + cy.layout({ + name: 'spread', + minDist: 40, // 設置最小節點間距 + }).run(); + // creat tippy.js let tip; cy.on('mouseover', 'node', function(event) { diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue index 9460d4f..3a2c723 100644 --- a/src/views/Discover/Map/Map.vue +++ b/src/views/Discover/Map/Map.vue @@ -340,10 +340,11 @@ export default { id:node.id, type:node.type, label:node.label, - height:80, - width:100, - backgroundColor:'#FFCCCC', - bordercolor:'#003366', + height: 48, + width: 216, + backgroundColor:'#FFFFFF', + bordercolor:'#64748B', + radius: '999px', shape:"round-rectangle", freq:node.freq, duration:node.duration, diff --git a/yarn.lock b/yarn.lock index 8fb8749..517ad8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1819,7 +1819,14 @@ cytoscape-popper@^2.0.0: dependencies: "@popperjs/core" "^2.0.0" -cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.0: +cytoscape-spread@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz" + integrity sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ== + dependencies: + weaverjs "^1.2.0" + +cytoscape@^3.0.0, cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.0: version "3.30.0" resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz" integrity sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ== @@ -6565,6 +6572,11 @@ wcwidth@^1.0.0: dependencies: defaults "^1.0.3" +weaverjs@^1.2.0: + version "1.2.0" + resolved "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz" + integrity sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw== + webidl-conversions@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"