Fabric.js: Docs for API changes 1.x -> 2.x please?

[ajck]

Hi,
Just wondering how we figure out what changes we need to make to our code that uses Fabric JS as we move from 1.x to 2.x? I've looked everywhere in Fabric docs etc and can't see what API changes there are -e.g. I'm using IText (and Textbox) a lot - how do I work out what changes I need to make to Fabric function calls and what changes there might be in how a function works?

Many Thanks for the work on 2.0, especially text - much appreciated!

[asturur]

i m trying to do that. i m a bit slow.

On Jul 28, 2017 8:45 PM, "ajck" [e-mail] wrote:

Hi,
Just wondering how we figure out what changes we need to make to our code
that uses Fabric JS as we move from 1.x to 2.x? I've looked everywhere in
Fabric docs etc and can't see what API changes there are -e.g. I'm using
IText (and Textbox) a lot - how do I work out what changes I need to make
to Fabric function calls and what changes there might be in how a function
works?

Many Thanks for the work on 2.0, especially text - much appreciated!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/4145, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QP0sw_O2bTSriSK5FQftrVf8axQlks5sSixDgaJpZM4Om810
.

[ajck]

@asturur Ah OK, no worries, I know you must be very busy and appreciate all your amazing efforts on Fabric, thank you. Just wasn't sure if i'd missed something :)

[asturur]

I started.
http://fabricjs.com/v2-breaking-changes

There is just PathGroup, and i m writing about Images now.
If you have twitter, follow @AndreaBogazzi ( me ) i ll twitter everytime i push up something.

If you do not have twitter, just open the page every day and hope to find something.

[asturur]

Ok Image published

[ajck]

Great stuff thanks

[otterslide]

I am noticing that I have to call:
renderAll();
after calling setActiveObject(obj) , but before I did not need to. Is this intended?

[asturur]

Probably removed in a clean up of too much automatic renders all around.

Okey since i was about to write something let me write this.

[asturur]

For who is interested i m updating the docs everytime i can on fabricjs.com starting from the changelog link.

[ajck]

New docs look great, thanks very much. Just some quick questions on the text stuff please http://fabricjs.com/fabric-text

1. Do we still use IText (for interactive text input) and Textbox (for IText with wrapping) as with v1.x, or are there changes in how we access that functionality?

2. The heart emoji in the demo pic at the above link - where is that actual heart image coming from in that pic? (i.e. how do I get that?) - is it some emoji font being used and applied to the Text? (and if so, which one did you use please?)

3. I want to override the graphemeSplit function, as suggested. Do you have any demo/boilerplate code please? (i.e. not the code to do the grapheme splitting, but how to do the override generally?)

4. Doc says "Composition support for languages that requires it ( Chinese, Japanese at least )" - just wondered what this was - is that the grapheme stuff or something else?

5. In the 2,0beta5 code, the comments on functions fromStringToGraphemeSelection() and fromGraphemeToStringSelection() (lines 25438 and 25452) say "convert from textarea to grapheme indexes" and back. Does this mean HTML textarea? Because this is what I need to do - I need to mirror/copy the contents of an IText into an HTML textarea while someone is typing (and the opposite - if someone types in the textarea, copy it live into the IText).

Many thanks.

[asturur]

i m out now! when i will back to computer i will try to add a couple of answer to the text doc, and what is not pertinent i ll answer here. i should have something for all 5

[asturur]

1) Ideally i wanted to merge the textbox in IText using an option wrappable=true. But i did not manage. Probably in the next breaking version i ll try again, but for now textbox is way better. it finally scale like a normal object. So Itext and textbox are still 2 separate things

2) this need a more articulated answer that i will add to docs. The hearth comes from my macbook apple emoji fonts. If you time an emoji in Itext, canvas will just render it.
i type here a couple, if you copy paste them in an Itext they should just work:
🤡 🎉 😎 🌻

depending on your operating system fonts, you will see them in a way or another. I see them like this:

Windows could display them black and white, ubuntu linux depends.
Fabric will display them as the Operating system does.

3) to override the grapheme split use this method:

fabric.util.string.graphemeSplit = function(textString) {
 // do something with text....
return arrayOfGraphemese;
}

The function must take as argument a text, and spit out an array of graphemes.
You can find packages on npm that do this. The fabric version of the splitter has been copied from mozilla mdn example on multibyte text.

4) composition is this:

and this

5) those 2 functions convert the textarea position of the cursor that is bytes, to graphemes. So i may have a textarea that says that i selected from byte 4 to byte 8, but visually this selection can be just a single emoji
IText work over a textarea, that you find in YourItext.hiddenTextarea, You can try to see what kitchensink demo is doing, because it does that.

[ajck]

