@zhangly1403/dxfviewer 1.0.0 → 1.2.0

package/dist/dxfviewer.es.js

@@ -32346,9 +32346,10 @@ const trueColorToHex = (trueColor) => {
   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];
@@ -34539,7 +34540,8 @@ const getColor = (ent, layer, parentColor, theme) => {
   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);
 };
@@ -34763,7 +34765,9 @@ const drawPolyline = (ctx, points, bulges, closed, transform) => {
   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;
@@ -35535,9 +35539,26 @@ const ENTITY_TYPE_NAMES = {
     "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 = useRef(null);
   const canvasRef = useRef(null);
+  const viewPortRef = useRef(viewPort);
+  viewPortRef.current = viewPort;
   const [isPanning, setIsPanning] = useState(false);
   const [isBoxSelecting, setIsBoxSelecting] = useState(false);
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
@@ -35556,9 +35577,9 @@ const DxfViewer = ({ entities, layers, blocks = {}, styles = {}, lineTypes = {},
     };
   };
   const [mouseWorldPos, setMouseWorldPos] = 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) => {
@@ -35596,9 +35617,10 @@ const DxfViewer = ({ entities, layers, blocks = {}, styles = {}, lineTypes = {},
     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;
@@ -35606,8 +35628,8 @@ const DxfViewer = ({ entities, layers, blocks = {}, styles = {}, lineTypes = {},
       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,
@@ -35616,7 +35638,7 @@ const DxfViewer = ({ entities, layers, blocks = {}, styles = {}, lineTypes = {},
     };
     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();
@@ -35641,6 +35663,7 @@ const DxfViewer = ({ entities, layers, blocks = {}, styles = {}, lineTypes = {},
     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;
@@ -35698,61 +35721,47 @@ const DxfViewer = ({ entities, layers, blocks = {}, styles = {}, lineTypes = {},
   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] = useState(new Set(Object.keys(layers)));
   const containerRef = useRef(null);
@@ -35909,11 +35918,11 @@ const PropertiesPanel = ({ entities, layers, styles = {}, offset, theme, lang })
     }
   };
   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,
         ")"
@@ -35929,9 +35938,9 @@ const PropertiesPanel = ({ entities, layers, styles = {}, offset, theme, lang })
     ] });
   };
   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`;
   };
@@ -35943,7 +35952,7 @@ const PropertiesPanel = ({ entities, layers, styles = {}, offset, theme, lang })
     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)),
@@ -36076,8 +36085,10 @@ const ToolBar = ({
   showProperties,
   onToggleProperties,
   showOpen = true,
-  theme,
-  onToggleTheme,
+  uiTheme,
+  onSetUiTheme,
+  canvasTheme,
+  onSetCanvasTheme,
   lang,
   onSetLang
 }) => {
@@ -36087,7 +36098,7 @@ const ToolBar = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: "menu-item",
+        className: `menu-item ${activeMenu === "file" ? "active" : ""}`,
         onMouseEnter: () => setActiveMenu("file"),
         onMouseLeave: () => setActiveMenu(null),
         children: [
@@ -36105,7 +36116,7 @@ const ToolBar = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: "menu-item",
+        className: `menu-item ${activeMenu === "view" ? "active" : ""}`,
         onMouseEnter: () => setActiveMenu("view"),
         onMouseLeave: () => setActiveMenu(null),
         children: [
@@ -36113,26 +36124,6 @@ const ToolBar = ({
           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,
               ": ",
@@ -36141,6 +36132,41 @@ const ToolBar = ({
           ] })
         ]
       }
+    ),
+    /* @__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" }) })
+          ] })
+        ]
+      }
     )
   ] });
 };
@@ -36171,8 +36197,13 @@ const DxfViewerMain = ({
   const [showSidebar, setShowSidebar] = useState(true);
   const [showProperties, setShowProperties] = useState(true);
   const [viewPort, setViewPort] = useState(DEFAULT_VIEWPORT);
-  const [theme, setTheme] = useState("black");
+  const [uiTheme, setUiTheme] = useState("light");
+  const [canvasTheme, setCanvasTheme] = useState("black");
   const [internalLang, setInternalLang] = useState(defaultLanguage);
+  const [mouseCoords, setMouseCoords] = useState({ x: 0, y: 0 });
+  const [isExporting, setIsExporting] = useState(false);
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
   const lang = controlledLang || internalLang;
   const handleSetLang = useCallback((newLang) => {
     setInternalLang(newLang);
@@ -36185,12 +36216,23 @@ const DxfViewerMain = ({
     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;
@@ -36279,10 +36321,23 @@ const DxfViewerMain = ({
         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]);
   useEffect(() => {
     if (initFile) {
       if (typeof initFile === "string") {
@@ -36302,7 +36357,7 @@ const DxfViewerMain = ({
         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) {
@@ -36372,7 +36427,7 @@ const DxfViewerMain = ({
     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(
@@ -36398,13 +36453,15 @@ const DxfViewerMain = ({
         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,
         {
@@ -36412,11 +36469,11 @@ const DxfViewerMain = ({
           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,
@@ -36431,8 +36488,9 @@ const DxfViewerMain = ({
           onSelectIds: setSelectedEntityIds,
           onFitView: handleFitView,
           worldOffset,
-          theme,
-          lang
+          theme: canvasTheme,
+          lang,
+          onMouseMoveWorld: (x, y) => setMouseCoords({ x, y })
         }
       ) }),
       showProperties && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -36442,10 +36500,34 @@ const DxfViewerMain = ({
           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" })
+      ] }) })
     ] })
   ] });
 };