Diagram questions

GoJS
1

I’m moving along nicely with GoJS but have a few hurdles right now.

  1. I have it creating the correct Node when double-clicking by setting the archetypeLinkData.category property. I have a PartCreated listener which needs to set additional properties on the node like text and key. I’ve tried using both e.subject.data.text and e.subject.text in the listener and neither works. I need to set some properties dynamically on the Node on creation using data from our app. How can I do this?

  2. I’m trying to make my grid lines 1px but they are 2px. Here is my code:

     diagram.grid = make('Panel', 'Grid',
     {
         gridCellSize: new go.Size(35, 35)
     },
     make('Shape', 'LineH',
         {
             stroke: '#c0c0c0',
             strokeWidth: 1
         }
     ),
     make('Shape', 'LineV',
         {
             stroke: '#c0c0c0',
             strokeWidth: 1
         }
     )
 );

  3. Is there a way to set default font properties for the diagram or does it need to be set on each part?

Thanks!

2
  1. You’re setting “archetypeLinkData” to customize the creation of the correct Node? I would hope you meant setting myDiagram.toolManager.clickCreatingTool.archetypeNodeData.

Yes, in the “PartCreated” DiagramEvent the e.subject.data ought to be the newly copied JavaScript object to which the new Node is bound. So setting properties on the data should be OK for what you want to do. Remember to call Model.setDataProperty in order for GoJS to know that you have modified the property, since there’s no reliable way for GoJS to be notified automatically. But you don’t need to conduct a transaction, since this DiagramEvent occurs within a transaction performed by ClickCreatingTool.insertPart.

  1. Yes, setting Shape.strokeWidth = 1 should result in one-pixel wide line. But due to anti-aliasing, two adjacent pixels could be drawn, depending on the actual position of the grid line, which in the case of Diagram.grid also depends on the Diagram.position and Diagram.scale.

  2. Yes, you need to set TextBlock.font on each of the TextBlocks that you make. Some day we will support CSS styling in order to control such things, but we haven’t designed that yet.

3

  1. Working like a champ. Is there a shortcut to setting a bunch of properties or does each one need set like this:

     diagramModel.setDataProperty(modelData, 'key', model.data.id);
 diagramModel.setDataProperty(modelData, 'text', 'My cool new node');

 diagramModel.setDataProperty(modelData, 'xxxxx', 'xxxxxxx');

 diagramModel.setDataProperty(modelData, 'yyyyy', 'yyyyyyy');

  2. I thought it might be anti-aliasing. Does canvas do that by default or can it be turned off for the grid lines?

  3. CSS styling would be a great enhancement. Our app uses SASS and Compass and would love to include the GoJS stuff in it.

4
  1. No, there isn’t such a shortcut, but you could easily define it yourself.
  2. Yes, that is the default. If you were to turn it off for grid lines, the lines might look unevenly spaced.

Thanks for the feedback. We may have options in the future to cover points 2 and 3.