react-kggraph 0.0.16 → 0.0.18

package/lib/index.es13.js

@@ -1,226 +1,72 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as h, useState as s, useImperativeHandle as b } from "react";
-import { Drawer as x } from "antd";
-const N = h((y, d) => {
-  const [c, t] = s(!1), [a, o] = s({ style: {}, data: {} });
-  b(d, () => ({
-    open: (n) => {
-      t(!0), o(n);
-    },
-    close: () => t(!1)
-  }));
-  const i = () => {
-    t(!1);
-  }, l = (n) => {
-    const { name: p, value: m } = n.target;
-    o((u) => ({ ...u, [p]: m }));
-  };
-  return /* @__PURE__ */ e(
-    x,
-    {
-      title: "节点配置",
-      closable: { "aria-label": "Close Button" },
-      onClose: i,
-      open: c,
-      getContainer: !1,
-      children: /* @__PURE__ */ e("div", { className: "h-full overflow-y-auto z-50", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "名称" }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              name: "name",
-              value: a.data.name,
-              onChange: l,
-              readOnly: !0,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  focus:outline-none focus:ring-1 focus:ring-blue-500"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "类型" }),
-          /* @__PURE__ */ r(
-            "select",
-            {
-              name: "type",
-              value: a.type,
-              disabled: !0,
-              onChange: l,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
-              children: [
-                /* @__PURE__ */ e("option", { value: "圆形", children: "圆形" }),
-                /* @__PURE__ */ e("option", { value: "矩形", children: "矩形" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "颜色" }),
-          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
-            /* @__PURE__ */ e(
-              "input",
-              {
-                name: "color",
-                readOnly: !0,
-                value: a.style.color,
-                onChange: l,
-                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "input",
-              {
-                type: "color",
-                readOnly: !0,
-                value: a.style.color,
-                onChange: (n) => o({ ...a, color: n.target.value }),
-                className: "h-20px w-20px rounded cursor-pointer border"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "大小" }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              type: "number",
-              name: "size",
-              readOnly: !0,
-              value: parseInt(a.style.height),
-              onChange: l,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "边框宽度" }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              type: "number",
-              name: "borderWidth",
-              readOnly: !0,
-              value: parseInt(a.style.borderWidth),
-              onChange: l,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "边框虚线" }),
-          /* @__PURE__ */ r(
-            "select",
-            {
-              name: "borderDash",
-              value: a.style.borderDash,
-              disabled: !0,
-              onChange: l,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
-              children: [
-                /* @__PURE__ */ e("option", { value: "否", children: "否" }),
-                /* @__PURE__ */ e("option", { value: "是", children: "是" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "边框颜色" }),
-          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
-            /* @__PURE__ */ e(
-              "input",
-              {
-                name: "borderColor",
-                value: a.style.borderColor,
-                readOnly: !0,
-                onChange: l,
-                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "input",
-              {
-                type: "color",
-                value: a.borderColor,
-                readOnly: !0,
-                onChange: (n) => o({ ...a, borderColor: n.target.value }),
-                className: "h-20px w-20px rounded cursor-pointer border"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "字体位置" }),
-          /* @__PURE__ */ r(
-            "select",
-            {
-              name: "fontPosition",
-              value: a.style.textValign,
-              disabled: !0,
-              onChange: l,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
-              children: [
-                /* @__PURE__ */ e("option", { value: "center", children: "居中" }),
-                /* @__PURE__ */ e("option", { value: "bottom", children: "底部" }),
-                /* @__PURE__ */ e("option", { value: "top", children: "顶部" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "字体样式" }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              name: "fontStyle",
-              value: a.style.fontStyle,
-              readOnly: !0,
-              onChange: l,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "字体颜色" }),
-          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
-            /* @__PURE__ */ e(
-              "input",
-              {
-                name: "fontColor",
-                readOnly: !0,
-                value: a.style.textBorderColor,
-                onChange: l,
-                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "input",
-              {
-                type: "color",
-                readOnly: !0,
-                value: a.style["font-color"],
-                onChange: (n) => o({ ...a, fontColor: n.target.value }),
-                className: "h-20px w-20px rounded cursor-pointer border"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
-          /* @__PURE__ */ e("label", { className: "w-40", children: "字体背色" }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              type: "text",
-              readOnly: !0,
-              value: a.style.textBackgroundColor,
-              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-gray-50 text-gray-400 cursor-not-allowed"
-            }
-          )
-        ] })
-      ] }) })
-    }
-  );
-});
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+/* empty css           */
+const L = ({
+  items: h = [
+    // { label: '知识卡片' },
+    // { label: '选中关联' },
+    // { label: '路径分析' },
+    // { label: '展收实体' },
+    // { label: '展收属性' },
+    // { label: '节点配置' },
+  ],
+  centerImage: f,
+  size: c = 200,
+  onClick: $
+}) => {
+  const t = c / 2, a = c / 2 - 10, s = 30, o = 360 / h.length, p = b(() => h.map((n, r) => {
+    const l = (r * o - 90) * (Math.PI / 180), i = ((r + 1) * o - 90) * (Math.PI / 180), m = ((r + 0.5) * o - 90) * (Math.PI / 180), y = t + a * Math.cos(l), v = t + a * Math.sin(l), w = t + a * Math.cos(i), A = t + a * Math.sin(i), N = t + s * Math.cos(i), k = t + s * Math.sin(i), u = t + s * Math.cos(l), x = t + s * Math.sin(l), g = o > 180 ? 1 : 0, I = `M ${u} ${x} L ${y} ${v} A ${a} ${a} 0 ${g} 1 ${w} ${A} L ${N} ${k} A ${s} ${s} 0 ${g} 0 ${u} ${x}`, M = (a + s) / 2 + 5, P = t + M * Math.cos(m), R = t + M * Math.sin(m);
+    return {
+      ...n,
+      path: I,
+      textX: P,
+      textY: R,
+      rotation: (r + 0.5) * o - 90
+    };
+  }), [h, o, t, a, s]);
+  return /* @__PURE__ */ d("div", { className: "radial-menu", style: { width: c, height: c }, children: [
+    /* @__PURE__ */ d("svg", { width: c, height: c, className: "radial-svg", children: [
+      /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("filter", { id: "shadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ e("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodOpacity: "0.3" }) }) }),
+      /* @__PURE__ */ e("circle", { cx: t, cy: t, r: a, fill: "#f5f5f5", stroke: "#ddd", strokeWidth: "1" }),
+      p.map((n, r) => /* @__PURE__ */ d("g", { onClick: () => $(n), className: "sector-group", children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: n.path,
+            fill: "#333",
+            stroke: "rgb(185, 185, 185)",
+            strokeWidth: "1",
+            filter: "url(#shadow)",
+            className: "sector-path"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "text",
+          {
+            x: n.textX,
+            y: n.textY,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            fill: "#fff",
+            fontSize: "12",
+            fontWeight: "500",
+            className: "sector-label",
+            children: n.label
+          }
+        )
+      ] }, r)),
+      /* @__PURE__ */ e("circle", { cx: t, cy: t, r: s + 2, fill: "#fff" })
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "center-avatar",
+        style: { width: s * 2, height: s * 2 },
+        children: f ? /* @__PURE__ */ e("img", { src: f, alt: "avatar" }) : /* @__PURE__ */ e("span", { className: "center-text", children: "菜单" })
+      }
+    )
+  ] });
+};
 export {
-  N as default
+  L as default
 };

