New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🧐 Breaking changes for fabric 6.0 #8299
Comments
|
i ll keep formatting the top post to be the reference to read. I ll threat this asyncronously, feel free to continue add known changes if you know them. i was planning to revisit all the PRs and extract |
What do you think about planting |
we can with the /* dev mode */ thing |
I think it is better to add an internal util and use rollup to remove console logs or use an env var or something |
from http://fabricjs.com/v6-breaking-changes:
|
|
How about we release v6.0.0 with warnings and v6.0.1 without? |
Or add an option to |
Are useless now but can be activated, can safely become dead code removal with a rollup plugin that swap the comment with a falsy if, with or without an utility to log. |
OK I will PR an option I have in mind and we discuss there |
|
Polyline/Polygon/Path |
Group has no longer the method |
From latest TS pr: Going to update all the upper main description now |
BREAKING insertAt signature - (objects, index) => (index, ...objects). Done to comply with the rest of the methods and resemblance to Array.splice |
|
Need to add the breaking changes from repacking the lib, as soon as export work i can have a full list |
Added breakign changes from animation simplification and the removal of canvas aliases on object |
This is a great practice, we should stick to it now on for future versions |
EraserBrush isn't part of v6 yet, so that is breaking for now #8499 |
moved to native classes => no more |
Does v6 fix an issue with webview going to cpu 100% when drawing that i have in v5? |
I’m not sure if this is intentional or not, so figured I’d ask before filing a bug. With version 6 (beta 16), exportable groups do not respect the excludeFromExport option on the objects within the group itself. It just exports them all toSVG regardless of the flag. I’ve extended the class and override the toSVG method, checking if each object is excludeFromExport. However, it seems like something that I’d expect. |
Another thing I noticed with v6 (beta 16), is that the SVG src for images does not escape the query string. This invalidates the xlink, as the url is invalid. For example, if I have a url pointing to my server, and pass in the query string, “?format=jpg&quality=80”, the query string should be escaped, “?format=jpg&(amp;)quality=80” (without parens) We’d only want this for exporting the SVG image url, meaning that the method, getSvgSrc() on image seems like it shouldn’t be deprecated? I’ve overridden the image class to handle the escaping in the getSvgSrc() method, but it has a deprecation notice on it. |
@stevenhurth @ouya99 file an issue |
@ShaMan123 how to file an issue on a mobile app project? i cannot provide full code sample. i tested my react-native-webview with the most basic fabricjs canvas (isDrawingMode = true) and it produces 100% on cpu. |
I don't know if someone experienced this already, but in local with NextJS (react 18), when I dispose the canvas (I await it to be disposed), it works fine. But when deployed (on vercel), I get the error: I tried to put reactStrictMode to false (like it is in prod) but didn't help to reproduce in local |
@yafkari please open a bug report |
Hello! was the cloneAsImage removed as well on version 6? |
For folks coming here in late 2023 / early 2024, I was looking for v6 documentation and couldn't find it (let me know if I missed it), so I went through all the comments (including the first one) and summarized what's new so far, and some gotchas people have experienced. Hope this helps: Fabric v6 Changes So Far:General Changes
Collection
Canvas and StaticCanvas
Animation
Utils
Object
Text
Polyline, Polygon, Path
Group
Serialization
Brushes
Notable Feature Additions
Other Notes (Summary from Comments So Far):
Asynchronous Canvas DisposalThe asynchronous disposal of Canvas and StaticCanvas, especially in React 18, requires careful handling in DOM Mutation and CleanupFabric.js's manipulation of the DOM for the Canvas class requires specific strategies for cleanup to prevent issues, especially in frameworks like React. Detailed Group Class ChangesThe Group class has significant changes affecting the object tree and management within groups, necessitating adjustments in code. Handling of SVG Sources and Query StringsDevelopers need to address escaping query strings in SVG image URLs, particularly when using external image sources. |
@yuvalkarmi thanks! I will update the first comment with your excellent input and go through the last batch of the changelog. Documentation is in progress, we should announce it ASAP @asturur תודה |
updated description to beta16 |
Hello, |
I thought you sent those properties directly and then call refresh. So set
background color become canvas.backgroundColor = …
And then refresh the canvas. But maybe there’s a more official way 🤷♀️
…On Sat, Dec 30, 2023 at 4:05 PM Ramy M. Naeem ***@***.***> wrote:
Hello,
since
setBackgroundColor, setBackgroundImage, setOverlayColor, setOverlayImage
are removed
is there an alternative to those functions?
Thanks
—
Reply to this email directly, view it on GitHub
<#8299 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABRTNI7FIWHYQKEABJQFS3YMANTPAVCNFSM6AAAAAAQPUR7U2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZSGUZTIMJXGU>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
This comment was marked as resolved.
This comment was marked as resolved.
Thanks @yuvalkarmi , that is the migration path. |
regarding concerns about async disposing please refer to the hooks in #9577 |
This comment was marked as off-topic.
This comment was marked as off-topic.
@JeremyMees open a bug report, this is not the place for it |
6.0.0-beta-16: getBoundingRect(absolute, calculate) not working when set rotate |
Hello, I am new to fabric.js, and just would like to know: How about the performance change compared 6.0.0-beta-XX to 5.X.X? Best regards, Jason |
We didn't measure any performance change.
I don't expect any noticeable difference but was my intention to replicate the bunny benchmark test in both 5.x and 6 and verify they are similar |
Hi @asturur , Will the stable version of v6 be released this year? Is there a V6 version of the document available? |
@hqw567 in theory we are 2 pr away to drag a line and call 6.0 with whatever minor bugs and undersights we have. |
Support to ActiveSelection stack operation is gone |
The eraser for v6 is live at https://github.com/ShaMan123/erase2d |
Sorry for being off-topic but I just wanted to say a big thanks to everyone working on this massive effort. Legends! 👍🏻 |
b.0.0-beta16
This list is in progress and is meant to be an easy go to place to add things and find them when the time comes to write a document on what has changed.
This will be a list of descriptive items, extended as needed to capture behavior changes.
Apart from what is described here MANY bugs have been fixed in the process.
Generic concepts
Imports we moved from
import { fabric } from 'fabric'
toimport { Canvas, Rect, util } from 'fabric'
orimport * as fabric from 'fabric'
. To avoid packaging issues node has its own entrypointimport { StaticCanvas } from 'fabric/node'
. This means there is no fabric namespace/object anymore.classRegistry
to bridge the absence of a namespaceenv
concept,getEnv
to allow node/browser specific values/logic. That has made importing fabric in SSR possible and will allow offscreen support in the future.fabric.Object
=>FabricObject
fabric.Text
=>FabricText
fabric.Image
=>FabricImage
registerFont
has been removed, useregisterFont
exposed by node canvasmethod chaining is now deprecated, don't use it anymore. Not all methods were chainable, and chaining seems to offer limited advantages ( maybe saving 1-2 bytes in the code you write when minified? unsure what else ). Just for consistency sake and to be free to start returning useful information from some methods we will stop using it. We didn't remove it from everywhere so that there isn't unnecessary breakage, but you should consider that unsafe to use, since will break entirely on the next major release after 6.0
( add detailed list of where has been removed so far )
Callbacks are mostly gone, all of the functions that took a callback now return a Promise, this on top of being breaking slightly alter code behavior when is fixed. Before sync code would execute the callback synchronously, now is chained to however the browser handle the promise ( not sure if it goes in the event loop and under which circumstances ). Promises support #3684
TS: The code base is typed! If you used
@types/fabric
you should uninstall itPrototype Mutation:
Fabric has moved to native classes. No more
createClass
orobject.util.extend
. You can still mutate the prototype, however, properties do not exist on the prototype in native classes. Look intogetDefaults
instead.scene vs. viewport
We introduced these concepts to describe the rendering/view planes as follows: The viewer is viewing the scene (what is rendered/"playing") from the viewport. The scene was considered is the past as the
absolute
plane whereas the viewport wasn't feat(Canvas): provide correctly named canvas pointer methods. BREAKING: rm_normalizePointer
,restorePointerVpt
#9175.Normally geometry calculations occur in the scene with the exception of
padding
which is a viewport scalar.scenePoint
andviewportPoint
properties replacing the deprecated and confusingabsolutePointer
andpointer
properties. Brushes are still in need of this change.Canvas#getPointer
in favor ofgetScenePoint
orgetViewportPoint
viewportTransform
is rather confusing with this change (especially withsendPointToPlane
etc.) perhaps be renaming tosceneTransform
is the correct migration path in the future.React Compatibility:
useEffect
, especially with React 18. Refer to this hook for guidance.dispose
is called while rendering is still in progress. This should burden your react app.Canvas#dispose
is calledCollection
fabric.Collection
any longer, was never meant to, it was a constrain of the previous build system ( we had no imports or require or bundling before ).insertAt
method signature changed frominsertAt(object, index)
toinsertAt(index, ...objects)
Group
:sendObjectToBack
sendToBackbringObjectToFront
bringToFrontsendObjectBackwards
sendBackwardsbringObjectForward
bringForwardmoveObjectTo
moveToCanvas and StaticCanvas
Canvas.dispose and StaticCanvas.dispose are now async In order to handle some concurrency issue with requestAnimationFrame, dispose is now checking and waiting for any uncancellable render to finish. This could have some side effects, especially in complex environments with UI frameworks and hot reload of code.
trying to initialize a canvas that has already been initialized
fix(Canvas): Safeguard from multiple initialization #7776 is not breaking, it saves the dev from a silent breakage that they weren't aware ofremoved canvas.straightenObject wasn't really useful.
changed cloneWithoutData , now it does not clone backgrounds.
canvas.clone now correctly return either a canvas or staticCanvas
drawClipPathOnCanvas
signature changed: now accepts the clipPath as a second argument instead of rechecking its existencegetCenter
renamed togetCenterPoint
dep(Canvas#getCenter): migrate togetCenterPoint
#7699add
returns the length of the array of objects after adding, likeArray#push
remove
returns an array with the removed objects insideinsertAt
method signature changed (refer to theCollection
section)removed
sendToBack
,bringToFront
,sendBackward
,moveTo
,bringForward
( and gained similar methods from collection (refer to theCollection
section)Canvas#freeDrawingBrush
is not set by defaultscene vs. viewport changes
getPointer
in favor ofgetScenePoint
orgetViewportPoint
_normalizePointer
,restorePointerVpt
rm
interactive
flag, useinstance of Canvas
insteadrm
setBackgroundColor
,setBackgroundImage
,setOverlayColor
,setOverlayImage
: assign the property directly and render the canvasObject
lineCoords
aCoords
should be treated as protected , if you need the scene corners of an object usegetCoords
absolute
,calculate
from geometry methods signatures (all listed methods operate in the scene):getCoords
intersectsWithRect
intersectsWithObject
isContainedWithinObject
isContainedWithinRect
getBoundingRect
containsPoint
changed signature entirely and fixedgetRelativeXY
/setRelativeXY
to get/set the coordinate in the parent plane,getXY
/setXY
to get/set the coordinate in the scene planeadjustPosition
is gone. It took a parameter only, was internally unused, didn't take care of internal edge cases setPositionByOrigin is more flexible_setOriginToCenter
and_resetOrigin
change(): rm _setOriginToCenter and _resetOrigin #9179oCoords
) are calculated only if the object has acanvas
reftype
has become a static field and should be used only for serialization withclassRegistry
. There is still a deprecated getter on the object for compatibility reasons. Avoid using it.stateful
was used to fire an object modified every render cycle in which a change in state properties was determiend. All the events that can modify an object already fire anobject:modified
event, and the user has no ability to change colors or state outside developer written code, so there is no really need for event firing here. statefulCache was an experiment and the suggestion to useset(property, value)
replaced it since long. FabricJS internally still use some stateful logic for now, but the intention is to get rid of it.center
,centerH
,centerV
,viewportCenter
are gone. Those were aliases for the canvas methods, use them instead.animate
changed to adapt to animation changescontrols
object is not shared between instances - it is not on the prototype as all class fieldsObject#getObjectScaling
,Object#getTotalObjectScaling
now returnsPoint
instead of{scaleX,scaleY}
BREAKING chore(): Reuse fabric.Point logic for scaling and naming consistency #7710Text
data-fabric-hiddentextarea
todata-fabric
with valuetextarea
, if you were usinghasAttribute('data-fabric-hiddentextarea')
now you have to usegetAttribute('data-fabric')
and then check for equality withtextarea
or change your cssSelector accordingly._getStyleDeclaration
returns an empty object instead of undefined when style is not set.Polyline Polygon Path
_setPositionDimensions
(considered private in the past), has been renamed tosetDimensions
. The logic with which Polyline based object calculate the size is changed. There wasn't an api in 5.x to change the size, but devs needed to do it anyway and the alternative was to create a new object. Is not called setPositionAndDimensions because the logic to correcly change size while keeping a visual correct position is not there yet and maybe it won't.createPolyControls
Group
V6
: 🎉 Group Rewrite #7670parent
property onFabricObject
alongsidegroup
to allow an object to return to itsparent
after being deselected from an active selection.addWithUpdate
is gone, nowadd
does what it has to do.LayoutManager
has been introduced to handle group layout refactor(): Layout Manager #9152. By default it will befit-content
, meaning the group will fit around its objects, updating when objects are added/removed/modified.Controls
shouldActivate
for ease of use patch():Control#shouldActivate
#8934 patch(Control): move hit detection to shouldActivate #9374Serialization
Text#styles
is now exported differently. This is BREAKING only if you are handling the style object post export The default object we exported was large most of the time, with tons of empty keys and verbosity. It seems reasonable to think that most of the time text is styled in some chunk of text with coherent different styles ( eg: a red word in a black text or some words underlined and some not more than a rainbow of different stylings per object ) for that reason we changed the approach of serialization to an array with start and end index for the style. We didn't apply that to actual runtime code because we were unsure of performance, so at least for version 6, styles at runtime are going to be the same. It is highly recommended to not fiddle with the style object directly and to treat it as internal, using the public facing methods to apply changes. feat(Text): condensed styles structure v6 #8006populateWithProperties
=>pick
populate with properties was used internally to add the extra options to exported objects. Between spread operator and new syntax, a generic pick approach seemed more correct.toJSON
is not an alias oftoObject
. This was a long standing bug, but also a breaking change.toJSON
never accepted additional properties and will give you only the default object export.toJSON
is meant forJSON#stringify
interoperability and is not meant to be used in your code base directly. reference fix(): weirdtoJson
bug #8111NUM_FRACTION_DIGIT
moved toconfig
and incremented from 2 to 4Brushes
PatternBrush
: removed thegetPatternSrcFunction
. Wasn't working anymore since the refactor of Pattern and also a super weird practice.Animation
+=
or-=
syntax for changes, nor accept the byValue option. You can specify an animation only by startValue and endValue.Utils
makeBoundingBoxFromPoints
signature change. The transformation is not supported anymore and requires real pointsclone
andextend
have been removed. Those were used in all examples unfortunately so the community has likely adopted them, consider migrating to a well known common library for those functionalities ( lodash, underscore ... ). Avoid using such utilities on classes.makeElementSelectable
andmakeElementUnselectable
are removed. Those were needed internally and one of them is still used internally, but is not a fabricJS core functionality and not part of the api anymore.sendObjectToPlane
,sendPointToPlane
,sendVectorToPlane
to ease common usages of linear algebra. Check them out, you will benefit from it.Misc
Observable
now returns a disposer making it easier to use and theoff
method redundant feat(observable): BREAKING return disposer instead of context for chaining #7994Point
methods MAJOR feat(fabric.Point): divide, scalarDivide, scalarDivideEquals #7716 chore(): Cleanup fabric.Point for v6 #7709The text was updated successfully, but these errors were encountered: