Creating nodes with angle different then 0

GoXam
#1

Hi,

I have done some code that uses the RotationTool. Everything works fine until I try to create a node with a different angle value than 0°.

When I do rotation nodes after creating them with a default Angle value of 0, I’m getting this, which is exactly what I want :

But if I serialize/deserialize those nodes, I do create nodes whit angle value different than 0, so I’m getting this :

Here is the code I use :

<DataTemplate x:Key="Mixer">
            <go:SpotPanel go:Part.SelectionAdorned="True" Visibility="{Binding Data.IsVisible, Converter={StaticResource boolToVisibilityConverter}}"
                          go:Node.Location="{Binding Data.Location, Mode=TwoWay}" ToolTip="{Binding Data.Id}" go:Node.SelectionElementName="NodePanel"
                          go:Node.RotationAngle="{Binding Data.Angle, Mode=TwoWay}" go:Part.Rotatable="True" go:Part.RotateAdornmentTemplate="{StaticResource NodeRotateAdornmentTemplate}" >
                <go:SpotPanel.InputBindings>
                    <MouseBinding Gesture="LeftDoubleClick" Command="{Binding Data.ShowEditorCommand}"/>
                </go:SpotPanel.InputBindings>
 
                <StackPanel>
                    <go:NodePanel x:Name="NodePanel" Background="Transparent" Cursor="ScrollAll">
                        <Grid Width="40" Height="40">
                            <Path x:Name="RotatableItem" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24" Height="28" Panel.ZIndex="2" Stretch="Fill" Fill="Transparent" Data="F1 M 236.285,736L 211.715,752L 211.715,720L 236.285,736 Z "
                                      go:Node.PortId="" go:Node.LinkableFrom="True" go:Node.LinkableTo="True" go:Node.ToSpot="LeftSide" go:Node.FromSpot="RightSide" Cursor="Hand"/>
 
                            <ContentControl HorizontalAlignment="Center" VerticalAlignment="Center"  Width="24" Height="28" Panel.ZIndex="1" Template="{StaticResource MixerIcon}" />
                        </Grid>
                    </go:NodePanel>
 
                    <TextBlock Style="{StaticResource TextBlockUnityNameStyle}" />
                </StackPanel>
            </go:SpotPanel>
 
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Data.Angle}" Value="0">
                    <Setter Property="go:Node.ToSpot" TargetName="RotatableItem" Value="LeftSide"/>
                    <Setter Property="go:Node.FromSpot" TargetName="RotatableItem" Value="RightSide"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Data.Angle}" Value="360">
                    <Setter Property="go:Node.ToSpot" TargetName="RotatableItem" Value="LeftSide"/>
                    <Setter Property="go:Node.FromSpot" TargetName="RotatableItem" Value="RightSide"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Data.Angle}" Value="90">
                    <Setter Property="go:Node.ToSpot" TargetName="RotatableItem" Value="TopSide"/>
                    <Setter Property="go:Node.FromSpot" TargetName="RotatableItem" Value="BottomSide"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Data.Angle}" Value="180">
                    <Setter Property="go:Node.ToSpot" TargetName="RotatableItem" Value="RightSide"/>
                    <Setter Property="go:Node.FromSpot" TargetName="RotatableItem" Value="LeftSide"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Data.Angle}" Value="270">
                    <Setter Property="go:Node.ToSpot" TargetName="RotatableItem" Value="BottomSide"/>
                    <Setter Property="go:Node.FromSpot" TargetName="RotatableItem" Value="TopSide"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

Is this look alright ? What may I have missed ?

Thanks,
Mathieu

#2

I just tried this, and it worked fine, both for interactive rotation as well as being restored after save and load.

