本WIKI编辑权限开放，正由 恋与深空Evol攻略组 搭建基础框架ing，期待更多猎人加入WIKI建设！
反馈留言 • 收藏方法 • 加入我们

全站通知：

Widget:通用基因流程图

来自恋与深空WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/style/index.css" /> <script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>

<link rel="stylesheet" href="/lysk/MediaWiki:CustomNode.css?action=raw&ctype=text/css" /> <script src="/lysk/index.php?title=MediaWiki:CustomNode.js&action=raw&ctype=text/javascript"></script>

<body>

</body>

<script> 

   const lf = new LogicFlow({
       container: document.querySelector("#container"),
       edgeType: 'commonGeneLine',
       stopZoomGraph: true,
       stopScrollGraph: true,
       //stopMoveGraph: true,
       adjustEdge: false,
       adjustEdgeStartAndEnd: false,
       adjustNodePosition: false,
       hideAnchors: true,
       nodeSelectedOutline: false,
       hoverOutline: false,
       nodeTextEdit: false,
       edgeTextEdit: false,
       textEdit: false,
   });
   //注册自定义节点
   lf.register(CommonGeneLgNodeBox);
   lf.register(CommonGeneSmNodeBox);
   lf.register(CommonGeneLine);
   lf.setTheme({
     arrow: {
       offset: 0,
       verticalLength: 0,
     },
     baseEdge: {
       stroke: "#a2bcd7",
       strokeWidth: 1,
     },
   });
   
   var graphData, graphModel;
   var currentNodeId;
   var nodeOrders=[];
   getData();// 获取json数据
   
   async function getData(){
     graphData = await $.getJSON(`https://wiki.biligame.com/lysk/MediaWiki:.json?action=raw`);
     lf.render(graphData);  //渲染
     graphModel = lf.graphModel;
     console.log('流程数据：', graphData);
     if (graphData.nodes && graphData.nodes.length > 0) {
        initNodesOrder(graphData);
        console.log(nodeOrders);
        updateNodesPos();
     }
     initCurrentNode();  // 处理当前节点样式
     initGraph();  //初始化画布
   }
   // 初始化
   function initCurrentNode() {
       if (graphData.nodes && graphData.nodes.length > 0) {
           currentNodeId = graphData.nodes[0].id;
           changeCurrentNode();
           setTimeout(() => {
               showRightContent();
           }, 200)
       }
   }

   // 修改选中节点样式
   function changeCurrentNode() {
       $(`#${currentNodeId}`)[0].classList.add('active');
   }
   
   // 显示右侧内容
   function showRightContent() {
       if (currentNodeId) {
           const currentNode = graphModel.getNodeModelById(currentNodeId);

let htmlStr = `

<img src="${currentNode.properties.iconURL}">
${currentNode.text.value}
${currentNode.properties.effectDesc}
${currentNode.properties.textDesc}

<img src="https://patchwiki.biligame.com/images/lysk/0/0f/k3eph588qmxqsdqbs5qf7heix1yqpu3.png"/>
<img src="https://patchwiki.biligame.com/images/lysk/e/eb/hrcen9zr23694b3h25zfwobi6q61oyn.png"> ${currentNode.properties.spendCoin}

`; 

           $('.right-container')[0].innerHTML = htmlStr;
       }
   }
   
   // 左侧节点点击事件
   var currentNodeId = ;
   lf.on("node:click", (node) => {
       console.log('节点数据：', node.data);
       // 修改右侧内容
       let oldId = currentNodeId;
       let oldNode = document.getElementById(oldId);  //旧的当前节点
       if (oldNode) $(`#${oldId}`)[0].classList.remove('active');
       currentNodeId = node.data.id;
       changeCurrentNode();   // 当前节点样式
       showRightContent();
   });
   
   
   // 初始化节点顺序
   function initNodesOrder(data) {
       nodeOrders = [data.nodes[0].id];
       for (let i = 0; i < nodeOrders.length; i++) {
           if (typeof nodeOrders[i] === "string") {
               const nextNodes = graphModel.getNodeOutgoingNode(nodeOrders[i]);
               if (nextNodes.length > 0) {
                   if (nextNodes[0].type === "common-gene-lg") {  // 大 -> 大
                       nodeOrders.push(nextNodes[0].id);
                   }
                   else {  // 大 -> 小
                       let nextIds = [];
                       for (let j = 0; j < nextNodes.length; j++) {
                           nextIds.push(nextNodes[j].id);
                       }
                       nodeOrders.push(nextIds);
                   }
               }
           }
           else {
               let nextIds = [];
               for (let j = 0; j < nodeOrders[i].length; j++) {
                   const nodeId = nodeOrders[i][j];
                   const nextNodes = graphModel.getNodeOutgoingNode(nodeId);
                   if (nextNodes.length > 0) {
                       if (nextNodes[0].type === "common-gene-lg") {  // 小 -> 大
                           nodeOrders.push(nextNodes[0].id);
                           break;
                       }
                       else {  // 小 -> 小
                           for (let k = 0; k < nextNodes.length; k++) {
                               if (nextIds.indexOf(nextNodes[k].id) === -1) {
                                   nextIds.push(nextNodes[k].id);
                               }
                           }
                       }
                   }
               }
               if (nextIds.length > 0) { nodeOrders.push(nextIds); }
           }
       }
   }

   // 更新所有节点位置
   function updateNodesPos() {
       for (let i = 0; i < nodeOrders.length - 1; i++) {
           let sourceNode;
           if (typeof nodeOrders[i] === 'string') {
               sourceNode = lf.getNodeDataById(nodeOrders[i]);
           }
           else {
               sourceNode = lf.getNodeDataById(nodeOrders[i][1]);
           }
           if (typeof nodeOrders[i + 1] === 'string') {  // *->大
               graphModel.moveNode2Coordinate(nodeOrders[i + 1], sourceNode.x, sourceNode.y + 180, true);
           }
           else {   // *->小
               let leftId = findLeftNodeId(nodeOrders[i + 1]);
               let rigthId = findRightNodeId(nodeOrders[i + 1]);
               let midId = nodeOrders[i + 1].filter(id => {
                   return id !== leftId && id !== rigthId;
               })[0];
               nodeOrders[i + 1] = [leftId, midId, rigthId];
               graphModel.moveNode2Coordinate(nodeOrders[i + 1][0], sourceNode.x - 150, sourceNode.y + 180, true);
               graphModel.moveNode2Coordinate(nodeOrders[i + 1][1], sourceNode.x, sourceNode.y + 180, true);
               graphModel.moveNode2Coordinate(nodeOrders[i + 1][2], sourceNode.x + 150, sourceNode.y + 180, true);
           }
       }
   }

   // 寻找同级最左端的节点
   function findLeftNodeId(array) {
       const next0 = lf.getNodeDataById(array[0]);
       let leftId = next0.id;
       let minX = next0.x;
       for (let i = 1; i < array.length; i++) {
           const nexti = lf.getNodeDataById(array[i]);
           if (minX > nexti.x) {
               minX = nexti.x;
               leftId = nexti.id;
           }
       }
       return leftId;
   }
   // 寻找同级最右端的节点
   function findRightNodeId(array) {
       const next0 = lf.getNodeDataById(array[0]);
       let rightId = next0.id;
       let maxX = next0.x;
       for (let i = 1; i < array.length; i++) {
           const nexti = lf.getNodeDataById(array[i]);
           if (maxX < nexti.x) {
               maxX = nexti.x;
               rightId = nexti.id;
           }
       }
       return rightId;
   }
   
   function initGraph(){
      // 计算画布偏移和画布宽高
      let minY = graphData.nodes[0].y, maxY = graphData.nodes[0].y;
      for(let i = 0; i < graphData.nodes.length; i++){
        let node = graphData.nodes[i];
        minY = node.y < minY ? node.y : minY;
        maxY = node.y > maxY ? node.y : maxY;
      }
      let transX = ($('#container')[0].clientWidth < 420 ? 420 : $('#container')[0].clientWidth) / 2 - graphData.nodes[0].x;
      let transY = 100 - minY;
      lf.translate(transX, transY);
      let height = maxY - minY + 250;
      if(window.innerWidth <= 767){
          $('#container>div')[0].style.height = height * 0.7 +'px';
          lf.zoom(0.7, [100, 100]);
          setTimeout(()=>{ window.scrollTo(0, 300);}, 500);
      }
      else{
          $('#container>div')[0].style.height = height +'px';
      }
      lf.updateEditConfig({ stopMoveGraph: true, });
  }

