Comments (7)
对于 React 节点,其没有默认的状态样式,也无法通过 G6 默认交互设置样式,因为自定义的节点实际上是位于 G 节点上方来作为代替节点的,其获取了所有的交互事件,因此你有设置 React 节点的需求,需要自行实现,下面是一个实现的简单示例:
// Your Custom Node
const MyNode = (props) => {
const {
graph,
data: { id, states },
} = props;
return (
<div
onClick={() => {
graph.setElementState(id, ['selected']);
}}
style={{
width: 100,
height: 100,
border: states.includes('selected') ? '1px solid black' : 'none',
}}
>
Node Content
</div>
);
};
// graph options
const graph = new Graph({
// ...other options
node: {
type: Custom_NODE_KEY,
// ...other options
style: {
// ...other options
// Use function instead arrow function to get `this` context
component: function (data) {
return <MyNode data={data} graph={this} />;
},
},
},
});
from g6.
@luckyKyle 预计今天会发布,届时相关示例你可以参考这个 PR 的内容 #6208
from g6.
setElementState
非常感谢大佬的快速响应和耐心解答!!
上面实例代码我已做更新,
但是仍然没有实现预期效果, 预期点击 combo 或node 是能够始终保持唯一的高亮节点。以下我贴上剩余的节点代码。
核心问题是,无论是使用updateNodeData
还是setElementState
,在自定义节点里states
参数都无法正确响应,感觉未生效。
如果只是点击高亮而非唯一性节点高亮,onClick
回调在CustomNode
就可内聚处理了。
期待再次不吝赐教!~
function CustomNode({ data, graph }) {
const { name, style, id, states } = data;
const [width, height] = [260, 60];
const radius = 4;
return (
<Group>
<Rect
width={width}
height={height}
fill={states.includes("selected") ? "#f00" : style.fill}
radius={[radius, radius, 0, 0]}
onClick={(ev) => {
console.log("🚀 ~ CustomNodeByHive ~ ev:", {
ev,
id,
data,
states,
graph,
});
graph.setElementState(id, "selected");
graph.setElementState(id, ["selected"]);
graph.updateNodeData([
{ id, states: ["selected"], style: { fill: "#f00" } },
]);
}}
>
<Text
text={name}
textBaseline="center"
fill="#000"
fontSize={14}
dx={10}
dy={height / 2 - 14}
/>
</Rect>
</Group>
);
}
// NODE
function registerNodeEvents(graph, setCurrentNode) {
graph.on(NodeEvent.CLICK, (event) => {
const { id } = event.target;
const data = graph.getNodeData(id);
setCurrentNode((d) => ({
...d,
id,
data,
}));
graph.setElementState(id, "selected");
graph.updateNodeData([
{ id, states: ["selected"], style: { fill: "#f00" } },
]);
graph.draw();
});
}
// COMBO
function registerComboEvents(graph, setCurrentNode) {
graph.on(ComboEvent.CLICK, (event) => {
const { id } = event.target;
const data = graph.getComboData(id);
return setCurrentNode((d) => ({
...d,
id,
data,
}));
});
graph.on(ComboEvent.POINTER_ENTER, (event) => {
const { target } = event;
// graph.updateNodeData([
// {
// id: target.id,
// },
// ]);
// graph.draw();
});
graph.on(ComboEvent.POINTER_OUT, (event) => {
const { target } = event;
// graph.updateNodeData([
// {
// id: target.id,
// style: {
// lineWidth: 10,
// },
// },
// ]);
// graph.draw();
});
}
export function registerEvents(serviceName, callback) {
const _this = this;
registerNodeEvents(_this, callback);
registerComboEvents(_this, callback);
}
from g6.
@luckyKyle 最好能够提供一个线上可运行 demo
from g6.
@luckyKyle 最好能够提供一个线上可运行 demo
代码如下,麻烦抽空解惑!
https://stackblitz.com/edit/react-1sfavs-wa1tvd
from g6.
这边确认了下是 g6-extension-react 的问题,会尽快修复
from g6.
这边确认了下是 g6-extension-react 的问题,会尽快修复
[强] 好的,请问有计划在哪个版本大概什么时间会修复?!后续我也会第一时间获取更新。
from g6.
Related Issues (20)
- upsert添加Image失败,请教如何添加
- Edge setting arrow style issue HOT 1
- 触摸板手势交互问题(mac电脑) HOT 1
- 【V5.0.13~5.0.16】Tree layout, when a node is added or deleted, the whole tree will be re-expanded. I want to revert back to the way it was before version 5.13 HOT 1
- edge 为 cubic-horizontal时,节点的anchorPoints不生效,导致节点拖拽时箭头显示有问题 HOT 1
- 【v5】自定义节点,如何在drawKeyShape时,获取原始节点数据 HOT 1
- 刚开始接触G6,发现一个小问题 HOT 2
- [V5]The custom node will call drawKeyShape when the construction of the custom node is not completely completed, resulting in an exception HOT 10
- [V5] Edge arrow offset behaves inconsistently HOT 1
- 【V5】 In the webpack project, whether it is backward compatible or not, there is no graph found during compilation. HOT 1
- The react custom node cannot be connected to the edge after scaling HOT 1
- V5.0.4 / V5.0.17 zoom-canvas scaling exception HOT 2
- Dynamically add edges and set the type, and the edge event cannot be triggered
- Version 5.0, using combos can be folded, when the diagram is not used for layout, just normal x,y coordinates, directly click on the node, the error is reported, and then it cannot be folded
- In version 5.x, there is an afterimage in the image drag HOT 2
- How do I use the features of antv/g6 5.x JSX custom nodes on Vue3.x? HOT 1
- Export PNG blank, no content
- G6 version 5.0.17 Snapline cannot be disabled issue HOT 1
- Is it possible to increase the active expansion and contraction of combos like the 4.x version, there is such a demand
- npm installation failed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g6.