MyAccount page prototype

src/module/cytoscapeMap.js

@@ -2,6 +2,7 @@ import cytoscape from 'cytoscape';
 import spread from 'cytoscape-spread';
 import dagre from 'cytoscape-dagre';
 import fcose from 'cytoscape-fcose';
+import cola from 'cytoscape-cola';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import MapPathStore from '@/stores/mapPathStore';
@@ -24,6 +25,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona
 cytoscape.use(dagre);
 cytoscape.use(spread);
 cytoscape.use(fcose);
+cytoscape.use(cola); 
 
 /**
  * @param {object}  mapData processMapData | bpmnData，可選以上任一。
@@ -278,6 +280,47 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     fit: true,
   }).run();
 
+  cy.layout({
+    name: 'cola',
+    refresh: 1,
+    ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
+    fit: true, // on every layout reposition of nodes, fit the viewport
+    padding: 30, // padding around the simulation
+    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+  nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node
+
+  // layout event callbacks
+  ready: function(){}, // on layoutready
+  stop: function(){}, // on layoutstop
+
+  // positioning options
+  randomize: false, // use random node positions at beginning of layout
+  avoidOverlap: true, // if true, prevents overlap of node bounding boxes
+  handleDisconnected: true, // if true, avoids disconnected components from overlapping
+  convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
+  nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
+  flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
+  alignment: function(node) {
+    return {
+      x: 1, // 將所有節點對齊在相同的 X 座標上
+      y: 0 // Y 座標保持不變
+    };
+  }, // relative alignment constraints on nodes, e.g. {vertical: [[{node: node1, offset: 0}, {node: node2, offset: 5}]], horizontal: [[{node: node3}, {node: node4}], [{node: node5}, {node: node6}]]}
+  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes, e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]
+  centerGraph: 10000, // adjusts the node positions initially to center the graph (pass false if you want to start the layout from the current position)
+
+  // different methods of specifying edge length
+  // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
+  edgeLength: 10, // sets edge length directly in simulation
+  edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
+  edgeJaccardLength: undefined, // jaccard edge length in simulation
+
+  // iterations of cola algorithm; uses default values on undefined
+  unconstrIter: undefined, // unconstrained initial layout iterations
+  userConstIter: undefined, // initial layout iterations with user-specified constraints
+  allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
+  }).run();
+
   // 按下線條，線條及線條上數字有光暈效果
   cy.on('tap', 'edge', function(event) {
     cy.edges().removeClass('highlight-edge');