Hi, Slavcho

private void CreateNodes(string path)
{
    var myImage = new BitmapImage(new Uri(path, UriKind.Relative));

    var imageWidthPx = myImage.PixelWidth * GetScreenDpi() / myImage.DpiX;
    var imageHeightPx = myImage.PixelHeight * GetScreenDpi() / myImage.DpiY;
    var imageWidth = GraphicsUnit.Pixel.Convert(imageWidthPx, diagram.MeasureUnit);
    var imageHeight = GraphicsUnit.Pixel.Convert(imageHeightPx, diagram.MeasureUnit);
    imageNode = diagram.Factory.CreateShapeNode(0, 0, imageWidth, imageHeight);
    imageNode.Image = myImage;
    imageNode.Shape = Shapes.Rectangle;
    imageNode.Locked = true;
    imageNode.ImageAlign = ImageAlign.BottomRight;
    double.TryParse(textBoxW.Text, out overlayNodeWidth);
    double.TryParse(textBoxH.Text, out overlayNodeHeight);
    var newBounds = new System.Windows.Rect(imageNode.Bounds.Right - overlayNodeWidth, imageNode.Bounds.Bottom - overlayNodeHeight, overlayNodeWidth, overlayNodeHeight);
    // Change the node's position / dimensions
    overlayNode.SetBounds(newBounds, true, true);

    overlayNode.EnabledHandles ^= AdjustmentHandles.Move | AdjustmentHandles.BottomHandles | AdjustmentHandles.RightHandles;

    zoomInMax = overlayNode.Bounds;

    diagram.InvalidateForeground();
}

The above piece of code realizes the creation of two ShapeNodes in the diagram instance, imageNode and overlayNode. There are a few problems I don’t understand very well:
1. imageNode.ImageAlign = ImageAlign.BottomRight; what this code does here What is it?

2. When the overlayNode is created, it is fixed at the lower right corner of the imageNode, which is achieved by these two lines of code: double.TryParse(textBoxW.Text, out overlayNodeWidth);
double.TryParse(textBoxH.Text, out overlayNodeHeight);var newBounds = new System.Windows.Rect(imageNode.Bounds.Right-overlayNodeWidth, imageNode.Bounds.Bottom-overlayNodeHeight, overlayNodeWidth, overlayNodeHeight);overlayNode.SetBounds(newBounds, true , true); However, I change the value in the TextBox:
private void tb_PreviewTextInput(object sender, TextCompositionEventArgs e)
{
    Regex re = new Regex("[^0-9]+");

    e.Handled = re.IsMatch(e.Text);

}
That is, after changing the value of textBoxW or textBoxH, overlayNode is no longer fixed at the lower right corner of the imageNode, but at the upper left corner of the imageNode. Why is this happening? How can I modify the program to keep the overlayNode at the bottom right corner of the imageNode?

3. May I ask this code: overlayNode.EnabledHandles ^= AdjustmentHandles.Move | AdjustmentHandles.BottomHandles | AdjustmentHandles.RightHandles; and this code: zoomInMax = overlayNode.Bounds; What is the function?

4. How to change this regular expression to limit the value to only two decimal places?

Best regards.

Hi, Lyubo

I haven't seen you for a while. I remember that the functions CreateNodes and tb_PreviewTextInput were taught by you. Thank you and Slavcho.

The program compiles and runs without errors. The function CreateNodes creates imageNode and overlayNode. The overlayNode is set at the bottom right of the imageNode, but if I change the width and height of the overlayNode, the result is that the overlayNode is at the top left of the imageNode. I want to understand why this is the case, and what modifications should be made to it so that the width and height of the overlayNode will not affect the position of the overlayNode in the imageNode. The result I want is that the overlayNode remains at the bottom right of the imageNode. I have debugged the program and found that changing the width and height of ovelayNode will enter the function tb_PreviewTextInput, and execute these two lines of code:
Regex re = new Regex("[^0-9]+");
e.Handled = re.IsMatch(e.Text);
will cause the location of overlayNode to change. Do I need to change these two lines of code or need to make other changes?

Best regards.

Hi, Lyubo

Because I want to overlap the lower right border of the overlayNode with the lower right border of the imageNode and make them unable to be dragged, I added the code overlayNode.EnabledHandles ^= AdjustmentHandles.Move | AdjustmentHandles.BottomHandles | AdjustmentHandles.RightHandles; But it failed. The result is that the lower right boundary of the overlayNode does not coincide with the lower right boundary of the imageNode. It just realizes that the overlayNode cannot be dragged in the right and down directions.
The following attachments are all the codes of the main window class of my current program. Please help me analyze the problem and how to solve this problem?

Best regards.

Thanks very much, Lyubo.

I got it, corrected it, and the effect was finally realized.

I would like to ask what is the difference between the following two pieces of code:
1. double.TryParse(textBoxW.Text, out overlayNodeWidth);
            double.TryParse(textBoxH.Text, out overlayNodeHeight);
            var newBounds = new System.Windows.Rect(imageNode.Bounds.Right - overlayNodeWidth, imageNode.Bounds.Bottom - overlayNodeHeight, overlayNodeWidth, overlayNodeHeight);
            // Change the node's position / dimensions
            overlayNode.SetBounds(newBounds, true, true);

            overlayNode.EnabledHandles ^= AdjustmentHandles.Move | AdjustmentHandles.BottomHandles | AdjustmentHandles.RightHandles;

            diagram.InvalidateForeground();

2.   double width, height;
            // parse the input
            if (double.TryParse(textBoxW.Text,out width) && double.TryParse(textBoxH.Text, out height))
            {
                // limit the new width and height to the image node dimensions
                width = Math.Min(width, imageNode.Bounds.Width);
                height = Math.Min(height, imageNode.Bounds.Height);

                // calculate the difference between the old and new size
                var dx = width - overlayNode.Bounds.Width;
                var dy = height - overlayNode.Bounds.Height;

                // update the size
                var newBounds = new System.Windows.Rect(overlayNode.Bounds.X - dx, overlayNode.Bounds.Y - dy, width, height);
                overlayNode.EnabledHandles ^= AdjustmentHandles.Move | AdjustmentHandles.BottomHandles | AdjustmentHandles.RightHandles;
                zoomInMax = overlayNode.Bounds; // The bigger node in your example, replace/inflate if needed by your requirements
                overlayNode.SetBounds(newBounds, true, true);
                imageNode.InvalidateVisual();
            }

Best regards.

Hi,

JackPan wrote on Sep 17^th, 2020 at 7:57am:


The first example sets the initial position of the overlayNode by aligning it to the bottom-right of the imageNode. The second piece of code assumes the overlayNode is already aligned, and just repositions it after its size has been changed.

JackPan wrote on Sep 17^th, 2020 at 8:36am:


The ImageAlign property has nothing to do with your overlayNode. As I already explained above, it's responsible for postioning the image set to the ShapeNode.Image property.

To "dock" the overlayNode, you'd use the already provided code above when you change its size.

Regards,
Lyubo
MindFusion

Hi,

1) You need to use valid C# regex syntax, e.g. escape the backslashes - new Regex("\\d+(\\.\\d{1,2})?");

2) You're filtering all the valid values instead of invalid. Change your code to e.Handled = !regex.IsMatch(e.Text);

Regards,
Lyubo
MindFusion

Hi,

When you set Handled to false in this case, you're right in your assumption, that the event will stop propagating and thus the invalid input will be discarded.

It doesn't work as you expect, as this is actually the PreviewTextInput event, and e.Text in this case is just new input, not the whole content of the TextBox, i.e. when you input the decimal place, e.Text is ".", which your regular expression won't match.

You can use PreviewTextInput to check if the input is either a digit or a decimal place, then validate if the whole text is a valid number in a TextChanged event.

Regards,
Lyubo
MindFusion