How to Extend Subclasses (eg Path.Rectangle)

[jacksonkr]

Path.Rectangle.extend doesn't work and I'm not sure how to make Base.extend work in this scenario. I've messed with Rectangle.extend and it's promising but doesn't cut it.

The es6 equivalent of what I'm wanting to accomplish would look something like

class RedSquare extends Path.Rectangle {
    constructor(obj) { // obj is the json object with initial settings eg {size:50}
        obj.fillColor = 'red';
        super(obj);
    }
}

new RedSquare({ size:50 });

[jacksonkr]

In the meantime I'm using a factory.

sketch

var superSquareFactory = function() {
    var o = new Path.Rectangle({
        size:50,
        fillColor:'red',
        customFunc: function() {
            this.fillColor = 'blue'
            console.log("something custom on", this);
        }
    });
    
    return o;
}

var ss1 = superSquareFactory();
var ss2 = superSquareFactory();
ss2.position.y = 100;

ss1.customFunc();

[lehni]

Path.Rectangle and co aren't real constructors / sub-classes, they actually return plain Path items. This was probably a bit of a poor design decision, which we went for to reflect how things were done in Scriptographer... These constructors are there as a way to create path items with pre-populated / constructed segments arrays. They are actually factories internally, but you use them with new in front (but you don't have to with these, since they have an explicit return statement...)

As for sub-classing Paper.js classes, that's something that we don't officially support. It is possible, and people are doing it, but we're not supporting it.