react-kggraph 0.0.17 → 0.0.18

package/lib/index.es9.js

@@ -1,188 +1,423 @@
-const i = [
-  {
-    selector: "node",
-    style: {
-      "text-margin-y": "5px"
-    }
+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;
   },
-  {
-    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"
-    }
+  // 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: ".highlight",
-    style: {
-      "border-color": "rgba(174, 255, 45, 0.2)",
-      "border-width": 4
-    }
+  stop: function() {
   },
-  {
-    selector: ".path-node",
-    style: {
-      "background-color": "#145AFD",
-      "border-color": "#FFEB3B"
-    }
+  animate: !0,
+  animationEasing: void 0,
+  animationDuration: void 0,
+  animateFilter: function(e, n) {
+    return !0;
   },
-  {
-    selector: ".path-edge",
-    style: {
-      "line-color": "#145AFD",
-      "target-arrow-color": "#145AFD",
-      width: 4
-    }
+  animationThreshold: 250,
+  refresh: 20,
+  fit: !0,
+  padding: 30,
+  boundingBox: void 0,
+  nodeDimensionsIncludeLabels: !1,
+  randomize: !1,
+  componentSpacing: 40,
+  nodeRepulsion: function(e) {
+    return 2048;
   },
-  {
-    selector: ".grayed",
-    style: {
-      opacity: 0.15,
-      "text-opacity": 0.15
-    }
+  nodeOverlap: 4,
+  idealEdgeLength: 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
-    }
+  edgeElasticity: function(e) {
+    return 32;
   },
-  {
-    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
-    }
+  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: ".hover",
-    style: {
-      "border-width": 3,
-      "border-color": "#0d6ac2"
-    }
+  // 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: ".level-selected",
-    style: {
-      "background-color": "#f8bbd0",
-      "border-color": "#e91e63",
-      "border-width": 4,
-      color: "#880e4f"
-    }
+  levelWidth: function(e) {
+    return e.maxDegree() / 4;
   },
-  // 层级分析样式 - 关联节点
-  {
-    selector: ".level-highlight",
-    style: {
-      "background-color": "#bbdefb",
-      "border-color": "#2196f3",
-      "border-width": 3,
-      color: "#0d47a1"
-    }
+  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-highlightedge",
-    style: {
-      "line-color": "#1976d2",
-      "target-arrow-color": "#1976d2",
-      width: 3,
-      opacity: 1
-    }
+  // 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-grayed",
-    style: {
-      opacity: 0.15,
-      "text-opacity": 0.15
-    }
+  // 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;
   }
-], 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);
-};
+  // 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;
+  }
+  // transform a given node position. Useful for changing flow direction in discrete layouts
+});
 export {
-  n as edgeNodeStyles
+  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
 };

package/lib/src/components/Graph/components/ActionBar/actionList.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ActionBarItem {
+    key: string;
+    title: string;
+    /** 图标，可以是单个或多个 antd icon 组件 */
+    icon?: React.ReactNode[];
+    onClick?: (params?: any) => void;
+}
+export declare const actionList: ActionBarItem[];
+export { actionList as default };

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

@@ -1,9 +1,24 @@
 import { default as React } from 'react';
+import { default as actionList, ActionBarItem } from './actionList.tsx';
+export type { ActionBarItem };
+export { actionList };
 interface ActionBarProps {
     cyRef: any;
     graphInfo: any;
     initNodeScale: number;
     cyContainerRef: any;
+    colors?: any;
+    typeObj?: any;
+    relationObj?: any;
+    actionBar?: {
+        position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | {
+            top?: string | number;
+            right?: string | number;
+            bottom?: string | number;
+            left?: string | number;
+        };
+        actionList?: ActionBarItem[];
+    };
 }
 declare const _default: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<unknown>>;
 export default _default;