@asturur Thanks, that's great. I did post those emojis into an IText in the kitchensink demo and it just pasted in the string ":clown_face: :tada: :sunglasses: :sunflower:" (should be just text between the quotes, no images) rather than pics, I checked demo using 2.0 beta 5. Not sure why? I'm using latest Chrome on Win 7.

So composition means a pop up menu appears with possible alternatives for a string or character? Are those alternatives built in or have to be sourced from somewhere?

Thanks again.

[asturur]

composition is offered from your input method. an os thing.

for emoji you need copy them from somewhere... google for unicode emoji, you will get the full.list and you can copy paste in fabric. then if you want to show how they look like, tale a screenshot.

in mac you press ctrl cmd space and you get a special input to pickup emoji

[ajck]

@asturur I've switched from 1.7.14 to 2.0 beta 6, and see that some object property functions are missing:
setOpacity, getOpacity, getScaleY/X, setScaleY/X, getStroke, getStrokeWidth, getLineHeight, Setlineheight, prob few others too? Just wondering what the 2.x equivalents are please for setting these things like border, line spacing, size, opacity etc.? I'm using on rect, ellipse, itext/textbox, image.
Thanks

[asturur]

I'll write about this this evening. Directly on the website. During week is hard to keep up with docs for me.
Basically they have been removed, they are optional during build process if you cannot live without them, but instead of setScaleX use set('scaleX', value) or set({ scaleX: value, scaleY: value });

[ajck]

Great thanks, look forward to reading, when ever you have time! No, I don't need these exact functions, I can change my code no prob (and expected breaking changes) but just need some way of setting an object's border, line spacing, transparency etc. Thanks

[evolutionjay]

where is the 1.x doc ????? you just change your doc to 2.x but where is the 1.x documents? I still need it

[asturur]

Those are not online since the current website does not allow me to put both solution online.
Are you talking of source docs ?

[evolutionjay]

no, not v2.x source docs , is v1.x API document .

[asturur]

fabricjs.com/docs <---- this one but for fabric 1.x?

[evolutionjay]

yes

[asturur]

I ll make pdf available on website for 1.x better than nothing. Or if i manage docs-old

[msmolka]

I'm trying to find migration guide from 1 to 2. But I cannot. I'm using things related to image scaling. like getWidth(), getHeight() setScaleX, setScaleY. I found that last 2 can be replaced. but analysing the object cannot find anything related to first 2. which are incorporating with scale.

[motopete]

When working with scaling I believe you can use getScaledWidth() & getScaledHeight().

[awehring]

I just discovered, that getScaledWidth() includes strokeWidth. The relationship appears to be:

(getScaledWidth() - strokeWidth) / scaleX = width

Propably similar for getScaledHeigth().

I think it should be clarified in the documentation too: http://fabricjs.com/docs/fabric.Object.html

[raphaelbeckmann]

We are trying to upgrade from 1.7.20 to 2.3.5.
We followed both Upgrade Guides Part 1 and Part 2.

Nevertheless we get many different errors like this.group.isOnACache is not a function or decl is undefined in the console. However the stack trace is not helping at all.

Does anyone have more information how to upgrade?

[asturur]

mileage may vary depending on what are you migrating.
I can help in some ways if you have specific code snippets you can share.
Any reason to do not jump on latest?

Also consider we are moving to a new major release that should not a big concern unless you run on node. I think we need to remove node 6 and node 4.

[raphaelbeckmann]

@asturur The main reason why we are trying to upgrade is because of the "overscroll" problem of iOS devices.
In our app, if we try to make a selection on the canvas (on iOS), the whole page gets pulled up and down.

We saw that this is not the case on your website http://fabricjs.com/
Hence we thought it might have to do with the newer version of fabric.
Is that the case or do you have an idea?
(I know, a little bit off-topic.)

[asturur]

not that i know of. may be there is an option? i do not remember. search for allowTouchScrolling and see of you get matches.

my question was why 2.3.5 and not 2.4.3

[raphaelbeckmann]

Perfect, thanks for the hint, this does the trick (https://github.com/fabricjs/fabric.js/issues/1864#issuecomment-200610053).

We overlooked that 2.4.3 is the latest, so we tried it, too. However we had the same console errors. We're going to wait for the next major release and then dig deeper into the errors.
For now our prime desire is met.

[JonathanDn]

@asturur Hey Andrea thank you very much for all the amazing work on FabricJS :),

I did not manage to find a proper guide to migrate FabricJS from 1.x to 2.x.
I noticed the following missing functions so far:
getBouncingRectWidth, getBoundingRectHeight, setText, setFill, getStroke.

I managed to find issue people opened on most of the issues so far but not for getStroke.

Could you upload a list of all the deprecated functions and the new way to invoke them?

@ajck I saw you wrote about stumbling with getters / setters function not existing as well during this migration. could you please provide a list of the previous functions names and the new ones for everyone to benefit from your knowledge? :)

[asturur]

i think an esaustive list is better, yes.

[JonathanDn]

@asturur I am making a list of all the functions I came across that did not exist - and their new syntax.
I can publish it here / somewhere else if you like and help out :)

[asturur]

sure a starting point is better than look for everything.

[JonathanDn]

@asturur How can I easily get the pixel positions of a certain object on the canvas?
For example in a 1000px by 500px canvas. If I have certain points that are outside the canvas from the top and some are inside. How can I access the x and y relative to the visual canvas(1000x500px) ?

[asturur]

this is unrelated to this issue. If you think you need help with that question, prepare a small example, post it on stackoverflow ( since is not a bug is a request for help or a question ) with the embedded internal example runner, then link the question on an new issue for visibility

[onassar]

Is there documentation on how to migrate from v2 to v3? And will there be documentation on how to migrate from v3 to v4?

Thanks!

[asturur]

there isn't much to upgrade in v3 unless you have heavy node code.

the only breaking changes in v4 are captured in the changelog for now with examples of what to change. There is an open pr ( the top one ) with the first list of removals. The new control api is still lacking the scaling flip behaviour but that should be reintroduced before release. If you have overrides on controls that will be broken for sure and require a per use case instructions. The new api is built to make heavy control customization easy and living outside fabricjs realm.

[onassar]

Great thanks.

1. any idea when v4.0.0 will officially roll out?
2. I noticed that the v4.0.0 beta that's in the Releases section still has a version string value of 3.6.1

Hope that's helpful!

[asturur]

in master branch the dist folder is still 3.6.1 you have to build it or pickup from npm.

fabric 4 works but i need to write some examples, i started from the hardest i got stuck and i burned out.

i want to add the last thing ( ability to setup controls as click action other than drag action ex: delete an object from top right corner ) and 3 or 4 examples of creative usage of the api before releasing.

[onassar]

1. Sorry I'm a little confused.
   When I download the ZIP from this URL, it still has the 3.x version string:
   https://github.com/fabricjs/fabric.js/releases/tag/v4.0.0-beta.6

2. Okay thanks. Looking forward to version 4 official release. You're doing a great job and you make the lives of thousands of developers much much much easier. Thank you so much!

[asturur]

1 i did not build on purpose because i m releasing each commit. that means that i also put rubbish on the cloudflare cdn :(

but on npm you find the correct files

[onassar]

Okay thanks! Looking forward to the updates!

[onassar]

Hey team! I just built things from npm and it's still saying the older version (3.6.2). Do you have a CDN hosted version of 4.0.0 beta that I could test?

[asturur]

the action file was wrong. I fixed it.
I wrote npm build rather than npm run build. So i was publishing all the time the old file. :(

[onassar]

Okay! Thanks for checking! And I'm happy that my messages were useful somehow! I'll try out the new version this afternoon!

[asturur]

Getting an example on the website now, as soon as the PR is merged
A really small example because i did not had that much time

[asturur]

The beta.7 is now published correctly.
Also what makes me excited more than the new api is that i finally have a way to make interactive demos with live javascript.

http://fabricjs.com/custom-control-render

link to library: https://unpkg.com/[email protected]/dist/fabric.js

[onassar]

Amazing thanks so much!
Also very excited for the control changes. In the past, we had to do a lot of ugly hacks to get controls to show up the way we wanted. Looking forward to these changes. Thanks so much for everything you do!

[onassar]

Hi team! I've noticed a few inconsistencies with the new beta and your live documentation (eg. cursorColor no longer being used, the rotatingPointOffset no longer being used).

I'd be happy to document this somewhere for when you get around to updating the documentation. Any timeline estimate on this? Happy to help!

[asturur]

good catch for rotatingPointOffset, can you add a line in the changelog.txt for the first 4.0.0 beta?
The sentence is more or less:

breaking Object.rotatingPointOffset is no more used. Instead you can change the offsetY parameter of your control of choice. By default rotation control is Object.controls.mtr, change Object.controls.mtr.offsetY to get the same effect of before.

[asturur]

I have no idea what is the difference with cursorColor i think is broken since longer and there is an issue tracking it.

[onassar]

Okay great i'll take a look. Not sure about cursorColor either!

[asturur]

i m more than ok having custom explanation of how the new control api works.
As of now is in my head and in the head of the coworkers that did with me.
It may be not perfect yet, so understanding how it adapt to dev needs is very important in this stage.

[onassar]

Ok I understand

[awehring]

I have no idea what is the difference with cursorColor. I think is broken since longer and there is an issue tracking it.

You are right, see: #5373