[Feature Request] Zoom and panning in html report

[Ujifman]

Hello, I found two features that will increase usability of html report, when you in views diagrams.

1. Zoom in/out with ctrl+/- for diagram. By default ctrl+/- change zoom for all browser page. It would be more usefull if ctrl+/- will duplictate zoom slider and change zoom for diagram only.
2. Panning with click and move. Usually views are rather huge, and one needs zoom in and move view. Now one can move only with scroll bars, but it is not useful. It would be great to move view just like in program with click and move wheel button of mouse.

My idea is just to add some js code to report building tool, that will implement described behavior.

[Phillipus]

My idea is just to add some js code to report building tool, that will implement described behavior.

Are you offering to provide the JS code? If so, a draft PR would work.

[Ujifman]

Yes I already have js code that implements it, and now I study your code to find the right place for it, ad i suppose it should be in com.archimatetool.reports\templates\html am I right?

[Phillipus]

Yes, that's correct. Thanks for taking a look at it.

[Ujifman]

So now I can prepare pull request?

[Phillipus]

So now I can prepare pull request?

Yes please, a draft PR in a branch of forked Archi code is the way to go. Thanks.

[Ujifman]

Sorry for long time for implementing, but finally I've got pull request about this feature #882

[Phillipus]

Thanks for this, I merged it.

[Phillipus]

@Ujifman Hi, I've found a problem with panelBodyScroller.js. The text field for inputting alasql queries on the "Query" tab in the report cannot receive text input. The problem occurs on line 16:

  const mouseDownHandler = function (e) {
    e.preventDefault(); <-------------------- Here!

Would you be able to take a look at this?

BTW - I've edited the file to support IE11

[Phillipus]

One thing I tried that seems to work is removing the e.preventDefault(); line and adding this:

  ele.getElementsByClassName('diagram')[0].addEventListener('mousedown', function (e) {
    e.preventDefault();
  });

[Phillipus]

I've created a branch html-fix with my attempt at a fix. Also, I don't think it's a good idea to show a "grab" cursor by default.

68fa5d6

[Ujifman]

@Phillipus Hi, sorry, I've missed alert from GitHub, had some crazy days at work. As I see you already fixed the issue, do you need some help?

[Phillipus]

@Ujifman Hi, I just wanted to check it with you, first. Do you see any problems with my proposed fix?

[Ujifman]

@Ujifman Hi, I just wanted to check it with you, first. Do you see any problems with my proposed fix?

Looks nice! I don't see any problems.

[Phillipus]

Thanks for the feedback. I'll commit it,

[Phillipus]

Hi, this is causing problems as noted by @evlibra:

5f81eed#commitcomment-95334110

b8c4163#commitcomment-95333906

We should reconsider this one for Archi 5 and find a way to only pan when the mouse is down on a diagram. If not we should remove this feature for now and come back to it.

@Ujifman Can you find a way to do this?

[Phillipus]

I think I've fixed this issue now. @evlibra: please test.

[evlibra]

I think I've fixed this issue now. @evlibra: please test.

Thanks @Phillipus. Yes, the issue is fixed now - frames beyond the diagram are not impacted. The only question is whether grabbing shall be allowed only within boundaries of diagram elements (see area in green on the screenshot), or within whole diagram frame, meaning also empty area at the right from the diagram elements. At the moment is is only within diagram's elements (V), but intuitively one might expect also grab at right from it (?). See the screenshot

[Phillipus]

I'm sorry but I can't spend any more time on this issue, I've tried my best to make it work based on @Ujifman 's PR. If it continues to be a problem I will remove it.

[Phillipus]

This is now removed. I've left the mouse scroll wheel feature in.

Please resubmit a working PR that we might consider for Archi 5.1.

[Ujifman]

@Phillipus I'll try to find out a way to fix it.