1. Home
  2. Forum
  3. jQuery
  4. Connector Behavior Issue

Connector Behavior Issue

Hi there,
I'm having issue with connector behavior.
Once I connect connector with two nodes, after that if i click on center of connector and try to drag it then it is disconnected from both nodes. Any solution?
I want remove aspectratio attribute of image type node. Any solution for that?
I want restrict user to resize node only in diagonal direction, not in horizontal or vertical direction.. Any Possibility?
Thanks..

7 Replies
SG Shyam G Syncfusion Team December 12, 2017 12:02 PM UTC

Hi Ahman, 
 
Query 
Response 
Once I connect connector with two nodes, after that if i click on center of connector and try to drag it then it is disconnected from both nodes. Any solution? 
Please remove drag connectorConstraints from default to achieve your requirement. please refer to the code example,help documentation and playground link below. 
 
Code example: 
var connectors = [ 
                { name: "connector1", sourceNode: "NewIdea", targetNode: "Meeting",constraints:ej.datavisualization.Diagram.ConnectorConstraints.Default &~ej.datavisualization.Diagram.ConnectorConstraints.Drag, },               
        ]; 
 
 
I want remove aspectratio attribute of image type node. Any solution for that? 
Please set node’s scale property as stretch  to achieve your requirement. please refer to the code example,help documentation and playground link below. 
 
Code example: 
 
var nodes=[ 
{ name: "image", width: 150, height: 60, offsetX: 500, offsetY: 155, scale:"stretch", type: "image",source:"https://static.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg" }, 
] 
 
 
I want restrict user to resize node only in diagonal direction, not in horizontal or vertical direction.. Any Possibility? 
Please remove ResizeNorthEast, ResizeSouthEast, ResizeNorthWest and ResizeSouthWest NodeConstraints from default to disable node resizer in diagonal direction. Please refer to the code example,help documentation and help documentation. 
 
Code example: 
 
Var nodes=[ 
{ name: "NewIdea", 
constraints:ej.datavisualization.Diagram.NodeConstraints.Default &~(ej.datavisualization.Diagram.NodeConstraints.ResizeNorthEast | ej.datavisualization.Diagram.NodeConstraints.ResizeSouthEast |ej.datavisualization.Diagram.NodeConstraints.ResizeNorthWest |ej.datavisualization.Diagram.NodeConstraints.ResizeSouthWest), 
} 
] 
 
 
 
 
Regards, 
Shyam G 


AH ahman December 12, 2017 02:07 PM UTC

Thank you so much dear. your information is very very helpful to me :)

"Please remove ResizeNorthEast, ResizeSouthEast, ResizeNorthWest and ResizeSouthWest NodeConstraints from default to disable node resizer in diagonal direction. Please refer to the code example,help documentation and help documentation. "

For me its like reverse thing ;) I want enable diagnoal resizers. i have changed your logic as below

     constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~(ej.datavisualization.Diagram.NodeConstraints.ResizeEast | ej.datavisualization.Diagram.NodeConstraints.ResizeSouth | ej.datavisualization.Diagram.NodeConstraints.ResizeWest | ej.datavisualization.Diagram.NodeConstraints.ResizeNorth)

and these are activated but i've little problem. I want allow user to resize item only in diagonal direction, not in East, West, South OR North Directions. with these diagonal resizers I'm able to resize in single direction.

I've few more couple of questions :) can I post multiple questions in a forum or single? or other way to get all answers?




SG Shyam G Syncfusion Team December 13, 2017 10:26 AM UTC

Hi Ahman, 
 
Query 
Response 
Please remove ResizeNorthEast, ResizeSouthEast, ResizeNorthWest and ResizeSouthWest NodeConstraints from default to disable node resizer in diagonal direction. Please refer to the code example,help documentation and help documentation. " 
 
For me its like reverse thing ;) I want enable diagnoal resizers. i have changed your logic as below 
 
     constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~(ej.datavisualization.Diagram.NodeConstraints.ResizeEast | ej.datavisualization.Diagram.NodeConstraints.ResizeSouth | ej.datavisualization.Diagram.NodeConstraints.ResizeWest | ej.datavisualization.Diagram.NodeConstraints.ResizeNorth) 
 
and these are activated but i've little problem. I want allow user to resize item only in diagonal direction, not in East, West, South OR North Directions. with these diagonal resizers I'm able to resize in single direction. 
Sorry for the inconvenience. 
 
  • In our previous update, we have provided code example to restrict the diagonal resizer. By default, all resizer constraints will be added to default node constraints.
  • If you need to disable any resizer, you can remove that resizer from default node constraints.
  • To achieve your requirement, please remove East,West,North and South resizer from default as shown in the below code example.
 
