Page Index Toggle Pages: [1] 2  Send TopicPrint
Very Hot Topic (More than 25 Replies) Operate on the image of the ShapeNode (Read 8342 times)
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Operate on the image of the ShapeNode
Aug 21st, 2020 at 2:06pm
Print Post  
Hi All, Smiley

After double-clicking on a certain point of the image of shapeNode, a rectangle with text description and direction is displayed with that point as the center. How can I achieve this?

Any assistance would be appreciated.

Cheers,

Jack
« Last Edit: Aug 22nd, 2020 at 3:28am by JackPan »  

8_21_5_0.png ( 246 KB | 98 Downloads )
8_21_5_0.png
8_21_6_0.png ( 293 KB | 106 Downloads )
8_21_6_0.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3171
Joined: Oct 19th, 2005
Re: Operate on the image of the ShapeNode
Reply #1 - Aug 24th, 2020 at 6:45am
Print Post  
Hi,

You can find the click coordinates reported via MousePosition argument of NodeDoubleClicked event. I guess create a ShapeNode centered at that position to show the rectangle and text, or draw them from DrawForeground event handler.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: Operate on the image of the ShapeNode
Reply #2 - Aug 24th, 2020 at 7:07am
Print Post  
Hi, Slavcho Smiley

Would you give me a code sample reference?
I want to get the coordinates after double-clicking in ShapeNode, and generate a rectangle with the coordinates as the center, then you can enter a value in the textbox to change the angle of the rectangle.
  
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: Operate on the image of the ShapeNode
Reply #3 - Aug 24th, 2020 at 7:32am
Print Post  
Hi, Slavcho Smiley

After realizing the above angled rectangle, I also need to implement another rectangle based on it, which is to use the left mouse button to drag on the periphery of this angled rectangle to generate another one with the same center in the ShapeNode Rectangle, this rectangle can change its width and height according to the values ​​in the two textboxes.

How can I achieve it with code?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3171
Joined: Oct 19th, 2005
Re: Operate on the image of the ShapeNode
Reply #4 - Aug 24th, 2020 at 9:45am
Print Post  
Hi,

Code
Select All
diagram.AllowInplaceEdit = false;

void OnNodeDoubleClicked(object sender, NodeEventArgs e)
{
	var overlay = diagram.Factory.CreateShapeNode(e.Node.Bounds);
	overlay.Text = "description text here";
	overlay.Brush = Brushes.Transparent;
	overlay.RotateText = true;

	var center = overlay.GetCenter();
	overlay.ResizeToFitText(FitSize.KeepHeight);
	overlay.ResizeToFitText(FitSize.KeepWidth);
	overlay.Move(
		center.X - overlay.Bounds.Width / 2,
		center.Y - overlay.Bounds.Height / 2);
	overlay.RotationAngle = 45;
} 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: Operate on the image of the ShapeNode
Reply #5 - Aug 24th, 2020 at 3:45pm
Print Post  
Hi Slavcho, Smiley

Thank you.
I have tried the sample code you gave me and I understand a lot. I want to tell you more about my problem now.

I currently need to generate three different rectangles in ShapeNode:
1.The rectangle 1 has a triangle direction sign;
2.The rectangle 2 is a dotted border;
3.The rectangle 3 is a solid border;

1.The method to generate the rectangle 1 is to hold down the Ctrl key + double-click the left mouse button and generate it with the clicked coordinate point as the center.The size of this rectangle can be changed by changing the width and height of the specified textbox, or the rectangle can be moved by changing the x and y coordinates of the center of the specified rectangle;

2.The rectangle 2 is the effect of Screenshot_two produced by clicking the button. Set this rectangle with the center point of rectangle 1 as the center. The users can stretch the six corners of this rectangle. Press the mouse to drag the inner area of ​​the rectangle (except for the area that intersects with rectangle one). Finally, click another button to confirm the generation of this rectangle. At this time, its size and position cannot be changed and can only delete it and remake it;

3.The rectangle 3 can be generated by holding down the left mouse button and dragging in the outer area of ​​Rectangle 2 to generate the effect of Screenshot_two. Set the rectangle with the center of Rectangle 1 as the center. The users can stretch the six corners of this rectangle. Press the mouse and drag the inner area of ​​the rectangle (except the area intersecting with Rectangle 1 and Rectangle 2). When a button is clicked to confirm the generation of this rectangle. This rectangle can be resized by changing the width and height of the two textbox. The users can click on the inner area of ​​the rectangle (except the area intersecting with rectangle 1 and rectangle 2) to reproduce the effect of Screenshot_two or change the coordinates of the center point of the rectangle to change the position of the rectangle in the ShapeNode.

How can I use code to completely implement all of what I said above, and create these 3 kinds of rectangles on ShapeNode at will.
« Last Edit: Aug 25th, 2020 at 12:35am by JackPan »  

