Compatible way to convert xaml to gojs

GoJS
1

I had xaml file which i want to use as gojs , xaml file contain following

<go:BooleanBrushConverter x:Key=“pathStrokeChooser” TrueBrush=“Red” FalseBrush=“Black” />

<go:BooleanThicknessConverter x:Key="AnchorThicknessChooser" TrueThickness="1" FalseThickness="0" />
<go:BooleanBrushConverter x:Key="AnchorStrokeChooser" TrueBrush="Black" FalseBrush="Red" />
<DataTemplate x:Key="LConnectorTopRight">
    <go:SpotPanel
        go:Part.LayerName="Foreground"
        go:Part.SelectionAdorned="False"
        go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"            
        go:Part.Resizable="{Binding Path=Data.Resizable, Mode=OneTime}"
        go:Part.ResizeElementName="Container"
        go:Part.ResizeAdornmentTemplate="{DynamicResource NodeResizeAdornmentTemplate}"
        go:Part.Rotatable="{Binding Path=Data.Rotatable, Mode=OneWay}"
        go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}" 
        go:Part.RotateAdornmentTemplate="{DynamicResource NodeRotationAdornmentTemplate}"            
        go:Part.Reshapable="False">

        <ContextMenuService.ContextMenu>
            <ContextMenu ItemsSource="{DynamicResource NodeContextMenuTemplate}" />
        </ContextMenuService.ContextMenu>

Now i want to use same things in go js can i get some idea how i will do this

2

Something like:

  myDiagram.nodeTemplateMap.add("LConnectorTopRight",
    $(go.Node, "Spot",
      {
        layerName: "Foreground",
        selectionAdorned: false,
        resizeObjectName: "Container",
        resizeAdornmentTemplate: $(go.Adornment, . . .),
        rotateAdornmentTemplate: $(go.Adornment, . . .),
        contextMenu: $(go.Adornment, . . . )
      },
      new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
      new go.Binding("resizable", "resizable"),
      new go.Binding("rotatable", "rotatable"),
      new go.Binding("angle", "angle").makeTwoWay(),
      . . .
    ));

Converters are just JavaScript functions used in Bindings. GoJS Data Binding -- Northwoods Software

You’ll want to read all of the Introduction pages, GoJS Introduction -- Northwoods Software

3

Thanks walter, it help me

what about if Our xaml file have not start with go:

like this

        <Grid Name="Container" 
                  Height="{Binding Path=Data.Height, Mode=TwoWay}"
                  Width="{Binding Path=Data.Width, Mode=TwoWay}">
            <Grid>
                <FrameworkElement.ToolTip>
                    <TextBlock Text="{Binding Path=Data.Text}" />
                </FrameworkElement.ToolTip>

                <Viewbox Stretch="Fill"
                             RenderTransformOrigin ="0.5 0.5">
                    <Viewbox.RenderTransform>
                        <ScaleTransform ScaleX="{Binding Path=Data.ScaleX, Mode=OneWay}" />
                    </Viewbox.RenderTransform>
                    <Grid UseLayoutRounding="True">
                        <Path StrokeThickness="6.0" StrokeMiterLimit="1.0" Fill="{Binding Path=Data.Color, Mode=OneWay}" Data="F1 M 112.000,3.000 L 3.000,3.000 L 3.000,57.000 L 58.000,57.000 L 58.000,111.000 L 112.000,111.000 L 112.000,3.000 Z"/>
                    </Grid>
                </Viewbox>
            </Grid>

            <Rectangle Fill="Transparent" Margin="13" Cursor="SizeAll" />
        </Grid>

so, on the above how i will used DataBinding to do so

4

GoJS does not support scaling X without equally scaling Y coordinates in a “Viewbox” Panel (or generally), although one can do so for the Geometry of Shapes.

So I had to modify the code not to be a simple translation of the XAML. And I’m not sure what you really want to do, anyway. But here’s something that seems to be reasonable, even if it isn’t exactly what you want:

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        {
          layerName: "Foreground",
          selectionAdorned: false,
          resizeObjectName: "Container"
          //resizeAdornmentTemplate: $(go.Adornment, . . .),
          //rotateAdornmentTemplate: $(go.Adornment, . . .),
          //contextMenu: $(go.Adornment, . . . )
        },
        new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
        new go.Binding("resizable"),
        new go.Binding("rotatable"),
        new go.Binding("angle").makeTwoWay(),
        $(go.Panel, "Auto",
          {
            name: "Container",
            minSize: new go.Size(7, 7),
            toolTip: $(go.Adornment,
                       { background: "lightyellow" },
                       $(go.TextBlock, new go.Binding("text"))
                     )
          },
          new go.Binding("width").makeTwoWay(),
          new go.Binding("height").makeTwoWay(),
          $(go.Shape,
            {
              strokeWidth: 6,
              strokeMiterLimit: 1,
              geometryString: "F1 M 112.000,3.000 L 3.000,3.000 L 3.000,57.000 L 58.000,57.000 L 58.000,111.000 L 112.000,111.000 L 112.000,3.000 Z"
            },
            new go.Binding("fill", "color")
          ),
          $(go.Shape,
            {
              stretch: go.GraphObject.Fill,
              fill: "transparent",
              strokeWidth: 0,
              margin: 13,
              cursor: "move"
            })
        )
      );

