Option to pan on the diagram

[DC-Rasmus-Elmholt]

It would be great if it was possible to pan around on the diagram drawn. Right not if you have a large diagram you can move the nodes, but not pan around

[PackeTsar]

This is a feature of the paid version of the diagramming library (JointJS). I'm not sure how easy it is to hack it together on the free version, but I'll do some research.

[IshaanShettigar]

Hey, I need this feature for my project using joints as well. I recognize that the paid version supports it, but I can figure out how to implement this functionality using js and maybe tinkering with the viewport somehow. Not really sure as of now, I'll start working on this by 25th May. Can I then contribute to your project?

[PackeTsar]

@IshaanShettigar yea absolutely! I do remember seeing this feature on JointJS+, but if you figure out how to do it on the free version I would much appreciate the share and contribution 😁

[IshaanShettigar]

I figured out one way to pan around the space which works for my project very well. I used the svg-pan-zoom library. This made the whole process super easy. All we have to do is create a svgPanZoom object that is attached to the paper SVG and set up a bunch of options for your use case.

Below is the code snippet corresponding to the object creation. #paper-div svg selects the SVG element we need. I took a look at your code and saw that you've implemented the zoom functionality via paper.scale(). If you wanna stick with that, then in the parameter list here just make zoomEnabled:false. You can take a look at all the available options in their GitHub repo. But this should work just fine.

paperPanAndZoom = svgPanZoom("#paper-div svg", {
    fit: false,
    center: false,
    panEnabled: false,
    zoomEnabled: false,
    controlIconsEnabled: false,
})

Below is the code to enable the pan on pointer down and disable it when the pointer is up. It also changes the cursor.

paper.on('blank:pointerdown', function (evt, x, y) {
    paperPanAndZoom.enablePan();
    document.getElementById('paper-div').style.cursor = "move";
});
paper.on('cell:pointerup blank:pointerup', function (cellView, event) {
    paperPanAndZoom.disablePan();
    document.getElementById('paper-div').style.cursor = "auto";
})

I can make these changes for you, I think if I add the above code to the diagram.js makePaper() function it should work.

[PackeTsar]

Yea give it a shot if you want to. If not, I'll probably try to do it in the next few days.

[IshaanShettigar]

This method broke the zoom-in zoom-out feature you already made. Also when I tried to integrate a drag and drop feature in my project, this svg-pan-zoom library gave me more problems, so I don't think I'm gonna use this. Here is the link I was looking at, it has other methods. Maybe they're worth giving a shot https://stackoverflow.com/questions/28431384/how-to-make-a-paper-draggable

[PackeTsar]

OK sounds good. By the way, I just posted this question earlier today: https://stackoverflow.com/questions/76359279/converting-a-svg-to-a-png-for-download

Not sure if you have a good solution, or have tried exporting a JointJS diagram as a PNG, but I've been beating my head against it for a few days now.

[IshaanShettigar]

This is a requirement for my project but it isn't a priority right now as we have to implement a few more features before diving into this one. I would suggest asking this query on the official joint js GitHub discussions page, they are quick to respond.

[PackeTsar]

@IshaanShettigar Yes it works well on a PC, but doesn't seem to work on mobile. I'm guessing pointerdown and pointerup don't fire upon mobile touch actions. I'm digging into this now to see if it can be made to work on mobile.

[PackeTsar]

Update: Looks like pointerdown and pointerup work fine, it's mousemove which doesn't work. Looking at that now

[PackeTsar]

Leaving open so some user testing can be done