react-kggraph 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/lib/index.es3.js +67 -64
  2. package/lib/index.es37.js +6 -6
  3. package/lib/index.es39.js +21 -0
  4. package/lib/index.es40.js +43 -0
  5. package/lib/index.es41.js +42 -0
  6. package/lib/index.es42.js +88 -18
  7. package/lib/index.es43.js +54 -39
  8. package/lib/index.es44.js +30 -39
  9. package/lib/index.es7.js +298 -289
  10. package/lib/index.es8.js +29 -29
  11. package/lib/src/components/Graph/components/ActionBar/index.d.ts +2 -0
  12. package/lib/src/components/Graph/types.d.ts +3 -1
  13. package/lib/style.css +1 -1
  14. package/package.json +1 -1
  15. package/lib/index.es45.js +0 -91
  16. package/lib/index.es46.js +0 -58
  17. package/lib/index.es47.js +0 -33
package/lib/index.es8.js CHANGED
@@ -12,16 +12,16 @@ import A from "./index.es34.js";
12
12
  import B from "./index.es35.js";
13
13
  import { jsonStringifyParse as U } from "./index.es12.js";
14
14
  const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
15
- let o = {};
15
+ let o = { _: { count: 0 } };
16
16
  const s = {}, e = [];
17
17
  return c.forEach((n) => {
18
18
  var a;
19
19
  const { group: d } = n;
20
20
  if (d === "nodes") {
21
- const r = n.data, l = (a = r.properties) == null ? void 0 : a.type, i = r.type;
22
- !i && l === "uri" || (!e.includes(i) && l === "uri" ? (e.push(i), o = { ...o, [i]: { ...o[i], count: 1, img: r.image } }) : l === "uri" && i && (o = { ...o, [i]: { ...o[i], img: r.image, count: o[i].count + 1 } }));
21
+ const i = n.data, l = (a = i.properties) == null ? void 0 : a.type, r = i.type;
22
+ console.log(999, l, r), !r && l === "uri" ? o = { ...o, _: { ...o[r], count: o._.count + 1 } } : !e.includes(r) && l === "uri" ? (e.push(r), o = { ...o, [r]: { ...o[r], count: 1, img: i.image } }) : l === "uri" && r && (o = { ...o, [r]: { ...o[r], img: i.image, count: o[r].count + 1 } });
23
23
  } else if (d === "edges") {
24
- const r = n.data, { label: l } = r;
24
+ const i = n.data, { label: l } = i;
25
25
  s[l] ? s[l] = s[l] + 1 : s[l] = 1;
26
26
  } else
27
27
  console.log("nonono");
@@ -32,16 +32,16 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
32
32
  };
33
33
  }, te = (c, { graphData: o = [], typeObj: s, zktype: e, graphInfo: n = {} }) => {
34
34
  let d = U(s);
35
- const a = Object.keys(s), r = n.searchNodes || [], l = new Set(
35
+ const a = Object.keys(s), i = n.searchNodes || [], l = new Set(
36
36
  (o == null ? void 0 : o.map((g) => {
37
- var t, m, h;
38
- return g.group === "nodes" ? (t = g.data) == null ? void 0 : t.id : ((m = g.data) == null ? void 0 : m.source) + "-" + ((h = g.data) == null ? void 0 : h.target);
37
+ var t, u, m;
38
+ return g.group === "nodes" ? (t = g.data) == null ? void 0 : t.id : ((u = g.data) == null ? void 0 : u.source) + "-" + ((m = g.data) == null ? void 0 : m.target);
39
39
  }).filter(Boolean)) || []
40
- ), { nodes: i = [], links: p = [] } = c || {}, y = [], k = (g) => {
40
+ ), { nodes: r = [], links: p = [] } = c || {}, y = [], k = (g) => {
41
41
  g.forEach((t) => {
42
- var m, h;
42
+ var u, m;
43
43
  if (!l.has(t.id)) {
44
- const v = (m = t.properties) == null ? void 0 : m.type, f = t.type, E = t.label.split("#").pop();
44
+ const v = (u = t.properties) == null ? void 0 : u.type, f = t.type, E = t.label.split("#").pop();
45
45
  let w = -1;
46
46
  if (!f && v === "uri")
47
47
  w = t.image || L[0];
@@ -49,12 +49,12 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
49
49
  a.push(f);
50
50
  const O = a.indexOf(f);
51
51
  w = t.image || L[O] || L[0], d = { ...d, [f]: { ...d[f], img: w } };
52
- } else v === "uri" && f && (w = (h = d[f]) == null ? void 0 : h.img);
52
+ } else v === "uri" && f && (w = (m = d[f]) == null ? void 0 : m.img);
53
53
  const S = {
54
54
  ...t,
55
55
  name: E,
56
56
  "properties-type": v,
57
- image: r.includes(E) ? B : w,
57
+ image: i.includes(E) ? B : w,
58
58
  baseWidth: 80,
59
59
  // 保存基础宽度
60
60
  baseHeight: 80
@@ -66,14 +66,14 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
66
66
  };
67
67
  ((g) => {
68
68
  g.forEach((t) => {
69
- const { label: m } = t, h = `${t.source}-${t.target}`;
70
- l.has(h) || y.push({ group: "edges", data: { ...t, name: m, zktype: e } });
69
+ const { label: u } = t, m = `${t.source}-${t.target}`;
70
+ l.has(m) || y.push({ group: "edges", data: { ...t, name: u, zktype: e } });
71
71
  });
72
- })(p), k(i);
73
- const { typeListObj: u, relationListObj: x } = G([...y, ...o]);
72
+ })(p), k(r);
73
+ const { typeListObj: h, relationListObj: x } = G([...y, ...o]);
74
74
  return {
75
75
  elements: y,
76
- typeListObj: u,
76
+ typeListObj: h,
77
77
  relationListObj: x
78
78
  };
79
79
  }, oe = (c, o) => {
@@ -138,9 +138,9 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
138
138
  }
139
139
  const d = [];
140
140
  for (const a of o) {
141
- const r = e.nodes().filter((l) => l.data("name") === a);
142
- if (r.length > 0)
143
- d.push(r.id());
141
+ const i = e.nodes().filter((l) => l.data("name") === a);
142
+ if (i.length > 0)
143
+ d.push(i.id());
144
144
  else {
145
145
  e.nodes().removeClass("path-node"), e.edges().removeClass("path-edge"), C.warning(`找不到节点：${a}`);
146
146
  return;
@@ -148,27 +148,27 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
148
148
  }
149
149
  try {
150
150
  e.nodes().removeClass("path-node").removeClass("grayed"), e.edges().removeClass("path-edge").removeClass("grayed");
151
- let a = e.collection(), r = 0, l = !0;
152
- const i = [];
151
+ let a = e.collection(), i = 0, l = !0;
152
+ const r = [];
153
153
  for (let p = 0; p < d.length - 1; p++) {
154
- const y = d[p], k = d[p + 1], b = e.getElementById(y), u = e.getElementById(k), x = b.edgesWith(u).filter(function(t) {
154
+ const y = d[p], k = d[p + 1], b = e.getElementById(y), h = e.getElementById(k), x = b.edgesWith(h).filter(function(t) {
155
155
  return t.data("source") === y && t.data("target") === k;
156
- }), g = u.edgesWith(b).filter(function(t) {
156
+ }), g = h.edgesWith(b).filter(function(t) {
157
157
  return t.data("source") === k && t.data("target") === y;
158
158
  });
159
159
  if (x.length > 0 || g.length > 0) {
160
160
  const t = x.add(g);
161
- a = a.union(t).union(b).union(u), r += t.length, b.addClass("path-node"), u.addClass("path-node"), t.addClass("path-edge"), i.push(b.data("name"), u.data("name")), console.log(`找到直接连接的边：正向${x.length}条，反向${g.length}条`);
161
+ a = a.union(t).union(b).union(h), i += t.length, b.addClass("path-node"), h.addClass("path-node"), t.addClass("path-edge"), r.push(b.data("name"), h.data("name")), console.log(`找到直接连接的边：正向${x.length}条，反向${g.length}条`);
162
162
  } else {
163
163
  const t = e.elements().aStar({
164
164
  root: b,
165
- goal: u,
165
+ goal: h,
166
166
  directed: !1
167
167
  });
168
168
  if (t.found && t.path) {
169
- a = a.union(t.path), r += t.distance, t.path.nodes().addClass("path-node"), t.path.edges().addClass("path-edge");
170
- const m = t.path.nodes().map((h) => h.data("name"));
171
- i.push(...m);
169
+ a = a.union(t.path), i += t.distance, t.path.nodes().addClass("path-node"), t.path.edges().addClass("path-edge");
170
+ const u = t.path.nodes().map((m) => m.data("name"));
171
+ r.push(...u);
172
172
  } else {
173
173
  l = !1, console.log(`节点 ${o[p]} 和 ${o[p + 1]} 之间没有路径`);
174
174
  break;
package/lib/src/components/Graph/components/ActionBar/index.d.ts CHANGED
@@ -18,6 +18,8 @@ interface ActionBarProps {
18
18
  left?: string | number;
19
19
  };
20
20
  actionList?: ActionBarItem[];
21
+ /** 是否默认展开工具栏，默认 false 收起 */
22
+ isExpand?: boolean;
21
23
  };
22
24
  }
23
25
  declare const _default: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<unknown>>;
package/lib/src/components/Graph/types.d.ts CHANGED
@@ -57,7 +57,7 @@ export interface GraphColors {
57
57
  /** 路径节点颜色，默认 #145AFD */
58
58
  pathNodeColor?: string;
59
59
  }
60
- export type ActionBarPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | {
60
+ export type ActionBarPosition = 'top' | 'bottom' | 'left' | 'right' | {
61
61
  top?: string | number;
62
62
  right?: string | number;
63
63
  bottom?: string | number;
@@ -84,6 +84,8 @@ export interface ActionBarConfig {
84
84
  position?: ActionBarPosition;
85
85
  /** 按钮列表配置，传入则覆盖默认按钮 */
86
86
  actionList?: ActionBarItem[];
87
+ /** 默认展开或者收起 */
88
+ isExpand?: boolean;
87
89
  }
88
90
  export interface CytoscapeReactProps {
89
91
  /** 图谱数据 */
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .cytoscape-container{width:100%;height:100%;margin:20px auto}.search-input{padding:8px 12px;width:300px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px}.btn-group{margin-bottom:10px}.btn{padding:8px 16px;margin:0 5px;border:none;border-radius:4px;background:#4285f4;color:#fff;cursor:pointer}.btn:hover{background:#3367d6}.result-text{margin-bottom:10px;color:#333;font-size:14px}.cy-container{width:100%;height:100%}.cy-container :global(.grayed){opacity:.3!important;background-color:#bdbdbd!important;color:#757575!important}.cy-container :global(.highlighted){background-color:#ffeb3b!important;border-color:#fbc02d!important;color:#333!important}.cy-container :global(.selected){border-color:#4caf50!important;background-color:#a5d6a7!important;color:#1b5e20!important}.cy-container .cy-edge:selected{line-color:#ea4335;line-width:3px;line-style:solid}.cy-container .cy-node:hover:not(:selected){background-color:#3367d6}.cy-container .cy-edge:hover:not(:selected){line-color:#757575}.path-nodes-container{margin-bottom:15px}.path-nodes-container h3{margin:10px 0;font-size:16px;color:#333}.node-input-row{display:flex;align-items:center;margin-bottom:8px}.node-input-row span{margin-right:10px;min-width:60px}.node-input-row input{flex:1;margin-right:10px}.remove-node-btn{background:#f44336;padding:6px 12px;font-size:12px}.add-node-btn{background:#4caf50;padding:8px 16px;margin-top:10px}.menuBtn:nth-child(1){transform:rotate(0) skew(31deg)}.menuBtn:nth-child(2){transform:rotate(51deg) skew(31deg)}.menuBtn:nth-child(3){transform:rotate(102deg) skew(31deg)}.menuBtn:nth-child(4){transform:rotate(153deg) skew(31deg)}.menuBtn:nth-child(5){transform:rotate(204deg) skew(31deg)}.menuBtn:nth-child(6){transform:rotate(255deg) skew(31deg)}.menuBtn:nth-child(7){transform:rotate(306deg) skew(35deg)}.menuBtn .menu-item{color:#fff;display:block;width:50px;height:20px;position:absolute;text-align:center;font-size:12px}.menuBtn .menu-item:hover{background:transparent!important}.menuBtn .menu-item{bottom:5px;right:19px;transform:skew(-30deg) translate(-9%) rotate(2deg) translateY(0)}.menuCertent{width:60px;height:60px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;margin-top:-15%;margin-left:-15%;z-index:999;border-radius:50%;color:#fff;text-align:center;font-size:16px;cursor:pointer;border:2px solid #c9cec9}.opacity-30{opacity:.3}.cursor{cursor:pointer}.my-4px{margin:4px 0}.z-10{z-index:10}.hidden{display:none}.w-20px{width:20px}.h-100{height:100%}.rounded-50{border-radius:10%}.relative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{position:absolute;display:flex;align-items:center;z-index:10}.graph-bar .graph-bar-min-vertical{padding:10px 0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:10px;box-shadow:0 4px 20px #100dae33;border-radius:6px;flex-wrap:nowrap;gap:10px;width:auto;white-space:nowrap}.graph-bar .graph-bar-menu{position:relative;cursor:pointer;margin:0 10px;white-space:nowrap;display:flex;align-items:center}.graph-bar .graph-bar-menu:hover .grap-menu-dropdown-item{color:#145afd}.graph-bar .grap-menu-dropdown{background:#fff;box-shadow:0 4px 20px #0000003b;border-radius:6px;position:absolute;padding:5px 0;z-index:99;top:60px}.graph-bar .grap-menu-dropdown p{white-space:nowrap;padding:5px 15px}.graph-bar .grap-menu-dropdown p:hover{background:#f5f5f5;color:#145afd}.graph-bar .grap-menu-dropdown-item{display:flex;cursor:pointer;flex-direction:column;align-items:center}.graph-bar .hide{display:none}.graph-bar .show{display:block}.graph-bar.graph-bar-vertical,.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.gtaph-statics{right:0;z-index:1;background:#fff;padding:10px;border-radius:10px;width:200px;box-shadow:0 4px 20px #0000003b}.hove-active{cursor:pointer;font-size:14px}.hove-active:hover{color:#145afd}.setting-form{display:flex;flex-direction:column;height:100%}.setting-form .setting-form-content{flex:1;overflow-y:auto;padding:16px}.setting-form .setting-form-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #f0f0f0;margin-top:auto}.setting-form .setting-form-footer .ant-form-item{margin-bottom:0}.query-node{width:300px;position:absolute;background-color:#fff;right:0;top:20px;padding:10px 20px;border-radius:10px}.path-node{width:380px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b;z-index:10}.path-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.path-node .search-input{margin-bottom:0;padding-bottom:5px}.path-node .btn-group{display:flex;justify-content:flex-end;margin-top:20px}.path-node .ant-select-suffix{width:10px}.query-node{width:300px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b}.query-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.radial-menu{position:relative;display:inline-flex;align-items:center;justify-content:center}.radial-svg{position:absolute;top:0;left:0}.sector-group{cursor:pointer;transition:all .2s ease}.sector-group .sector-path{transition:all .2s ease}.sector-group:hover .sector-path{filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.sector-label{pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.center-avatar{position:absolute;z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .3s ease;overflow:hidden;color:#fff;font-weight:500}.center-avatar img{width:100%;height:100%;object-fit:cover}.center-avatar .center-text{font-size:14px;text-align:center}.center-avatar:hover{transform:scale(1.08);box-shadow:0 6px 20px #0006}.center-avatar:active{transform:scale(.95)}.drawer-wraper,.knowledge-card-drawer{padding-bottom:20px}.drawer-wraper .title,.knowledge-card-drawer .title{font-weight:700;font-size:14px;color:#3d3d3d;position:relative;padding-left:8px}.drawer-wraper .title:before,.knowledge-card-drawer .title:before{position:absolute;left:0;transform:translateY(-50%);top:50%;content:"";width:3px;height:17px;background:#145afd}.drawer-wraper .graph-item,.knowledge-card-drawer .graph-item{height:26px;border-bottom:1px solid #E5E5E5;background:#edf3fe}.drawer-wraper .graph-item:hover,.knowledge-card-drawer .graph-item:hover{background:#edf3fe}.drawer-wraper .noraml-type,.knowledge-card-drawer .noraml-type{font-size:14px;color:#145afd;line-height:26px;text-align:center;border-right:1px solid #E5E5E5}.drawer-wraper .noraml-text,.knowledge-card-drawer .noraml-text{font-size:14px;color:#333;line-height:26px}.drawer-wraper .selected-item,.knowledge-card-drawer .selected-item{background:#edf3fe;color:#1890ff}.drawer-wraper .selected-item .noraml-type,.knowledge-card-drawer .selected-item .noraml-type{background:#347bfc;color:#fff}.drawer-wraper .drawer-card-title,.knowledge-card-drawer .drawer-card-title{font-weight:600;font-size:14px;color:#333;position:relative;padding-bottom:10px;margin:15px 0 10px;cursor:pointer}.drawer-wraper .drawer-card-title:hover,.knowledge-card-drawer .drawer-card-title:hover{color:#145afd}.drawer-wraper .drawer-card-title:after,.knowledge-card-drawer .drawer-card-title:after{content:"";position:absolute;border-bottom:1px solid #DFDFDF;width:100%;left:0;bottom:0}.drawer-wraper .drawer-card-title:before,.knowledge-card-drawer .drawer-card-title:before{content:"";position:absolute;border-bottom:1px solid #145AFD;width:64px;left:0;bottom:0;z-index:1}.collapse-wrap{border-color:#dfdfdf;border-radius:0;height:calc(100vh - 480px);overflow-y:auto}.collapse-wrap .ant-collapse-header{padding:9px 10px!important;background:#fff}.collapse-wrap .ant-collapse-item{border-color:#dfdfdf}.collapse-wrap .ant-collapse-title{font-size:14px;font-weight:700;color:#3d3d3d}.collapse-wrap .ant-collapse-body{max-height:calc(100vh - 550px);overflow-y:auto;width:298px;padding:0 16px 16px!important}.collapse-wrap .ant-collapse-body .ant-card-body{padding:0!important}.collapse-wrap .ant-collapse-body .ant-card{border:none}.property-section-wraper .section-item{display:flex;margin-top:4px}.property-section-wraper .detail-label{color:#333;font-size:14px;white-space:nowrap;flex-shrink:0}.property-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-wraper .video-item{height:185px;position:relative;background:#333;border-radius:6px}.video-wraper .video-item-video{width:100%;height:100%;border-radius:6px;object-fit:cover}.relation-section-wraper{display:flex;flex-wrap:wrap;gap:10px}.relation-section-wraper .group{width:100%}.relation-section-wraper .section-card{width:100%;height:100%;border:1px solid #DFDFDF}.relation-section-wraper .section-title{margin-bottom:7px}.relation-section-wraper .entity-name-list{font-size:16px;font-weight:700}.relation-section-wraper .view-details-btn{color:#145afd}.relation-section-wraper .detail-item-tag{background-color:#e6f2ff;font-size:14px;border:1px solid #bdf;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#1082fe;margin-right:3px}.relation-section-wraper .detail-item-tag1{background-color:#fff5df;font-size:14px;border:1px solid #FFE0B8;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#ff9418}.relation-section-wraper .detail-item-list{margin-bottom:3px}.relation-section-wraper .detail-label{color:#676a6c;font-size:14px;white-space:nowrap;flex-shrink:0}.relation-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-section-wraper .mb-18px{margin-bottom:18px}.knowledge-card-click{height:100%;overflow:hidden}.knowledge-card-click .drawer-card-title2{font-weight:700;flex-wrap:nowrap;padding-bottom:10px;border-bottom:1px solid #e4e7ed;cursor:pointer;color:#333;margin:14px 0}.knowledge-card-click .drawer-card-title2:hover,.knowledge-card-click .drawer-card-title2.active{color:#145afd}.knowledge-card-click .card-item-click{flex-shrink:0;margin-right:10px;border-right:1px solid #e4e7ed;padding-right:10px;height:100%;background:#fff}.knowledge-card-click .knowledge-card-content{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.knowledge-card-click .knowledge-card-content::-webkit-scrollbar{display:none}
1
+ .cytoscape-container{width:100%;height:100%;margin:20px auto}.search-input{padding:8px 12px;width:300px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px}.btn-group{margin-bottom:10px}.btn{padding:8px 16px;margin:0 5px;border:none;border-radius:4px;background:#4285f4;color:#fff;cursor:pointer}.btn:hover{background:#3367d6}.result-text{margin-bottom:10px;color:#333;font-size:14px}.cy-container{width:100%;height:100%}.cy-container :global(.grayed){opacity:.3!important;background-color:#bdbdbd!important;color:#757575!important}.cy-container :global(.highlighted){background-color:#ffeb3b!important;border-color:#fbc02d!important;color:#333!important}.cy-container :global(.selected){border-color:#4caf50!important;background-color:#a5d6a7!important;color:#1b5e20!important}.cy-container .cy-edge:selected{line-color:#ea4335;line-width:3px;line-style:solid}.cy-container .cy-node:hover:not(:selected){background-color:#3367d6}.cy-container .cy-edge:hover:not(:selected){line-color:#757575}.path-nodes-container{margin-bottom:15px}.path-nodes-container h3{margin:10px 0;font-size:16px;color:#333}.node-input-row{display:flex;align-items:center;margin-bottom:8px}.node-input-row span{margin-right:10px;min-width:60px}.node-input-row input{flex:1;margin-right:10px}.remove-node-btn{background:#f44336;padding:6px 12px;font-size:12px}.add-node-btn{background:#4caf50;padding:8px 16px;margin-top:10px}.menuBtn:nth-child(1){transform:rotate(0) skew(31deg)}.menuBtn:nth-child(2){transform:rotate(51deg) skew(31deg)}.menuBtn:nth-child(3){transform:rotate(102deg) skew(31deg)}.menuBtn:nth-child(4){transform:rotate(153deg) skew(31deg)}.menuBtn:nth-child(5){transform:rotate(204deg) skew(31deg)}.menuBtn:nth-child(6){transform:rotate(255deg) skew(31deg)}.menuBtn:nth-child(7){transform:rotate(306deg) skew(35deg)}.menuBtn .menu-item{color:#fff;display:block;width:50px;height:20px;position:absolute;text-align:center;font-size:12px}.menuBtn .menu-item:hover{background:transparent!important}.menuBtn .menu-item{bottom:5px;right:19px;transform:skew(-30deg) translate(-9%) rotate(2deg) translateY(0)}.menuCertent{width:60px;height:60px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;margin-top:-15%;margin-left:-15%;z-index:999;border-radius:50%;color:#fff;text-align:center;font-size:16px;cursor:pointer;border:2px solid #c9cec9}.opacity-30{opacity:.3}.cursor{cursor:pointer}.my-4px{margin:4px 0}.z-10{z-index:10}.hidden{display:none}.w-20px{width:20px}.h-100{height:100%}.rounded-50{border-radius:10%}.relative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{position:absolute;display:flex;align-items:center;z-index:10}.graph-bar .graph-bar-min-vertical{padding:0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:4px;box-shadow:0 4px 20px #100dae33;border-radius:6px;flex-wrap:nowrap;gap:10px;width:auto;white-space:nowrap}.graph-bar .graph-bar-menu{position:relative;cursor:pointer;margin:0 10px;white-space:nowrap;display:flex;align-items:center}.graph-bar .graph-bar-menu:hover .grap-menu-dropdown-item{color:#145afd}.graph-bar .grap-menu-dropdown{background:#fff;box-shadow:0 4px 20px #0000003b;border-radius:6px;position:absolute;padding:5px 0;z-index:99;top:60px}.graph-bar .grap-menu-dropdown p{white-space:nowrap;padding:5px 15px}.graph-bar .grap-menu-dropdown p:hover{background:#f5f5f5;color:#145afd}.graph-bar .grap-menu-dropdown-item{display:flex;cursor:pointer;flex-direction:column;align-items:center}.graph-bar .hide{display:none}.graph-bar .show{display:block}.graph-bar .graph-bar-expand-wrapper-vertical{overflow:hidden;max-height:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper{overflow:hidden;max-width:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper.collapsed{max-width:0;opacity:0;margin:0!important}.graph-bar .graph-bar-expand-wrapper-vertical.collapsed-vertical{max-height:0;opacity:0;margin:0!important}.graph-bar .graph-bar-min:not(.graph-bar-min-vertical) .graph-bar-expand-wrapper{display:flex;align-items:center;gap:10px;margin-left:10px;margin-right:10px}.graph-bar.graph-bar-vertical{flex-direction:column}.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column;align-items:flex-start;position:relative;padding-bottom:0!important}.graph-bar.graph-bar-vertical .graph-bar-expand-wrapper{flex-direction:column;width:100%}.graph-bar.graph-bar-vertical .cursor{align-self:flex-end;flex-shrink:0;position:relative}.graph-bar.graph-bar-vertical .cursor:before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.graph-bar .bar-item{color:#999;font-size:12px;margin:8px 0}.graph-bar .oprate-btn{width:76px;color:#145afd;border-right:1px solid #f0f0f0}.graph-bar .oprate-btn-vertical{width:76px;padding:10px 0;color:#145afd;border-top:1px solid #f0f0f0}.gtaph-statics{right:0;z-index:1;background:#fff;padding:10px;border-radius:10px;width:200px;box-shadow:0 4px 20px #0000003b}.hove-active{cursor:pointer;font-size:14px}.hove-active:hover{color:#145afd}.setting-form{display:flex;flex-direction:column;height:100%}.setting-form .setting-form-content{flex:1;overflow-y:auto;padding:16px}.setting-form .setting-form-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #f0f0f0;margin-top:auto}.setting-form .setting-form-footer .ant-form-item{margin-bottom:0}.query-node{width:300px;position:absolute;background-color:#fff;right:0;top:20px;padding:10px 20px;border-radius:10px}.path-node{width:380px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b;z-index:10}.path-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.path-node .search-input{margin-bottom:0;padding-bottom:5px}.path-node .btn-group{display:flex;justify-content:flex-end;margin-top:20px}.path-node .ant-select-suffix{width:10px}.query-node{width:300px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b}.query-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.radial-menu{position:relative;display:inline-flex;align-items:center;justify-content:center}.radial-svg{position:absolute;top:0;left:0}.sector-group{cursor:pointer;transition:all .2s ease}.sector-group .sector-path{transition:all .2s ease}.sector-group:hover .sector-path{filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.sector-label{pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.center-avatar{position:absolute;z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .3s ease;overflow:hidden;color:#fff;font-weight:500}.center-avatar img{width:100%;height:100%;object-fit:cover}.center-avatar .center-text{font-size:14px;text-align:center}.center-avatar:hover{transform:scale(1.08);box-shadow:0 6px 20px #0006}.center-avatar:active{transform:scale(.95)}.drawer-wraper,.knowledge-card-drawer{padding-bottom:20px}.drawer-wraper .title,.knowledge-card-drawer .title{font-weight:700;font-size:14px;color:#3d3d3d;position:relative;padding-left:8px}.drawer-wraper .title:before,.knowledge-card-drawer .title:before{position:absolute;left:0;transform:translateY(-50%);top:50%;content:"";width:3px;height:17px;background:#145afd}.drawer-wraper .graph-item,.knowledge-card-drawer .graph-item{height:26px;border-bottom:1px solid #E5E5E5;background:#edf3fe}.drawer-wraper .graph-item:hover,.knowledge-card-drawer .graph-item:hover{background:#edf3fe}.drawer-wraper .noraml-type,.knowledge-card-drawer .noraml-type{font-size:14px;color:#145afd;line-height:26px;text-align:center;border-right:1px solid #E5E5E5}.drawer-wraper .noraml-text,.knowledge-card-drawer .noraml-text{font-size:14px;color:#333;line-height:26px}.drawer-wraper .selected-item,.knowledge-card-drawer .selected-item{background:#edf3fe;color:#1890ff}.drawer-wraper .selected-item .noraml-type,.knowledge-card-drawer .selected-item .noraml-type{background:#347bfc;color:#fff}.drawer-wraper .drawer-card-title,.knowledge-card-drawer .drawer-card-title{font-weight:600;font-size:14px;color:#333;position:relative;padding-bottom:10px;margin:15px 0 10px;cursor:pointer}.drawer-wraper .drawer-card-title:hover,.knowledge-card-drawer .drawer-card-title:hover{color:#145afd}.drawer-wraper .drawer-card-title:after,.knowledge-card-drawer .drawer-card-title:after{content:"";position:absolute;border-bottom:1px solid #DFDFDF;width:100%;left:0;bottom:0}.drawer-wraper .drawer-card-title:before,.knowledge-card-drawer .drawer-card-title:before{content:"";position:absolute;border-bottom:1px solid #145AFD;width:64px;left:0;bottom:0;z-index:1}.collapse-wrap{border-color:#dfdfdf;border-radius:0;height:calc(100vh - 480px);overflow-y:auto}.collapse-wrap .ant-collapse-header{padding:9px 10px!important;background:#fff}.collapse-wrap .ant-collapse-item{border-color:#dfdfdf}.collapse-wrap .ant-collapse-title{font-size:14px;font-weight:700;color:#3d3d3d}.collapse-wrap .ant-collapse-body{max-height:calc(100vh - 550px);overflow-y:auto;width:298px;padding:0 16px 16px!important}.collapse-wrap .ant-collapse-body .ant-card-body{padding:0!important}.collapse-wrap .ant-collapse-body .ant-card{border:none}.property-section-wraper .section-item{display:flex;margin-top:4px}.property-section-wraper .detail-label{color:#333;font-size:14px;white-space:nowrap;flex-shrink:0}.property-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-wraper .video-item{height:185px;position:relative;background:#333;border-radius:6px}.video-wraper .video-item-video{width:100%;height:100%;border-radius:6px;object-fit:cover}.relation-section-wraper{display:flex;flex-wrap:wrap;gap:10px}.relation-section-wraper .group{width:100%}.relation-section-wraper .section-card{width:100%;height:100%;border:1px solid #DFDFDF}.relation-section-wraper .section-title{margin-bottom:7px}.relation-section-wraper .entity-name-list{font-size:16px;font-weight:700}.relation-section-wraper .view-details-btn{color:#145afd}.relation-section-wraper .detail-item-tag{background-color:#e6f2ff;font-size:14px;border:1px solid #bdf;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#1082fe;margin-right:3px}.relation-section-wraper .detail-item-tag1{background-color:#fff5df;font-size:14px;border:1px solid #FFE0B8;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#ff9418}.relation-section-wraper .detail-item-list{margin-bottom:3px}.relation-section-wraper .detail-label{color:#676a6c;font-size:14px;white-space:nowrap;flex-shrink:0}.relation-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-section-wraper .mb-18px{margin-bottom:18px}.knowledge-card-click{height:100%;overflow:hidden}.knowledge-card-click .drawer-card-title2{font-weight:700;flex-wrap:nowrap;padding-bottom:10px;border-bottom:1px solid #e4e7ed;cursor:pointer;color:#333;margin:14px 0}.knowledge-card-click .drawer-card-title2:hover,.knowledge-card-click .drawer-card-title2.active{color:#145afd}.knowledge-card-click .card-item-click{flex-shrink:0;margin-right:10px;border-right:1px solid #e4e7ed;padding-right:10px;height:100%;background:#fff}.knowledge-card-click .knowledge-card-content{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.knowledge-card-click .knowledge-card-content::-webkit-scrollbar{display:none}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-kggraph",
3
- "version": "0.0.24",
3
+ "version": "0.0.26",
4
4
  "description": "A knowledge graph visualization component based on Cytoscape",
5
5
  "type": "module",
6
6
  "main": "./lib/index.es.js",
package/lib/index.es45.js DELETED
@@ -1,91 +0,0 @@
1
- import { jsxs as m, Fragment as x, jsx as a } from "react/jsx-runtime";
2
- import { useState as u, useRef as p, useEffect as f } from "react";
3
- import { Modal as C } from "antd";
4
- const R = ({ videos: c, forceSingleColumn: V = !1, source: j = "" }) => {
5
- const [n, l] = u(null), [i, h] = u({}), v = p({}), s = p(null), g = () => {
6
- s.current && (s.current.pause(), s.current.currentTime = 0), l(null);
7
- };
8
- f(() => {
9
- n && s.current && s.current.play().catch(() => {
10
- });
11
- }, [n]);
12
- const y = (t, r) => {
13
- if (i[r]) return;
14
- const e = document.createElement("video");
15
- e.src = t, e.crossOrigin = "anonymous", e.muted = !0, e.preload = "metadata", e.onloadeddata = () => {
16
- e.currentTime = 0.1;
17
- }, e.onseeked = () => {
18
- const o = document.createElement("canvas");
19
- o.width = e.videoWidth, o.height = e.videoHeight;
20
- const d = o.getContext("2d");
21
- if (d) {
22
- d.drawImage(e, 0, 0, o.width, o.height);
23
- const w = o.toDataURL("image/jpeg", 0.8);
24
- h((N) => ({ ...N, [r]: w }));
25
- }
26
- e.src = "";
27
- }, e.onerror = () => {
28
- e.src = "";
29
- };
30
- };
31
- return f(() => {
32
- c.forEach((t, r) => {
33
- y(t.propertyValue, r);
34
- });
35
- }, [c]), /* @__PURE__ */ m(x, { children: [
36
- /* @__PURE__ */ a("div", { className: "video-wraper", children: c.map((t, r) => {
37
- t.propertyValue.split("/").pop();
38
- const e = i[r];
39
- return /* @__PURE__ */ a("div", { className: "rounded-lg overflow-hidden transition-shadow", children: /* @__PURE__ */ m("div", { className: "video-item", children: [
40
- /* @__PURE__ */ a(
41
- "video",
42
- {
43
- ref: (o) => {
44
- v.current[r] = o;
45
- },
46
- src: t.propertyValue,
47
- poster: e,
48
- className: "video-item-video",
49
- muted: !0,
50
- playsInline: !0,
51
- preload: "metadata",
52
- onClick: () => l(t.propertyValue)
53
- }
54
- ),
55
- !n && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ a(
56
- "div",
57
- {
58
- className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform",
59
- onClick: () => l(t.propertyValue),
60
- children: /* @__PURE__ */ a("span", { className: "w-24px h-24px i-custom-video-play inline-block" })
61
- }
62
- ) })
63
- ] }) }, r);
64
- }) }),
65
- /* @__PURE__ */ a(
66
- C,
67
- {
68
- open: !!n,
69
- footer: null,
70
- onCancel: g,
71
- width: "auto",
72
- centered: !0,
73
- className: "video-modal",
74
- wrapClassName: "modal-wrapClassName",
75
- getContainer: () => document.getElementById("root"),
76
- children: n && /* @__PURE__ */ a(
77
- "video",
78
- {
79
- ref: s,
80
- src: n,
81
- controls: !0,
82
- className: "max-w-[80vw] max-h-[80vh] mt-10px"
83
- }
84
- )
85
- }
86
- )
87
- ] });
88
- };
89
- export {
90
- R as default
91
- };
package/lib/index.es46.js DELETED
@@ -1,58 +0,0 @@
1
- import { jsx as l, jsxs as o } from "react/jsx-runtime";
2
- import { useState as g, useRef as y } from "react";
3
- import { Row as d, Flex as h, Button as p } from "antd";
4
- const j = ({ audios: m, forceSingleColumn: u = !1, source: f = "" }) => {
5
- const [s, a] = g(null), n = y({}), x = (e) => {
6
- var t, i;
7
- if (s === e)
8
- (t = n.current[e]) == null || t.pause(), a(null);
9
- else {
10
- if (s && ((i = n.current[s]) == null || i.pause()), a(e), !n.current[e]) {
11
- const c = new Audio(e);
12
- n.current[e] = c;
13
- }
14
- n.current[e].play(), n.current[e].onended = () => a(null);
15
- }
16
- };
17
- return /* @__PURE__ */ l(
18
- "div",
19
- {
20
- className: f === "qa-card" ? "grid grid-cols-1" : `grid ${u ? "grid-cols-1 gap-y-3" : "grid-cols-2 gap-x-100px gap-y-20px"}`,
21
- children: m.map((e, t) => {
22
- const i = e.propertyValue.split("/").pop() || "未命名音频", c = s === e.propertyValue;
23
- return /* @__PURE__ */ o(d, { className: "flex items-center justify-between transition-all", justify: "space-between", align: "middle", children: [
24
- /* @__PURE__ */ o(d, { className: "flex items-center min-w-0 flex-1", align: "middle", children: [
25
- /* @__PURE__ */ l("div", { className: "mr-3 text-xl flex-shrink-0", children: /* @__PURE__ */ l("span", { className: "w-24px h-30px i-custom-audio inline-block" }) }),
26
- /* @__PURE__ */ l("div", { className: "min-w-0", children: /* @__PURE__ */ l("div", { className: "truncate", title: i, children: i }) })
27
- ] }),
28
- /* @__PURE__ */ o(h, { className: "flex-shrink-0 ml-3", children: [
29
- /* @__PURE__ */ l(
30
- p,
31
- {
32
- className: "px-0",
33
- type: "link",
34
- onClick: () => x(e.propertyValue),
35
- children: c ? "暂停" : "播放"
36
- }
37
- ),
38
- /* @__PURE__ */ l(
39
- p,
40
- {
41
- className: "px-0",
42
- type: "link",
43
- onClick: () => {
44
- const r = document.createElement("a");
45
- r.href = e.propertyValue, r.download = i, r.click();
46
- },
47
- children: "下载"
48
- }
49
- )
50
- ] })
51
- ] }, t);
52
- })
53
- }
54
- );
55
- };
56
- export {
57
- j as default
58
- };
package/lib/index.es47.js DELETED
@@ -1,33 +0,0 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import { useState as m, useEffect as w } from "react";
3
- import h from "./index.es49.js";
4
- const k = ({ relations: t, kgIds: s, viewMode: a = "list", source: c = "" }) => {
5
- const [d, l] = m(t);
6
- w(() => {
7
- t && t && l(p(t || []));
8
- }, [t]);
9
- const p = (e) => e.map((o) => {
10
- var r;
11
- const n = (r = o.content) == null ? void 0 : r.filter((f) => f.propertyKey !== "id");
12
- return {
13
- ...o,
14
- showContent: n.slice(0, 8)
15
- };
16
- });
17
- return /* @__PURE__ */ i("div", { className: "relation-section-wraper", children: d.map((e, u) => /* @__PURE__ */ i(
18
- h,
19
- {
20
- entity: e,
21
- viewMode: a,
22
- className: "shadow-none",
23
- source: c,
24
- onViewDetails: (o) => {
25
- const n = encodeURIComponent(e.uri);
26
- window.open(`#/ai-search/fulltext-detail?uri=${n}&kgId=${s}&keyword=${o.showValue}`, "_blank");
27
- }
28
- }
29
- )) });
30
- };
31
- export {
32
- k as default
33
- };