Skip to content

Conversation

draedful
Copy link
Collaborator

No description provided.

@gravity-ui-bot
Copy link
Contributor

Preview is ready.

@draedful
Copy link
Collaborator Author

draedful commented Aug 1, 2025

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.
Example: https://reactflow.dev/examples/interaction/helper-lines

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.
But there is a disadvantage in making it more difficult to choose a modifier. I haven't decided yet which side the modifier should be on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants