Update bbox() values of the transform tool

Is it possible to update the bbox() values of the FreeTransform plugin dynamically, for instance if I change the stroke size on a dynamically I need to update the FreeTransform plugin to account for the increase in size.

I was thinking if I get the bbox() values of the I'm re-styling on the fly I could then pass these values to the plugin to resize the FreeTransform handles etc ...

Is this possible?

[ibrierley]

Have you tried the updateHandles() method ? Could you do a minimal jsfiddle if not ?

I have tried the updateHandles() method but it doesn't appear to have any effect in this scenario.

I've created a jFiddle demonstrating the issue here: https://jsfiddle.net/9qvwLss7

Click the rectangle or the text element to change the stroke or font size to a random value, note that the handles do not update.

[neilliang]

It's kind of the same issue with this one #2.

@neilliang yes, seems to be some cross-over between the 2 issues.

I tried using .unplug() to remove the free transform and then re-applying the free transform plugin to the same element but the handles start to get transformed.

See this jsFiddle for demo using .unplug() to remove the FT plugin, then re-applying it: https://jsfiddle.net/zL8ytjoo/

To see the issue: Drag a corner of the rectangle or text element to make it much larger, click the rectangle or text element, handles are now larger than the size set (as is the dashed line around the element).

[neilliang]

Yes, the handle's size is also discussed at #2.
The handle size is an issue. It's need to be fixed if @ibrierley has time for this.

[ibrierley]

Not sure it's the same issue (not saying there isn't a separate one tho as per other thread). I think the issue with this case if I'm understanding it right, is that SVG doesn't take into consideration stroke widths on bounding boxes.

Problem with this, is that I think it's quite hard to do (it may seem easier for a rect, but then when you get to complex paths it will get fiddly).

I'll have a think though if there are any workarounds.

Yes exactly that @ibrierley, for instance with a text element changing the font size of the element does not updated the bounding boxes.

I was wondering if there was a way to get the new dimensions of the text element and then pass those back to the FT plugin and get it to update the bounding box. However experimenting I've not be able to do so, I even tried overwriting the .bbox values for the FT plugin with the new .bbox values of the text element but couldn't get the FT plugin to act on those updates.

Appreciate the prompt replies, thanks.

[ibrierley]

Only quick workaround I can think of, is something to scale the bbox outwards by choice. Just testing an example at http://svg.dabbles.info/fttest/test1.html which introduces an extra option of bboxScale (at 1.5). Not sure if that would be useful. It's untested, quite possibly buggy :), so I'm not going to commit it to dev or anything atm.

I think there is still a bug related to the other issue mentioned (with the transform not quite being in sync with a handle drag), but I'm finding it difficult to reproduce consistently, but if you can find it and reproduce it, let me know.

Hmm scale bboxScale might work for our case, if we could update it based on the new scale of the element - if I can remember to how to calculate the scale of the element from the matrix.

The handle size being inconsistent is one of the main issues for me, if I could .unplug() then re-init the element with the FT plugin without the handles transforming I'd be winning.

Thanks for this.

[ibrierley]

Hmm I think if I'm understanding you right, it will still resize it (ie that's based on the bbox + bboxScale rather than just bboxScale), and that will still vary if you readd it, if that makes sense.

I'm maybe misunderstanding a little though, are you trying to get a consistent size handle across various displayed elements that never changes (so every handle is always the same size whatever), or just so when you double click it, it doesn't change the size ?

Ah ok, yes to clarify; I'd like the same handle size across various elements that never changes - so every handle is always the same size - whatever.

I don't want the handle size to scale/transform, I'd like it to be fixed.

[ibrierley]

Ok, makes perfect sense actually. I think some bits would need a major rewrite, which makes sense, just being honest, I don't have time to do just atm. I will have a think though, just don't want you reliant on a quick fix, so you may want to look at an alternate solution.

No worries dude your comments so far have been helpful - any pointers or suggestions for places to start?

[ibrierley]

Nothing specific that does everything already that I'm aware of..there's a few part solutions that may be of use depending on your requirement.

There is snap svg pan zoom https://github.com/hueitan/snap.svg.zpd I'm not sure if it has handles to rotate, but it's a long time since I've looked.

The original Raphael freetransform possibly works better if converted or if you are happy working with Raphael (it avoids certain issues as it was backwards compatible, but you may need to work on importing files, I think there is a plugin, but I assume it would have problems with svg groups for example).

If you are happy to dive in, you could take a look at the github stuff here and amend, but it takes a lot of getting your head around, as I didn't code it originally, just tried to convert it, one of the older versions before the extra transform stuff was added could be useful, but I think there's possibly issues either way.

I also started a Snap toolkit to help with transform stuff at http://svg.dabbles.info/snaptoolkit/snappan.html and https://github.com/ibrierley/snaptoolkit it doesn't have handles (other than 2 circles) but I did try and write it originally so it would work with hammer.js (so would work with all touch stuff), and write it so it's easy to add ones own stuff (ie a toolkit rather than a solution). It probably has bugs as well tho!

The other possible solution if you're not set on svg, but want something very close, is fabric.js which has good handle support built in, and tries to do canvas in svg format.

[ibrierley]

Actually, it may be worth your while trying setting the bboxScale to a sort of inverse value based on the objects bounding box or something (i.e the bigger it is, the smaller the scale you want) and doing an updateHandle(). I think it will be a bit buggy and inconsistent maybe, but it depends on your needs.