(UTC)
  The MindFusion Forums › Flow Diagramming Components › ASP.NET MVC › Drag Icon for Nodelistview
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Drag Icon for Nodelistview (Read 3166 times)
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Drag Icon for Nodelistview
Oct 19th, 2013 at 8:07pm
Print Post  
Hi,

When i drag an item from the nodelistview, i need to show the dragging shape also along with the mouse cusor.

Is there any solution for this?

Thanks
kiran B
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Drag Icon for Nodelistview
Reply #1 - Oct 21st, 2013 at 8:37am
Print Post  
Try this

Code
Select All
window.onload = function ()
{
    $addHandlers(document, { mousemove: onMouseMove });
}

function onMouseMove(e)
{
    var nodeList = $find('nodeListView1');
    var canvas = document.getElementById('shapeCanvas');
    var node = nodeList.draggedNode;

    if (node)
    {
        if (!canvas)
        {
            canvas = document.createElement('canvas');
            canvas.id = "shapeCanvas";
            canvas.width = 20;
            canvas.height = 20;
            canvas.style.position = "absolute";

            document.body.appendChild(canvas);

            var context = canvas.getContext('2d');
            context.drawImage(nodeList.get_element(), node.bounds.x, node.bounds.y, node.bounds.width, node.bounds.height, 0, 0, 20, 20);
        }

        canvas.style.left = e.clientX + 5 + 'px';
        canvas.style.top = e.clientY - 20 + 'px';

    }
    else
    {
        if (canvas)
        {
            canvas.parentNode.removeChild(canvas);
        }
    }
}


I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Re: Drag Icon for Nodelistview
Reply #2 - Nov 7th, 2013 at 7:16pm
Print Post  
Hi Stoyan,

I got a better solution.

Code (Javascript)
Select All
MindFusion.Diagramming.NodeListView.custom_DragClassName = "clsDrag";
                MindFusion.Diagramming.NodeListView.custom_DragNodeListName = "dragNodeListView";

                MindFusion.Diagramming.NodeListView.prototype.custom_showDragIcon = function (h) {

                    var dragClassFilter = "." + MindFusion.Diagramming.NodeListView.custom_DragClassName;
                    var dragNodeListName = MindFusion.Diagramming.NodeListView.custom_DragNodeListName;
                    var text = "";
                    if (this.draggedNode != null) {
                        text = this.draggedNode.shape.id;
                    }
                    if ($(dragClassFilter).length == 0) {

                        $("body").append("<div class='" + MindFusion.Diagramming.NodeListView.custom_DragClassName + "' style='position:absolute;vertical-align:middle;'><table><tr><td></td><td><canvas id='" + dragNodeListName + "' width='140'></canvas></td></tr></table></div>");

                        var nodeListView = $create(MindFusion.Diagramming.NodeListView, null, null, null, $get(dragNodeListName));

                        $(dragClassFilter).hide();

                    }
                    if ($(dragClassFilter).is(':visible') === false) {
                        var dragNodeListView = $find(dragNodeListName);

                        dragNodeListView.clearAll();

                        for (var i = dragNodeListView.elements.length; i >= 0; i--) {
                            dragNodeListView.removeElement(dragNodeListView.elements[i]);
                        }
                        dragNodeListView.invalidate();

                        var draggedNodeClone = this.draggedNode.clone();

                        dragNodeListView.addItem(draggedNodeClone);
                        dragNodeListView.addBox(draggedNodeClone);
                        dragNodeListView.addCaption(draggedNodeClone, draggedNodeClone.shape.id);
                        //$(".clsShapeName").text(text);

                    }

                    $(dragClassFilter).show();
                    var j = $find(h.target.id);
                    if (j != null) {
                        //var l = MindFusion.Diagramming.Utils.getCursorPos(h, j.get_element());
                        console.log(j.constructor.__typeName);
                        if (j.constructor.__typeName === "MindFusion.Diagramming.Diagram") {
                            //h.target.style.cursor = "move";
                        }
                        else {
                            console.log("Not Allowed");
                            //h.target.style.cursor = "no-drop";
                        }
                    }
                    else {
                        console.log("Not Allowed");
                        //h.target.style.cursor = "no-drop";
                    }

                    $(dragClassFilter).css("top", h.clientY + 4);
                    $(dragClassFilter).css("left", h.clientX);
                };

                MindFusion.Diagramming.NodeListView.prototype.custom_hideDragIcon = function (h) {
                    var dragClassFilter = "." + MindFusion.Diagramming.NodeListView.custom_DragClassName;
                    var dragNodeListName = MindFusion.Diagramming.NodeListView.custom_DragNodeListName;
                    this.custom_isDragging = false;
                    //$(dragClassFilter).remove();

                    $find(dragNodeListName).clearAll();
                    $find(dragNodeListName).invalidate();

                    $(dragClassFilter).hide();
                    $(dragClassFilter).css("top", 0);
                    $(dragClassFilter).css("left", 0);
                };

                var onMouseLeftButtonDown = MindFusion.Diagramming.NodeListView.prototype.onMouseLeftButtonDown;
                MindFusion.Diagramming.NodeListView.prototype.onMouseLeftButtonDown = function (h) {
                    this.custom_isDragging = true;

                    //MindFusion.Diagramming.NodeListView.callBaseMethod(this, "onMouseLeftButtonDown", [h]);
                    onMouseLeftButtonDown.apply(this, [h]);
                };

                var onMouseLeftButtonUp = MindFusion.Diagramming.NodeListView.prototype.onMouseLeftButtonUp;
                MindFusion.Diagramming.NodeListView.prototype.onMouseLeftButtonUp = function (h) {
                    if (this.custom_isDragging !== undefined) {
                        this.custom_hideDragIcon(h);
                        h.target.style.cursor = "auto";
                    }
                    onMouseLeftButtonUp.apply(this, [h]);
                };

                var onMouseMove = MindFusion.Diagramming.NodeListView.prototype.onMouseMove;
                MindFusion.Diagramming.NodeListView.prototype.onMouseMove = function (h) {

                    if (this.custom_isDragging !== undefined && this.custom_isDragging === true) {
                        this.custom_showDragIcon(h);
                    }
                    onMouseMove.apply(this, [h]);
                };


Thanks
Kiran B
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Drag Icon for Nodelistview
Reply #3 - Nov 7th, 2013 at 8:05pm
Print Post  
It looks nice Smiley You could shorten the code a bit by replacing the addItem, addBox, addCaption (internal functions) calls with a single addNode. Also with latest version you should no longer need to call removeElement after clearAll().
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

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

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge