@zhangly1403/dxfviewer 1.0.0 → 1.2.0

package/dist/dxfviewer.umd.js

@@ -32348,9 +32348,10 @@
     return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`.toUpperCase();
   };
   const getAutoCadColor = (index, theme = "black") => {
-    if (index <= 0 || index === 256) return theme === "black" ? "#FFFFFF" : "#000000";
+    const bgIsDark = theme === "black" || theme === "gray";
+    if (index <= 0 || index === 256) return bgIsDark ? "#FFFFFF" : "#000000";
     if (index === 7) {
-      return theme === "black" ? "#FFFFFF" : "#000000";
+      return bgIsDark ? "#FFFFFF" : "#000000";
     }
     if (index >= 1 && index <= 6) return AUTO_CAD_COLORS[index];
     if (index >= 8 && index <= 9) return AUTO_CAD_COLORS[index];
@@ -34541,7 +34542,8 @@
     if (entColor === 0 && parentColor) return parentColor;
     if (entColor === 256 || entColor === void 0) {
       if ((layer == null ? void 0 : layer.trueColor) !== void 0) return trueColorToHex(layer.trueColor);
-      return layer ? getAutoCadColor(layer.color, theme) : theme === "black" ? "#FFFFFF" : "#000000";
+      const bgIsDark = theme === "black" || theme === "gray";
+      return layer ? getAutoCadColor(layer.color, theme) : bgIsDark ? "#FFFFFF" : "#000000";
     }
     return getAutoCadColor(entColor, theme);
   };
@@ -34765,7 +34767,9 @@
     if (closed) ctx.closePath();
   };
   const renderEntitiesToCanvas = (ctx, entities, layers, blocks, styles, lineTypes, ltScale, viewPort, selectedIds, width, height, theme) => {
-    ctx.fillStyle = theme === "black" ? "#212121" : "#FFFFFF";
+    if (theme === "white") ctx.fillStyle = "#FFFFFF";
+    else if (theme === "gray") ctx.fillStyle = "#808080";
+    else ctx.fillStyle = "#212121";
     ctx.fillRect(0, 0, width, height);
     const safeZoom = isNaN(viewPort.zoom) || viewPort.zoom === 0 ? 1 : viewPort.zoom;
     const safeTargetX = isNaN(viewPort.targetX) ? 0 : viewPort.targetX;
@@ -35537,9 +35541,26 @@
       "ACAD_TABLE": "表格 (TABLE)"
     }
   };
-  const DxfViewer = ({ entities, layers, blocks = {}, styles = {}, lineTypes = {}, viewPort, onViewPortChange, selectedEntityIds, onSelectIds, worldOffset, ltScale = 1, theme, lang }) => {
+  const DxfViewer = ({
+    entities,
+    layers,
+    blocks = {},
+    styles = {},
+    lineTypes = {},
+    viewPort,
+    onViewPortChange,
+    selectedEntityIds,
+    onSelectIds,
+    worldOffset,
+    ltScale = 1,
+    theme,
+    lang,
+    onMouseMoveWorld
+  }) => {
     const containerRef = require$$1.useRef(null);
     const canvasRef = require$$1.useRef(null);
+    const viewPortRef = require$$1.useRef(viewPort);
+    viewPortRef.current = viewPort;
     const [isPanning, setIsPanning] = require$$1.useState(false);
     const [isBoxSelecting, setIsBoxSelecting] = require$$1.useState(false);
     const [dragStart, setDragStart] = require$$1.useState({ x: 0, y: 0 });
@@ -35558,9 +35579,9 @@
       };
     };
     const [mouseWorldPos, setMouseWorldPos] = require$$1.useState({ x: 0, y: 0 });
-    const displayX = mouseWorldPos.x + ((worldOffset == null ? void 0 : worldOffset.x) || 0);
-    const displayY = mouseWorldPos.y + ((worldOffset == null ? void 0 : worldOffset.y) || 0);
-    const visibleCount = require$$1.useMemo(() => {
+    mouseWorldPos.x + ((worldOffset == null ? void 0 : worldOffset.x) || 0);
+    mouseWorldPos.y + ((worldOffset == null ? void 0 : worldOffset.y) || 0);
+    require$$1.useMemo(() => {
       return entities.filter((e) => e.visible !== false).length;
     }, [entities]);
     const safeClamp = (value, min, max) => {
@@ -35598,9 +35619,10 @@
       const onWheel = (e) => {
         e.preventDefault();
         const scaleFactor = 1.2;
-        const newZoom = e.deltaY < 0 ? viewPort.zoom * scaleFactor : viewPort.zoom / scaleFactor;
-        const MIN_ZOOM = Number.MIN_VALUE;
-        const MAX_ZOOM = Number.MAX_VALUE;
+        const currentVP = viewPortRef.current;
+        const newZoom = e.deltaY < 0 ? currentVP.zoom * scaleFactor : currentVP.zoom / scaleFactor;
+        const MIN_ZOOM = 1e-50;
+        const MAX_ZOOM = 1e20;
         if (newZoom < MIN_ZOOM || newZoom > MAX_ZOOM) return;
         const rect = container.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
@@ -35608,8 +35630,8 @@
         const safeZoom2 = Math.max(Math.min(newZoom, MAX_ZOOM), MIN_ZOOM);
         const centerX = rect.width / 2;
         const centerY = rect.height / 2;
-        const newTargetX = viewPort.targetX + (mouseX - centerX) * (1 / viewPort.zoom - 1 / safeZoom2);
-        const newTargetY = viewPort.targetY - (mouseY - centerY) * (1 / viewPort.zoom - 1 / safeZoom2);
+        const newTargetX = currentVP.targetX + (mouseX - centerX) * (1 / currentVP.zoom - 1 / safeZoom2);
+        const newTargetY = currentVP.targetY - (mouseY - centerY) * (1 / currentVP.zoom - 1 / safeZoom2);
         onViewPortChange({
           targetX: newTargetX,
           targetY: newTargetY,
@@ -35618,7 +35640,7 @@
       };
       container.addEventListener("wheel", onWheel, { passive: false });
       return () => container.removeEventListener("wheel", onWheel);
-    }, [viewPort, onViewPortChange]);
+    }, [onViewPortChange]);
     const handleMouseDown = (e) => {
       var _a;
       const rect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
@@ -35643,6 +35665,7 @@
       const mouseY = e.clientY - rect.top;
       const worldPos = screenToWorld(mouseX, mouseY);
       setMouseWorldPos(worldPos);
+      onMouseMoveWorld == null ? void 0 : onMouseMoveWorld(worldPos.x + ((worldOffset == null ? void 0 : worldOffset.x) || 0), worldPos.y + ((worldOffset == null ? void 0 : worldOffset.y) || 0));
       if (isPanning) {
         const dx = e.clientX - dragStart.x;
         const dy = e.clientY - dragStart.y;
@@ -35700,61 +35723,47 @@
     isNaN(viewPort.targetX) ? 0 : viewPort.targetX;
     isNaN(viewPort.targetY) ? 0 : viewPort.targetY;
     isNaN(viewPort.zoom) || viewPort.zoom === 0 ? 1 : viewPort.zoom;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "viewer-wrapper", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          ref: containerRef,
-          className: `viewer-main flex-1 relative overflow-hidden cursor-crosshair ${theme === "black" ? "bg-[#212121]" : "bg-white"}`,
-          onMouseDown: handleMouseDown,
-          onMouseMove: handleMouseMove,
-          onMouseUp: handleMouseUp,
-          onMouseLeave: handleMouseUp,
-          onContextMenu: (e) => e.preventDefault(),
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "canvas",
-              {
-                ref: canvasRef,
-                className: "main-canvas"
-              }
-            ),
-            isBoxSelecting && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "selection-box",
-                style: {
-                  left: Math.min(dragStart.x, currentMousePos.x),
-                  top: Math.min(dragStart.y, currentMousePos.y),
-                  width: Math.abs(currentMousePos.x - dragStart.x),
-                  height: Math.abs(currentMousePos.y - dragStart.y)
-                }
+    const getCanvasBg = () => {
+      if (theme === "white") return "#ffffff";
+      if (theme === "gray") return "#808080";
+      return "#212121";
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "viewer-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "canvas-container",
+        style: { "--canvas-bg": getCanvasBg() },
+        onMouseDown: handleMouseDown,
+        onMouseMove: handleMouseMove,
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseUp,
+        onContextMenu: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              className: "main-canvas"
+            }
+          ),
+          isBoxSelecting && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "selection-box",
+              style: {
+                left: Math.min(dragStart.x, currentMousePos.x),
+                top: Math.min(dragStart.y, currentMousePos.y),
+                width: Math.abs(currentMousePos.x - dragStart.x),
+                height: Math.abs(currentMousePos.y - dragStart.y)
               }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-bar", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-coords", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-            "X: ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-value", children: displayX.toFixed(3) })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-            "Y: ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-value", children: displayY.toFixed(3) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-spacer" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          lang === "zh" ? "实体数" : "Entities",
-          ": ",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-value", children: visibleCount })
-        ] })
-      ] })
-    ] });
+            }
+          )
+        ]
+      }
+    ) });
   };
-  const ROW_HEIGHT = 36;
+  const ROW_HEIGHT = 26;
   const Sidebar = ({ layers, entities, selectedEntityIds, onSelectIds, theme, lang }) => {
     const [expandedLayers, setExpandedLayers] = require$$1.useState(new Set(Object.keys(layers)));
     const containerRef = require$$1.useRef(null);
@@ -35911,11 +35920,11 @@
       }
     };
     const renderColorValue = (color) => {
-      if (color === 256) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "随层 (ByLayer)" });
-      if (color === 0) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "随块 (ByBlock)" });
+      if (color === 256) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--text-secondary)" }, children: "随层 (ByLayer)" });
+      if (color === 0) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--text-secondary)" }, children: "随块 (ByBlock)" });
       const hex = getAutoCadColor(color || 7, theme);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "color-preview-container", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-400 text-xs", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { color: "var(--text-secondary)", fontSize: "10px" }, children: [
           "(",
           color,
           ")"
@@ -35931,9 +35940,9 @@
       ] });
     };
     const renderLineweight = (lw) => {
-      if (lw === void 0 || lw === -1) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "随层 (ByLayer)" });
-      if (lw === -2) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "随块 (ByBlock)" });
-      if (lw === -3) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "默认 (Default)" });
+      if (lw === void 0 || lw === -1) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--text-secondary)" }, children: "随层 (ByLayer)" });
+      if (lw === -2) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--text-secondary)" }, children: "随块 (ByBlock)" });
+      if (lw === -3) return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--text-secondary)" }, children: "默认 (Default)" });
       if (lw === 0) return "0.00 mm";
       return `${(lw / 100).toFixed(2)} mm`;
     };
@@ -35945,7 +35954,7 @@
       var _a, _b;
       const typeDisplay = entNames[ent.type] || ent.type;
       const commonRows = [
-        renderPropertyRow("Type", /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-blue-600 font-bold", children: typeDisplay })),
+        renderPropertyRow("Type", /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--accent-blue)", fontWeight: "bold" }, children: typeDisplay })),
         renderPropertyRow("Handle", formatHandle(ent.handle)),
         renderPropertyRow("Layer", ent.layer),
         renderPropertyRow("Color", renderColorValue(ent.color)),
@@ -36078,8 +36087,10 @@
     showProperties,
     onToggleProperties,
     showOpen = true,
-    theme,
-    onToggleTheme,
+    uiTheme,
+    onSetUiTheme,
+    canvasTheme,
+    onSetCanvasTheme,
     lang,
     onSetLang
   }) => {
@@ -36089,7 +36100,7 @@
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: "menu-item",
+          className: `menu-item ${activeMenu === "file" ? "active" : ""}`,
           onMouseEnter: () => setActiveMenu("file"),
           onMouseLeave: () => setActiveMenu(null),
           children: [
@@ -36107,7 +36118,7 @@
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          className: "menu-item",
+          className: `menu-item ${activeMenu === "view" ? "active" : ""}`,
           onMouseEnter: () => setActiveMenu("view"),
           onMouseLeave: () => setActiveMenu(null),
           children: [
@@ -36115,26 +36126,6 @@
             activeMenu === "view" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-menu", style: { minWidth: "160px" }, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: onFitView, className: "dropdown-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t.fitView }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divider" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: onToggleSidebar, className: "dropdown-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                t.layers,
-                " (",
-                showSidebar ? t.off : t.on,
-                ")"
-              ] }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: onToggleProperties, className: "dropdown-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                t.properties,
-                " (",
-                showProperties ? t.off : t.on,
-                ")"
-              ] }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divider" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: onToggleTheme, className: "dropdown-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                t.theme,
-                " (",
-                theme === "black" ? t.black : t.white,
-                ")"
-              ] }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divider" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => onSetLang(lang === "zh" ? "en" : "zh"), className: "dropdown-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
                 t.language,
                 ": ",
@@ -36143,6 +36134,41 @@
             ] })
           ]
         }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `menu-item ${activeMenu === "interface" ? "active" : ""}`,
+          onMouseEnter: () => setActiveMenu("interface"),
+          onMouseLeave: () => setActiveMenu(null),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "界面" : "Interface" }),
+            activeMenu === "interface" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-menu", style: { minWidth: "180px" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: onToggleSidebar, className: `dropdown-item ${showSidebar ? "checked" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t.layers }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: onToggleProperties, className: `dropdown-item ${showProperties ? "checked" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t.properties }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divider" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => onSetUiTheme("light"), className: `dropdown-item ${uiTheme === "light" ? "checked" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "浅色模式" : "Light Mode" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => onSetUiTheme("dark"), className: `dropdown-item ${uiTheme === "dark" ? "checked" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "深色模式" : "Dark Mode" }) })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `menu-item ${activeMenu === "settings" ? "active" : ""}`,
+          onMouseEnter: () => setActiveMenu("settings"),
+          onMouseLeave: () => setActiveMenu(null),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "设置" : "Settings" }),
+            activeMenu === "settings" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-menu", style: { minWidth: "180px" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dropdown-header", style: { padding: "4px 12px", fontSize: "10px", color: "var(--text-secondary)" }, children: lang === "zh" ? "背景颜色" : "Background Color" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => onSetCanvasTheme("black"), className: `dropdown-item ${canvasTheme === "black" ? "checked" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "黑色" : "Black" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => onSetCanvasTheme("white"), className: `dropdown-item ${canvasTheme === "white" ? "checked" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "白色" : "White" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => onSetCanvasTheme("gray"), className: `dropdown-item ${canvasTheme === "gray" ? "checked" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "灰色" : "Gray" }) })
+            ] })
+          ]
+        }
       )
     ] });
   };
@@ -36173,8 +36199,13 @@
     const [showSidebar, setShowSidebar] = require$$1.useState(true);
     const [showProperties, setShowProperties] = require$$1.useState(true);
     const [viewPort, setViewPort] = require$$1.useState(DEFAULT_VIEWPORT);
-    const [theme, setTheme] = require$$1.useState("black");
+    const [uiTheme, setUiTheme] = require$$1.useState("light");
+    const [canvasTheme, setCanvasTheme] = require$$1.useState("black");
     const [internalLang, setInternalLang] = require$$1.useState(defaultLanguage);
+    const [mouseCoords, setMouseCoords] = require$$1.useState({ x: 0, y: 0 });
+    const [isExporting, setIsExporting] = require$$1.useState(false);
+    const containerRef = require$$1.useRef(null);
+    const viewerRef = require$$1.useRef(null);
     const lang = controlledLang || internalLang;
     const handleSetLang = require$$1.useCallback((newLang) => {
       setInternalLang(newLang);
@@ -36187,12 +36218,23 @@
       const extents = calculateSmartExtents(visibleEnts, blks);
       const centerX = extents.center.x;
       const centerY = extents.center.y;
-      const sidebarWidth = showSidebar ? 256 : 0;
-      const propsWidth = showProperties ? 320 : 0;
-      const containerW = Math.max(window.innerWidth - sidebarWidth - propsWidth, 100);
-      const containerH = Math.max(window.innerHeight - 40, 100);
+      let containerW = window.innerWidth;
+      let containerH = window.innerHeight;
+      if (viewerRef.current) {
+        const rect = viewerRef.current.getBoundingClientRect();
+        containerW = rect.width;
+        containerH = rect.height;
+      } else if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const sidebarWidth = showSidebar ? 256 : 0;
+        const propsWidth = showProperties ? 320 : 0;
+        containerW = rect.width - sidebarWidth - propsWidth;
+        containerH = rect.height - 30 - 24;
+      }
+      containerW = Math.max(containerW, 100);
+      containerH = Math.max(containerH, 100);
       if (extents.width <= 0 && extents.height <= 0) {
-        setViewPort({ targetX: centerX, targetY: centerY, zoom: 1 });
+        setViewPort((prev) => ({ ...prev, targetX: centerX, targetY: centerY, zoom: 1 }));
         return;
       }
       const worldW = extents.width;
@@ -36281,10 +36323,23 @@
           fitView(entities, blocks);
         }
       };
+      const observer = new ResizeObserver((entries) => {
+        requestAnimationFrame(() => {
+          handleResize();
+        });
+      });
+      if (viewerRef.current) {
+        observer.observe(viewerRef.current);
+      } else if (containerRef.current) {
+        observer.observe(containerRef.current);
+      }
       window.addEventListener("resize", handleResize);
       handleResize();
-      return () => window.removeEventListener("resize", handleResize);
-    }, [entities, blocks, fitView, showSidebar, showProperties]);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        observer.disconnect();
+      };
+    }, [entities, blocks, fitView]);
     require$$1.useEffect(() => {
       if (initFile) {
         if (typeof initFile === "string") {
@@ -36304,7 +36359,7 @@
           const sidebarWidth = showSidebar ? 256 : 0;
           const propsWidth = showProperties ? 320 : 0;
           const containerW = window.innerWidth - sidebarWidth - propsWidth;
-          const containerH = window.innerHeight - 40;
+          const containerH = window.innerHeight - 30 - 24;
           const w = extents.width;
           const h = extents.height;
           if (w > 0 || h > 0) {
@@ -36374,7 +36429,7 @@
       e.target.value = "";
     };
     const selectedEntities = entities.filter((e) => selectedEntityIds.has(e.id));
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "app-container", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, className: `app-container ${uiTheme === "dark" ? "theme-dark" : ""}`, children: [
       isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "loading-overlay", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "loading-box", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "loading-text", children: "正在解析 DXF..." }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "progress-bar-container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -36400,13 +36455,15 @@
           showProperties,
           onToggleProperties: () => setShowProperties(!showProperties),
           showOpen: showOpenMenu,
-          theme,
-          onToggleTheme: () => setTheme(theme === "black" ? "white" : "black"),
+          uiTheme,
+          onSetUiTheme: setUiTheme,
+          canvasTheme,
+          onSetCanvasTheme: setCanvasTheme,
           lang,
           onSetLang: handleSetLang
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "main-content", style: { height: "calc(100vh - 40px)" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "main-content", children: [
         showSidebar && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Sidebar,
           {
@@ -36414,11 +36471,11 @@
             entities,
             selectedEntityIds,
             onSelectIds: handleSidebarSelectIds,
-            theme,
+            theme: canvasTheme,
             lang
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: `viewer-container shadow-inner flex flex-col border-l border-r border-gray-300 ${theme === "black" ? "bg-[#212121]" : "bg-white"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("main", { ref: viewerRef, className: "viewer-container", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           DxfViewer,
           {
             entities,
@@ -36433,8 +36490,9 @@
             onSelectIds: setSelectedEntityIds,
             onFitView: handleFitView,
             worldOffset,
-            theme,
-            lang
+            theme: canvasTheme,
+            lang,
+            onMouseMoveWorld: (x, y) => setMouseCoords({ x, y })
           }
         ) }),
         showProperties && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -36444,10 +36502,34 @@
             layers: Object.values(layers),
             styles,
             offset: worldOffset,
-            theme,
+            theme: canvasTheme,
             lang
           }
         )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-bar", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-left", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-coords", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+            "X: ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-value", children: mouseCoords.x.toFixed(3) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+            "Y: ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-value", children: mouseCoords.y.toFixed(3) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-center", children: selectedEntityIds.size === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? "未选择对象" : "No objects selected" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "15px", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lang === "zh" ? `已选择 ${selectedEntityIds.size} 个对象` : `Selected ${selectedEntityIds.size} objects` }),
+          selectedEntityIds.size === 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { opacity: 0.8, fontSize: "10px" }, children: lang === "zh" ? "选择单个对象以查看详细属性" : "Select a single object to view detailed properties" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "20px" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            lang === "zh" ? "实体数" : "Entities",
+            ": ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-value", children: entities.length })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { opacity: 0.8 }, children: lang === "zh" ? "就绪" : "Ready" })
+        ] }) })
       ] })
     ] });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangly1403/dxfviewer",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "example": "vite --config examples/vite.config.ts",
+    "build:example": "vite build --config examples/vite.config.ts"
   },
   "dependencies": {
     "react": "^19.2.3",