fix: bind minimap plugin to graph without scroller

[Indigo-w]

Description

bind minimap plugin to graph without scroller

Motivation and Context

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[x6-bot]

👋 @Indigo-w

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript, JavaScript, CSS and React coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (12ca0e1) 10.37% compared to head (71753b9) 10.36%.
Report is 33 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4167      +/-   ##
==========================================
- Coverage   10.37%   10.36%   -0.02%     
==========================================
  Files         180      180              
  Lines       10542    10563      +21     
  Branches     2566     2572       +6     
==========================================
+ Hits         1094     1095       +1     
- Misses       9359     9379      +20     
  Partials       89       89              

Flag	Coverage Δ
x6	10.36% <ø> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 4 files with indirect coverage changes

[x6-bot]

👋 @Indigo-w

Congrats on merging your first pull request! 🎉🎉🎉

[zhangfei1111]

你好想咨询下 小地图里内容太小了 如图

代码 如下 canvasTigo(list) {
this.angle = list.map((ele) => {
return {
angle: ele.r,
position: {
x: ele.x,
y: ele.y,
},
size: {
width: 65,
height: 80,
},
attrs: ele.sourceId
? {
text: {
fontSize: 10,
fill: "#fff",
refX: 32,
refY: 70,
text: ele.serial,
fontfamily: "SF Pro",
fontWeight: "normal",
"text-anchor": "middle",
},
body: {
stroke: "#ffffff",
strokeWidth: 1,
fill: "rgba(95,149,255,0.05)",
},
image: {
"xlink:href":
ele.runningStatus === "Normal"
? this.tigoImgList[
this.getPercent(ele.currentPower / ele.maxOutputPower)
]
: ele.runningStatus === "Fault"
? this.tigoImgList[5]
: this.tigoImgList[6],

              width: 65,
              height: 80,
              x: 0,
              y: 0,
            },
            label: {
              text:
                unitEnergyConversion(ele.energy / 1000).split(" ")[0] < 1
                  ? unitEnergyConversion(ele.energy / 1000).split(" ")[0] *
                    1000
                  : unitEnergyConversion(ele.energy / 1000).split(" ")[0],
              refX: 32,
              refY: 20,
              fill: ele.runningStatus === "Normal" ? "#ffffff" : "#606665",
              fontSize: 12,
              fontfamily: "SF Pro",
              fontWeight: 590,
              "text-anchor": "middle",
            },

            unit: {
              text:
                unitEnergyConversion(ele.energy / 1000).split(" ")[0] < 1
                  ? "Wh"
                  : unitEnergyConversion(ele.energy / 1000).split(" ")[1],
              refX: 32,
              refY: 40,
              fill:
                ele.runningStatus === "Normal"
                  ? "rgba(255, 255, 255, 0.8)"
                  : "#606665",
              fontSize: 10,
              fontfamily: "SF Pro",
              fontWeight: "normal",
              "text-anchor": "middle",
            },
          }
        : {
            image: {
              "xlink:href": this.tigoImgList[20],
              width: 65,
              height: 80,
              x: 0,
              y: 0,
            },
            text: {
              fontSize: 10,
              fill: "#606665",
              refX: 32,
              refY: 70,
              text: "1",
              fontfamily: "SF Pro",
              fontWeight: "normal",
              "text-anchor": "middle",
            },
          },
      visible: true,
      shape: "rect",
      id: ele.objectId,
      sourceId: ele.sourceId,
      targetId: ele.targetId,
      markup: [
        {
          tagName: "rect",
          selector: "body",
        },
        {
          tagName: "image",
          selector: "image",
        },
        {
          tagName: "text",
          selector: "label",
        },
        {
          tagName: "text",
          selector: "text",
        },
        {
          tagName: "text",
          selector: "unit",
        },
      ],
      zIndex: ele.zIndex,
    };
  });
  // 生成边（连接线）数据
  this.edges = list
    .filter((ele) => ele.sourceId && ele.targetId) // 过滤掉没有 sourceId 和 targetId 的项
    .map((ele) => {
      return {
        shape: "edge",
        attrs: {
          line: {
            stroke: "#a0a0a0", // 边的颜色
            strokeWidth: 1, // 边的宽度
            targetMarker: {
              name: "classic", // 目标端标记
              size: 7, // 标记大小
            },
          },
        },
        id: `${ele.sourceId}-${ele.targetId}`, // 唯一的 ID，可使用 sourceId 和 targetId 拼接
        source: {
          cell: ele.sourceId.toString(), // 设置源 ID
        },
        target: {
          cell: ele.targetId.toString(), // 设置目标 ID
        },
        zIndex: ele.zIndex, // 设置 z-index
      };
    });
  // 渲染节点
  this.angle.forEach((nodeData) => {
    this.graph.addNode({
      ...nodeData,
    });
  });
  // this.graph.fromJSON(angle.concat(edges));
  // 渲染边
  this.edges.forEach((edgeData) => {
    this.graph.addEdge({
      ...edgeData,
    });
  });
  // 检查是否已经存在 MiniMap，如果存在，先销毁
  if (this.minimap) {
    this.minimap.dispose(); // 销毁现有 MiniMap 实例
    this.minimap = null;
  }
  // 初始化 MiniMap 插件
  this.minimap = new MiniMap({
    container: document.getElementById("minimap-container"), // 小地图容器
    width: 120,
    height: 60,
    padding: 10,

    background: {
      color: "#e8e8e8", // 灰色背景
    },
    // viewport: {
    //   fill: "red", // 白色窗口
    //   // stroke: "#007acc", // 窗口边框颜色
    //   strokeWidth: 2,
    // },
    scalable: false, // 缩放
    maxScale: 16, // 最大缩放比例
    minScale: 1, // 最小缩放比例
    autoResize: true // 启用自动调整大小功能
    //  mode: "zoom-canvas"
  });
  // this.minimap.setZoom(2)
  // 将 MiniMap 插件挂载到 Graph
  this.graph.use(this.minimap);
  // this.graph.zoomToFit({ maxScale: 1 });
  this.graph.centerContent(); // 将画布中元素居中展示
  this.graph.zoomToFit();
  this.initZoom = this.graph.zoom();
  this.graph.options.scaling.min = this.initZoom; // 设置最小缩放比例
  this.lastScale = this.initZoom;
},