pagemap

这是一个能快速为你的网页中的 dom 内容生成小地图的组件，使用 querySelector，默认使用 dom 背景色，可以进行拖拽以滚动页面。

This is a component that can quickly generate a mini map for the dom content in your webpage. It uses querySelector and defaults to the dom background color, allowing for drag and drop to scroll the page.

用例 Usage

CSS

#map {
  position: fixed;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  z-index: 100;
}

HTML

<canvas id="map"></canvas>

Script

<script src="./pagemap.js"></script>;

var pageInstance = null;

document.addEventListener("DOMContentLoaded", () => {
  // pageMap使用需要等到页面加载完成
  pageInstance = pagemap(document.querySelector("#map"), {
    // viewport: document.getElementById("board"),
    viewport: null,
    styles: {
      // 注意：要展示在前面的元素要写在后面
      // "#topPanel": "rgba(0,0,0,0.08)",
      // ".list,.add-list": "rgba(0,0,0,0.3)",
      ".list,.add-list": "default",
      // ".card": "rgba(0,0,0,0.5)",
      ".card": "default",
      // "h2,h3,h4": "rgba(0,0,0,0.08)",
    },
    back: "rgba(0,0,0,0.2)",
    // view: "rgba(0,0,0,0.4)",
    // drag: "rgba(0,0,0,0.4)",
    view: "default",
    drag: "rgba(0,0,0,0.4)",
    interval: null,
  });
});

刷新 Refresh

有两种方式：

一种是设置 styles.interval （单位：ms），minimap 就会进行自动刷新：

if (settings.interval > 0) {
  setInterval(() => draw(), settings.interval);
}

一种是使用 api，在合适的逻辑点进行调用：

pageInstance.redraw();