Zoom and pan: change the default keys/mouse buttons

[Peter]

Hello,

I would like to change some behaviours of sfDiagram for Panning & Zooming by example.

By default, the middle mouse button permits to pan with IntelliMouse => I would like to disable it because it's laggy. Same thing for scrolling vertically and horizontally (middle button + SHIFT key).

By default, to zoom in/out, we have to press CTRL+mouse wheel (with middle mouse button), is it possible to execute the same thing without pressing the CTRL key?

Finally, I would like to pan "smoothly" (like in your demo) with right mouse button. How to do that, please?

Thank you in advance

[Karkuvel Rajan Shanmugavel]

Hi Rodrigue, 

 

Please find the response for your requirement in below table. 

 

Requirement	Response
By default, the middle mouse button permits to pan with IntelliMouse => I would like to disable it because it's laggy. Same thing for scrolling vertically and horizontally (middle button + SHIFT key).	We can achieve your requirement by using the PreviewMouseWheel event. In the PreviewMouseWheel event we can disable the required actions by setting the e.Handled as true. We have provided the code example and sample link below.    Code Example:                if (e.MiddleButton == MouseButtonState.Pressed)              {                  e.Handled = true;              }
By default, to zoom in/out, we have to press CTRL+mouse wheel (with middle mouse button), is it possible to execute the same thing without pressing the CTRL key?	We can achieve your requirement by using the PreviewMouseWheel event. In the PreviewMouseWheel event we can disable the required actions by setting the e.Handled as true. We have provided the code example and sample link below.    Code Example:                      if (e.Delta > 0)                  {                      // For Disable Zooming while pressing Ctrl                      if (Keyboard.Modifiers == ModifierKeys.Control)                      {                          e.Handled = true;                      }                      // For Disable Scrolling and perform Zooming                      else                      {                          e.Handled = true;                          (Diagram.Info as IGraphInfo).Commands.Zoom.Execute(new ZoomPositionParameter() { ZoomCommand = ZoomCommand.ZoomIn });                      }                  }                  else if (e.Delta < 0)                  {                      // For Disable Zooming while pressing Ctrl                      if (Keyboard.Modifiers == ModifierKeys.Control)                      {                          e.Handled = true;                      }                      // For Disable Scrolling and perform Zooming                      else                      {                          e.Handled = true;                          (Diagram.Info as IGraphInfo).Commands.Zoom.Execute(new ZoomPositionParameter() { ZoomCommand = ZoomCommand.ZoomOut });                      }                  }
Finally, I would like to pan "smoothly" (like in your demo) with right mouse button. How to do that, please?	Panning action can be done with any MouseButton by setting the Tool as ZoomPan. We have provided the code example and sample link below.    Code Example:                  // Set Tool as ZoomPan for Panning action              Diagram.Tool = Tool.ZoomPan;

 

Sample link: https://www.syncfusion.com/downloads/support/forum/168607/ze/Custom_Zoom-1090791093 

 

Regards, 

Karkuvel Rajan S 

[Peter]

Thank you very much for your answer.

For the question about "Tool.ZoomPan", I've added 2 events: Diagram_PreviewMouseRightButtonDown & Diagram_PreviewMouseRightButtonUp.

But I didn't find how to get the node under the mouse?

If there is a node under the mouse, I don't want to pan - I would like to execute the default operation: show a context menu by example.

Thank you very much for your answer. 

For the question about "Tool.ZoomPan", I've added 2 events: Diagram_PreviewMouseRightButtonDown & Diagram_PreviewMouseRightButtonUp.

But  I didn't find how to get the node under the mouse?

If there is a node under the mouse, I don't want to pan - I would like to execute the default operation: show a context menu by example.

private void Diagram_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            //I need to detect if I've clicked on an node or on the "canvas"?
            //Gets the top node under the current mouse location.
            INode node = diagram.Controller.GetNodeUnderMouse(e.Location); //only works in WinForms?
            // https://help.syncfusion.com/windowsforms/diagram/faq/how-to-get-a-node-at-a-point-or-under-a-mouse-location
            

            //if(e.Source is SfDiagram)
            {
                e.Handled = true;
                isPanOperationEnabled = true;


                // Set Tool as ZoomPan for Panning action
                diagram.Tool = Tool.ZoomPan;
            }
        }


        private void Diagram_PreviewMouseRightButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isPanOperationEnabled)
            {
                e.Handled = true;


                isPanOperationEnabled = false;


                //Pan operation is finished
                diagram.Tool = Tool.MultipleSelect;
            }
        }

Thank you for your time.

Thank you for your time.

[Karkuvel Rajan Shanmugavel]

Hi Rodrigue, 

 

Requirement: Need to disable Panning over the node. 

 

We have achieved your requirement by using “NodeConstraints” of SfDiagram. Please refer the following code example. 

 

 

            node.Constraints = node.Constraints.Remove(NodeConstraints.InheritAllowPan | NodeConstraints.AllowPan); 

            // Where node is the instance of the NodeViewModel 

 

 

 

Regards, 

Karkuvel Rajan S 

[Peter]

Ok, your solution is working. It's better because I can pan even if I click on a node... 

One of the disturbing behavior of Tool.ZoomPan, it's that the diagram doesn't follow the mouse. When you unzoom the diagram, the displacement are very little (even if I set ScrollLimit.unlimited)... You can also see this behavior in your diagram demo.

Is it possible that the panning follows the mouse cursor (as in other softwares).

Thank you for your time.

[Karkuvel Rajan Shanmugavel]

Hi Rodrigue, 

 

Requirement:  

 

We have analyzed your requirement and it can be achieved by the MenuOpeningEvent. Please refer the following code example. 

 

Code Example: 

 

 

        (Diagram.Info as IGraphInfo).MenuOpening += MainWindow_MenuOpening; 

 

        private void MainWindow_MenuOpening(object sender, MenuOpeningEventArgs args) 

        { 

            if(args.Source is INode && Diagram.Tool == Tool.ZoomPan)  

            { 

                args.Cancel = true; 

            } 

        } 

 

 

Regards, 

Karkuvel Rajan S 

[Peter]

Thank you very much. Everything works ;)

[Karkuvel Rajan Shanmugavel]

Hi Rodrigue, 

 

Most welcome. Please contact us if you need any further assistance. 

 

Regards, 

Karkuvel Rajan S 

[Anton]

private void Diagram_MouseMove(object sender, MouseEventArgs e)

        {

            if (e.RightButton == MouseButtonState.Pressed)

                Diagram.Tool = Tool.ZoomPan;

            if (e.RightButton == MouseButtonState.Released)

                Diagram.Tool = Tool.SingleSelect;

        }

[Karkuvel Rajan Shanmugavel]

Hi Rodrigue, 

 

Could you please provide us more details on your requirement, so that it would be helpful for us to analyze your query and provide you with better solution? 

 

Regards, 

Karkuvel Rajan S