Here’s an example usage, after resizing the green node:

This started from the following model:

    myDiagram.model = new go.GraphLinksModel([
      { key: "Alpha", resizable: true, rotatable: true, color: "green", text: "a tooltip string" },
      { key: "Beta", resizable: false, rotatable: false, color: "blue", text: "another tooltip" }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);
5

I am Trying to implement above based on my Requirement , here is what i had
var = go.GraphObject.make; myDiagram = (go.Diagram, “myDiagramDiv”, // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
allowDrop: true, // must be true to accept drops from the Palette
“animationManager.duration”: 800, // slightly longer than default (600ms) animation
“undoManager.isEnabled”: true // enable undo & redo
});

       myDiagram.nodeTemplateMap.add("LConnectorTopRight"),
        $(go.Node, "Spot",
          {
              layerName: "Foreground",
              selectionAdorned: false,
              resizeObjectName: "Container",
              //resizeAdornmentTemplate: $(go.Adornment, { locationSpot: go.Spot.Center, background: "transparent" }),
             // rotateAdornmentTemplate: $(go.Adornment, { locationSpot: go.Spot.Center, background: "transparent" }),
             // contextMenu: $(go.Adornment, { locationSpot: go.Spot.Center, background: "transparent" })
          },
          new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
          new go.Binding("resizable"),
          new go.Binding("rotatable"),
          new go.Binding("angle").makeTwoWay(),
          $(go.Panel, "Auto",
            {
                name: "Container",
                minSize: new go.Size(7, 7),
                toolTip: $(go.Adornment,
                           { background: "lightyellow" },
                           $(go.TextBlock, new go.Binding("text"))
                         )
            },
            new go.Binding("width").makeTwoWay(),
            new go.Binding("height").makeTwoWay(),
            $(go.Shape,
              {
                  strokeWidth: 6,
                  strokeMiterLimit: 1,
                  geometryString: "F1 M 112.000,3.000 L 3.000,3.000 L 3.000,57.000 L 58.000,57.000 L 58.000,111.000 L 112.000,111.000 L 112.000,3.000 Z"
              },
              new go.Binding("fill", "color")
            ),
            $(go.Shape,
              {
                  stretch: go.GraphObject.Fill,
                  fill: "transparent",
                  strokeWidth: 0,
                  margin: 13,
                  cursor: "move"
              }),
              $(go.Shape, "Rectangle",
                     {
                         fill: "transparent",
                         width: 7,
                         height: 7,
                         cursor: "hand",
                         //relinkableFrom: true,
                         //relinkableTo: true,
                         alignment: go.Spot.Center,
                         name: "R",
                         portId: "R",
                         spot1: new go.Spot(0.25, 0),
                         fromSpot: go.Spot.MiddleLeft,  // coming out from middle-right
                         toSpot: go.Spot.MiddleLeft
                     }, new go.Binding("strokeWidth"),
                         new go.Binding("stroke", "isSelected", function (s) { return s ? "dodgerblue" : "gray"; }).ofObject()
                      ),
                      $(go.Shape, "Rectangle",
                     {
                         fill: "transparent",
                         width: 7,
                         height: 7,
                         cursor: "hand",
                       //  relinkableFrom: true,
                        // relinkableTo: true,
                         alignment: go.Spot.Center,
                         name: "B",
                         portId: "B",
                         spot1: new go.Spot(0.75, 1),
                         fromSpot: go.Spot.MiddleBottom,  // coming out from middle-right
                         toSpot: go.Spot.MiddleBottom
                     }, new go.Binding("strokeWidth"),
                         new go.Binding("stroke", "isSelected", function (s) { return s ? "dodgerblue" : "gray"; }).ofObject()
                      )
          )
        );
      
        // temporary links used by LinkingTool and RelinkingTool are also orthogonal:
       myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
       myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

        //  myDiagram.model = myModel;
    myPalette =

$(go.Palette, “myPaletteDiv”, // must name or refer to the DIV HTML element
{
“animationManager.duration”: 800, // slightly longer than default (600ms) animation
nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ category: “LConnectorTopRight”, text: “LConnectorTopRight” }
])
});

and when i Run application it shows white empty screen
and when i debug using firebug it says b is defined i did understand what is this

here is attached screenshots

gojsError.png1920×1080 91 KB

6

it looks like there was some runtime Error i got , but cant debug reason for this,

please help on this

thanks

7

Use the go-debug.js library while developing – it catches many more programming errors than the release library.