Dear MindFusion Team,

I would like to know if it is possible to implement pinch zoom in the MindFusion JavaScript library from a focus point. Specifically, I want the zoom action to occur around the point where a pinch in or pinch out action is performed, rather than zooming in or out from the top left side of the diagram.

Could you please let me know if this is possible with the MindFusion JavaScript library, and if so, what steps I need to take to implement this feature?

Here is a snippet of the code:
var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ControlNode = MindFusion.Diagramming.ControlNode;

// Description: a decision tree diagram with a HTML templating.
// so I am not able to use DiagramView to implement onMouseWheelAction and it is not supported on the latest mindfusion diagramming.js and common.js


Thank you for your time and consideration. I look forward to your response.

Dear Slavcho,

Thank you for your prompt and valuable response. However, I would like to clarify that I am exclusively utilizing the "diagram" method and not the "diagramView" method, as the latter lacks certain essential features for constructing a decision tree node, such as templating and behavior. Given that the interface is touchscreen-based, could you assist me in resolving the scrolling issue?

If it helps, here is a snippet of the JavaScript code:
var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ControlNode = MindFusion.Diagramming.ControlNode;

var Rect = MindFusion.Drawing.Rect;
var Point = MindFusion.Drawing.Point;

var Animation = MindFusion.Animations.Animation;
var AnimationType = MindFusion.Animations.AnimationType;
var EasingType = MindFusion.Animations.EasingType;
var AnimationEvents = MindFusion.Animations.Events;

diagram = Diagram.create(document.getElementById("diagram"));
    diagram.addEventListener("nodeActivated", function (sender, e) {
        if (e.node !== diagram.selection.items[0]) {
          diagram.activeItem = diagram.selection.items[0];
        }
      });
      
    var Behavior = MindFusion.Diagramming.Behavior;
    diagram.setBehavior(Behavior.SelectOnly);
    diagram.setVirtualScroll(true);
    diagram.setAllowSelfLoops(false);
    diagram.setAllowInplaceEdit(false);


    var id = 0;
    var node = new MindFusion.Diagramming.ControlNode(diagram);
    var len = str[id].search(',');
    let s = str[0].substring(len + 1, str[0].length);

.......
    node.setTemplate(val);
    node.setBounds(new Rect(40, 10, bx, by));
    node.setId(id);
    diagram.addItem(node);
    diagram.resizeToFitItems(10);

<script src="./PWA/static/MindFusion.Common.js" type="text/javascript"></script>
  <script src="./PWA/static/MindFusion.Diagramming.js" type="text/javascript"></script>

Thank you, I have updated my code by altering the version to the latest Mindfusion release. However, while the zoom-in and zoom-out on mouse scroll is working perfectly, it is not functioning on mobile devices. I have tried testing this on various browsers such as Chrome, Safari, and Edge.


TIA!!

here is a snippet of the code:

this.diagramView = this.DiagramView.create(document.getElementById("diagram"));
        this.diagram = this.diagramView.diagram;
        this.diagram.addEventListener("nodeActivated", function (sender, e) {
            if (e.node !== this.diagram.selection.items[0]) {
            this.diagram.activeItem = this.diagram.selection.items[0];
            }
        });

        this.diagramView.behavior = this.Behavior.SelectOnly;
        this.diagramView.multiTouchDraw = false;
        this.diagramView.multiTouchZoom = true;
        this.diagramView.mouseWheelAction = this.MouseWheelAction.Zoom;
        this.diagram.virtualScroll = true;
...
 

It's not zooming indeed, while pinch-resizing a node seems to work on mobile devices. Our developer will check if there's some other property preventing zoom.

Regards,
Slavcho
Mindfusion

Thank you. I tried the second option and it's working. However, it stop working as the number of nodes gets larger. Additionally, the scrolling feature is not functioning on both PC and mobile browsers. What could be the reason for this issue?

Thanks,
Bereket

Thank you for your time and valuable guidance! Everything seems working right now.