bugfix250107.1
全站通知：

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> 

 var graphData, graphModel, jsonData, partnerData;
 var currentNodeId0,
   currentNodeId1,
   currentNodeId2,
   currentNodeId3,
   currentNodeId4;
 var lf0, lf1, lf2, lf3, lf4;
 var nodeOrders = [];
 var showData = [];
 getData(-1); // 获取json数据
 async function getData(from) {
    let allData = await $.getJSON(
      `https://wiki.biligame.com/lysk/MediaWiki:.json?action=raw`
    );
   // let allData = await $.getJSON("./hundun.json");
   partnerData = allData.allList;
   if (from === -1) {
     showData = partnerData.map((item) => 0);
   }
   jsonData = partnerData.map(
     (item, index) => item.partnerList[showData[index]]
   );
   graphData = jsonData.map((item) => {
     return item.graphData;
   });
   let htmlStr = "";
   partnerData.forEach((item, index) => {

htmlStr += `

`; 

   });
   $("#allIn")[0].innerHTML = htmlStr;
   let arr = [];
   // if (from === -1) {
   arr = partnerData.map((item, index) => index);
   // } else {
   //   arr.push(from);
   // }
   initLf(arr); // 渲染数据图
   initCurrentNode(arr); // 处理当前节点样式
   initGraph(arr); //初始化画布
   initPartner(arr); // 初始化左侧搭档
   initTopBox(arr); // 初始化顶部搭档选择
   initTopName(arr); // 初始化顶部搭档姓名
   startClick(arr);
 }
 function initLf(arr) {
   arr.forEach((item) => {
     window["lf" + item] = new LogicFlow({
       container: document.querySelector("#container" + item),
       edgeType: "partnerLine",
       stopZoomGraph: true,
       stopScrollGraph: true,
       //stopMoveGraph: true,
       adjustEdge: false,
       adjustEdgeStartAndEnd: false,
       adjustNodePosition: false,
       hideAnchors: true,
       nodeSelectedOutline: false,
       hoverOutline: false,
       nodeTextEdit: false,
       edgeTextEdit: false,
       textEdit: false,
     });
     //注册自定义节点
     window["lf" + item].register(PartnerNodeBox);
     window["lf" + item].register(PartnerLine);
     window["lf" + item].setTheme({
       arrow: {
         offset: 0,
         verticalLength: 0,
       },
       baseEdge: {
         stroke: "#a2bcd7",
         strokeWidth: 1,
       },
     });
     window["lf" + item].render(graphData[item]); //渲染
     graphModel = window["lf" + item].graphModel;
     console.log("流程数据：", graphData[item]);
     if (graphData.nodes && graphData.nodes.length > 0) {
       initNodesOrder(graphData[item]);
     }
   });
 }
 function startClick(arr) {
   arr.forEach((item) => {
     window["lf" + item].on("node:click", (node) => {
       console.log("节点数据：", node.data);
       // 修改右侧内容
       let oldId = window["currentNodeId" + item];
       let oldNode = document.getElementById(oldId); //旧的当前节点
       if (oldNode)
         $(`#daDang${item} #${oldId}`)[0].classList.remove("active");
       window["currentNodeId" + item] = node.data.id;
       changeCurrentNode(); // 当前节点样式
       showRightContent();
     });
   });
 }
 // 初始化
 function initCurrentNode(arr) {
   arr.forEach((item) => {
     if (graphData[item].nodes && graphData[item].nodes.length > 0) {
       window["currentNodeId" + item] = graphData[item].nodes[0].id;
     }
   });
   changeCurrentNode(arr);
   setTimeout(() => {
     showRightContent();
   }, 200);
 }

 // 修改选中节点样式
 function changeCurrentNode() {
   partnerData.forEach((item, index) => {
     let name = window[`currentNodeId${index}`];
     $(`#daDang${index} #${name}`)[0].classList.add("active");
   });
 }

 function initPartner(arr) {
   arr.forEach((item) => {
     let htmlStr = `<img src="${jsonData[item].partnerUrl}"/>`;
     $(`#daDang${item} .left-partner`)[0].innerHTML = htmlStr;
   });
 }

 function initTopBox(arr) {
   arr.forEach((personIndex) => {
     let htmlStr = "";
     partnerData[personIndex].partnerList.map((item, index) => {
       if (index === showData[personIndex]) {

htmlStr += `

`; 
       } else {
htmlStr += `
`; 
       }
       htmlStr += `

       <img
         src="${item.partnerHeadUrl}"
       />
${item.partnerName}
`; 
     });
     $(`#dadang${personIndex} .top-partner`)[0].innerHTML = htmlStr;
     $(`#dadang${personIndex} .top-box`).click(function () {
       let index = $(this).index();
       $(`#dadang${personIndex} .top-box`).removeClass("active");
       $(this).addClass("active");
       showData[personIndex] = index;
       getData(personIndex);

       window["lf" + personIndex].off("node:click", (node) => {});
     });
   });
 }
 function initTopName(arr) {
   arr.forEach((personIndex) => {
     let htmlStr = partnerData[personIndex].name;
     $(`#dadang${personIndex} .top-name`)[0].innerHTML = htmlStr;
   });
 }

 // 显示右侧内容
 function showRightContent() {
   partnerData.forEach((item, index) => {
     if (window["currentNodeId" + index]) {
       const currentNode = graphModel.getNodeModelById(
         window["currentNodeId" + index]
       );
let htmlStr = `
<img src="${currentNode.properties.iconURL}">
${currentNode.properties.title}
${currentNode.properties.effectDesc}
${currentNode.properties.textDesc}

<img src="https://patchwiki.biligame.com/images/lysk/b/bd/o8a9l2wh7kagi9i15n13343skxzlb3b.png"/>
<img src="https://patchwiki.biligame.com/images/lysk/b/b7/bq4rzsfalj3lchnscspc49ozmgqsjw5.png"> ${currentNode.properties.spendCoin}
`; 
       $(`#daDang${index} .right-container`)[0].innerHTML = htmlStr;
     }
   });
 }

 // 初始化节点顺序
 function initNodesOrder(data) {
   nodeOrders = data.nodes.map((item) => item.id);
 }

 function initGraph(arr) {
   // 计算画布偏移和画布宽高
   arr.forEach((item) => {
     let minY = graphData[item].nodes[0].y,
       maxY = graphData[item].nodes[0].y;
     for (let i = 0; i < graphData[item].nodes.length; i++) {
       let node = graphData[item].nodes[i];
       minY = node.y < minY ? node.y : minY;
       maxY = node.y > maxY ? node.y : maxY;
     }
     let transX =
       ($("#container" + item)[0].clientWidth < 420
         ? 420
         : $("#container" + item)[0].clientWidth) /
         2 -
       graphData[item].nodes[0].x;
     let transY = 100 - minY;
     window["lf" + item].translate(0, -80);
     let height = maxY - minY + 250;
       $(`#container${item}>div`)[0].style.height = height + "px";
     window["lf" + item].updateEditConfig({
       stopMoveGraph: true,
     });
   });
 }

