Clone method does not work on subclassed objects.

[returner]

http://jsfiddle.net/Tfb2d/

subclassing objects are not transform to group object. (v1.4.4)

run the jsfiddle.
#1 rectangle - grouped. success.

1. click addRect twice. (show two rectangle)
2. drag and selection two objects.
3. click group button.
4. success group objects.
   Remove Prototype.js as a dependency. #2 subclassing object - fail.
5. click addLabeledRect twice (show two subclassing objects) - just rectangle with text
6. drag and selection two objects.
7. click group button.
8. failed and error message on console.

error messages are below.
Uncaught TypeError: undefined is not a function fabric-1.4.4.js:10702
fabric.Object.fabric.util.createClass.renderfabric-1.4.4.js:10702
fabric.Group.fabric.util.createClass._renderObjectfabric-1.4.4.js:15504
fabric.Group.fabric.util.createClass.renderfabric-1.4.4.js:15477
fabric.StaticCanvas.fabric.util.createClass._drawfabric-1.4.4.js:5751
fabric.StaticCanvas.fabric.util.createClass._renderObjectsfabric-1.4.4.js:5879
fabric.StaticCanvas.fabric.util.createClass.renderAllfabric-1.4.4.js:5850
fabric.Collection.addfabric-1.4.4.js:181
(anonymous function)GroupSubclassing.html:71
x.event.dispatchjquery-2.0.3.js:4676
y.handle

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[asturur]

Do not know if this is a bug or not.

http://jsfiddle.net/Tfb2d/66/ updated with fabric 1.5.0
In this updated fiddle you see that extending better the toObject method solves the issue.

The problem is that the function _render defined by your subclassing was not getting cloned in the object when calling .clone()
Not relevant to grouping at all.

@kangax, is the toObject method responsible for cloning also the functions?

[asturur]

http://jsfiddle.net/asturur/Tfb2d/67/

after a similar stack overflow question i realized that the extended class was just declared wrong.
Everything is fine if you declare the classe like this:

        var LabeledRectangle = fabric.util.createClass(fabric.Rect, {
            type: 'labeledRect',
            initialize: function (options) {
                options || (options = {});
                this.callSuper('initialize', options);
                this.set('objectType', options.objectType || '');
            },
            toObject: function () {
                return fabric.util.object.extend(this.callSuper('toObject'), {
                    objectType: this.get("objectType"),
                });
            },
            _render: function (ctx) {
                this.callSuper('_render', ctx);
                ctx.font = '12px verdana';
                ctx.fillStyle = '#333';
                switch (this.objectType) {
                    case "text":
                        ctx.fillText("TEXT", -this.width / 2 + (this.width * 0.33), -this.height / 2 + (this.height * 0.53));
                        break;
                    default:
                        ctx.fillText("", -this.width / 2, -this.height / 2);
                        break;
                }

            }
        });
        LabeledRectangle.fromObject = function(options) {
          return new LabeledRectangle(options);
        }

[NealHumphrey]

@asturur it looks like the code for declaring the extended class was modeled on the Subclassing tutorial on fabricjs.com. I ran into the same problem (render function didn't get cloned on .clone()) and finally came across this solution, adding those last three lines of your answer.

I don't understand why the last 3 lines (.fromObject) are necessary (new to Fabric) but maybe this is something to try to bring into the tutorial + documentation? What's the best way to go about that?

[syllogismos]

@asturur I extended the functionality of the fiddle you uploaded to include the copy and paste example in the fabricjs demos.

I'm not able to copy the new Labeledrectangle object. I'm not able to clone this object created by subclassing. getActiveObject is returning the labeldRectangle object, but when I try to do clone while selecting the labeledrectangle its not copying it. The copy and paste method works with normal rectangle.

Here is the fiddle http://jsfiddle.net/7w3m4pLL/3/

I'm fabricjs version Im using is 2.0.0.beta7 as the demos are based on that version, if I'm not wrong.

Can you help me with this, I want to be able to copy and paste new objects that I implement myself.

[Ale-cc]

So am I. When i try to undo the action that move more than 3 objects...
fabric version: "2.4.5"

Uncaught TypeError: this.callSuper is not a function
at initialize (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :19544:12)
at eval (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :1998:52)
at klass.set (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :554:24)
at klass._setOptions (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :487:12)
at klass.setOptions (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :13221:12)
at klass.initialize (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :13064:14)
at klass.callSuper (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :2044:22)
at klass.initialize (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :19544:12)
at klass.eval [as initialize] (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :1998:52)
at new klass (eval at push../node_modules/script-loader/addScript.js.module.exports (addScript.js:20), :2063:23)