Node.ToSpot = Center doesn't work

GoXam
1

I want that my link starts and ends in the center of my nodes. So I looked at the Link Demo and I simply tried Node.ToSpot=Center and Node.FromSpot=Center but it makes no effects.

The node here is the rectangle and I want that my like ending by orange circle starts and ends in the center of the red rectangle. I don’t if it can be an issue but the Red Node is a LabelNode the horizontal link…

Node Template:

                <go:NodeShape go:NodePanel.Figure="Rectangle" Fill="Red"   Width="50" Height="15" 
                         go:Node.LinkableSelfNode="False" go:Node.LinkableMaximum="1"
                         Stroke="Transparent"
                         StrokeThickness="1"
                         go:Node.PortId="">

                    <go:Node.LinkableFrom>
                        <MultiBinding Mode="TwoWay">
                            <MultiBinding.Converter>
                                <local:IsExchangerLinkableConverter />
                            </MultiBinding.Converter>

                            <Binding Path="Node.Diagram.AddingTool.CanAddItem" />
                            <Binding Path="Node.Diagram.AddingTool.ItemType" />
                        </MultiBinding>
                    </go:Node.LinkableFrom>

                    <go:Node.LinkableTo>
                        <MultiBinding Mode="TwoWay">
                            <MultiBinding.Converter>
                                <local:IsExchangerLinkableConverter />
                            </MultiBinding.Converter>

                            <Binding Path="Node.Diagram.AddingTool.CanAddItem" />
                            <Binding Path="Node.Diagram.AddingTool.ItemType" />
                        </MultiBinding>
                    </go:Node.LinkableTo>

                    <go:NodeShape.Cursor>
                        <MultiBinding Mode="TwoWay">
                            <MultiBinding.Converter>
                                <local:ExchangerNodeCursorConverter />
                            </MultiBinding.Converter>

                            <Binding Path="Node.Diagram.AddingTool.CanAddItem" />
                            <Binding Path="Node.Diagram.AddingTool.ItemType" />
                        </MultiBinding>
                    </go:NodeShape.Cursor>

                </go:NodeShape>


            </go:NodePanel>
        </DataTemplate>

Link Template:

                <go:Link.Route>
                    <go:Route Routing="Normal"   Curve="JumpGap" MouseLeftButtonDown="OnExchangerDoubleClick" 
                              RelinkableFrom="True" RelinkableTo="True"
                              FromEndSegmentDirection="RotatedNodeOrthogonal"  
                              ToEndSegmentDirection="RotatedNodeOrthogonal"
                              LinkReshapeHandleTemplate="{StaticResource LinkReshapableHandleTemplate}" />
                </go:Link.Route>

                <go:LinkShape Stroke="Transparent" StrokeThickness="10" />
                <go:LinkShape x:Name="Path"  
                              StrokeThickness="{Binding Path=Data.Highlight, Converter={StaticResource theStrokeThicknessConverter}}" 
                              Stroke="{Binding Path=Data.Highlight, Converter={StaticResource theStrokeColorConverter}}" />
                <Path Fill="Orange" go:LinkPanel.FromArrow="Circle" go:LinkPanel.FromArrowScale="1" />
                <Path Fill="Orange" go:LinkPanel.ToArrow="Circle" go:LinkPanel.ToArrowScale="1" />

                
                   
                <TextBlock Text="{Binding Data.Data.Name,Mode=TwoWay}"
                           TextWrapping="Wrap"
                           Margin="2,0,0,0"
                           go:LinkPanel.Offset="0 NaN" go:LinkPanel.Orientation="Upright45"
                           go:Part.TextEditable="True"/>
                
            </go:LinkPanel>

        </DataTemplate>
2

You didn’t put those two attached properties on the port – you put them on the whole node where they had no effect because you had declared the NodeShape to be the port.

If you want links to go to the center of the red Rectangle, I suggest you add a Rectangle to act as the port:

<go:NodePanel go:Part.Movable=“False”
go:Node.Avoidable=“False”
go:Node.LocationSpot=“Center”
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
MouseLeftButtonDown=“HandleStreamDoubleClick”
MouseLeftButtonUp=“HandlePartMouseLeftButtonUp”>


… attached LinkableTo/From …

… attached Cursor …
</go:NodePanel>

3

How can you link from a Port of 0x0 px?

4

Oops – quite right, I was confusing this with the other conversation.

I’m assuming you want to put the orange circles in the middle of the red rectangles.
Then with the following templates:

[code] 

<DataTemplate x:Key="LinkTemplate">
  <go:LinkPanel go:Part.SelectionAdorned="True">
    <go:Link.Route>
      <go:Route FromEndSegmentLength="0" ToEndSegmentLength="0" />
    </go:Link.Route>
    <go:LinkShape Stroke="Black" StrokeThickness="1" />
    <Ellipse Fill="Orange" Width="8" Height="8"
             go:LinkPanel.Index="0" go:LinkPanel.Alignment="Center" />
    <Ellipse Fill="Orange" Width="8" Height="8"
             go:LinkPanel.Index="-1" go:LinkPanel.Alignment="Center" />
  </go:LinkPanel>
</DataTemplate>[/code]

I get the following screenshot:

5

By the way, because a Route isn’t in the visual tree (and should never be), setting any input event handlers (such as MouseLeftButtonDown) on a Link.Route has no effect.

6

Yeah I know, I was making some tests. So it working well. The circle is in the middle of the rectangle. The only thing is that there is From/ToEndSegmentLength when I draw the link. Any way to set it to 0?

7

Supply a custom template as the Diagram.LinkingTool.TemporaryLinkTemplate.
The default template is defined in the Generic…XAML file in the docs subdirectory.