fabricjs/fabric.js

Inconsistent type for Active Object in Fabric.js 6.3.0: 'image' in getActiveObject() vs 'Image' in toJSON()

Arkit-Sutariya opened this issue · 2 comments

CheckList

  • I agree to follow this project's Code of Conduct
  • I have read and followed the Contributing Guide
  • I have read and followed the Issue Tracker Guide
  • I have searched and referenced existing issues and discussions
  • I am filing a BUG report.
  • I have managed to reproduce the bug after upgrading to the latest version
  • I have created an accurate and minimal reproduction

Version

6.0.2

In What environments are you experiencing the problem?

No response

Node Version (if applicable)

None

Link To Reproduction

No

Steps To Reproduce

  1. Initialize a Fabric.js canvas in an Angular 18.2.0 project using Fabric.js 6.3.0.
  2. Add an image to the canvas and set it as the active object.
  3. In the selection:created event, log the type of the active object using
    console.log(this.canvas.getActiveObject());
  4. Also, log the type of the active object after calling toJSON():
    console.log(this.canvas.getActiveObject().toJSON());

`
import { Canvas, FabricImage, FabricObject, Shadow,Rect,Circle,Line,Group,Gradient } from 'fabric';

ngOnInit() {
'selection:created': (e) => {
console.log(this.canvas.getActiveObject());
console.log(this.canvas.getActiveObject().toJSON());
}
}

getImgPolaroid(image_details, uploadfrom = '', st: any = {}, stickerFrom: string = '') {
FabricImage.fromURL(image_details, { crossOrigin: 'anonymous' }).then((img) => {
img.set({
left: 100,
top: 100,
angle: 0,
padding: 0,
scaleX: 1,
scaleY: 1,
hasRotatingPoint: true,
element_type: stickerFrom || uploadfrom,
});

this.canvas.add(img);
this.selectItemAfterAdded(img);
this.canvas.renderAll();
})
}
`

Expected Behavior

I want to both time activeObject's type same.

Actual Behavior

For normal this.canvas.getActiveObject() image object type is image.

For toJSON() method this.canvas.getActiveObject().toJSON() image object type is Image (First character capital)

I am unsure whether this issue is caused by something in my implementation or if it's a behavior inherent to Fabric.js.

Error Message & Stack Trace

No response

Each class instance has a lowercase type property on the instance that is 'image', 'rect' and so on. This is deprecated and is there only for backward compatibility
Each class prototype has a static property named 'type' and is the same name of the class.
When exporting we use the uppercase one
image

If you want to compare an instance with its own serialized implementation use the constructor as the toJSON code does

also

  /**
   * Legacy identifier of the class. Prefer using utils like isType or instanceOf
   * Will be removed in fabric 7 or 8.
   * The setter exists to avoid type errors in old code and possibly current deserialization code.
   * @TODO add sustainable warning message
   * @type string
   * @deprecated
   */

the old instance.type is deprecate, please don't build new code around it.