Ability to select items inside a shape

GoJS
1

Hello:

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

2

Re: #1, I found this sample: Record Mapper 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: Icons GoJS Sample, but does it apply in this case as well?

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

Thanks

PS. The link Page Not Found -- Northwoods Software (it is on the records page) is broken.

3

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
    },
....
4

Sorry about the broken link. It should be referring to Mapping Selectable Fields of Records

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.

5

Regarding your other questions:

  1. See also the samples: Dragging Fields Between Records and Dragging a Field from a Record onto an HTML Element. 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 Text Editing Examples

  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 Euler Diagram.
    For HTML tables, you can use GoJS Table Panels. Consider this sample: GoJS Spreadsheet

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