JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.0/pixi.min.js"></script>
JavaScript
//======================================================================================
// EXTEND PIXI NATIVE CLASSES -> Add dock, margin and Offset properties
//======================================================================================
Object.defineProperties(PIXI.TransformStatic.prototype, {
'dock': {
'get': function () {
if (this._dock == undefined) {
this._offset = { x: 0, y: 0 }
this._margin = [0, 0, 0, 0] // clockwise, same as CSS
this._dock = new PIXI.ObservablePoint(function (scope) {
this._updateDock = true;
}, this, 0, 0)
this._updateDock = true;
}
return this._dock;
}
}
})
Object.defineProperties(PIXI.Container.prototype, {
'defaultWidth': {
'get': function () {
if (this.transform == undefined) return 0
return this.transform._width
},
'set': function (value) {
this.transform._width = value
}
},
'defaultHeight': {
'get': function () {
if (this.transform == undefined) return 0
return this.transform._height
},
'set': function (value) {
this.transform._height = value
}
},
'dock': {
'get': function () {
return this.transform.dock
}
},
'margin': {
'get': function () {
return this.transform._margin
},
'set': function (value) {
return this.transform._margin = value
}
},
'offset': {
'get': function () {
return this.transform._offset
},
'set': function (value) {
return this.transform._offset = value
}
}
})
var oldUT = PIXI.TransformStatic.prototype.updateTransform
PIXI.TransformStatic.prototype.updateTransform = function (parentTransform) {
if (this._updateDock === true) {
...