Screenshot_one.png ( 187 KB | 101 Downloads )
Screenshot_one.png
Screenshot_two.png ( 153 KB | 106 Downloads )
Screenshot_two.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3171
Joined: Oct 19th, 2005
Re: Operate on the image of the ShapeNode
Reply #6 - Aug 25th, 2020 at 8:30am
Print Post  
Hi,

You can set properties like Stroke and StrokeDashStyle to specify appearance of your rectangles.

You can position node as specified in textboxes like this -

Code
Select All
var newBounds = new Rect(centerX - width / 2, centerY - height / 2, width, height);
rectangle1Node.Bounds = newBounds;
 



where centerX/Y, width and height are results of Double.Parse(textbox.Text), e.g. you could place that code in a NodePositionFromTextboxes function and call it from a common TextChanged handler of events raised by all text fields.

Letting users drag and resize nodes via adjustment handles is what the diagram does by default. Play with HandlesStyle, ModificationEffect and ModificationStart properties to find what move/resize modes you like the best.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: Operate on the image of the ShapeNode
Reply #7 - Aug 25th, 2020 at 8:50am
Print Post  
Hi Slavcho, Smiley

Because I am not familiar with graphics operations, please use code examples to implement all the aspects I mentioned above and the three types of rectangles covered. I really need them. I am currently studying and improving.

Best regards
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3171
Joined: Oct 19th, 2005
Re: Operate on the image of the ShapeNode
Reply #8 - Aug 26th, 2020 at 9:08am
Print Post  
From you still learning to code doesn't follow we owe you writing all aspects of your application's logic for you Roll Eyes Here's some code that should hopefully get you started:

Code
Select All
// event handler of diagram's DoubleClicked event
void OnDiagramDoubleClicked(object sender, DiagramEventArgs e)
{
	// hold down the Ctrl key + double-click
	if (Keyboard.Modifiers == ModifierKeys.Control)
	{
		var cx = e.MousePosition.X;
		var cy = e.MousePosition.Y;

		rectangle1 = diagram.Factory.CreateShapeNode(
			cx - width / 2, cy - height / 2, width, height,
			Shapes.Rectangle);

		rectangle1.Brush = Brushes.Transparent;
		rectangle1.Stroke = Brushes.Green;
	}
}

// event handler of button's Click event
void button1_Click(object sender, RoutedEventArgs e)
{
	//  rectangle 2 produced by clicking the button
	if (rectangle1 != null)
	{
		var cx = rectangle1.GetCenter().X;
		var cy = rectangle1.GetCenter().Y;

		rectangle2 = diagram.Factory.CreateShapeNode(
			cx - width2 / 2, cy - height2 / 2, width2, height2,
			Shapes.Rectangle);

		rectangle2.Brush = Brushes.Transparent;
		rectangle2.Stroke = Brushes.Orange;
		rectangle2.StrokeDashStyle = DashStyles.Dot;

		// let user draw rectangle3
		diagram.Behavior = Behavior.DrawShapes;
	}
}

// event handler of diagram's InitializeNode event
void OnInitializeNode(object sender, NodeEventArgs e)
{
	rectangle3 = e.Node as ShapeNode;
	if (rectangle3 != null)
	{
		rectangle3.Shape = Shapes.Rectangle;
		rectangle3.Brush = Brushes.Transparent;
		rectangle3.Stroke = Brushes.Blue;
	}
}

ShapeNode rectangle1;
ShapeNode rectangle2;
ShapeNode rectangle3;

// parse these from your text boxes instead
double width = 150;
double height = 150;
double width2 = 80;
double height2 = 80; 



Let us know if you have specific questions about the diagram API.

Regards,
Slavcho
« Last Edit: Aug 26th, 2020 at 10:51am by Slavcho »  
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: Operate on the image of the ShapeNode
Reply #9 - Aug 26th, 2020 at 12:54pm
Print Post  
Okay,Slavcho, thank you very much. Smiley

I would like to ask the following questions:

1.How to generate such a rectangle, there are 6 corners on the outside for the left mouse button to stretch?

2.How do I make the left mouse button click on the ShapeNode and drag it?

3.How can I tell if the mouse position is in the area where multiple ShapdeNodes intersect or in the disjoint area?

4.Event: (Keyboard.Modifiers == ModifierKeys.Control) is only valid in ShapeNode, how to achieve?

It would be best if there are code examples.

Best regards.
  

8_26.png ( 499 KB | 99 Downloads )
8_26.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3171
Joined: Oct 19th, 2005
Re: Operate on the image of the ShapeNode
Reply #10 - Aug 26th, 2020 at 1:37pm
Print Post  
Quote:
1.How to generate such a rectangle, there are 6 corners on the outside for the left mouse button to stretch?


