CODEWITHSUNDEEP
jointjsrappid
FeeFiFoFum
FeeFiFoFum

Reputation: 1717

Looking for an event hook for dragging a cell around the graph so I can highlight other cells

Imagine I have a graph with some large rectangles on it. I want to drag a circle from the stencil and only allow it to be dropped within a preexisting rectangle. Furthermore, as the user drags the circle around the graph (deciding where to drop it) and the circle enters a rectangle, I want to change the colour of the rectangle.

Basically, circles are only allowed in rectangles and I'd like to highlight the rectangle before the user drops the circle.

Is this possible with jointjs or rappid?

Upvotes: 0

Views: 221

Answers (1)

nocturnomath
nocturnomath

Reputation: 21

It is possible. There is even a small, well-hidden demo on the JointJS website about exactly this. (https://resources.jointjs.com/docs/jointjs/v2.1/demo/shapes/shapes.devs.html)

You just have to fiddle around with the Paper options:

Set embeddingMode: true if you haven't already, and add the embedding class to the highlights like so (obviously, define some styling in your css for this class):

highlighting: {
    'embedding': {
        name: 'addClass',
        options: {
            className: 'highlighted-parent'
        }
    }
}

Finally, implement validateEmbedding: function(childView, parentView) {} with your own custom rules.

Upvotes: 1

Related Questions