rendx-minimap-plugin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present wei.liang (https://github.com/weiliang0121)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/main.cjs

@@ -0,0 +1,254 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/main.ts
+var main_exports = {};
+__export(main_exports, {
+  minimapPlugin: () => minimapPlugin
+});
+module.exports = __toCommonJS(main_exports);
+
+// src/minimap.ts
+var DEFAULTS = {
+  width: 150,
+  height: 110,
+  position: "bottom-right",
+  margin: 10,
+  background: "rgba(255,255,255,0.9)",
+  borderColor: "#ccc",
+  viewportColor: "rgba(24,144,255,0.8)",
+  nodeFill: "#999"
+};
+var _app, _wrapper, _canvas, _ctx, _options, _ratio, _MinimapPlugin_instances, createElements_fn;
+var MinimapPlugin = class {
+  constructor(options = {}) {
+    __privateAdd(this, _MinimapPlugin_instances);
+    this.name = "minimap";
+    __privateAdd(this, _app, null);
+    __privateAdd(this, _wrapper, null);
+    __privateAdd(this, _canvas, null);
+    __privateAdd(this, _ctx, null);
+    __privateAdd(this, _options);
+    __privateAdd(this, _ratio, 1);
+    __privateSet(this, _options, { ...DEFAULTS, ...options });
+  }
+  install(app) {
+    __privateSet(this, _app, app);
+    const container = app.container;
+    if (!container) {
+      throw new Error(
+        "[rendx-minimap-plugin] App must be mounted before calling use(). Call app.mount(el) first, then app.use(minimapPlugin(...))."
+      );
+    }
+    __privateSet(this, _ratio, window.devicePixelRatio || 1);
+    __privateMethod(this, _MinimapPlugin_instances, createElements_fn).call(this, container);
+    this.draw();
+  }
+  /**
+   * 绘制小地图：
+   * 1. 计算场景总包围盒
+   * 2. 缩放到小地图尺寸
+   * 3. 为每个节点绘制简化矩形
+   * 4. 绘制视口指示器
+   */
+  draw() {
+    const ctx = __privateGet(this, _ctx);
+    const app = __privateGet(this, _app);
+    if (!ctx || !app) return;
+    const { width, height, nodeFill, viewportColor } = __privateGet(this, _options);
+    ctx.clearRect(0, 0, width, height);
+    const entries = [];
+    let sceneMinX = Infinity, sceneMinY = Infinity;
+    let sceneMaxX = -Infinity, sceneMaxY = -Infinity;
+    for (const layer of app.scene.layers) {
+      if (layer.isEventLayer) continue;
+      const queue = layer.getQueue();
+      for (const node of queue) {
+        const bb = node.getWorldBBox();
+        if (!bb) continue;
+        const minX = bb.x, minY = bb.y, maxX = bb.right, maxY = bb.bottom;
+        entries.push({ node, minX, minY, maxX, maxY });
+        if (minX < sceneMinX) sceneMinX = minX;
+        if (minY < sceneMinY) sceneMinY = minY;
+        if (maxX > sceneMaxX) sceneMaxX = maxX;
+        if (maxY > sceneMaxY) sceneMaxY = maxY;
+      }
+    }
+    const appW = app.cfg.width ?? 800;
+    const appH = app.cfg.height ?? 600;
+    if (sceneMinX > sceneMaxX) {
+      sceneMinX = 0;
+      sceneMinY = 0;
+      sceneMaxX = appW;
+      sceneMaxY = appH;
+    }
+    sceneMinX = Math.min(sceneMinX, 0);
+    sceneMinY = Math.min(sceneMinY, 0);
+    sceneMaxX = Math.max(sceneMaxX, appW);
+    sceneMaxY = Math.max(sceneMaxY, appH);
+    const sceneW = sceneMaxX - sceneMinX || 1;
+    const sceneH = sceneMaxY - sceneMinY || 1;
+    const pad = 4;
+    const drawW = width - pad * 2;
+    const drawH = height - pad * 2;
+    const scale = Math.min(drawW / sceneW, drawH / sceneH);
+    const offsetX = pad + (drawW - sceneW * scale) / 2;
+    const offsetY = pad + (drawH - sceneH * scale) / 2;
+    const tx = (x) => offsetX + (x - sceneMinX) * scale;
+    const ty = (y) => offsetY + (y - sceneMinY) * scale;
+    for (const { node, minX, minY, maxX, maxY } of entries) {
+      const fill = node.attrs.values.fill || nodeFill;
+      ctx.fillStyle = fill;
+      ctx.globalAlpha = 0.6;
+      ctx.fillRect(tx(minX), ty(minY), (maxX - minX) * scale, (maxY - minY) * scale);
+    }
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = viewportColor;
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(tx(0), ty(0), appW * scale, appH * scale);
+  }
+  resize() {
+    this.draw();
+  }
+  /** 更新配置并重绘 */
+  update(options) {
+    const needReposition = options.position !== void 0 || options.margin !== void 0;
+    Object.assign(__privateGet(this, _options), options);
+    if (__privateGet(this, _wrapper)) {
+      if (options.background) __privateGet(this, _wrapper).style.background = options.background;
+      if (options.borderColor) __privateGet(this, _wrapper).style.border = `1px solid ${options.borderColor}`;
+      if (options.width !== void 0 || options.height !== void 0) {
+        const { width, height } = __privateGet(this, _options);
+        __privateGet(this, _wrapper).style.width = `${width}px`;
+        __privateGet(this, _wrapper).style.height = `${height}px`;
+        if (__privateGet(this, _canvas)) {
+          __privateGet(this, _canvas).width = width * __privateGet(this, _ratio);
+          __privateGet(this, _canvas).height = height * __privateGet(this, _ratio);
+          __privateGet(this, _canvas).style.width = `${width}px`;
+          __privateGet(this, _canvas).style.height = `${height}px`;
+          if (__privateGet(this, _ctx)) __privateGet(this, _ctx).scale(__privateGet(this, _ratio), __privateGet(this, _ratio));
+        }
+      }
+      if (needReposition) {
+        const { position, margin } = __privateGet(this, _options);
+        __privateGet(this, _wrapper).style.top = "";
+        __privateGet(this, _wrapper).style.right = "";
+        __privateGet(this, _wrapper).style.bottom = "";
+        __privateGet(this, _wrapper).style.left = "";
+        switch (position) {
+          case "top-left":
+            __privateGet(this, _wrapper).style.top = `${margin}px`;
+            __privateGet(this, _wrapper).style.left = `${margin}px`;
+            break;
+          case "top-right":
+            __privateGet(this, _wrapper).style.top = `${margin}px`;
+            __privateGet(this, _wrapper).style.right = `${margin}px`;
+            break;
+          case "bottom-left":
+            __privateGet(this, _wrapper).style.bottom = `${margin}px`;
+            __privateGet(this, _wrapper).style.left = `${margin}px`;
+            break;
+          case "bottom-right":
+          default:
+            __privateGet(this, _wrapper).style.bottom = `${margin}px`;
+            __privateGet(this, _wrapper).style.right = `${margin}px`;
+            break;
+        }
+      }
+    }
+    this.draw();
+  }
+  dispose() {
+    if (__privateGet(this, _wrapper)) {
+      __privateGet(this, _wrapper).remove();
+      __privateSet(this, _wrapper, null);
+      __privateSet(this, _canvas, null);
+      __privateSet(this, _ctx, null);
+    }
+    __privateSet(this, _app, null);
+  }
+};
+_app = new WeakMap();
+_wrapper = new WeakMap();
+_canvas = new WeakMap();
+_ctx = new WeakMap();
+_options = new WeakMap();
+_ratio = new WeakMap();
+_MinimapPlugin_instances = new WeakSet();
+createElements_fn = function(container) {
+  const { width, height, position, margin, background, borderColor } = __privateGet(this, _options);
+  const wrapper = document.createElement("div");
+  wrapper.style.position = "absolute";
+  wrapper.style.width = `${width}px`;
+  wrapper.style.height = `${height}px`;
+  wrapper.style.zIndex = "99998";
+  wrapper.style.pointerEvents = "none";
+  wrapper.style.background = background;
+  wrapper.style.border = `1px solid ${borderColor}`;
+  wrapper.style.borderRadius = "4px";
+  wrapper.style.overflow = "hidden";
+  wrapper.style.boxSizing = "border-box";
+  switch (position) {
+    case "top-left":
+      wrapper.style.top = `${margin}px`;
+      wrapper.style.left = `${margin}px`;
+      break;
+    case "top-right":
+      wrapper.style.top = `${margin}px`;
+      wrapper.style.right = `${margin}px`;
+      break;
+    case "bottom-left":
+      wrapper.style.bottom = `${margin}px`;
+      wrapper.style.left = `${margin}px`;
+      break;
+    case "bottom-right":
+    default:
+      wrapper.style.bottom = `${margin}px`;
+      wrapper.style.right = `${margin}px`;
+      break;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width * __privateGet(this, _ratio);
+  canvas.height = height * __privateGet(this, _ratio);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  wrapper.appendChild(canvas);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("[rendx-minimap-plugin] Could not get 2d context");
+  ctx.scale(__privateGet(this, _ratio), __privateGet(this, _ratio));
+  container.appendChild(wrapper);
+  __privateSet(this, _wrapper, wrapper);
+  __privateSet(this, _canvas, canvas);
+  __privateSet(this, _ctx, ctx);
+};
+function minimapPlugin(options) {
+  return new MinimapPlugin(options);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  minimapPlugin
+});

package/dist/main.d.cts

@@ -0,0 +1,57 @@
+import { Plugin, App } from 'rendx-engine';
+
+interface MinimapPluginOptions {
+    /** 小地图宽度（px），默认 150 */
+    width?: number;
+    /** 小地图高度（px），默认 110 */
+    height?: number;
+    /** 位置，默认 'bottom-right' */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** 距容器边缘的间距（px），默认 10 */
+    margin?: number;
+    /** 背景色，默认 'rgba(255,255,255,0.9)' */
+    background?: string;
+    /** 边框色，默认 '#ccc' */
+    borderColor?: string;
+    /** 视口指示器边框色，默认 'rgba(24,144,255,0.8)' */
+    viewportColor?: string;
+    /** 节点默认填充色（当节点无 fill 时），默认 '#999' */
+    nodeFill?: string;
+}
+declare class MinimapPlugin implements Plugin {
+    #private;
+    name: string;
+    constructor(options?: MinimapPluginOptions);
+    install(app: App): void;
+    /**
+     * 绘制小地图：
+     * 1. 计算场景总包围盒
+     * 2. 缩放到小地图尺寸
+     * 3. 为每个节点绘制简化矩形
+     * 4. 绘制视口指示器
+     */
+    draw(): void;
+    resize(): void;
+    /** 更新配置并重绘 */
+    update(options: Partial<MinimapPluginOptions>): void;
+    dispose(): void;
+}
+/**
+ * 创建小地图插件
+ *
+ * @example
+ * ```ts
+ * import {minimapPlugin} from 'rendx-minimap-plugin';
+ *
+ * const app = new App({width: 800, height: 600});
+ * app.mount(container);
+ * app.use(minimapPlugin({position: 'bottom-right'}));
+ *
+ * // 场景变化后手动刷新小地图
+ * app.render();
+ * (app.getPlugin('minimap') as any).draw();
+ * ```
+ */
+declare function minimapPlugin(options?: MinimapPluginOptions): MinimapPlugin;
+
+export { type MinimapPluginOptions, minimapPlugin };

package/dist/main.d.ts

@@ -0,0 +1,57 @@
+import { Plugin, App } from 'rendx-engine';
+
+interface MinimapPluginOptions {
+    /** 小地图宽度（px），默认 150 */
+    width?: number;
+    /** 小地图高度（px），默认 110 */
+    height?: number;
+    /** 位置，默认 'bottom-right' */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** 距容器边缘的间距（px），默认 10 */
+    margin?: number;
+    /** 背景色，默认 'rgba(255,255,255,0.9)' */
+    background?: string;
+    /** 边框色，默认 '#ccc' */
+    borderColor?: string;
+    /** 视口指示器边框色，默认 'rgba(24,144,255,0.8)' */
+    viewportColor?: string;
+    /** 节点默认填充色（当节点无 fill 时），默认 '#999' */
+    nodeFill?: string;
+}
+declare class MinimapPlugin implements Plugin {
+    #private;
+    name: string;
+    constructor(options?: MinimapPluginOptions);
+    install(app: App): void;
+    /**
+     * 绘制小地图：
+     * 1. 计算场景总包围盒
+     * 2. 缩放到小地图尺寸
+     * 3. 为每个节点绘制简化矩形
+     * 4. 绘制视口指示器
+     */
+    draw(): void;
+    resize(): void;
+    /** 更新配置并重绘 */
+    update(options: Partial<MinimapPluginOptions>): void;
+    dispose(): void;
+}
+/**
+ * 创建小地图插件
+ *
+ * @example
+ * ```ts
+ * import {minimapPlugin} from 'rendx-minimap-plugin';
+ *
+ * const app = new App({width: 800, height: 600});
+ * app.mount(container);
+ * app.use(minimapPlugin({position: 'bottom-right'}));
+ *
+ * // 场景变化后手动刷新小地图
+ * app.render();
+ * (app.getPlugin('minimap') as any).draw();
+ * ```
+ */
+declare function minimapPlugin(options?: MinimapPluginOptions): MinimapPlugin;
+
+export { type MinimapPluginOptions, minimapPlugin };

package/dist/main.js

@@ -0,0 +1,228 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/minimap.ts
+var DEFAULTS = {
+  width: 150,
+  height: 110,
+  position: "bottom-right",
+  margin: 10,
+  background: "rgba(255,255,255,0.9)",
+  borderColor: "#ccc",
+  viewportColor: "rgba(24,144,255,0.8)",
+  nodeFill: "#999"
+};
+var _app, _wrapper, _canvas, _ctx, _options, _ratio, _MinimapPlugin_instances, createElements_fn;
+var MinimapPlugin = class {
+  constructor(options = {}) {
+    __privateAdd(this, _MinimapPlugin_instances);
+    this.name = "minimap";
+    __privateAdd(this, _app, null);
+    __privateAdd(this, _wrapper, null);
+    __privateAdd(this, _canvas, null);
+    __privateAdd(this, _ctx, null);
+    __privateAdd(this, _options);
+    __privateAdd(this, _ratio, 1);
+    __privateSet(this, _options, { ...DEFAULTS, ...options });
+  }
+  install(app) {
+    __privateSet(this, _app, app);
+    const container = app.container;
+    if (!container) {
+      throw new Error(
+        "[rendx-minimap-plugin] App must be mounted before calling use(). Call app.mount(el) first, then app.use(minimapPlugin(...))."
+      );
+    }
+    __privateSet(this, _ratio, window.devicePixelRatio || 1);
+    __privateMethod(this, _MinimapPlugin_instances, createElements_fn).call(this, container);
+    this.draw();
+  }
+  /**
+   * 绘制小地图：
+   * 1. 计算场景总包围盒
+   * 2. 缩放到小地图尺寸
+   * 3. 为每个节点绘制简化矩形
+   * 4. 绘制视口指示器
+   */
+  draw() {
+    const ctx = __privateGet(this, _ctx);
+    const app = __privateGet(this, _app);
+    if (!ctx || !app) return;
+    const { width, height, nodeFill, viewportColor } = __privateGet(this, _options);
+    ctx.clearRect(0, 0, width, height);
+    const entries = [];
+    let sceneMinX = Infinity, sceneMinY = Infinity;
+    let sceneMaxX = -Infinity, sceneMaxY = -Infinity;
+    for (const layer of app.scene.layers) {
+      if (layer.isEventLayer) continue;
+      const queue = layer.getQueue();
+      for (const node of queue) {
+        const bb = node.getWorldBBox();
+        if (!bb) continue;
+        const minX = bb.x, minY = bb.y, maxX = bb.right, maxY = bb.bottom;
+        entries.push({ node, minX, minY, maxX, maxY });
+        if (minX < sceneMinX) sceneMinX = minX;
+        if (minY < sceneMinY) sceneMinY = minY;
+        if (maxX > sceneMaxX) sceneMaxX = maxX;
+        if (maxY > sceneMaxY) sceneMaxY = maxY;
+      }
+    }
+    const appW = app.cfg.width ?? 800;
+    const appH = app.cfg.height ?? 600;
+    if (sceneMinX > sceneMaxX) {
+      sceneMinX = 0;
+      sceneMinY = 0;
+      sceneMaxX = appW;
+      sceneMaxY = appH;
+    }
+    sceneMinX = Math.min(sceneMinX, 0);
+    sceneMinY = Math.min(sceneMinY, 0);
+    sceneMaxX = Math.max(sceneMaxX, appW);
+    sceneMaxY = Math.max(sceneMaxY, appH);
+    const sceneW = sceneMaxX - sceneMinX || 1;
+    const sceneH = sceneMaxY - sceneMinY || 1;
+    const pad = 4;
+    const drawW = width - pad * 2;
+    const drawH = height - pad * 2;
+    const scale = Math.min(drawW / sceneW, drawH / sceneH);
+    const offsetX = pad + (drawW - sceneW * scale) / 2;
+    const offsetY = pad + (drawH - sceneH * scale) / 2;
+    const tx = (x) => offsetX + (x - sceneMinX) * scale;
+    const ty = (y) => offsetY + (y - sceneMinY) * scale;
+    for (const { node, minX, minY, maxX, maxY } of entries) {
+      const fill = node.attrs.values.fill || nodeFill;
+      ctx.fillStyle = fill;
+      ctx.globalAlpha = 0.6;
+      ctx.fillRect(tx(minX), ty(minY), (maxX - minX) * scale, (maxY - minY) * scale);
+    }
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = viewportColor;
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(tx(0), ty(0), appW * scale, appH * scale);
+  }
+  resize() {
+    this.draw();
+  }
+  /** 更新配置并重绘 */
+  update(options) {
+    const needReposition = options.position !== void 0 || options.margin !== void 0;
+    Object.assign(__privateGet(this, _options), options);
+    if (__privateGet(this, _wrapper)) {
+      if (options.background) __privateGet(this, _wrapper).style.background = options.background;
+      if (options.borderColor) __privateGet(this, _wrapper).style.border = `1px solid ${options.borderColor}`;
+      if (options.width !== void 0 || options.height !== void 0) {
+        const { width, height } = __privateGet(this, _options);
+        __privateGet(this, _wrapper).style.width = `${width}px`;
+        __privateGet(this, _wrapper).style.height = `${height}px`;
+        if (__privateGet(this, _canvas)) {
+          __privateGet(this, _canvas).width = width * __privateGet(this, _ratio);
+          __privateGet(this, _canvas).height = height * __privateGet(this, _ratio);
+          __privateGet(this, _canvas).style.width = `${width}px`;
+          __privateGet(this, _canvas).style.height = `${height}px`;
+          if (__privateGet(this, _ctx)) __privateGet(this, _ctx).scale(__privateGet(this, _ratio), __privateGet(this, _ratio));
+        }
+      }
+      if (needReposition) {
+        const { position, margin } = __privateGet(this, _options);
+        __privateGet(this, _wrapper).style.top = "";
+        __privateGet(this, _wrapper).style.right = "";
+        __privateGet(this, _wrapper).style.bottom = "";
+        __privateGet(this, _wrapper).style.left = "";
+        switch (position) {
+          case "top-left":
+            __privateGet(this, _wrapper).style.top = `${margin}px`;
+            __privateGet(this, _wrapper).style.left = `${margin}px`;
+            break;
+          case "top-right":
+            __privateGet(this, _wrapper).style.top = `${margin}px`;
+            __privateGet(this, _wrapper).style.right = `${margin}px`;
+            break;
+          case "bottom-left":
+            __privateGet(this, _wrapper).style.bottom = `${margin}px`;
+            __privateGet(this, _wrapper).style.left = `${margin}px`;
+            break;
+          case "bottom-right":
+          default:
+            __privateGet(this, _wrapper).style.bottom = `${margin}px`;
+            __privateGet(this, _wrapper).style.right = `${margin}px`;
+            break;
+        }
+      }
+    }
+    this.draw();
+  }
+  dispose() {
+    if (__privateGet(this, _wrapper)) {
+      __privateGet(this, _wrapper).remove();
+      __privateSet(this, _wrapper, null);
+      __privateSet(this, _canvas, null);
+      __privateSet(this, _ctx, null);
+    }
+    __privateSet(this, _app, null);
+  }
+};
+_app = new WeakMap();
+_wrapper = new WeakMap();
+_canvas = new WeakMap();
+_ctx = new WeakMap();
+_options = new WeakMap();
+_ratio = new WeakMap();
+_MinimapPlugin_instances = new WeakSet();
+createElements_fn = function(container) {
+  const { width, height, position, margin, background, borderColor } = __privateGet(this, _options);
+  const wrapper = document.createElement("div");
+  wrapper.style.position = "absolute";
+  wrapper.style.width = `${width}px`;
+  wrapper.style.height = `${height}px`;
+  wrapper.style.zIndex = "99998";
+  wrapper.style.pointerEvents = "none";
+  wrapper.style.background = background;
+  wrapper.style.border = `1px solid ${borderColor}`;
+  wrapper.style.borderRadius = "4px";
+  wrapper.style.overflow = "hidden";
+  wrapper.style.boxSizing = "border-box";
+  switch (position) {
+    case "top-left":
+      wrapper.style.top = `${margin}px`;
+      wrapper.style.left = `${margin}px`;
+      break;
+    case "top-right":
+      wrapper.style.top = `${margin}px`;
+      wrapper.style.right = `${margin}px`;
+      break;
+    case "bottom-left":
+      wrapper.style.bottom = `${margin}px`;
+      wrapper.style.left = `${margin}px`;
+      break;
+    case "bottom-right":
+    default:
+      wrapper.style.bottom = `${margin}px`;
+      wrapper.style.right = `${margin}px`;
+      break;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width * __privateGet(this, _ratio);
+  canvas.height = height * __privateGet(this, _ratio);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  wrapper.appendChild(canvas);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("[rendx-minimap-plugin] Could not get 2d context");
+  ctx.scale(__privateGet(this, _ratio), __privateGet(this, _ratio));
+  container.appendChild(wrapper);
+  __privateSet(this, _wrapper, wrapper);
+  __privateSet(this, _canvas, canvas);
+  __privateSet(this, _ctx, ctx);
+};
+function minimapPlugin(options) {
+  return new MinimapPlugin(options);
+}
+export {
+  minimapPlugin
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "rendx-minimap-plugin",
+  "version": "0.1.0",
+  "description": "Minimap navigation plugin for Rendx engine",
+  "license": "MIT",
+  "author": "wei.liang (https://github.com/weiliang0121)",
+  "type": "module",
+  "keywords": [
+    "rendx",
+    "2d",
+    "canvas",
+    "rendering",
+    "visualization",
+    "scene-graph"
+  ],
+  "homepage": "https://weiliang0121.github.io/rendx/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weiliang0121/rendx.git",
+    "directory": "packages/minimap-plugin"
+  },
+  "main": "dist/main.cjs",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs"
+    }
+  },
+  "dependencies": {
+    "rendx-engine": "^0.2.0"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}