Ability to select items inside a shape


I am currently evaluating GoJS for a project.

You have a sample that displays an UML classes diagram.

I have a few questions related to this:

  1. Is it possible to allow the user to select or highlight a property inside the rectangle that represents a class? If yes, could you please point me to sample or indicate how this would be achieved? The reason I am asking about this is that, the user could select a property and drag it to another class to copy or move or link it there. Would this be doable?
  2. In the same sample when I click on the type of a property, let’s say, an editor is displayed. Can I override the editor and display a combobox or some other component instead?
  3. Can HTML be placed inside a shape, i.e. can I have a link or or even an html table inside a shape? I’ve seen a sample that adds some webgl stuff inside a shape, but I didn’t find one that would add HTML.
  4. Last but not least, do you offer discounts to individuals/small businesses for a commercial license?

Thank you

Re: #1, I found this sample: http://gojs.net/latest/samples/records.html where one could click and drag a field to link it to a field in the other table. I have two questions about this sample:

1.1 I changed the sample code and I made the tables movable. However, when I move them, the links remain connected to the same ports instead moving dynamically to the other side. They are drawn on top of the tables which looks messy. Is it possible to change the links dynamically to the proper side?

1.2 Is it possible to use custom shapes instead of the standard shapes (circle, square) associated with the fields? I read this article: http://gojs.net/latest/samples/icons.html, but does it apply in this case as well?

Let me know if you have another sample or other explanations.


PS. The link http://gojs.net/latest/samples/recordsSelectable.html (it is on the records page) is broken.

1.1 I figured it out. I changed the fromSpot and toSpot properties to go.Spot.LeftRightSides and it does the trick.

var fieldTemplate =
  $(go.Panel, "TableRow",  // this Panel is a row in the containing Table
    new go.Binding("portId", "name"),  // this Panel is a "port"
      background: "transparent",  // so this port's background can be picked by the mouse
      fromSpot: go.Spot.LeftRightSides,  // links only go from the right side to the left side
      toSpot: go.Spot.LeftRightSides,
      // allow drawing links from or to this port:
      fromLinkable: true, toLinkable: true

Sorry about the broken link. It should be referring to http://gojs.net/latest/samples/selectableFields.html

I’m glad you figured out about the fromSpot and toSpot values. We should do exactly what you did in this Selectable Fields sample, because that sample does allow the user to move the nodes.

Regarding 1.2, yes that Icons sample just shows you a different way of using the Shape class. The field-mapping Records samples set or bind the Shape.figure property, but you could set or bind the Shape.geometryString or the Shape.geometry property.

You can also define your own Shape figures via the static function Shape.defineFigureGenerator.

Regarding your other questions:

  1. See also the samples: http://gojs.net/latest/samples/dragDropFields.html and http://gojs.net/latest/samples/dragOutFields.html. Basically you should be able to do whatever you want, but there are so many ways to design an app, we cannot possibly provide examples of most of them. Even though I think we provide more (and more different) kinds of samples than all of the other diagramming libraries.

  2. Yes, take a look at http://gojs.net/latest/samples/customTextEditingTool.html

  3. No, one cannot embed HTML into a diagram. But it’s easy to create an Anchor element – at the minimum, just implement a GraphObject.click event handler that opens a window. This is demonstrated by the sample http://gojs.net/latest/samples/euler.html.
    For HTML tables, you can use GoJS Table Panels. Consider this sample: http://gojs.net/latest/samples/spreadsheet.html

  4. Talk with Jason, gosales at our domain (nwoods.com).