diff --git a/package-lock.json b/package-lock.json index 1f48cfb..f759b65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,8 +14,9 @@ "chartjs-adapter-date-fns": "^3.0.0", "chartjs-plugin-datalabels": "^2.2.0", "chartjs-plugin-dragdata": "^1.1.3", - "cytoscape": "^3.30.0", + "cytoscape": "^3.30.2", "cytoscape-dagre": "^2.5.0", + "cytoscape-fcose": "^2.2.0", "cytoscape-popper": "^2.0.0", "cytoscape-spread": "^3.0.0", "date-fns": "^2.30.0", @@ -2163,6 +2164,14 @@ "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==", "dev": true }, + "node_modules/cose-base": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz", + "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==", + "dependencies": { + "layout-base": "^2.0.0" + } + }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -2324,9 +2333,9 @@ "dev": true }, "node_modules/cytoscape": { - "version": "3.30.0", - "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz", - "integrity": "sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ==", + "version": "3.30.2", + "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz", + "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==", "engines": { "node": ">=0.10" } @@ -2342,6 +2351,17 @@ "cytoscape": "^3.2.22" } }, + "node_modules/cytoscape-fcose": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz", + "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==", + "dependencies": { + "cose-base": "^2.2.0" + }, + "peerDependencies": { + "cytoscape": "^3.2.0" + } + }, "node_modules/cytoscape-popper": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz", @@ -4363,6 +4383,11 @@ "verror": "1.10.0" } }, + "node_modules/layout-base": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz", + "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==" + }, "node_modules/lazy-ass": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz", @@ -15793,6 +15818,14 @@ "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==", "dev": true }, + "cose-base": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz", + "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==", + "requires": { + "layout-base": "^2.0.0" + } + }, "create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -15929,9 +15962,9 @@ "dev": true }, "cytoscape": { - "version": "3.30.0", - "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz", - "integrity": "sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ==" + "version": "3.30.2", + "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz", + "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==" }, "cytoscape-dagre": { "version": "2.5.0", @@ -15941,6 +15974,14 @@ "dagre": "^0.8.5" } }, + "cytoscape-fcose": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz", + "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==", + "requires": { + "cose-base": "^2.2.0" + } + }, "cytoscape-popper": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz", @@ -17440,6 +17481,11 @@ "verror": "1.10.0" } }, + "layout-base": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz", + "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==" + }, "lazy-ass": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz", diff --git a/package.json b/package.json index b71a348..24ad3f5 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,9 @@ "chartjs-adapter-date-fns": "^3.0.0", "chartjs-plugin-datalabels": "^2.2.0", "chartjs-plugin-dragdata": "^1.1.3", - "cytoscape": "^3.30.0", + "cytoscape": "^3.30.2", "cytoscape-dagre": "^2.5.0", + "cytoscape-fcose": "^2.2.0", "cytoscape-popper": "^2.0.0", "cytoscape-spread": "^3.0.0", "date-fns": "^2.30.0", diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index 721b8a8..e32acf5 100644 --- a/src/module/cytoscapeMap.js +++ b/src/module/cytoscapeMap.js @@ -1,6 +1,7 @@ import cytoscape from 'cytoscape'; import spread from 'cytoscape-spread'; import dagre from 'cytoscape-dagre'; +import fcose from 'cytoscape-fcose'; import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css'; import MapPathStore from '@/stores/mapPathStore'; @@ -22,6 +23,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona // 註冊布局演算法 cytoscape.use(dagre); cytoscape.use(spread); +cytoscape.use(fcose); /** * @param {object} mapData processMapData | bpmnData，可選以上任一。 @@ -169,13 +171,19 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu 'text-margin-x': function(node) { return node.data('type') === 'activity' ? -5 : 0; }, + 'text-margin-y': function(node) { + return node.data('type') === 'activity' ? 0 : 0; + }, + 'padding': function(node) { + return node.data('type') === 'activity' ? 0 : 0; + }, // 'text-justification': 'left', 'text-halign': 'center', 'text-valign': 'center', 'height': 'data(height)', 'width': 'data(width)', 'color': 'data(textColor)', - 'line-height': '0.7rem', + 'line-height': '1', 'font-size': function(node) { return node.data('type') === 'activity' ? 16 : 14; @@ -226,7 +234,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu //'control-point-step-size':100, // 從點到點的垂直線，指定貝茲取線邊緣間的距離 'width':'data(lineWidth)', 'line-style':'data(style)', - "text-margin-y": "15rem", + "text-margin-y": "0.9rem", //"text-rotation": "autorotate", } },{ @@ -252,7 +260,22 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu // 讓節點不要左右重疊的演算法 cy.layout({ name: 'spread', - minDist: 40, // 設置最小節點間距 + minDist: 60, // 設置最小節點間距 + }).run(); + + cy.layout({ + name: 'fcose', + randomize: false, + padding: 60, + // nodeRepulsion: 100000, + idealEdgeLength: 300, + // edgeElasticity: 0.7, + // gravity: 5, + nestingFactor: 5, + gravityCompound: 20, + // gravityRangeCompound: 30, + // nodeDimensionsIncludeLabels: true, + fit: true, }).run(); // 按下線條，線條及線條上數字有光暈效果 diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue index 9d933eb..0df6f8f 100644 --- a/src/views/Discover/Map/Map.vue +++ b/src/views/Discover/Map/Map.vue @@ -350,7 +350,7 @@ export default { type:node.type, label:node.label, height: 60, - width: 242, + width: 226, textColor: '#0F172A', backgroundColor:'rgba(0, 0, 0, 0)', borderradius: 999, diff --git a/yarn.lock b/yarn.lock index 517ad8a..91bbc00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1656,6 +1656,13 @@ core-util-is@1.0.2: resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz" integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ== +cose-base@^2.2.0: + version "2.2.0" + resolved "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz" + integrity sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g== + dependencies: + layout-base "^2.0.0" + create-error-class@^3.0.0: version "3.0.2" dependencies: @@ -1812,6 +1819,13 @@ cytoscape-dagre@^2.5.0: dependencies: dagre "^0.8.5" +cytoscape-fcose@^2.2.0: + version "2.2.0" + resolved "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz" + integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ== + dependencies: + cose-base "^2.2.0" + cytoscape-popper@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz" @@ -1826,10 +1840,10 @@ cytoscape-spread@^3.0.0: 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== +cytoscape@^3.0.0, cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.2: + version "3.30.2" + resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz" + integrity sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw== d3-dispatch@1: version "1.0.6" @@ -3657,6 +3671,11 @@ latest-version@^3.0.0: dependencies: package-json "^4.0.0" +layout-base@^2.0.0: + version "2.0.1" + resolved "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz" + integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg== + lazy-ass@^1.6.0, lazy-ass@1.6.0: version "1.6.0" resolved "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz"