react-kggraph 0.0.16 → 0.0.17
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.
- package/README.md +1 -1
- package/lib/index.es15.js +8 -8
- package/lib/index.es6.js +2 -2
- package/lib/style.css +1 -1
- package/package.json +2 -8
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ npm install react-kggraph
|
|
|
22
22
|
react-kggraph 依赖以下 peerDependencies，请确保已安装：
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
npm install react react-dom antd
|
|
25
|
+
npm install react react-dom antd
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## 使用
|
package/lib/index.es15.js
CHANGED
|
@@ -2,10 +2,10 @@ import { jsx as n } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef as g, useContext as m, useState as o, useRef as w, useEffect as C, useImperativeHandle as h } from "react";
|
|
3
3
|
import { Drawer as x } from "antd";
|
|
4
4
|
import { GraphContext as y } from "./index.es14.js";
|
|
5
|
-
const
|
|
6
|
-
const { graphInfo: d, knowledgeCardApi: f } = m(y), [t, a] = o(!1), [k,
|
|
5
|
+
const F = g((I, l) => {
|
|
6
|
+
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);
|
|
7
7
|
C(() => {
|
|
8
|
-
t &&
|
|
8
|
+
t && s.current && (s.current.scrollTop = 0);
|
|
9
9
|
}, [t]), h(l, () => ({
|
|
10
10
|
open: (e) => {
|
|
11
11
|
a(!0), p(e), i(e);
|
|
@@ -13,9 +13,9 @@ const E = g((I, l) => {
|
|
|
13
13
|
close: () => a(!1)
|
|
14
14
|
}));
|
|
15
15
|
const i = async (e) => {
|
|
16
|
-
|
|
16
|
+
r(!0);
|
|
17
17
|
const u = await f({ kgId: d.kgId, uri: e.id });
|
|
18
|
-
console.log(44, e), c(u.data),
|
|
18
|
+
console.log(44, e), c(u.data), r(!1);
|
|
19
19
|
};
|
|
20
20
|
return /* @__PURE__ */ n(
|
|
21
21
|
x,
|
|
@@ -27,11 +27,11 @@ const E = g((I, l) => {
|
|
|
27
27
|
open: t,
|
|
28
28
|
getContainer: !1,
|
|
29
29
|
className: "knowledge-card-drawer",
|
|
30
|
-
|
|
31
|
-
children: /* @__PURE__ */ n("div", { ref:
|
|
30
|
+
styles: { body: { padding: "0 20px", overflow: "auto" } },
|
|
31
|
+
children: /* @__PURE__ */ n("div", { ref: s, style: { height: "100%" } })
|
|
32
32
|
}
|
|
33
33
|
);
|
|
34
34
|
});
|
|
35
35
|
export {
|
|
36
|
-
|
|
36
|
+
F as default
|
|
37
37
|
};
|
package/lib/index.es6.js
CHANGED
|
@@ -466,7 +466,7 @@ const F = (f, r) => (y) => {
|
|
|
466
466
|
open: ve,
|
|
467
467
|
onClose: () => $(!1),
|
|
468
468
|
mask: !1,
|
|
469
|
-
|
|
469
|
+
size: 300,
|
|
470
470
|
getContainer: !1,
|
|
471
471
|
children: /* @__PURE__ */ t(
|
|
472
472
|
se,
|
|
@@ -546,7 +546,7 @@ const F = (f, r) => (y) => {
|
|
|
546
546
|
/* @__PURE__ */ t(a.Option, { value: "show", children: "显示" }),
|
|
547
547
|
/* @__PURE__ */ t(a.Option, { value: "hide", children: "隐藏" })
|
|
548
548
|
] }) }),
|
|
549
|
-
/* @__PURE__ */ t(c.Item, { label: "字体位置", name: "textPosition", initialValue: "bottom", children: /* @__PURE__ */ t(a, { children: ce.map((y) => /* @__PURE__ */ t(a.Option, { value: y.key, children: y.label }, y.
|
|
549
|
+
/* @__PURE__ */ t(c.Item, { label: "字体位置", name: "textPosition", initialValue: "bottom", children: /* @__PURE__ */ t(a, { children: ce.map((y) => /* @__PURE__ */ t(a.Option, { value: y.key, children: y.label }, y.key)) }) }),
|
|
550
550
|
/* @__PURE__ */ t(c.Item, { label: "字体偏移", name: "textOffset", initialValue: 5, children: /* @__PURE__ */ t(C, { type: "number", placeholder: "请输入字体偏移量" }) }),
|
|
551
551
|
/* @__PURE__ */ t(c.Item, { label: "字体颜色", name: "fontColor", initialValue: "rgb(50,50,50)", children: /* @__PURE__ */ t(C, { placeholder: "请输入字体颜色" }) }),
|
|
552
552
|
/* @__PURE__ */ t(c.Item, { label: "字体大小", name: "fontSize", initialValue: 18, children: /* @__PURE__ */ t(C, { type: "number", placeholder: "请输入字体大小" }) }),
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cytoscape-container{width:100%;max-width: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:calc(100vh - 180px)}.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}.rounded-50{border-radius:10%}.relaative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{display:flex;
|
|
1
|
+
.cytoscape-container{width:100%;max-width: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:calc(100vh - 180px)}.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}.rounded-50{border-radius:10%}.relaative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{display:flex;align-items:center}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:10px;box-shadow:0 4px 20px #100dae33;border-radius:6px}.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}.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}.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)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-kggraph",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.17",
|
|
4
4
|
"description": "A knowledge graph visualization component based on Cytoscape",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/index.es.js",
|
|
@@ -26,14 +26,8 @@
|
|
|
26
26
|
"license": "MIT",
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"antd": ">=5.0.0",
|
|
29
|
-
"cytoscape": "^3.33.3",
|
|
30
|
-
"cytoscape-cise": "^2.0.1",
|
|
31
|
-
"cytoscape-cose-bilkent": "^4.1.0",
|
|
32
|
-
"cytoscape-fcose": "^2.2.0",
|
|
33
|
-
"cytoscape-layout-utilities": "^1.1.1",
|
|
34
29
|
"react": ">=16.8.0",
|
|
35
|
-
"react-dom": ">=16.8.0"
|
|
36
|
-
"storm-layout": "^1.1.5"
|
|
30
|
+
"react-dom": ">=16.8.0"
|
|
37
31
|
},
|
|
38
32
|
"scripts": {
|
|
39
33
|
"dev": "vite",
|