Widget:FatesAtlas2

       class FatesAtlasLine {
           constructor() {
               this.fatesAtlasLineInfo = [];
           }
       
           initializeFatesAtlasLine(id) {
               let fatesAtlasLine;
               if (id) {
                   fatesAtlasLine = [document.getElementById(id)];
               } else {
                   fatesAtlasLine = Array.from(document.querySelectorAll(".fatesAtlasLine:not(#fatesAtlasLine)"));
               }
               for(let i = 0; i < fatesAtlasLine.length; i++) {
                   if (this.fatesAtlasLineInfo.find(info => info.root === fatesAtlasLine[i])) {
                       continue;
                   }
                   let info = {};
                   info.root = fatesAtlasLine[i];
                   info.canvas = document.createElement("canvas");
                   info.root.getElementsByClassName("canvas")[0].appendChild(info.canvas);
                   /*info.canvas.style.position = "absolute";
                   info.canvas.style.zIndex = -1;
                   info.canvas.style.left = 0;
                   info.canvas.style.top = 0;*/
                   info.item = [];
                   this.fatesAtlasLineInfo.push(info);
       
                   info.canvas.width = info.root.clientWidth;
                   info.canvas.height = info.root.clientHeight;
                   let brush = info.canvas.getContext("2d");
                   brush.save();
                   brush.globalAlpha = 0.1;
                   let center = [info.canvas.width / 2, info.canvas.height / 2];
                   brush.restore();
                   let item = info.root.getElementsByClassName("fatesAtlasText");
                   for(let j = 0; j < item.length; j++) {
                       let index = item[j].dataset.index;
                       info.item[index] = {};
                       let rect = item[j].getBoundingClientRect();
                       let canvasRect = info.canvas.getBoundingClientRect();
                       info.item[index].top = rect.top - canvasRect.top;
                       info.item[index].bottom = info.item[index].top + rect.height;
                       info.item[index].left = rect.left - canvasRect.left;
                       info.item[index].right = info.item[index].left + rect.width;
                       info.item[index].wcenter = (info.item[index].left + info.item[index].right) / 2;
                       info.item[index].hcenter = (info.item[index].top + info.item[index].bottom) / 2;
                   }
               }
               this.drawfatesAtlasLine();
           }
       
           drawfatesAtlasLine() {
               for(let i = 0; i < this.fatesAtlasLineInfo.length; i++) {
                   let ligature = this.fatesAtlasLineInfo[i].root.dataset.ligature.split(",");
                   for(let j = 0; j < ligature.length; j++) {
                       let index = ligature[j].split("-");
                       let item1 = this.fatesAtlasLineInfo[i].item[index[0]];
                       let item2 = this.fatesAtlasLineInfo[i].item[index[1]];
                       if(item1 && item2) {
                           this.ettp2p(this.fatesAtlasLineInfo[i].canvas, [item1.right, item1.hcenter], [item2.left, item2.hcenter]);
                       }
                   }
               }
           }
       
           ettp2p(canvas, p1, p2) {
               let brush = canvas.getContext("2d");
               brush.lineWidth = 2;
               brush.strokeStyle = "#D0B18E";
               brush.beginPath();
               brush.moveTo(p1[0] + 2, p1[1]);
               if(p1[1] == p2[1]) {
                   brush.lineTo(p2[0] - 2 - 5, p2[1]);
               } else {
                   brush.lineTo(p2[0] - 45, p1[1]);
                   brush.lineTo(p2[0] - 45, p2[1]);
                   brush.lineTo(p2[0] - 2 - 5, p2[1]);
               }
               brush.stroke();
               brush.fillStyle = "#D0B18E";
               brush.moveTo(p2[0] - 2, p2[1]);
               brush.beginPath();
               brush.lineTo(p2[0] - 2 - 5, p2[1] + 5);
               brush.lineTo(p2[0] - 2 - 5, p2[1] - 5);
               brush.lineTo(p2[0] - 2, p2[1]);
               brush.closePath();
               brush.fill();
           }
       }
       
       let fatesAtlasLine = new FatesAtlasLine();
       fatesAtlasLine.initializeFatesAtlasLine("fatesAtlasLine");

       if ($('#fatesAtlasLine-content').length) {
           $("#fatesAtlasLine").on("click", ".fatesAtlas:not(.DT,.TBC)", function () {
               let pageName = this.getAttribute("data-name");
               $("#fatesAtlasLine-content").empty();
               $(`#fatesAtlasLine-content`).show();
               $(`.fatesAtlasLine-close`).show();
               $(`#fatesAtlasLine`).hide();
               //var transformValue = $('#myContent').css('transform');
               $("#myContent").css("transform", "");
               var api = new mw.Api();
               api.get({
                   action: "parse",
                   text: "命路歧图/" + pageName + "",
               }).then(function(ret) {
                   if (ret && ret.parse && ret.parse.text) {

var newDiv = $('

').html(ret.parse.text['*']);

                       var apicontent = newDiv.find('.fatesAtlasLine').removeAttr('id');
                       if (apicontent.length === 0) {

$("#fatesAtlasLine-content").html("

页面" + pageName + "未创建，请联系管理员

");

                           //panzoom.reset();
                       } else {
                           $("#fatesAtlasLine-content").append(apicontent);
                           setTimeout(function() {
                               fatesAtlasLine.initializeFatesAtlasLine();
                               //$("#myContent").css("transform", transformValue);
                               panzoom.reset();
                           }, 1000);
                       }
                       
                   }
                   else {

$("#fatesAtlasLine-content").html("

加载内容失败：请检查对象名或服务器状态。

");

                   }
               }).catch(function(error) {

$("#fatesAtlasLine-content").html("

加载内容失败：API 请求发生错误。

");

               });
           });
   
           $("body").on("click", ".fatesAtlasLine-close", function (e) {
               $(`#fatesAtlasLine`).show();
               $(`#fatesAtlasLine-content`).hide();
               $(`.fatesAtlasLine-close`).hide();
               $("#fatesAtlasLine-content").empty();
               panzoom.reset();
               //$("#myContent").css("transform", transformValue);
           });
       }

       $("body").on("click", ".fatesAtlas.infoBox", function (e) {
           $(`#fatesAtlasLine-infocontent`).show();
           $(".fatesAtlasLine-infocontent").empty();
           let infoName = $(this).data("name");
           let infoContent = $(`.fatesAtlasInfo[data-name="${infoName}"]>div`).clone();
           $(".fatesAtlasLine-infocontent").append(infoContent);
       });

       $("body").on("click", ".fatesAtlasLine-infoclose", function (e) {
           $(`#fatesAtlasLine-infocontent`).hide();
           $(".fatesAtlasLine-infocontent").empty();
       });

}); }])

</script> <script src="https://wiki.biligame.com/tools/MediaWiki:Panzoom.min.js?action=raw&ctype=text/javascript"></script> <script type="text/javascript"> (window.RLQ = window.RLQ || []).push([["jquery"], function () { $(document).ready(function(){

       // 新轮子
       window.panzoom = null;

       window.initializePanzoom = function() {
           const elem = document.getElementById("myContent");
 
           if (window.panzoom) {
               window.panzoom.destroy();
               elem.parentElement.removeEventListener("wheel", window.panzoom.zoomWithWheel);
           }
 
           window.panzoom = Panzoom(elem, {
               Optional: true,
               startScale:0.3,
               maxScale: 1,
               minScale: 0.3,
           });

           elem.parentElement.addEventListener("wheel", window.panzoom.zoomWithWheel);
           elem.parentElement.addEventListener("wheel", function (event) {
               if (!event.shiftKey) return;
               window.panzoom.zoomWithWheel(event);
           });
       }
       
       window.onload = window.initializePanzoom;

}); }]) </script>