Draggable node label?

Hi. GoXam team.

I have two issue.


1. I’m used your sample StateChart for sliverlight.

The draggable link label is very useful.

So I trying to make draggable node label but I don’t have a fix yet.

I have no idea what I should make DraggingTool.


2. When I resize node, If it was draged to the way of horizontal or vertical wan’t resize.

Only it’s possible to drag cater-cornered.

and I wish to only resize to the way of horizontal or vertical.

What’s problem my DataTemplate?


Thanks & Regards.






<go:NodePanel go:Part.SelectionElementName=“Shape” go:Node.Rotatable=“True” go:Part.Resizable=“True”
go:Part.Reshapable=“True” go:Part.SelectionAdorned=“True”
go:Part.ResizeAdornmentTemplate="{StaticResource NodeResizeAdornmentTemplate}"
go:Part.SelectionAdornmentTemplate="{StaticResource NodeSelectionAdornmentTemplate}"
go:Node.Location="{Binding Data.Location, Mode=TwoWay}" ToolTipService.ToolTip=“Back Pressure Turbine”>
<go:SpotPanel go:Node.Location="{Binding Data.Location, Mode=TwoWay}">
go:NodePanel

<Path Data=“M29.800001,1 L29.800001,43.842999 L1,30.990202 L1,13.852797 L29.800001,1 z M43.240002,28.848001 C46.420448,28.848001 49.000004,25.970881 49.000004,22.420984 C49.000004,18.872122 46.420448,15.995001 43.240002,15.995001 C40.058399,15.995001 37.480003,18.872122 37.480003,22.420984 C37.480003,25.970881 40.058399,28.848001 43.240002,28.848001 z M29.799999,22.421122 L37.479767,22.421122 C40.359245,15.995001 41.799564,19.208059 43.23988,22.421122 C44.680202,25.635212 46.119366,28.848272 49,22.421122 M26.776003,42.799004 C26.921003,49.000004 26.921003,49.000004 26.921003,49.000004 M3.7200015,5.973002 C3.8650014,12.174002 3.8650014,12.174002 3.8650014,12.174002”
Width=“50” Height=“50” Stroke="{Binding Path=Part.IsSelected, Converter={StaticResource theSelectedBrushConverter}}" StrokeThickness=“1.5” StrokeStartLineCap=“Round”
StrokeEndLineCap=“Round” StrokeDashCap=“Round” StrokeLineJoin=“Round” Stretch=“Fill” UseLayoutRounding=“False”>
<Path.Fill>







</Path.Fill>


</go:NodePanel>
<Rectangle Fill=“Transparent” Width=“6” Height=“6”
go:SpotPanel.Spot=“0.088 0.13” go:SpotPanel.Alignment=“MiddleTop”
go:Node.PortId=“In2” go:Node.LinkableTo=“True” Cursor=“Hand”
go:Node.ToSpot=“MiddleTop” />
<Rectangle Fill=“Transparent” Width=“6” Height=“6”
go:SpotPanel.Spot=“0.53 0.95” go:SpotPanel.Alignment=“MiddleBottom”
go:Node.PortId=“Out2” go:Node.LinkableFrom=“True” Cursor=“Hand”
go:Node.FromSpot=“MiddleBottom” />
</go:SpotPanel>

<go:NodePanel Sizing=“Auto” go:LinkPanel.Offset="{Binding Path=Data.Offset, Mode=TwoWay}">

<Shape.Fill>




</Shape.Fill>

<TextBlock Text="{Binding Path=Data.Text, Mode=TwoWay}"
TextWrapping=“Wrap” TextAlignment=“Center”
go:Part.TextEditable=“True” Margin=“10” />
</go:NodePanel>

</go:NodePanel>







#region # Back Pressure Turbine #
#if !SILVERLIGHT
[Serializable]
#endif
public class BPTData : ItemData
{
private double _width = 50;
private double _height = CommonSpace.Height + 50;

public BPTData()
{
Category = “BPT”;
}

[EditorBrowsable(EditorBrowsableState.Never)]
public double Width
{
get { return _width; }
set { if (_width != value) { double old = _width; _width = value; RaisePropertyChanged(“Width”, old, value); } }
}

[EditorBrowsable(EditorBrowsableState.Never)]
public double Height
{
get { return _height; }
set { if (_height != value) { double old = _height; _height = value; RaisePropertyChanged(“Height”, old, value); } }
}

private double _angle;

[EditorBrowsable(EditorBrowsableState.Never)]
public double Angle
{
get { return _angle; }
set { if (_angle != value) { double old = _angle; _angle = value; RaisePropertyChanged(“Angle”, old, value); } }
}

private string _description;

[Category(“Advanced”), ReadOnly(true)]
public string Name
{
get { return Key.Replace(" ", “”); }
}

[Category(“Advanced”)]
public string Description
{
get { return _description; }
set
{
if (_description == value) return;
_description = value;
OnPropertyChanged(“Description”);
}
}

#region INotifyPropertyChanged Members

public new event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged(string propertyName)
{
if (string.IsNullOrEmpty(propertyName)) throw new ArgumentNullException(“propertyName”);
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}

#endregion


// Because we added properties that we want to persist,
// we should override these two methods to write/read those properties.
// Also, the MakeXElement override ensures the element is named “Instrument”.
public override XElement MakeXElement(XName n)
{
XElement e = base.MakeXElement(“BPT”);
e.Add(XHelper.Attribute(“Width”, Width, 50));
e.Add(XHelper.Attribute(“Height”, Height, 50));
e.Add(XHelper.Attribute(“Angle”, Angle, 0.0));
e.Add(XHelper.Attribute(“Id”, Id, “”));
e.Add(XHelper.Attribute(“Desc”, Description, “”));
return e;
}

public override void LoadFromXElement(XElement e)
{
base.LoadFromXElement(e);
Width = XHelper.Read(“Width”, e, 50);
Height = XHelper.Read(“Height”, e, 50);
Angle = XHelper.Read(“Angle”, e, 0.0);
Id = XHelper.Read(“Id”, e, “”);
Description = XHelper.Read(“Desc”, e, “”);
}
}

  1. The node template used in the State Chart sample is designed to have the text in the middle. It’s odd to want to move it interactively. I suppose it’s possible, but I don’t have an example for you.

  2. That should be controlled by the ResizeAdornmentTemplate combined with the Panel layout of the resized element. I think this is an example of one that just has two resize handles at the left and right sides:

<DataTemplate x:Key="HorizontalResizeAdornmentTemplate"> <go:SpotPanel> <Path go:SpotPanel.Spot="0.0 0.5" go:NodePanel.Figure="Rectangle" Width="6" Height="6" Fill="DodgerBlue" Stroke="Black" StrokeThickness="1" /> <Path go:SpotPanel.Spot="1.0 0.5" go:NodePanel.Figure="Rectangle" Width="6" Height="6" Fill="DodgerBlue" Stroke="Black" StrokeThickness="1" /> </go:SpotPanel> </DataTemplate>