package/lib/index.es14.js

@@ -1,6 +1,226 @@
-import { createContext as r } from "react";
-const o = r({}), e = o.Provider;
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as h, useState as s, useImperativeHandle as b } from "react";
+import { Drawer as x } from "antd";
+const N = h((y, d) => {
+  const [c, t] = s(!1), [a, o] = s({ style: {}, data: {} });
+  b(d, () => ({
+    open: (n) => {
+      t(!0), o(n);
+    },
+    close: () => t(!1)
+  }));
+  const i = () => {
+    t(!1);
+  }, l = (n) => {
+    const { name: p, value: m } = n.target;
+    o((u) => ({ ...u, [p]: m }));
+  };
+  return /* @__PURE__ */ e(
+    x,
+    {
+      title: "节点配置",
+      closable: { "aria-label": "Close Button" },
+      onClose: i,
+      open: c,
+      getContainer: !1,
+      children: /* @__PURE__ */ e("div", { className: "h-full overflow-y-auto z-50", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "名称" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              name: "name",
+              value: a.data.name,
+              onChange: l,
+              readOnly: !0,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  focus:outline-none focus:ring-1 focus:ring-blue-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "类型" }),
+          /* @__PURE__ */ r(
+            "select",
+            {
+              name: "type",
+              value: a.type,
+              disabled: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
+              children: [
+                /* @__PURE__ */ e("option", { value: "圆形", children: "圆形" }),
+                /* @__PURE__ */ e("option", { value: "矩形", children: "矩形" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "颜色" }),
+          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                name: "color",
+                readOnly: !0,
+                value: a.style.color,
+                onChange: l,
+                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "color",
+                readOnly: !0,
+                value: a.style.color,
+                onChange: (n) => o({ ...a, color: n.target.value }),
+                className: "h-20px w-20px rounded cursor-pointer border"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "大小" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "number",
+              name: "size",
+              readOnly: !0,
+              value: parseInt(a.style.height),
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "边框宽度" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "number",
+              name: "borderWidth",
+              readOnly: !0,
+              value: parseInt(a.style.borderWidth),
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "边框虚线" }),
+          /* @__PURE__ */ r(
+            "select",
+            {
+              name: "borderDash",
+              value: a.style.borderDash,
+              disabled: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
+              children: [
+                /* @__PURE__ */ e("option", { value: "否", children: "否" }),
+                /* @__PURE__ */ e("option", { value: "是", children: "是" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "边框颜色" }),
+          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                name: "borderColor",
+                value: a.style.borderColor,
+                readOnly: !0,
+                onChange: l,
+                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "color",
+                value: a.borderColor,
+                readOnly: !0,
+                onChange: (n) => o({ ...a, borderColor: n.target.value }),
+                className: "h-20px w-20px rounded cursor-pointer border"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体位置" }),
+          /* @__PURE__ */ r(
+            "select",
+            {
+              name: "fontPosition",
+              value: a.style.textValign,
+              disabled: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
+              children: [
+                /* @__PURE__ */ e("option", { value: "center", children: "居中" }),
+                /* @__PURE__ */ e("option", { value: "bottom", children: "底部" }),
+                /* @__PURE__ */ e("option", { value: "top", children: "顶部" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体样式" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              name: "fontStyle",
+              value: a.style.fontStyle,
+              readOnly: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体颜色" }),
+          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                name: "fontColor",
+                readOnly: !0,
+                value: a.style.textBorderColor,
+                onChange: l,
+                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "color",
+                readOnly: !0,
+                value: a.style["font-color"],
+                onChange: (n) => o({ ...a, fontColor: n.target.value }),
+                className: "h-20px w-20px rounded cursor-pointer border"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体背色" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              readOnly: !0,
+              value: a.style.textBackgroundColor,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-gray-50 text-gray-400 cursor-not-allowed"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+});
 export {
-  o as GraphContext,
-  e as GraphProvider
+  N as default
 };

package/lib/index.es15.js

@@ -1,37 +1,6 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as g, useContext as m, useState as o, useRef as w, useEffect as C, useImperativeHandle as h } from "react";
-import { Drawer as x } from "antd";
-import { GraphContext as y } from "./index.es14.js";
-const E = g((I, l) => {
-  const { graphInfo: d, knowledgeCardApi: f } = m(y), [t, a] = o(!1), [k, s] = o(!1), [D, c] = o(!1), [v, p] = o({ style: {}, data: {} }), r = w(null);
-  C(() => {
-    t && r.current && (r.current.scrollTop = 0);
-  }, [t]), h(l, () => ({
-    open: (e) => {
-      a(!0), p(e), i(e);
-    },
-    close: () => a(!1)
-  }));
-  const i = async (e) => {
-    s(!0);
-    const u = await f({ kgId: d.kgId, uri: e.id });
-    console.log(44, e), c(u.data), s(!1);
-  };
-  return /* @__PURE__ */ n(
-    x,
-    {
-      title: "知识卡片",
-      onClose: () => {
-        a(!1);
-      },
-      open: t,
-      getContainer: !1,
-      className: "knowledge-card-drawer",
-      bodyStyle: { padding: "0 20px", overflow: "auto" },
-      children: /* @__PURE__ */ n("div", { ref: r, style: { height: "100%" } })
-    }
-  );
-});
+import { createContext as r } from "react";
+const o = r({}), e = o.Provider;
 export {
-  E as default
+  o as GraphContext,
+  e as GraphProvider
 };

package/lib/index.es16.js

@@ -0,0 +1,37 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as g, useContext as m, useState as o, useRef as w, useEffect as C, useImperativeHandle as h } from "react";
+import { Drawer as x } from "antd";
+import { GraphContext as y } from "./index.es15.js";
+const F = g((I, l) => {
+  const { graphInfo: d, knowledgeCardApi: f } = m(y), [t, a] = o(!1), [k, r] = o(!1), [D, c] = o(!1), [v, p] = o({ style: {}, data: {} }), s = w(null);
+  C(() => {
+    t && s.current && (s.current.scrollTop = 0);
+  }, [t]), h(l, () => ({
+    open: (e) => {
+      a(!0), p(e), i(e);
+    },
+    close: () => a(!1)
+  }));
+  const i = async (e) => {
+    r(!0);
+    const u = await f({ kgId: d.kgId, uri: e.id });
+    console.log(44, e), c(u.data), r(!1);
+  };
+  return /* @__PURE__ */ n(
+    x,
+    {
+      title: "知识卡片",
+      onClose: () => {
+        a(!1);
+      },
+      open: t,
+      getContainer: !1,
+      className: "knowledge-card-drawer",
+      styles: { body: { padding: "0 20px", overflow: "auto" } },
+      children: /* @__PURE__ */ n("div", { ref: s, style: { height: "100%" } })
+    }
+  );
+});
+export {
+  F as default
+};