diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/packages/display/test/index.js b/packages/display/test/index.js index fea261d..2694808 100644 --- a/packages/display/test/index.js +++ b/packages/display/test/index.js @@ -1,6 +1,4 @@ -// require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./toGlobal'); require('./toLocal'); -require('./TransformStatic'); diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/packages/display/test/index.js b/packages/display/test/index.js index fea261d..2694808 100644 --- a/packages/display/test/index.js +++ b/packages/display/test/index.js @@ -1,6 +1,4 @@ -// require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./toGlobal'); require('./toLocal'); -require('./TransformStatic'); diff --git a/packages/math/src/Matrix.js b/packages/math/src/Matrix.js index d0f53d4..8c32e1a 100644 --- a/packages/math/src/Matrix.js +++ b/packages/math/src/Matrix.js @@ -347,8 +347,8 @@ /** * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. * - * @param {PIXI.Transform|PIXI.TransformStatic} transform - The transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properties + * @param {PIXI.Transform} transform - The transform to apply the properties to. + * @return {PIXI.Transform} The transform with the newly applied properties */ decompose(transform) { diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/packages/display/test/index.js b/packages/display/test/index.js index fea261d..2694808 100644 --- a/packages/display/test/index.js +++ b/packages/display/test/index.js @@ -1,6 +1,4 @@ -// require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./toGlobal'); require('./toLocal'); -require('./TransformStatic'); diff --git a/packages/math/src/Matrix.js b/packages/math/src/Matrix.js index d0f53d4..8c32e1a 100644 --- a/packages/math/src/Matrix.js +++ b/packages/math/src/Matrix.js @@ -347,8 +347,8 @@ /** * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. * - * @param {PIXI.Transform|PIXI.TransformStatic} transform - The transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properties + * @param {PIXI.Transform} transform - The transform to apply the properties to. + * @return {PIXI.Transform} The transform with the newly applied properties */ decompose(transform) { diff --git a/packages/math/src/Transform.js b/packages/math/src/Transform.js new file mode 100644 index 0000000..1bf60a1 --- /dev/null +++ b/packages/math/src/Transform.js @@ -0,0 +1,195 @@ +import ObservablePoint from './ObservablePoint'; +import Matrix from './Matrix'; + +/** + * Transform that takes care about its versions + * + * @class + * @memberof PIXI + */ +export default class Transform +{ + /** + * + */ + constructor() + { + /** + * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() + * + * @member {PIXI.Matrix} + */ + this.worldTransform = new Matrix(); + + /** + * The local matrix transform + * + * @member {PIXI.Matrix} + */ + this.localTransform = new Matrix(); + + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @member {PIXI.ObservablePoint} + */ + this.position = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The scale factor of the object. + * + * @member {PIXI.ObservablePoint} + */ + this.scale = new ObservablePoint(this.onChange, this, 1, 1); + + /** + * The pivot point of the displayObject that it rotates around + * + * @member {PIXI.ObservablePoint} + */ + this.pivot = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The skew amount, on the x and y axis. + * + * @member {PIXI.ObservablePoint} + */ + this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); + + this._rotation = 0; + + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; + + this._localID = 0; + this._currentLocalID = 0; + + this._worldID = 0; + this._parentID = 0; + } + + /** + * Called when a value changes. + * + * @private + */ + onChange() + { + this._localID++; + } + + /** + * Called when skew or rotation changes + * + * @private + */ + updateSkew() + { + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 + + this._localID++; + } + + /** + * Updates only local matrix + */ + updateLocalTransform() + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + } + + /** + * Updates the values of the object and applies the parent's transform. + * + * @param {PIXI.Transform} parentTransform - The transform of the parent of this object + */ + updateTransform(parentTransform) + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + + if (this._parentID !== parentTransform._worldID) + { + // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + + wt.a = (lt.a * pt.a) + (lt.b * pt.c); + wt.b = (lt.a * pt.b) + (lt.b * pt.d); + wt.c = (lt.c * pt.a) + (lt.d * pt.c); + wt.d = (lt.c * pt.b) + (lt.d * pt.d); + wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; + wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; + + this._parentID = parentTransform._worldID; + + // update the id of the transform.. + this._worldID++; + } + } + + /** + * Decomposes a matrix and sets the transforms properties based on it. + * + * @param {PIXI.Matrix} matrix - The matrix to decompose + */ + setFromMatrix(matrix) + { + matrix.decompose(this); + this._localID++; + } + + /** + * The rotation of the object in radians. + * + * @member {number} + */ + get rotation() + { + return this._rotation; + } + + set rotation(value) // eslint-disable-line require-jsdoc + { + this._rotation = value; + this.updateSkew(); + } +} + +Transform.IDENTITY = new Transform(); diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/packages/display/test/index.js b/packages/display/test/index.js index fea261d..2694808 100644 --- a/packages/display/test/index.js +++ b/packages/display/test/index.js @@ -1,6 +1,4 @@ -// require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./toGlobal'); require('./toLocal'); -require('./TransformStatic'); diff --git a/packages/math/src/Matrix.js b/packages/math/src/Matrix.js index d0f53d4..8c32e1a 100644 --- a/packages/math/src/Matrix.js +++ b/packages/math/src/Matrix.js @@ -347,8 +347,8 @@ /** * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. * - * @param {PIXI.Transform|PIXI.TransformStatic} transform - The transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properties + * @param {PIXI.Transform} transform - The transform to apply the properties to. + * @return {PIXI.Transform} The transform with the newly applied properties */ decompose(transform) { diff --git a/packages/math/src/Transform.js b/packages/math/src/Transform.js new file mode 100644 index 0000000..1bf60a1 --- /dev/null +++ b/packages/math/src/Transform.js @@ -0,0 +1,195 @@ +import ObservablePoint from './ObservablePoint'; +import Matrix from './Matrix'; + +/** + * Transform that takes care about its versions + * + * @class + * @memberof PIXI + */ +export default class Transform +{ + /** + * + */ + constructor() + { + /** + * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() + * + * @member {PIXI.Matrix} + */ + this.worldTransform = new Matrix(); + + /** + * The local matrix transform + * + * @member {PIXI.Matrix} + */ + this.localTransform = new Matrix(); + + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @member {PIXI.ObservablePoint} + */ + this.position = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The scale factor of the object. + * + * @member {PIXI.ObservablePoint} + */ + this.scale = new ObservablePoint(this.onChange, this, 1, 1); + + /** + * The pivot point of the displayObject that it rotates around + * + * @member {PIXI.ObservablePoint} + */ + this.pivot = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The skew amount, on the x and y axis. + * + * @member {PIXI.ObservablePoint} + */ + this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); + + this._rotation = 0; + + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; + + this._localID = 0; + this._currentLocalID = 0; + + this._worldID = 0; + this._parentID = 0; + } + + /** + * Called when a value changes. + * + * @private + */ + onChange() + { + this._localID++; + } + + /** + * Called when skew or rotation changes + * + * @private + */ + updateSkew() + { + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 + + this._localID++; + } + + /** + * Updates only local matrix + */ + updateLocalTransform() + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + } + + /** + * Updates the values of the object and applies the parent's transform. + * + * @param {PIXI.Transform} parentTransform - The transform of the parent of this object + */ + updateTransform(parentTransform) + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + + if (this._parentID !== parentTransform._worldID) + { + // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + + wt.a = (lt.a * pt.a) + (lt.b * pt.c); + wt.b = (lt.a * pt.b) + (lt.b * pt.d); + wt.c = (lt.c * pt.a) + (lt.d * pt.c); + wt.d = (lt.c * pt.b) + (lt.d * pt.d); + wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; + wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; + + this._parentID = parentTransform._worldID; + + // update the id of the transform.. + this._worldID++; + } + } + + /** + * Decomposes a matrix and sets the transforms properties based on it. + * + * @param {PIXI.Matrix} matrix - The matrix to decompose + */ + setFromMatrix(matrix) + { + matrix.decompose(this); + this._localID++; + } + + /** + * The rotation of the object in radians. + * + * @member {number} + */ + get rotation() + { + return this._rotation; + } + + set rotation(value) // eslint-disable-line require-jsdoc + { + this._rotation = value; + this.updateSkew(); + } +} + +Transform.IDENTITY = new Transform(); diff --git a/packages/math/src/index.js b/packages/math/src/index.js index caf52ea..a8ad9fd 100644 --- a/packages/math/src/index.js +++ b/packages/math/src/index.js @@ -7,7 +7,7 @@ export { default as ObservablePoint } from './ObservablePoint'; export { default as Matrix } from './Matrix'; export { default as GroupD8 } from './GroupD8'; - +export { default as Transform } from './Transform'; export { default as Circle } from './shapes/Circle'; export { default as Ellipse } from './shapes/Ellipse'; export { default as Polygon } from './shapes/Polygon'; diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/packages/display/test/index.js b/packages/display/test/index.js index fea261d..2694808 100644 --- a/packages/display/test/index.js +++ b/packages/display/test/index.js @@ -1,6 +1,4 @@ -// require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./toGlobal'); require('./toLocal'); -require('./TransformStatic'); diff --git a/packages/math/src/Matrix.js b/packages/math/src/Matrix.js index d0f53d4..8c32e1a 100644 --- a/packages/math/src/Matrix.js +++ b/packages/math/src/Matrix.js @@ -347,8 +347,8 @@ /** * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. * - * @param {PIXI.Transform|PIXI.TransformStatic} transform - The transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properties + * @param {PIXI.Transform} transform - The transform to apply the properties to. + * @return {PIXI.Transform} The transform with the newly applied properties */ decompose(transform) { diff --git a/packages/math/src/Transform.js b/packages/math/src/Transform.js new file mode 100644 index 0000000..1bf60a1 --- /dev/null +++ b/packages/math/src/Transform.js @@ -0,0 +1,195 @@ +import ObservablePoint from './ObservablePoint'; +import Matrix from './Matrix'; + +/** + * Transform that takes care about its versions + * + * @class + * @memberof PIXI + */ +export default class Transform +{ + /** + * + */ + constructor() + { + /** + * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() + * + * @member {PIXI.Matrix} + */ + this.worldTransform = new Matrix(); + + /** + * The local matrix transform + * + * @member {PIXI.Matrix} + */ + this.localTransform = new Matrix(); + + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @member {PIXI.ObservablePoint} + */ + this.position = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The scale factor of the object. + * + * @member {PIXI.ObservablePoint} + */ + this.scale = new ObservablePoint(this.onChange, this, 1, 1); + + /** + * The pivot point of the displayObject that it rotates around + * + * @member {PIXI.ObservablePoint} + */ + this.pivot = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The skew amount, on the x and y axis. + * + * @member {PIXI.ObservablePoint} + */ + this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); + + this._rotation = 0; + + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; + + this._localID = 0; + this._currentLocalID = 0; + + this._worldID = 0; + this._parentID = 0; + } + + /** + * Called when a value changes. + * + * @private + */ + onChange() + { + this._localID++; + } + + /** + * Called when skew or rotation changes + * + * @private + */ + updateSkew() + { + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 + + this._localID++; + } + + /** + * Updates only local matrix + */ + updateLocalTransform() + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + } + + /** + * Updates the values of the object and applies the parent's transform. + * + * @param {PIXI.Transform} parentTransform - The transform of the parent of this object + */ + updateTransform(parentTransform) + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + + if (this._parentID !== parentTransform._worldID) + { + // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + + wt.a = (lt.a * pt.a) + (lt.b * pt.c); + wt.b = (lt.a * pt.b) + (lt.b * pt.d); + wt.c = (lt.c * pt.a) + (lt.d * pt.c); + wt.d = (lt.c * pt.b) + (lt.d * pt.d); + wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; + wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; + + this._parentID = parentTransform._worldID; + + // update the id of the transform.. + this._worldID++; + } + } + + /** + * Decomposes a matrix and sets the transforms properties based on it. + * + * @param {PIXI.Matrix} matrix - The matrix to decompose + */ + setFromMatrix(matrix) + { + matrix.decompose(this); + this._localID++; + } + + /** + * The rotation of the object in radians. + * + * @member {number} + */ + get rotation() + { + return this._rotation; + } + + set rotation(value) // eslint-disable-line require-jsdoc + { + this._rotation = value; + this.updateSkew(); + } +} + +Transform.IDENTITY = new Transform(); diff --git a/packages/math/src/index.js b/packages/math/src/index.js index caf52ea..a8ad9fd 100644 --- a/packages/math/src/index.js +++ b/packages/math/src/index.js @@ -7,7 +7,7 @@ export { default as ObservablePoint } from './ObservablePoint'; export { default as Matrix } from './Matrix'; export { default as GroupD8 } from './GroupD8'; - +export { default as Transform } from './Transform'; export { default as Circle } from './shapes/Circle'; export { default as Ellipse } from './shapes/Ellipse'; export { default as Polygon } from './shapes/Polygon'; diff --git a/packages/math/test/Transform.js b/packages/math/test/Transform.js new file mode 100644 index 0000000..e7064e7 --- /dev/null +++ b/packages/math/test/Transform.js @@ -0,0 +1,102 @@ +const { Transform } = require('../'); + +describe('PIXI.Transform', function () +{ + describe('setFromMatrix', function () + { + it('should decompose negative scale into rotation', function () + { + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(20, 10); + transform.scale.set(-2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.equal(0); + expect(skew.y).to.equal(0); + expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); + }); + + it('should decompose mirror into skew', function () + { + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(20, 10); + transform.scale.set(2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); + expect(skew.y).to.be.closeTo(Math.PI / 6, eps); + expect(otherTransform.rotation).to.equal(0); + }); + + it('should apply skew before scale, like in adobe animate and spine', function () + { + // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy + + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(387.8, 313.95); + transform.scale.set(0.572, 4.101); + transform.skew.set(-0.873, 0.175); + transform.updateTransform(parent); + + const mat = transform.worldTransform; + + expect(mat.a).to.be.closeTo(0.563, eps); + expect(mat.b).to.be.closeTo(0.100, eps); + expect(mat.c).to.be.closeTo(-3.142, eps); + expect(mat.d).to.be.closeTo(2.635, eps); + expect(mat.tx).to.be.closeTo(387.8, eps); + expect(mat.ty).to.be.closeTo(313.95, eps); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(387.8, eps); + expect(position.y).to.be.closeTo(313.95, eps); + expect(scale.x).to.be.closeTo(0.572, eps); + expect(scale.y).to.be.closeTo(4.101, eps); + expect(skew.x).to.be.closeTo(-0.873, eps); + expect(skew.y).to.be.closeTo(0.175, eps); + expect(otherTransform.rotation).to.be.equal(0); + }); + }); +}); diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/packages/display/test/index.js b/packages/display/test/index.js index fea261d..2694808 100644 --- a/packages/display/test/index.js +++ b/packages/display/test/index.js @@ -1,6 +1,4 @@ -// require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./toGlobal'); require('./toLocal'); -require('./TransformStatic'); diff --git a/packages/math/src/Matrix.js b/packages/math/src/Matrix.js index d0f53d4..8c32e1a 100644 --- a/packages/math/src/Matrix.js +++ b/packages/math/src/Matrix.js @@ -347,8 +347,8 @@ /** * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. * - * @param {PIXI.Transform|PIXI.TransformStatic} transform - The transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properties + * @param {PIXI.Transform} transform - The transform to apply the properties to. + * @return {PIXI.Transform} The transform with the newly applied properties */ decompose(transform) { diff --git a/packages/math/src/Transform.js b/packages/math/src/Transform.js new file mode 100644 index 0000000..1bf60a1 --- /dev/null +++ b/packages/math/src/Transform.js @@ -0,0 +1,195 @@ +import ObservablePoint from './ObservablePoint'; +import Matrix from './Matrix'; + +/** + * Transform that takes care about its versions + * + * @class + * @memberof PIXI + */ +export default class Transform +{ + /** + * + */ + constructor() + { + /** + * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() + * + * @member {PIXI.Matrix} + */ + this.worldTransform = new Matrix(); + + /** + * The local matrix transform + * + * @member {PIXI.Matrix} + */ + this.localTransform = new Matrix(); + + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @member {PIXI.ObservablePoint} + */ + this.position = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The scale factor of the object. + * + * @member {PIXI.ObservablePoint} + */ + this.scale = new ObservablePoint(this.onChange, this, 1, 1); + + /** + * The pivot point of the displayObject that it rotates around + * + * @member {PIXI.ObservablePoint} + */ + this.pivot = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The skew amount, on the x and y axis. + * + * @member {PIXI.ObservablePoint} + */ + this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); + + this._rotation = 0; + + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; + + this._localID = 0; + this._currentLocalID = 0; + + this._worldID = 0; + this._parentID = 0; + } + + /** + * Called when a value changes. + * + * @private + */ + onChange() + { + this._localID++; + } + + /** + * Called when skew or rotation changes + * + * @private + */ + updateSkew() + { + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 + + this._localID++; + } + + /** + * Updates only local matrix + */ + updateLocalTransform() + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + } + + /** + * Updates the values of the object and applies the parent's transform. + * + * @param {PIXI.Transform} parentTransform - The transform of the parent of this object + */ + updateTransform(parentTransform) + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + + if (this._parentID !== parentTransform._worldID) + { + // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + + wt.a = (lt.a * pt.a) + (lt.b * pt.c); + wt.b = (lt.a * pt.b) + (lt.b * pt.d); + wt.c = (lt.c * pt.a) + (lt.d * pt.c); + wt.d = (lt.c * pt.b) + (lt.d * pt.d); + wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; + wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; + + this._parentID = parentTransform._worldID; + + // update the id of the transform.. + this._worldID++; + } + } + + /** + * Decomposes a matrix and sets the transforms properties based on it. + * + * @param {PIXI.Matrix} matrix - The matrix to decompose + */ + setFromMatrix(matrix) + { + matrix.decompose(this); + this._localID++; + } + + /** + * The rotation of the object in radians. + * + * @member {number} + */ + get rotation() + { + return this._rotation; + } + + set rotation(value) // eslint-disable-line require-jsdoc + { + this._rotation = value; + this.updateSkew(); + } +} + +Transform.IDENTITY = new Transform(); diff --git a/packages/math/src/index.js b/packages/math/src/index.js index caf52ea..a8ad9fd 100644 --- a/packages/math/src/index.js +++ b/packages/math/src/index.js @@ -7,7 +7,7 @@ export { default as ObservablePoint } from './ObservablePoint'; export { default as Matrix } from './Matrix'; export { default as GroupD8 } from './GroupD8'; - +export { default as Transform } from './Transform'; export { default as Circle } from './shapes/Circle'; export { default as Ellipse } from './shapes/Ellipse'; export { default as Polygon } from './shapes/Polygon'; diff --git a/packages/math/test/Transform.js b/packages/math/test/Transform.js new file mode 100644 index 0000000..e7064e7 --- /dev/null +++ b/packages/math/test/Transform.js @@ -0,0 +1,102 @@ +const { Transform } = require('../'); + +describe('PIXI.Transform', function () +{ + describe('setFromMatrix', function () + { + it('should decompose negative scale into rotation', function () + { + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(20, 10); + transform.scale.set(-2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.equal(0); + expect(skew.y).to.equal(0); + expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); + }); + + it('should decompose mirror into skew', function () + { + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(20, 10); + transform.scale.set(2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); + expect(skew.y).to.be.closeTo(Math.PI / 6, eps); + expect(otherTransform.rotation).to.equal(0); + }); + + it('should apply skew before scale, like in adobe animate and spine', function () + { + // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy + + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(387.8, 313.95); + transform.scale.set(0.572, 4.101); + transform.skew.set(-0.873, 0.175); + transform.updateTransform(parent); + + const mat = transform.worldTransform; + + expect(mat.a).to.be.closeTo(0.563, eps); + expect(mat.b).to.be.closeTo(0.100, eps); + expect(mat.c).to.be.closeTo(-3.142, eps); + expect(mat.d).to.be.closeTo(2.635, eps); + expect(mat.tx).to.be.closeTo(387.8, eps); + expect(mat.ty).to.be.closeTo(313.95, eps); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(387.8, eps); + expect(position.y).to.be.closeTo(313.95, eps); + expect(scale.x).to.be.closeTo(0.572, eps); + expect(scale.y).to.be.closeTo(4.101, eps); + expect(skew.x).to.be.closeTo(-0.873, eps); + expect(skew.y).to.be.closeTo(0.175, eps); + expect(otherTransform.rotation).to.be.equal(0); + }); + }); +}); diff --git a/packages/math/test/index.js b/packages/math/test/index.js index 5cfdbb6..1b8cc90 100644 --- a/packages/math/test/index.js +++ b/packages/math/test/index.js @@ -6,3 +6,4 @@ require('./Polygon'); require('./Rectangle'); require('./RoundedRectangle'); +require('./Transform'); diff --git a/bundles/pixi.js/src/deprecated.js b/bundles/pixi.js/src/deprecated.js index a78cbbc..402176f 100644 --- a/bundles/pixi.js/src/deprecated.js +++ b/bundles/pixi.js/src/deprecated.js @@ -56,6 +56,55 @@ }, /** + * @class PIXI.TransformStatic + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformStatic: { + get() + { + warn('PIXI.TransformStatic has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * @class PIXI.TransformBase + * @deprecated since 5.0.0 + * @see PIXI.Transform + */ + TransformBase: { + get() + { + warn('PIXI.TransformBase has been removed, use PIXI.Transform'); + + return PIXI.Transform; + }, + }, + + /** + * Constants that specify the transform type. + * + * @static + * @constant + * @name TRANSFORM_MODE + * @memberof PIXI + * @type {object} + * @deprecated since 5.0.0 + * @property {number} STATIC + * @property {number} DYNAMIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.TRANSFORM_MODE has been removed'); + + return { STATIC: 0, DYNAMIC: 1 }; + }, + }, + + /** * @class PIXI.WebGLRenderer * @see PIXI.Renderer * @deprecated since 5.0.0 @@ -453,4 +502,28 @@ this.renderAdvanced(renderer); }; + + Object.defineProperties(PIXI.settings, { + /** + * Default transform type. + * + * @static + * @deprecated since 5.0.0 + * @memberof PIXI.settings + * @type {PIXI.TRANSFORM_MODE} + * @default PIXI.TRANSFORM_MODE.STATIC + */ + TRANSFORM_MODE: { + get() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + + return 0; + }, + set() + { + warn('PIXI.settings.TRANSFORM_MODE has been removed.'); + }, + }, + }); } diff --git a/packages/display/package.json b/packages/display/package.json index 22978b1..8b6eec0 100644 --- a/packages/display/package.json +++ b/packages/display/package.json @@ -29,7 +29,6 @@ "lib" ], "dependencies": { - "@pixi/settings": "^5.0.0-alpha", "@pixi/math": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "eventemitter3": "^2.0.0", diff --git a/packages/display/src/DisplayObject.js b/packages/display/src/DisplayObject.js index df5be83..cbd35d4 100644 --- a/packages/display/src/DisplayObject.js +++ b/packages/display/src/DisplayObject.js @@ -1,9 +1,5 @@ import EventEmitter from 'eventemitter3'; -import { settings } from './settings'; -import { Rectangle } from '@pixi/math'; -import { TRANSFORM_MODE } from './const'; -import TransformStatic from './TransformStatic'; -import Transform from './Transform'; +import { Rectangle, Transform } from '@pixi/math'; import Bounds from './Bounds'; // _tempDisplayObjectParent = new DisplayObject(); @@ -24,8 +20,6 @@ { super(); - const TransformClass = settings.TRANSFORM_MODE === TRANSFORM_MODE.STATIC ? TransformStatic : Transform; - this.tempDisplayObjectParent = null; // TODO: need to create Transform from factory @@ -35,7 +29,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new Transform(); /** * The opacity of the object. diff --git a/packages/display/src/Transform.js b/packages/display/src/Transform.js deleted file mode 100644 index 7db190d..0000000 --- a/packages/display/src/Transform.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Point, ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * local transformation is calculated from position,scale,skew and rotation - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class Transform extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.Point} - */ - this.position = new Point(0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.Point} - */ - this.scale = new Point(1, 1); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.Point} - */ - this.pivot = new Point(0, 0); - - /** - * The rotation value of the object, in radians - * - * @member {Number} - * @private - */ - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - } - - /** - * Updates the skew values when the skew or rotation changes. - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - lt.a = this._cx * this.scale.x; - lt.b = this._sx * this.scale.x; - lt.c = this._cy * this.scale.y; - lt.d = this._sy * this.scale.y; - - lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c)); - lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d)); - - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/TransformBase.js b/packages/display/src/TransformBase.js deleted file mode 100644 index fae9874..0000000 --- a/packages/display/src/TransformBase.js +++ /dev/null @@ -1,72 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Generic class to deal with traditional 2D matrix transforms - * - * @class - * @memberof PIXI - */ -export default class TransformBase -{ - /** - * - */ - constructor() - { - /** - * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() - * - * @member {PIXI.Matrix} - */ - this.worldTransform = new Matrix(); - - /** - * The local matrix transform - * - * @member {PIXI.Matrix} - */ - this.localTransform = new Matrix(); - - this._worldID = 0; - this._parentID = 0; - } - - /** - * TransformBase does not have decomposition, so this function wont do anything - */ - updateLocalTransform() - { - // empty - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.TransformBase} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - const lt = this.localTransform; - - // concat the parent matrix with the objects transform. - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._worldID++; - } -} - -/** - * Updates the values of the object and applies the parent's transform. - * @param parentTransform {PIXI.Transform} The transform of the parent of this object - * - */ -TransformBase.prototype.updateWorldTransform = TransformBase.prototype.updateTransform; - -TransformBase.IDENTITY = new TransformBase(); diff --git a/packages/display/src/TransformStatic.js b/packages/display/src/TransformStatic.js deleted file mode 100644 index c212efe..0000000 --- a/packages/display/src/TransformStatic.js +++ /dev/null @@ -1,179 +0,0 @@ -import { ObservablePoint } from '@pixi/math'; -import TransformBase from './TransformBase'; - -/** - * Transform that takes care about its versions - * - * @class - * @extends PIXI.TransformBase - * @memberof PIXI - */ -export default class TransformStatic extends TransformBase -{ - /** - * - */ - constructor() - { - super(); - - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @member {PIXI.ObservablePoint} - */ - this.position = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The scale factor of the object. - * - * @member {PIXI.ObservablePoint} - */ - this.scale = new ObservablePoint(this.onChange, this, 1, 1); - - /** - * The pivot point of the displayObject that it rotates around - * - * @member {PIXI.ObservablePoint} - */ - this.pivot = new ObservablePoint(this.onChange, this, 0, 0); - - /** - * The skew amount, on the x and y axis. - * - * @member {PIXI.ObservablePoint} - */ - this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); - - this._rotation = 0; - - this._cx = 1; // cos rotation + skewY; - this._sx = 0; // sin rotation + skewY; - this._cy = 0; // cos rotation + Math.PI/2 - skewX; - this._sy = 1; // sin rotation + Math.PI/2 - skewX; - - this._localID = 0; - this._currentLocalID = 0; - } - - /** - * Called when a value changes. - * - * @private - */ - onChange() - { - this._localID++; - } - - /** - * Called when skew or rotation changes - * - * @private - */ - updateSkew() - { - this._cx = Math.cos(this._rotation + this.skew._y); - this._sx = Math.sin(this._rotation + this.skew._y); - this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 - this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 - - this._localID++; - } - - /** - * Updates only local matrix - */ - updateLocalTransform() - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - } - - /** - * Updates the values of the object and applies the parent's transform. - * - * @param {PIXI.Transform} parentTransform - The transform of the parent of this object - */ - updateTransform(parentTransform) - { - const lt = this.localTransform; - - if (this._localID !== this._currentLocalID) - { - // get the matrix values of the displayobject based on its transform properties.. - lt.a = this._cx * this.scale._x; - lt.b = this._sx * this.scale._x; - lt.c = this._cy * this.scale._y; - lt.d = this._sy * this.scale._y; - - lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); - lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); - this._currentLocalID = this._localID; - - // force an update.. - this._parentID = -1; - } - - if (this._parentID !== parentTransform._worldID) - { - // concat the parent matrix with the objects transform. - const pt = parentTransform.worldTransform; - const wt = this.worldTransform; - - wt.a = (lt.a * pt.a) + (lt.b * pt.c); - wt.b = (lt.a * pt.b) + (lt.b * pt.d); - wt.c = (lt.c * pt.a) + (lt.d * pt.c); - wt.d = (lt.c * pt.b) + (lt.d * pt.d); - wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; - wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; - - this._parentID = parentTransform._worldID; - - // update the id of the transform.. - this._worldID++; - } - } - - /** - * Decomposes a matrix and sets the transforms properties based on it. - * - * @param {PIXI.Matrix} matrix - The matrix to decompose - */ - setFromMatrix(matrix) - { - matrix.decompose(this); - this._localID++; - } - - /** - * The rotation of the object in radians. - * - * @member {number} - */ - get rotation() - { - return this._rotation; - } - - set rotation(value) // eslint-disable-line require-jsdoc - { - this._rotation = value; - this.updateSkew(); - } -} diff --git a/packages/display/src/const.js b/packages/display/src/const.js deleted file mode 100644 index 78c5955..0000000 --- a/packages/display/src/const.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Constants that specify the transform type. - * - * @static - * @constant - * @name TRANSFORM_MODE - * @memberof PIXI - * @type {object} - * @property {number} STATIC - * @property {number} DYNAMIC - */ -export const TRANSFORM_MODE = { - STATIC: 0, - DYNAMIC: 1, -}; diff --git a/packages/display/src/index.js b/packages/display/src/index.js index 342992d..2d664ea 100644 --- a/packages/display/src/index.js +++ b/packages/display/src/index.js @@ -1,10 +1,3 @@ export { default as Bounds } from './Bounds'; export { default as DisplayObject } from './DisplayObject'; export { default as Container } from './Container'; -export { default as Transform } from './Transform'; -export { default as TransformStatic } from './TransformStatic'; -export { default as TransformBase } from './TransformBase'; - -export * from './const'; - -import './settings'; diff --git a/packages/display/src/settings.js b/packages/display/src/settings.js deleted file mode 100644 index 59713bf..0000000 --- a/packages/display/src/settings.js +++ /dev/null @@ -1,13 +0,0 @@ -import { settings } from '@pixi/settings'; - -/** - * Default transform type. - * - * @static - * @memberof PIXI.settings - * @type {PIXI.TRANSFORM_MODE} - * @default PIXI.TRANSFORM_MODE.STATIC - */ -settings.TRANSFORM_MODE = 0; - -export { settings }; diff --git a/packages/display/test/DisplayObject.js b/packages/display/test/DisplayObject.js index 4794d64..ca1db96 100755 --- a/packages/display/test/DisplayObject.js +++ b/packages/display/test/DisplayObject.js @@ -1,5 +1,4 @@ -const { DisplayObject, Container, TRANSFORM_MODE, Transform, TransformStatic } = require('../'); -const { settings } = require('@pixi/settings'); +const { DisplayObject, Container } = require('../'); describe('PIXI.DisplayObject', function () { @@ -14,21 +13,6 @@ expect(object.renderable).to.be.true; expect(object.visible).to.be.true; }); - - it('should set the correct Transform', function () - { - settings.TRANSFORM_MODE = TRANSFORM_MODE.DYNAMIC; - - const dynamicTransform = new DisplayObject(); - - expect(dynamicTransform.transform).to.be.instanceof(Transform); - - settings.TRANSFORM_MODE = TRANSFORM_MODE.STATIC; - - const staticTransform = new DisplayObject(); - - expect(staticTransform.transform).to.be.instanceof(TransformStatic); - }); }); describe('setParent', function () diff --git a/packages/display/test/TransformStatic.js b/packages/display/test/TransformStatic.js deleted file mode 100644 index b5c47e2..0000000 --- a/packages/display/test/TransformStatic.js +++ /dev/null @@ -1,102 +0,0 @@ -const { TransformStatic } = require('../'); - -describe('PIXI.TransformStatic', function () -{ - describe('setFromMatrix', function () - { - it('should decompose negative scale into rotation', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(-2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.equal(0); - expect(skew.y).to.equal(0); - expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); - }); - - it('should decompose mirror into skew', function () - { - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(20, 10); - transform.scale.set(2, -3); - transform.rotation = Math.PI / 6; - transform.updateTransform(parent); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(20, eps); - expect(position.y).to.be.closeTo(10, eps); - expect(scale.x).to.be.closeTo(2, eps); - expect(scale.y).to.be.closeTo(3, eps); - expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); - expect(skew.y).to.be.closeTo(Math.PI / 6, eps); - expect(otherTransform.rotation).to.equal(0); - }); - - it('should apply skew before scale, like in adobe animate and spine', function () - { - // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy - - const eps = 1e-3; - - const transform = new TransformStatic(); - const parent = new TransformStatic(); - const otherTransform = new TransformStatic(); - - transform.position.set(387.8, 313.95); - transform.scale.set(0.572, 4.101); - transform.skew.set(-0.873, 0.175); - transform.updateTransform(parent); - - const mat = transform.worldTransform; - - expect(mat.a).to.be.closeTo(0.563, eps); - expect(mat.b).to.be.closeTo(0.100, eps); - expect(mat.c).to.be.closeTo(-3.142, eps); - expect(mat.d).to.be.closeTo(2.635, eps); - expect(mat.tx).to.be.closeTo(387.8, eps); - expect(mat.ty).to.be.closeTo(313.95, eps); - - otherTransform.setFromMatrix(transform.worldTransform); - - const position = otherTransform.position; - const scale = otherTransform.scale; - const skew = otherTransform.skew; - - expect(position.x).to.be.closeTo(387.8, eps); - expect(position.y).to.be.closeTo(313.95, eps); - expect(scale.x).to.be.closeTo(0.572, eps); - expect(scale.y).to.be.closeTo(4.101, eps); - expect(skew.x).to.be.closeTo(-0.873, eps); - expect(skew.y).to.be.closeTo(0.175, eps); - expect(otherTransform.rotation).to.be.equal(0); - }); - }); -}); diff --git a/packages/display/test/index.js b/packages/display/test/index.js index fea261d..2694808 100644 --- a/packages/display/test/index.js +++ b/packages/display/test/index.js @@ -1,6 +1,4 @@ -// require('./Bounds'); require('./Container'); require('./DisplayObject'); require('./toGlobal'); require('./toLocal'); -require('./TransformStatic'); diff --git a/packages/math/src/Matrix.js b/packages/math/src/Matrix.js index d0f53d4..8c32e1a 100644 --- a/packages/math/src/Matrix.js +++ b/packages/math/src/Matrix.js @@ -347,8 +347,8 @@ /** * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. * - * @param {PIXI.Transform|PIXI.TransformStatic} transform - The transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properties + * @param {PIXI.Transform} transform - The transform to apply the properties to. + * @return {PIXI.Transform} The transform with the newly applied properties */ decompose(transform) { diff --git a/packages/math/src/Transform.js b/packages/math/src/Transform.js new file mode 100644 index 0000000..1bf60a1 --- /dev/null +++ b/packages/math/src/Transform.js @@ -0,0 +1,195 @@ +import ObservablePoint from './ObservablePoint'; +import Matrix from './Matrix'; + +/** + * Transform that takes care about its versions + * + * @class + * @memberof PIXI + */ +export default class Transform +{ + /** + * + */ + constructor() + { + /** + * The global matrix transform. It can be swapped temporarily by some functions like getLocalBounds() + * + * @member {PIXI.Matrix} + */ + this.worldTransform = new Matrix(); + + /** + * The local matrix transform + * + * @member {PIXI.Matrix} + */ + this.localTransform = new Matrix(); + + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @member {PIXI.ObservablePoint} + */ + this.position = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The scale factor of the object. + * + * @member {PIXI.ObservablePoint} + */ + this.scale = new ObservablePoint(this.onChange, this, 1, 1); + + /** + * The pivot point of the displayObject that it rotates around + * + * @member {PIXI.ObservablePoint} + */ + this.pivot = new ObservablePoint(this.onChange, this, 0, 0); + + /** + * The skew amount, on the x and y axis. + * + * @member {PIXI.ObservablePoint} + */ + this.skew = new ObservablePoint(this.updateSkew, this, 0, 0); + + this._rotation = 0; + + this._cx = 1; // cos rotation + skewY; + this._sx = 0; // sin rotation + skewY; + this._cy = 0; // cos rotation + Math.PI/2 - skewX; + this._sy = 1; // sin rotation + Math.PI/2 - skewX; + + this._localID = 0; + this._currentLocalID = 0; + + this._worldID = 0; + this._parentID = 0; + } + + /** + * Called when a value changes. + * + * @private + */ + onChange() + { + this._localID++; + } + + /** + * Called when skew or rotation changes + * + * @private + */ + updateSkew() + { + this._cx = Math.cos(this._rotation + this.skew._y); + this._sx = Math.sin(this._rotation + this.skew._y); + this._cy = -Math.sin(this._rotation - this.skew._x); // cos, added PI/2 + this._sy = Math.cos(this._rotation - this.skew._x); // sin, added PI/2 + + this._localID++; + } + + /** + * Updates only local matrix + */ + updateLocalTransform() + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + } + + /** + * Updates the values of the object and applies the parent's transform. + * + * @param {PIXI.Transform} parentTransform - The transform of the parent of this object + */ + updateTransform(parentTransform) + { + const lt = this.localTransform; + + if (this._localID !== this._currentLocalID) + { + // get the matrix values of the displayobject based on its transform properties.. + lt.a = this._cx * this.scale._x; + lt.b = this._sx * this.scale._x; + lt.c = this._cy * this.scale._y; + lt.d = this._sy * this.scale._y; + + lt.tx = this.position._x - ((this.pivot._x * lt.a) + (this.pivot._y * lt.c)); + lt.ty = this.position._y - ((this.pivot._x * lt.b) + (this.pivot._y * lt.d)); + this._currentLocalID = this._localID; + + // force an update.. + this._parentID = -1; + } + + if (this._parentID !== parentTransform._worldID) + { + // concat the parent matrix with the objects transform. + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + + wt.a = (lt.a * pt.a) + (lt.b * pt.c); + wt.b = (lt.a * pt.b) + (lt.b * pt.d); + wt.c = (lt.c * pt.a) + (lt.d * pt.c); + wt.d = (lt.c * pt.b) + (lt.d * pt.d); + wt.tx = (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx; + wt.ty = (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty; + + this._parentID = parentTransform._worldID; + + // update the id of the transform.. + this._worldID++; + } + } + + /** + * Decomposes a matrix and sets the transforms properties based on it. + * + * @param {PIXI.Matrix} matrix - The matrix to decompose + */ + setFromMatrix(matrix) + { + matrix.decompose(this); + this._localID++; + } + + /** + * The rotation of the object in radians. + * + * @member {number} + */ + get rotation() + { + return this._rotation; + } + + set rotation(value) // eslint-disable-line require-jsdoc + { + this._rotation = value; + this.updateSkew(); + } +} + +Transform.IDENTITY = new Transform(); diff --git a/packages/math/src/index.js b/packages/math/src/index.js index caf52ea..a8ad9fd 100644 --- a/packages/math/src/index.js +++ b/packages/math/src/index.js @@ -7,7 +7,7 @@ export { default as ObservablePoint } from './ObservablePoint'; export { default as Matrix } from './Matrix'; export { default as GroupD8 } from './GroupD8'; - +export { default as Transform } from './Transform'; export { default as Circle } from './shapes/Circle'; export { default as Ellipse } from './shapes/Ellipse'; export { default as Polygon } from './shapes/Polygon'; diff --git a/packages/math/test/Transform.js b/packages/math/test/Transform.js new file mode 100644 index 0000000..e7064e7 --- /dev/null +++ b/packages/math/test/Transform.js @@ -0,0 +1,102 @@ +const { Transform } = require('../'); + +describe('PIXI.Transform', function () +{ + describe('setFromMatrix', function () + { + it('should decompose negative scale into rotation', function () + { + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(20, 10); + transform.scale.set(-2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.equal(0); + expect(skew.y).to.equal(0); + expect(otherTransform.rotation).to.be.closeTo(-5 * Math.PI / 6, eps); + }); + + it('should decompose mirror into skew', function () + { + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(20, 10); + transform.scale.set(2, -3); + transform.rotation = Math.PI / 6; + transform.updateTransform(parent); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(20, eps); + expect(position.y).to.be.closeTo(10, eps); + expect(scale.x).to.be.closeTo(2, eps); + expect(scale.y).to.be.closeTo(3, eps); + expect(skew.x).to.be.closeTo(5 * Math.PI / 6, eps); + expect(skew.y).to.be.closeTo(Math.PI / 6, eps); + expect(otherTransform.rotation).to.equal(0); + }); + + it('should apply skew before scale, like in adobe animate and spine', function () + { + // this example looks the same in CSS and in pixi, made with pixi-animate by @bigtimebuddy + + const eps = 1e-3; + + const transform = new Transform(); + const parent = new Transform(); + const otherTransform = new Transform(); + + transform.position.set(387.8, 313.95); + transform.scale.set(0.572, 4.101); + transform.skew.set(-0.873, 0.175); + transform.updateTransform(parent); + + const mat = transform.worldTransform; + + expect(mat.a).to.be.closeTo(0.563, eps); + expect(mat.b).to.be.closeTo(0.100, eps); + expect(mat.c).to.be.closeTo(-3.142, eps); + expect(mat.d).to.be.closeTo(2.635, eps); + expect(mat.tx).to.be.closeTo(387.8, eps); + expect(mat.ty).to.be.closeTo(313.95, eps); + + otherTransform.setFromMatrix(transform.worldTransform); + + const position = otherTransform.position; + const scale = otherTransform.scale; + const skew = otherTransform.skew; + + expect(position.x).to.be.closeTo(387.8, eps); + expect(position.y).to.be.closeTo(313.95, eps); + expect(scale.x).to.be.closeTo(0.572, eps); + expect(scale.y).to.be.closeTo(4.101, eps); + expect(skew.x).to.be.closeTo(-0.873, eps); + expect(skew.y).to.be.closeTo(0.175, eps); + expect(otherTransform.rotation).to.be.equal(0); + }); + }); +}); diff --git a/packages/math/test/index.js b/packages/math/test/index.js index 5cfdbb6..1b8cc90 100644 --- a/packages/math/test/index.js +++ b/packages/math/test/index.js @@ -6,3 +6,4 @@ require('./Polygon'); require('./Rectangle'); require('./RoundedRectangle'); +require('./Transform'); diff --git a/packages/sprite-tiling/src/TilingSprite.js b/packages/sprite-tiling/src/TilingSprite.js index 1c64980..d2f26c0 100644 --- a/packages/sprite-tiling/src/TilingSprite.js +++ b/packages/sprite-tiling/src/TilingSprite.js @@ -1,8 +1,7 @@ import { TextureMatrix, Texture } from '@pixi/core'; -import { Point, Rectangle } from '@pixi/math'; +import { Point, Rectangle, Transform } from '@pixi/math'; import { TextureCache } from '@pixi/utils'; import { Sprite } from '@pixi/sprite'; -import { TransformStatic } from '@pixi/display'; const tempPoint = new Point(); @@ -27,9 +26,9 @@ /** * Tile transform * - * @member {PIXI.TransformStatic} + * @member {PIXI.Transform} */ - this.tileTransform = new TransformStatic(); + this.tileTransform = new Transform(); // /// private