These handles appear when you click to select the node. Alternatively you could select new nodes automatically by setting their Selected property, or show handles when mouse hovers over nodes by setting ModificationStart to AutoHandles.

Quote:
2.How do I make the left mouse button click on the ShapeNode and drag it?


You'll again need to click-select before moving, or select automatically via above methods. By default you can only move by dragging center adjustment handle. Change HandlesStyle for different move styles, e.g. try rect.HandlesStyle = HandlesStyle.SquareHandles2;

Quote:
3.How can I tell if the mouse position is in the area where multiple ShapdeNodes intersect or in the disjoint area?


You could call GetNodesAt method and count the nodes.

Quote:
4.Event: (Keyboard.Modifiers == ModifierKeys.Control) is only valid in ShapeNode, how to achieve


Move that to NodeDoubleClicked handler instead of diagram's DoubleClicked.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: Operate on the image of the ShapeNode
Reply #11 - Aug 26th, 2020 at 1:57pm
Print Post  
Thank you very much,Slavcho Smiley

Because I don't understand the explanation of the third question above, please give me a code example.

And because the existing the rectangle 1 is contained in the rectangle 2, the mouse cannot select the rectangle 1. How can I switch the mouse focus of multiple ShapeNodes at will?

And how can the rectangle 1 have a triangle?

Best regards.
  

8_26_0.png ( 8 KB | 107 Downloads )
8_26_0.png
8_26_1.png ( 36 KB | 97 Downloads )
8_26_1.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3171
Joined: Oct 19th, 2005
Re: Operate on the image of the ShapeNode
Reply #12 - Aug 27th, 2020 at 7:09am
Print Post  
Quote:
Because I don't understand the explanation of the third question above, please give me a code example.


Code
Select All
if (Diagram.GetNodesAt(mousePosition).Count >= 2)
    // multiple nodes
 



Quote:
And because the existing the rectangle 1 is contained in the rectangle 2, the mouse cannot select the rectangle 1. How can I switch the mouse focus of multiple ShapeNodes at will?


Right, at this time there's no special treatment for transparent nodes when hit-testing, so you can only select nodes higher in the Z order. You could assign larger ZIndex value to small node when you detect a larger transparent node is created on top of it. Or maybe change ZIndex dynamically from mouse-move event handler depending on which node's border is closest to the mouse.

Quote:
And how can the rectangle 1 have a triangle?


You could assign triangle icon to ShapeNode.Image, and set ImageAlign and ImagePadding properties to position it. If triangle should have node's border color, you could use a custom Shape containing the triangle instead - e.g. start from rectangle in shape designer tool and add a few lines for the triangle. Alternatively look into custom node templates (TemplatedNode shown in tutorials) or attached nodes via AttachTo method.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
JackPan
Full Member
***
Offline


I Love MindFusion!

Posts: 134
Joined: Apr 9th, 2020
Re: Operate on the image of the ShapeNode
Reply #13 - Aug 27th, 2020 at 8:30am
Print Post  
Thank you very much,Slavcho Smiley

When there are multiple ShapeNodes in the diagram, how to determine the node whose boundary is closest to the mouse?
How to use code to achieve this goal?

How to determine which ShapeNode the mouse has selected in the diagram? Which attribute of ShapeNode is used?

How does the rectangle 1 have a triangles? In your explanation of this question, I don’t know how to use a custom ShapeNode containing a triangles instead. Can you give me a sample code? And how does the AttachTo method view the custom node template?

Best regards.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3171
Joined: Oct 19th, 2005
Re: Operate on the image of the ShapeNode
Reply #14 - Aug 28th, 2020 at 6:01am
Print Post  
Quote:
When there are multiple ShapeNodes in the diagram, how to determine the node whose boundary is closest to the mouse?


Code
Select All
double DistToRect(Point point, Rect rect)
{
    var v = new[]
    {
        new Point(rect.Left, rect.Top),
        new Point(rect.Right, rect.Top),
        new Point(rect.Right, rect.Bottom),
        new Point(rect.Left, rect.Bottom),
    };
    double minDist = double.MaxValue;
    for (var i = 0; i < 4; i++)
    {
        var v1 = v[i];
        var v2 = v[(i + 1) % 4];
        var dist = Utilities.DistToLineSegment(point, v1, v2);
        if (dist < minDist)
            minDist = dist;
    }
    return minDist;
}

DiagramNode NearestRect(Point point)
{
    DiagramNode nearest = null;
    double minDist = double.MaxValue;
    foreach (var node in diagram.Nodes)
    {
        var dist = DistToRect(point, node.Bounds);
        if (dist < minDist)
        {
            minDist = dist;
            nearest = node;
        }
    }
    return nearest;
}
 

  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint