svg zoom and move

[njake]

Hello,

I have greated improved javascript for svg terminal.

Keyboard zoom with +/- keys
Keyboard move(pan) with arrow keys
Keyboard reset with home key

Mouse wheel to zoom
Mouse drag to move
Mouse right click to reset

Maybe someone can check this and merge this to master?

[Ethan Merritt]

On Friday, 02 February 2018 11:48:47 njake wrote:

Hello,

I have greated improved javascript for svg terminal.

Keyboard zoom with +/- keys
Keyboard move(pan) with arrow keys
Keyboard reset with home key

Mouse wheel to zoom
Mouse drag to move
Mouse right click to reset

Maybe someone can check this and merge this to master?

You have some good ideas here.
Can you provide some additional information and guidance?

1) which platforms+browsers have you tested this on?
I tested it using the svg demo scripts in .../demo/html

chrome + linux:
no keyboard input is recognized
mouse wheel does zoom/unzoom (I like this!)
right mouse does reset (I like the functionality but this is a bit
disconcerting since other gnuplot terminal use right mouse for zoom).
left mouse causes the plot to jump around unpredictably when clicked,
after that it drags the plot offset by the initial jump.

firefox + linux:
arrow keys are intercepted and interpreted by the browser
other keyboard input is ignored
mouse wheel good for zoom/unzoom
right mouse resets correctly
left mouse drags without the inital jump seen in chrome

Could it be that keyboard input requires additional setup
in the wrapping html document that is not currently provided by
the demo scripts?

2) Please provide your name+contact information for the git commit message.
(you can send it to me off-line if you like).

3) I see that you removed a code phrase in the original javascript
that had a comment "Allow for scrollbar position (Firefox)".
Was this intentional?
It could well be that the original code was working around a long-gone
Firefox bug that is no longer relevant. Do you know if this is correct?

Thanks for your contribution to the project!

Ethan

[njake]

I done test in own html page that has svg embedded and plain svg file in browser.
I didnt test ../demo/html, thanks to point there. I go check this.

1) I used all windows browsers common today, Firefox, Chrome, Edge and Internet Explorer.
Im sure that demo/html pages is diffirent and keyboard event part needs to be changed someway. Keyboard event try to skip input elements if exists on page and focused on them.

Right click reset is easy to change to zoom, but how user can reset with mouse then.

2) I send email to you

3) I removed them because after left click coordinate hypertext was created wrong place on page. Even that page not was scrolled at all and this error was all browsers.
This was on svg embedded html page.
This needs some figuring, it depend what kind of html page is where svg embedded.

[njake]

Changed js to own interactiveInit function, so this can be switched of by one comment.

Mouse support:
Added little drag delay after click, so that svg not moved accidentally when click.

Plain SVG file opened to browser
Windows Firefox, Chrome, Edge, IE worked
Linux not tested
Safari not tested

demo/html pages (embed)
Windows Firefox, Chrome, Edge, IE worked
Linux not tested
Safari not tested

Inline SVG on html page
Windows Firefox, Chrome, Edge, IE worked
Linux not tested
Safari not tested

Keyboard support:
First old svg version not support keyboard events.
* When open plain svg to browser it uses html doc model and events works every modern browser
* When svg is inline in html page it uses html doc model and events works every modern browser
* When svg is loaded from embed tag it uses separate svg doc model and events not work
* When svg is loaded from object tag it uses separate svg doc model and events not work, but page that is loading object can delegate keyboard events manually to object (see first post attachment gnuplot_svg_keyboard.js)

To get keyboard events to work you need to
1. Send svg as inline document on html page, maybe easiest way, i use that way.
2. Use object tag and add javascript to html page send events manually from page to object, note that CORS can be problem here
3. Using never svg(2.0) version, im not familiar on that at all, but in future this is correct way to go

Known problems:
If multiple svg on same page, you cannot set focus where keyboard events are going. New svg version allow svg element focused and events can then directed to correct object.
One way is maybe to add select to html page and use it to delegate events to wanted object
or add click event to html object and set same variable when clicked to svg object.

Firefox scroll "Allow for scrollbar position (Firefox)"
I try to look this from git history and looks like cursorPoint function is added afterwards to handle correct position with matrixTransform call inside on it.
I found this link, but i still cannot reproduce original problem.
https://stackoverflow.com/questions/24988765/gnuplot-interactive-svg-graph-embedded-on-website-shows-wrong-mouse-coordinates

[njake]

Small update for outside use, reset is good to be done.

// Return functions to outside use
return {
    zoom: function (direction) {
        setViewBox(zoom(direction));
        return this;
    },
    pan: function (direction) {
        setViewBox(pan(direction));
        return this;
    },
    reset: function (){
        setViewBox(resetValue);
        return this;
    }
};

[njake]

Fixed mouse drag move, when multiple inline svg element on same page or inline svg element not in topleft position.

Reset function return this for chainability.

Note that multiple inline elements on same page has many more problems.
* Dublicate id eq "coord_text" , "hypertextbox" .. -> always use first
* Global svg variable used for all svg elements -> wrong element

Viewing coordinates and hypelinks needs same refactoring.

[Ethan Merritt]

commit 34af63f6db66f24d4eb0f1bcbfedfc27a7fb3727 to gnuplot-main

[njake]

Experimental gnuplot plugin for svg

All svg elements on page get own gnuplot plugin attached by js, so no any conflict with global variables any more.

Javascript variables are readed from second script tag and converted to json for import to plugin.
Inline events are removed from xml and new ones are attached with addEventListener function.
Inline events should be removed from xml and xml should have better id/class names to attach events from js.

Improved mouseover text and image handling, content changed to xml only if it really changed and bouncing is calculated once.

Convert functions are same as before, maybe renamed better.

Tested same browsers as earlier 2018-02-06