Mirroring the node across x axis as well as y axis



I have a requirement that I should be able to mirror the node along x axis or y axis. Also that the port should be at the corresponding place after the mirroring.

Does goxam has any feature to mirror the node ?


Programmers normally do not want to flip a node along either the vertical or horizontal axis because that would flip the text that the node is displaying.

So you will want to flip, using a standard transform each Shape, rearranging the panels so that the ports are moved and flipped appropriately, including flipping the FromSpot and ToSpot as needed.


I would also want the text also to be flipped along with the node shape


Does it work in your templates to apply the transform to the whole node if you also flip the FromSpot and ToSpot on each port?


Yes. I tried to use the render transform to the templates on flip command but the problem is that the adornments are not staying on the shapes anymore. It goes to right side of the node and not at all on the node.


Which Adornments? A small screenshot would help.


Consider the following images

Before Mirror: If you check the blue dots its well around my node

After Mirror: But after I flip the node moved to left but the blue dots are the same


It looks as if you need to transform the element(s) about the middle of the object.


Tried RenderTransform and LayoutTransform above issue with blue dots occurs


Could you show us the node template? You can strip out all of the irrelevant details – what’s the minimum template that (almost) does what you want?


Please refer the below image.

After applying the scalarTranform to the whole DataTemplate, adorment issue is resolved.

The position of the ports in the UI is updated, but when creating a link, the starting point of the link still points to the older position of the port.

I understand this could be solved with the help of the SpotPanel, but is there any other way to resolve this issue.

Since we have completed the design of our shapes, we prefer not to change it.

Below is a sample data template’s design for your reference.

    <DataTemplate x:Key="{x:Static prop:Resources.SplitterTemplate}">
        <StackPanel Tag="Splitter" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
                        go:Node.Resizable="True" go:Node.ZOrder="1">

            <Grid Name="ItemData" MinHeight="58" MinWidth="45" Background="Transparent" RenderTransform="{Binding Path=go:Node.RenderTransform}">
                    <RowDefinition Height="18"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="5"/>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="5"/>
                <TextBlock Grid.ColumnSpan="3" Text="{Binding Path=Data.Key}" HorizontalAlignment="Center"/>
                <!--Port definition-->
                <local:MandatoryPort go:Node.LinkableFrom="True" go:Node.LinkableTo="True" Grid.Row="1" Grid.Column="0" go:Node.PortId="OutPort1" HorizontalAlignment="Right"/>
                <local:MandatoryPort go:Node.LinkableFrom="True" go:Node.LinkableTo="True" Grid.Row="1" Grid.Column="2" x:Name="InPort1"  HorizontalAlignment="Left" go:Node.PortId="InPort1" />
                <local:MandatoryPort go:Node.LinkableFrom="True" go:Node.LinkableTo="True" Grid.Row="2" Grid.Column="1" x:Name="OutPort2"  HorizontalAlignment="Center" VerticalAlignment="Top" go:Node.PortId="OutPort2" />

                <Grid Name="Shape" Grid.Row="1" Grid.Column="1" MinHeight="35" MinWidth="35" >
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    <Rectangle Grid.ColumnSpan="2" Stroke="Gray" StrokeThickness="1" 
                               Cursor="Hand" MinHeight="35" MinWidth="35" Fill="White"/>
                    <Rectangle Grid.Row="1" Grid.ColumnSpan="2" Height="0" Width="0" go:Node.LinkableTo="True" go:Node.PortId="OptPort1"/>
                    <Path Grid.Column="1" Margin="0,5,0,5" Stretch="Fill" Stroke="Gray" Data="M 15 4 L 0 4 M 8 8 L 0 4 L 8 0" />


RenderTransform necessarily only transforms what is drawn. It does not actually move any of the elements. So the port remains at the bottom of the node.

You’ll need to move the port to be where you want it to be.

I suppose you could try using a LayoutTransform instead, but I’m not confident that is a magic solution.