Applying node template on drag start

GoJS
1

Hello,

I have created GoJS application similar to flowchart Flowchart but I have used html for left side drag area instead of GoJS palette.

Also I have created nodeTemplateMap but issue here is node template is applied only after I have dropped the node on canvas.

Is there any way to load node template on drag start ?

Thanks!

  • ranki
2

First, have you seen: HTML Drag and Drop, and external Clipboard pasting ?

There’s no “node template” that’s being dragged in that example, its just HTML. How is yours different? When does your GoJS node get created?

3

Simon,

Yes I’ve verified this example as well. my code will look like below.

HTML:

{<div class="draggable" draggable="true">node1</div>
 <div class="draggable" draggable="true">node2</div>}

JS

myDiagram.nodeTemplateMap.add("node1",
GO(go.Node, "Spot", nodeStyle(), {
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        GO(go.Panel, "Spot",
            GO(go.Picture, {
                source: 'icons.png',
                sourceRect: new go.Rect(3, 115, 105, 104)
            }),
            GO(go.TextBlock, "node1", {
                    stroke: '#fff',
                    name: 'Name',
                    wrap: go.TextBlock.None
                }
        ),
        makePort("T", go.Spot.Top, true, true),
        makePort("L", go.Spot.Left, true, true),
        makePort("R", go.Spot.Right, true, true),
        makePort("B", go.Spot.Bottom, true, true)
));

So once user has dropped node1 then the above node template will be applied to that node once it’s dropped on to the canvas. So, is there any way to apply this template on drag start.

Thanks !

  • ranki.
4

Simon,

Any update here ??

Thanks !!!

  • Ranki
5

That sounds like a problem that has nothing to do with GoJS. Presumably when you start the drag in your HTML there is not yet any interaction with GoJS.

Depending on the drag-and-drop code or library that you are using with HTML, you’ll need to figure out how to do that.

That is part of the reason that we offer the Palette class, after all.