Issue with Resize and alsoResize

Will Comeaux

unread,

Dec 12, 2019, 1:46:23 PM12/12/19

to jsPlumb

Hello all:

I have an element that contains a child svg (rect+text). When I try to resize it I am getting an error:

The latest jsPlumb.js is bundled into a vendorbundle.js file. Other things work fine (drag+drop, connections, etc).

My block is defined like this:

<text version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="100" text-anchor="middle" x="50" y="50" class="blockPart" dominant-baseline="central">Base Block</text>

</svg>

</div>

In my resizable start function I am trying to assign all children nodes that are blockPart to also have a resizableChild class. Doing this because I'm cloning an item on drag+drop and only want the resizable class during the resize event, otherwise ALL elements get resized.

Like this:

start: function (event, ui) {

$(ui.helper).find('.blockPart').each(function (i, item) {

console.log("blockPart: " + item);

var $item = $(item);

if ($item.hasClass('blockPart') && item.hasAttribute('width')) {

console.log("hasClass:true");

$item.addClass('resizableChild');

}

});

},

stop: function (event, ui) {

$(ui.helper).find('.blockPart').each(function (i, item) {

var $item = $(item);

if ($item.hasClass('resizableChild')) {

$item.removeClass('resizableChild');

}

});

}

Here is the actual error:

Uncaught TypeError: Cannot read property 'width' of undefined

at String.<anonymous> (vendorbundle.js:19807)

at Function.each (vendorbundle.js:365)

at SVGSVGElement.<anonymous> (vendorbundle.js:19806)

at Function.each (vendorbundle.js:365)

at jQuery.fn.init.each (vendorbundle.js:137)

at jQuery.fn.init.resize (vendorbundle.js:19800)

at Object.call (vendorbundle.js:12149)

at $.<computed>.<computed>._propagate (vendorbundle.js:19525)

at $.<computed>.<computed>._propagate (vendorbundle.js:12260)

at $.<computed>.<computed>._mouseDrag (vendorbundle.js:19190)

The error happens when I try to resize, if I clear out the alsoResize property the error stops. Something in the context of "alsoResize" seems to be null, but I don't see what. The console output has what is expected - aside from the unexpected error:

toolPart: [object SVGSVGElement]

hasClass:true

toolPart: [object SVGRectElement]

hasClass:true

toolPart: [object SVGTextElement]

hasClass:true

Any ideas?

Thanks!

Will

Will Comeaux

unread,

Dec 12, 2019, 3:38:31 PM12/12/19

to jsPlumb

This fiddle shows an example:

https://jsfiddle.net/yfo35ukg/1/

The issue seems to be with line 9:

$item.addClass('resizableChild');

If I simply add the class resizableChild statically to the image div, it all resizes properly. But when I add it in the resize start event is when the error happens.

Something going on within jsPlumb that's treating the element differently depending on how/when the class is added?

Simon Porritt

unread,

Dec 13, 2019, 3:03:24 AM12/13/19

to jsPlumb

What does this fiddle show? There are no connections between any elements and it seems to resize ok.

--
You received this message because you are subscribed to the Google Groups "jsPlumb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsplumb+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsplumb/3854aad5-5e66-4612-8663-4ff988d680a2%40googlegroups.com.

Will Comeaux

unread,

Dec 13, 2019, 8:29:52 AM12/13/19

to jsPlumb

Hi Simon:

The first time you try to resize it there are a couple of errors that appear in the console and it doesn't resize. In that fiddle you have to click a second time on the drag ui and yes, it does drag then. I didn't notice the behavior in the fiddle.

In my actual project I also have a resize:stop method where I remove the resizeableChild class from the elements being resized. Otherwise the class ends up on all the elements and resizing one resizes them all.

I've updated this fiddle with the resize:stop and it now behaves just like my local. If you watch the console on resize you will see the errors pile up.

https://jsfiddle.net/ptjfc7z1/1/

You mentioning that it "worked" pointed out something though, On mousedown (resize:start) the class gets added to the dom (I can see it), but it doesn't seem like the resize function sees it there *yet*. If I leave it there and start the resize again, then it sees the class and resize can happen. But that, in practice, isn't happening in my code because I remove the css class on resize:stop. Some kind of timing issue between when the css class is added to the dom and when the resize can actually use it?

Thanks,

Will

Will Comeaux

unread,

Dec 13, 2019, 10:31:47 AM12/13/19

to jsPlumb

I have a different approach that gets around the issue.

Instead of dynamically assigning the classes on drag:start, I can just make the parent id of the element resizable and then

alsoResize: '#<idOfTheParent> * :not(.ui-resizable-handle)'

Seems to work, so far.

Simon Porritt

unread,

Dec 13, 2019, 11:15:30 AM12/13/19

to jsPlumb

The thing is that there's no jsplumb going on in this fiddle. The errors are all from jquery ui:

--
You received this message because you are subscribed to the Google Groups "jsPlumb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsplumb+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jsplumb/9441759f-86e8-44db-b94c-678eb2d1807e%40googlegroups.com.

Will Comeaux

unread,

Dec 17, 2019, 1:07:45 PM12/17/19

to jsPlumb

Thanks Simon, sorry, with the bundling I didn't realize that and just thought the resizable was part of jsplumb in a similar way to jsPlumbInstance.draggable.

To unsubscribe from this group and stop receiving emails from it, send an email to jsp...@googlegroups.com.

Reply all

Reply to author

Forward