jsplumb / katavorio Goto Github PK

it seems that it is being added at init time, along with the 'draggable' class. it shouldnt be. it should be assigned when drag starts and removed when drag stops.

We need to be able to support "nested" draggables: elements that are draggable in this instance of Katavorio and which manage a set of draggable elements. The exact details are unclear...this issue is a place to gather some thoughts.

There are a couple of things we know already:

• events from a nested draggable should include information about the nested draggable's parent element
• we'll probably want enough of an API to move nested elements around between draggable parents
• the key difference when dragging a nested draggable is that the given getPosition function (which is not a part of Katavorio; you plug it in) needs to be smart enough to report positions relative to the nested draggable's offsetParent. And so it may be the case that the getPosition function needs to be told about the offset parent.

I would like in jsplumb to be able to disable dragging of elements with the middle mouse button, so that dragging works only with the left button. Would it be possible to have an additional option in katavorio for enabling disabling middle mouse drag, e.g.

k.draggable(someElement, {
middleButtonCanDrag:true
});

Or if there is a better way to achieve this i'm all ears :)

In some cases it would make sense to disable dragging elements in jsplumb/katavorio temporarily. For example, in jQueryUI dragging can be disabled by using $( ".dragMe" ).draggable("option", "disabled", true ); and re-enabled using $( ".window" ).draggable("option", "disabled", false );
It would be useful to have a similar method in katavorio e.g. katavioInstance.draggable(someElement, {disabled:true})

(in case this is a functionality that would concern jsPlumb rather than katavorio, please drop a line in the comment. In this case, I'll close the requrest and recreate it in the jsPlumb issues)

It looks to me that currently snapThreshold is not respected if the grid is set.

In https://github.com/jsplumb/katavorio/blob/master/src/katavorio.js#L251 we see the following lines:

var tx = this.params.grid ? this.params.grid[0] / 2 : snapThreshold ? snapThreshold : DEFAULT_GRID_X / 2

Wouldn't it make more sense to do

var tx = snapThreshold ? snapThreshold : this.params.grid ? this.params.grid[0] / 2 :  DEFAULT_GRID_X / 2

in order to respect the snapThreshold when it is set? Right now there is no way of having a grid of 20px and a snapTheshold of 5px, because it will always take half of the grid size.

currently we support only one. need to support an arbitrary number. each element must be able to assume one of two roles in a posse: either a leader, which, when dragged, causes all the other elements in the posse to drag, or a follower, which drags independently but which is dragged when any leader in the posse is dragged.

came about as a result of issue #568 in jsPlumb - a connection intended for a Node inside a Group can in some cases end up on the Group, depending on the order in which the two objects are made droppable. Supporting the concept of ranking droppables will allow jsPlumb to always check Nodes before Groups, regardless of the order in which the objects are made droppable.

I am using vanilla jsPlumb which has katavorio as underlying library. And I faced with a problem that dblclick fires drag event two times.
See jsPlumb issue for more details

In our application, we have droppables inside draggables :

You can see a demo of the example here :

https://github.com/edi9999/katavorio

Active state:

Hover state :

it seems that the hover state is not triggered correctly.

Is is somehow possible to have droppables inside draggables without any issues ?

The offset is calculated with :

this.getPosition = function (el) {
            return [ el.offsetLeft, el.offsetTop ];
};

which seems to be [0,0] in our case, but the position of the element in the html is not 0,0 (that is the position to the parent element). I guess the getPosition is not correct, am I right ?

not entirely sure which ones to support, but the grid size/snap to grid are two requests from a user of jsplumb

from a jsplumb issue:

https://github.com/sporritt/jsPlumb/issues/353

jsplumb issue that depends on this:

https://github.com/sporritt/jsPlumb/issues/340

I am using jsPlumb to create 200 to 300 nodes on the canvas. After the initial rendering of nodes and connections, If I try to draw a connection from source to target I see there is a lag in seeing the actual connector move with my mouse pointer.
After doing a bit of digging I found out the lag is happening because of the following : as soon as I select the sourceEndpoint and move my mouse, in katavorio.js "this.moveListener" is called, which calls the this.mark function which in turn calls the _setDroppablesActive which is basically a foreach over all the node elements in my canvas, since I have not defined any scopes.

e.setActive(val) adds a class "jtk-drag-active" to all the node elements in the canvas which is super slow(causes noticeable lag) for anything above 150 + nodes.

Hi!

I'm trying to upgrade from jsPlumb 1.5.x to jsPlumb 1.6.4, and I'm getting trouble with multiple connections created per one drag-and-drop operation.

Looks like Katavorio tracks all intersecting droppable endpoints and fires the drop event on all of them, leading to multiple connections created per drop (my endpoints are close to each other). This may make sense in some use cases, but not in mine.

Is there a way to only fire the drop event on the endpoint actually dropped on (the one under the mouse cursor)?

raised in jsPlumb:

https://github.com/sporritt/jsPlumb/issues/385

...the main node has the class removed, but the others do not.

as non-delegate-drag.html example：

I have add onClick event：

d.id = "draggable_" + count++;
d.style.left = x + "px";
d.style.top = y + "px";
d.className = 'w';
+ d.addEventListener('click', () => {
+    console.log('clickkkkkk')
+ })
i.className = "inner";
d.appendChild(i);

when I dragStop the node element，click event fired。

So，how can I separate the dragStop event and click event?

There is a problem with scroll which can be seen in official demos: https://jsplumbtoolkit.com/community/demo/flowchart/index.html

Steps to reproduce:

1. Pick an endpoint and start dragging
2. Scroll up/down
3. Endpoint position is not updated and is out of sync with cursor.

I guess the source of that problem that katavorio doesn't bind to scroll event, only mousemove.
But I haven't found a good way to implement that in a PR.

Any help/thoughts?

Currently the code will fire a hover event on more than one target element, but in the event that the user drops, only one element will receive the drop event. So it would seem to make sense to also ensure that only one element's hover class is activated.

The larger question of whether or not multiple drops should be possible (probably) and if so, how would this work through the API, should be handled elsewhere.

Hello Team.
I am trying to establish connection between two HTML elements (DIV tag) using Drag and drop connection feature of jsPlumb. I am able to establish connection using Programmatic Connection but Not by using Drag & Drop connection feature.
Here is the sample code which i am using it.
function onLoadDesignMode()
{
jsPlumb.bind('ready', function () {
jsPlumb.Defaults.Container = $("#Page");
var exampleGreyEndpointOptions = {
endpoint:"Dot",
paintStyle:{ width:25, height:21, fillStyle:'#00ff00' },
isSource:true,
connectorStyle : { strokeStyle:"#ff00ff" },
isTarget:true
};
jsPlumb.addEndpoint('rect001', {anchor:"BottomCenter" }, exampleGreyEndpointOptions);
jsPlumb.addEndpoint('rect002', {anchor:"TopCenter" }, exampleGreyEndpointOptions);
});
}
By using above code, I am only able to establish End Points but not able to establish connection using Drag & Drop connection feature.
Note: I am using following version of jsPlumb: jquery.jsPlumb-1.5.5.js
I would really appriciate your helping hand.
Thnaks and Regards,
Milind

on both axes

would be nice to support checking each potential droppable when drag starts to see if it should be added to the list of active droppables (which is currently computed purely by matching scope with the draggable)

there's a reset method. all it does right now it empty out a bunch of array, not actually removing drag handlers from managed elements. It should - but optionally take a flag to not bother doing all of that, since it could be slow, and people may like to just throw the DOM elements away instead o unbinding everything from them.

Is there any possibility to scroll parent when dragged element is near parent edge?
Like in jQueryUI: https://jqueryui.com/draggable/#scroll.

I am using jsplumb which is using this plugin for dragging.
I want to abort dragging if let and top are less than zero.
I am doing this but I want to release mouse/abort drag too in if condition so one has to start drag process with mouse again.
how can i do this ? //params.drag.abortDragging();

       jsPlumbInstance.draggable($window, {
          handle: '.drag-handle',
          stop: function () {

          },
          drag: function (params) {
            var _left = params.pos[0];
            var _top = params.pos[1];          
            var _el = $(params.el);
            if (_left < 0) {
              _el.css('left', 0);
               //params.drag.abortDragging(); ??? how ??
            }
            if (_top < 0) {
              _el.css('top', 0);
               //params.drag.abortDragging(); ??? how ??
            }
          }
        });

Hi,
did just spend a lot of time wondering why my code does not work anymore till I realized that the reason was that npm updated jsplumb from 2.7.9 -> 2.8.8 which should normally not break anything. But with that upgrade is now also uses katavorio 1.2.0 instead of 0.9.1 which probably broke stuff after all.
Because before when multiple nodes were in a "DragSelection" it emitted not just multiple "start" and "drag" events (which is still does") it also did emit multiple "stop" ones. That, however, is not the case anymore.

Here the jsfiddles:

[email protected] & [email protected]:
https://jsfiddle.net/u139hytL/3/
Does get correctly emitted 3x

[email protected] & [email protected]:
https://jsfiddle.net/u139hytL/2/
Does just get emitted 1x

Anybody any idea? Thanks!

Need to be able to specify "groups" of nodes - when one is dragged, they all are - a sort of declarative short cut to the concept of multiple node dragging.

Rules

• any element may belong to only one group at a time. assigning an element to a group will remove it from its current group, if there is one
• when any element in a group is dragged, all of the elements in the group are dragged with it.
• groups are created automatically if they do not exist when the first element is added
• groups can be cleared and/or deleted

We are not talking about nested containers in this issue. That will be covered in a separate issue.

(in all these examples, element means a DOM element or an element ID. groupId means a string.)

• addToGroup(element, groupId) - creating the named group if it does not yet exist
• removeFromGroup(element, groupId)
• clearGroup(groupId)
• deleteGroup(groupId)
• listGroup(groupId)
• combineGroups(group1Id, group2Id) - group2Id will be deleted afterwards and all elements will belong to group1Id

Hallo
is there no way to change options after on runtime ?
I want to change the grid size.

are right clicks consumed when they shouldn't be?

the container being the parent element of the draggables.

• if an element is dragged outside of the container a dragExit event should be fired, and a class should be added to the container (and to the 'outside' element)
• if an element is dragged outside of the container and dropped, one of three things should happen:
  • if the element is dropped on some other katavorio container, control for the element should be passed to the katavorio instance controlling the given container. this means re-registering all Drags and Drops for the dragged element with the other Katavorio instance.
  • if 'revert' flag (or similar name) is true, the element should revert to its original location before the drag
  • if 'revert' is false and the element is not dropped on some other katavorio container, it should be left where it is.

Some other, slightly more hazy, requirements right now...the above setup works only if the user has set overflow:visible to the container. It is not likely that this will always be the case. In the event that overflow is not set to visible, one of two things could happen:

• we could clone the current node, append it to the body, and move on. in this case if the element was not dropped on some other katavorio we would have to act as if revert was set to true.
• we could ask the user for a proxy node to use while dragging outside of the container. The same rule about reverting position would apply.