react-kggraph 0.0.11 → 0.0.13

package/lib/index.es10.js

@@ -1,188 +1,72 @@
-const i = [
+const i = ({ cyRef: n, setContextMenu: t, onPathAnalysis: l, setPathNodes: a }) => [
   {
-    selector: "node",
-    style: {
-      "text-margin-y": "5px"
+    label: "展收实体",
+    ids: "contract",
+    action: (e) => {
+      const o = n.current;
+      console.log("新增属性", o);
     }
   },
   {
-    selector: "edge",
-    style: {
-      // 核心：默认链接线颜色（和 hover 区分开）
-      "line-color": "#a29e9e",
-      // 核心：默认箭头颜色（和 hover 区分开）
-      "target-arrow-color": "#a29e9e",
-      // 核心：默认透明度（和 hover 区分开）
-      opacity: 1,
-      // 箭头形状（必须配置才会显示箭头）
-      "target-arrow-shape": "triangle",
-      // 链接线宽度
-      width: 2,
-      // 曲线样式
-      "curve-style": "bezier",
-      // 可选：过渡动画（颜色变化更丝滑）
-      "transition-property": "line-color, target-arrow-color, opacity",
-      "transition-duration": "0.2s",
-      label: "data(name)",
-      "z-index": 9999,
-      // 连线文字设置
-      "text-opacity": 1,
-      "font-size": 18,
-      color: "#666",
-      "text-background-color": "#fff",
-      "text-background-opacity": 1,
-      "text-background-shape": "roundrectangle",
-      // 'text-border-width': 2,
-      // 'text-border-opacity':1,
-      // 'text-border-color': '#e9e7e7',
-      "text-background-padding": "3px"
+    label: "展收属性",
+    ids: "expanded",
+    action: (e) => {
+      if (console.log("展开", e), !n.current) {
+        console.error("Cytoscape instance is not available");
+        return;
+      }
+      console.log("New node and edge added");
     }
   },
   {
-    selector: ".highlight",
-    style: {
-      "border-color": "rgba(174, 255, 45, 0.2)",
-      "border-width": 4
+    label: "节点信息",
+    ids: "nodeInfo",
+    action: (e) => {
+      console.log("节点信息:", e);
     }
   },
   {
-    selector: ".path-node",
-    style: {
-      "background-color": "#145AFD",
-      "border-color": "#FFEB3B"
+    label: "知识卡片",
+    ids: "knowledgeCard",
+    action: (e) => {
+      const o = n.current;
+      console.log("知识卡片", o);
     }
   },
+  //  {
+  //   label: '新增关系',
+  //   action: (node) => {
+  //     const cy = cyRef.current;
+  //     console.log('新增关系', cy)
+  //   },
+  // },
   {
-    selector: ".path-edge",
-    style: {
-      "line-color": "#145AFD",
-      "target-arrow-color": "#145AFD",
-      width: 4
+    label: "选中关联",
+    ids: "selRelate",
+    action: (e) => {
+      const o = n.current;
+      if (!o || !e || e.removed()) {
+        console.error("节点或Cytoscape实例无效"), t((r) => ({ ...r, visible: !1 }));
+        return;
+      }
+      const s = e, c = s.neighborhood().nodes().add(s);
+      c.edgesWith(c), o.nodes().not(c).removeClass("correlationStyle"), c.addClass("correlationStyle"), t((r) => ({ ...r, visible: !1 }));
     }
   },
   {
-    selector: ".grayed",
-    style: {
-      opacity: 0.15,
-      "text-opacity": 0.15
+    label: "路径分析",
+    action: (e) => {
+      n.current, console.log(11, e.data("name")), l == null || l(), a([e.data("name"), ""]);
     }
   },
   {
-    selector: "node.selected, edge.selected",
-    // 选中状态的样式
-    style: {
-      // 'line-color': 'rgba(66, 133, 244, 0.5)', // 选中边的颜色
-      "border-color": "rgba(174, 255, 45, 0.2)",
-      "border-width": 4
-    }
-  },
-  {
-    selector: ".correlationStyle",
-    style: {
-      width: 60,
-      height: 60,
-      // 'background-color': '#fff',
-      // 核心：outline（外边框）+ blur滤镜实现发光
-      "outline-width": "10px",
-      "outline-color": "rgba(188, 220, 255, 0.4)",
-      "outline-style": "solid",
-      "line-opacity": "0.2",
-      "outline-offset": "2px",
-      // 偏移避免遮挡节点
-      filter: "blur(20px)",
-      // 模糊outline，模拟发光
-      "z-index": 9999
-    }
-  },
-  {
-    selector: ".hover",
-    style: {
-      "border-width": 3,
-      "border-color": "#0d6ac2"
-    }
-  },
-  // 层级分析样式 - 目标节点
-  {
-    selector: ".level-selected",
-    style: {
-      "background-color": "#f8bbd0",
-      "border-color": "#e91e63",
-      "border-width": 4,
-      color: "#880e4f"
-    }
-  },
-  // 层级分析样式 - 关联节点
-  {
-    selector: ".level-highlight",
-    style: {
-      "background-color": "#bbdefb",
-      "border-color": "#2196f3",
-      "border-width": 3,
-      color: "#0d47a1"
-    }
-  },
-  // 层级分析样式 - 边高亮
-  {
-    selector: ".level-highlightedge",
-    style: {
-      "line-color": "#1976d2",
-      "target-arrow-color": "#1976d2",
-      width: 3,
-      opacity: 1
-    }
-  },
-  // 层级分析样式 - 置灰
-  {
-    selector: ".level-grayed",
-    style: {
-      opacity: 0.15,
-      "text-opacity": 0.15
+    label: "删除节点",
+    action: (e) => {
+      const o = n.current;
+      console.log("删除节点cy::::", o), e && !e.removed() && e.remove();
     }
   }
-], n = ({ elements: c }) => {
-  const o = [];
-  c.map((e) => {
-    var r, l, a;
-    !o.includes((r = e == null ? void 0 : e.data) == null ? void 0 : r.type) && ((l = e == null ? void 0 : e.data) != null && l.type) && o.push((a = e.data) == null ? void 0 : a.type);
-  });
-  const t = [];
-  return t.push({
-    selector: '[properties-type="uri"]',
-    style: {
-      "background-color": "#f7de63",
-      // 黄色
-      "background-image": "data(image)",
-      // 'background-image': sticon1,
-      "background-fit": "cover",
-      width: 80,
-      height: 80,
-      label: "data(name)",
-      color: "black",
-      "text-valign": "bottom",
-      "font-size": 18,
-      "text-max-width": "250px",
-      "text-wrap": "ellipsis",
-      "text-overflow-wrap": "anywhere"
-    }
-  }), t.push({
-    selector: '[properties-type!="uri"]',
-    style: {
-      "background-color": "#1890FF",
-      // 蓝色
-      "background-image": "data(image)",
-      "background-fit": "cover",
-      width: 80,
-      height: 80,
-      label: "data(name)",
-      color: "black",
-      "text-valign": "bottom",
-      "font-size": 18,
-      "text-max-width": "250px",
-      "text-wrap": "ellipsis",
-      "text-overflow-wrap": "anywhere"
-    }
-  }), t.concat(i);
-};
+];
 export {
-  n as edgeNodeStyles
+  i as menuItemsConfig
 };

package/lib/index.es11.js

@@ -1,72 +1,32 @@
-const i = ({ cyRef: n, setContextMenu: t, onPathAnalysis: l, setPathNodes: a }) => [
-  {
-    label: "展收实体",
-    ids: "contract",
-    action: (e) => {
-      const o = n.current;
-      console.log("新增属性", o);
+const t = (r) => {
+  if (n(r) || Array.isArray(r))
+    try {
+      return JSON.stringify(r);
+    } catch (e) {
+      console.log("JSON.stringify", e);
     }
-  },
-  {
-    label: "展收属性",
-    ids: "expanded",
-    action: (e) => {
-      if (console.log("展开", e), !n.current) {
-        console.error("Cytoscape instance is not available");
-        return;
-      }
-      console.log("New node and edge added");
+  else
+    return r;
+}, c = (r) => {
+  if (n(r) || Array.isArray(r))
+    try {
+      return JSON.parse(JSON.stringify(r));
+    } catch (e) {
+      console.log("JSON.stringify-JSON.parse", e);
     }
-  },
-  {
-    label: "节点信息",
-    ids: "nodeInfo",
-    action: (e) => {
-      console.log("节点信息:", e);
-    }
-  },
-  {
-    label: "知识卡片",
-    ids: "knowledgeCard",
-    action: (e) => {
-      const o = n.current;
-      console.log("知识卡片", o);
-    }
-  },
-  //  {
-  //   label: '新增关系',
-  //   action: (node) => {
-  //     const cy = cyRef.current;
-  //     console.log('新增关系', cy)
-  //   },
-  // },
-  {
-    label: "选中关联",
-    ids: "selRelate",
-    action: (e) => {
-      const o = n.current;
-      if (!o || !e || e.removed()) {
-        console.error("节点或Cytoscape实例无效"), t((r) => ({ ...r, visible: !1 }));
-        return;
-      }
-      const s = e, c = s.neighborhood().nodes().add(s);
-      c.edgesWith(c), o.nodes().not(c).removeClass("correlationStyle"), c.addClass("correlationStyle"), t((r) => ({ ...r, visible: !1 }));
-    }
-  },
-  {
-    label: "路径分析",
-    action: (e) => {
-      n.current, console.log(11, e.data("name")), l == null || l(), a([e.data("name"), ""]);
-    }
-  },
-  {
-    label: "删除节点",
-    action: (e) => {
-      const o = n.current;
-      console.log("删除节点cy::::", o), e && !e.removed() && e.remove();
-    }
-  }
-];
+  else
+    return r;
+};
+function n(r) {
+  return r !== null && typeof r == "object" && !Array.isArray(r);
+}
+const i = (r, e) => {
+  const o = document.createElement("a");
+  o.href = r, o.download = e, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+};
 export {
-  i as menuItemsConfig
+  i as downloadFile,
+  n as isObject,
+  t as jsonStringify,
+  c as jsonStringifyParse
 };

package/lib/index.es12.js

@@ -1,32 +1,72 @@
-const t = (r) => {
-  if (n(r) || Array.isArray(r))
-    try {
-      return JSON.stringify(r);
-    } catch (e) {
-      console.log("JSON.stringify", e);
-    }
-  else
-    return r;
-}, c = (r) => {
-  if (n(r) || Array.isArray(r))
-    try {
-      return JSON.parse(JSON.stringify(r));
-    } catch (e) {
-      console.log("JSON.stringify-JSON.parse", e);
-    }
-  else
-    return r;
-};
-function n(r) {
-  return r !== null && typeof r == "object" && !Array.isArray(r);
-}
-const i = (r, e) => {
-  const o = document.createElement("a");
-  o.href = r, o.download = e, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+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 {
-  i as downloadFile,
-  n as isObject,
-  t as jsonStringify,
-  c as jsonStringifyParse
+  L as default
 };