(UTC)
  MindFusion Forums › Diagramming Components › JavaScript › Drag & Drop Panel Bar Items to Diagram !
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 [2] 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) Drag & Drop Panel Bar Items to Diagram ! (Read 23805 times)
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #15 - Sep 11th, 2019 at 7:52am
Print Post  
Hi,

This works for me in your application:
Code (Javascript)
Select All
this.canvas.nativeElement.addEventListener("drop", (args) => { console.log(["drop", args]);});
this.canvas.nativeElement.addEventListener("dragover", (args) => { console.log(["dragover", args]);});


That the Drag and Drop API is not part of the MindFusion.Diagramming librabry, but a native feature of HTML5. You can read more about it here or here.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #16 - Sep 11th, 2019 at 8:05am
Print Post  
Thank you so much Lyubo. I tried the same code. "dragover" is working for me. But "drop" is not working. Any idea?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #17 - Sep 11th, 2019 at 8:27am
Print Post  
As explained here: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_ope..., you need to indicate a valid drop target. Calling args.preventDefault() from your dragover handler should do it.
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #18 - Sep 11th, 2019 at 2:27pm
Print Post  
Thank you so much Lyubo. It works!  Cheesy
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #19 - Oct 4th, 2019 at 2:55pm
Print Post  
Hi,

I tried to drag and drop the element above. The dragged element is going above and above and able to drop above the (current) top of the canvas. I mean the other elements are scrolled down.

I don't want to move the diagram element above the top of the canvas. Is it possible to do by anyway?

Attached the screen shot.

Regards,
Kannan
  
Initial_Diagram.png (Attachment deleted)
Diagram_After_Drag_and_Drop.png (Attachment deleted)
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #20 - Oct 7th, 2019 at 7:22am
Print Post  
Did you had a chance to check this? Is there any diagram property to avoid this behavior or I've do write any specific code?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #21 - Oct 7th, 2019 at 12:16pm
Print Post  
Hi,

I'm having a hard time figuring out what exactly your issue is. Can you please clarify what you mean by "The dragged element is going above and above and able to drop above the (current) top of the canvas.". It would also help if you show your drag/drop code.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #22 - Oct 7th, 2019 at 12:35pm
Print Post  
I think when you see the two screen shots you can get the scenario. I tried to move the element from one location to another by drag and drop.

In the first screen shot there is little space between the diagram top and the comment "Mind Fusion Composite Nodes". When I tried to drag and drop an element and move the mouse cursor above that comment, the dragging element is able to move still above and the existing diagram element is moved down (please check the second screen shot). I don't want to drop above the diagram top. I mean the diagram top is changing and the diagram elements are moving down.

Sample uploaded to this location,

https://drive.google.com/open?id=1YHOZKN_kNfT4T-yDTPrMenW3SeGx0OD9
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #23 - Oct 8th, 2019 at 5:49am
Print Post  
Hi,

What you see is the expected behavior of the diagram, when you have set the following in your code:
Code (Javascript)
Select All
this.diagram.setAutoResize(MindFusion.Diagramming.AutoResize.AllDirections);
this.diagram.setAutoScroll(true);


The first property allows for the diagram to expand in all directions, when an item is being moved; the second allows the view to automatically scroll, when an item is being moved.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #24 - Oct 9th, 2019 at 9:52am
Print Post  
It works. Thank you.

But, when I move up or left, the element is moving and scrolling is happening. But, if I move right or down, element is not moving after some location. May I know where I'm wrong?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #25 - Oct 9th, 2019 at 10:17am
Print Post  
Hi,

The auto scroll feature is constrained withing the bounding rectangle of the diagram, which can be bigger than your current viewport - so the autoscroll will still perform if possible. If your current viewport is located at the bottom right of the diagram, you'll be able to scroll up and left. The AutoResize property controls whether the diagram can resize itself in response to a user interaction - what you were seeing before.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #26 - Oct 9th, 2019 at 11:52am
Print Post  
But after setting the below values also I'm not able to move (and scroll) the element right or down,

    // this.diagram.setAutoResize(MindFusion.Diagramming.AutoResize.RightAndDown);
    this.diagram.setAutoResize(MindFusion.Diagramming.AutoResize.AllDirections);
    this.diagram.setAutoScroll(true);

Please check the previous uploaded sample.
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #27 - Oct 10th, 2019 at 6:15am
Print Post  
Hi,

From what I found out in your sample application, the issue you were seeing was related to the splitter control you're using. I could get around it by setting a higher scrollZoneSize to the diagram.

Regards,
Lyubo,
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 284
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #28 - Oct 10th, 2019 at 8:47am
Print Post  
Hi,

I set the the same like below and tried, but still couldn't move the node after some location.

this.diagram.setScrollZoneSize(100);

I set the back brush to blue and taken screen shot and attached. Please check it.

I also noticed another behavior. I'm able to move (and scroll) down but not to the right. After moving down, sometimes it is possible to move right Sad

Regards,
Kannan
« Last Edit: Oct 10th, 2019 at 10:03am by Kannan Thirumal »  
Diagram-Move_Node-1.png (Attachment deleted)
Diagram-Move_Node-2.png (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Drag & Drop Panel Bar Items to Diagram !
Reply #29 - Oct 10th, 2019 at 11:36am
Print Post  
Hi,

If the diagram bounds are smaller than the viewport size (as it appears from your screenshot), you need to download the latest JsDiagram release - it was released yesterday https://mindfusion.eu/Forum/YaBB.pl?num=1570639838/0#0. A fix for that is included in that release.

Also, a 100 scroll zone size appears too much. For me it worked with 30px size.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 3 
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2026. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge