查看“Widget:搭档基因流程图”的源代码

<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>
  <div id="allIn"></div>
</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:<!--{$jsonFile}-->.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 += `<div id="daDang${index}">
    <div class="top-name"></div>
    <div class="top-partner"></div>
    <div class="partner-genes">
      <div class="left-partner"></div>
      <div class="left-container">
        <div id="container${index}" class="geneScrollbar"></div>
      </div>
      <div class="right-container whiteScrollbar"></div>
    </div></div>`;
    });
    $("#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 += `<div class="top-box active">`;
        } else {
          htmlStr += `<div class="top-box">`;
        }
        htmlStr += `
      <div class="headBox">
        <img
          src="${item.partnerHeadUrl}"
        />
      </div>
      <div class="nameBox">${item.partnerName}</div>
    </div>`;
      });
      $(`#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 = `<div class="desc-container">
                <div class="name-line">
                    <div class="gene-icon"><img src="${currentNode.properties.iconURL}"></div>
                    <div class="gene-name">${currentNode.properties.title}</div>
                </div>
                <div class="desc-line">
                    <div class="effect-desc">${currentNode.properties.effectDesc}</div>
                    <div class="text-desc">${currentNode.properties.textDesc}</div>
                    <p></p><img src="https://patchwiki.biligame.com/images/lysk/b/bd/o8a9l2wh7kagi9i15n13343skxzlb3b.png"/>
                    <div class="spend-coin"><img src="https://patchwiki.biligame.com/images/lysk/b/b7/bq4rzsfalj3lchnscspc49ozmgqsjw5.png">  ${currentNode.properties.spendCoin}</div>
                </div>
            </div>`;
        $(`#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>