Widget:推荐阅读流程图

<body>

</body> <script>

   const { DndPanel, Menu, Control, MiniMap, SelectionSelect } = Extension;
   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, MainTitleBox, SubTitleBox, ExtendedReadBox]);
   lf.extension.hoverNode.openHoverPanel();

   let graphData, graphModel;
   // 从指定文件读取json数据
   async function getFlowData() {
       graphData = await $.getJSON(`https://wiki.biligame.com/lysk/MediaWiki:.json?action=raw`);
       console.log('流程数据：', graphData);
       lf.render(graphData);  //渲染
       graphModel = lf.graphModel;
       changeLetterSpacing();
       initGraph();
       //setTimeout(()=>{lf.fitView(50, 100);},500)
   }
   // 从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;
               changeLetterSpacing();
               initGraph();
           };
           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" });
           }
       };
   }
   // 更改标题节点的字间距
   const changeLetterSpacing = () => {
       let titleNodes = $('.title-node');
       for (let i = 0; i < titleNodes.length; i++) {
           titleNodes[i].parentElement.parentElement.nextSibling.childNodes[0].setAttribute('letter-spacing', 10)
       }
   }
   function initGraph() {
       // 计算画布偏移和画布宽高
       let minX = graphData.nodes[0].x, maxX = graphData.nodes[0].x;
       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 + node.properties.height > maxY ? node.y + node.properties.height : maxY;
           minX = node.x < minX ? node.x : minX;
           maxX = node.x + node.properties.width > maxX ? node.x + node.properties.width : maxX;
       }
       let conWidth = $('#container')[0].clientWidth === 0 ? window.innerWidth * 0.9 : $('#container')[0].clientWidth;

       zoomRate = conWidth / (maxX - minX + 350);
       zoomRate = zoomRate > 1 ? 1 : zoomRate;
       console.log('缩放比率：', zoomRate);
       lf.zoom(zoomRate);

       // let transX = (conWidth / 2 - minX / 2) * zoomRate - 150;
       let transX = (minX + maxX) / 2 * zoomRate - conWidth / 2;
       let transY = 100 - minY * zoomRate;
       lf.translate(transX, transY);
       let height = (maxY - minY) * zoomRate - 300;
       $('#container>div')[0].style.height = height + 'px';
       $('#container>div')[0].style['min-height'] = '100%';
       lf.updateEditConfig({ stopMoveGraph: true, });
   }
 
   getFlowData();
   //loadDatafromDB();

</script> <style>

 /* .main-line-node,

.world-deep-node, .date-plot-node, .activity-plot-node, .phone-info-node */

 .lf-graph {
       background: transparent;
   }

