Scaling arrowhead, vertices, and tools on zoom

[ryang123]

There are already multiple different sizes of arrowhead and other items that appear on link hover for shortlinks, but I am struggling to figure out how to efficiently scale these items when zoomed in. I am also interested in scaling the width of the line that appears on hover once zoomin scale gets large (say, over 8).

If I apply conditional statements to the renderArrowheadMarkers function in joint.js (based on zoomLevel as defined/updated in main.js in the kitchen sink example), it works but the changes only take effect if one of the elements is changed/moved (or if I save off the json and reload it).

My use case is multiple elements close together, some of which each have multiple links to other elements. When editing in this area, I want users to be able to zoom in to avoid the control overlap issues.

[DavidDurman]

Hi Ryan,

There is another method next to renderArrowheadMarkers(), updateArrowheadMarkers() that updates the markers. The former is "heavier" as it renders the markers from a template and appends new DOM elements into the DOM tree. This method is called only when the link is rendered (not when it's updated). The latter is "lighter" as it only repositions and rescales the markers. This method is called when the source/target element of the link moves (and some other events happen). That's why you sometimes don't see the change.

To your use case, could you please upload an image showing the scenario so that we can better understand the issue?

[ryang123]

Hi David,

I don't see the updateArrowheadMarkers function- I searched all the files in the jointjs+ distro (I am using the one from Dec 3, 2013).

I attached an image- basically I am working on a network diagramming and status monitoring tool. I extended a simple custom element type that I call monitor, which is just a rectangle with text and an image that I update based on system status (I change the color and image). The elements are close together and they have lines that connect items on the network, sometimes multiple connections per element. I intentionally keep the elements relatively small (18x56 default size) because I may have many on the screen. I'll likely have multiple vertices in close proximity as I try to keep the look and layout clean and prevent overlap.

I expect that the user will not be able to do fine manipulation at the default zoom level (1), but am hoping I can get to a place where I can adjust the tools so that if they zoom in (say, to 3.8 as shown in the example), they can do that fine manipulation. I also have a grid resizing menu option to support that goal and have extended the example you provided with the joinjs+ distro into a full element inspector, so the user can update just about any attribute they want.

Thanks, Ryan

[ryang123]

I see the function you described in the release you shared today- I will modify the update method and call it from the zoom function and that should do the trick. Thanks!

[DavidDurman]

Yes Ryan, I was about to inform you. I mistakenly told you about a function that was not released yet. Now it is. I'll have a closer look at the issue again to see if we can do something about it. Thanks for the screenshot!