Pulling from a library diagram into another diagram - Behaviors

GoJS
1

Hi,

A couple questions…

We’re trying to move a step from a library area on the left into a diagram on the right and connect the new one to an existing one using the arrows. Ie. dropping it onto an arrow and then have it connect automatically.

We can’t figure out how to get the diagram on the right to register the drop event as the new step technically doesn’t exist yet in the diagram on the right. What is the best approach for something like this?

image.png845×648 72.3 KB

When we click and drag the step from the library it pulls the whole card, and then converts into the proper step in the diagram on the right. Is there a way to smooth out this jarring experience? To maybe have the image of the step on the right take over as the card representation when the click and drag begins?

Thanks,
Michael

2

I’m not sure what you’re asking for. Do you want an event that happens when the user drops something in the background of the diagram, rather than on some Part? If so, that’s Diagram.mouseDrop: Diagram | GoJS API. There are a number of examples of this in the samples.

In the second question, did you not want the text to be shown when dragging the node in the Palette? If so, I suppose you could try binding the TextBlock.visible property in the Palette’s node template:

      $(go.TextBlock,
        new go.Binding("visible", "layerName", function(name) { return name !== "Tool"; }).ofObject(),
        . . .)
3

I was hoping one of our devs would fill in the details, but here is the context to the best that I’m aware of.

The library (1) is one diagram filled with step templates and the canvas (2) on the right is the other. We would like to capture an event when a step is brought from the library (1) onto another step in the canvas (2). Either dropped onto the step itself or onto one of the arrows around the step as shown. My understanding is that the step being dragged from (1) isn’t technically in the diagram on the right (2) yet so on dropping nothing happens. We can get this behavior if we try and drag an existing step in (1) over another step in (1) but not between the two diagrams.

When dragging the node I just want the shape and not the whole card being moved. If the text became invisible I assume the whitespace of the card would still be moving though right. Is there a way on drag to sub out the representation for something else?

Thanks,
Michael

4

GraphObject event handlers mouseDragEnter, mouseDragLeave, and mouseDrop all are raised whether drags are started within the Diagram or from a different Diagram. The Flowgrammer sample demonstrates this.

The “ExternalObjectsDropped” DiagramEvent is raised only when the drag-and-drop started from another Diagram.

5

Thanks I’ll pass that information on. There may be follow-up as I assume they’ve tried some of these items.

For the issue of dragging the step out of the library… is there anything else that can be done beyond just making the text not visible or the transition seamless?

Our intention is that below the name we were going to show descriptive tags as well, but would refer that that whole unit stays where it is when a user clicks to drag and only the graphical representation of the shape is moved. Ideally the final shape that would appear in the diagram on the right would be what initially shows when you start the dragging from the library. Ie. to create a seamless transition from one to the other.

We can’t go with a step in the library that looks the same as the one in the diagram to sync them that way as we’ve received previous feedback that people have trouble understanding what each step signifies in the library with limited info.

Cheers,
Michael

6

I believe hiding those elements that you don’t want shown when dragging in the Palette is the easiest solution.

I even tried a more sophisticated version of what I showed you above – where instead of binding GraphObject.visible on the TextBlocks or whatever you want to hide, you used a different template, just within the Palette. This is a modification of Page Not Found -- Northwoods Software

  myPalette.nodeTemplate =
    $(go.Node, "Horizontal",
      new go.Binding("category", "layerName").ofObject(),
      $(go.Shape,
        { width: 14, height: 14, fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        new go.Binding("text", "color"))
    );

  myPalette.nodeTemplateMap.add("Tool",
    $(go.Node, "Horizontal",
      $(go.Shape,
        { width: 14, height: 14, fill: "white" },
        new go.Binding("fill", "color"))
    ));