I have tried converting the method in the link below into js but cannot get it to work as the js scrollwheel event is not giving a start and end position.

https://www.mindfusion.eu/Forum/YaBB.pl?board=fcnet_disc;action=display;num=1165...

Hi,

thank you very much for the reply.

Unfortunately this did not work either. I have tried implementing the zooming inside the a scrollwheel event listener like your example link, I have also tried implementing the zooming inside the onMouseWheel function inside MouseEventHandler.js.

I have tried implementing the behaviour like this:

----------------------------
document.body.addEventListener('wheel', function(e)
{
     var zoom = diagram.getZoomFactor();
     zoom -= e.deltaY / 100;
     if (zoom > 10)
           diagram.setZoomFactorPivot(zoom, diagram.pointerPosition);

     e.preventDefault(); // do not scroll
});

---------------------------


and also like this inside MouseEventHandler.js


--------------------------

onMouseWheel: function (e) {
    var view = this.view;
    if (!view.enabled || !view.getVirtualScroll())
        return;

        e.preventDefault();
        var wheelEvent = e;
        // JQ and Ajax
        if (e.originalEvent instanceof WheelEvent) wheelEvent = e.originalEvent;
     if (e.rawEvent instanceof WheelEvent) wheelEvent = e.rawEvent;

    //removing scroll behavior to add zooming instead
    var zoom = diagram.getZoomFactor();
    zoom -= e.deltaY / 100;
    if (zoom > 10)
        diagram.setZoomFactorPivot(zoom, view.pointerPosition);
},


At the moment it seems like the diagram just zooms in but not into the cursor position.

Thank you
Danesh

Hi,

Thank you for the reply again, I appreciate the help.

Unfortunately this is also not working for me, I have added an attachment to this reply which hopefully can show how my diagram is behaving when setZoomFactorPivot is called in the wheel listener. It still seems to zoom in to the diagram but does not keep the diagram point in view where the cursor is.



Thank you
Danesh

Hi,

Thank you, your explanation has helped me understand the setZoomPivot behaviour better. I was able to see it working on the anchors sample and I was able to get this semi-working on my implementation too.

At the moment though the problem I am facing is that when I set the diagram bounds I have to always set the x and y to 0, 0 for the setZoomPivot function to work. If I set the x and y in diagram.setBounds to anything else then it stops zooming into the pivot and instead scrolls the diagram. I have attached 2 examples of this behaviour, Example 1 shows the pivot function working and Example 2 is the pivot behaviour broken.


Running this allows setZoomPivot to work

//set diagram bounds bigger than viewport with {x: 0, y:0}
diagram.setBounds(new MindFusion.Drawing.Rect(0,0, (diagram.getViewport().width * 4), (diagram.getViewport().height * 4)));
//update canvas size
diagram.updateCanvasSize();

Example 1 working zoom:



Running this will break setZoomPivot

I called zoomToFit() and this function changed the bounds of the diagram so I ran the code below again so that I could make the diagram bigger than the viewport again however this breaks the setZoomPivot functionality.

diagram bounds on load using diagram.getBounds();
{x: 485.99781092056395, y: 273.6348706185983, width: 90, height: 70}

//set diagram bounds bigger than viewport at the
diagram.setBounds(new MindFusion.Drawing.Rect(diagram.getBounds().x,diagram.getBounds().y, (diagram.getViewport().width * 4), (diagram.getViewport().height * 4)));
//update canvas size
diagram.updateCanvasSize();

Example 2 broken zoom:



Thank you
Danesh

Hi,

Thank you for that, I was able to diagnose the problem with the scripts that you provided. It turns out the diagram bounds x and y coordinates were being altered which was causing the issue. They were being set to negative numbers which would break the zoomToPivot function. Now that the diagram bounds x and y dont change the zoomToPivot works correctly.

Thank you very much for your help.

Kind regards
Danesh

Hi,

It shouldn't matter where you call setZoomFactorPivot from, just make sure the pivot point is specified in diagram's coordinate system, and not in e.g. screen pixels. Following modification of MDN pinch example seems to work as expected for me.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestu...

function pointermove_handler(ev)
{
    ev.preventDefault();

    // This function implements a 2-pointer horizontal pinch/zoom gesture.
    //
    // If the distance between the two pointers has increased (zoom in),
    // the taget element's background is changed to "pink" and if the
    // distance is decreasing (zoom out), the color is changed to "lightblue".
    //
    // This function sets the target element's border to "dashed" to visually
    // indicate the pointer's target received a move event.
    log("pointerMove", ev);
    ev.target.style.border = "dashed";

    // Find this event in the cache and update its record with this event
    for (var i = 0; i < evCache.length; i++)
    {
        if (ev.pointerId == evCache[i].pointerId)
        {
            evCache[i] = ev;
            break;
        }
    }

    // If two pointers are down, check for pinch gestures
    if (evCache.length == 2)
    {
        // Calculate the distance between the two pointers
        var curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
        var position = {
            x: (evCache[0].clientX + evCache[1].clientX) / 2,
            y: (evCache[0].clientY + evCache[1].clientY) / 2
        };
        position = diagram.clientToDoc(position);

        if (prevDiff > 0)
        {
            if (curDiff > prevDiff)
            {
                // The distance between the two pointers has increased
                log("Pinch moving OUT -> Zoom in", ev);
                var zoom = diagram.getZoomFactor();
                    zoom += 5;
                if (zoom > 10)
                    diagram.setZoomFactorPivot(zoom, position);
            }
            if (curDiff < prevDiff)
            {
                // The distance between the two pointers has decreased
                log("Pinch moving IN -> Zoom out",ev);
                var zoom = diagram.getZoomFactor();
                    zoom -= 5;
                if (zoom > 10)
                    diagram.setZoomFactorPivot(zoom, position);
            }
        }

        // Cache the distance for the next move event
        prevDiff = curDiff;
    }
} 

Also had to add this to prevent whole page from zooming:

function touchstart_handler(event)
{
    event.preventDefault();
    event.stopPropagation();
} 

Regards,
Slavcho

Hi,

You can cancel panning once user adds second touch like this:

function pointermove_handler(ev)
{
    .....

    if (evCache.length == 2)
    {
        if (diagram.mouseInputDispatcher.currentController)
        {
            diagram.mouseInputDispatcher.currentController.cancel();
            diagram.mouseInputDispatcher.currentController = null;
        }
    ..... 

Regards,
Slavcho