nvis-fe-cms-libs 2.0.9 → 2.1.1

package/dist/nvis-fe-cms-libs.es.js

@@ -2900,7 +2900,7 @@ const __iconNode = [
   ]
 ];
 const Zap = createLucideIcon("zap", __iconNode);
-const DiagramSection = ({ data, t, isDarkMode }) => {
+const DiagramSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
   var _a, _b;
   const [mounted, setMounted] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -2918,12 +2918,55 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
   const diagramData = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.data;
+  const getImageUrl = (images) => {
+    console.log("getImageUrl called with:", images);
+    console.log("Type of images:", typeof images);
+    if (!images) {
+      console.log("No images found");
+      return null;
+    }
+    let imageUrl;
+    if (typeof images === "string") {
+      imageUrl = images;
+    } else if (Array.isArray(images) && images.length > 0) {
+      imageUrl = images[0];
+    } else {
+      console.log("Invalid images format");
+      return null;
+    }
+    console.log("Image URL:", imageUrl);
+    if (!imageUrl || imageUrl.trim() === "") {
+      console.log("Image URL is empty");
+      return null;
+    }
+    if (imageUrl.startsWith("http")) {
+      console.log("Full URL (already has http):", imageUrl);
+      return imageUrl;
+    }
+    const fullUrl = `${imageBaseUrl}${imageUrl}`;
+    console.log("Full URL:", fullUrl);
+    return fullUrl;
+  };
   if (!diagramData) {
     return null;
   }
   const diagramName = diagramData.name || safeT("diagram.defaults.name");
   const diagramDescription = diagramData.description || safeT("diagram.defaults.description");
   const modules = diagramData.diagramChildrenDTOs || [];
+  useEffect(() => {
+    console.log("=== DIAGRAM MODULES DEBUG ===");
+    console.log("Total modules:", modules.length);
+    console.log("imageBaseUrl:", imageBaseUrl);
+    modules.forEach((module, index2) => {
+      console.log(`Module ${index2 + 1}:`, {
+        name: module.name,
+        images: module.images,
+        imagesType: typeof module.images,
+        isArray: Array.isArray(module.images),
+        hasImages: Boolean(module.images)
+      });
+    });
+  }, [modules, imageBaseUrl]);
   const getIconComponent = (iconName) => {
     const icons = {
       Calculator,
@@ -3012,15 +3055,30 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
               animation: `slideUp 0.5s ease-out ${index2 * 0.1}s both`
             },
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "div",
                 {
-                  className: "flex-shrink-0 p-3 rounded-xl border",
+                  className: "flex-shrink-0 p-3 rounded-xl border bg-surface",
                   style: {
                     backgroundColor: `${colors.iconBg}33`,
                     borderColor: colors.border
                   },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2 })
+                  children: [
+                    module.images ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "img",
+                      {
+                        src: getImageUrl(module.images),
+                        alt: module.name,
+                        className: "w-6 h-6 object-contain",
+                        onError: (e) => {
+                          console.error("Image load error:", e.target.src);
+                          e.target.style.display = "none";
+                          e.target.nextElementSibling.style.display = "block";
+                        }
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-6 h-6 text-inverse", strokeWidth: 2, style: { display: module.images ? "none" : "block" } })
+                  ]
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
@@ -3276,7 +3334,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
         ] }, `line-${module.id}`);
       }) }),
       modules.map((module, index2) => {
-        const Icon2 = getIconComponent(module.icon);
+        getIconComponent(module.icon);
         const colors = getColorStyles(index2);
         const angle = angles[index2] * Math.PI / 180;
         const radius = 360;
@@ -3284,6 +3342,7 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
         const y = Math.sin(angle) * radius;
         const normalizedAngle = (angles[index2] % 360 + 360) % 360;
         const isRightSide = normalizedAngle > 270 || normalizedAngle < 90;
+        const isTopHalf = y < 0;
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           "a",
           {
@@ -3318,36 +3377,40 @@ const DiagramSection = ({ data, t, isDarkMode }) => {
                       style: { borderColor: colors.border }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: "flex-shrink-0 p-2.5 rounded-lg border transition-all duration-300 group-hover:rotate-12 group-hover:scale-125 relative z-10",
-                      style: {
-                        backgroundColor: `${colors.iconBg}33`,
-                        borderColor: colors.border
-                      },
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "w-5 h-5 text-inverse", strokeWidth: 2 })
-                    }
-                  ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `flex-1 text-inverse text-small tracking-wide overflow-hidden text-ellipsis whitespace-nowrap ${isRightSide ? "text-right" : "text-left"} relative z-10 min-w-0`, children: module.name }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     "div",
                     {
-                      className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50 border max-w-xs ${isDarkMode ? "bg-surface" : "bg-body"}`,
+                      className: `absolute ${isTopHalf ? "top-full mt-4" : "bottom-full mb-4"} left-1/2 -translate-x-1/2 px-6 py-4 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-50 border-2 ${isDarkMode ? "bg-surface" : "bg-body"}`,
                       style: {
                         borderColor: "var(--border-color)",
-                        maxHeight: "120px",
-                        overflowY: "auto"
+                        maxHeight: "400px",
+                        minWidth: "320px",
+                        maxWidth: "420px",
+                        overflowY: "auto",
+                        whiteSpace: "normal"
                       },
                       children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-main", children: module.name }),
-                        module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-caption text-muted mt-1", children: module.description }),
+                        module.images && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: getImageUrl(module.images),
+                            alt: module.name,
+                            className: "w-full h-48 object-cover rounded-lg",
+                            onError: (e) => {
+                              console.error("Tooltip image load error:", e.target.src);
+                              e.target.style.display = "none";
+                            }
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-base text-main font-bold mb-2", children: module.name }),
+                        module.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-small text-muted leading-relaxed", children: module.description }),
                         /* @__PURE__ */ jsxRuntimeExports.jsx(
                           "div",
                           {
-                            className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent",
+                            className: `absolute ${isTopHalf ? "bottom-full" : "top-full"} left-1/2 -translate-x-1/2 ${isTopHalf ? "-mb-px" : "-mt-px"} border-8 border-transparent`,
                             style: {
-                              borderTopColor: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
+                              [isTopHalf ? "borderBottomColor" : "borderTopColor"]: isDarkMode ? "var(--bg-surface)" : "var(--bg-body)"
                             }
                           }
                         )