</script>

<style>

  1. container {
 width: 100%;
 height: 100%;
 overflow: auto;

}

  1. container>div{
 min-height: 100%;
 min-width: 370px;

} 

 .lf-graph{
   background: transparent;
 }
   .lf-element-text {
       display: none;
   }

   .desc-container {
       padding: 30px 10px 0 30px;
       background-image: url(https://patchwiki.biligame.com/images/lysk/c/c5/eoctlpizovkfaovc6rkf9b265bux9ir.png);
       background-size: calc(100% + 20px) calc(100% + 16px);
       background-position: center;
   }

   .desc-container>.name-line {
       display: flex;
       align-items: center;
       gap: 20px;
   }

   .name-line>.gene-icon {
       padding: 10px;
       background-image: url(https://patchwiki.biligame.com/images/lysk/6/69/0i41pbrqm371tp68bxrjkwfximecipx.png);
       background-position: center;
   }

   .name-line>.gene-icon>img {
       width: 50px;
       height: 50px;
   }

   .name-line>.gene-name {
       color: #c7e6f7;
       font-size: 18px;
       letter-spacing: 1px;
   }

   .desc-container>.desc-line {
       padding: 10px;
   }

   .desc-line>.effect-desc {
       color: #c7e6f7;
       font-size: 15px;
   }

   .desc-line>.text-desc {
       color: #30445e;
       font-size: 15px;
       margin-bottom: 5px;
   }

   .desc-line>.effect-desc span {
       color: #f5c74a;
   }

   .desc-line>.spend-coin {
       margin: 50px calc((100% - 70px) / 2);
       background: url(https://patchwiki.biligame.com/images/lysk/4/46/gnhtf31p19l4xtovua1zpofm2p37nlq.png);
       width: 70px;
       text-align: center;
       color: #c7e6f7;
       font-size: 16px;
   }
   .spend-coin img {
       width: 18px;
       margin-top: -4px;
   }
 #container>div{
       min-width: 420px;
 }

.geneScrollbar{ 

   scrollbar-width: thin;  
   scrollbar-color: #405369 transparent;

} .geneScrollbar::-webkit-scrollbar { 

   width: 4px;
   height: 4px;

}

.geneScrollbar::-webkit-scrollbar-thumb { 

   background: #405369;
   border-radius: 2px;

} .geneScrollbar::-webkit-scrollbar-track { 

   background: transparent;

}

.common-gene-lg.active{ 

   background-image: url(https://patchwiki.biligame.com/images/lysk/5/55/18podd6xln3yqsxxunw9oh5w6964gri.png);
   background-repeat: no-repeat;
   background-size: 154px 120px;
   background-position: -5px -3px;

} .common-gene-sm.active{ 

   background-image: url(https://patchwiki.biligame.com/images/lysk/5/55/18podd6xln3yqsxxunw9oh5w6964gri.png);
   background-repeat: no-repeat;
   background-size: 105px 85px;
   background-position: 0px -2px;
 }

</style>

取自“https://wiki.biligame.com/lysk/index.php?title=Widget:通用基因流程图&oldid=36082”