<DataTemplate x:Key="Valve2"> <StackPanel go:Part.SelectionElementName="Shape" go:Part.SelectionAdorned="True" go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}" go:Node.Rotatable="True" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" go:Node.LocationElementName="Shape" go:Node.LocationSpot="Center"> <go:NodeShape x:Name="Shape" go:NodePanel.Figure="TriangleRight" Width="30" Height="30" Stroke="Black" StrokeThickness="1" go:Node.PortId="" go:Node.FromSpot="MiddleRight" go:Node.ToSpot="MiddleLeft" go:Node.LinkableFrom="True" go:Node.LinkableTo="True"> <Shape.Fill> <LinearGradientBrush StartPoint="0 0" EndPoint="0 1"> <GradientStop Color="Gray" Offset="0.0" /> <GradientStop Color="White" Offset="0.5" /> <GradientStop Color="Gray" Offset="1.0" /> </LinearGradientBrush> </Shape.Fill> </go:NodeShape> <TextBlock Text="{Binding Path=Data.Text, Mode=TwoWay}" HorizontalAlignment="Center" /> </StackPanel> </DataTemplate>
You do need to remember that the Link.Route properties need to be set:

FromEndSegmentDirection="RotatedNodeOrthogonal" ToEndSegmentDirection="RotatedNodeOrthogonal"

#3

If you haven’t already seen it, the Piping sample might give you some ideas. That’s where I tried the above template. But you might not need any more ideas, if you get this working the way that you want.

#4

Hi,

I tried the code you posted in our solution and I have the same problem. I don’t understand why it’s not working as the Piping sample. Everything look similar.

I’m still getting that after loading rotated nodes :

I removed go:Part.SelectionElementName=“Shape” and I’m now getting this :

The left mixer is loaded with a angle value of 0 than rotated from 0 to 90 and the right one is loaded with a angle value of 90. The loading with angle different than 0 work fine here, but with this solution, I do have the text in the blue selection zone and that’s not what we want to do.

It’s look like when the selection Element is set to a specific element in the nodeTemplate, rotated nodes can’t load properly in our solution.

Any tips what may cause that behavior ? I’ve try to remove all the GoXam override methods we use in our solution and no change.

Thanks

#5

Well, my XAML wasn’t using any Triggers, if that matters. Are there any Style influencers in your definitions?

#6

I tried with the minimum. No trigger, no style.

</span><div style="line-height: 16.7999992370605px;"><span style="line-height: 16.7999992370605px;"><div style="line-height: 16.7999992370605px;"> <DataTemplate x:Key="Mixer"><div style="line-height: 16.7999992370605px;"> <go:SpotPanel go:Part.SelectionAdorned="True"<div style="line-height: 16.7999992370605px;"> go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"<div style="line-height: 16.7999992370605px;"> go:Node.Rotatable="True"<div style="line-height: 16.7999992370605px;"> go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"<div style="line-height: 16.7999992370605px;"> go:Node.SelectionElementName="Shape"><div style="line-height: 16.7999992370605px;"> <StackPanel><div style="line-height: 16.7999992370605px;"> <go:NodeShape x:Name="Shape" go:NodePanel.Figure="TriangleRight" Width="30" Height="30" Stroke="Black" StrokeThickness="1" Fill="Gray"<div style="line-height: 16.7999992370605px;"> go:Node.PortId="" go:Node.FromSpot="MiddleRight" go:Node.ToSpot="MiddleLeft" go:Node.LinkableFrom="True" go:Node.LinkableTo="True"><div style="line-height: 16.7999992370605px;"> </go:NodeShape><div style="line-height: 16.7999992370605px;"> <TextBlock Text="Mixer1" /><div style="line-height: 16.7999992370605px;"> </StackPanel><div style="line-height: 16.7999992370605px;"> </go:SpotPanel><div style="line-height: 16.7999992370605px;"> </DataTemplate></span><div style="line-height: 16.7999992370605px;"><span style="line-height: 16.7999992370605px;">
#7

And it’s still not working for you?

What version of GoXam for WPF are you using?

#8

Only when a node is loaded with angle value different than 0. Everything else work fine.

version 2.1.6.45

#9

Perhaps the location-related properties matter in your case.

If you tried the template that I posted above in the Piping sample, and change the data Category correspondingly, does the Piping sample work for you?

#10

Yes, it’s working in that piping sample.

#11

Hi,

I’m asking again since I haven’t solved that issue yet. Do you have any idea what may cause that behavior ? I’ve noticed that the blue selection zone is always rotated correctly. What’s strange is when there is something else outside that blue selection zone in the SpotPanel (like a TextBlock in my case) what’s inside the selection zone is rotated twice. If you look at those pictures I posted, you can see that the path of the triangle is rotated of 90° for the mixer 3, 180° for the mixer 2 and 270° for the mixer 4. So it looks like the rotation is applied twice when loading to what’s inside the blue selection zone. And again it’s only in one of our solutions, it’s working fine in the piping sample and in another of our solution.


Here’s the picture again.





Thanks

#12

I just tried the DataTemplate that you posted above, verbatim except for changing the Key of the template to be my app’s category name. Everything worked well, at all four angles, and after saving and loading again, everything looked and had selection adornments as expected.

But I suspect that you have something wrong in your template. In your screenshot in the previous post, it appears that the selection adornments are “pointing” in the correct direction, and it is the triangular shape that is oriented in the wrong direction. So I’m wondering if you are specifying two angle transforms, one on the Node via Node.RotationAngle and another on the Shape that you implemented yourself.

#13

You mean the DataTemplate of the node ? Because even with something as simple as that, I still get that behavior.

[code]<DataTemplate x:Key="Mixer">
    <go:SpotPanel go:Part.SelectionAdorned="True"
            go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"
            go:Node.Rotatable="True"
            go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
            go:Node.SelectionElementName="Shape">
        <StackPanel>
            <go:NodeShape x:Name="Shape" go:NodePanel.Figure="TriangleRight" Width="30" Height="30" Stroke="Black" StrokeThickness="1" Fill="Gray" />
            <TextBlock Text="Mixer1" />
        </StackPanel>
    </go:SpotPanel>
</DataTemplate>[/code]
And there is nothing else other than go:Node.Rotatable to rotate node in our flowsheet. But I've noticed when loading rotated node, there is no DoRotate() done and I don't know where nodes are rotated from when loaded. They are probable load and directly draw with an angle in the flowsheet. I suspect something in our solution acting with GoXam affect the way it is draw with angle. Because if they are rotated with DoRotate() everything is fine.
I also noticed the default rotate adornment is off by the angle value, which is strange.
#14

This is after saving and loading, with everything selected:

<DataTemplate x:Key="Valve2"> <go:SpotPanel go:Part.SelectionAdorned="True" go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}" go:Node.Rotatable="True" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" go:Node.SelectionElementName="Shape"> <StackPanel> <go:NodeShape x:Name="Shape" go:NodePanel.Figure="TriangleRight" Width="30" Height="30" Stroke="Black" StrokeThickness="1" Fill="Gray" go:Node.PortId="" go:Node.FromSpot="MiddleRight" go:Node.ToSpot="MiddleLeft" go:Node.LinkableFrom="True" go:Node.LinkableTo="True"> </go:NodeShape> <TextBlock Text="Mixer1" /> </StackPanel> </go:SpotPanel> </DataTemplate>

<Diagram> <Valve Key="V" Category="Valve2" Location="260 130" Text="Valve" /> <Valve Key="V 2" Category="Valve2" Location="340 220" Text="Valve" Angle="90" /> <Valve Key="V 3" Category="Valve2" Location="260 280" Text="Valve" Angle="180" /> <Valve Key="V 4" Category="Valve2" Location="180 210" Text="Valve" Angle="270" /> <Pipe From="V" To="V 2" Points="293.055 145 303.055 145 358.055 145 358.055 177.5 358.055 210 358.055 220" /> <Pipe From="V 2" To="V 3" Points="358.055 250 358.055 260 358.055 295 330.555 295 303.055 295 293.055 295" /> <Pipe From="V 3" To="V 4" Points="263.055 295 253.055 295 198.055 295 198.055 272.5 198.055 250 198.055 240" /> <Pipe From="V 4" To="V" Points="198.055 210 198.055 200 198.055 145 225.555 145 253.055 145 263.055 145" /> </Diagram>