react-kggraph 0.0.11 → 0.0.12

package/lib/index.es9.js

@@ -1,423 +1,188 @@
-const I = (e, n, r, o = 20) => {
-  const u = e.nodes(), i = u.filter((t) => t.data("name") === n), a = u.filter((t) => t.data("name") === r);
-  if (console.log(111, !i.data() || !a.data(), i.data(), a.data()), !i.data() || !a.data()) {
-    console.warn("fixNodesToEdges: 未找到左右节点", n, r);
-    const t = e.layout(c());
-    return t.run(), t.on("layoutstop", () => {
-      e.fit(void 0, 50);
-    }), !1;
-  }
-  const l = e.width();
-  if (l === 0)
-    return !1;
-  const g = i.width() || 60, d = e.height() / 2, f = g / 2 + o, m = l - g / 2 - o;
-  i.position({ x: f, y: d }), a.position({ x: m, y: d }), i.lock(), a.lock();
-  const s = e.nodes().difference(i).difference(a);
-  if (s.length > 0) {
-    s.forEach((v) => {
-      const p = v.position().x, h = Math.min(f, p), b = Math.max(m, p);
-      v.position({
-        x: h + (b - h) * 0.5,
-        y: d
-      });
-    });
-    const t = e.layout({
-      // name: 'cose-bilkent',
-      ...c(),
-      nodes: s
-      // 只布局中间节点
-      // animate: true,
-      // animationDuration: 500,
-      // randomize: false,
-      // fit: false, // 不自动适应视图
-      // nodeRepulsion: 1500000,
-      // idealEdgeLength: 120,
-      // gravity: 0.3,
-      // padding: 50,
-    });
-    t.run(), t.on("layoutstop", () => {
-      e.fit(void 0, 50), i.unlock(), a.unlock(), console.log("布局完成");
-    });
-  } else
-    e.fit(void 0, 50);
-  return console.log("fixNodesToEdges: 完成"), !0;
-}, c = () => ({
-  name: "cose-bilkent",
-  // 核心优化
-  nodeRepulsion: 1005e3,
-  // 大幅增加斥力，让节点分散
-  idealEdgeLength: 100,
-  // 拉长边长，避免拥挤
-  edgeElasticity: 0.3,
-  // 适度弹性，保持边距
-  numIter: 2500,
-  // 保持迭代次数
-  // 布局对齐
-  fit: !0,
-  padding: 50,
-  // 增加内边距
-  randomize: !1,
-  animate: "end",
-  //fit、none
-  animationDuration: 1e3,
-  // 辅助优化
-  nodeDimensionsIncludeLabels: !0,
-  // 让节点自动适应标签长度
-  tile: !0,
-  tilingPaddingVertical: 15,
-  tilingPaddingHorizontal: 15,
-  gravity: 0.6,
-  // 稍强的向心力，避免过于分散
-  // 其他保持默认
-  nestingFactor: 0.1,
-  gravityRange: 3,
-  gravityRangeCompound: 1.5,
-  gravityCompound: 1,
-  initialEnergyOnIncremental: 0.5,
-  refresh: 30
-}), w = (e, n) => {
-  console.log(111, n);
-  const r = e.current;
-  if (!r) return;
-  let o = {};
-  switch (n) {
-    case "circle":
-      o = E();
-      break;
-    case "concentric":
-      console.log("执行圆形布局"), o = L();
-      break;
-    case "grid":
-      console.log("执行网格布局"), o = D();
-      break;
-    case "breadthfirst":
-      console.log("执行树型布局"), o = F();
-      break;
-    case "random":
-      console.log("执行随机布局"), o = y();
-      break;
-    case "cose":
-      console.log("执行 cose 布局"), o = k();
-      break;
-    case "cose-bilkent":
-      console.log("执行 cose-bilkent 布局"), o = c();
-      break;
-    case "fcose":
-      console.log("执行 fcose 布局"), o = x();
-      break;
-    case "cise":
-      console.log("执行 cise 布局"), o = {
-        name: "cise",
-        // 聚类分组（必须定义才能生效）
-        clusters: [],
-        // 关闭动画，避免抖动
-        animate: !1,
-        // 布局完成后适应画布
-        fit: !0,
-        // 内边距
-        padding: 30,
-        // 节点间距
-        nodeSeparation: 80,
-        // 理想边长
-        idealEdgeLength: 80,
-        // 聚类间边长度系数
-        idealInterClusterEdgeLengthCoefficient: 1.5,
-        // 最大迭代次数
-        maxIteration: 500
-      };
-      break;
-    default:
-      console.warn("未知布局类型：", n);
-      return;
-  }
-  r.layout(o).run();
-}, y = () => ({
-  name: "random",
-  fit: !0,
-  // whether to fit to viewport
-  padding: 30,
-  // fit padding
-  boundingBox: void 0,
-  // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-  animate: !0,
-  // whether to transition the node positions
-  animationDuration: 500,
-  // duration of animation in ms if enabled
-  animationEasing: void 0,
-  // easing of animation if enabled
-  animateFilter: function(e, n) {
-    return !0;
+const i = [
+  {
+    selector: "node",
+    style: {
+      "text-margin-y": "5px"
+    }
   },
-  // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
-  ready: void 0,
-  // callback on layoutready
-  stop: void 0,
-  // callback on layoutstop
-  transform: function(e, n) {
-    return n;
-  }
-  // transform a given node position. Useful for changing flow direction in discrete layouts 
-}), k = () => ({
-  name: "cose",
-  ready: function() {
+  {
+    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"
+    }
   },
-  stop: function() {
+  {
+    selector: ".highlight",
+    style: {
+      "border-color": "rgba(174, 255, 45, 0.2)",
+      "border-width": 4
+    }
   },
-  animate: !0,
-  animationEasing: void 0,
-  animationDuration: void 0,
-  animateFilter: function(e, n) {
-    return !0;
+  {
+    selector: ".path-node",
+    style: {
+      "background-color": "#145AFD",
+      "border-color": "#FFEB3B"
+    }
   },
-  animationThreshold: 250,
-  refresh: 20,
-  fit: !0,
-  padding: 30,
-  boundingBox: void 0,
-  nodeDimensionsIncludeLabels: !1,
-  randomize: !1,
-  componentSpacing: 40,
-  nodeRepulsion: function(e) {
-    return 2048;
+  {
+    selector: ".path-edge",
+    style: {
+      "line-color": "#145AFD",
+      "target-arrow-color": "#145AFD",
+      width: 4
+    }
   },
-  nodeOverlap: 4,
-  idealEdgeLength: function(e) {
-    return 32;
+  {
+    selector: ".grayed",
+    style: {
+      opacity: 0.15,
+      "text-opacity": 0.15
+    }
   },
-  edgeElasticity: function(e) {
-    return 32;
+  {
+    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
+    }
   },
-  nestingFactor: 1.2,
-  gravity: 1,
-  numIter: 8e3,
-  initialTemp: 1e3,
-  coolingFactor: 0.99,
-  minTemp: 1
-}), E = () => ({
-  name: "circle",
-  fit: !0,
-  // whether to fit the viewport to the graph
-  padding: 30,
-  // the padding on fit
-  boundingBox: void 0,
-  // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-  avoidOverlap: !0,
-  // prevents node overlap, may overflow boundingBox and radius if not enough space
-  nodeDimensionsIncludeLabels: !1,
-  // Excludes the label when calculating node bounding boxes for the layout algorithm
-  spacingFactor: 1.2,
-  // 节点间距系数，值越大连线越长
-  radius: void 0,
-  // the radius of the circle
-  startAngle: 1.5 * Math.PI,
-  // where nodes start in radians
-  sweep: void 0,
-  // how many radians should be between the first and last node (defaults to full circle)
-  clockwise: !0,
-  // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
-  sort: void 0,
-  // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
-  animate: !0,
-  // whether to transition the node positions
-  animationDuration: 500,
-  // duration of animation in ms if enabled
-  animationEasing: void 0,
-  // easing of animation if enabled
-  animateFilter: function(e, n) {
-    return !0;
+  {
+    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
+    }
   },
-  // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
-  ready: void 0,
-  // callback on layoutready
-  stop: void 0,
-  // callback on layoutstop
-  transform: function(e, n) {
-    return n;
-  }
-  // transform a given node position. Useful for changing flow direction in discrete layouts 
-}), L = () => ({
-  name: "concentric",
-  fit: !0,
-  // whether to fit the viewport to the graph
-  padding: 30,
-  // the padding on fit
-  startAngle: 1.5 * Math.PI,
-  // where nodes start in radians
-  sweep: void 0,
-  // how many radians should be between the first and last node (defaults to full circle)
-  clockwise: !0,
-  // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
-  equidistant: !1,
-  // whether levels have an equal radial distance betwen them, may cause bounding box overflow
-  minNodeSpacing: 10,
-  // min spacing between outside of nodes (used for radius adjustment)
-  boundingBox: void 0,
-  // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-  avoidOverlap: !0,
-  // prevents node overlap, may overflow boundingBox if not enough space
-  nodeDimensionsIncludeLabels: !1,
-  // Excludes the label when calculating node bounding boxes for the layout algorithm
-  height: void 0,
-  // height of layout area (overrides container height)
-  width: void 0,
-  // width of layout area (overrides container width)
-  spacingFactor: 3,
-  // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
-  concentric: function(e) {
-    return e.degree();
+  {
+    selector: ".hover",
+    style: {
+      "border-width": 3,
+      "border-color": "#0d6ac2"
+    }
   },
-  levelWidth: function(e) {
-    return e.maxDegree() / 4;
+  // 层级分析样式 - 目标节点
+  {
+    selector: ".level-selected",
+    style: {
+      "background-color": "#f8bbd0",
+      "border-color": "#e91e63",
+      "border-width": 4,
+      color: "#880e4f"
+    }
   },
-  animate: !0,
-  // whether to transition the node positions
-  animationDuration: 500,
-  // duration of animation in ms if enabled
-  animationEasing: void 0,
-  // easing of animation if enabled
-  animateFilter: function(e, n) {
-    return !0;
+  // 层级分析样式 - 关联节点
+  {
+    selector: ".level-highlight",
+    style: {
+      "background-color": "#bbdefb",
+      "border-color": "#2196f3",
+      "border-width": 3,
+      color: "#0d47a1"
+    }
   },
-  // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
-  ready: void 0,
-  // callback on layoutready
-  stop: void 0,
-  // callback on layoutstop
-  transform: function(e, n) {
-    return n;
-  }
-  // transform a given node position. Useful for changing flow direction in discrete layouts
-}), x = () => ({
-  name: "fcose",
-  // 节点布局 - 防止重叠
-  idealEdgeLength: 50,
-  // 较小的边长
-  edgeElasticity: 80,
-  // 边的弹性
-  nodeRepulsion: 12e3,
-  // 增强斥力，防止重叠
-  nodeOverlap: 0,
-  // 不允许重叠
-  spacingFactor: 2,
-  // 间距
-  nestingFactor: 5,
-  // 嵌套因子
-  gravity: 0,
-  // 无中心引力
-  numIter: 3e3,
-  // 增加迭代次数
-  tile: !0,
-  // 平铺布局
-  animate: "end",
-  // 动画时机
-  animationDuration: 1e3,
-  // 动画时长
-  randomize: !0,
-  // 随机初始位置
-  fit: !0,
-  // 是否适应画布
-  padding: 50,
-  // 内边距
-  nodeDimensionsIncludeLabels: !0
-}), D = () => ({
-  name: "grid",
-  fit: !0,
-  // whether to fit the viewport to the graph
-  padding: 30,
-  // padding used on fit
-  boundingBox: void 0,
-  // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-  avoidOverlap: !0,
-  // prevents node overlap, may overflow boundingBox if not enough space
-  avoidOverlapPadding: 10,
-  // extra spacing around nodes when avoidOverlap: true
-  nodeDimensionsIncludeLabels: !1,
-  // Excludes the label when calculating node bounding boxes for the layout algorithm
-  spacingFactor: void 0,
-  // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
-  condense: !1,
-  // uses all available space on false, uses minimal space on true
-  rows: void 0,
-  // force num of rows in the grid
-  cols: void 0,
-  // force num of columns in the grid
-  position: function(e) {
+  // 层级分析样式 - 边高亮
+  {
+    selector: ".level-highlightedge",
+    style: {
+      "line-color": "#1976d2",
+      "target-arrow-color": "#1976d2",
+      width: 3,
+      opacity: 1
+    }
   },
-  // returns { row, col } for element
-  sort: void 0,
-  // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
-  animate: !0,
-  // whether to transition the node positions
-  animationDuration: 500,
-  // duration of animation in ms if enabled
-  animationEasing: void 0,
-  // easing of animation if enabled
-  animateFilter: function(e, n) {
-    return !0;
-  },
-  // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
-  ready: void 0,
-  // callback on layoutready
-  stop: void 0,
-  // callback on layoutstop
-  transform: function(e, n) {
-    return n;
-  }
-  // transform a given node position. Useful for changing flow direction in discrete layouts 
-}), F = () => ({
-  name: "breadthfirst",
-  fit: !0,
-  // whether to fit the viewport to the graph
-  directed: !1,
-  // whether the tree is directed downwards (or edges can point in any direction if false)
-  direction: "downward",
-  // determines the direction in which the tree structure is drawn.  The possible values are 'downward', 'upward', 'rightward', or 'leftward'.
-  padding: 30,
-  // padding on fit
-  circle: !1,
-  // put depths in concentric circles if true, put depths top down if false
-  grid: !1,
-  // whether to create an even grid into which the DAG is placed (circle:false only)
-  spacingFactor: 1,
-  // 值越小连线越短
-  boundingBox: void 0,
-  // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-  avoidOverlap: !0,
-  // prevents node overlap, may overflow boundingBox if not enough space
-  nodeDimensionsIncludeLabels: !1,
-  // Excludes the label when calculating node bounding boxes for the layout algorithm
-  roots: void 0,
-  // the roots of the trees
-  depthSort: void 0,
-  // a sorting function to order nodes at equal depth. e.g. function(a, b){ return a.data('weight') - b.data('weight') }
-  animate: !0,
-  // whether to transition the node positions
-  animationDuration: 500,
-  // duration of animation in ms if enabled
-  animationEasing: void 0,
-  // easing of animation if enabled,
-  animateFilter: function(e, n) {
-    return !0;
-  },
-  // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
-  ready: void 0,
-  // callback on layoutready
-  stop: void 0,
-  // callback on layoutstop
-  transform: function(e, n) {
-    return n;
+  // 层级分析样式 - 置灰
+  {
+    selector: ".level-grayed",
+    style: {
+      opacity: 0.15,
+      "text-opacity": 0.15
+    }
   }
-  // transform a given node position. Useful for changing flow direction in discrete layouts
-});
+], 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 {
-  F as breadthfirstLayout,
-  E as circle,
-  L as concentricLayout,
-  c as coseBilkentLayout,
-  k as coseLayout,
-  x as fcoseLayout,
-  I as fixNodesToEdges,
-  D as gridLayout,
-  w as layout,
-  y as randomLayout
+  n as edgeNodeStyles
 };

package/lib/src/components/Graph/index.d.ts

@@ -1,5 +1,5 @@
 import { SearchType } from './types';
-declare const CytoscapeReact: ({ data, getAllGraphData, searchType, highPathAnalysis, graphInfo }: {
+declare const CytoscapeReact: ({ data, getAllGraphData, searchType, highPathAnalysis, graphInfo, stepNextApi, knowledgeCardApi }: {
     data: any;
     getAllGraphData: any;
     searchType?: SearchType;

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "react-kggraph",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "A knowledge graph visualization component based on Cytoscape",
   "type": "module",
   "main": "./lib/index.es.js",
   "module": "./lib/index.es.js",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js"
+      "import": "./lib/index.es.js",
+      "style": "./lib/react-kggraph.css"
     },
-    "./style.css": "./lib/style.css"
+    "./react-kggraph.css": "./lib/react-kggraph.css",
+    "./lib/components/Graph/react-kggraph.css": "./lib/react-kggraph.css"
   },
   "files": [
     "lib"
   ],
-  "style": "lib/style.css",
+  "style": "lib/components/Graph/CytoscapeReact.css",
   "keywords": [
     "knowledge-graph",
     "cytoscape",

package/lib/index.es16.js

@@ -1,38 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as u, useContext as g, useState as o, useRef as m, useEffect as w, useImperativeHandle as C } from "react";
-import { Drawer as h } from "antd";
-import { fullSearchDetail as x } from "./index.es7.js";
-import { GraphContext as y } from "./index.es15.js";
-const G = u((D, l) => {
-  const { graphInfo: f } = g(y), [t, a] = o(!1), [I, s] = o(!1), [k, c] = o(!1), [v, d] = o({ style: {}, data: {} }), r = m(null);
-  w(() => {
-    t && r.current && (r.current.scrollTop = 0);
-  }, [t]), C(l, () => ({
-    open: (e) => {
-      a(!0), d(e), i(e);
-    },
-    close: () => a(!1)
-  }));
-  const i = async (e) => {
-    s(!0);
-    const p = await x({ kgId: f.kgId, uri: e.id });
-    console.log(44, e), c(p.data), s(!1);
-  };
-  return /* @__PURE__ */ n(
-    h,
-    {
-      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%" } })
-    }
-  );
-});
-export {
-  G as default
-};