查看“Widget:推荐阅读流程图”的源代码

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

<script src="/lysk/index.php?title=MediaWiki:CustomReadNode.js&action=raw&ctype=text/javascript"></script>  <!-- 引入自定义节点 -->

<body>
  <div id="container" class="readFlowScrollbar"></div>
</body>
<script>
    const { DynamicGroup, SelectionSelect } = Extension;
    const { LogicFlow } = Core;
    const lf = new LogicFlow({
        container: document.querySelector("#container"),
        edgeType: 'plotNodeLine',
        stopZoomGraph: true,
        stopScrollGraph: true,
        stopMoveGraph: true,
        adjustEdge: false,
        adjustEdgeStartAndEnd: false,
        adjustNodePosition: false,
        hideAnchors: true,
        nodeSelectedOutline: false,
        hoverOutline: false,
        nodeTextEdit: false,
        edgeTextEdit: false,
        textEdit: false,
        plugins: [HoverNode],
    });

    //注册自定义节点
    lf.batchRegister([MainLineBox, WorldDeepBox, DatePlotBox, ActivityPlotBox, PhoneInfoBox, GroupBox]);
    lf.extension.hoverNode.openHoverPanel();
    
    let graphData, graphModel;
    // 从indexedDB中读取数据
    const loadDatafromDB = () => {
        const request = indexedDB.open('readDatabase');
        request.onerror = function (event) {
            console.error('Database error: ', event.target.errorCode);
        };
        request.onsuccess = function (event) {
            const db = request.result;
            const transaction = db.transaction(['readDataStore'], 'readonly');
            const store = transaction.objectStore('readDataStore');
            const result = store.get('readData');
            result.onsuccess = function (event) {
                const data = result.result;
                if (data) {
                    graphData = JSON.parse(data.data);
                } else {
                    graphData = {};
                }
                console.log('流程数据：', graphData);
                lf.render(graphData);  //渲染
                graphModel = lf.graphModel;
            };
            result.onerror = function (event) {
                console.error('Error retrieving data.', event.target.errorCode);
            };
        }
        request.onupgradeneeded = function (event) {
            let db = event.target.result;
            if (!db.objectStoreNames.contains("readDataStore")) {
                db.createObjectStore("readDataStore", { keyPath: "id" });
            }
        };
    }
    loadDatafromDB();
  
</script>
<style>
    .main-line-node,
    .world-deep-node,
    .date-plot-node,
    .activity-plot-node,
    .phone-info-node {
        width: 100%;
        height: 100%;
        background-color: #EEEEEE;
        background-size: 100% 100%;
        cursor: pointer;
        border: 2px solid #BDBDBD;
        box-sizing: border-box;
    }
  
  #container{
      width: 100%;
      height: 700px;
  }
</style>