Hi,

There's some built-in drag and drop support provided by NodeListView control. Try implementing your palette component using NodeListView instances, maybe one for each page in the palette. You can add your node instances to NodeListView and they will get cloned when you drag them to the diagram canvas.

Regards,
Slavcho
Mindfusion

Hi,

You can find an example of using the NodeListView control here: https://mindfusion.eu/samples/javascript/diagram/tutorial4.html, with its code available here: https://mindfusion.eu/samples/javascript/diagram/Tutorial4.zip.

This sample uses custom nodes that inherit from ShapeNode. Our JsDiagram package (https://mindfusion.eu/JsDiagramTrial.zip has a version of the same sample, but using CompositeNodes.

Regards,
Lyubo

P.S. I can't seem to run the recent samples you provide, it one above gives the following error: "Error: Can't resolve 'stream'".

Hi,

I added the code from Tutorial4 to my application. I can add those icons to the NodeListView (to the left side of the diagram) and do drag and drop to the canvas and the node gets created automatically in the canvas. But still couldn't add the icons to my panel-bar component.

Please check the attached screen shot (Panel Bar Item, "Level-0") and code in the below url,

https://drive.google.com/open?id=1_90t4FOYhWfkY3Qa0pvKoCZT0sydPBtE

Also another approach is: I'm able to add my icons to my panel bar (in the right side of the diagram). But I'm not able to drag and drop to the canvas. Is it possible to get an event when dragged the palette icon and drop the same to the canvas? Because it is not necessary to automatically add the dropped icon to the diagram. I can add the node in the diagram myself when an event is raised.

Regards,
Kannan

Lyubo wrote on Sep 2^nd, 2019 at 10:26am:

It is an image. That can be done by creating CompositeNode where we can use a template to define the node.

liza wrote on Sep 6^th, 2019 at 9:37am:

Hi,

To use drag and drop from other controls, you can try with the HTML Drag and Drop API. In short, you can set the draggable attribute of the diagram's canvas element to true, and then you can handle the DragOver and Drop events to create your nodes.

On your panel-bar component, you'll handle the DragStart event, to provide the node data that will be used to create the node later in the Drop event.

We have an example of that in the DragDrop sample that comes with the JsDiagram package. There you can see how to handle the drag/drop events, and in addition to that, a way to show an indication of the node, during the drag operation. The sample is available in the latest release: https://mindfusion.eu/JsDiagramTrial.zip, or online here: https://mindfusion.eu/javascript-demo.html?sample=drag-drop

Regards,
Lyubo
MindFusion

Hi,

The sample works fine for me (see attached screenshot). Are you seeing any errors in the browser console?

The TypeScript files are not transpiled to JavaScript, so you need to either use the provided Samples Visual Studio project, or use tsc to transpile the sample code before running it in a browser.

Regards,
Lyubo
MindFusion

Sorry, it is working now (previously when it was not working, I did some changes in the sample code and once undo, it works now). Thank you.

Kannan Thirumal wrote on Sep 10^th, 2019 at 6:53am: