Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Inquiry about Pinch Zoom in MindFusion JavaScript Library (Read 1905 times)
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Inquiry about Pinch Zoom in MindFusion JavaScript Library
Mar 18th, 2023 at 11:57am
Print Post  
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.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #1 - Mar 18th, 2023 at 12:48pm
Print Post  
Hi,

If you are referring to mouse-wheel events, set:

Code
Select All
diagramView.mouseWheelAction = MouseWheelAction.Zoom; 



If referring to touch-screen events, try setting

Code
Select All
diagramView.multiTouchDraw = false;
diagramView.multiTouchZoom = true;
 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #2 - Mar 20th, 2023 at 10:04am
Print Post  
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);
  
Back to top
 
IP Logged
 
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #3 - Mar 20th, 2023 at 10:10am
Print Post  
Here are the mindfusion libraries am using
  

MindFusion_Diagramming.js ( 995 KB | 40 Downloads )
Back to top
 
IP Logged
 
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #4 - Mar 20th, 2023 at 10:11am
Print Post  
<script src="./PWA/static/MindFusion.Common.js" type="text/javascript"></script>
  <script src="./PWA/static/MindFusion.Diagramming.js" type="text/javascript"></script>
  

MindFusion_Common.js ( 190 KB | 36 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #5 - Mar 20th, 2023 at 10:22am
Print Post  
Hi,

It seems you are still using version 3 of the control. DiagramView was introduced in version 4 (https://mindfusion.eu/Forum/YaBB.pl?num=1635431456) and it's actually been split from Diagram class, model-only properties remaining in Diagram, and viewport and interaction properties moved to DiagramView. Both wheelAction and multiTouch properties were introduced with version 4 too.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #6 - Mar 23rd, 2023 at 8:31am
Print Post  
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:


Code (Javascript)
Select All
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;
...
 

  
Back to top
 
IP Logged
 
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #7 - Mar 23rd, 2023 at 8:38am
Print Post  
Moreover, is it possible to enable scrolling to the right and left using hand gestures on mobile devices?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #8 - Mar 23rd, 2023 at 2:52pm
Print Post  
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
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #9 - Mar 23rd, 2023 at 3:42pm
Print Post  
It turns out we have one remnant from older get/setters in pinch-zoom code. For time being try either of the following:

Code
Select All
MindFusion.Diagramming.CompatConfig.propFunctions = true;

// or

MindFusion.Diagramming.DiagramView.prototype.setZoomFactor =
	function(value) { this.zoomFactor = value; }
 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #10 - Mar 24th, 2023 at 4:45am
Print Post  
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
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #11 - Mar 24th, 2023 at 5:00am
Print Post  
Pinch-zoom might only work over an empty view area. If you hit a node, the diagram could try resizing or drawing links depending on the other properties.

For scrolling make sure diagram.bounds is large enough to contain your nodes (set it to a large Rect or call resizeToFitItems).

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
NoBugNoCode
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 11
Joined: Mar 18th, 2023
Re: Inquiry about Pinch Zoom in MindFusion JavaScript Library
Reply #12 - Mar 25th, 2023 at 9:23am
Print Post  
Thank you for your time and valuable guidance! Everything seems working right now.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint