Fabric.js: release v4 tracker

[asturur]

• [x] Fix the textbox handlers for width, they do not work with scale
• [x] Update the clipping demo in demos/ to make use of clipPath
• [x] Try to make work the example with the polygon point editing
• [x] Write a descriptive documentation of the new api
• [x] Add example for clone control
• [ ] Make an example with the different kind of positioning ( offsets, withConnection, outof bounding box)
• [x] Fix positioning of offsetX in controls, is wrong.
• [ ] ~Verify every control has the right size~ // this won't be done. Can be a follow up
• [ ] Semplify the control interaction area with a circle.
• [X] fix issue #6201

[onassar]

Has clipTo been deprecated in 4.0.x?

[asturur]

it was deprecated in 2.0, removed in 4.0

[onassar]

What should be used instead?

On Sat, Feb 29, 2020 at 12:49 PM Andrea Bogazzi [e-mail]
wrote:

it was deprecated in 2.0, removed in 4.0

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/fabricjs/fabric.js/issues/6159?email_source=notifications&email_token=AAEVUSQVUIFIC5ZKWUCX4SLRFFFEHA5CNFSM4KWFSTFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENMA6SI#issuecomment-592973641,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAEVUSQJBP2HW6QTPLNUAN3RFFFEHANCNFSM4KWFSTFA
.

>

—
Oliver Nassar

[asturur]

clipPath property on the object.

clipTo has been deprecated because:

• required functions to be be serialized/unserialized, with relevant security problems
• could not exported to svg
• could not be nested

clipPath on the other hand is sometimes slower and still suffer from blurry edges

[onassar]

clipPath is slower? Do you have examples of how to use it?

[asturur]

http://fabricjs.com/clippath-part1

Those are the tutorials we have, follow the links there are 4 pages.

[onassar]

Okay thanks!

[onassar]

Hi @asturur
I've found a number of SVG parsing bugs in 4.0.0-beta.7. I'd be happy to catalogue them all, but I don't know where to do that (and don't want to annoy you).

1. What process would you like me to follow for that?
2. Will 4.0.0 be actively worked on? I'm worried about integrating it into our project whereas 3.6.1 might be more stable.

Thanks!

[asturur]

To catalogue a svg parsing bug:

• search if is already described in an issue ( it can be super old or closed )
• if is not, open a new issue.
• in both cases, old or new issue, find an SVG that trigger the bug and post it in the issue.

Version 4 should be actively worked on, it has a bug on the textbox handlers, a bug on using offsetX on custom controls, and also is missing the scalingFlip behaviour.
Those are the bug i know of,

[onassar]

Okay. The reason I asked was because the SVG worked fine in the Kitchensink demo, but not with 4.0.0-beta7. I'll create a fiddle to test things, and then open new issues.

[onassar]

Is there any way to fix the blurriness with clipPath? I'm upgraded to 4.0.0 and the blurriness is quite powerful sometimes.

[asturur]

yes can be fixed of course. is a matter to let the clippath know how much the object is zoomed. ideally is simple, for some reason is harder with nested clippaths

[onassar]

okay let me know when you have a fix and i'll test it. i use vectors a lot in our app, so i can test this very extensively with all sorts of vectors (sprites, colored, etc)

[arcatdmz]

Regarding #4885 -- now I think it would be great if I can publish the pressure-sensitive brush by the time v4 is released. When would you plan to release it?

[asturur]

fixed the textbox control in v4. with #6219

[danielsfirnaciuc]

Hi @asturur
I want to ask you if you have still planned for the 4.0 release the image filters to Text objects 😄

[AdamMadrzejewski]

Would be good to have a breaking changes page from version 3 to version 4.

There was also a recent discussion about clipPath on StackOverflow with some high number of votes. Seems there is a little of confusion about using clipPath as replacement to clipTo.

I've created a SandBox from the original clipTo demo to work on beta-8 version. Anyway I can't get it animated https://codesandbox.io/s/stackoverflow-60664120-fabric-js-400-beta8-mi0y7

[asturur]

the breaking changes are all collected in the changelog for now, and a page could be done.
For 4.0 only the controls are released, we can introduce the filters on objects as soon as 4.0 is done, they would be a new feature and not a breaking change. FIlters for images would continue to work as usual.

[shaktippatel]

"object:scaling" event not return target object in Version 4.0.0-beta.9

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[asturur]

i think b11 is defintely fixing the control positioning that i wasn't able to make it work in every situation with b8-9-10.

[asturur]

I have still some doubt the interface chosen is the best. The problem is balancing how much code run for each control versus how useful and versatile is the information you get in the positionHanlder to write your own.

One example is padding. Padding is automatically considered by internal fabric code.
If you want to have padding on object and some control that is not influenced by padding ( because for example is positioned over polygon points ) you have to write your own position handler, and that is ok. But at that point all the calculation done by fabricJS are not useful for you, you have to do them from scratch and you will be doing them for each control more than once per control set.

We are talking about very few scripting time, but still i always try to do something that is not too much blunt.
This time i had to choice for working versus i cannot make it to work at all.

