-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
[Bug]: When I have a custom attribute with "type" in it, I get an error Error: fabric: No class registered for any
#10001
Comments
import * as fabric from 'fabric'
import { useEffect, useRef } from 'react'
import dataJson from './data.json'
const App = () => {
const canvasRef = useRef()
useEffect(() => {
if (!canvasRef.current) return
const canvas = new fabric.Canvas(canvasRef.current)
dataJson.objects.forEach((item) => {
// issues 1: When I have a custom attribute with "type" in it, I get an error `Error: fabric: No class registered for any`
//
// Comment the following code to see the error
delete item.myData.type
})
// issues 2: When using it in react, there will still be an error message `TypeError: Cannot read properties of undefined (reading 'clearRect')`
canvas.loadFromJSON(dataJson).then(() => {
canvas.requestRenderAll()
})
return () => {
canvas.dispose()
}
}, [])
return (
<canvas
width={document.body.clientWidth}
height={document.body.clientHeight}
ref={canvasRef}
/>
)
}
export default App |
fabric.js/src/util/misc/objectEnlive.ts Lines 158 to 166 in 8219e92
bug1: The issue here is that during import, it loops through each property and checks if it is an object. If it is, it then checks for a type. Hmm... I think the source code should add an error check. bug2: The issue is with asynchronous operations. You can solve it by making the following modifications. const controller = new AbortController();
canvas.loadFromJSON(dataJson, undefined, { signal: controller.signal }).then(() => {
canvas.requestRenderAll()
}).catch(e => {
console.error(e.message ?? "aborted");
});
return () => {
controller.abort();
canvas.dispose()
}
// let flag = false;
// canvas.loadFromJSON(dataJson).then(() => {
// if (flag) return false;
// canvas.requestRenderAll();
// })
// return () => {
// flag = true;
// canvas.dispose()
// } |
@zhe-he Thanks for the reply, but issues 1 is still not solved in the latest version. |
@hqw567 |
let me see maybe i misunderstood how i used the class registry |
Yes sorry i should have added 'hasClass' rather than getClass. I ll fix it quickly |
@asturur I have upgraded to v6.2.0, The problem is still not solved. There is a new error reported when my custom attribute
|
{
"version": "6.0.2",
"objects": [
{
"fontSize": 50,
"fontWeight": "normal",
"fontFamily": "Times New Roman",
"fontStyle": "normal",
"lineHeight": 1.16,
"text": "fabric issues",
"charSpacing": 0,
"textAlign": "left",
"styles": [],
"pathStartOffset": 0,
"pathSide": "left",
"pathAlign": "baseline",
"underline": false,
"overline": false,
"linethrough": false,
"textBackgroundColor": "",
"direction": "ltr",
"minWidth": 20,
"splitByGrapheme": false,
"type": "Textbox",
"version": "6.0.2",
"originX": "left",
"originY": "top",
"left": 50,
"top": 50,
"width": 119.458,
"height": 122.04,
"fill": "black",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeUniform": false,
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"backgroundColor": "lightgrey",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"skewX": 0,
"skewY": 0,
"myData": {
"type": "text"
}
}
]
} |
Well... the new logic now allows custom types to build internal objects. If your type value is 'rect' or 'text', it will be parsed as 'Rect' and 'Text'. So your type values should avoid these. |
Or at least they have to serialize differently. |
Can this problem be solved once and for all? @asturur |
The current version supports it. |
CheckList
Version
6.0.2
In What environments are you experiencing the problem?
Chrome
Node Version (if applicable)
None
Link To Reproduction
https://github.com/hqw567/fabric-issues-react
Steps To Reproduce
Expected Behavior
Custom attributes contain any attributes without error
Actual Behavior
When I have a custom attribute with "type" in it, I get an error
Error: fabric: No class registered for any
Error Message & Stack Trace
No response
The text was updated successfully, but these errors were encountered: