查看“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="container" class="geneScrollbar"></div>
</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:<!--{$jsonFile}-->.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 = `<div class="desc-container">
                <div class="name-line">
                    <div class="gene-icon"><img src="${currentNode.properties.iconURL}"></div>
                    <div class="gene-name">${currentNode.text.value}</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/0/0f/k3eph588qmxqsdqbs5qf7heix1yqpu3.png"/>
                    <div class="spend-coin"><img src="https://patchwiki.biligame.com/images/lysk/e/eb/hrcen9zr23694b3h25zfwobi6q61oyn.png">  ${currentNode.properties.spendCoin}</div>
                </div>
            </div>`;
            $('.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>
#container {
  width: 100%;
  height: 100%;
  overflow: auto;
}
#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>