-
Notifications
You must be signed in to change notification settings - Fork 6
WIP: Drag System #119
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
WIP: Drag System #119
Conversation
feat(ConnectionLayer): use DragController to creating connections feat(NewBlockLayer): use DragController to drag shadow block
Preview is ready. |
I have prepared a number of basic necessary modifiers for grid snapping, the magnetization of the connection to the block/anchor and the magnetization of blocks to block boundaries. Now I'm thinking about how to make a visualization of magnetization. We need to show what exactly we are attracted to. To do this, I am considering an event model. class SomeLayer implements IDragMiddleware {
public dragModifier() {
return {
name: "someLayer",
priority: 8,
applicable: (pos: Point, dragInfo: DragInfo, ctx: MagneticBorderModifierContext) => {
...
},
suggest: (pos: Point, dragInfo: DragInfo, ctx: MagneticBorderModifierContext) => {
...
},
onApply: (dragInfo: DragInfo, ctx: MagneticBorderModifierContext) => {
}
}
afterInit() {
this.graph.on('drag-start', (dragInfo) => {
if(dragInfo.context.dragEntity instanceof Block) {
dragInfo.addModifier(this.dragModifier)
})
});
this.graph.on('drag-update', (dragInfo) => {
if(dragInfo.isApplied(this.dragModifier)) {
this.setState({
lines: dragInfo.context.closestBorder.map((border) => {
return {
x: border.point.x,
y: border.point.y,
width: 10,
height: 10,
}
})
})
}
});
this.graph.on('drag-end', (dragInfo) => {
dragInfo.removeModifier(this.dragModifier)
});
}
} In this case, it becomes possible to add a modifier and a visual response to the actions of the modifier on the fly. |
No description provided.