react-kggraph 0.0.12 → 0.0.14
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/lib/index.es10.js +15 -12
- package/lib/index.es6.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +4 -6
package/lib/index.es10.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const i = ({ cyRef: n, setContextMenu:
|
|
1
|
+
const i = ({ cyRef: n, setContextMenu: r, onPathAnalysis: l, setPathNodes: s }) => [
|
|
2
2
|
{
|
|
3
3
|
label: "展收实体",
|
|
4
4
|
ids: "contract",
|
|
@@ -46,26 +46,29 @@ const i = ({ cyRef: n, setContextMenu: t, onPathAnalysis: l, setPathNodes: a })
|
|
|
46
46
|
action: (e) => {
|
|
47
47
|
const o = n.current;
|
|
48
48
|
if (!o || !e || e.removed()) {
|
|
49
|
-
console.error("节点或Cytoscape实例无效"),
|
|
49
|
+
console.error("节点或Cytoscape实例无效"), r((t) => ({ ...t, visible: !1 }));
|
|
50
50
|
return;
|
|
51
51
|
}
|
|
52
|
-
const
|
|
53
|
-
c.edgesWith(c), o.nodes().not(c).removeClass("correlationStyle"), c.addClass("correlationStyle"),
|
|
52
|
+
const d = e, c = d.neighborhood().nodes().add(d);
|
|
53
|
+
c.edgesWith(c), o.nodes().not(c).removeClass("correlationStyle"), c.addClass("correlationStyle"), r((t) => ({ ...t, visible: !1 }));
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
label: "路径分析",
|
|
58
58
|
action: (e) => {
|
|
59
|
-
n.current, console.log(11, e.data("name")), l == null || l(),
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
label: "删除节点",
|
|
64
|
-
action: (e) => {
|
|
65
|
-
const o = n.current;
|
|
66
|
-
console.log("删除节点cy::::", o), e && !e.removed() && e.remove();
|
|
59
|
+
n.current, console.log(11, e.data("name")), l == null || l(), s([e.data("name"), ""]);
|
|
67
60
|
}
|
|
68
61
|
}
|
|
62
|
+
// {
|
|
63
|
+
// label: '删除节点',
|
|
64
|
+
// action: (node) => {
|
|
65
|
+
// const cy = cyRef.current;
|
|
66
|
+
// console.log('删除节点cy::::', cy)
|
|
67
|
+
// if (node && !node.removed()) {
|
|
68
|
+
// node.remove();
|
|
69
|
+
// }
|
|
70
|
+
// },
|
|
71
|
+
// },
|
|
69
72
|
];
|
|
70
73
|
export {
|
|
71
74
|
i as menuItemsConfig
|
package/lib/index.es6.js
CHANGED
|
@@ -508,7 +508,7 @@ const F = (f, r) => (y) => {
|
|
|
508
508
|
Object.keys(N).length
|
|
509
509
|
] }),
|
|
510
510
|
/* @__PURE__ */ t(i, { gap: "5px", justify: "start", className: "w-100", wrap: !0, children: Object.keys(N).map((e) => /* @__PURE__ */ o(i, { gap: "4px", justify: "start", className: `w-100 cursor ${q.has(e) ? "opacity-30" : ""}`, onClick: () => Fe(e), children: [
|
|
511
|
-
/* @__PURE__ */ t("img", { className: "w-20px rounded-50
|
|
511
|
+
/* @__PURE__ */ t("img", { className: "w-20px rounded-50", src: N[e].img, alt: "" }),
|
|
512
512
|
e,
|
|
513
513
|
"：",
|
|
514
514
|
N[e].count
|
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}.graph-bar{display:flex;height:60px;background:#fff;box-shadow:0 4px 20px #100dae33;border-radius:6px;align-items:center}.graph-bar .graph-bar-min{display:flex}.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}.
|
|
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:0 4px}.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;height:60px;background:#fff;box-shadow:0 4px 20px #100dae33;border-radius:6px;align-items:center}.graph-bar .graph-bar-min{display:flex}.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,22 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-kggraph",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"description": "A knowledge graph visualization component based on Cytoscape",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/index.es.js",
|
|
7
7
|
"module": "./lib/index.es.js",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
-
"import": "./lib/index.es.js"
|
|
11
|
-
"style": "./lib/react-kggraph.css"
|
|
10
|
+
"import": "./lib/index.es.js"
|
|
12
11
|
},
|
|
13
|
-
"./
|
|
14
|
-
"./lib/components/Graph/react-kggraph.css": "./lib/react-kggraph.css"
|
|
12
|
+
"./style.css": "./lib/style.css"
|
|
15
13
|
},
|
|
16
14
|
"files": [
|
|
17
15
|
"lib"
|
|
18
16
|
],
|
|
19
|
-
"style": "lib/
|
|
17
|
+
"style": "lib/style.css",
|
|
20
18
|
"keywords": [
|
|
21
19
|
"knowledge-graph",
|
|
22
20
|
"cytoscape",
|