Code example: 
Var nodes=[  
{ name: "NewIdea",  
constraints:ej.datavisualization.Diagram.NodeConstraints.Default &~(ej.datavisualization.Diagram.NodeConstraints.ResizeEast | ej.datavisualization.Diagram.NodeConstraints.ResizeSouth |ej.datavisualization.Diagram.NodeConstraints.ResizeNorth |ej.datavisualization.Diagram.NodeConstraints.ResizeWest),  
}  
]  
 
Please refer to the playground link below in which we have enabled diagonal resizer alone. 
 
 
Also could you please confirm us whether you need to hide the disabled resizer?  
if we misunderstood your requirement, please share us more details such as explain clearly how you would like to resize the node with screenshot or video. 
 
I've few more couple of questions :) can I post multiple questions in a forum or single? or other way to get all answers? 
If you have any doubts in query asked in this forum, you can ask it in this forum itself and if you wish to ask new query, you can create a new forum and post your query. Also you can post Multiple questions in a single forum. 
 
 
Regards, 
Shyam G 


AH ahman December 13, 2017 01:49 PM UTC

Actually for image aspectratio, resizing of image, I've created below scenario.
http://jsplayground.syncfusion.com/tv1pllsk
in this scenario you can see that if user drag image in these type of directions then image gets disturbed.
in image four and image five I've applied scale:"meet".  it maintains image width and height but it is giving lot of space around it.
image one is fine. because it has manageable width and height. So it would be good if we restrict user to do not move in a certain position so that image maintain its view

SG Shyam G Syncfusion Team December 14, 2017 10:22 AM UTC

Hi Ahman, 
 
  • Could you please confirm us whether you need to restrict resizing of the node? if yes, you can remove Resize constraints from default Node constraints.
  • Could you please confirm us whether you need image node should be resized with the AspectRatio? If yes, you can enable AspectRatio Node constraints to default Node constraints.
  • could you please confirm us whether you need to restrict resizing of the node to a certain limit? If yes, please use sizeChange event in which you can cancel the event by setting arguments.cancel=true once it reaches a certain limit.
  • If we misunderstood your requirement, could you please elaborate your requirement with screenshot or video to demonstrate it.
 
Here is the help documentation to enable/disable Node constraints 
 
Here is the help documentation for sizeChange event. 
 
Regards, 
Shyam G 


AH ahman January 16, 2018 11:02 AM UTC

  • Could you please confirm us whether you need to restrict resizing of the node? if yes, you can remove Resize constraints from default Node constraints.
No, i want allow user to resize node
  • Could you please confirm us whether you need image node should be resized with the AspectRatio? If yes, you can enable AspectRatio Node constraints to default Node constraints.
I've attached screenshot, please look into that, there are 3 images. 1 image is in original position. I want image in that accurate result if user drag image in any direction, it should not get
 disturbed
  • could you please confirm us whether you need to restrict resizing of the node to a certain limit? If yes, please use sizeChange event in which you can cancel the event by setting arguments.cancel=true once it reaches a certain limit.
Not necessary





Attachment: abcd_b8f9aeb4.rar

KU Kutraleeswaran Syncfusion Team January 17, 2018 01:35 PM UTC

Hi Ahman, 
  
 
·         While resizing the node, Image will be stretched based on node resize. 
·         While resizing  the node in any direction, if both height and width should be resized then you need to include AspectRatio constraints to node’s default constraints. 
Here is the code snippet: 
  
$("#diagram").ejDiagram({ 
  
                   defaultSettings: { 
            node: { 
                  constraints : ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.AspectRatio 
            }, 
           
        }, 
}); 
·         While resizing the node, image also gets resized and quality of the image wont be same and it will be stretched. However, We have different type of alignment for image node, 
  
Here is the code snippet: 
     $("#diagram").ejDiagram({ 
                   nodes:[ {width:100,height:100,offsetX:300,offset:400, contentAlignment: ej.datavisualization.Diagram.ImageAlignment.XMinYMin 
           
        },] 
}); 
·         Or else could you please confirm that whether your requirement is image will be static on node resize, we will validate and provide a better solution to you? 
  
 
Regards, 
S.Kutraleeswaran 
 


Loader.
Up arrow icon