Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) [Typescript/Angular2] Drag and drop between external sources using Container nodes (Read 6250 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
[Typescript/Angular2] Drag and drop between external sources using Container nodes
Mar 30th, 2017 at 1:50pm
Print Post  
I am using Mindfusion Typescript diagram-library.
I would like to know if there is an Event for drag and drop with regards to container nodes? I would like to drag the container node into an external tree, and likewise drop into container nodes.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #1 - Mar 31st, 2017 at 5:53am
Print Post  
By external tree do you mean a separate tree component on the page, or a part of same diagram arranged as a tree outside of container ?
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #2 - Mar 31st, 2017 at 8:11am
Print Post  
It is a separate tree component on the page. It is not a part of a diagram.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #3 - Mar 31st, 2017 at 11:08am
Print Post  
Attached sample shows how you could drag from tree to containers using HTML5 drag API. Unfortunately it doesn't seem possible to trigger this from code to use same API in the other direction. It should be possible to implement drag from container to external controls by handling page mouse events after nodeModifying is raised, we'll try it later.
  

DragDrop.zip ( 1 KB | 276 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #4 - Mar 31st, 2017 at 1:24pm
Print Post  
See if approach from attached sample will work for you for dragging from containers to external controls using HTML5 API. It has a Toggle Drag check box that sets the Draggable property of Canvas element to true and Enabled property of diagram to false so it won't respond to mouse messages. If you want to start drawing in the diagram again, disable the checkbox to toggle those properties. Instead of checkbox, you could probably toggle the mode in response to key-down events raised for some modifier key.

Regards,
Slavcho
  

DragDrop_001.zip ( 2 KB | 144 Downloads )
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #5 - Apr 4th, 2017 at 11:55am
Print Post  
Hi, I was able to drag from tree to the container node with your example. But the method setEnabled(bool) is not available in the Diagram. So it is not possible to drag from the container node to tree/other external events. Can I have an update so that this API is available?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #6 - Apr 4th, 2017 at 1:35pm
Print Post  
It should be available in JavaScript code, but I can see it's missing from d.ts file. You can add this to Diagram definition there for time being -

Code
Select All
getEnabled(): boolean;
setEnabled(value: boolean): void; 



We'll post updated d.ts with a new version of the diagramming.js in next few days.
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #7 - Apr 10th, 2017 at 2:13pm
Print Post  
The setEnabled API works but the problem is that if we do setEnabled(false), the expand/collapse (setFoldable) of a node does not work anymore. Is there any workaround for this?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #8 - Apr 11th, 2017 at 11:57am
Print Post  
You could check from mouse-down handler whether the mouse points to a manipulator object (what we call things like container fold icons and tree collapse icons), and set Enabled to true when it does so the diagram still processes mouse click message, and back to false when it does not so the drag-and-drop API works. Attached sample shows that, and includes some new Typescript definitions you might need for the code.

Code
Select All
function getLocalPoint(e)
{
	// Get the relative coordinates
	var offset = $('#diagram').offset();
	var x = (e.pageX - offset.left) + $(window).scrollLeft();
	var y = (e.pageY - offset.top) + $(window).scrollTop();

	return diagram.clientToDoc(new Point(x, y));
}

function getNodeUnderCursor(e)
{
	var localPoint = getLocalPoint(e);
	return diagram.getNodeAt(localPoint, true, true);
}

function onDiagramMouseDown(e)
{
	if ($('#chbDragMode')[0].checked == false)
		return;
	var node = getNodeUnderCursor(e);
	if (node)
	{
		var localPoint = getLocalPoint(e);
		var manipulator = node.hitTestManipulators(localPoint);
		if (manipulator != null)
		{
			diagram.setEnabled(true);
			$('#chbDragMode')[0].checked = false;
		}
	}
} 



Regards,
Slavcho
  

DragDrop_002.zip ( 30 KB | 189 Downloads )
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #9 - May 16th, 2017 at 1:06pm
Print Post  
Please make the toDataURL property available for Diagram. I am unable to create a ghost image during drag operation.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: [Typescript/Angular2] Drag and drop between external sources using Container nodes
Reply #10 - May 17th, 2017 at 6:36am
Print Post  
It's not a method of the Diagram class but of its backing Canvas element -

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
http://typescript.codeplex.com/sourcecontrol/latest#typings/lib.d.ts

You should be able to call it like -

Code
Select All
var canvas = <HTMLCanvasElement> document.getElementById("diagramCanvas");
var dataUrl = canvas.toDataURL(); 

« Last Edit: May 17th, 2017 at 8:12am by Slavcho »  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint