bugfix250107.1
全站通知：

Widget:推荐阅读流程图

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

<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>

</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>

取自“https://wiki.biligame.com/lysk/index.php?title=Widget:推荐阅读流程图&oldid=72288”