[asturur]

Refixed lockScalingFlip

[bbernhard]

Hi,

first of all: It's really great to see that much development on fabric.js. I've started using fabric.js with version 1.x and now - a few years later - the major version is already at 4. Awesome work!

The thing that I am most excited about, is the controls API. I've seen this example here and it really looks impressive - can't wait to give that a try. Not sure if this is the right place to ask this question, but: Is it also possible to "build up" a polygon with points? e.g something like that:

I've mimicked that behavior with fabric.js v1.x about 3 years ago and while it is still working, I would like to get rid off that code when migrating to v4 as it's hard to maintain and doesn't perform that well with big polygons (I am pretty sure, that's my fault...that was one of the first things I implemented with fabric.js and I am sure i did a lot of rookie mistakes). Is that something the controls API will be capable of or is that out of scope?

[asturur]

Hi @bbernhard building a polygon with points is something that can be done with a custom brush.
Ideally you build up your polygon with points ( out of scope for the controls api ) and then, as the example you have seen, add a control for each point, that is exactly what the api is for.

[bbernhard]

Hi @bbernhard building a polygon with points is something that can be done with a custom brush.
Ideally you build up your polygon with points ( out of scope for the controls api ) and then, as the example you have seen, add a control for each point, that is exactly what the api is for.

Many thanks for the reply!

I hope I am not spamming this thread here, but I would have one short question regarding the custom brush: Is it possible to use custom brushes without free drawing? I always assumed that those brushes can only be used in conjunction with free drawing? And I think free drawing is probably not what I want, if I want to build up a polygon point-by-point or am I missing something here? :thinking:

[asturur]

So there is not a nice brush api yet. But is not even that far.
As today drawingMode activate a brush, meaning that mousedown/move/up get routed to the brush code rather than the standard code. mouseup is usually the trigger between currentlyDrawing: true/false.

Now if that would be a decision from the brush, you would have your custom code to write to react to those situations. The difference with a brush is that you do not have to add object to the canvas during the draw process, and that the main canvas does not get refreshed while you draw.

[bbernhard]

So there is not a nice brush api yet. But is not even that far.
As today drawingMode activate a brush, meaning that mousedown/move/up get routed to the brush code rather than the standard code. mouseup is usually the trigger between currentlyDrawing: true/false.

Now if that would be a decision from the brush, you would have your custom code to write to react to those situations. The difference with a brush is that you do not have to add object to the canvas during the draw process, and that the main canvas does not get refreshed while you draw.

Many thanks - that sounds really promising. Will look into that! :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[bendadaniel]

@asturur Hi, I am about to start new project build on fabricjs, I see there is a beta of version 4.0. Should I start building app on 3.6 and migrate to v4 when stable version will be realeased or start on 4 beta immediately? Is it posible do it without v4 docs? What is you advice? Thank you for you amazing work on this library.

[asturur]

I wish you would build on 4.0 beta.
The reason beta is not out is because i did not write full docs, so i did not release to be pushed to write extensive documentation.

The code is in good shape and any 4.0 beta bug would take precedence over anything else.

It also depends what is your project is about.
You need control customization? go with 4.0.
You do not need them and want to play safe? stay on 3.6.3
You do not need them and want to help? go with 4.0

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[asturur]

I started the descriptive API, till now this is what i got.
http://fabricjs.com/controls-api

Going to improve asap and make some interactive demo of different control setup for let people better understand what they can do.

Also i think i m going to change a small interface in the api, instead of declaring a control with position: { x, y } i m adding simply x and y, so the init interface is coherent with the class.

[melchiar]

looks good @asturur. Just a note though that the new doc page looks like it's missing the bootstrap.css reference :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[bulolo]

https://github.com/fabricjs/fabric.js/issues/6448
textbox controls bug

[TheMangoTrain]

My custom control handles...

Works (with Fabric 3.6.1):
https://codepen.io/MarsAndBack/pen/bGExXzd

Fails (with Fabric 4.0.0-rc.1):
https://codepen.io/MarsAndBack/pen/VweEQmN

Are changes coming to this aspect of Fabric?

[asturur]

the custom control function you wrote equal to set cornerStyle = 'circle' in fabricJS version 2.x up. No need to write a function for it.

Fabric 4 breaks any control customization that exists today and offer an API to build them with a stable interface.
So yes, any pre-existing control customization will break 100%.
Fabricjs 3.6.3 control properties and options will continue to work.

[TheMangoTrain]

Thanks for the prompt response!
I'm specifically trying to customize the stroke thickness for the control handles; this seemed the only way to do that. Moreover I'll be putting in svg icons for some handles in the future. However I'll look into the version 4 stuff soon! thx

[asturur]

There are properties to make the border thicker without the need of overrides, since fabric 1.6.2
http://fabricjs.com/docs/fabric.Object.html#borderScaleFactor
here is described how to add svg icons to controls
http://fabricjs.com/custom-control-render

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[asturur]

go away bot

[asturur]

Released.
If is not perfect we will fix it.
I have 3-4 exciting things i want to do and i need to get rid of this release to move forward.