fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
29.08k stars 3.52k forks source link

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

Closed Arkit-Sutariya closed 1 month ago

Arkit-Sutariya commented 1 month ago

CheckList

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

asturur commented 1 month ago

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

asturur commented 1 month ago

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.