archi icon indicating copy to clipboard operation
archi copied to clipboard

[Feature Request] Zoom and panning in html report

Open Ujifman opened this issue 2 years ago • 5 comments

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.

Ujifman avatar May 19 '22 15:05 Ujifman

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.

Phillipus avatar May 19 '22 15:05 Phillipus

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?

Ujifman avatar May 19 '22 15:05 Ujifman

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

Phillipus avatar May 19 '22 15:05 Phillipus

So now I can prepare pull request?

Ujifman avatar May 19 '22 15:05 Ujifman

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.

Phillipus avatar May 19 '22 15:05 Phillipus

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

Ujifman avatar Nov 10 '22 13:11 Ujifman

Thanks for this, I merged it.

Phillipus avatar Nov 10 '22 13:11 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 avatar Dec 09 '22 19:12 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 avatar Dec 09 '22 22:12 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.

https://github.com/archimatetool/archi/commit/68fa5d65893aa5f1a97e973e38524b93642012d3

Phillipus avatar Dec 10 '22 10:12 Phillipus

@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?

Ujifman avatar Dec 11 '22 17:12 Ujifman

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

Phillipus avatar Dec 11 '22 17:12 Phillipus

@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.

Ujifman avatar Dec 11 '22 17:12 Ujifman

Thanks for the feedback. I'll commit it,

Phillipus avatar Dec 11 '22 18:12 Phillipus

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

https://github.com/archimatetool/archi/commit/5f81eed9a062aee3f2a1c63556265c268946b10b#commitcomment-95334110

https://github.com/archimatetool/archi/commit/b8c4163451a1e791f29d219d4b6e5e6122603306#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 avatar Jan 07 '23 07:01 Phillipus

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

Phillipus avatar Jan 08 '23 18:01 Phillipus

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 image

evlibra avatar Jan 08 '23 21:01 evlibra

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 avatar Jan 08 '23 22:01 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.

Phillipus avatar Jan 08 '23 22:01 Phillipus

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

Ujifman avatar Jan 09 '23 07:01 Ujifman