.node-div {

   width: 100%;
   height: 100%;
   background-image: url(https://patchwiki.biligame.com/images/lysk/5/51/241yaplcz3ortw7m1n5o2fn37sotr7o.png);
   background-size: 100% 90%;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
   box-sizing: border-box;

}

.main-title-node::after {

   content: attr(data-text);
   position: absolute;
   line-height: 100%;
   left: 20px;
   top: 55px;
   font-size: 24px;
   letter-spacing: 10px;
   transform: scaleY(-1);
   transform-origin: top;
   background: linear-gradient(to bottom, transparent 30%, #aa79525c);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;

}

.sub-title-node {

   background-image: url(https://patchwiki.biligame.com/images/lysk/c/c1/c2xu5ggcepuj340avoyfrf782dxudm7.png);
   background-size: contain;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;

}

.sub-title-node::after {

   content: attr(data-text);
   position: absolute;
   line-height: 100%;
   left: 12px;
   top: 50px;
   font-size: 20px;
   letter-spacing: 10px;
   transform: scaleY(-1);
   transform-origin: top;
   background: linear-gradient(to bottom, transparent 30%, #aa79525c);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;

}

.group-node {

   width: 100%;
   height: 100%;
   border-width: 19px 20px 16px 10px;
   border-style: solid;
   border-image-source: url(https://patchwiki.biligame.com/images/lysk/0/00/5xlyzapkfe69krklaup1dwxxsod8f67.png);
   border-image-slice: 4% 6% 2% 3% fill;
   border-image-repeat: round;
   cursor: pointer;
   box-sizing: border-box;

}

.extended-read-node {

   width: 100%;
   height: 100%;
   background-image: url(https://patchwiki.biligame.com/images/lysk/5/57/cne0haqqiyjdpkww3qg54mxwfq2d3mo.png);
   background-size: 100% 100%;

}

node-page-panel {

   position: absolute;
   width: 250px;
   height: 150px;
   padding: 20px 25px;
   background-image: url(https://patchwiki.biligame.com/images/lysk/c/cb/cfp9bf0jkzu4ffyxeubrf4csbmbcxq4.png);
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
   box-sizing: border-box;

}

node-page-panel>.node-recommond {

   width: 100%;
   flex: 1;
   color: #aa7952;
   font-weight: bold;
   letter-spacing: 2px;

}

node-page-panel>.node-button {

   width: 90px;
   height: 25px;
   border: none;
   font-size: 13px;
   font-weight: bold;
   padding: 0;
   background-image: url(https://patchwiki.biligame.com/images/lysk/7/7f/8cfam9dgpmzkz2om9j2bjyyqeu9q9sf.png);
   background-size: 100% 113%;
   background-position: -2px 0px;
   background-repeat: no-repeat;
   background-color: transparent;
   letter-spacing: 4px;

}

container {

   width: 100%;
   height: calc(100vh - 20px);
   overflow: auto;

} .readFlowScrollbar {

   scrollbar-width: thin;
   scrollbar-color: #f4d8bb transparent;

}

buttons-tip {

   position: absolute;
   width: 500px;
   background-color: #fdaeae;
   border-radius: 5px;
   text-align: center;
   padding: 10px;
   top: 0;
   left: calc((100vw - 500px) / 2);

}

.overlay {

   position: absolute;
   width: 80%;
   height: 80%;
   font-size: 10px;
   overflow: auto;
   top: 10%;
   left: 10%;
   background: #e1dddd;
   padding: 20px;

}

.right-panel {

   position: absolute;
   height: 450px;
   width: 200px;
   right: 0;
   bottom: 0;
   background-color: #ddd;
   padding: 10px;

}

.lf-dndpanel {

   top: 60px;
   padding: 5px;
   margin: 0;

}

.lf-control {

   right: unset !important;

}

.custom-minimap {

   background: url(data:image/png;base64,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);

}

.input-json {

   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAi1JREFUWEftl7+LE0EUx98bUsQfjWAjWJizTCOolQg5rGyuEYP+A1eIlkqKzM6bHSFoICJ4hfFfuOaws/G0EUTt9ErlLCysUkSIxHk6snvEsLOzm+RMk22W3Tfv+z77nbezswhLPnDJ9WEF8NeBVqt1olqt1qy1NSFEDQDWmNmd95n5gxBibzQa7XU6ne9FpoyIGsysfGO11utp7J8p6Ha7x4bD4U0AuMHMVzIE+tbavjHmfR5IAvAyB+CgrrcHlFL3AOCBR6SPiI+J6FNW3AFk3WfmRwBwTmsdBnACUsrzQoh3WWKI+BEAmj6IrByllHOlURjAiRDRSWbOnPuyEDMBJE5cFkK89jlRqVSuttvtr6EGnRkgceIhM9/1FHmitb5z2ABnmPmzrwgi1ojoSx5EKQeklBenxYQQESKe8nT4N2ttPBE7aox5NTm2FAARHWdm17UXQtZOxxHxjet2Ivo5M4BLNMacHY/HuwBwuiiEmyZEdK/a/nROKQfSZCnlJSGEg6gUgPiBiOtE9HZh64ATiqLoGiJuhwD+fDc24jh+7hsXdCCKIkJElTyFe+qDg4huMfOWT5yZN+M4fjbXW5AHkKwFMTPLjKaTRHQ/5NBcDqTiSqmnALCZXiPiFhHdDhV38YUAJEI7ALABANta6+tFii8UoNfrHRkMBi/q9Xqj2Wz++u8ARQuWXgdCTThr4Yn+yd8PrABSB+a1OpTv3ZItHSBEfhjx1a/Z0h34DcmTODBHFVvwAAAAAElFTkSuQmCC);

}

.log-json {

   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjpJREFUWEftlr9rFEEUx9/b4xAE/wBt1D6Faa3UWhEbvVJQiD8a/4C7me/MsmCnnRgICjYBIRKxNwgBA3baWGgUYhMEKyEc5zxvjl3Z29u9u73duE2mnJ157/O+78csU8OLG/ZPRwC1KwBAAbDzpnYMAMC+iORCOecuhWH4cZZhrbU/884Yc3/WWf89C/BLRI4R0Z/sZefc+RIAS0S0wcw3AAymgYwBaK2FiLaMMRfnoc87A+CriJwdRce8TUQdAHtF9moDAHCZiB4S0fEEIIb4EkN8yIOoDADgHBFZEbkSO9xNA/g9EfkdBIFX4k0WohIAgAtE9FxETieGmXkCIPkmIrettWtpiIUBlFJXiegFM58YMzgFIFaja62N/gGnL89bhFEUnez3+z6npyYknQHAzCsAVisBKKXAzDq3qIoBDuK2fF0pBdOiLypCIvrmnOuEYbhTuQgLot8nonXn3HoQBF5eP4iS9b7dbne63e73WtpQa/1sGNHNVNVvt1qtW71e77Pfi0fxCICZN+MZcFDbINJavx1OS99+fq0aY1YyhezfgiVmfgrgTvItvkfZKVu6DbXWu8PeP0NEL40x17ORxQpsGGPGirSowxYB8O/F3lDeZQA/swBKqbvW2ic5YLnvTGkAAJ+cc2vW2kdFec3br1OBzcFgcC+Koh+NAAB4DOBBGedxd9STAqXUNWvtq8YAyjpOtWE9CvwXgEWdzLjnh9fE715eGx6S/5HZ6QCH6Xmut+AIoAkF/gI/+G0wykYAmgAAAABJRU5ErkJggg==);

}

.save-json {

   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAATtJREFUWEftl8uRgzAMQCO1k2O2gKSAXLcbQDat5JYilgKy15y2FmvXDPYQxiAR2DCZMRcwsqRn+SMZdhs/sLH/3QNAURQHADgvgULECxH9aG1EACI6MvOXVnGqHzN/WmuvGlsRoCxLAoCKmU1Q9G3/3f/Xydi/AYCG8p6OCiIJYK1tDVdV1ToyxiTXSkoeBtKBiRCrA3jHcyD+BWAOhApAWkxjU6SJhATgd8VRAGiMMaexPhLEJIA0cq18CuIlAMM1AQB7Irq3WzmMon8OhG2oHaG2X8pHBsgRyBHIEVgjF0jnUMwVsw+iUHBIHiR5yJZPA4ylW8nxsGLKAO8TAUVZLk1/K0+V9aH0Dyk/bkN/K0LEm8rywk7OuY+6rr8fChLf8Lcj55xUAy5yj4jNn58mRnmRtRWUN78d/wJKgfAwcdVvgAAAAABJRU5ErkJggg==);

}

.selection-open {

   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAnpJREFUWEfNV7+rE0EQngkW+QssRbS0tX/vYW8haCc8bSwiiFgFye7sBn+QwkL0FeJTEGy0U0vBWFjZKogiYmFh9QolNsl9Zs7dcO+Su+RCzryFwN5kd+bb2W9mZ5jWPHjN9mkCwFr7hog2mXlLRPrj3yYAlREA570XnVtrEUD3nXNbQZbu1blzLtVpjBFmtjqfoXOydx8AAG8bjYYaTwFkvaMy/c7KF5WFfanOJEn0kBsR/MG5gnVxYeIBvTMFEe+6LkB5O1Mc+B8AZnJAo0BJuDYAkd2R2XVdQd7OwYmCKh4QkYcA9prN5s12u71XxVuFHqjCAWvtYyLaJqLfAG57728sCiJkyOlEVAWAiGwDUBDpAPCDiG557+/PA1IIoEoeEJFjAL7mjTHzRwDeOfesCEhhHpiHPP+/tfYbER2dtY+Z3yVJ0vHep49Z2Vg6CjI8KNP/gpmvi8iHokVLZ0IRuQhgd94Jw3PcEpGdmd6KwiokDG/GidFoVHiyjLE+M18Skc8rBaDKyngQjO0451q1cECVjqPhyTgazhfeL/MVEblbGwBjTIuZ75UY+MPM50Tk1cpJGDxwEsD7jPLnRHQ2a0xzAxGdqYUDgQffiegIAPHeO2vtTyI6nAPxUkROr5yEqjBkti/e+6f63el0NrSwnWHsjnPuWl6+dCIqI5YxpsPMfsrYv3B8sM87iySSZdaIyGsAp/J7Y98Q5bUVpd1u9/hwOPxERIdCNlQyXs5XXPnOSLsYl+mM0s4mWyuGDio9QGwuijxkjLnAzI+YeXcwGFzt9Xq/CjkQn8lsZ6RdTNwQi9WwTtszXqSA1QqorM6shYRVOLN2AH8BG2CPMA76kPQAAAAASUVORK5CYII=);

}

.selection-close {

   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAUlJREFUWEftlj1Ow0AQhef5DkGipE1NTzgEOQSipPbOrvER4BCROIPhADQU1KkocgQXO2TR2jjrRIpEJm7WraV938y8+QFN/GFifcoAOxkwxjyLyB2AmVJp1kT0aq197N7vAeq6vmzb9ltEbFEUbxoA3vsFAAPgipkDzJ8HmHkhIo21VtUXxhgBcLvV+w2yF8sAOQM5AzkDZ8zACsATM39OMojSEX/2SagOEEpJRBtm/tq30OJ/UtsFxpgmrvNlClGWJcdtqLeMmHlORKsYfQ/RiYsIO+fs6B44ZRekEN77ZYg8FVftggHEhYjM9omrAoTHw4m3NeQ9gA0RhbqPjKnWhl3NiegFwE3qCVUPDAxnnXN8yJg7JfjPUdr1dHgwFe8iPQRxkrPce39dVdVHrHsjIu8h8nQQDSAeRoNI4ww/5k3VEzwDHJOBH1GDWDAXw4uYAAAAAElFTkSuQmCC);

}

.hoverpanel-open {

   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPFJREFUWEftlzEOgkAQRWcIBYl4E1t7OYKewNpWQkWYmRvYWHsCE28gl7CytvcGo1ssQSTGggWiu9UmS/Y/XrKzswgDDxw4H8YFkGXZNIqirUsrQRDsmPluM14MEJG6DLd7i0iVW02YeaGqZ0RMXELYjGdeaXJaAexi1yD1n/QA3sDvGkjTdBLH8bx+gsIwvOZ5fuvlFDDzRlX3dQBEvDDzrBeAoigYEalZQ0z18wDegDfgDfyHAWZeqeqxUQlLEUl6MfCpjfsKQFWl616wcTGRaXzf+gHzEREdAGDtEgAATiKybH0XOA5u3X5cT7O/NPAAJmqjMJ+vpdYAAAAASUVORK5CYII=);

}

.hoverpanel-close {

   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAYdJREFUWEftV7tOw0AQ3LGUkh6Jno4aIZqkpQfRoIBA4h9QdLfnAv8DAtEDLaIMBeFR09FS05PGAxclkhMO8rIdEcWSC/t8O3O7nr0biIgYYw6jKDoguemfi74AtNI0vYzj+AKqWiXZLBo0FB9AzRN4JLkhIvdDSFRH+GacdVQBPMFaSz+LpIvjWEMRrLU+Qx0CzrnaOCihb40xCsD6sQWBRQb+dwZ8D/m+h8lXVHVVVd96ishFBcaYbQBXInIDYE9VP4dI7sw5d9ztvNPLMENAANy22+16kiQfWRLZlYpIvgQGVyIizUqlUm80Gu+BsWvn3E6uJQgFI/kSRdF+mqa7vU4nIn3guZXgt1QDeCW51h3/AV4IgUDK/asg+HwS6NN12SXIgpf+Ew7ovFwZzrwRzbwVeznNdDOa5lyYy264IDB/GQBwp6pbZRgTVX0mud4xJqr6kDGlf53v8rBmyyRXACx1wIEWvDMGcD5NTSedS/IIvYYiIqddkzppvJHneVMqIif+RP0Fs9tU/h3esY0AAAAASUVORK5CYII=);

}

.lf-dnd-item {

   font-size: 10px;

}

.lf-dnd-item>.lf-dnd-shape {

   background-size: 90%;
   height: 30px;

}

.lf-node-text--auto-wrap-inner {

   font-weight: bold;
   font-size: 18px;

}

</style>