@nice2dev/ui-graphics 1.3.14 → 1.3.16

package/dist/esm/core/minimap.js

@@ -1,156 +1,157 @@
-import { resolveCssColor } from '@nice2dev/ui-core';
-import React from 'react';
-
-/**
- * minimap.ts — Zoom navigator / minimap component for editors.
- *
- * Provides a small overview of the full canvas with a viewport indicator
- * that can be dragged to navigate around the document.
- */
-// ── Component ───────────────────────────────────────────────────
-/** Zoom navigator / minimap showing a scaled-down view of the full document. */
-const Minimap = ({ canvasRef, imageDataUrl, documentWidth, documentHeight, viewport, onViewportChange, config = {}, className = '', }) => {
-    const { width: mapW = 160, height: mapH = 120, visible = true, position = 'bottom-right', opacity = 0.85, } = config;
-    const minimapCanvasRef = React.useRef(null);
-    const isDragging = React.useRef(false);
-    const scaleX = mapW / (documentWidth || 1);
-    const scaleY = mapH / (documentHeight || 1);
-    const scale = Math.min(scaleX, scaleY);
-    // Draw minimap
-    React.useEffect(() => {
-        // inside the effect: it draws with this run's viewport, scale and size
-        const drawViewport = (ctx) => {
-            // Draw viewport rect
-            const vx = viewport.x * scale;
-            const vy = viewport.y * scale;
-            const vw = viewport.width * scale;
-            const vh = viewport.height * scale;
-            ctx.strokeStyle = resolveCssColor('var(--nice-primary-tint-80, rgba(59, 130, 246, 0.8))', ctx.canvas);
-            ctx.lineWidth = 1.5;
-            ctx.strokeRect(vx, vy, vw, vh);
-            // Dim areas outside viewport
-            ctx.fillStyle = resolveCssColor('var(--nice-overlay-30, rgba(0, 0, 0, 0.3))', ctx.canvas);
-            // Top
-            ctx.fillRect(0, 0, mapW, vy);
-            // Bottom
-            ctx.fillRect(0, vy + vh, mapW, mapH - vy - vh);
-            // Left
-            ctx.fillRect(0, vy, vx, vh);
-            // Right
-            ctx.fillRect(vx + vw, vy, mapW - vx - vw, vh);
-        };
-        if (!visible) {
-            return;
-        }
-        const canvas = minimapCanvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.clearRect(0, 0, mapW, mapH);
-        // Draw background
-        ctx.fillStyle = resolveCssColor('var(--nice-bg, #1a1a2e)', ctx.canvas);
-        ctx.fillRect(0, 0, mapW, mapH);
-        // Draw document content
-        if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
-            const sw = documentWidth * scale;
-            const sh = documentHeight * scale;
-            ctx.drawImage(canvasRef.current, 0, 0, documentWidth, documentHeight, 0, 0, sw, sh);
-        }
-        else if (imageDataUrl) {
-            const img = new Image();
-            img.onload = () => {
-                const sw = documentWidth * scale;
-                const sh = documentHeight * scale;
-                ctx.drawImage(img, 0, 0, sw, sh);
-                drawViewport(ctx);
-            };
-            img.src = imageDataUrl;
-            return;
-        }
-        drawViewport(ctx);
-    }, [
-        visible,
-        canvasRef,
-        imageDataUrl,
-        viewport,
-        documentWidth,
-        documentHeight,
-        scale,
-        mapW,
-        mapH,
-    ]);
-    const handlePointerDown = (e) => {
-        isDragging.current = true;
-        updateViewportFromPointer(e);
-        e.target.setPointerCapture(e.pointerId);
-    };
-    const handlePointerMove = (e) => {
-        if (!isDragging.current) {
-            return;
-        }
-        updateViewportFromPointer(e);
-    };
-    const handlePointerUp = () => {
-        isDragging.current = false;
+import { resolveCssColor } from "@nice2dev/ui-core";
+import React from "react";
+const Minimap = ({
+  canvasRef,
+  imageDataUrl,
+  documentWidth,
+  documentHeight,
+  viewport,
+  onViewportChange,
+  config = {},
+  className = ""
+}) => {
+  const {
+    width: mapW = 160,
+    height: mapH = 120,
+    visible = true,
+    position = "bottom-right",
+    opacity = 0.85
+  } = config;
+  const minimapCanvasRef = React.useRef(null);
+  const isDragging = React.useRef(false);
+  const scaleX = mapW / (documentWidth || 1);
+  const scaleY = mapH / (documentHeight || 1);
+  const scale = Math.min(scaleX, scaleY);
+  React.useEffect(() => {
+    const drawViewport = (ctx2) => {
+      const vx = viewport.x * scale;
+      const vy = viewport.y * scale;
+      const vw = viewport.width * scale;
+      const vh = viewport.height * scale;
+      ctx2.strokeStyle = resolveCssColor(
+        "var(--nice-primary-tint-80, rgba(59, 130, 246, 0.8))",
+        ctx2.canvas
+      );
+      ctx2.lineWidth = 1.5;
+      ctx2.strokeRect(vx, vy, vw, vh);
+      ctx2.fillStyle = resolveCssColor("var(--nice-overlay-30, rgba(0, 0, 0, 0.3))", ctx2.canvas);
+      ctx2.fillRect(0, 0, mapW, vy);
+      ctx2.fillRect(0, vy + vh, mapW, mapH - vy - vh);
+      ctx2.fillRect(0, vy, vx, vh);
+      ctx2.fillRect(vx + vw, vy, mapW - vx - vw, vh);
     };
-    function updateViewportFromPointer(e) {
-        var _a;
-        const rect = (_a = minimapCanvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect || !onViewportChange) {
-            return;
-        }
-        const mx = e.clientX - rect.left;
-        const my = e.clientY - rect.top;
-        const docX = mx / scale - viewport.width / 2;
-        const docY = my / scale - viewport.height / 2;
-        onViewportChange({
-            x: Math.max(0, Math.min(documentWidth - viewport.width, docX)),
-            y: Math.max(0, Math.min(documentHeight - viewport.height, docY)),
-            width: viewport.width,
-            height: viewport.height,
-        });
-    }
     if (!visible) {
-        return null;
+      return;
     }
-    const positionStyles = {
-        'top-left': { top: 8, left: 8 },
-        'top-right': { top: 8, right: 8 },
-        'bottom-left': { bottom: 8, left: 8 },
-        'bottom-right': { bottom: 8, right: 8 },
-    };
-    return React.createElement('div', {
-        className: `nice-minimap ${className}`,
-        style: {
-            position: 'absolute',
-            ...positionStyles[position],
-            opacity,
-            borderRadius: 4,
-            overflow: 'hidden',
-            border: '1px solid var(--nice-overlay-light-20, rgba(255, 255, 255, 0.2))',
-            cursor: 'crosshair',
-            zIndex: 100,
-        },
-    }, React.createElement('canvas', {
-        ref: minimapCanvasRef,
-        width: mapW,
-        height: mapH,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerUp,
-        style: { display: 'block' },
-    }));
+    const canvas = minimapCanvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    ctx.clearRect(0, 0, mapW, mapH);
+    ctx.fillStyle = resolveCssColor("var(--nice-bg, #1a1a2e)", ctx.canvas);
+    ctx.fillRect(0, 0, mapW, mapH);
+    if (canvasRef?.current) {
+      const sw = documentWidth * scale;
+      const sh = documentHeight * scale;
+      ctx.drawImage(canvasRef.current, 0, 0, documentWidth, documentHeight, 0, 0, sw, sh);
+    } else if (imageDataUrl) {
+      const img = new Image();
+      img.onload = () => {
+        const sw = documentWidth * scale;
+        const sh = documentHeight * scale;
+        ctx.drawImage(img, 0, 0, sw, sh);
+        drawViewport(ctx);
+      };
+      img.src = imageDataUrl;
+      return;
+    }
+    drawViewport(ctx);
+  }, [
+    visible,
+    canvasRef,
+    imageDataUrl,
+    viewport,
+    documentWidth,
+    documentHeight,
+    scale,
+    mapW,
+    mapH
+  ]);
+  const handlePointerDown = (e) => {
+    isDragging.current = true;
+    updateViewportFromPointer(e);
+    e.target.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (!isDragging.current) {
+      return;
+    }
+    updateViewportFromPointer(e);
+  };
+  const handlePointerUp = () => {
+    isDragging.current = false;
+  };
+  function updateViewportFromPointer(e) {
+    const rect = minimapCanvasRef.current?.getBoundingClientRect();
+    if (!rect || !onViewportChange) {
+      return;
+    }
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const docX = mx / scale - viewport.width / 2;
+    const docY = my / scale - viewport.height / 2;
+    onViewportChange({
+      x: Math.max(0, Math.min(documentWidth - viewport.width, docX)),
+      y: Math.max(0, Math.min(documentHeight - viewport.height, docY)),
+      width: viewport.width,
+      height: viewport.height
+    });
+  }
+  if (!visible) {
+    return null;
+  }
+  const positionStyles = {
+    "top-left": { top: 8, left: 8 },
+    "top-right": { top: 8, right: 8 },
+    "bottom-left": { bottom: 8, left: 8 },
+    "bottom-right": { bottom: 8, right: 8 }
+  };
+  return React.createElement(
+    "div",
+    {
+      className: `nice-minimap ${className}`,
+      style: {
+        position: "absolute",
+        ...positionStyles[position],
+        opacity,
+        borderRadius: 4,
+        overflow: "hidden",
+        border: "1px solid var(--nice-overlay-light-20, rgba(255, 255, 255, 0.2))",
+        cursor: "crosshair",
+        zIndex: 100
+      }
+    },
+    React.createElement("canvas", {
+      ref: minimapCanvasRef,
+      width: mapW,
+      height: mapH,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      style: { display: "block" }
+    })
+  );
 };
-// ── Hook ────────────────────────────────────────────────────────
-/** Hook for managing minimap visibility state. */
 function useMinimap(initialVisible = true) {
-    const [visible, setVisible] = React.useState(initialVisible);
-    const toggle = React.useCallback(() => setVisible((v) => !v), []);
-    return { visible, setVisible, toggle };
+  const [visible, setVisible] = React.useState(initialVisible);
+  const toggle = React.useCallback(() => setVisible((v) => !v), []);
+  return { visible, setVisible, toggle };
 }
-
-export { Minimap, useMinimap };
+export {
+  Minimap,
+  useMinimap
+};

package/dist/esm/core/plugins.js

@@ -1,127 +1,117 @@
-import React from 'react';
-
-/**
- * plugins.ts — Plugin system for @nice2dev/ui-graphics editors.
- *
- * Allows third-party extensions to register custom tools, filters,
- * export formats, and UI panels for any editor.
- */
-// ── Plugin Registry ─────────────────────────────────────────────
+import React from "react";
 class PluginRegistryImpl {
-    constructor() {
-        this.plugins = new Map();
-        this.listeners = new Map();
+  constructor() {
+    this.plugins = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  /** Register a plugin. Calls onInit if defined. */
+  register(plugin) {
+    if (this.plugins.has(plugin.id)) {
+      console.warn(`[PluginRegistry] Plugin "${plugin.id}" already registered, replacing.`);
+      this.unregister(plugin.id);
     }
-    /** Register a plugin. Calls onInit if defined. */
-    register(plugin) {
-        var _a;
-        if (this.plugins.has(plugin.id)) {
-            console.warn(`[PluginRegistry] Plugin "${plugin.id}" already registered, replacing.`);
-            this.unregister(plugin.id);
-        }
-        this.plugins.set(plugin.id, plugin);
-        (_a = plugin.onInit) === null || _a === void 0 ? void 0 : _a.call(plugin);
-        this.emit('register', plugin);
+    this.plugins.set(plugin.id, plugin);
+    plugin.onInit?.();
+    this.emit("register", plugin);
+  }
+  /** Unregister a plugin. Calls onDestroy if defined. */
+  unregister(pluginId) {
+    const plugin = this.plugins.get(pluginId);
+    if (plugin) {
+      plugin.onDestroy?.();
+      this.plugins.delete(pluginId);
+      this.emit("unregister", plugin);
     }
-    /** Unregister a plugin. Calls onDestroy if defined. */
-    unregister(pluginId) {
-        var _a;
-        const plugin = this.plugins.get(pluginId);
-        if (plugin) {
-            (_a = plugin.onDestroy) === null || _a === void 0 ? void 0 : _a.call(plugin);
-            this.plugins.delete(pluginId);
-            this.emit('unregister', plugin);
-        }
+  }
+  /** Get a registered plugin by ID. */
+  get(pluginId) {
+    return this.plugins.get(pluginId);
+  }
+  /** Get all registered plugins. */
+  getAll() {
+    return Array.from(this.plugins.values());
+  }
+  /** Get plugins for a specific editor type. */
+  getForEditor(editor) {
+    return this.getAll().filter(
+      (p) => !p.editors || p.editors.length === 0 || p.editors.includes(editor)
+    );
+  }
+  /** Get all tools from plugins for a specific editor. */
+  getTools(editor) {
+    return this.getForEditor(editor).flatMap((p) => p.tools ?? []);
+  }
+  /** Get all filters from plugins for a specific editor. */
+  getFilters(editor) {
+    return this.getForEditor(editor).flatMap((p) => p.filters ?? []);
+  }
+  /** Get all exporters from plugins for a specific editor. */
+  getExporters(editor) {
+    return this.getForEditor(editor).flatMap((p) => p.exporters ?? []);
+  }
+  /** Get all panels from plugins for a specific editor. */
+  getPanels(editor) {
+    return this.getForEditor(editor).flatMap((p) => p.panels ?? []);
+  }
+  /** Get all menu actions from plugins for a specific editor. */
+  getMenuActions(editor) {
+    return this.getForEditor(editor).flatMap((p) => p.menuActions ?? []);
+  }
+  /** Subscribe to registry events. */
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
     }
-    /** Get a registered plugin by ID. */
-    get(pluginId) {
-        return this.plugins.get(pluginId);
-    }
-    /** Get all registered plugins. */
-    getAll() {
-        return Array.from(this.plugins.values());
-    }
-    /** Get plugins for a specific editor type. */
-    getForEditor(editor) {
-        return this.getAll().filter((p) => !p.editors || p.editors.length === 0 || p.editors.includes(editor));
-    }
-    /** Get all tools from plugins for a specific editor. */
-    getTools(editor) {
-        return this.getForEditor(editor).flatMap((p) => { var _a; return (_a = p.tools) !== null && _a !== void 0 ? _a : []; });
-    }
-    /** Get all filters from plugins for a specific editor. */
-    getFilters(editor) {
-        return this.getForEditor(editor).flatMap((p) => { var _a; return (_a = p.filters) !== null && _a !== void 0 ? _a : []; });
-    }
-    /** Get all exporters from plugins for a specific editor. */
-    getExporters(editor) {
-        return this.getForEditor(editor).flatMap((p) => { var _a; return (_a = p.exporters) !== null && _a !== void 0 ? _a : []; });
-    }
-    /** Get all panels from plugins for a specific editor. */
-    getPanels(editor) {
-        return this.getForEditor(editor).flatMap((p) => { var _a; return (_a = p.panels) !== null && _a !== void 0 ? _a : []; });
-    }
-    /** Get all menu actions from plugins for a specific editor. */
-    getMenuActions(editor) {
-        return this.getForEditor(editor).flatMap((p) => { var _a; return (_a = p.menuActions) !== null && _a !== void 0 ? _a : []; });
-    }
-    /** Subscribe to registry events. */
-    on(event, handler) {
-        if (!this.listeners.has(event)) {
-            this.listeners.set(event, new Set());
-        }
-        this.listeners.get(event).add(handler);
-        return () => { var _a; return (_a = this.listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(handler); };
-    }
-    emit(event, plugin) {
-        var _a;
-        (_a = this.listeners.get(event)) === null || _a === void 0 ? void 0 : _a.forEach((h) => h(plugin));
-    }
-    /** Clear all plugins. */
-    clear() {
-        var _a;
-        for (const plugin of this.plugins.values()) {
-            (_a = plugin.onDestroy) === null || _a === void 0 ? void 0 : _a.call(plugin);
-        }
-        this.plugins.clear();
+    this.listeners.get(event).add(handler);
+    return () => this.listeners.get(event)?.delete(handler);
+  }
+  emit(event, plugin) {
+    this.listeners.get(event)?.forEach((h) => h(plugin));
+  }
+  /** Clear all plugins. */
+  clear() {
+    for (const plugin of this.plugins.values()) {
+      plugin.onDestroy?.();
     }
+    this.plugins.clear();
+  }
 }
-/** Global plugin registry singleton. */
 const PluginRegistry = new PluginRegistryImpl();
-// ── React Hook ──────────────────────────────────────────────────
-/** React hook that returns plugins for a specific editor, re-renders on changes. */
 function usePlugins(editor) {
-    const [, setTick] = React.useState(0);
-    React.useEffect(() => {
-        const unsub1 = PluginRegistry.on('register', () => setTick((t) => t + 1));
-        const unsub2 = PluginRegistry.on('unregister', () => setTick((t) => t + 1));
-        return () => {
-            unsub1();
-            unsub2();
-        };
-    }, []);
-    return {
-        plugins: PluginRegistry.getForEditor(editor),
-        tools: PluginRegistry.getTools(editor),
-        filters: PluginRegistry.getFilters(editor),
-        exporters: PluginRegistry.getExporters(editor),
-        panels: PluginRegistry.getPanels(editor),
-        menuActions: PluginRegistry.getMenuActions(editor),
+  const [, setTick] = React.useState(0);
+  React.useEffect(() => {
+    const unsub1 = PluginRegistry.on("register", () => setTick((t) => t + 1));
+    const unsub2 = PluginRegistry.on("unregister", () => setTick((t) => t + 1));
+    return () => {
+      unsub1();
+      unsub2();
     };
+  }, []);
+  return {
+    plugins: PluginRegistry.getForEditor(editor),
+    tools: PluginRegistry.getTools(editor),
+    filters: PluginRegistry.getFilters(editor),
+    exporters: PluginRegistry.getExporters(editor),
+    panels: PluginRegistry.getPanels(editor),
+    menuActions: PluginRegistry.getMenuActions(editor)
+  };
 }
-// ── Plugin Context (React) ──────────────────────────────────────
 const PluginContext = /* @__PURE__ */ React.createContext(PluginRegistry);
 const NicePluginProvider = ({ plugins, children }) => {
-    React.useEffect(() => {
-        if (plugins) {
-            plugins.forEach((p) => PluginRegistry.register(p));
-            return () => plugins.forEach((p) => PluginRegistry.unregister(p.id));
-        }
-    }, [plugins]);
-    return React.createElement(PluginContext.Provider, { value: PluginRegistry }, children);
+  React.useEffect(() => {
+    if (plugins) {
+      plugins.forEach((p) => PluginRegistry.register(p));
+      return () => plugins.forEach((p) => PluginRegistry.unregister(p.id));
+    }
+  }, [plugins]);
+  return React.createElement(PluginContext.Provider, { value: PluginRegistry }, children);
 };
 function usePluginRegistry() {
-    return React.useContext(PluginContext);
+  return React.useContext(PluginContext);
 }
-
-export { NicePluginProvider, PluginRegistry, usePluginRegistry, usePlugins };
+export {
+  NicePluginProvider,
+  PluginRegistry,
+  usePluginRegistry,
+  usePlugins
+};