</script>

<style> 

 div[id^="container"] {
   width: 100%;
   height: 100%;
   overflow: auto;
 }

 div[id^="container"] > div {
   min-height: 100%;
   min-width: 300px;
 }

 .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/d/db/2whq3zy81qiae1c0enr2wzgfzdxdvpw.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-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: #96979b;
   font-size: 15px;
   margin: 8px 0;
 }

 .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/8/87/aqpjalt6vb47orq6ucsxgb6eucd7jsc.png);
   width: 70px;
   text-align: center;
   color: #c7e6f7;
   font-size: 16px;
 }

 .spend-coin img {
   width: 18px;
   margin-top: -4px;
 }

 .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;
 }

 .partnerGene.active {
   background-image: url(https://patchwiki.biligame.com/images/lysk/8/80/9hxrjj6rbw33jopqagorglfmq5ccq4b.png);
   background-repeat: no-repeat;
   background-position: 11px -10px;
 }

 .partner-genes {
   width: 100%;
   display: flex;
   flex-direction: row;
   gap: 10px;
   margin-top: 10px;
 }

 .partner-genes > .left-partner {
   flex: 1;
   min-width: 200px;
   height: calc(100vh - 100px);
   padding: 20px;
   text-align: center;
 }

 .partner-genes > .left-container {
   flex: 1;
   min-width: 300px;
   height: calc(100vh - 100px);
 }

 .partner-genes > .right-container {
   flex: 1;
   padding: 10px;
   position: relative;
   max-height: calc(100vh - 100px);
   overflow: auto;
 }

 .top-name {
   background: url(https://patchwiki.biligame.com/images/lysk/7/76/0ww8up3kow9gqm16w620606d7ev0r20.png)
     no-repeat center left;
   height: 50px;
   color: #fff;
   line-height: 3;
   font-size: 20px;
   padding-left: 15px;
   margin-left: 20px;
   margin-bottom: 10px;
 }
 .top-partner {
   margin-left: 20px;
   display: flex;
 }
 .top-box {
   background: url(https://patchwiki.biligame.com/images/lysk/d/d8/okw16xv0enaj48grj99r9cpqskdmred.png)
     no-repeat center center;
   background-size: cover;
   width: 105px;
   height: 130px;
   margin-right: 10px;
   margin-bottom: 10px;
   text-align: center;
   color: #fbe1cb;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 14px;
   cursor: pointer;
   position: relative;
 }
 .top-box.active::after {
   content: "";
   background: url(https://patchwiki.biligame.com/images/lysk/3/3e/tva3qn9gxhuowp4lsylwte1lff3vxwj.png)
     no-repeat center center;
   display: block;
   position: absolute;
   width: 70px;
   height: 120px;
   left: 17px;
   top: 0;
 }
 .top-box.active .headBox {
   background: url(https://patchwiki.biligame.com/images/lysk/a/a7/g5smlk8elm0wn1swaffs4sluu5v158n.png)
     no-repeat center center;
 }
 .headBox {
   background: url(https://patchwiki.biligame.com/images/lysk/4/42/cy8jzfxyzuccn4oh59pcfh9xllpj5ou.png)
     no-repeat center center;
   width: 76px;
   height: 76px;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .headBox img {
   object-fit: contain;
   width: 80%;
   height: 80%;
 }
 @media screen and (max-width: 768px) {
   .partner-genes {
     display: block !important;
   }
   .left-container {
     width: 100%;
     height: 100% !important;
     margin-bottom: 10px;
   }
   .geneScrollbar {
     overflow: hidden !important;
   }
   .desc-line > .spend-coin {
     margin: 20px calc((100% - 70px) / 2) !important;
   }
   .partner-genes > .left-partner {
     height: 100%;
   }
 }

</style>

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