): void
@@ -395,7 +388,6 @@ export abstract class DisplayObject extends EventEmitter
/**
* Fired when this DisplayObject is added to a Container.
- *
* @instance
* @event added
* @param {PIXI.Container} container - The container added to.
@@ -403,15 +395,14 @@ export abstract class DisplayObject extends EventEmitter
/**
* Fired when this DisplayObject is removed from a Container.
- *
* @instance
* @event removed
* @param {PIXI.Container} container - The container removed from.
*/
/**
- * Fired when this DisplayObject is destroyed.
- *
+ * Fired when this DisplayObject is destroyed. This event is emitted once
+ * destroy is finished.
* @instance
* @event destroyed
*/
@@ -429,15 +420,11 @@ export abstract class DisplayObject extends EventEmitter
/**
* Renders the object using the WebGL renderer.
- *
* @param renderer - The renderer.
*/
abstract render(renderer: Renderer): void;
- /**
- * Recursively updates transform of all objects from the root to this one
- * internal function for toLocal()
- */
+ /** Recursively updates transform of all objects from the root to this one internal function for toLocal() */
protected _recursivePostUpdateTransform(): void
{
if (this.parent)
@@ -451,11 +438,7 @@ export abstract class DisplayObject extends EventEmitter
}
}
- /**
- * Updates the object transform for rendering.
- *
- * TODO - Optimization pass!
- */
+ /** Updates the object transform for rendering. TODO - Optimization pass! */
updateTransform(): void
{
this._boundsID++;
@@ -476,8 +459,8 @@ export abstract class DisplayObject extends EventEmitter
* calling `getBounds` on each object in a subtree will cause the total cost to increase quadratically as
* its height increases.
*
- * * The transforms of all objects in a container's **subtree** and of all **ancestors** are updated.
- * * The world bounds of all display objects in a container's **subtree** will also be recalculated.
+ * The transforms of all objects in a container's **subtree** and of all **ancestors** are updated.
+ * The world bounds of all display objects in a container's **subtree** will also be recalculated.
*
* The `_bounds` object stores the last calculation of the bounds. You can use to entirely skip bounds
* calculation if needed.
@@ -493,12 +476,11 @@ export abstract class DisplayObject extends EventEmitter
* `getBounds` should be called with `skipUpdate` equal to `true` in a render() call. This is because the transforms
* are guaranteed to be update-to-date. In fact, recalculating inside a render() call may cause corruption in certain
* cases.
- *
* @param skipUpdate - Setting to `true` will stop the transforms of the scene graph from
* being updated. This means the calculation returned MAY be out of date BUT will give you a
* nice performance boost.
* @param rect - Optional rectangle to store the result of the bounds calculation.
- * @return - The minimum axis-aligned rectangle in world space that fits around this object.
+ * @returns - The minimum axis-aligned rectangle in world space that fits around this object.
*/
getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle
{
@@ -538,9 +520,8 @@ export abstract class DisplayObject extends EventEmitter
/**
* Retrieves the local bounds of the displayObject as a rectangle object.
- *
* @param rect - Optional rectangle to store the result of the bounds calculation.
- * @return - The rectangular bounding area.
+ * @returns - The rectangular bounding area.
*/
getLocalBounds(rect?: Rectangle): Rectangle
{
@@ -583,12 +564,11 @@ export abstract class DisplayObject extends EventEmitter
/**
* Calculates the global position of the display object.
- *
* @param position - The world origin to calculate from.
* @param point - A Point object in which to store the value, optional
* (otherwise will create a new Point).
* @param skipUpdate - Should we skip the update transform.
- * @return - A point object representing the position of this object.
+ * @returns - A point object representing the position of this object.
*/
toGlobal(position: IPointData, point?: P, skipUpdate = false): P
{
@@ -617,13 +597,12 @@ export abstract class DisplayObject extends EventEmitter
/**
* Calculates the local position of the display object relative to another point.
- *
* @param position - The world origin to calculate from.
* @param from - The DisplayObject to calculate the global position from.
* @param point - A Point object in which to store the value, optional
* (otherwise will create a new Point).
* @param skipUpdate - Should we skip the update transform
- * @return - A point object representing the position of this object
+ * @returns - A point object representing the position of this object
*/
toLocal
(position: IPointData, from?: DisplayObject, point?: P, skipUpdate?: boolean): P
{
@@ -657,9 +636,8 @@ export abstract class DisplayObject extends EventEmitter
/**
* Set the parent Container of this DisplayObject.
- *
* @param container - The Container to add this DisplayObject to.
- * @return - The Container that this DisplayObject was added to.
+ * @returns - The Container that this DisplayObject was added to.
*/
setParent(container: Container): Container
{
@@ -675,7 +653,6 @@ export abstract class DisplayObject extends EventEmitter
/**
* Convenience function to set the position, scale, skew and pivot at once.
- *
* @param x - The X position
* @param y - The Y position
* @param scaleX - The X scale value
@@ -685,7 +662,7 @@ export abstract class DisplayObject extends EventEmitter
* @param skewY - The Y skew value
* @param pivotX - The X pivot value
* @param pivotY - The Y pivot value
- * @return - The DisplayObject instance
+ * @returns - The DisplayObject instance
*/
setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0): this
{
@@ -707,15 +684,15 @@ export abstract class DisplayObject extends EventEmitter
* remove the display object from its parent Container as well as remove
* all current event listeners and internal references. Do not use a DisplayObject
* after calling `destroy()`.
+ * @param _options
*/
- destroy(_options?: IDestroyOptions|boolean): void
+ destroy(_options?: IDestroyOptions | boolean): void
{
if (this.parent)
{
this.parent.removeChild(this);
}
- this.emit('destroyed');
- this.removeAllListeners();
+ this._destroyed = true;
this.transform = null;
this.parent = null;
@@ -730,7 +707,8 @@ export abstract class DisplayObject extends EventEmitter
this.interactive = false;
this.interactiveChildren = false;
- this._destroyed = true;
+ this.emit('destroyed');
+ this.removeAllListeners();
}
/**
@@ -756,7 +734,6 @@ export abstract class DisplayObject extends EventEmitter
* elem.updateTransform();
* elem.disableTempParent(cacheParent);
* ```
- *
* @returns - current parent
*/
enableTempParent(): Container
@@ -770,7 +747,6 @@ export abstract class DisplayObject extends EventEmitter
/**
* Pair method for `enableTempParent`
- *
* @param cacheParent - Actual parent of element
*/
disableTempParent(cacheParent: Container): void
@@ -808,7 +784,6 @@ export abstract class DisplayObject extends EventEmitter
/**
* Current transform of the object based on world (parent) factors.
- *
* @readonly
*/
get worldTransform(): Matrix
@@ -818,7 +793,6 @@ export abstract class DisplayObject extends EventEmitter
/**
* Current transform of the object based on local factors: position, scale, other stuff.
- *
* @readonly
*/
get localTransform(): Matrix
@@ -828,15 +802,14 @@ export abstract class DisplayObject extends EventEmitter
/**
* The coordinate of the object relative to the local coordinates of the parent.
- *
- * @since PixiJS 4
+ * @since 4.0.0
*/
get position(): ObservablePoint
{
return this.transform.position;
}
- set position(value: ObservablePoint)
+ set position(value: IPointData)
{
this.transform.position.copyFrom(value);
}
@@ -845,15 +818,14 @@ export abstract class DisplayObject extends EventEmitter
* The scale factors of this object along the local coordinate axes.
*
* The default scale is (1, 1).
- *
- * @since PixiJS 4
+ * @since 4.0.0
*/
get scale(): ObservablePoint
{
return this.transform.scale;
}
- set scale(value: ObservablePoint)
+ set scale(value: IPointData)
{
this.transform.scale.copyFrom(value);
}
@@ -863,30 +835,28 @@ export abstract class DisplayObject extends EventEmitter
* is the projection of `pivot` in the parent's local space.
*
* By default, the pivot is the origin (0, 0).
- *
- * @since PixiJS 4
+ * @since 4.0.0
*/
get pivot(): ObservablePoint
{
return this.transform.pivot;
}
- set pivot(value: ObservablePoint)
+ set pivot(value: IPointData)
{
this.transform.pivot.copyFrom(value);
}
/**
* The skew factor for the object in radians.
- *
- * @since PixiJS 4
+ * @since 4.0.0
*/
get skew(): ObservablePoint
{
return this.transform.skew;
}
- set skew(value: ObservablePoint)
+ set skew(value: IPointData)
{
this.transform.skew.copyFrom(value);
}
@@ -925,7 +895,6 @@ export abstract class DisplayObject extends EventEmitter
* If a container has the sortableChildren property set to true, children will be automatically
* sorted by zIndex value; a higher value will mean it will be moved towards the end of the array,
* and thus rendered on top of other display objects within the same container.
- *
* @see PIXI.Container#sortableChildren
*/
get zIndex(): number
@@ -944,7 +913,6 @@ export abstract class DisplayObject extends EventEmitter
/**
* Indicates if the object is globally visible.
- *
* @readonly
*/
get worldVisible(): boolean
@@ -968,10 +936,11 @@ export abstract class DisplayObject extends EventEmitter
* Sets a mask for the displayObject. A mask is an object that limits the visibility of an
* object to the shape of the mask applied to it. In PixiJS a regular mask must be a
* {@link PIXI.Graphics} or a {@link PIXI.Sprite} object. This allows for much faster masking in canvas as it
- * utilities shape clipping. To remove a mask, set this property to `null`.
+ * utilities shape clipping. Furthermore, a mask of an object must be in the subtree of its parent.
+ * Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.
+ * To remove a mask, set this property to `null`.
*
* For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.
- *
* @example
* const graphics = new PIXI.Graphics();
* graphics.beginFill(0xFF3300);
@@ -980,15 +949,14 @@ export abstract class DisplayObject extends EventEmitter
*
* const sprite = new PIXI.Sprite(texture);
* sprite.mask = graphics;
- *
* @todo At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask.
*/
- get mask(): Container|MaskData|null
+ get mask(): Container | MaskData | null
{
return this._mask;
}
- set mask(value: Container|MaskData|null)
+ set mask(value: Container | MaskData | null)
{
if (this._mask === value)
{
@@ -1039,7 +1007,6 @@ export class TemporaryDisplayObject extends DisplayObject
/**
* DisplayObject default updateTransform, does not update children of container.
* Will crash if there's no parent element.
- *
* @memberof PIXI.DisplayObject#
* @method displayObjectUpdateTransform
*/
diff --git a/packages/display/src/settings.ts b/packages/display/src/settings.ts
index 5de2e34327..1368a2dc1e 100644
--- a/packages/display/src/settings.ts
+++ b/packages/display/src/settings.ts
@@ -11,7 +11,6 @@ import { settings } from '@pixi/settings';
*
* Also be aware of that this may not work nicely with the addChildAt() function,
* as the zIndex sorting may cause the child to automatically sorted to another position.
- *
* @static
* @constant
* @name SORTABLE_CHILDREN
diff --git a/packages/display/test/Container.tests.ts b/packages/display/test/Container.tests.ts
index 73dc10426d..28fcd11d53 100644
--- a/packages/display/test/Container.tests.ts
+++ b/packages/display/test/Container.tests.ts
@@ -6,47 +6,50 @@ import { Rectangle } from '@pixi/math';
import sinon from 'sinon';
import { expect } from 'chai';
-function testAddChild(fn)
+function testAddChild(fn: any)
{
- return function ()
+ return () =>
{
- fn(function (container, obj)
+ fn((container: Container, obj: Container) =>
{
container.addChild(obj);
});
- fn(function (container, obj)
+ fn((container: Container, obj: Container) =>
{
+ // TODO: is this used?
+ // @ts-expect-error - legacy test
container.addChildAt(obj);
});
};
}
-function testRemoveChild(fn)
+function testRemoveChild(fn: any)
{
- return function ()
+ return () =>
{
- fn(function (container, obj)
+ fn((container: Container, obj: Container) =>
{
container.removeChild(obj);
});
- fn(function (container, obj)
+ fn((container: Container, obj: Container) =>
{
container.removeChildAt(container.children.indexOf(obj));
});
- fn(function (container, obj)
+ fn((container: Container, obj: Container) =>
{
container.removeChildren(container.children.indexOf(obj), container.children.indexOf(obj) + 1);
});
};
}
-describe('Container', function ()
+describe('Container', () =>
{
- describe('parent', function ()
+ describe('parent', () =>
{
- it('should be present when adding children to Container', function ()
+ it('should be present when adding children to Container', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
expect(container.children.length).to.be.equals(0);
@@ -56,24 +59,25 @@ describe('Container', function ()
});
});
- describe('events', function ()
+ describe('events', () =>
{
- it('should trigger "added", "removed", "childAdded", and "childRemoved" events on itself and children', function ()
+ it('should trigger "added", "removed", "childAdded", and "childRemoved" events on itself and children', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
let triggeredAdded = false;
let triggeredRemoved = false;
let triggeredChildAdded = false;
let triggeredChildRemoved = false;
- child.on('added', (to) =>
+ child.on('added', (to: Container) =>
{
triggeredAdded = true;
expect(container.children.length).to.be.equals(1);
expect(child.parent).to.be.equals(to);
});
- child.on('removed', (from) =>
+ child.on('removed', (from: Container) =>
{
triggeredRemoved = true;
expect(container.children.length).to.be.equals(0);
@@ -108,22 +112,24 @@ describe('Container', function ()
});
});
- describe('addChild', function ()
+ describe('addChild', () =>
{
- it('should remove from current parent', function ()
+ it('should remove from current parent', () =>
{
const parent = new Container();
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
assertRemovedFromParent(parent, container, child, () => { container.addChild(child); });
});
- it('should call onChildrenChange', function ()
+ it('should call onChildrenChange', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
- const spy = sinon.spy(container, 'onChildrenChange');
+ const spy = sinon.spy(container, 'onChildrenChange' as keyof Container);
container.addChild(child);
@@ -131,42 +137,45 @@ describe('Container', function ()
expect(spy).to.have.been.calledWith(0);
});
- it('should flag child transform and container bounds for recalculation', testAddChild(function (mockAddChild)
- {
- const container = new Container();
- const child = new Container();
+ it('should flag child transform and container bounds for recalculation', testAddChild(
+ (mockAddChild: (container: Container, child: Container) => void) =>
+ {
+ const container = new Container();
+ const child = new Container();
- container.getBounds();
- child.getBounds();
+ container.getBounds();
+ child.getBounds();
- const boundsID = container._boundsID;
- const childParentID = child.transform._parentID;
+ const boundsID = container['_boundsID'];
+ const childParentID = child.transform._parentID;
- mockAddChild(container, child);
+ mockAddChild(container, child);
- expect(boundsID).to.not.be.equals(container._boundsID);
- expect(childParentID).to.not.be.equals(child.transform._parentID);
- }));
+ expect(boundsID).to.not.be.equals(container['_boundsID']);
+ expect(childParentID).to.not.be.equals(child.transform._parentID);
+ }));
});
- describe('removeChildAt', function ()
+ describe('removeChildAt', () =>
{
- it('should remove from current parent', function ()
+ it('should remove from current parent', () =>
{
const parent = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
assertRemovedFromParent(parent, null, child, () => { parent.removeChildAt(0); });
});
- it('should call onChildrenChange', function ()
+ it('should call onChildrenChange', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
container.addChild(child);
- const spy = sinon.spy(container, 'onChildrenChange');
+ const spy = sinon.spy(container, 'onChildrenChange' as keyof Container);
container.removeChildAt(0);
expect(spy).to.have.been.called;
@@ -174,13 +183,15 @@ describe('Container', function ()
});
});
- describe('addChildAt', function ()
+ describe('addChildAt', () =>
{
- it('should allow placements at start', function ()
+ it('should allow placements at start', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject());
container.addChildAt(child, 0);
@@ -188,11 +199,13 @@ describe('Container', function ()
expect(container.children[0]).to.be.equals(child);
});
- it('should allow placements at end', function ()
+ it('should allow placements at end', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject());
container.addChildAt(child, 1);
@@ -200,34 +213,39 @@ describe('Container', function ()
expect(container.children[1]).to.be.equals(child);
});
- it('should throw on out-of-bounds', function ()
+ it('should throw on out-of-bounds', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject());
expect(() => container.addChildAt(child, -1)).to.throw('The index -1 supplied is out of bounds 1');
expect(() => container.addChildAt(child, 2)).to.throw('The index 2 supplied is out of bounds 1');
});
- it('should remove from current parent', function ()
+ it('should remove from current parent', () =>
{
const parent = new Container();
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
assertRemovedFromParent(parent, container, child, () => { container.addChildAt(child, 0); });
});
- it('should call onChildrenChange', function ()
+ it('should call onChildrenChange', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject());
- const spy = sinon.spy(container, 'onChildrenChange');
+ const spy = sinon.spy(container, 'onChildrenChange' as keyof Container);
container.addChildAt(child, 0);
@@ -236,24 +254,28 @@ describe('Container', function ()
});
});
- describe('removeChild', function ()
+ describe('removeChild', () =>
{
- it('should ignore non-children', function ()
+ it('should ignore non-children', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
container.addChild(child);
+ // @ts-expect-error - instantiating DisplayObject
container.removeChild(new DisplayObject());
expect(container.children.length).to.be.equals(1);
});
- it('should remove all children supplied', function ()
+ it('should remove all children supplied', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
container.addChild(child1, child2);
@@ -265,14 +287,15 @@ describe('Container', function ()
expect(container.children.length).to.be.equals(0);
});
- it('should call onChildrenChange', function ()
+ it('should call onChildrenChange', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
container.addChild(child);
- const spy = sinon.spy(container, 'onChildrenChange');
+ const spy = sinon.spy(container, 'onChildrenChange' as keyof Container);
container.removeChild(child);
@@ -280,39 +303,43 @@ describe('Container', function ()
expect(spy).to.have.been.calledWith(0);
});
- it('should flag transform for recalculation', testRemoveChild(function (mockRemoveChild)
- {
- const container = new Container();
- const child = new Container();
+ it('should flag transform for recalculation', testRemoveChild(
+ (mockRemoveChild: (c: Container, b: Container) => void) =>
+ {
+ const container = new Container();
+ const child = new Container();
- container.addChild(child);
- container.getBounds();
+ container.addChild(child);
+ container.getBounds();
- const childParentID = child.transform._parentID;
- const boundsID = container._boundsID;
+ const childParentID = child.transform._parentID;
+ const boundsID = container['_boundsID'];
- mockRemoveChild(container, child);
+ mockRemoveChild(container, child);
- expect(childParentID).to.not.be.equals(child.transform._parentID);
- expect(boundsID).to.not.be.equals(container._boundsID);
- }));
+ expect(childParentID).to.not.be.equals(child.transform._parentID);
+ expect(boundsID).to.not.be.equals(container['_boundsID']);
+ }));
});
- describe('getChildIndex', function ()
+ describe('getChildIndex', () =>
{
- it('should return the correct index', function ()
+ it('should return the correct index', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject(), child, new DisplayObject());
expect(container.getChildIndex(child)).to.be.equals(1);
});
- it('should throw when child does not exist', function ()
+ it('should throw when child does not exist', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
expect(() => container.getChildIndex(child))
@@ -320,9 +347,9 @@ describe('Container', function ()
});
});
- describe('getChildAt', function ()
+ describe('getChildAt', () =>
{
- it('should throw when out-of-bounds', function ()
+ it('should throw when out-of-bounds', () =>
{
const container = new Container();
@@ -331,11 +358,12 @@ describe('Container', function ()
});
});
- describe('setChildIndex', function ()
+ describe('setChildIndex', () =>
{
- it('should throw on out-of-bounds', function ()
+ it('should throw on out-of-bounds', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
container.addChild(child);
@@ -344,22 +372,26 @@ describe('Container', function ()
expect(() => container.setChildIndex(child, 1)).to.throw('The index 1 supplied is out of bounds 1');
});
- it('should throw when child does not belong', function ()
+ it('should throw when child does not belong', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject());
expect(() => container.setChildIndex(child, 0))
.to.throw('The supplied DisplayObject must be a child of the caller');
});
- it('should set index', function ()
+ it('should set index', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(child, new DisplayObject(), new DisplayObject());
expect(container.children.indexOf(child)).to.be.equals(0);
@@ -373,14 +405,16 @@ describe('Container', function ()
expect(container.children.indexOf(child)).to.be.equals(0);
});
- it('should call onChildrenChange', function ()
+ it('should call onChildrenChange', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(child, new DisplayObject());
- const spy = sinon.spy(container, 'onChildrenChange');
+ const spy = sinon.spy(container, 'onChildrenChange' as keyof Container);
container.setChildIndex(child, 1);
@@ -389,17 +423,19 @@ describe('Container', function ()
});
});
- describe('swapChildren', function ()
+ describe('swapChildren', () =>
{
- it('should call onChildrenChange', function ()
+ it('should call onChildrenChange', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
container.addChild(child1, child2);
- const spy = sinon.spy(container, 'onChildrenChange');
+ const spy = sinon.spy(container, 'onChildrenChange' as keyof Container);
container.swapChildren(child1, child2);
expect(spy).to.have.been.called;
@@ -411,37 +447,44 @@ describe('Container', function ()
expect(spy).to.have.been.calledWith(0);
});
- it('should not call onChildrenChange if supplied children are equal', function ()
+ it('should not call onChildrenChange if supplied children are equal', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(child, new DisplayObject());
- const spy = sinon.spy(container, 'onChildrenChange');
+ const spy = sinon.spy(container, 'onChildrenChange' as keyof Container);
container.swapChildren(child, child);
expect(spy).to.not.have.been.called;
});
- it('should throw if children do not belong', function ()
+ it('should throw if children do not belong', () =>
{
const container = new Container();
const child = new Container();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(child, new DisplayObject());
+ // @ts-expect-error - instantiating DisplayObject
expect(() => container.swapChildren(child, new DisplayObject()))
.to.throw('The supplied DisplayObject must be a child of the caller');
+ // @ts-expect-error - instantiating DisplayObject
expect(() => container.swapChildren(new DisplayObject(), child))
.to.throw('The supplied DisplayObject must be a child of the caller');
});
- it('should result in swapped child positions', function ()
+ it('should result in swapped child positions', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
container.addChild(child1, child2);
@@ -456,9 +499,9 @@ describe('Container', function ()
});
});
- describe('updateTransform', function ()
+ describe('updateTransform', () =>
{
- it('should call sortChildren if sortDirty and sortableChildren are true', function ()
+ it('should call sortChildren if sortDirty and sortableChildren are true', () =>
{
const parent = new Container();
const container = new Container();
@@ -476,7 +519,7 @@ describe('Container', function ()
expect(canvasSpy).to.have.been.called;
});
- it('should not call sortChildren if sortDirty is false', function ()
+ it('should not call sortChildren if sortDirty is false', () =>
{
const parent = new Container();
const container = new Container();
@@ -494,7 +537,7 @@ describe('Container', function ()
expect(canvasSpy).to.not.have.been.called;
});
- it('should not call sortChildren if sortableChildren is false', function ()
+ it('should not call sortChildren if sortableChildren is false', () =>
{
const parent = new Container();
const container = new Container();
@@ -513,61 +556,62 @@ describe('Container', function ()
});
});
- describe('render', function ()
+ describe('render', () =>
{
- it('should not render when object not visible', function ()
+ it('should not render when object not visible', () =>
{
const container = new Container();
- const webGLSpy = sinon.spy(container._render);
+ const webGLSpy = sinon.spy(container['_render']);
container.visible = false;
- container.render();
+ container.render(undefined);
expect(webGLSpy).to.not.have.been.called;
});
- it('should not render when alpha is zero', function ()
+ it('should not render when alpha is zero', () =>
{
const container = new Container();
- const webGLSpy = sinon.spy(container._render);
+ const webGLSpy = sinon.spy(container['_render']);
container.worldAlpha = 0;
- container.render();
+ container.render(undefined);
expect(webGLSpy).to.not.have.been.called;
});
- it('should not render when object not renderable', function ()
+ it('should not render when object not renderable', () =>
{
const container = new Container();
- const webGLSpy = sinon.spy(container._render);
+ const webGLSpy = sinon.spy(container['_render']);
container.renderable = false;
- container.render();
+ container.render(undefined);
expect(webGLSpy).to.not.have.been.called;
});
- it('should render children', function ()
+ it('should render children', () =>
{
const container = new Container();
const child = new Container();
- const webGLSpy = sinon.spy(child, '_render');
+ const webGLSpy = sinon.spy(child, '_render' as keyof Container);
container.addChild(child);
- container.render();
+ container.render(undefined);
expect(webGLSpy).to.have.been.called;
});
});
- describe('removeChildren', function ()
+ describe('removeChildren', () =>
{
- it('should remove all children when no arguments supplied', function ()
+ it('should remove all children when no arguments supplied', () =>
{
const container = new Container();
let removed = [];
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject(), new DisplayObject(), new DisplayObject());
expect(container.children.length).to.be.equals(3);
@@ -578,7 +622,7 @@ describe('Container', function ()
expect(removed.length).to.be.equals(3);
});
- it('should return empty array if no children', function ()
+ it('should return empty array if no children', () =>
{
const container = new Container();
const removed = container.removeChildren();
@@ -586,21 +630,23 @@ describe('Container', function ()
expect(removed.length).to.be.equals(0);
});
- it('should handle a range greater than length', function ()
+ it('should handle a range greater than length', () =>
{
const container = new Container();
let removed = [];
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject());
removed = container.removeChildren(0, 2);
expect(removed.length).to.be.equals(1);
});
- it('should throw outside acceptable range', function ()
+ it('should throw outside acceptable range', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
container.addChild(new DisplayObject());
expect(() => container.removeChildren(2))
@@ -612,11 +658,12 @@ describe('Container', function ()
});
});
- describe('destroy', function ()
+ describe('destroy', () =>
{
- it('should not destroy children by default', function ()
+ it('should not destroy children by default', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
container.addChild(child);
@@ -626,9 +673,10 @@ describe('Container', function ()
expect(child.transform).to.not.be.null;
});
- it('should allow children destroy', function ()
+ it('should allow children destroy', () =>
{
let container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
let child = new DisplayObject();
container.addChild(child);
@@ -639,6 +687,7 @@ describe('Container', function ()
expect(child.transform).to.be.null;
container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
child = new DisplayObject();
container.addChild(child);
@@ -650,9 +699,9 @@ describe('Container', function ()
});
});
- describe('getLocalBounds', function ()
+ describe('getLocalBounds', () =>
{
- it('should recalculate children transform by default', function ()
+ it('should recalculate children transform by default', () =>
{
const root = new Container();
const container = new Container();
@@ -671,14 +720,15 @@ describe('Container', function ()
expect(child.transform.worldTransform.ty).to.equal(40);
});
- it('should recalculate bounds if children position was changed', function ()
+ it('should recalculate bounds if children position was changed', () =>
{
const root = new Container();
const container = new Container();
const child = new Container();
let bounds = null;
- child._calculateBounds = function ()
+ // eslint-disable-next-line func-names
+ child['_calculateBounds'] = function ()
{
this._bounds.addFrame(this.transform, 0, 0, 1, 1);
};
@@ -699,9 +749,9 @@ describe('Container', function ()
});
});
- describe('width', function ()
+ describe('width', () =>
{
- it('should reset scale', function ()
+ it('should reset scale', () =>
{
const container = new Container();
@@ -713,9 +763,9 @@ describe('Container', function ()
});
});
- describe('height', function ()
+ describe('height', () =>
{
- it('should reset scale', function ()
+ it('should reset scale', () =>
{
const container = new Container();
@@ -727,11 +777,12 @@ describe('Container', function ()
});
});
- describe('sortDirty', function ()
+ describe('sortDirty', () =>
{
- it('should set sortDirty flag to true when adding a new child', function ()
+ it('should set sortDirty flag to true when adding a new child', () =>
{
const parent = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
expect(parent.sortDirty).to.be.false;
@@ -741,9 +792,10 @@ describe('Container', function ()
expect(parent.sortDirty).to.be.true;
});
- it('should set sortDirty flag to true when changing a child zIndex', function ()
+ it('should set sortDirty flag to true when changing a child zIndex', () =>
{
const parent = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child = new DisplayObject();
parent.addChild(child);
@@ -756,9 +808,9 @@ describe('Container', function ()
});
});
- describe('sortChildren', function ()
+ describe('sortChildren', () =>
{
- it('should reset sortDirty flag', function ()
+ it('should reset sortDirty flag', () =>
{
const container = new Container();
@@ -769,10 +821,12 @@ describe('Container', function ()
expect(container.sortDirty).to.be.false;
});
- it('should call sort when at least one child has a zIndex', function ()
+ it('should call sort when at least one child has a zIndex', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
const spy = sinon.spy(container.children, 'sort');
@@ -784,10 +838,12 @@ describe('Container', function ()
expect(spy).to.have.been.called;
});
- it('should not call sort when children have no zIndex', function ()
+ it('should not call sort when children have no zIndex', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
const spy = sinon.spy(container.children, 'sort');
@@ -798,12 +854,16 @@ describe('Container', function ()
expect(spy).to.not.have.been.called;
});
- it('should sort children by zIndex value', function ()
+ it('should sort children by zIndex value', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child3 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child4 = new DisplayObject();
child1.zIndex = 20;
@@ -825,12 +885,16 @@ describe('Container', function ()
expect(container.children.indexOf(child4)).to.be.equals(0);
});
- it('should sort children by current array order if zIndex values match', function ()
+ it('should sort children by current array order if zIndex values match', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child3 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child4 = new DisplayObject();
child1.zIndex = 20;
@@ -858,12 +922,16 @@ describe('Container', function ()
expect(container.children.indexOf(child4)).to.be.equals(1);
});
- it('should sort children in the same way despite being called multiple times', function ()
+ it('should sort children in the same way despite being called multiple times', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child3 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child4 = new DisplayObject();
child1.zIndex = 10;
@@ -905,12 +973,16 @@ describe('Container', function ()
expect(container.children.indexOf(child4)).to.be.equals(0);
});
- it('should sort new children added correctly', function ()
+ it('should sort new children added correctly', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child3 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child4 = new DisplayObject();
child1.zIndex = 20;
@@ -944,12 +1016,16 @@ describe('Container', function ()
expect(container.children.indexOf(child4)).to.be.equals(0);
});
- it('should sort children after a removal correctly', function ()
+ it('should sort children after a removal correctly', () =>
{
const container = new Container();
+ // @ts-expect-error - instantiating DisplayObject
const child1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child2 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child3 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const child4 = new DisplayObject();
child1.zIndex = 20;
@@ -984,7 +1060,7 @@ describe('Container', function ()
});
});
- function assertRemovedFromParent(parent, container, child, functionToAssert)
+ function assertRemovedFromParent(parent: Container, container: Container, child: Container, functionToAssert: () => void)
{
parent.addChild(child);
@@ -997,29 +1073,31 @@ describe('Container', function ()
expect(child.parent).to.be.equals(container);
}
- describe('culling', function ()
+ describe('culling', () =>
{
- before(function ()
+ let renderer: Renderer;
+ let filterPush: sinon.SinonSpy;
+
+ before(() =>
{
- this.renderer = new Renderer({ width: 100, height: 100 });
- this.filterPush = sinon.spy(this.renderer.filter, 'push');
+ renderer = new Renderer({ width: 100, height: 100 });
+ filterPush = sinon.spy(renderer.filter, 'push');
});
- after(function ()
+ after(() =>
{
- this.renderer.destroy();
- this.renderer = null;
- this.filterPush = null;
+ renderer.destroy();
+ renderer = null;
+ filterPush = null;
});
- afterEach(function ()
+ afterEach(() =>
{
- this.filterPush.resetHistory();
+ filterPush.resetHistory();
});
- it('noncullable container should always be rendered even if bounds do not intersect the frame', function ()
+ it('noncullable container should always be rendered even if bounds do not intersect the frame', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
@@ -1027,8 +1105,8 @@ describe('Container', function ()
graphics.x = -1000;
graphics.y = -1000;
- const _renderContainer = sinon.spy(container, '_render');
- const _renderGraphics = sinon.spy(graphics, '_render');
+ const _renderContainer = sinon.spy(container, '_render' as keyof Container);
+ const _renderGraphics = sinon.spy(graphics, '_render' as keyof Graphics);
renderer.render(container);
@@ -1036,9 +1114,8 @@ describe('Container', function ()
expect(_renderGraphics).to.have.been.called;
});
- it('cullable container should not be rendered if bounds do not intersect the frame', function ()
+ it('cullable container should not be rendered if bounds do not intersect the frame', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
@@ -1046,8 +1123,8 @@ describe('Container', function ()
graphics.x = 0;
graphics.y = -10;
- const _renderContainer = sinon.spy(container, '_render');
- const _renderGraphics = sinon.spy(graphics, '_render');
+ const _renderContainer = sinon.spy(container, '_render' as keyof Container);
+ const _renderGraphics = sinon.spy(graphics, '_render' as keyof Graphics);
renderer.render(container);
@@ -1055,9 +1132,8 @@ describe('Container', function ()
expect(_renderGraphics).to.not.have.been.called;
});
- it('cullable container should be rendered if bounds intersects the frame', function ()
+ it('cullable container should be rendered if bounds intersects the frame', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
@@ -1065,8 +1141,8 @@ describe('Container', function ()
graphics.x = 0;
graphics.y = -9;
- const _renderContainer = sinon.spy(container, '_render');
- const _renderGraphics = sinon.spy(graphics, '_render');
+ const _renderContainer = sinon.spy(container, '_render' as keyof Container);
+ const _renderGraphics = sinon.spy(graphics, '_render' as keyof Graphics);
renderer.render(container);
@@ -1076,9 +1152,8 @@ describe('Container', function ()
it('cullable container that contains a child with a padded filter (autoFit=true) '
+ 'such that the child in out of frame but the filter padding intersects the frame '
- + 'should render the filter padding but not the container or child', function ()
+ + 'should render the filter padding but not the container or child', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
const filter = new AlphaFilter();
@@ -1091,21 +1166,20 @@ describe('Container', function ()
graphics.x = 0;
graphics.y = -15;
- const _renderContainer = sinon.spy(container, '_render');
- const _renderGraphics = sinon.spy(graphics, '_render');
+ const _renderContainer = sinon.spy(container, '_render' as keyof Container);
+ const _renderGraphics = sinon.spy(graphics, '_render' as keyof Graphics);
renderer.render(container);
expect(_renderContainer).to.not.have.been.called;
expect(_renderGraphics).to.not.have.been.called;
- expect(this.filterPush).to.have.been.called;
+ expect(filterPush).to.have.been.called;
});
it('cullable container that contains a child with a padded filter (autoFit=false) '
+ 'such that the child in out of frame but the filter padding intersects the frame '
- + 'should render the filtered child but not the container', function ()
+ + 'should render the filtered child but not the container', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
const filter = new AlphaFilter();
@@ -1118,20 +1192,19 @@ describe('Container', function ()
graphics.x = 0;
graphics.y = -15;
- const _renderContainer = sinon.spy(container, '_render');
- const _renderGraphics = sinon.spy(graphics, '_render');
+ const _renderContainer = sinon.spy(container, '_render' as keyof Container);
+ const _renderGraphics = sinon.spy(graphics, '_render' as keyof Graphics);
renderer.render(container);
expect(_renderContainer).to.not.have.been.called;
expect(_renderGraphics).to.have.been.called;
- expect(this.filterPush).to.have.been.called;
+ expect(filterPush).to.have.been.called;
});
it('cullable container with a filter (autoFit=true) should not render the container or children '
- + 'if the bounds as well as the filter padding do no intersect the frame', function ()
+ + 'if the bounds as well as the filter padding do no intersect the frame', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
const filter = new AlphaFilter();
@@ -1144,19 +1217,18 @@ describe('Container', function ()
graphics.x = 0;
graphics.y = -15;
- const _renderContainer = sinon.spy(container, '_render');
+ const _renderContainer = sinon.spy(container, '_render' as keyof Container);
const renderGraphics = sinon.spy(graphics, 'render');
renderer.render(container);
expect(_renderContainer).to.not.have.been.called;
expect(renderGraphics).to.not.have.been.called;
- expect(this.filterPush).to.have.been.called;
+ expect(filterPush).to.have.been.called;
});
- it('cullable container with cullArea should be rendered if the bounds intersect the frame', function ()
+ it('cullable container with cullArea should be rendered if the bounds intersect the frame', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
@@ -1165,16 +1237,15 @@ describe('Container', function ()
container.x = container.y = 107.07;
container.rotation = Math.PI / 4;
- const _renderGraphics = sinon.spy(graphics, '_render');
+ const _renderGraphics = sinon.spy(graphics, '_render' as keyof Graphics);
renderer.render(container);
expect(_renderGraphics).to.have.been.called;
});
- it('cullable container with cullArea should not be rendered if the bounds do not intersect the frame', function ()
+ it('cullable container with cullArea should not be rendered if the bounds do not intersect the frame', () =>
{
- const renderer = this.renderer;
const container = new Container();
const graphics = container.addChild(new Graphics().beginFill().drawRect(0, 0, 10, 10).endFill());
diff --git a/packages/display/test/DisplayObject.tests.ts b/packages/display/test/DisplayObject.tests.ts
index a4df3c6c1a..2bc22c19b8 100755
--- a/packages/display/test/DisplayObject.tests.ts
+++ b/packages/display/test/DisplayObject.tests.ts
@@ -3,12 +3,13 @@ import { RAD_TO_DEG, DEG_TO_RAD } from '@pixi/math';
import sinon from 'sinon';
import { expect } from 'chai';
-describe('DisplayObject', function ()
+describe('DisplayObject', () =>
{
- describe('constructor', function ()
+ describe('constructor', () =>
{
- it('should initialise properties', function ()
+ it('should initialise properties', () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const object = new DisplayObject();
expect(object.alpha).to.equal(1);
@@ -18,10 +19,11 @@ describe('DisplayObject', function ()
});
});
- describe('setParent', function ()
+ describe('setParent', () =>
{
- it('should add itself to a Container', function ()
+ it('should add itself to a Container', () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const child = new DisplayObject();
const container = new Container();
@@ -31,8 +33,9 @@ describe('DisplayObject', function ()
expect(child.parent).to.equal(container);
});
- it('should throw if not Container', function ()
+ it('should throw if not Container', () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const child = new DisplayObject();
const notAContainer = {};
@@ -41,10 +44,11 @@ describe('DisplayObject', function ()
});
});
- describe('setTransform', function ()
+ describe('setTransform', () =>
{
- it('should set correct properties', function ()
+ it('should set correct properties', () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const object = new DisplayObject();
object.setTransform(1, 2, 3, 4, 5, 6, 7, 8, 9);
@@ -60,8 +64,9 @@ describe('DisplayObject', function ()
expect(object.pivot.y).to.be.equal(9);
});
- it('should convert zero scale to one', function ()
+ it('should convert zero scale to one', () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const object = new DisplayObject();
object.setTransform(1, 1, 0, 0, 1, 1, 1, 1, 1);
@@ -71,12 +76,13 @@ describe('DisplayObject', function ()
});
});
- describe('worldVisible', function ()
+ describe('worldVisible', () =>
{
- it('should traverse parents', function ()
+ it('should traverse parents', () =>
{
const grandParent = new Container();
const parent = new Container();
+ // @ts-expect-error - instantiating DisplayOBject
const child = new DisplayObject();
grandParent.addChild(parent);
@@ -90,10 +96,11 @@ describe('DisplayObject', function ()
});
});
- describe('rotation', function ()
+ describe('rotation', () =>
{
- it('rotation and angle are different units of the same transformation', function ()
+ it('rotation and angle are different units of the same transformation', () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const object = new DisplayObject();
expect(object.rotation).to.be.equal(0);
@@ -111,10 +118,11 @@ describe('DisplayObject', function ()
});
});
- describe('enableTempParent', function ()
+ describe('enableTempParent', () =>
{
- it('should allow to recalc children transform', function ()
+ it('should allow to recalc children transform', () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const child = new DisplayObject();
const container = new Container();
@@ -146,12 +154,14 @@ describe('DisplayObject', function ()
});
});
- describe('mask', function ()
+ describe('mask', () =>
{
it('should set isMask and renderable properties correctly even if the same mask is used by multiple objects',
- function ()
+ () =>
{
+ // @ts-expect-error - instantiating DisplayOBject
const mask1 = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayOBject
const mask2 = new DisplayObject();
const container1 = new Container();
const container2 = new Container();
@@ -223,11 +233,12 @@ describe('DisplayObject', function ()
);
});
- describe('remove', function ()
+ describe('remove', () =>
{
- it('should trigger removed listeners', function ()
+ it('should trigger removed listeners', () =>
{
const listener = sinon.spy();
+ // @ts-expect-error - instantiating DisplayOBject
const child = new DisplayObject();
const container = new Container();
@@ -245,11 +256,12 @@ describe('DisplayObject', function ()
});
});
- describe('destroy', function ()
+ describe('destroy', () =>
{
- it('should trigger destroyed listeners', function ()
+ it('should trigger destroyed listeners', () =>
{
const listener = sinon.spy();
+ // @ts-expect-error - instantiating DisplayOBject
const child = new DisplayObject();
const container = new Container();
@@ -265,5 +277,30 @@ describe('DisplayObject', function ()
expect(listener.calledOnce).to.be.true;
});
+
+ it('should trigger destroyed listeners once destruction is complete', () =>
+ {
+ let listenerCallCount = 0;
+ // @ts-expect-error - instantiating DisplayOBject
+ const child = new DisplayObject();
+ const container = new Container();
+
+ child.on('destroyed', () =>
+ {
+ listenerCallCount++;
+ expect(child.destroyed).to.be.true;
+ expect(child.parent).to.be.null;
+ });
+
+ container.addChild(child);
+ container.removeChild(child);
+
+ expect(listenerCallCount).to.equal(0);
+
+ container.addChild(child);
+ child.destroy();
+
+ expect(listenerCallCount).to.equal(1);
+ });
});
});
diff --git a/packages/display/test/toGlobal.tests.ts b/packages/display/test/toGlobal.tests.ts
index ca2b71a40e..59e57f8802 100644
--- a/packages/display/test/toGlobal.tests.ts
+++ b/packages/display/test/toGlobal.tests.ts
@@ -2,9 +2,9 @@ import { Container } from '@pixi/display';
import { Point } from '@pixi/math';
import { expect } from 'chai';
-describe('toGlobal', function ()
+describe('toGlobal', () =>
{
- it('should return correct global cordinates of a point from within a displayObject', function ()
+ it('should return correct global cordinates of a point from within a displayObject', () =>
{
const parent = new Container();
diff --git a/packages/display/test/toLocal.tests.ts b/packages/display/test/toLocal.tests.ts
index 91cffc27bb..0808000a56 100644
--- a/packages/display/test/toLocal.tests.ts
+++ b/packages/display/test/toLocal.tests.ts
@@ -2,9 +2,9 @@ import { Container } from '@pixi/display';
import { Point } from '@pixi/math';
import { expect } from 'chai';
-describe('toLocal', function ()
+describe('toLocal', () =>
{
- it('should return correct local cordinates of a displayObject', function ()
+ it('should return correct local cordinates of a displayObject', () =>
{
const parent = new Container();
@@ -31,7 +31,7 @@ describe('toLocal', function ()
expect(localPoint.y).to.equal(40);
});
- it('should map the correct local cordinates of a displayObject to another', function ()
+ it('should map the correct local cordinates of a displayObject to another', () =>
{
const parent = new Container();
diff --git a/packages/events/package.json b/packages/events/package.json
index 1a8ec89491..c4a2038159 100644
--- a/packages/events/package.json
+++ b/packages/events/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/events",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/events.js",
"module": "dist/esm/events.js",
"bundle": "dist/browser/events.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/events.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/events.js"
+ }
+ }
+ },
"description": "UI events for scene graphs",
"keywords": [
"interaction",
@@ -32,8 +45,8 @@
"url": "https://github.com/pixijs/pixi.js/issues"
},
"peerDependencies": {
- "@pixi/display": "6.3.0",
- "@pixi/math": "6.3.0",
- "@pixi/utils": "6.3.0"
+ "@pixi/display": "6.4.2",
+ "@pixi/math": "6.4.2",
+ "@pixi/utils": "6.4.2"
}
}
diff --git a/packages/events/src/EventBoundary.ts b/packages/events/src/EventBoundary.ts
index d9b0466dfa..d7a482518f 100644
--- a/packages/events/src/EventBoundary.ts
+++ b/packages/events/src/EventBoundary.ts
@@ -30,11 +30,10 @@ const tempLocalMapping = new Point();
* };
* overTargets: FederatedEventTarget[];
* ```
- *
* @typedef {object} TrackingData
* @property {Record.} pressTargetsByButton - The pressed display objects'
* propagation paths by each button of the pointer.
- * @property {Record.} clicksByButton - Holds clicking data for each button of the pointer.
+ * @property {Record.} clicksByButton - Holds clicking data for each button of the pointer.
* @property {PIXI.DisplayObject[]} overTargets - The DisplayObject propagation path over which the pointer is hovering.
* @memberof PIXI
*/
@@ -54,12 +53,11 @@ type TrackingData = {
/**
* Internal storage of event listeners in EventEmitter.
- *
* @ignore
*/
type EmitterListeners = Record
- | { fn(...args: any[]): any, context: any }
+| Array<{ fn(...args: any[]): any, context: any }>
+| { fn(...args: any[]): any, context: any }
>;
/**
@@ -116,7 +114,6 @@ type EmitterListeners = Record = {
@@ -176,7 +169,6 @@ export class EventBoundary
/**
* The event pool maps event constructors to an free pool of instances of those specific events.
- *
* @see PIXI.EventBoundary#allocateEvent
* @see PIXI.EventBoundary#freeEvent
*/
@@ -219,7 +211,6 @@ export class EventBoundary
*
* To modify the semantics of existing events, the built-in mapping methods of EventBoundary should be overridden
* instead.
- *
* @param type - The type of upstream event to map.
* @param fn - The mapping method. The context of this function must be bound manually, if desired.
*/
@@ -237,7 +228,11 @@ export class EventBoundary
this.mappingTable[type].sort((a, b) => a.priority - b.priority);
}
- /** Dispatches the given event */
+ /**
+ * Dispatches the given event
+ * @param e
+ * @param type
+ */
public dispatchEvent(e: FederatedEvent, type?: string): void
{
e.propagationStopped = false;
@@ -247,7 +242,10 @@ export class EventBoundary
this.dispatch.emit(type || e.type, e);
}
- /** Maps the given upstream event through the event boundary and propagates it downstream. */
+ /**
+ * Maps the given upstream event through the event boundary and propagates it downstream.
+ * @param e
+ */
public mapEvent(e: FederatedEvent): void
{
if (!this.rootTarget)
@@ -274,6 +272,8 @@ export class EventBoundary
* Finds the DisplayObject that is the target of a event at the given coordinates.
*
* The passed (x,y) coordinates are in the world space above this event boundary.
+ * @param x
+ * @param y
*/
public hitTest(
x: number,
@@ -294,8 +294,8 @@ export class EventBoundary
/**
* Propagate the passed event from from {@link EventBoundary.rootTarget this.rootTarget} to its
* target {@code e.target}.
- *
* @param e - The event to propagate.
+ * @param type
*/
public propagate(e: FederatedEvent, type?: string): void
{
@@ -344,9 +344,9 @@ export class EventBoundary
* Emits the event {@link e} to all display objects. The event is propagated in the bubbling phase always.
*
* This is used in the `pointermove` legacy mode.
- *
* @param e - The emitted event.
* @param type - The listeners to notify.
+ * @param target
*/
public all(e: FederatedEvent, type?: string, target: FederatedEventTarget = this.rootTarget): void
{
@@ -369,7 +369,6 @@ export class EventBoundary
/**
* Finds the propagation path from {@link PIXI.EventBoundary.rootTarget rootTarget} to the passed
* {@code target}. The last element in the path is {@code target}.
- *
* @param target
*/
public propagationPath(target: FederatedEventTarget): FederatedEventTarget[]
@@ -395,7 +394,6 @@ export class EventBoundary
/**
* Recursive implementation for {@link EventBoundary.hitTest hitTest}.
- *
* @param currentTarget - The DisplayObject that is to be hit tested.
* @param interactive - Flags whether `currentTarget` or one of its parents are interactive.
* @param location - The location that is being tested for overlap.
@@ -404,7 +402,7 @@ export class EventBoundary
* @param pruneFn - Callback that determiness whether the target and all of its children
* cannot pass the hit test. It is used as a preliminary optimization to prune entire subtrees
* of the scene graph.
- * @return An array holding the hit testing target and all its ancestors in order. The first element
+ * @returns An array holding the hit testing target and all its ancestors in order. The first element
* is the target itself and the last is {@link EventBoundary.rootTarget rootTarget}. This is the opposite
* order w.r.t. the propagation path. If no hit testing target is found, null is returned.
*/
@@ -482,7 +480,6 @@ export class EventBoundary
*
* {@link EventBoundary}'s implementation uses the {@link PIXI.DisplayObject.hitArea hitArea}
* and {@link PIXI.DisplayObject._mask} for pruning.
- *
* @param displayObject
* @param location
*/
@@ -513,10 +510,9 @@ export class EventBoundary
/**
* Checks whether the display object passes hit testing for the given location.
- *
* @param displayObject
* @param location
- * @return - Whether `displayObject` passes hit testing for `location`.
+ * @returns - Whether `displayObject` passes hit testing for `location`.
*/
protected hitTestFn(displayObject: DisplayObject, location: Point): boolean
{
@@ -538,8 +534,8 @@ export class EventBoundary
/**
* Notify all the listeners to the event's `currentTarget`.
- *
* @param e - The event passed to the target.
+ * @param type
*/
protected notifyTarget(e: FederatedEvent, type?: string): void
{
@@ -558,7 +554,6 @@ export class EventBoundary
* Maps the upstream `pointerdown` events to a downstream `pointerdown` event.
*
* `touchstart`, `rightdown`, `mousedown` events are also dispatched for specific pointer types.
- *
* @param from
*/
protected mapPointerDown(from: FederatedEvent): void
@@ -597,7 +592,6 @@ export class EventBoundary
*
* The tracking data for the specific pointer has an updated `overTarget`. `mouseout`, `mouseover`,
* `mousemove`, and `touchmove` events are fired as well for specific pointer types.
- *
* @param from - The upstream `pointermove` event.
*/
protected mapPointerMove(from: FederatedEvent): void
@@ -718,7 +712,6 @@ export class EventBoundary
* Maps the upstream `pointerover` to downstream `pointerover` and `pointerenter` events, in that order.
*
* The tracking data for the specific pointer gets a new `overTarget`.
- *
* @param from - The upstream `pointerover` event.
*/
protected mapPointerOver(from: FederatedEvent): void
@@ -763,7 +756,6 @@ export class EventBoundary
* Maps the upstream `pointerout` to downstream `pointerout`, `pointerleave` events, in that order.
*
* The tracking data for the specific pointer is cleared of a `overTarget`.
- *
* @param from - The upstream `pointerout` event.
*/
protected mapPointerOut(from: FederatedEvent): void
@@ -821,7 +813,6 @@ export class EventBoundary
* ancestor of the `pointerdown` and `pointerup` targets, which is also the `click` event's target. `touchend`,
* `rightup`, `mouseup`, `touchendoutside`, `rightupoutside`, `mouseupoutside`, and `tap` are fired as well for
* specific pointer types.
- *
* @param from - The upstream `pointerup` event.
*/
protected mapPointerUp(from: FederatedEvent): void
@@ -949,7 +940,6 @@ export class EventBoundary
*
* `touchendoutside`, `mouseupoutside`, and `rightupoutside` events are fired as well for specific pointer
* types. The tracking data for the specific pointer is cleared of a `pressTarget`.
- *
* @param from - The upstream `pointerupoutside` event.
*/
protected mapPointerUpOutside(from: FederatedEvent): void
@@ -995,7 +985,6 @@ export class EventBoundary
/**
* Maps the upstream `wheel` event to a downstream `wheel` event.
- *
* @param from - The upstream `wheel` event.
*/
protected mapWheel(from: FederatedEvent): void
@@ -1018,9 +1007,8 @@ export class EventBoundary
*
* This is used to find the correct `pointerup` and `pointerout` target in the case that the original `pointerdown`
* or `pointerover` target was unmounted from the scene graph.
- *
* @param propagationPath - The propagation path was valid in the past.
- * @return - The most specific event-target still mounted at the same location in the scene graph.
+ * @returns - The most specific event-target still mounted at the same location in the scene graph.
*/
protected findMountedTarget(propagationPath: FederatedEventTarget[]): FederatedEventTarget
{
@@ -1052,7 +1040,6 @@ export class EventBoundary
* Creates an event whose {@code originalEvent} is {@code from}, with an optional `type` and `target` override.
*
* The event is allocated using {@link PIXI.EventBoundary#allocateEvent this.allocateEvent}.
- *
* @param from - The {@code originalEvent} for the returned event.
* @param [type=from.type] - The type of the returned event.
* @param target - The target of the returned event.
@@ -1085,7 +1072,6 @@ export class EventBoundary
* Creates a wheel event whose {@code originalEvent} is {@code from}.
*
* The event is allocated using {@link PIXI.EventBoundary#allocateEvent this.allocateEvent}.
- *
* @param from - The upstream wheel event.
*/
protected createWheelEvent(from: FederatedWheelEvent): FederatedWheelEvent
@@ -1107,7 +1093,6 @@ export class EventBoundary
* Clones the event {@code from}, with an optional {@code type} override.
*
* The event is allocated using {@link PIXI.EventBoundary#allocateEvent this.allocateEvent}.
- *
* @param from - The event to clone.
* @param [type=from.type] - The type of the returned event.
*/
@@ -1138,7 +1123,6 @@ export class EventBoundary
* + deltaX
* + deltaY
* + deltaZ
- *
* @param from
* @param to
*/
@@ -1163,7 +1147,6 @@ export class EventBoundary
* + tangentialPressure
* + tiltX
* + tiltY
- *
* @param from
* @param to
*/
@@ -1201,7 +1184,6 @@ export class EventBoundary
* + y
* + screen
* + global
- *
* @param from
* @param to
*/
@@ -1229,7 +1211,6 @@ export class EventBoundary
* + srcElement
* + timeStamp
* + type
- *
* @param from - The event to copy data from.
* @param to - The event to copy data into.
*/
@@ -1248,7 +1229,7 @@ export class EventBoundary
/**
* @param id - The pointer ID.
- * @return The tracking data stored for the given pointer. If no data exists, a blank
+ * @returns The tracking data stored for the given pointer. If no data exists, a blank
* state will be created.
*/
protected trackingData(id: number): TrackingData
@@ -1270,7 +1251,6 @@ export class EventBoundary
*
* This allocation is constructor-agnostic, as long as it only takes one argument - this event
* boundary.
- *
* @param constructor - The event's constructor.
*/
protected allocateEvent(
@@ -1301,7 +1281,6 @@ export class EventBoundary
* It is also advised that events not allocated from {@link PIXI.EventBoundary#allocateEvent this.allocateEvent}
* not be freed. This is because of the possibility that the same event is freed twice, which can cause
* it to be allocated twice & result in overwriting.
- *
* @param event - The event to be freed.
* @throws Error if the event is managed by another event boundary.
*/
@@ -1322,7 +1301,6 @@ export class EventBoundary
/**
* Similar to {@link EventEmitter.emit}, except it stops if the `propagationImmediatelyStopped` flag
* is set on the event.
- *
* @param e - The event to call each listener with.
* @param type - The event key.
*/
@@ -1354,7 +1332,6 @@ export class EventBoundary
* object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mousedown
* @param {PIXI.FederatedPointerEvent} event - The mousedown event.
*/
@@ -1363,7 +1340,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mousedown}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mousedowncapture
* @param {PIXI.FederatedPointerEvent} event - The capture phase mousedown.
*/
@@ -1373,7 +1349,6 @@ export class EventBoundary
* on the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightdown
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1382,7 +1357,6 @@ export class EventBoundary
* Capture phase equivalent of {@code rightdown}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightdowncapture
* @param {PIXI.FederatedPointerEvent} event - The rightdowncapture event.
*/
@@ -1392,7 +1366,6 @@ export class EventBoundary
* object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseup
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1401,7 +1374,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mouseup}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseupcature
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1411,7 +1383,6 @@ export class EventBoundary
* over the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightup
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1420,7 +1391,6 @@ export class EventBoundary
* Capture phase equivalent of {@code rightup}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightupcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1437,7 +1407,6 @@ export class EventBoundary
* window of each other upto the current click. For example, it will be {@code 2} for a double click.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#click
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1446,7 +1415,6 @@ export class EventBoundary
* Capture phase equivalent of {@code click}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#clickcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1458,7 +1426,6 @@ export class EventBoundary
* This event follows the semantics of {@code click}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightclick
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1467,7 +1434,6 @@ export class EventBoundary
* Capture phase equivalent of {@code rightclick}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightclickcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1483,7 +1449,6 @@ export class EventBoundary
* and {@code pointerup} events, i.e. the target of the {@code click} event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseupoutside
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1492,7 +1457,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mouseupoutside}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseupoutsidecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1504,7 +1468,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightupoutside
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1513,7 +1476,6 @@ export class EventBoundary
* Capture phase equivalent of {@code rightupoutside}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#rightupoutsidecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1523,7 +1485,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mousemove
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1532,7 +1493,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mousemove}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mousemovecature
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1542,7 +1502,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseover
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1551,7 +1510,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mouseover}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseovercapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1560,7 +1518,6 @@ export class EventBoundary
* Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseenter
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1569,7 +1526,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mouseenter}
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseentercapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1582,7 +1538,6 @@ export class EventBoundary
* a {@code mouseover} event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseout
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1591,7 +1546,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mouseout}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseoutcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1600,7 +1554,6 @@ export class EventBoundary
* Fired when the mouse pointer exits a DisplayObject and its descendants.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseleave
* @param {PIXI.FederatedPointerEvent} event
*/
@@ -1609,7 +1562,6 @@ export class EventBoundary
* Capture phase equivalent of {@code mouseleave}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#mouseleavecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1619,7 +1571,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerdown
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1628,7 +1579,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointerdown}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerdowncapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1638,7 +1588,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerup
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1647,7 +1596,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointerup}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerupcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1657,7 +1605,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointercancel
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1666,7 +1613,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointercancel}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointercancelcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1676,7 +1622,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointertap
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1685,7 +1630,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointertap}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointertapcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1700,7 +1644,6 @@ export class EventBoundary
* and {@code pointerup} events, i.e. the target of the {@code click} event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerupoutside
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1709,7 +1652,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointerupoutside}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerupoutsidecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1719,7 +1661,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointermove
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1728,7 +1669,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointermove}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointermovecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1738,7 +1678,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerover
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1747,7 +1686,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointerover}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerovercapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1756,7 +1694,6 @@ export class EventBoundary
* Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerenter
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1765,7 +1702,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointerenter}
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerentercapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1775,7 +1711,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerout
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1784,7 +1719,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointerout}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointeroutcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1795,7 +1729,6 @@ export class EventBoundary
* This event notifies only the target and does not bubble.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerleave
* @param {PIXI.FederatedPointerEvent} event - The `pointerleave` event.
*/
@@ -1804,7 +1737,6 @@ export class EventBoundary
* Capture phase equivalent of {@code pointerleave}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#pointerleavecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1814,7 +1746,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchstart
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1823,7 +1754,6 @@ export class EventBoundary
* Capture phase equivalent of {@code touchstart}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchstartcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1833,7 +1763,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchend
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1842,7 +1771,6 @@ export class EventBoundary
* Capture phase equivalent of {@code touchend}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchendcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1852,7 +1780,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchcancel
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1861,7 +1788,6 @@ export class EventBoundary
* Capture phase equivalent of {@code touchcancel}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchcancelcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1871,7 +1797,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#tap
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1880,7 +1805,6 @@ export class EventBoundary
* Capture phase equivalent of {@code tap}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#tapcapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1891,7 +1815,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchendoutside
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1900,7 +1823,6 @@ export class EventBoundary
* Capture phase equivalent of {@code touchendoutside}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchendoutsidecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1910,7 +1832,6 @@ export class EventBoundary
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchmove
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1919,7 +1840,6 @@ export class EventBoundary
* Capture phase equivalent of {@code touchmove}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#touchmovecapture
* @param {PIXI.FederatedPointerEvent} event - Event
*/
@@ -1928,7 +1848,6 @@ export class EventBoundary
* Fired when a the user scrolls with the mouse cursor over a DisplayObject.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#wheel
* @type {PIXI.FederatedWheelEvent}
*/
@@ -1937,7 +1856,6 @@ export class EventBoundary
* Capture phase equivalent of {@code wheel}.
*
* These events are propagating from the {@link PIXI.EventSystem EventSystem} in @pixi/events.
- *
* @event PIXI.DisplayObject#wheelcapture
* @type {PIXI.FederatedWheelEvent}
*/
diff --git a/packages/events/src/EventSystem.ts b/packages/events/src/EventSystem.ts
index 3b3db9aadf..a553bbc187 100644
--- a/packages/events/src/EventSystem.ts
+++ b/packages/events/src/EventSystem.ts
@@ -26,7 +26,6 @@ interface Renderer
/**
* The system for handling UI events.
- *
* @memberof PIXI
*/
export class EventSystem
@@ -43,16 +42,10 @@ export class EventSystem
*/
public readonly rootBoundary: EventBoundary;
- /**
- * Does the device support touch events
- * https://www.w3.org/TR/touch-events/
- */
+ /** Does the device support touch events https://www.w3.org/TR/touch-events/ */
public readonly supportsTouchEvents = 'ontouchstart' in globalThis;
- /**
- * Does the device support pointer events
- * https://www.w3.org/Submission/pointer-events/
- */
+ /** Does the device support pointer events https://www.w3.org/Submission/pointer-events/ */
public readonly supportsPointerEvents = !!globalThis.PointerEvent;
/**
@@ -60,7 +53,6 @@ export class EventSystem
* Does not apply to pointer events for backwards compatibility
* preventDefault on pointer events stops mouse events from firing
* Thus, for every pointer event, there will always be either a mouse of touch event alongside it.
- *
* @default true
*/
public autoPreventDefault: boolean;
@@ -70,8 +62,7 @@ export class EventSystem
* values, objects are handled as dictionaries of CSS values for {@code domElement},
* and functions are called instead of changing the CSS.
* Default CSS cursor values are provided for 'default' and 'pointer' modes.
- *
- * @member {Object. void) | CSSStyleDeclaration>}
+ * @member {Object void) | CSSStyleDeclaration>}
*/
public cursorStyles: Record void) | CSSStyleDeclaration>;
@@ -81,14 +72,10 @@ export class EventSystem
*/
public domElement: HTMLElement;
- /**
- * The resolution used to convert between the DOM client space into world space.
- */
+ /** The resolution used to convert between the DOM client space into world space. */
public resolution = 1;
- /**
- * The renderer managing this {@link EventSystem}.
- */
+ /** The renderer managing this {@link EventSystem}. */
public renderer: Renderer;
private currentCursor: string;
@@ -131,9 +118,7 @@ export class EventSystem
this.resolution = this.renderer.resolution;
}
- /**
- * Destroys all event listeners and detaches the renderer.
- */
+ /** Destroys all event listeners and detaches the renderer. */
destroy(): void
{
this.setTargetElement(null);
@@ -142,7 +127,6 @@ export class EventSystem
/**
* Sets the current cursor mode, handling any callbacks or CSS style changes.
- *
* @param mode - cursor mode, a key from the cursorStyles dictionary
*/
public setCursor(mode: string): void
@@ -200,7 +184,6 @@ export class EventSystem
/**
* Event handler for pointer down events on {@link PIXI.EventSystem#domElement this.domElement}.
- *
* @param nativeEvent - The native mouse/pointer/touch event.
*/
private onPointerDown(nativeEvent: MouseEvent | PointerEvent | TouchEvent): void
@@ -243,7 +226,6 @@ export class EventSystem
/**
* Event handler for pointer move events on on {@link PIXI.EventSystem#domElement this.domElement}.
- *
* @param nativeEvent - The native mouse/pointer/touch events.
*/
private onPointerMove(nativeEvent: MouseEvent | PointerEvent | TouchEvent): void
@@ -267,7 +249,6 @@ export class EventSystem
/**
* Event handler for pointer up events on {@link PIXI.EventSystem#domElement this.domElement}.
- *
* @param nativeEvent - The native mouse/pointer/touch event.
*/
private onPointerUp(nativeEvent: MouseEvent | PointerEvent | TouchEvent): void
@@ -294,7 +275,6 @@ export class EventSystem
/**
* Event handler for pointer over & out events on {@link PIXI.EventSystem#domElement this.domElement}.
- *
* @param nativeEvent - The native mouse/pointer/touch event.
*/
private onPointerOverOut(nativeEvent: MouseEvent | PointerEvent | TouchEvent): void
@@ -318,7 +298,6 @@ export class EventSystem
/**
* Passive handler for `wheel` events on {@link EventSystem.domElement this.domElement}.
- *
* @param nativeEvent - The native wheel event.
*/
protected onWheel(nativeEvent: WheelEvent): void
@@ -333,7 +312,6 @@ export class EventSystem
* Sets the {@link PIXI.EventSystem#domElement domElement} and binds event listeners.
*
* To deregister the current DOM element without setting a new one, pass {@code null}.
- *
* @param element - The new DOM element.
*/
public setTargetElement(element: HTMLElement): void
@@ -343,9 +321,7 @@ export class EventSystem
this.addEvents();
}
- /**
- * Register event listeners on {@link PIXI.Renderer#domElement this.domElement}.
- */
+ /** Register event listeners on {@link PIXI.Renderer#domElement this.domElement}. */
private addEvents(): void
{
if (this.eventsAdded || !this.domElement)
@@ -355,7 +331,7 @@ export class EventSystem
const style = this.domElement.style as CrossCSSStyleDeclaration;
- if (globalThis.navigator.msPointerEnabled)
+ if ((globalThis.navigator as any).msPointerEnabled)
{
style.msContentZooming = 'none';
style.msTouchAction = 'none';
@@ -409,9 +385,7 @@ export class EventSystem
this.eventsAdded = true;
}
- /**
- * Unregister event listeners on {@link PIXI.EventSystem#domElement this.domElement}.
- */
+ /** Unregister event listeners on {@link PIXI.EventSystem#domElement this.domElement}. */
private removeEvents(): void
{
if (!this.eventsAdded || !this.domElement)
@@ -421,7 +395,7 @@ export class EventSystem
const style = this.domElement.style as CrossCSSStyleDeclaration;
- if (globalThis.navigator.msPointerEnabled)
+ if ((globalThis.navigator as any).msPointerEnabled)
{
style.msContentZooming = '';
style.msTouchAction = '';
@@ -467,7 +441,6 @@ export class EventSystem
* Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The
* resulting value is stored in the point. This takes into account the fact that the DOM
* element could be scaled and positioned anywhere on the screen.
- *
* @param {PIXI.IPointData} point - the point that the result will be stored in
* @param {number} x - the x coord of the position to map
* @param {number} y - the y coord of the position to map
@@ -501,12 +474,11 @@ export class EventSystem
/**
* Ensures that the original event object contains all data that a regular pointer event would have
- *
* @param event - The original event data from a touch or mouse event
- * @return An array containing a single normalized pointer event, in the case of a pointer
+ * @returns An array containing a single normalized pointer event, in the case of a pointer
* or mouse event, or a multiple normalized pointer events if there are multiple changed touches
*/
- private normalizeToPointerData(event: TouchEvent|MouseEvent|PointerEvent): PointerEvent[]
+ private normalizeToPointerData(event: TouchEvent | MouseEvent | PointerEvent): PointerEvent[]
{
const normalizedEvents = [];
@@ -580,9 +552,8 @@ export class EventSystem
*
* The returned {@link PIXI.FederatedWheelEvent} is a shared instance. It will not persist across
* multiple native wheel events.
- *
* @param nativeEvent - The native wheel event that occurred on the canvas.
- * @return A federated wheel event.
+ * @returns A federated wheel event.
*/
protected normalizeWheelEvent(nativeEvent: WheelEvent): FederatedWheelEvent
{
@@ -607,7 +578,6 @@ export class EventSystem
/**
* Normalizes the {@code nativeEvent} into a federateed {@code FederatedPointerEvent}.
- *
* @param event
* @param nativeEvent
*/
@@ -651,7 +621,6 @@ export class EventSystem
/**
* Transfers base & mouse event data from the {@code nativeEvent} to the federated event.
- *
* @param event
* @param nativeEvent
*/
diff --git a/packages/events/src/FederatedEvent.ts b/packages/events/src/FederatedEvent.ts
index b01782de1a..253853a56f 100644
--- a/packages/events/src/FederatedEvent.ts
+++ b/packages/events/src/FederatedEvent.ts
@@ -5,7 +5,6 @@ import type { FederatedEventTarget } from './FederatedEventTarget';
/**
* An DOM-compatible synthetic event implementation that is "forwarded" on behalf of an original
* FederatedEvent or native {@link https://dom.spec.whatwg.org/#event Event}.
- *
* @memberof PIXI
* @typeParam N - The type of native event held.
*/
@@ -26,7 +25,6 @@ export class FederatedEvent implements UIEvent
/**
* Flag added for compatibility with DOM {@code Event}. It is not used in the Federated Events
* API.
- *
* @see https://dom.spec.whatwg.org/#dom-event-composed
*/
public readonly composed = false;
@@ -39,7 +37,6 @@ export class FederatedEvent implements UIEvent
/**
* The propagation phase.
- *
* @default {@link FederatedEvent.NONE}
*/
public eventPhase = FederatedEvent.prototype.NONE;
@@ -92,10 +89,7 @@ export class FederatedEvent implements UIEvent
*/
public which: number;
- /**
- * The coordinates of the evnet relative to the nearest DOM layer. This is a non-standard
- * property.
- */
+ /** The coordinates of the evnet relative to the nearest DOM layer. This is a non-standard property. */
public layer: Point = new Point();
/** @readonly */
@@ -104,9 +98,7 @@ export class FederatedEvent implements UIEvent
/** @readonly */
get layerY(): number { return this.layer.y; }
- /**
- * The coordinates of the event relative to the DOM document. This is a non-standard property.
- */
+ /** The coordinates of the event relative to the DOM document. This is a non-standard property. */
public page: Point = new Point();
/** @readonly */
@@ -126,7 +118,6 @@ export class FederatedEvent implements UIEvent
/**
* Fallback for the deprecated {@link PIXI.InteractionEvent.data}.
- *
* @deprecated
*/
get data(): this
@@ -134,9 +125,7 @@ export class FederatedEvent implements UIEvent
return this;
}
- /**
- * The propagation path for this event. Alias for {@link EventBoundary.propagationPath}.
- */
+ /** The propagation path for this event. Alias for {@link EventBoundary.propagationPath}. */
composedPath(): FederatedEventTarget[]
{
// Find the propagation path if it isn't cached or if the target has changed since since
@@ -150,17 +139,17 @@ export class FederatedEvent implements UIEvent
}
/**
- * Unimplemented method included for implementing the DOM interface {@code Event}. It will throw
- * an {@code Error}.
+ * Unimplemented method included for implementing the DOM interface {@code Event}. It will throw an {@code Error}.
+ * @param _type
+ * @param _bubbles
+ * @param _cancelable
*/
initEvent(_type: string, _bubbles?: boolean, _cancelable?: boolean): void
{
throw new Error('initEvent() is a legacy DOM API. It is not implemented in the Federated Events API.');
}
- /**
- * Prevent default behavior of PixiJS and the user agent.
- */
+ /** Prevent default behavior of PixiJS and the user agent. */
preventDefault(): void
{
if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable)
diff --git a/packages/events/src/FederatedEventTarget.ts b/packages/events/src/FederatedEventTarget.ts
index 718f5e856d..ebaf8e8bbe 100644
--- a/packages/events/src/FederatedEventTarget.ts
+++ b/packages/events/src/FederatedEventTarget.ts
@@ -4,53 +4,54 @@ import { FederatedEvent } from './FederatedEvent';
import type { EventEmitter } from '@pixi/utils';
export type Cursor = 'auto'
- | 'default'
- | 'none'
- | 'context-menu'
- | 'help'
- | 'pointer'
- | 'progress'
- | 'wait'
- | 'cell'
- | 'crosshair'
- | 'text'
- | 'vertical-text'
- | 'alias'
- | 'copy'
- | 'move'
- | 'no-drop'
- | 'not-allowed'
- | 'e-resize'
- | 'n-resize'
- | 'ne-resize'
- | 'nw-resize'
- | 's-resize'
- | 'se-resize'
- | 'sw-resize'
- | 'w-resize'
- | 'ns-resize'
- | 'ew-resize'
- | 'nesw-resize'
- | 'col-resize'
- | 'nwse-resize'
- | 'row-resize'
- | 'all-scroll'
- | 'zoom-in'
- | 'zoom-out'
- | 'grab'
- | 'grabbing';
+| 'default'
+| 'none'
+| 'context-menu'
+| 'help'
+| 'pointer'
+| 'progress'
+| 'wait'
+| 'cell'
+| 'crosshair'
+| 'text'
+| 'vertical-text'
+| 'alias'
+| 'copy'
+| 'move'
+| 'no-drop'
+| 'not-allowed'
+| 'e-resize'
+| 'n-resize'
+| 'ne-resize'
+| 'nw-resize'
+| 's-resize'
+| 'se-resize'
+| 'sw-resize'
+| 'w-resize'
+| 'ns-resize'
+| 'ew-resize'
+| 'nesw-resize'
+| 'col-resize'
+| 'nwse-resize'
+| 'row-resize'
+| 'all-scroll'
+| 'zoom-in'
+| 'zoom-out'
+| 'grab'
+| 'grabbing';
// @ignore - This is documented elsewhere.
-export interface IHitArea {
+export interface IHitArea
+{
contains(x: number, y: number): boolean;
}
/**
* Describes the shape for a {@link FederatedEvent}'s' `eventTarget`.
- *
* @memberof PIXI
*/
-export interface FederatedEventTarget extends EventEmitter, EventTarget {
+export interface FederatedEventTarget extends EventEmitter, EventTarget
+{
/** The cursor preferred when the mouse pointer is hovering over. */
cursor: Cursor | string;
@@ -63,10 +64,7 @@ export interface FederatedEventTarget extends EventEmitter, EventTarget {
/** Whether this event target should fire UI events. */
interactive: boolean;
- /**
- * Whether this event target has any children that need UI events. This can be used optimize
- * event propagation.
- */
+ /** Whether this event target has any children that need UI events. This can be used optimize event propagation. */
interactiveChildren: boolean;
/** The hit-area specifies the area for which pointer events should be captured by this event target. */
@@ -74,13 +72,12 @@ export interface FederatedEventTarget extends EventEmitter, EventTarget {
}
export const FederatedDisplayObject: Omit<
- FederatedEventTarget,
- 'parent' | 'children' | keyof EventEmitter | 'cursor'
+FederatedEventTarget,
+'parent' | 'children' | keyof EventEmitter | 'cursor'
> = {
/**
* Enable interaction events for the DisplayObject. Touch, pointer and mouse
* events will not be emitted unless `interactive` is set to `true`.
- *
* @example
* const sprite = new PIXI.Sprite(texture);
* sprite.interactive = true;
@@ -94,7 +91,6 @@ export const FederatedDisplayObject: Omit<
/**
* Determines if the children to the displayObject can be clicked/touched
* Setting this to false allows PixiJS to bypass a recursive `hitTest` function
- *
* @memberof PIXI.Container#
*/
interactiveChildren: true,
@@ -102,7 +98,6 @@ export const FederatedDisplayObject: Omit<
/**
* Interaction shape. Children will be hit first, then this shape will be checked.
* Setting this will cause this shape to be checked in hit tests rather than the displayObject's bounds.
- *
* @example
* const sprite = new PIXI.Sprite(texture);
* sprite.interactive = true;
@@ -194,7 +189,7 @@ export const FederatedDisplayObject: Omit<
* **IMPORTANT:** _Only_ available if using the `@pixi/events` package.
* @memberof PIXI.DisplayObject
* @param e - The event to dispatch.
- * @return Whether the {@link PIXI.FederatedEvent.preventDefault preventDefault}() method was not invoked.
+ * @returns Whether the {@link PIXI.FederatedEvent.preventDefault preventDefault}() method was not invoked.
* @example
* // Reuse a click event!
* button.dispatchEvent(clickEvent);
diff --git a/packages/events/src/FederatedMouseEvent.ts b/packages/events/src/FederatedMouseEvent.ts
index 928521f741..ee5c616d95 100644
--- a/packages/events/src/FederatedMouseEvent.ts
+++ b/packages/events/src/FederatedMouseEvent.ts
@@ -3,11 +3,10 @@ import { Point } from '@pixi/math';
/**
* A {@link PIXI.FederatedEvent} for mouse events.
- *
* @memberof PIXI
*/
export class FederatedMouseEvent extends FederatedEvent<
- MouseEvent | PointerEvent | TouchEvent
+MouseEvent | PointerEvent | TouchEvent
> implements MouseEvent
{
/** Whether the "alt" key was pressed when this mouse event occurred. */
@@ -31,9 +30,7 @@ export class FederatedMouseEvent extends FederatedEvent<
/** Whether the "shift" key was pressed when this mouse event occurred. */
shiftKey: boolean;
- /**
- * The coordinates of the mouse event relative to the canvas.
- */
+ /** The coordinates of the mouse event relative to the canvas. */
public client: Point = new Point();
/** @readonly */
@@ -44,26 +41,20 @@ export class FederatedMouseEvent extends FederatedEvent<
/**
* Alias for {@link FederatedMouseEvent.clientX this.clientX}.
- *
* @readonly
*/
get x(): number { return this.clientX; }
/**
* Alias for {@link FederatedMouseEvent.clientY this.clientY}.
- *
* @readonly
*/
get y(): number { return this.clientY; }
- /**
- * This is the number of clicks that occurs in 200ms/click of each other.
- */
+ /** This is the number of clicks that occurs in 200ms/click of each other. */
public detail: number;
- /**
- * The movement in this pointer relative to the last `mousemove` event.
- */
+ /** The movement in this pointer relative to the last `mousemove` event. */
public movement: Point = new Point();
/** @readonly */
@@ -84,9 +75,7 @@ export class FederatedMouseEvent extends FederatedEvent<
/** @readonly */
get offsetY(): number { return this.offset.y; }
- /**
- * The pointer coordinates in world space.
- */
+ /** The pointer coordinates in world space. */
public global: Point = new Point();
/** @readonly */
@@ -103,21 +92,18 @@ export class FederatedMouseEvent extends FederatedEvent<
/**
* The pointer coordinates in the renderer's screen. Alias for {@code screen.x}.
- *
* @readonly
*/
get screenX(): number { return this.screen.x; }
/**
* The pointer coordinates in the renderer's screen. Alias for {@code screen.y}.
- *
* @readonly
*/
get screenY(): number { return this.screen.y; }
/**
* Whether the modifier key was pressed when this event natively occurred.
- *
* @param key - The modifier key.
*/
getModifierState(key: string): boolean
@@ -127,7 +113,21 @@ export class FederatedMouseEvent extends FederatedEvent<
/**
* Not supported.
- *
+ * @param _typeArg
+ * @param _canBubbleArg
+ * @param _cancelableArg
+ * @param _viewArg
+ * @param _detailArg
+ * @param _screenXArg
+ * @param _screenYArg
+ * @param _clientXArg
+ * @param _clientYArg
+ * @param _ctrlKeyArg
+ * @param _altKeyArg
+ * @param _shiftKeyArg
+ * @param _metaKeyArg
+ * @param _buttonArg
+ * @param _relatedTargetArg
* @deprecated
*/
// eslint-disable-next-line max-params
diff --git a/packages/events/src/FederatedPointerEvent.ts b/packages/events/src/FederatedPointerEvent.ts
index 5f26235008..030baae204 100644
--- a/packages/events/src/FederatedPointerEvent.ts
+++ b/packages/events/src/FederatedPointerEvent.ts
@@ -2,14 +2,12 @@ import { FederatedMouseEvent } from './FederatedMouseEvent';
/**
* A {@link PIXI.FederatedEvent} for pointer events.
- *
* @memberof PIXI
*/
export class FederatedPointerEvent extends FederatedMouseEvent implements PointerEvent
{
/**
* The unique identifier of the pointer.
- *
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId}
*/
public pointerId: number;
@@ -17,7 +15,6 @@ export class FederatedPointerEvent extends FederatedMouseEvent implements Pointe
/**
* The width of the pointer's contact along the x-axis, measured in CSS pixels.
* radiusX of TouchEvents will be represented by this value.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width
*/
public width = 0;
@@ -25,21 +22,18 @@ export class FederatedPointerEvent extends FederatedMouseEvent implements Pointe
/**
* The height of the pointer's contact along the y-axis, measured in CSS pixels.
* radiusY of TouchEvents will be represented by this value.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height
*/
public height = 0;
/**
* Indicates whether or not the pointer device that created the event is the primary pointer.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary
*/
public isPrimary = false;
/**
* The type of pointer that triggered the event.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
*/
public pointerType: string;
@@ -48,42 +42,35 @@ export class FederatedPointerEvent extends FederatedMouseEvent implements Pointe
* Pressure applied by the pointing device during the event.
*s
* A Touch's force property will be represented by this value.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure
*/
public pressure: number;
/**
* Barrel pressure on a stylus pointer.
- *
* @see https://w3c.github.io/pointerevents/#pointerevent-interface
*/
public tangentialPressure: number;
/**
* The angle, in degrees, between the pointer device and the screen.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX
*/
public tiltX: number;
/**
* The angle, in degrees, between the pointer device and the screen.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY
*/
public tiltY: number;
/**
* Twist of a stylus pointer.
- *
* @see https://w3c.github.io/pointerevents/#pointerevent-interface
*/
public twist: number;
- /**
- * This is the number of clicks that occurs in 200ms/click of each other.
- */
+ /** This is the number of clicks that occurs in 200ms/click of each other. */
public detail: number;
// Only included for completeness for now
diff --git a/packages/events/src/FederatedWheelEvent.ts b/packages/events/src/FederatedWheelEvent.ts
index 89b5e6d5f5..02965487d0 100644
--- a/packages/events/src/FederatedWheelEvent.ts
+++ b/packages/events/src/FederatedWheelEvent.ts
@@ -2,7 +2,6 @@ import { FederatedMouseEvent } from './FederatedMouseEvent';
/**
* A {@link PIXI.FederatedEvent} for wheel events.
- *
* @memberof PIXI
*/
export class FederatedWheelEvent extends FederatedMouseEvent implements WheelEvent
diff --git a/packages/events/test/EventBoundary.tests.ts b/packages/events/test/EventBoundary.tests.ts
index 6e5c521e77..53fd1d7986 100644
--- a/packages/events/test/EventBoundary.tests.ts
+++ b/packages/events/test/EventBoundary.tests.ts
@@ -4,9 +4,9 @@ import { Graphics } from '@pixi/graphics';
import sinon from 'sinon';
import { expect } from 'chai';
-describe('EventBoundary', function ()
+describe('EventBoundary', () =>
{
- it('should fire capture, bubble events on the correct target', function ()
+ it('should fire capture, bubble events on the correct target', () =>
{
const stage = new Container();
const boundary = new EventBoundary(stage);
@@ -50,7 +50,7 @@ describe('EventBoundary', function ()
expect(stageSpy).to.have.been.calledOnce;
});
- it('should set hit-test target to most specific ancestor if hit object is not interactive', function ()
+ it('should set hit-test target to most specific ancestor if hit object is not interactive', () =>
{
const stage = new Container();
const boundary = new EventBoundary(stage);
@@ -65,13 +65,14 @@ describe('EventBoundary', function ()
expect(hitTestTarget).to.equal(container);
});
- it('should fire pointerupoutside only on relevant & still mounted targets', function ()
+ it('should fire pointerupoutside only on relevant & still mounted targets', () =>
{
const stage = new Container();
const boundary = new EventBoundary(stage);
const container = stage.addChild(new Container());
const pressed = container.addChild(new Graphics().beginFill(0).drawRect(0, 0, 100, 100));
- const outside = stage.addChild(new Graphics().beginFill(0).drawRect(100, 0, 100, 100));
+
+ stage.addChild(new Graphics().beginFill(0).drawRect(100, 0, 100, 100));
const eventSpy = sinon.spy();
const containerSpy = sinon.spy();
@@ -101,7 +102,7 @@ describe('EventBoundary', function ()
off.global.set(150, 50);
boundary.mapEvent(on);
- expect(boundary.trackingData(1).pressTargetsByButton[1][2]).to.equal(pressed);
+ expect(boundary['trackingData'](1).pressTargetsByButton[1][2]).to.equal(pressed);
pressed.destroy();
boundary.mapEvent(off);
@@ -118,7 +119,7 @@ describe('EventBoundary', function ()
expect(stageSpy).to.have.been.calledOnce;
});
- it('should fire pointerout on the most specific mounted ancestor of pointerover target', function ()
+ it('should fire pointerout on the most specific mounted ancestor of pointerover target', () =>
{
const stage = new Container();
const boundary = new EventBoundary(stage);
@@ -133,13 +134,13 @@ describe('EventBoundary', function ()
const toOverSpy = sinon.spy();
over.addEventListener('pointerover', orgOverSpy);
- container.addEventListener('pointerover', function (e)
+ container.addEventListener('pointerover', (e) =>
{
expect(e.target).to.equal(over);
orgContainerOverSpy();
});
over.addEventListener('pointerout', outSpy);
- container.addEventListener('pointerout', function (e)
+ container.addEventListener('pointerout', (e) =>
{
expect(e.target).to.equal(container);
containerOutSpy();
diff --git a/packages/events/test/EventSystem.tests.ts b/packages/events/test/EventSystem.tests.ts
index 18b71bf715..3bdb2631a4 100644
--- a/packages/events/test/EventSystem.tests.ts
+++ b/packages/events/test/EventSystem.tests.ts
@@ -5,27 +5,33 @@ import { Graphics } from '@pixi/graphics';
import sinon from 'sinon';
import { expect } from 'chai';
-function createRenderer(view, supportsPointerEvents)
+function createRenderer(view?: HTMLCanvasElement, supportsPointerEvents?: boolean)
{
+ // TODO: event emitter types do not appear in tests
+ interface EERenderer extends Renderer
+ {
+ events: any
+ }
+
const renderer = Renderer.create({
width: 100,
height: 100,
view,
- });
+ }) as EERenderer;
- if (!renderer.events)
+ if (!renderer['events'])
{
renderer.addSystem(EventSystem, 'events');
}
if (supportsPointerEvents === false)
{
- renderer.events.removeEvents();
- renderer.events.supportsPointerEvents = false;
- renderer.events.setTargetElement(renderer.view);
+ renderer['events'].removeEvents();
+ renderer['events'].supportsPointerEvents = false;
+ renderer['events'].setTargetElement(renderer.view);
}
- renderer.events.supportsTouchEvents = true;
+ renderer['events'].supportsTouchEvents = true;
return renderer;
}
@@ -44,7 +50,7 @@ function createScene()
return [stage, graphics];
}
-describe('EventSystem', function ()
+describe('EventSystem', () =>
{
// Share WebGL context for performance
const view = document.createElement('canvas');
@@ -83,7 +89,12 @@ describe('EventSystem', function ()
{ type: 'touchstart' },
{ type: 'touchendoutside', native: 'touchend' },
]
- ];
+ ] as Array<{
+ type: string;
+ clientX?: number;
+ clientY?: number;
+ native?: string;
+ }>;
// Maps native event types to their listeners on EventSystem.
const handlers = {
@@ -108,7 +119,7 @@ describe('EventSystem', function ()
const isMouseEvent = events[0].type.startsWith('mouse');
const isTouchEvent = events[0].type.startsWith('touch');
- it(`should fire ${events[events.length - 1].type}`, function ()
+ it(`should fire ${events[events.length - 1].type}`, () =>
{
const renderer = createRenderer(view, isMouseEvent);
const stage = new Container();
@@ -127,7 +138,7 @@ describe('EventSystem', function ()
clientY = clientY || 25;
const eventSpy = sinon.spy();
- const handler = handlers[native || type];
+ const handler = handlers[(native || type) as keyof typeof handlers];
graphics.on(type, function testEvent(e)
{
@@ -149,7 +160,6 @@ describe('EventSystem', function ()
new Touch({
identifier: 0,
target: renderer.view,
- isPrimary: true,
clientX,
clientY,
}),
@@ -161,14 +171,14 @@ describe('EventSystem', function ()
event = new MouseEvent(native || type, { clientX, clientY });
}
- renderer.events[handler](event);
+ renderer['events'][handler](event);
expect(eventSpy).to.have.been.calledOnce;
});
});
});
- it('should manage the CSS cursor', function ()
+ it('should manage the CSS cursor', () =>
{
const renderer = createRenderer();
const [stage, graphics] = createScene();
@@ -176,7 +186,7 @@ describe('EventSystem', function ()
renderer.render(stage);
graphics.cursor = 'copy';
- renderer.events.onPointerMove(
+ renderer['events'].onPointerMove(
new PointerEvent('pointermove', {
clientX: 40,
clientY: 40,
@@ -189,7 +199,7 @@ describe('EventSystem', function ()
const eventSpy = sinon.spy();
graphics.on('mousemove', eventSpy);
- renderer.events.onPointerMove(
+ renderer['events'].onPointerMove(
new PointerEvent('pointermove', {
clientX: 60,
clientY: 60,
@@ -201,7 +211,7 @@ describe('EventSystem', function ()
expect(renderer.view.style.cursor).to.equal('inherit');
});
- it('should dispatch synthetic over/out events on pointermove', function ()
+ it('should dispatch synthetic over/out events on pointermove', () =>
{
const renderer = createRenderer();
const [stage, graphics] = createScene();
@@ -220,19 +230,19 @@ describe('EventSystem', function ()
let callCount = 0;
- graphics.on('pointerover', function ()
+ graphics.on('pointerover', () =>
{
expect(callCount).to.equal(0);
primaryOverSpy();
++callCount;
});
- graphics.on('pointermove', function ()
+ graphics.on('pointermove', () =>
{
expect(callCount).to.equal(1);
primaryMoveSpy();
++callCount;
});
- graphics.on('pointerout', function ()
+ graphics.on('pointerout', () =>
{
expect(callCount).to.equal(2);
primaryOutSpy();
@@ -243,27 +253,27 @@ describe('EventSystem', function ()
const secondaryOutSpy = sinon.spy();
const secondaryMoveSpy = sinon.spy();
- second.on('pointerover', function ()
+ second.on('pointerover', () =>
{
expect(callCount).to.equal(3);
secondaryOverSpy();
++callCount;
});
second.on('pointerout', secondaryOutSpy);
- second.on('pointermove', function ()
+ second.on('pointermove', () =>
{
expect(callCount).to.equal(4);
secondaryMoveSpy();
++callCount;
});
- renderer.events.onPointerMove(
+ renderer['events'].onPointerMove(
new PointerEvent('pointermove', { clientX: 25, clientY: 25 })
);
expect(primaryOverSpy).to.have.been.calledOnce;
expect(primaryMoveSpy).to.have.been.calledOnce;
- renderer.events.onPointerMove(
+ renderer['events'].onPointerMove(
new PointerEvent('pointermove', { clientX: 125, clientY: 25 })
);
expect(primaryOutSpy).to.have.been.calledOnce;
@@ -272,7 +282,7 @@ describe('EventSystem', function ()
expect(secondaryOutSpy).to.not.have.been.calledOnce;
});
- it('should dispatch click events', function ()
+ it('should dispatch click events', () =>
{
const renderer = createRenderer();
const [stage, graphics] = createScene();
@@ -280,13 +290,13 @@ describe('EventSystem', function ()
renderer.render(stage);
- graphics.addEventListener('pointertap', function (e)
+ graphics.addEventListener('pointertap', (e) =>
{
expect(e.type).to.equal('click');
eventSpy();
});
- renderer.events.onPointerDown(
+ renderer['events'].onPointerDown(
new PointerEvent('pointerdown', { clientX: 25, clientY: 25 })
);
const e = new PointerEvent('pointerup', { clientX: 30, clientY: 20 });
@@ -296,12 +306,12 @@ describe('EventSystem', function ()
writable: false,
value: renderer.view
});
- renderer.events.onPointerUp(e);
+ renderer['events'].onPointerUp(e);
expect(eventSpy).to.have.been.calledOnce;
});
- it('should set the detail of click events to the click count', function (done)
+ it('should set the detail of click events to the click count', (done) =>
{
const renderer = createRenderer();
const [stage, graphics] = createScene();
@@ -310,16 +320,16 @@ describe('EventSystem', function ()
renderer.render(stage);
- graphics.addEventListener('pointertap', function (e)
+ graphics.addEventListener('pointertap', (e) =>
{
++clickCount;
- expect(e.detail).to.equal(clickCount);
+ expect((e as PointerEvent).detail).to.equal(clickCount);
eventSpy();
});
for (let i = 0; i < 3; i++)
{
- renderer.events.onPointerDown(
+ renderer['events'].onPointerDown(
new PointerEvent('pointerdown', { clientX: 25, clientY: 25 })
);
const e = new PointerEvent('pointerup', { clientX: 30, clientY: 20 });
@@ -329,7 +339,7 @@ describe('EventSystem', function ()
writable: false,
value: renderer.view
});
- renderer.events.onPointerUp(e);
+ renderer['events'].onPointerUp(e);
}
expect(eventSpy).to.have.been.calledThrice;
@@ -338,15 +348,15 @@ describe('EventSystem', function ()
const newSpy = sinon.spy();
- graphics.addEventListener('pointertap', function (e)
+ graphics.addEventListener('pointertap', (e) =>
{
- expect(e.detail).to.equal(1);
+ expect((e as PointerEvent).detail).to.equal(1);
newSpy();
});
- setTimeout(function ()
+ setTimeout(() =>
{
- renderer.events.onPointerDown(
+ renderer['events'].onPointerDown(
new PointerEvent('pointerdown', { clientX: 25, clientY: 25 })
);
const e = new PointerEvent('pointerup', { clientX: 30, clientY: 20 });
@@ -356,7 +366,7 @@ describe('EventSystem', function ()
writable: false,
value: renderer.view
});
- renderer.events.onPointerUp(e);
+ renderer['events'].onPointerUp(e);
expect(newSpy).to.have.been.calledOnce;
done();
diff --git a/packages/extract/package.json b/packages/extract/package.json
index cfc5fce6d4..f35833b6bc 100644
--- a/packages/extract/package.json
+++ b/packages/extract/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/extract",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/extract.js",
"module": "dist/esm/extract.js",
"bundle": "dist/browser/extract.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/extract.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/extract.js"
+ }
+ }
+ },
"description": "Extract raw graphics data from renderer",
"author": "Mat Groves",
"contributors": [
@@ -25,8 +38,8 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0",
- "@pixi/math": "6.3.0",
- "@pixi/utils": "6.3.0"
+ "@pixi/core": "6.4.2",
+ "@pixi/math": "6.4.2",
+ "@pixi/utils": "6.4.2"
}
}
diff --git a/packages/extract/src/Extract.ts b/packages/extract/src/Extract.ts
index 7335bd4277..6c247d4a12 100644
--- a/packages/extract/src/Extract.ts
+++ b/packages/extract/src/Extract.ts
@@ -3,18 +3,32 @@ import { Rectangle } from '@pixi/math';
import { RenderTexture } from '@pixi/core';
import type { Renderer, IRendererPlugin } from '@pixi/core';
-import type { DisplayObject } from '@pixi/display';
+import { DisplayObject } from '@pixi/display';
const TEMP_RECT = new Rectangle();
const BYTES_PER_PIXEL = 4;
+/**
+ * this interface is used to extract only a single pixel of Render Texture or Display Object
+ * if you use this Interface all fields is required
+ * @example
+ * test: PixelExtractOptions = { x: 15, y: 20, resolution: 4, width: 10, height: 10 }
+ */
+export interface PixelExtractOptions
+{
+ x: number,
+ y: number,
+ height: number,
+ resolution: number,
+ width: number
+}
+
/**
* This class provides renderer-specific plugins for exporting content from a renderer.
* For instance, these plugins can be used for saving an Image, Canvas element or for exporting the raw image data (pixels).
*
* Do not instantiate these plugins directly. It is available from the `renderer.plugins` property.
* See {@link PIXI.CanvasRenderer#plugins} or {@link PIXI.Renderer#plugins}.
- *
* @example
* // Create a new app (will auto-add extract plugin to renderer)
* const app = new PIXI.Application();
@@ -27,9 +41,9 @@ const BYTES_PER_PIXEL = 4;
* // Render the graphics as an HTMLImageElement
* const image = app.renderer.plugins.extract.image(graphics);
* document.body.appendChild(image);
- *
* @memberof PIXI
*/
+
export class Extract implements IRendererPlugin
{
private renderer: Renderer;
@@ -44,14 +58,13 @@ export class Extract implements IRendererPlugin
/**
* Will return a HTML Image of the target
- *
* @param target - A displayObject or renderTexture
* to convert. If left empty will use the main renderer
* @param format - Image format, e.g. "image/jpeg" or "image/webp".
* @param quality - JPEG or Webp compression from 0 to 1. Default is 0.92.
- * @return - HTML Image of the target
+ * @returns - HTML Image of the target
*/
- public image(target: DisplayObject|RenderTexture, format?: string, quality?: number): HTMLImageElement
+ public image(target: DisplayObject | RenderTexture, format?: string, quality?: number): HTMLImageElement
{
const image = new Image();
@@ -63,26 +76,24 @@ export class Extract implements IRendererPlugin
/**
* Will return a base64 encoded string of this target. It works by calling
* `Extract.getCanvas` and then running toDataURL on that.
- *
* @param target - A displayObject or renderTexture
* to convert. If left empty will use the main renderer
* @param format - Image format, e.g. "image/jpeg" or "image/webp".
* @param quality - JPEG or Webp compression from 0 to 1. Default is 0.92.
- * @return - A base64 encoded string of the texture.
+ * @returns - A base64 encoded string of the texture.
*/
- public base64(target: DisplayObject|RenderTexture, format?: string, quality?: number): string
+ public base64(target: DisplayObject | RenderTexture, format?: string, quality?: number): string
{
return this.canvas(target).toDataURL(format, quality);
}
/**
* Creates a Canvas element, renders this target to it and then returns it.
- *
* @param target - A displayObject or renderTexture
* to convert. If left empty will use the main renderer
- * @return - A Canvas element with the texture rendered on.
+ * @returns - A Canvas element with the texture rendered on.
*/
- public canvas(target: DisplayObject|RenderTexture): HTMLCanvasElement
+ public canvas(target: DisplayObject | RenderTexture): HTMLCanvasElement
{
const renderer = this.renderer;
let resolution;
@@ -177,12 +188,12 @@ export class Extract implements IRendererPlugin
/**
* Will return a one-dimensional array containing the pixel data of the entire texture in RGBA
* order, with integer values between 0 and 255 (included).
- *
* @param target - A displayObject or renderTexture
* to convert. If left empty will use the main renderer
- * @return - One-dimensional array containing the pixel data of the entire texture
+ * @param options
+ * @returns - One-dimensional array containing the pixel data of the entire texture
*/
- public pixels(target?: DisplayObject|RenderTexture): Uint8Array
+ public pixels(target?: DisplayObject | RenderTexture, options?: PixelExtractOptions): Uint8Array
{
const renderer = this.renderer;
let resolution;
@@ -196,7 +207,7 @@ export class Extract implements IRendererPlugin
{
renderTexture = target;
}
- else
+ else if (target instanceof DisplayObject)
{
renderTexture = this.renderer.generateTexture(target);
generated = true;
@@ -205,11 +216,31 @@ export class Extract implements IRendererPlugin
if (renderTexture)
{
- resolution = renderTexture.baseTexture.resolution;
- frame = renderTexture.frame;
+ if (options)
+ {
+ resolution = options.resolution;
+ frame = renderTexture.frame;
- // bind the buffer
- renderer.renderTexture.bind(renderTexture);
+ // bind the buffer
+ renderer.renderTexture.bind(renderTexture);
+ }
+ else
+ {
+ resolution = renderTexture.baseTexture.resolution;
+ frame = renderTexture.frame;
+
+ // bind the buffer
+ renderer.renderTexture.bind(renderTexture);
+ }
+ }
+ else if (options)
+ {
+ resolution = options.resolution;
+
+ frame = TEMP_RECT;
+ frame.width = options.width;
+ frame.height = options.height;
+ renderer.renderTexture.bind(null);
}
else
{
@@ -258,7 +289,6 @@ export class Extract implements IRendererPlugin
/**
* Takes premultiplied pixel data and produces regular pixel data
- *
* @private
* @param pixels - array of pixel data
* @param out - output array
diff --git a/packages/extract/test/Extract.tests.ts b/packages/extract/test/Extract.tests.ts
index ab970b2a29..49a4035ff4 100644
--- a/packages/extract/test/Extract.tests.ts
+++ b/packages/extract/test/Extract.tests.ts
@@ -2,19 +2,19 @@ import { Sprite } from '@pixi/sprite';
import { expect } from 'chai';
import { skipHello } from '@pixi/utils';
import { Texture, RenderTexture, BatchRenderer, Renderer } from '@pixi/core';
-import { Extract } from '@pixi/extract';
+import { Extract, PixelExtractOptions } from '@pixi/extract';
skipHello();
-describe('Extract', function ()
+describe('Extract', () =>
{
- before(function ()
+ before(() =>
{
Renderer.registerPlugin('extract', Extract);
Renderer.registerPlugin('batch', BatchRenderer);
});
- it('should access extract on renderer', function ()
+ it('should access extract on renderer', () =>
{
const renderer = new Renderer();
@@ -23,7 +23,7 @@ describe('Extract', function ()
renderer.destroy();
});
- it('should extract an sprite', function ()
+ it('should extract an sprite', () =>
{
const renderer = new Renderer();
const sprite = new Sprite(Texture.WHITE);
@@ -38,31 +38,32 @@ describe('Extract', function ()
sprite.destroy();
});
- it('should extract with no arguments', function ()
+ it('should extract with no arguments', () =>
{
const renderer = new Renderer();
const extract = renderer.plugins.extract as Extract;
- expect(extract.canvas()).to.be.an.instanceof(HTMLCanvasElement);
- expect(extract.base64()).to.be.a('string');
+ expect(extract.canvas(undefined)).to.be.an.instanceof(HTMLCanvasElement);
+ expect(extract.base64(undefined)).to.be.a('string');
expect(extract.pixels()).to.be.instanceOf(Uint8Array);
- expect(extract.image()).to.be.instanceOf(HTMLImageElement);
+ expect(extract.image(undefined)).to.be.instanceOf(HTMLImageElement);
renderer.destroy();
});
- it('should extract a render texture', function ()
+ it('should extract a render texture', () =>
{
const renderer = new Renderer();
const extract = renderer.plugins.extract as Extract;
const renderTexture = RenderTexture.create({ width: 10, height: 10 });
const sprite = new Sprite(Texture.WHITE);
+ const test: PixelExtractOptions = { x: 1, y: 2, resolution: 5, width: 10, height: 10 };
renderer.render(sprite, { renderTexture });
expect(extract.canvas(renderTexture)).to.be.an.instanceof(HTMLCanvasElement);
expect(extract.base64(renderTexture)).to.be.a('string');
- expect(extract.pixels(renderTexture)).to.be.instanceOf(Uint8Array);
+ expect(extract.pixels(renderTexture, test)).to.be.instanceOf(Uint8Array);
expect(extract.image(renderTexture)).to.be.instanceOf(HTMLImageElement);
renderer.destroy();
diff --git a/packages/filters/filter-alpha/LICENSE b/packages/filter-alpha/LICENSE
similarity index 100%
rename from packages/filters/filter-alpha/LICENSE
rename to packages/filter-alpha/LICENSE
diff --git a/packages/filters/filter-alpha/README.md b/packages/filter-alpha/README.md
similarity index 100%
rename from packages/filters/filter-alpha/README.md
rename to packages/filter-alpha/README.md
diff --git a/packages/filters/filter-alpha/package.json b/packages/filter-alpha/package.json
similarity index 69%
rename from packages/filters/filter-alpha/package.json
rename to packages/filter-alpha/package.json
index af84f6a4bc..ecef8d1ed0 100644
--- a/packages/filters/filter-alpha/package.json
+++ b/packages/filter-alpha/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/filter-alpha",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/filter-alpha.js",
"module": "dist/esm/filter-alpha.js",
"bundle": "dist/browser/filter-alpha.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/filter-alpha.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/filter-alpha.js"
+ }
+ }
+ },
"namespace": "PIXI.filters",
"description": "Filter that applies alpha evenly across the entire display object and any opaque elements it contains",
"author": "Mat Groves",
@@ -26,6 +39,6 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0"
+ "@pixi/core": "6.4.2"
}
}
diff --git a/packages/filters/filter-alpha/src/AlphaFilter.ts b/packages/filter-alpha/src/AlphaFilter.ts
similarity index 99%
rename from packages/filters/filter-alpha/src/AlphaFilter.ts
rename to packages/filter-alpha/src/AlphaFilter.ts
index b02e3485cf..a8d124d396 100644
--- a/packages/filters/filter-alpha/src/AlphaFilter.ts
+++ b/packages/filter-alpha/src/AlphaFilter.ts
@@ -13,7 +13,6 @@ import fragment from './alpha.frag';
* 1. Assign a blendMode to this filter, blend all elements inside display object with background.
*
* 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter.
- *
* @memberof PIXI.filters
*/
export class AlphaFilter extends Filter
@@ -30,7 +29,6 @@ export class AlphaFilter extends Filter
/**
* Coefficient for alpha multiplication
- *
* @default 1
*/
get alpha(): number
diff --git a/packages/filters/filter-alpha/src/alpha.frag b/packages/filter-alpha/src/alpha.frag
similarity index 100%
rename from packages/filters/filter-alpha/src/alpha.frag
rename to packages/filter-alpha/src/alpha.frag
diff --git a/packages/filters/filter-alpha/src/index.ts b/packages/filter-alpha/src/index.ts
similarity index 100%
rename from packages/filters/filter-alpha/src/index.ts
rename to packages/filter-alpha/src/index.ts
diff --git a/packages/filters/filter-alpha/test/AlphaFilter.tests.ts b/packages/filter-alpha/test/AlphaFilter.tests.ts
similarity index 76%
rename from packages/filters/filter-alpha/test/AlphaFilter.tests.ts
rename to packages/filter-alpha/test/AlphaFilter.tests.ts
index 87cddbbdcc..54f850c9c9 100644
--- a/packages/filters/filter-alpha/test/AlphaFilter.tests.ts
+++ b/packages/filter-alpha/test/AlphaFilter.tests.ts
@@ -1,9 +1,9 @@
import { AlphaFilter } from '@pixi/filter-alpha';
import { expect } from 'chai';
-describe('AlphaFilter', function ()
+describe('AlphaFilter', () =>
{
- it('should construct filter', function ()
+ it('should construct filter', () =>
{
const filter = new AlphaFilter();
@@ -13,7 +13,7 @@ describe('AlphaFilter', function ()
filter.destroy();
});
- it('should allow alpha to be set', function ()
+ it('should allow alpha to be set', () =>
{
const filter = new AlphaFilter();
diff --git a/packages/filters/filter-blur/LICENSE b/packages/filter-blur/LICENSE
similarity index 100%
rename from packages/filters/filter-blur/LICENSE
rename to packages/filter-blur/LICENSE
diff --git a/packages/filters/filter-blur/README.md b/packages/filter-blur/README.md
similarity index 100%
rename from packages/filters/filter-blur/README.md
rename to packages/filter-blur/README.md
diff --git a/packages/filters/filter-blur/package.json b/packages/filter-blur/package.json
similarity index 65%
rename from packages/filters/filter-blur/package.json
rename to packages/filter-blur/package.json
index 9a5bb6d4d2..97603ca825 100644
--- a/packages/filters/filter-blur/package.json
+++ b/packages/filter-blur/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/filter-blur",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/filter-blur.js",
"module": "dist/esm/filter-blur.js",
"bundle": "dist/browser/filter-blur.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/filter-blur.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/filter-blur.js"
+ }
+ }
+ },
"namespace": "PIXI.filters",
"description": "Filter that blurs the display object",
"author": "Mat Groves",
@@ -26,7 +39,7 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0",
- "@pixi/settings": "6.3.0"
+ "@pixi/core": "6.4.2",
+ "@pixi/settings": "6.4.2"
}
}
diff --git a/packages/filters/filter-blur/src/BlurFilter.ts b/packages/filter-blur/src/BlurFilter.ts
similarity index 98%
rename from packages/filters/filter-blur/src/BlurFilter.ts
rename to packages/filter-blur/src/BlurFilter.ts
index 889f303144..096ea02d74 100644
--- a/packages/filters/filter-blur/src/BlurFilter.ts
+++ b/packages/filter-blur/src/BlurFilter.ts
@@ -10,7 +10,6 @@ import type { BLEND_MODES } from '@pixi/constants';
* The BlurFilter applies a Gaussian blur to an object.
*
* The strength of the blur can be set for the x-axis and y-axis separately.
- *
* @memberof PIXI.filters
*/
export class BlurFilter extends Filter
@@ -42,7 +41,6 @@ export class BlurFilter extends Filter
/**
* Applies the filter.
- *
* @param filterManager - The manager.
* @param input - The input target.
* @param output - The output target.
@@ -86,7 +84,6 @@ export class BlurFilter extends Filter
/**
* Sets the strength of both the blurX and blurY properties simultaneously
- *
* @default 2
*/
get blur(): number
@@ -102,7 +99,6 @@ export class BlurFilter extends Filter
/**
* Sets the number of passes for blur. More passes means higher quality bluring.
- *
* @default 1
*/
get quality(): number
@@ -117,7 +113,6 @@ export class BlurFilter extends Filter
/**
* Sets the strength of the blurX property
- *
* @default 2
*/
get blurX(): number
@@ -133,7 +128,6 @@ export class BlurFilter extends Filter
/**
* Sets the strength of the blurY property
- *
* @default 2
*/
get blurY(): number
@@ -149,7 +143,6 @@ export class BlurFilter extends Filter
/**
* Sets the blendmode of the filter
- *
* @default PIXI.BLEND_MODES.NORMAL
*/
get blendMode(): BLEND_MODES
@@ -164,7 +157,6 @@ export class BlurFilter extends Filter
/**
* If set to true the edge of the target will be clamped
- *
* @default false
*/
get repeatEdgePixels(): boolean
diff --git a/packages/filters/filter-blur/src/BlurFilterPass.ts b/packages/filter-blur/src/BlurFilterPass.ts
similarity index 99%
rename from packages/filters/filter-blur/src/BlurFilterPass.ts
rename to packages/filter-blur/src/BlurFilterPass.ts
index 2cb7982414..87806f2948 100644
--- a/packages/filters/filter-blur/src/BlurFilterPass.ts
+++ b/packages/filter-blur/src/BlurFilterPass.ts
@@ -8,7 +8,6 @@ import type { FilterSystem, RenderTexture } from '@pixi/core';
/**
* The BlurFilterPass applies a horizontal or vertical Gaussian blur to an object.
- *
* @memberof PIXI.filters
*/
export class BlurFilterPass extends Filter
@@ -51,7 +50,6 @@ export class BlurFilterPass extends Filter
/**
* Applies the filter.
- *
* @param filterManager - The manager.
* @param input - The input target.
* @param output - The output target.
@@ -125,7 +123,6 @@ export class BlurFilterPass extends Filter
}
/**
* Sets the strength of both the blur.
- *
* @default 16
*/
get blur(): number
@@ -142,7 +139,6 @@ export class BlurFilterPass extends Filter
/**
* Sets the quality of the blur by modifying the number of passes. More passes means higher
* quality bluring but the lower the performance.
- *
* @default 4
*/
get quality(): number
diff --git a/packages/filters/filter-blur/src/generateBlurFragSource.ts b/packages/filter-blur/src/generateBlurFragSource.ts
similarity index 98%
rename from packages/filters/filter-blur/src/generateBlurFragSource.ts
rename to packages/filter-blur/src/generateBlurFragSource.ts
index 090ad96e12..376d2c3956 100644
--- a/packages/filters/filter-blur/src/generateBlurFragSource.ts
+++ b/packages/filter-blur/src/generateBlurFragSource.ts
@@ -1,4 +1,5 @@
-interface IGAUSSIAN_VALUES {
+interface IGAUSSIAN_VALUES
+{
[x: number]: number[];
}
const GAUSSIAN_VALUES: IGAUSSIAN_VALUES = {
diff --git a/packages/filters/filter-blur/src/generateBlurVertSource.ts b/packages/filter-blur/src/generateBlurVertSource.ts
similarity index 100%
rename from packages/filters/filter-blur/src/generateBlurVertSource.ts
rename to packages/filter-blur/src/generateBlurVertSource.ts
diff --git a/packages/filters/filter-blur/src/getMaxBlurKernelSize.ts b/packages/filter-blur/src/getMaxBlurKernelSize.ts
similarity index 100%
rename from packages/filters/filter-blur/src/getMaxBlurKernelSize.ts
rename to packages/filter-blur/src/getMaxBlurKernelSize.ts
diff --git a/packages/filters/filter-blur/src/index.ts b/packages/filter-blur/src/index.ts
similarity index 100%
rename from packages/filters/filter-blur/src/index.ts
rename to packages/filter-blur/src/index.ts
diff --git a/packages/filters/filter-blur/test/BlurFilter.tests.ts b/packages/filter-blur/test/BlurFilter.tests.ts
similarity index 84%
rename from packages/filters/filter-blur/test/BlurFilter.tests.ts
rename to packages/filter-blur/test/BlurFilter.tests.ts
index 41485517b7..241a1ace8d 100644
--- a/packages/filters/filter-blur/test/BlurFilter.tests.ts
+++ b/packages/filter-blur/test/BlurFilter.tests.ts
@@ -1,9 +1,9 @@
import { BlurFilter } from '@pixi/filter-blur';
import { expect } from 'chai';
-describe('BlurFilter', function ()
+describe('BlurFilter', () =>
{
- it('should construct filter', function ()
+ it('should construct filter', () =>
{
const filter = new BlurFilter();
@@ -16,7 +16,7 @@ describe('BlurFilter', function ()
filter.destroy();
});
- it('should support repeatEdgePixels', function ()
+ it('should support repeatEdgePixels', () =>
{
const filter = new BlurFilter();
diff --git a/packages/filters/filter-color-matrix/LICENSE b/packages/filter-color-matrix/LICENSE
similarity index 100%
rename from packages/filters/filter-color-matrix/LICENSE
rename to packages/filter-color-matrix/LICENSE
diff --git a/packages/filters/filter-color-matrix/README.md b/packages/filter-color-matrix/README.md
similarity index 100%
rename from packages/filters/filter-color-matrix/README.md
rename to packages/filter-color-matrix/README.md
diff --git a/packages/filters/filter-color-matrix/package.json b/packages/filter-color-matrix/package.json
similarity index 68%
rename from packages/filters/filter-color-matrix/package.json
rename to packages/filter-color-matrix/package.json
index bcfac4bdfe..62a2a1b58b 100644
--- a/packages/filters/filter-color-matrix/package.json
+++ b/packages/filter-color-matrix/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/filter-color-matrix",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/filter-color-matrix.js",
"module": "dist/esm/filter-color-matrix.js",
"bundle": "dist/browser/filter-color-matrix.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/filter-color-matrix.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/filter-color-matrix.js"
+ }
+ }
+ },
"namespace": "PIXI.filters",
"description": "Filter that lets you change RGBA via a 5x4 matrix transformation",
"author": "Mat Groves",
@@ -26,6 +39,6 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0"
+ "@pixi/core": "6.4.2"
}
}
diff --git a/packages/filters/filter-color-matrix/src/ColorMatrixFilter.ts b/packages/filter-color-matrix/src/ColorMatrixFilter.ts
similarity index 98%
rename from packages/filters/filter-color-matrix/src/ColorMatrixFilter.ts
rename to packages/filter-color-matrix/src/ColorMatrixFilter.ts
index bd563d1f23..4c4038c257 100644
--- a/packages/filters/filter-color-matrix/src/ColorMatrixFilter.ts
+++ b/packages/filter-color-matrix/src/ColorMatrixFilter.ts
@@ -39,7 +39,6 @@ export class ColorMatrixFilter extends Filter
/**
* Transforms current matrix and set the new one
- *
* @param {number[]} matrix - 5x4 matrix
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -60,7 +59,6 @@ export class ColorMatrixFilter extends Filter
/**
* Multiplies two mat5's
- *
* @private
* @param out - 5x4 matrix the receiving matrix
* @param a - 5x4 matrix the first operand
@@ -102,9 +100,8 @@ export class ColorMatrixFilter extends Filter
/**
* Create a Float32 Array and normalize the offset component to 0-1
- *
* @param {number[]} matrix - 5x4 matrix
- * @return {number[]} 5x4 matrix with all values between 0-1
+ * @returns {number[]} 5x4 matrix with all values between 0-1
*/
private _colorMatrix(matrix: ColorMatrix): ColorMatrix
{
@@ -121,7 +118,6 @@ export class ColorMatrixFilter extends Filter
/**
* Adjusts brightness
- *
* @param b - value of the brigthness (0-1, where 0 is black)
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -142,7 +138,6 @@ export class ColorMatrixFilter extends Filter
* Sets each channel on the diagonal of the color matrix.
* This can be used to achieve a tinting effect on Containers similar to the tint field of some
* display objects like Sprite, Text, Graphics, and Mesh.
- *
* @param color - Color of the tint. This is a hex value.
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -165,7 +160,6 @@ export class ColorMatrixFilter extends Filter
/**
* Set the matrices in grey scales
- *
* @param scale - value of the grey (0-1, where 0 is black)
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -184,7 +178,6 @@ export class ColorMatrixFilter extends Filter
/**
* Set the black and white matrice.
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -202,7 +195,6 @@ export class ColorMatrixFilter extends Filter
/**
* Set the hue property of the color
- *
* @param rotation - in degrees
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -257,7 +249,6 @@ export class ColorMatrixFilter extends Filter
* Set the contrast matrix, increase the separation between dark and bright
* Increase contrast : shadows darker and highlights brighter
* Decrease contrast : bring the shadows up and the highlights down
- *
* @param amount - value of the contrast (0-1)
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -280,7 +271,6 @@ export class ColorMatrixFilter extends Filter
/**
* Set the saturation matrix, increase the separation between colors
* Increase saturation : increase contrast, brightness, and sharpness
- *
* @param amount - The saturation amount (0-1)
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -300,11 +290,7 @@ export class ColorMatrixFilter extends Filter
this._loadMatrix(matrix, multiply);
}
- /**
- * Desaturate image (remove color)
- *
- * Call the saturate function
- */
+ /** Desaturate image (remove color) Call the saturate function */
public desaturate(): void // eslint-disable-line no-unused-vars
{
this.saturate(-1);
@@ -312,7 +298,6 @@ export class ColorMatrixFilter extends Filter
/**
* Negative image (inverse of classic rgb matrix)
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -330,7 +315,6 @@ export class ColorMatrixFilter extends Filter
/**
* Sepia image
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -348,7 +332,6 @@ export class ColorMatrixFilter extends Filter
/**
* Color motion picture process invented in 1916 (thanks Dominic Szablewski)
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -366,7 +349,6 @@ export class ColorMatrixFilter extends Filter
/**
* Polaroid filter
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -384,7 +366,6 @@ export class ColorMatrixFilter extends Filter
/**
* Filter who transforms : Red -> Blue and Blue -> Red
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -402,7 +383,6 @@ export class ColorMatrixFilter extends Filter
/**
* Color reversal film introduced by Eastman Kodak in 1935. (thanks Dominic Szablewski)
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -420,7 +400,6 @@ export class ColorMatrixFilter extends Filter
/**
* Brown delicious browni filter (thanks Dominic Szablewski)
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -438,7 +417,6 @@ export class ColorMatrixFilter extends Filter
/**
* Vintage filter (thanks Dominic Szablewski)
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -456,7 +434,6 @@ export class ColorMatrixFilter extends Filter
/**
* We don't know exactly what it does, kind of gradient map, but funny to play with!
- *
* @param desaturation - Tone values.
* @param toned - Tone values.
* @param lightColor - Tone values, example: `0xFFE580`
@@ -491,7 +468,6 @@ export class ColorMatrixFilter extends Filter
/**
* Night effect
- *
* @param intensity - The intensity of the night effect.
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -514,7 +490,6 @@ export class ColorMatrixFilter extends Filter
* Predator effect
*
* Erase the current matrix by setting a new indepent one
- *
* @param amount - how much the predator feels his future victim
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
@@ -551,7 +526,6 @@ export class ColorMatrixFilter extends Filter
* LSD effect
*
* Multiply the current matrix
- *
* @param multiply - if true, current matrix and matrix are multiplied. If false,
* just set the current matrix with @param matrix
*/
@@ -582,7 +556,6 @@ export class ColorMatrixFilter extends Filter
/**
* The matrix of the color matrix filter
- *
* @member {number[]}
* @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]
*/
@@ -602,7 +575,6 @@ export class ColorMatrixFilter extends Filter
* When the value is 0, the original color is used without modification.
* When the value is 1, the result color is used.
* When in the range (0, 1) the color is interpolated between the original and result by this amount.
- *
* @default 1
*/
get alpha(): number
diff --git a/packages/filters/filter-color-matrix/src/colorMatrix.frag b/packages/filter-color-matrix/src/colorMatrix.frag
similarity index 100%
rename from packages/filters/filter-color-matrix/src/colorMatrix.frag
rename to packages/filter-color-matrix/src/colorMatrix.frag
diff --git a/packages/filters/filter-color-matrix/src/index.ts b/packages/filter-color-matrix/src/index.ts
similarity index 100%
rename from packages/filters/filter-color-matrix/src/index.ts
rename to packages/filter-color-matrix/src/index.ts
diff --git a/packages/filters/filter-color-matrix/test/ColorMatrixFilter.tests.ts b/packages/filter-color-matrix/test/ColorMatrixFilter.tests.ts
similarity index 90%
rename from packages/filters/filter-color-matrix/test/ColorMatrixFilter.tests.ts
rename to packages/filter-color-matrix/test/ColorMatrixFilter.tests.ts
index e6e2249c63..1e23350073 100644
--- a/packages/filters/filter-color-matrix/test/ColorMatrixFilter.tests.ts
+++ b/packages/filter-color-matrix/test/ColorMatrixFilter.tests.ts
@@ -1,9 +1,9 @@
import { ColorMatrixFilter } from '@pixi/filter-color-matrix';
import { expect } from 'chai';
-describe('ColorMatrixFilter', function ()
+describe('ColorMatrixFilter', () =>
{
- it('should construct filter', function ()
+ it('should construct filter', () =>
{
const filter = new ColorMatrixFilter();
@@ -20,7 +20,7 @@ describe('ColorMatrixFilter', function ()
filter.destroy();
});
- it('should run all operations without multiply', function ()
+ it('should run all operations without multiply', () =>
{
const filter = new ColorMatrixFilter();
@@ -49,7 +49,7 @@ describe('ColorMatrixFilter', function ()
filter.destroy();
});
- it('should run all operations with multiply', function ()
+ it('should run all operations with multiply', () =>
{
const filter = new ColorMatrixFilter();
diff --git a/packages/filters/filter-displacement/LICENSE b/packages/filter-displacement/LICENSE
similarity index 100%
rename from packages/filters/filter-displacement/LICENSE
rename to packages/filter-displacement/LICENSE
diff --git a/packages/filters/filter-displacement/README.md b/packages/filter-displacement/README.md
similarity index 100%
rename from packages/filters/filter-displacement/README.md
rename to packages/filter-displacement/README.md
diff --git a/packages/filters/filter-displacement/package.json b/packages/filter-displacement/package.json
similarity index 66%
rename from packages/filters/filter-displacement/package.json
rename to packages/filter-displacement/package.json
index 480d027e73..9f23828f58 100644
--- a/packages/filters/filter-displacement/package.json
+++ b/packages/filter-displacement/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/filter-displacement",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/filter-displacement.js",
"module": "dist/esm/filter-displacement.js",
"bundle": "dist/browser/filter-displacement.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/filter-displacement.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/filter-displacement.js"
+ }
+ }
+ },
"namespace": "PIXI.filters",
"description": "Filter that allows offsetting of pixel values to create warping effects",
"author": "Mat Groves",
@@ -26,7 +39,7 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0",
- "@pixi/math": "6.3.0"
+ "@pixi/core": "6.4.2",
+ "@pixi/math": "6.4.2"
}
}
diff --git a/packages/filters/filter-displacement/src/DisplacementFilter.ts b/packages/filter-displacement/src/DisplacementFilter.ts
similarity index 99%
rename from packages/filters/filter-displacement/src/DisplacementFilter.ts
rename to packages/filter-displacement/src/DisplacementFilter.ts
index ca50329024..545bd7859e 100644
--- a/packages/filters/filter-displacement/src/DisplacementFilter.ts
+++ b/packages/filter-displacement/src/DisplacementFilter.ts
@@ -19,7 +19,6 @@ import type { FilterSystem, RenderTexture, Texture, ISpriteMaskTarget } from '@p
* Instead, it's starting at the output and asking "which pixel from the original goes here".
* For example, if a displacement map pixel has `red = 1` and the filter scale is `20`,
* this filter will output the pixel approximately 20 pixels to the right of the original.
- *
* @memberof PIXI.filters
*/
export class DisplacementFilter extends Filter
@@ -62,7 +61,6 @@ export class DisplacementFilter extends Filter
/**
* Applies the filter.
- *
* @param filterManager - The manager.
* @param input - The input target.
* @param output - The output target.
diff --git a/packages/filters/filter-displacement/src/displacement.frag b/packages/filter-displacement/src/displacement.frag
similarity index 100%
rename from packages/filters/filter-displacement/src/displacement.frag
rename to packages/filter-displacement/src/displacement.frag
diff --git a/packages/filters/filter-displacement/src/displacement.vert b/packages/filter-displacement/src/displacement.vert
similarity index 100%
rename from packages/filters/filter-displacement/src/displacement.vert
rename to packages/filter-displacement/src/displacement.vert
diff --git a/packages/filters/filter-displacement/src/index.ts b/packages/filter-displacement/src/index.ts
similarity index 100%
rename from packages/filters/filter-displacement/src/index.ts
rename to packages/filter-displacement/src/index.ts
diff --git a/packages/filters/filter-fxaa/LICENSE b/packages/filter-fxaa/LICENSE
similarity index 100%
rename from packages/filters/filter-fxaa/LICENSE
rename to packages/filter-fxaa/LICENSE
diff --git a/packages/filters/filter-fxaa/README.md b/packages/filter-fxaa/README.md
similarity index 100%
rename from packages/filters/filter-fxaa/README.md
rename to packages/filter-fxaa/README.md
diff --git a/packages/filters/filter-fxaa/package.json b/packages/filter-fxaa/package.json
similarity index 67%
rename from packages/filters/filter-fxaa/package.json
rename to packages/filter-fxaa/package.json
index 282beb05b9..6849976247 100644
--- a/packages/filters/filter-fxaa/package.json
+++ b/packages/filter-fxaa/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/filter-fxaa",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/filter-fxaa.js",
"module": "dist/esm/filter-fxaa.js",
"bundle": "dist/browser/filter-fxaa.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/filter-fxaa.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/filter-fxaa.js"
+ }
+ }
+ },
"namespace": "PIXI.filters",
"description": "Filter for fast approximate anti-aliasing",
"author": "Mat Groves",
@@ -26,6 +39,6 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0"
+ "@pixi/core": "6.4.2"
}
}
diff --git a/packages/filters/filter-fxaa/src/FXAAFilter.ts b/packages/filter-fxaa/src/FXAAFilter.ts
similarity index 98%
rename from packages/filters/filter-fxaa/src/FXAAFilter.ts
rename to packages/filter-fxaa/src/FXAAFilter.ts
index d1b8caf799..76831ffc70 100644
--- a/packages/filters/filter-fxaa/src/FXAAFilter.ts
+++ b/packages/filter-fxaa/src/FXAAFilter.ts
@@ -5,9 +5,7 @@ import fragment from './fxaa.frag';
/**
* Basic FXAA (Fast Approximate Anti-Aliasing) implementation based on the code on geeks3d.com
* with the modification that the texture2DLod stuff was removed since it is unsupported by WebGL.
- *
* @see https://github.com/mitsuhiko/webgl-meincraft
- *
* @memberof PIXI.filters
*/
export class FXAAFilter extends Filter
diff --git a/packages/filters/filter-fxaa/src/fxaa.frag b/packages/filter-fxaa/src/fxaa.frag
similarity index 100%
rename from packages/filters/filter-fxaa/src/fxaa.frag
rename to packages/filter-fxaa/src/fxaa.frag
diff --git a/packages/filters/filter-fxaa/src/fxaa.vert b/packages/filter-fxaa/src/fxaa.vert
similarity index 100%
rename from packages/filters/filter-fxaa/src/fxaa.vert
rename to packages/filter-fxaa/src/fxaa.vert
diff --git a/packages/filters/filter-fxaa/src/index.ts b/packages/filter-fxaa/src/index.ts
similarity index 100%
rename from packages/filters/filter-fxaa/src/index.ts
rename to packages/filter-fxaa/src/index.ts
diff --git a/packages/filters/filter-noise/LICENSE b/packages/filter-noise/LICENSE
similarity index 100%
rename from packages/filters/filter-noise/LICENSE
rename to packages/filter-noise/LICENSE
diff --git a/packages/filters/filter-noise/README.md b/packages/filter-noise/README.md
similarity index 100%
rename from packages/filters/filter-noise/README.md
rename to packages/filter-noise/README.md
diff --git a/packages/filters/filter-noise/package.json b/packages/filter-noise/package.json
similarity index 67%
rename from packages/filters/filter-noise/package.json
rename to packages/filter-noise/package.json
index 10552cf7a5..eb2a69f04d 100644
--- a/packages/filters/filter-noise/package.json
+++ b/packages/filter-noise/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/filter-noise",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/filter-noise.js",
"module": "dist/esm/filter-noise.js",
"bundle": "dist/browser/filter-noise.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/filter-noise.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/filter-noise.js"
+ }
+ }
+ },
"namespace": "PIXI.filters",
"description": "Filter that applies noise to a display object",
"author": "Mat Groves",
@@ -26,6 +39,6 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0"
+ "@pixi/core": "6.4.2"
}
}
diff --git a/packages/filters/filter-noise/src/NoiseFilter.ts b/packages/filter-noise/src/NoiseFilter.ts
similarity index 99%
rename from packages/filters/filter-noise/src/NoiseFilter.ts
rename to packages/filter-noise/src/NoiseFilter.ts
index 95000c5aa9..8c9fc59d34 100644
--- a/packages/filters/filter-noise/src/NoiseFilter.ts
+++ b/packages/filter-noise/src/NoiseFilter.ts
@@ -5,7 +5,6 @@ import fragment from './noise.frag';
* A Noise effect filter.
*
* original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js
- *
* @memberof PIXI.filters
* @author Vico @vicocotea
*/
@@ -28,7 +27,6 @@ export class NoiseFilter extends Filter
/**
* The amount of noise to apply, this value should be in the range (0, 1].
- *
* @default 0.5
*/
get noise(): number
diff --git a/packages/filters/filter-noise/src/index.ts b/packages/filter-noise/src/index.ts
similarity index 100%
rename from packages/filters/filter-noise/src/index.ts
rename to packages/filter-noise/src/index.ts
diff --git a/packages/filters/filter-noise/src/noise.frag b/packages/filter-noise/src/noise.frag
similarity index 100%
rename from packages/filters/filter-noise/src/noise.frag
rename to packages/filter-noise/src/noise.frag
diff --git a/packages/graphics-extras/package.json b/packages/graphics-extras/package.json
index a5d1c17a57..96aa9b0b99 100644
--- a/packages/graphics-extras/package.json
+++ b/packages/graphics-extras/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/graphics-extras",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/graphics-extras.js",
"module": "dist/esm/graphics-extras.js",
"bundle": "dist/browser/graphics-extras.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/graphics-extras.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/graphics-extras.js"
+ }
+ }
+ },
"bundleNoExports": true,
"description": "Additional Graphics functions for drawing special shapes.",
"author": "Matt Karl ",
@@ -23,7 +36,7 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/graphics": "6.3.0",
- "@pixi/math": "6.3.0"
+ "@pixi/graphics": "6.4.2",
+ "@pixi/math": "6.4.2"
}
}
diff --git a/packages/graphics-extras/src/drawChamferRect.ts b/packages/graphics-extras/src/drawChamferRect.ts
index ed8cbef643..52db279d3c 100644
--- a/packages/graphics-extras/src/drawChamferRect.ts
+++ b/packages/graphics-extras/src/drawChamferRect.ts
@@ -4,14 +4,14 @@ import type { Graphics } from '@pixi/graphics';
* Draw Rectangle with chamfer corners. These are angled corners.
*
* _Note: Only available with **@pixi/graphics-extras**._
- *
* @method PIXI.Graphics#drawChamferRect
+ * @param this
* @param {number} x - Upper left corner of rect
* @param {number} y - Upper right corner of rect
* @param {number} width - Width of rect
* @param {number} height - Height of rect
* @param {number} chamfer - non-zero real number, size of corner cutout
- * @return {PIXI.Graphics} Returns self.
+ * @returns {PIXI.Graphics} Returns self.
*/
export function drawChamferRect(this: Graphics,
x: number,
diff --git a/packages/graphics-extras/src/drawFilletRect.ts b/packages/graphics-extras/src/drawFilletRect.ts
index e26647bd73..30012d4334 100644
--- a/packages/graphics-extras/src/drawFilletRect.ts
+++ b/packages/graphics-extras/src/drawFilletRect.ts
@@ -5,14 +5,14 @@ import type { Graphics } from '@pixi/graphics';
* however it support negative numbers as well for the corner radius.
*
* _Note: Only available with **@pixi/graphics-extras**._
- *
* @method PIXI.Graphics#drawFilletRect
+ * @param this
* @param {number} x - Upper left corner of rect
* @param {number} y - Upper right corner of rect
* @param {number} width - Width of rect
* @param {number} height - Height of rect
* @param {number} fillet - accept negative or positive values
- * @return {PIXI.Graphics} Returns self.
+ * @returns {PIXI.Graphics} Returns self.
*/
export function drawFilletRect(this: Graphics,
x: number,
diff --git a/packages/graphics-extras/src/drawRegularPolygon.ts b/packages/graphics-extras/src/drawRegularPolygon.ts
index 7767492b44..5fad58ea3e 100644
--- a/packages/graphics-extras/src/drawRegularPolygon.ts
+++ b/packages/graphics-extras/src/drawRegularPolygon.ts
@@ -4,14 +4,14 @@ import type { Graphics } from '@pixi/graphics';
* Draw a regular polygon where all sides are the same length.
*
* _Note: Only available with **@pixi/graphics-extras**._
- *
* @method PIXI.Graphics#drawRegularPolygon
+ * @param this
* @param {number} x - X position
* @param {number} y - Y position
* @param {number} radius - Polygon radius
* @param {number} sides - Minimum value is 3
* @param {number} rotation - Starting rotation values in radians..
- * @return {PIXI.Graphics}
+ * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
*/
export function drawRegularPolygon(this: Graphics,
x: number,
diff --git a/packages/graphics-extras/src/drawRoundedPolygon.ts b/packages/graphics-extras/src/drawRoundedPolygon.ts
index 93a1bc4fe2..c06602a4ce 100644
--- a/packages/graphics-extras/src/drawRoundedPolygon.ts
+++ b/packages/graphics-extras/src/drawRoundedPolygon.ts
@@ -4,15 +4,15 @@ import type { Graphics } from '@pixi/graphics';
* Draw a regular polygon with rounded corners.
*
* _Note: Only available with **@pixi/graphics-extras**._
- *
* @method PIXI.Graphics#drawRoundedPolygon
+ * @param this
* @param {number} x - X position
* @param {number} y - Y position
* @param {number} radius - Polygon radius
* @param {number} sides - Minimum value is 3
* @param {number} corner - Corner size in pixels.
* @param {number} rotation - Starting rotation values in radians..
- * @return {PIXI.Graphics}
+ * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
*/
export function drawRoundedPolygon(this: Graphics,
x: number,
diff --git a/packages/graphics-extras/src/drawStar.ts b/packages/graphics-extras/src/drawStar.ts
index 403f30046d..20aadac5d2 100644
--- a/packages/graphics-extras/src/drawStar.ts
+++ b/packages/graphics-extras/src/drawStar.ts
@@ -3,7 +3,6 @@ import { Polygon, PI_2 } from '@pixi/math';
/**
* Draw a star shape with an arbitrary number of points.
- *
* @ignore
*/
class Star extends Polygon
@@ -44,15 +43,15 @@ class Star extends Polygon
* Draw a star shape with an arbitrary number of points.
*
* _Note: Only available with **@pixi/graphics-extras**._
- *
* @method PIXI.Graphics#drawStar
+ * @param this
* @param x - Center X position of the star
* @param y - Center Y position of the star
* @param points - The number of points of the star, must be > 1
* @param radius - The outer radius of the star
* @param innerRadius - The inner radius between points, default half `radius`
* @param rotation - The rotation of the star in radians, where 0 is vertical
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
export function drawStar(this: Graphics,
x: number,
diff --git a/packages/graphics-extras/src/drawTorus.ts b/packages/graphics-extras/src/drawTorus.ts
index eaa2d93b2e..cd298f2e68 100644
--- a/packages/graphics-extras/src/drawTorus.ts
+++ b/packages/graphics-extras/src/drawTorus.ts
@@ -4,15 +4,15 @@ import type { Graphics } from '@pixi/graphics';
* Draw a torus shape, like a donut. Can be used for something like a circle loader.
*
* _Note: Only available with **@pixi/graphics-extras**._
- *
* @method PIXI.Graphics#drawTorus
+ * @param this
* @param {number} x - X position
* @param {number} y - Y position
* @param {number} innerRadius - Inner circle radius
* @param {number} outerRadius - Outer circle radius
* @param {number} [startArc=0] - Where to begin sweep, in radians, 0.0 = to the right
* @param {number} [endArc=Math.PI*2] - Where to end sweep, in radians
- * @return {PIXI.Graphics}
+ * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
*/
export function drawTorus(this: Graphics,
x: number,
diff --git a/packages/graphics-extras/src/index.ts b/packages/graphics-extras/src/index.ts
index 795213c066..808613cf89 100644
--- a/packages/graphics-extras/src/index.ts
+++ b/packages/graphics-extras/src/index.ts
@@ -6,7 +6,8 @@ import { drawRegularPolygon } from './drawRegularPolygon';
import { drawRoundedPolygon } from './drawRoundedPolygon';
import { drawStar } from './drawStar';
-export interface IGraphicsExtras {
+export interface IGraphicsExtras
+{
drawTorus: typeof drawTorus;
drawChamferRect: typeof drawChamferRect;
drawFilletRect: typeof drawFilletRect;
diff --git a/packages/graphics-extras/test/Graphics.tests.ts b/packages/graphics-extras/test/Graphics.tests.ts
index 1c25189d6a..fac54e79e1 100644
--- a/packages/graphics-extras/test/Graphics.tests.ts
+++ b/packages/graphics-extras/test/Graphics.tests.ts
@@ -2,9 +2,9 @@ import { Graphics } from '@pixi/graphics';
import { expect } from 'chai';
import '@pixi/graphics-extras';
-describe('Graphics', function ()
+describe('Graphics', () =>
{
- it('should have extras as mixins', function ()
+ it('should have extras as mixins', () =>
{
const g = new Graphics();
@@ -18,7 +18,7 @@ describe('Graphics', function ()
g.destroy();
});
- it('should call all commands with defaults', function ()
+ it('should call all commands with defaults', () =>
{
const g = new Graphics();
diff --git a/packages/graphics/package.json b/packages/graphics/package.json
index 8d02d2c286..737e75ecf7 100644
--- a/packages/graphics/package.json
+++ b/packages/graphics/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/graphics",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/graphics.js",
"module": "dist/esm/graphics.js",
"bundle": "dist/browser/graphics.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/graphics.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/graphics.js"
+ }
+ }
+ },
"description": "Draw primitive shapes such as lines, circles and rectangles to the display",
"author": "Mat Groves",
"contributors": [
@@ -25,11 +38,11 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/constants": "6.3.0",
- "@pixi/core": "6.3.0",
- "@pixi/display": "6.3.0",
- "@pixi/math": "6.3.0",
- "@pixi/sprite": "6.3.0",
- "@pixi/utils": "6.3.0"
+ "@pixi/constants": "6.4.2",
+ "@pixi/core": "6.4.2",
+ "@pixi/display": "6.4.2",
+ "@pixi/math": "6.4.2",
+ "@pixi/sprite": "6.4.2",
+ "@pixi/utils": "6.4.2"
}
}
diff --git a/packages/graphics/src/Graphics.ts b/packages/graphics/src/Graphics.ts
index 683ed2ffd5..8c4024afd7 100644
--- a/packages/graphics/src/Graphics.ts
+++ b/packages/graphics/src/Graphics.ts
@@ -23,10 +23,9 @@ import type { IShape, IPointData } from '@pixi/math';
import type { IDestroyOptions } from '@pixi/display';
import { LINE_JOIN, LINE_CAP } from './const';
-/**
- * Batch element computed from Graphics geometry
- */
-export interface IGraphicsBatchElement {
+/** Batch element computed from Graphics geometry */
+export interface IGraphicsBatchElement
+{
vertexData: Float32Array;
blendMode: BLEND_MODES;
indices: Uint16Array | Uint32Array;
@@ -38,14 +37,16 @@ export interface IGraphicsBatchElement {
_texture: Texture;
}
-export interface IFillStyleOptions {
+export interface IFillStyleOptions
+{
color?: number;
alpha?: number;
texture?: Texture;
matrix?: Matrix;
}
-export interface ILineStyleOptions extends IFillStyleOptions {
+export interface ILineStyleOptions extends IFillStyleOptions
+{
width?: number;
alignment?: number;
native?: boolean;
@@ -77,7 +78,6 @@ export interface Graphics extends GlobalMixins.Graphics, Container {}
* an optimization, by passing it into a new Geometry object's constructor. Because of this
* ability, it's important to call `destroy()` on Geometry objects once you are done with them, to
* properly dereference each GraphicsGeometry and prevent memory leaks.
- *
* @memberof PIXI
*/
export class Graphics extends Container
@@ -90,7 +90,6 @@ export class Graphics extends Container
/**
* Temporary point to use for containsPoint.
- *
* @private
*/
static _TEMP_POINT = new Point();
@@ -106,7 +105,6 @@ export class Graphics extends Container
/**
* Current path
- *
* @readonly
*/
public currentPath: Polygon = null;
@@ -148,7 +146,6 @@ export class Graphics extends Container
* Includes vertex positions, face indices, normals, colors, UVs, and
* custom attributes within buffers, reducing the cost of passing all
* this data to the GPU. Can be shared between multiple Mesh or Graphics objects.
- *
* @readonly
*/
public get geometry(): GraphicsGeometry
@@ -172,7 +169,6 @@ export class Graphics extends Container
* of the object in exchange for taking up texture memory. It is also useful if you need the graphics
* object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
* you are constantly redrawing the graphics element.
- *
* @name cacheAsBitmap
* @member {boolean}
* @memberof PIXI.Graphics#
@@ -189,8 +185,7 @@ export class Graphics extends Container
/**
* Creates a new Graphics object with the same values as this one.
* Note that only the geometry of the object is cloned, not its transform (position,scale,etc)
- *
- * @return - A clone of the graphics object
+ * @returns - A clone of the graphics object
*/
public clone(): Graphics
{
@@ -205,7 +200,6 @@ export class Graphics extends Container
* primitive in the GraphicsGeometry list is rendered sequentially, modes
* such as `PIXI.BLEND_MODES.ADD` and `PIXI.BLEND_MODES.MULTIPLY` will
* be applied per-primitive.
- *
* @default PIXI.BLEND_MODES.NORMAL
*/
public set blendMode(value: BLEND_MODES)
@@ -221,7 +215,6 @@ export class Graphics extends Container
/**
* The tint applied to each graphic shape. This is a hex value. A value of
* 0xFFFFFF will remove any tint effect.
- *
* @default 0xFFFFFF
*/
public get tint(): number
@@ -236,7 +229,6 @@ export class Graphics extends Container
/**
* The current fill style.
- *
* @readonly
*/
public get fill(): FillStyle
@@ -246,7 +238,6 @@ export class Graphics extends Container
/**
* The current line style.
- *
* @readonly
*/
public get line(): LineStyle
@@ -257,21 +248,19 @@ export class Graphics extends Container
/**
* Specifies the line style used for subsequent calls to Graphics methods such as the lineTo()
* method or the drawCircle() method.
- *
* @param [width=0] - width of the line to draw, will update the objects stored style
* @param [color=0x0] - color of the line to draw, will update the objects stored style
* @param [alpha=1] - alpha of the line to draw, will update the objects stored style
* @param [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer).
* WebGL only.
* @param [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public lineStyle(width: number, color?: number, alpha?: number, alignment?: number, native?: boolean): this;
/**
* Specifies the line style used for subsequent calls to Graphics methods such as the lineTo()
* method or the drawCircle() method.
- *
* @param options - Line style options
* @param {number} [options.width=0] - width of the line to draw, will update the objects stored style
* @param {number} [options.color=0x0] - color of the line to draw, will update the objects stored style
@@ -282,7 +271,7 @@ export class Graphics extends Container
* @param {PIXI.LINE_CAP}[options.cap=PIXI.LINE_CAP.BUTT] - line cap style
* @param {PIXI.LINE_JOIN}[options.join=PIXI.LINE_JOIN.MITER] - line join style
* @param {number}[options.miterLimit=10] - miter limit ratio
- * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls
+ * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
*/
public lineStyle(options?: ILineStyleOptions): this;
@@ -300,8 +289,7 @@ export class Graphics extends Container
/**
* Like line style but support texture for line fill.
- *
- * @param options - Collection of options for setting line style.
+ * @param [options] - Collection of options for setting line style.
* @param {number} [options.width=0] - width of the line to draw, will update the objects stored style
* @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to use
* @param {number} [options.color=0x0] - color of the line to draw, will update the objects stored style.
@@ -314,9 +302,9 @@ export class Graphics extends Container
* @param {PIXI.LINE_CAP}[options.cap=PIXI.LINE_CAP.BUTT] - line cap style
* @param {PIXI.LINE_JOIN}[options.join=PIXI.LINE_JOIN.MITER] - line join style
* @param {number}[options.miterLimit=10] - miter limit ratio
- * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls
+ * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
*/
- public lineTextureStyle(options: ILineStyleOptions): this
+ public lineTextureStyle(options?: ILineStyleOptions): this
{
// Apply defaults
options = Object.assign({
@@ -359,7 +347,6 @@ export class Graphics extends Container
/**
* Start a polygon object internally.
- *
* @protected
*/
protected startPoly(): void
@@ -386,7 +373,6 @@ export class Graphics extends Container
/**
* Finish the polygon object.
- *
* @protected
*/
finishPoly(): void
@@ -407,10 +393,9 @@ export class Graphics extends Container
/**
* Moves the current drawing position to x, y.
- *
* @param x - the X coordinate to move to
* @param y - the Y coordinate to move to
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public moveTo(x: number, y: number): this
{
@@ -424,10 +409,9 @@ export class Graphics extends Container
/**
* Draws a line using the current line style from the current drawing position to (x, y);
* The current drawing position is then set to (x, y).
- *
* @param x - the X coordinate to draw to
* @param y - the Y coordinate to draw to
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public lineTo(x: number, y: number): this
{
@@ -449,7 +433,11 @@ export class Graphics extends Container
return this;
}
- /** Initialize the curve */
+ /**
+ * Initialize the curve
+ * @param x
+ * @param y
+ */
protected _initCurve(x = 0, y = 0): void
{
if (this.currentPath)
@@ -468,12 +456,11 @@ export class Graphics extends Container
/**
* Calculate the points for a quadratic bezier curve and then draws it.
* Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
* @param cpX - Control point x
* @param cpY - Control point y
* @param toX - Destination point x
* @param toY - Destination point y
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this
{
@@ -493,14 +480,13 @@ export class Graphics extends Container
/**
* Calculate the points for a bezier curve and then draws it.
- *
* @param cpX - Control point x
* @param cpY - Control point y
* @param cpX2 - Second Control point x
* @param cpY2 - Second Control point y
* @param toX - Destination point x
* @param toY - Destination point y
- * @return This Graphics object. Good for chaining method calls
+ * @returns This Graphics object. Good for chaining method calls
*/
public bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this
{
@@ -515,13 +501,12 @@ export class Graphics extends Container
* The arcTo() method creates an arc/curve between two tangents on the canvas.
*
* "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
- *
* @param x1 - The x-coordinate of the first tangent point of the arc
* @param y1 - The y-coordinate of the first tangent point of the arc
* @param x2 - The x-coordinate of the end of the arc
* @param y2 - The y-coordinate of the end of the arc
* @param radius - The radius of the arc
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this
{
@@ -543,7 +528,6 @@ export class Graphics extends Container
/**
* The arc method creates an arc/curve (used to create circles, or parts of circles).
- *
* @param cx - The x-coordinate of the center of the circle
* @param cy - The y-coordinate of the center of the circle
* @param radius - The radius of the circle
@@ -553,7 +537,7 @@ export class Graphics extends Container
* @param anticlockwise - Specifies whether the drawing should be
* counter-clockwise or clockwise. False is default, and indicates clockwise, while true
* indicates counter-clockwise.
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise = false): this
{
@@ -617,10 +601,9 @@ export class Graphics extends Container
/**
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
* (such as lineTo() or drawCircle()) use when drawing.
- *
* @param color - the color of the fill
* @param alpha - the alpha of the fill
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public beginFill(color = 0, alpha = 1): this
{
@@ -629,13 +612,12 @@ export class Graphics extends Container
/**
* Begin the texture fill
- *
* @param options - Object object.
* @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to fill
* @param {number} [options.color=0xffffff] - Background to fill behind texture
* @param {number} [options.alpha=1] - Alpha of fill
* @param {PIXI.Matrix} [options.matrix=null] - Transform matrix
- * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls
+ * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
*/
beginTextureFill(options?: IFillStyleOptions): this
{
@@ -674,8 +656,7 @@ export class Graphics extends Container
/**
* Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
- *
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public endFill(): this
{
@@ -688,12 +669,11 @@ export class Graphics extends Container
/**
* Draws a rectangle shape.
- *
* @param x - The X coord of the top-left of the rectangle
* @param y - The Y coord of the top-left of the rectangle
* @param width - The width of the rectangle
* @param height - The height of the rectangle
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public drawRect(x: number, y: number, width: number, height: number): this
{
@@ -702,13 +682,12 @@ export class Graphics extends Container
/**
* Draw a rectangle shape with rounded/beveled corners.
- *
* @param x - The X coord of the top-left of the rectangle
* @param y - The Y coord of the top-left of the rectangle
* @param width - The width of the rectangle
* @param height - The height of the rectangle
* @param radius - Radius of the rectangle corners
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): this
{
@@ -717,11 +696,10 @@ export class Graphics extends Container
/**
* Draws a circle.
- *
* @param x - The X coordinate of the center of the circle
* @param y - The Y coordinate of the center of the circle
* @param radius - The radius of the circle
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public drawCircle(x: number, y: number, radius: number): this
{
@@ -730,26 +708,24 @@ export class Graphics extends Container
/**
* Draws an ellipse.
- *
* @param x - The X coordinate of the center of the ellipse
* @param y - The Y coordinate of the center of the ellipse
* @param width - The half width of the ellipse
* @param height - The half height of the ellipse
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public drawEllipse(x: number, y: number, width: number, height: number): this
{
return this.drawShape(new Ellipse(x, y, width, height));
}
- public drawPolygon(...path: Array | Array): this
- public drawPolygon(path: Array | Array | Polygon): this
+ public drawPolygon(...path: Array | Array): this;
+ public drawPolygon(path: Array | Array | Polygon): this;
/**
* Draws a polygon using the given path.
- *
* @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon.
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public drawPolygon(...path: any[]): this
{
@@ -785,9 +761,8 @@ export class Graphics extends Container
/**
* Draw any shape.
- *
* @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - Shape to draw
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public drawShape(shape: IShape): this
{
@@ -810,8 +785,7 @@ export class Graphics extends Container
/**
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
- *
- * @return - This Graphics object. Good for chaining method calls
+ * @returns - This Graphics object. Good for chaining method calls
*/
public clear(): this
{
@@ -830,7 +804,6 @@ export class Graphics extends Container
/**
* True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and
* masked with gl.scissor.
- *
* @returns - True if only 1 rect.
*/
public isFastRect(): boolean
@@ -846,7 +819,6 @@ export class Graphics extends Container
/**
* Renders the object using the WebGL renderer
- *
* @param renderer - The renderer
*/
protected _render(renderer: Renderer): void
@@ -925,7 +897,6 @@ export class Graphics extends Container
/**
* Renders the batches using the BathedRenderer plugin
- *
* @param renderer - The renderer
*/
protected _renderBatched(renderer: Renderer): void
@@ -952,7 +923,6 @@ export class Graphics extends Container
/**
* Renders the graphics direct
- *
* @param renderer - The renderer
*/
protected _renderDirect(renderer: Renderer): void
@@ -992,7 +962,11 @@ export class Graphics extends Container
}
}
- /** Renders specific DrawCall */
+ /**
+ * Renders specific DrawCall
+ * @param renderer
+ * @param drawCall
+ */
protected _renderDrawCallDirect(renderer: Renderer, drawCall: BatchDrawCall): void
{
const { texArray, type, size, start } = drawCall;
@@ -1008,7 +982,6 @@ export class Graphics extends Container
/**
* Resolves shader for direct rendering
- *
* @param renderer - The renderer
*/
protected _resolveDirectShader(renderer: Renderer): Shader
@@ -1024,7 +997,7 @@ export class Graphics extends Container
// but may be more than one plugins for graphics
if (!DEFAULT_SHADERS[pluginName])
{
- const MAX_TEXTURES = renderer.plugins.batch.MAX_TEXTURES;
+ const { MAX_TEXTURES } = renderer.plugins[pluginName];
const sampleValues = new Int32Array(MAX_TEXTURES);
for (let i = 0; i < MAX_TEXTURES; i++)
@@ -1069,9 +1042,8 @@ export class Graphics extends Container
/**
* Tests if a point is inside this graphics object
- *
* @param point - the point to test
- * @return - the result of the test
+ * @returns - the result of the test
*/
public containsPoint(point: IPointData): boolean
{
@@ -1109,10 +1081,7 @@ export class Graphics extends Container
}
}
- /**
- * If there's a transform update or a change to the shape of the
- * geometry, recalculate the vertices.
- */
+ /** If there's a transform update or a change to the shape of the geometry, recalculate the vertices. */
protected calculateVertices(): void
{
const wtID = this.transform._worldID;
@@ -1149,8 +1118,7 @@ export class Graphics extends Container
/**
* Closes the current path.
- *
- * @return - Returns itself.
+ * @returns - Returns itself.
*/
public closePath(): this
{
@@ -1170,9 +1138,8 @@ export class Graphics extends Container
/**
* Apply a matrix to the positional data.
- *
* @param matrix - Matrix to use for transform current shape.
- * @return - Returns itself.
+ * @returns - Returns itself.
*/
public setMatrix(matrix: Matrix): this
{
@@ -1187,8 +1154,7 @@ export class Graphics extends Container
* Also weirdness ensues if holes overlap!
* Ellipses, Circles, Rectangles and Rounded Rectangles cannot be holes or host for holes in CanvasRenderer,
* please use `moveTo` `lineTo`, `quadraticCurveTo` if you rely on pixi-legacy bundle.
- *
- * @return - Returns itself.
+ * @returns - Returns itself.
*/
public beginHole(): this
{
@@ -1200,8 +1166,7 @@ export class Graphics extends Container
/**
* End adding holes to the last draw shape.
- *
- * @return - Returns itself.
+ * @returns - Returns itself.
*/
public endHole(): this
{
@@ -1213,7 +1178,6 @@ export class Graphics extends Container
/**
* Destroys the Graphics object.
- *
* @param options - Options parameter. A boolean will act as if all
* options have been set to that value
* @param {boolean} [options.children=false] - if set to true, all the children will have
@@ -1223,7 +1187,7 @@ export class Graphics extends Container
* @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true
* Should it destroy the base texture of the child sprite
*/
- public destroy(options?: IDestroyOptions|boolean): void
+ public destroy(options?: IDestroyOptions | boolean): void
{
this._geometry.refCount--;
if (this._geometry.refCount === 0)
diff --git a/packages/graphics/src/GraphicsData.ts b/packages/graphics/src/GraphicsData.ts
index 03d282c6cf..199172d7ac 100644
--- a/packages/graphics/src/GraphicsData.ts
+++ b/packages/graphics/src/GraphicsData.ts
@@ -4,14 +4,12 @@ import type { LineStyle } from './styles/LineStyle';
/**
* A class to contain data useful for Graphics objects
- *
* @memberof PIXI
*/
export class GraphicsData
{
/**
* The shape object to draw.
- *
* @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle}
*/
shape: IShape;
@@ -52,8 +50,7 @@ export class GraphicsData
/**
* Creates a new GraphicsData object with the same values as this one.
- *
- * @return - Cloned GraphicsData object
+ * @returns - Cloned GraphicsData object
*/
public clone(): GraphicsData
{
diff --git a/packages/graphics/src/GraphicsGeometry.ts b/packages/graphics/src/GraphicsGeometry.ts
index 853f737692..6a297d1ff8 100644
--- a/packages/graphics/src/GraphicsGeometry.ts
+++ b/packages/graphics/src/GraphicsGeometry.ts
@@ -40,7 +40,6 @@ const tmpBounds = new Bounds();
*
* GraphicsGeometry is designed to not be continually updating the geometry since it's expensive
* to re-tesselate using **earcut**. Consider using {@link PIXI.Mesh} for this use-case, it's much faster.
- *
* @memberof PIXI
*/
export class GraphicsGeometry extends BatchGeometry
@@ -48,13 +47,11 @@ export class GraphicsGeometry extends BatchGeometry
/**
* The maximum number of points to consider an object "batchable",
* able to be batched by the renderer's batch system.
-\ */
+\
+ */
public static BATCHABLE_SIZE = 100;
- /**
- * Minimal distance between points that are considered different.
- * Affects line tesselation.
- */
+ /** Minimal distance between points that are considered different. Affects line tesselation. */
public closePointEps = 1e-4;
/** Padding to add to the bounds. */
@@ -81,14 +78,12 @@ export class GraphicsGeometry extends BatchGeometry
/**
* The collection of drawn shapes.
- *
* @member {PIXI.GraphicsData[]}
*/
graphicsData: Array = [];
/**
* List of current draw calls drived from the batches.
- *
* @member {PIXI.BatchDrawCall[]}
*/
drawCalls: Array = [];
@@ -99,7 +94,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Intermediate abstract format sent to batch system.
* Can be converted to drawCalls or to batchable objects.
- *
* @member {PIXI.graphicsUtils.BatchPart[]}
*/
batches: Array = [];
@@ -130,7 +124,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Get the current bounds of the graphic geometry.
- *
* @readonly
*/
public get bounds(): Bounds
@@ -144,10 +137,7 @@ export class GraphicsGeometry extends BatchGeometry
return this._bounds;
}
- /**
- * Call if you changed graphicsData manually.
- * Empties all batch buffers.
- */
+ /** Call if you changed graphicsData manually. Empties all batch buffers. */
protected invalidate(): void
{
this.boundsDirty = -1;
@@ -182,8 +172,7 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
- *
- * @return - This GraphicsGeometry object. Good for chaining method calls
+ * @returns - This GraphicsGeometry object. Good for chaining method calls
*/
public clear(): GraphicsGeometry
{
@@ -199,12 +188,11 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
- *
* @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
* @param fillStyle - Defines style of the fill.
* @param lineStyle - Defines style of the lines.
* @param matrix - Transform applied to the points of the shape.
- * @return - Returns geometry for chaining.
+ * @returns - Returns geometry for chaining.
*/
public drawShape(
shape: IShape,
@@ -222,10 +210,9 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
- *
* @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
* @param matrix - Transform applied to the points of the shape.
- * @return - Returns geometry for chaining.
+ * @returns - Returns geometry for chaining.
*/
public drawHole(shape: IShape, matrix: Matrix = null): GraphicsGeometry
{
@@ -279,9 +266,8 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Check to see if a point is contained within this geometry.
- *
* @param point - Point to check if it's contained.
- * @return {Boolean} `true` if the point is contained within geometry.
+ * @returns {boolean} `true` if the point is contained within geometry.
*/
public containsPoint(point: IPointData): boolean
{
@@ -340,7 +326,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Generates intermediate batch data. Either gets converted to drawCalls
* or used to convert to batch objects directly by the Graphics object.
- *
* @param allow32Indices - Allow using 32-bit indices for preventing artifacts when more that 65535 vertices
*/
updateBatches(allow32Indices?: boolean): void
@@ -482,7 +467,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Affinity check
- *
* @param styleA
* @param styleB
*/
@@ -730,7 +714,10 @@ export class GraphicsGeometry extends BatchGeometry
this._indexBuffer.update(this.indicesUint16);
}
- /** Process fill part of Graphics. */
+ /**
+ * Process fill part of Graphics.
+ * @param data
+ */
protected processFill(data: GraphicsData): void
{
if (data.holes.length)
@@ -745,7 +732,10 @@ export class GraphicsGeometry extends BatchGeometry
}
}
- /** Process line part of Graphics. */
+ /**
+ * Process line part of Graphics.
+ * @param data
+ */
protected processLine(data: GraphicsData): void
{
buildLine(data, this);
@@ -756,7 +746,10 @@ export class GraphicsGeometry extends BatchGeometry
}
}
- /** Process the holes data. */
+ /**
+ * Process the holes data.
+ * @param holes
+ */
protected processHoles(holes: Array): void
{
for (let i = 0; i < holes.length; i++)
@@ -856,7 +849,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Transform points using matrix.
- *
* @param points - Points to transform
* @param matrix - Transform matrix
*/
@@ -874,7 +866,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Add colors.
- *
* @param colors - List of colors to add to
* @param color - Color to add
* @param alpha - Alpha to use
@@ -901,7 +892,13 @@ export class GraphicsGeometry extends BatchGeometry
}
}
- /** Add texture id that the shader/fragment wants to use. */
+ /**
+ * Add texture id that the shader/fragment wants to use.
+ * @param textureIds
+ * @param id
+ * @param size
+ * @param offset
+ */
protected addTextureIds(
textureIds: Array,
id: number,
@@ -918,7 +915,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Generates the UVs for a shape.
- *
* @param verts - Vertices
* @param uvs - UVs
* @param texture - Reference to Texture
@@ -968,7 +964,6 @@ export class GraphicsGeometry extends BatchGeometry
/**
* Modify uvs array according to position of texture region
* Does not work with rotated or trimmed textures
- *
* @param uvs - array
* @param texture - region
* @param start - starting index for uvs
diff --git a/packages/graphics/src/const.ts b/packages/graphics/src/const.ts
index 7d54aa9ac7..4387871c62 100644
--- a/packages/graphics/src/const.ts
+++ b/packages/graphics/src/const.ts
@@ -1,9 +1,7 @@
/**
* Supported line joints in `PIXI.LineStyle` for graphics.
- *
* @see PIXI.Graphics#lineStyle
* @see https://graphicdesign.stackexchange.com/questions/59018/what-is-a-bevel-join-of-two-lines-exactly-illustrator
- *
* @name LINE_JOIN
* @memberof PIXI
* @static
@@ -12,7 +10,9 @@
* @property {string} BEVEL - 'bevel': add a square butt at each end of line segment and fill the triangle at turn
* @property {string} ROUND - 'round': add an arc at the joint
*/
-export enum LINE_JOIN {
+export enum LINE_JOIN
+// eslint-disable-next-line @typescript-eslint/indent
+{
MITER = 'miter',
BEVEL = 'bevel',
ROUND = 'round'
@@ -20,9 +20,7 @@ export enum LINE_JOIN {
/**
* Support line caps in `PIXI.LineStyle` for graphics.
- *
* @see PIXI.Graphics#lineStyle
- *
* @name LINE_CAP
* @memberof PIXI
* @static
@@ -31,13 +29,16 @@ export enum LINE_JOIN {
* @property {string} ROUND - 'round': add semicircle at ends
* @property {string} SQUARE - 'square': add square at end (like `BUTT` except more length at end)
*/
-export enum LINE_CAP {
+export enum LINE_CAP
+// eslint-disable-next-line @typescript-eslint/indent
+{
BUTT = 'butt',
ROUND = 'round',
SQUARE = 'square'
}
-export interface IGraphicsCurvesSettings {
+export interface IGraphicsCurvesSettings
+{
adaptive: boolean;
maxLength: number;
minSegments: number;
@@ -52,16 +53,15 @@ export interface IGraphicsCurvesSettings {
* Graphics curves resolution settings. If `adaptive` flag is set to `true`,
* the resolution is calculated based on the curve's length to ensure better visual quality.
* Adaptive draw works with `bezierCurveTo` and `quadraticCurveTo`.
- *
* @static
* @constant
* @memberof PIXI
* @name GRAPHICS_CURVES
* @type {object}
- * @property {boolean} adaptive=true - flag indicating if the resolution should be adaptive
- * @property {number} maxLength=10 - maximal length of a single segment of the curve (if adaptive = false, ignored)
- * @property {number} minSegments=8 - minimal number of segments in the curve (if adaptive = false, ignored)
- * @property {number} maxSegments=2048 - maximal number of segments in the curve (if adaptive = false, ignored)
+ * @property {boolean} [adaptive=true] - flag indicating if the resolution should be adaptive
+ * @property {number} [maxLength=10] - maximal length of a single segment of the curve (if adaptive = false, ignored)
+ * @property {number} [minSegments=8] - minimal number of segments in the curve (if adaptive = false, ignored)
+ * @property {number} [maxSegments=2048] - maximal number of segments in the curve (if adaptive = false, ignored)
*/
export const GRAPHICS_CURVES: IGraphicsCurvesSettings = {
adaptive: true,
diff --git a/packages/graphics/src/styles/FillStyle.ts b/packages/graphics/src/styles/FillStyle.ts
index 5db5da42ca..8e879ecd59 100644
--- a/packages/graphics/src/styles/FillStyle.ts
+++ b/packages/graphics/src/styles/FillStyle.ts
@@ -3,14 +3,12 @@ import type { Matrix } from '@pixi/math';
/**
* Fill style object for Graphics.
- *
* @memberof PIXI
*/
export class FillStyle
{
/**
* The hex color value used when coloring the Graphics object.
- *
* @default 0xFFFFFF
*/
public color = 0xFFFFFF;
@@ -20,14 +18,12 @@ export class FillStyle
/**
* The texture to be used for the fill.
- *
* @default 0
*/
public texture: Texture = Texture.WHITE;
/**
* The transform applied to the texture.
- *
* @default null
*/
public matrix: Matrix = null;
diff --git a/packages/graphics/src/styles/LineStyle.ts b/packages/graphics/src/styles/LineStyle.ts
index e0d1abd650..579bbd125d 100644
--- a/packages/graphics/src/styles/LineStyle.ts
+++ b/packages/graphics/src/styles/LineStyle.ts
@@ -3,7 +3,6 @@ import { LINE_JOIN, LINE_CAP } from '../const';
/**
* Represents the line style for Graphics.
- *
* @memberof PIXI
*/
export class LineStyle extends FillStyle
@@ -19,7 +18,6 @@ export class LineStyle extends FillStyle
/**
* Line cap style.
- *
* @member {PIXI.LINE_CAP}
* @default PIXI.LINE_CAP.BUTT
*/
@@ -27,7 +25,6 @@ export class LineStyle extends FillStyle
/**
* Line join style.
- *
* @member {PIXI.LINE_JOIN}
* @default PIXI.LINE_JOIN.MITER
*/
diff --git a/packages/graphics/src/utils/ArcUtils.ts b/packages/graphics/src/utils/ArcUtils.ts
index 0aa46d393d..24e65ea0c7 100644
--- a/packages/graphics/src/utils/ArcUtils.ts
+++ b/packages/graphics/src/utils/ArcUtils.ts
@@ -1,7 +1,8 @@
import { GRAPHICS_CURVES } from '../const';
import { PI_2 } from '@pixi/math';
-interface IArcLikeShape {
+interface IArcLikeShape
+{
cx: number;
cy: number;
radius: number;
@@ -12,7 +13,6 @@ interface IArcLikeShape {
/**
* Utilities for arc curves.
- *
* @private
*/
export class ArcUtils
@@ -21,14 +21,14 @@ export class ArcUtils
* The arcTo() method creates an arc/curve between two tangents on the canvas.
*
* "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
- *
* @private
* @param x1 - The x-coordinate of the beginning of the arc
* @param y1 - The y-coordinate of the beginning of the arc
* @param x2 - The x-coordinate of the end of the arc
* @param y2 - The y-coordinate of the end of the arc
* @param radius - The radius of the arc
- * @return - If the arc length is valid, return center of circle, radius and other info otherwise `null`.
+ * @param points -
+ * @returns - If the arc length is valid, return center of circle, radius and other info otherwise `null`.
*/
static curveTo(x1: number, y1: number, x2: number, y2: number, radius: number, points: Array): IArcLikeShape
{
@@ -80,17 +80,16 @@ export class ArcUtils
/* eslint-disable max-len */
/**
* The arc method creates an arc/curve (used to create circles, or parts of circles).
- *
* @private
- * @param startX - Start x location of arc
- * @param startY - Start y location of arc
+ * @param _startX - Start x location of arc
+ * @param _startY - Start y location of arc
* @param cx - The x-coordinate of the center of the circle
* @param cy - The y-coordinate of the center of the circle
* @param radius - The radius of the circle
* @param startAngle - The starting angle, in radians (0 is at the 3 o'clock position
* of the arc's circle)
* @param endAngle - The ending angle, in radians
- * @param anticlockwise - Specifies whether the drawing should be
+ * @param _anticlockwise - Specifies whether the drawing should be
* counter-clockwise or clockwise. False is default, and indicates clockwise, while true
* indicates counter-clockwise.
* @param points - Collection of points to add to
diff --git a/packages/graphics/src/utils/BatchPart.ts b/packages/graphics/src/utils/BatchPart.ts
index 22753e5b14..fd51ba539e 100644
--- a/packages/graphics/src/utils/BatchPart.ts
+++ b/packages/graphics/src/utils/BatchPart.ts
@@ -3,7 +3,6 @@ import type { FillStyle } from '../styles/FillStyle';
/**
* A structure to hold interim batch objects for Graphics.
- *
* @memberof PIXI.graphicsUtils
*/
export class BatchPart
@@ -19,7 +18,12 @@ export class BatchPart
this.reset();
}
- /** Begin batch part. */
+ /**
+ * Begin batch part.
+ * @param style
+ * @param startIndex
+ * @param attribStart
+ */
public begin(style: LineStyle | FillStyle, startIndex: number, attribStart: number): void
{
this.reset();
@@ -28,7 +32,11 @@ export class BatchPart
this.attribStart = attribStart;
}
- /** End batch part. */
+ /**
+ * End batch part.
+ * @param endIndex
+ * @param endAttrib
+ */
public end(endIndex: number, endAttrib: number): void
{
this.attribSize = endAttrib - this.attribStart;
diff --git a/packages/graphics/src/utils/BezierUtils.ts b/packages/graphics/src/utils/BezierUtils.ts
index 92bce58902..345c1606c9 100644
--- a/packages/graphics/src/utils/BezierUtils.ts
+++ b/packages/graphics/src/utils/BezierUtils.ts
@@ -2,7 +2,6 @@ import { GRAPHICS_CURVES } from '../const';
/**
* Utilities for bezier curves
- *
* @private
*/
export class BezierUtils
@@ -11,7 +10,6 @@ export class BezierUtils
* Calculate length of bezier curve.
* Analytical solution is impossible, since it involves an integral that does not integrate in general.
* Therefore numerical solution is used.
- *
* @private
* @param fromX - Starting point x
* @param fromY - Starting point y
@@ -21,7 +19,7 @@ export class BezierUtils
* @param cpY2 - Second Control point y
* @param toX - Destination point x
* @param toY - Destination point y
- * @return - Length of bezier curve
+ * @returns - Length of bezier curve
*/
static curveLength(
fromX: number, fromY: number,
@@ -70,7 +68,6 @@ export class BezierUtils
* Calculate the points for a bezier curve and then draws it.
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @param cpX - Control point x
* @param cpY - Control point y
diff --git a/packages/graphics/src/utils/IShapeBuildCommand.ts b/packages/graphics/src/utils/IShapeBuildCommand.ts
index e3ffc23014..14573617f4 100644
--- a/packages/graphics/src/utils/IShapeBuildCommand.ts
+++ b/packages/graphics/src/utils/IShapeBuildCommand.ts
@@ -1,7 +1,8 @@
import type { GraphicsData } from '../GraphicsData';
import type { GraphicsGeometry } from '../GraphicsGeometry';
-export interface IShapeBuildCommand {
+export interface IShapeBuildCommand
+{
build(graphicsData: GraphicsData): void;
triangulate(graphicsData: GraphicsData, target: GraphicsGeometry): void;
}
diff --git a/packages/graphics/src/utils/QuadraticUtils.ts b/packages/graphics/src/utils/QuadraticUtils.ts
index a6a88ef3b5..e9c0552ddb 100644
--- a/packages/graphics/src/utils/QuadraticUtils.ts
+++ b/packages/graphics/src/utils/QuadraticUtils.ts
@@ -2,7 +2,6 @@ import { GRAPHICS_CURVES } from '../const';
/**
* Utilities for quadratic curves.
- *
* @private
*/
export class QuadraticUtils
@@ -11,7 +10,6 @@ export class QuadraticUtils
* Calculate length of quadratic curve
* @see {@link http://www.malczak.linuxpl.com/blog/quadratic-bezier-curve-length/}
* for the detailed explanation of math behind this.
- *
* @private
* @param fromX - x-coordinate of curve start point
* @param fromY - y-coordinate of curve start point
@@ -19,7 +17,7 @@ export class QuadraticUtils
* @param cpY - y-coordinate of curve control point
* @param toX - x-coordinate of curve end point
* @param toY - y-coordinate of curve end point
- * @return - Length of quadratic curve
+ * @returns - Length of quadratic curve
*/
static curveLength(
fromX: number, fromY: number,
@@ -53,7 +51,6 @@ export class QuadraticUtils
/**
* Calculate the points for a quadratic bezier curve and then draws it.
* Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
* @private
* @param cpX - Control point x
* @param cpY - Control point y
diff --git a/packages/graphics/src/utils/buildCircle.ts b/packages/graphics/src/utils/buildCircle.ts
index 863a297b76..4da1376ea4 100644
--- a/packages/graphics/src/utils/buildCircle.ts
+++ b/packages/graphics/src/utils/buildCircle.ts
@@ -8,7 +8,6 @@ import type { IShapeBuildCommand } from './IShapeBuildCommand';
* Builds a circle to draw
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw
@@ -61,6 +60,13 @@ export const buildCircle: IShapeBuildCommand = {
dy = halfHeight - ry;
}
+ if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0))
+ {
+ points.length = 0;
+
+ return;
+ }
+
// Choose a number of segments such that the maximum absolute deviation from the circle is approximately 0.029
const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
const m = (n * 8) + (dx ? 4 : 0) + (dy ? 4 : 0);
diff --git a/packages/graphics/src/utils/buildLine.ts b/packages/graphics/src/utils/buildLine.ts
index e228562adf..14b69174f8 100644
--- a/packages/graphics/src/utils/buildLine.ts
+++ b/packages/graphics/src/utils/buildLine.ts
@@ -9,15 +9,17 @@ import { LINE_JOIN, LINE_CAP, GRAPHICS_CURVES } from '../const';
* Buffers vertices to draw a square cap.
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {number} x - X-coord of end point
* @param {number} y - Y-coord of end point
* @param {number} nx - X-coord of line normal pointing inside
* @param {number} ny - Y-coord of line normal pointing inside
+ * @param {number} innerWeight - Weight of inner points
+ * @param {number} outerWeight - Weight of outer points
+ * @param {boolean} clockwise - Whether the cap is drawn clockwise
* @param {Array} verts - vertex buffer
- * @returns {}
+ * @returns {number} - no. of vertices pushed
*/
function square(
x: number,
@@ -67,7 +69,6 @@ function square(
* Buffers vertices to draw an arc at the line joint or cap.
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {number} cx - X-coord of center
@@ -172,7 +173,6 @@ function round(
* Builds a line to draw using the polygon method.
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {PIXI.GraphicsData} graphicsData - The graphics object containing all the necessary properties
@@ -427,11 +427,7 @@ function buildNonNativeLine(graphicsData: GraphicsData, graphicsGeometry: Graphi
{
verts.push(x1 - (perpx * innerWeight), y1 - (perpy * innerWeight)); // first segment's inner vertex
verts.push(x1 + (perpx * outerWeight), y1 + (perpy * outerWeight)); // first segment's outer vertex
- if (style.join === LINE_JOIN.BEVEL || pdist / widthSquared > miterLimitSquared)
- {
- // Nothing needed
- }
- else if (style.join === LINE_JOIN.ROUND)
+ if (style.join === LINE_JOIN.ROUND)
{
if (clockwise) /* arc is outside */
{
@@ -452,7 +448,7 @@ function buildNonNativeLine(graphicsData: GraphicsData, graphicsGeometry: Graphi
) + 2;
}
}
- else
+ else if (style.join === LINE_JOIN.MITER && pdist / widthSquared <= miterLimitSquared)
{
if (clockwise)
{
@@ -540,7 +536,6 @@ function buildNonNativeLine(graphicsData: GraphicsData, graphicsGeometry: Graphi
* Builds a line to draw using the gl.drawArrays(gl.LINES) method
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {PIXI.GraphicsData} graphicsData - The graphics object containing all the necessary properties
@@ -583,7 +578,6 @@ function buildNativeLine(graphicsData: GraphicsData, graphicsGeometry: GraphicsG
* Builds a line to draw
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {PIXI.GraphicsData} graphicsData - The graphics object containing all the necessary properties
diff --git a/packages/graphics/src/utils/buildPoly.ts b/packages/graphics/src/utils/buildPoly.ts
index d6d4d62d40..3b749559ba 100644
--- a/packages/graphics/src/utils/buildPoly.ts
+++ b/packages/graphics/src/utils/buildPoly.ts
@@ -45,7 +45,6 @@ function fixOrientation(points: number[], hole = false)
* Builds a polygon to draw
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
diff --git a/packages/graphics/src/utils/buildRectangle.ts b/packages/graphics/src/utils/buildRectangle.ts
index 512f70507f..63a5a681c7 100644
--- a/packages/graphics/src/utils/buildRectangle.ts
+++ b/packages/graphics/src/utils/buildRectangle.ts
@@ -5,7 +5,6 @@ import type { Rectangle } from '@pixi/math';
* Builds a rectangle to draw
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
diff --git a/packages/graphics/src/utils/buildRoundedRectangle.ts b/packages/graphics/src/utils/buildRoundedRectangle.ts
index 73ea13a39f..e624f6aa96 100644
--- a/packages/graphics/src/utils/buildRoundedRectangle.ts
+++ b/packages/graphics/src/utils/buildRoundedRectangle.ts
@@ -10,14 +10,12 @@ import { buildCircle } from './buildCircle';
* Calculate a single point for a quadratic bezier curve.
* Utility function used by quadraticBezierCurve.
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {number} n1 - first number
* @param {number} n2 - second number
* @param {number} perc - percentage
- * @return {number} the result
- *
+ * @returns {number} the result
*/
function getPt(n1: number, n2: number, perc: number): number
{
@@ -31,7 +29,6 @@ function getPt(n1: number, n2: number, perc: number): number
* Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {number} fromX - Origin point x
@@ -41,7 +38,7 @@ function getPt(n1: number, n2: number, perc: number): number
* @param {number} toX - Destination point x
* @param {number} toY - Destination point y
* @param {number[]} [out=[]] - The output array to add points into. If not passed, a new array is created.
- * @return {number[]} an array of points
+ * @returns {number[]} an array of points
*/
function quadraticBezierCurve(
fromX: number, fromY: number,
@@ -89,7 +86,6 @@ function quadraticBezierCurve(
* Builds a rounded rectangle to draw
*
* Ignored from docs since it is not directly exposed.
- *
* @ignore
* @private
* @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
diff --git a/packages/graphics/src/utils/index.ts b/packages/graphics/src/utils/index.ts
index 35e3b3dfab..c03a5060d4 100644
--- a/packages/graphics/src/utils/index.ts
+++ b/packages/graphics/src/utils/index.ts
@@ -1,6 +1,5 @@
/**
* Generalized convenience utilities for Graphics.
- *
* @namespace graphicsUtils
* @memberof PIXI
*/
@@ -31,9 +30,8 @@ import { IShapeBuildCommand } from './IShapeBuildCommand';
/**
* Map of fill commands for each shape type.
- *
* @memberof PIXI.graphicsUtils
- * @member {Object} FILL_COMMANDS
+ * @member {object} FILL_COMMANDS
*/
export const FILL_COMMANDS: Record = {
[SHAPES.POLY]: buildPoly,
@@ -45,7 +43,6 @@ export const FILL_COMMANDS: Record = {
/**
* Batch pool, stores unused batches for preventing allocations.
- *
* @memberof PIXI.graphicsUtils
* @member {Array} BATCH_POOL
*/
@@ -53,7 +50,6 @@ export const BATCH_POOL: Array = [];
/**
* Draw call pool, stores unused draw calls for preventing allocations.
- *
* @memberof PIXI.graphicsUtils
* @member {Array} DRAW_CALL_POOL
*/
diff --git a/packages/graphics/test/Graphics.tests.ts b/packages/graphics/test/Graphics.tests.ts
index a3848a0b03..16713355da 100644
--- a/packages/graphics/test/Graphics.tests.ts
+++ b/packages/graphics/test/Graphics.tests.ts
@@ -1,5 +1,5 @@
import { Renderer, BatchRenderer, Texture } from '@pixi/core';
-import { Graphics, GRAPHICS_CURVES, FillStyle, LineStyle, graphicsUtils } from '@pixi/graphics';
+import { Graphics, GRAPHICS_CURVES, FillStyle, LineStyle, graphicsUtils, GraphicsGeometry } from '@pixi/graphics';
const { FILL_COMMANDS, buildLine } = graphicsUtils;
import { BLEND_MODES } from '@pixi/constants';
@@ -12,11 +12,11 @@ Renderer.registerPlugin('batch', BatchRenderer);
skipHello();
-describe('Graphics', function ()
+describe('Graphics', () =>
{
- describe('constructor', function ()
+ describe('constructor', () =>
{
- it('should set defaults', function ()
+ it('should set defaults', () =>
{
const graphics = new Graphics();
@@ -29,9 +29,9 @@ describe('Graphics', function ()
});
});
- describe('lineStyle', function ()
+ describe('lineStyle', () =>
{
- it('should support a list of parameters', function ()
+ it('should support a list of parameters', () =>
{
const graphics = new Graphics();
@@ -46,7 +46,7 @@ describe('Graphics', function ()
graphics.destroy();
});
- it('should default color to black if texture not present and white if present', function ()
+ it('should default color to black if texture not present and white if present', () =>
{
const graphics = new Graphics();
@@ -57,7 +57,7 @@ describe('Graphics', function ()
graphics.destroy();
});
- it('should support object parameter', function ()
+ it('should support object parameter', () =>
{
const graphics = new Graphics();
@@ -89,13 +89,13 @@ describe('Graphics', function ()
});
});
- describe('lineTextureStyle', function ()
+ describe('lineTextureStyle', () =>
{
- it('should support object parameter', function ()
+ it('should support object parameter', () =>
{
const graphics = new Graphics();
const matrix = new Matrix();
- const texture = Texture.BLACK;
+ const texture = Texture.WHITE;
graphics.lineTextureStyle({
width: 1,
@@ -131,9 +131,9 @@ describe('Graphics', function ()
});
});
- describe('beginTextureFill', function ()
+ describe('beginTextureFill', () =>
{
- it('should pass texture to batches', function ()
+ it('should pass texture to batches', () =>
{
const graphics = new Graphics();
const canvas1 = document.createElement('canvas');
@@ -163,9 +163,9 @@ describe('Graphics', function ()
});
});
- describe('utils', function ()
+ describe('utils', () =>
{
- it('FILL_COMMADS should be filled', function ()
+ it('FILL_COMMADS should be filled', () =>
{
expect(FILL_COMMANDS).to.not.be.null;
@@ -176,7 +176,7 @@ describe('Graphics', function ()
expect(FILL_COMMANDS[SHAPES.RREC]).to.not.be.null;
});
- it('buildLine should execute without throws', function ()
+ it('buildLine should execute without throws', () =>
{
const graphics = new Graphics();
@@ -187,17 +187,17 @@ describe('Graphics', function ()
const data = geometry.graphicsData[0];
// native = false
- expect(function () { buildLine(data, geometry); }).to.not.throw();
+ expect(() => { buildLine(data, geometry); }).to.not.throw();
data.lineStyle.native = true;
// native = true
- expect(function () { buildLine(data, geometry); }).to.not.throw();
+ expect(() => { buildLine(data, geometry); }).to.not.throw();
});
});
- describe('lineTo', function ()
+ describe('lineTo', () =>
{
- it('should return correct bounds - north', function ()
+ it('should return correct bounds - north', () =>
{
const graphics = new Graphics();
@@ -209,7 +209,7 @@ describe('Graphics', function ()
expect(graphics.height).to.be.closeTo(11, 0.0001);
});
- it('should return correct bounds - south', function ()
+ it('should return correct bounds - south', () =>
{
const graphics = new Graphics();
@@ -221,7 +221,7 @@ describe('Graphics', function ()
expect(graphics.height).to.be.closeTo(11, 0.0001);
});
- it('should return correct bounds - east', function ()
+ it('should return correct bounds - east', () =>
{
const graphics = new Graphics();
@@ -233,7 +233,7 @@ describe('Graphics', function ()
expect(graphics.width).to.be.closeTo(11, 0.0001);
});
- it('should return correct bounds - west', function ()
+ it('should return correct bounds - west', () =>
{
const graphics = new Graphics();
@@ -245,7 +245,7 @@ describe('Graphics', function ()
expect(graphics.width).to.be.closeTo(11, 0.0001);
});
- it('should return correct bounds when stacked with circle', function ()
+ it('should return correct bounds when stacked with circle', () =>
{
const graphics = new Graphics();
@@ -264,7 +264,7 @@ describe('Graphics', function ()
expect(graphics.height).to.be.equals(100);
});
- it('should return correct bounds when square', function ()
+ it('should return correct bounds when square', () =>
{
const graphics = new Graphics();
@@ -279,7 +279,7 @@ describe('Graphics', function ()
expect(graphics.height).to.be.equals(70);
});
- it('should ignore duplicate calls', function ()
+ it('should ignore duplicate calls', () =>
{
const graphics = new Graphics();
@@ -292,9 +292,9 @@ describe('Graphics', function ()
});
});
- describe('containsPoint', function ()
+ describe('containsPoint', () =>
{
- it('should return true when point inside a standard shape', function ()
+ it('should return true when point inside a standard shape', () =>
{
const point = new Point(1, 1);
const graphics = new Graphics();
@@ -305,7 +305,7 @@ describe('Graphics', function ()
expect(graphics.containsPoint(point)).to.be.true;
});
- it('should return false when point outside a standard shape', function ()
+ it('should return false when point outside a standard shape', () =>
{
const point = new Point(20, 20);
const graphics = new Graphics();
@@ -316,7 +316,7 @@ describe('Graphics', function ()
expect(graphics.containsPoint(point)).to.be.false;
});
- it('should return true when point inside just lines', function ()
+ it('should return true when point inside just lines', () =>
{
const point = new Point(1, 1);
const graphics = new Graphics();
@@ -332,7 +332,7 @@ describe('Graphics', function ()
expect(graphics.containsPoint(point)).to.be.true;
});
- it('should return false when point outside just lines', function ()
+ it('should return false when point outside just lines', () =>
{
const point = new Point(20, 20);
const graphics = new Graphics();
@@ -347,7 +347,7 @@ describe('Graphics', function ()
expect(graphics.containsPoint(point)).to.be.false;
});
- it('should return false when no fill', function ()
+ it('should return false when no fill', () =>
{
const point = new Point(1, 1);
const graphics = new Graphics();
@@ -357,7 +357,7 @@ describe('Graphics', function ()
expect(graphics.containsPoint(point)).to.be.false;
});
- it('should return false with hole', function ()
+ it('should return false with hole', () =>
{
const point1 = new Point(1, 1);
const point2 = new Point(5, 5);
@@ -379,7 +379,7 @@ describe('Graphics', function ()
expect(graphics.containsPoint(point2)).to.be.false;
});
- it('should handle extra shapes in holes', function ()
+ it('should handle extra shapes in holes', () =>
{
const graphics = new Graphics();
@@ -413,7 +413,7 @@ describe('Graphics', function ()
expect(graphics.containsPoint(new Point(6, 6))).to.be.true;
});
- it('should take a matrix into account', function ()
+ it('should take a matrix into account', () =>
{
const g = new Graphics();
const m = new Matrix();
@@ -435,9 +435,9 @@ describe('Graphics', function ()
});
});
- describe('chaining', function ()
+ describe('chaining', () =>
{
- it('should chain draw commands', function ()
+ it('should chain draw commands', () =>
{
// complex drawing #1: draw triangle, rounder rect and an arc (issue #3433)
const graphics = new Graphics().beginFill(0xFF3300)
@@ -449,7 +449,7 @@ describe('Graphics', function ()
.beginHole()
.endHole()
.quadraticCurveTo(1, 1, 1, 1)
- .bezierCurveTo(1, 1, 1, 1)
+ .bezierCurveTo(1, 1, 1, 1, 1, 1)
.arcTo(1, 1, 1, 1, 1)
.arc(1, 1, 1, 1, 1, false)
.drawRect(1, 1, 1, 1)
@@ -463,104 +463,112 @@ describe('Graphics', function ()
});
});
- describe('drawPolygon', function ()
+ describe('drawPolygon', () =>
{
- before(function ()
+ let numbers: number[];
+ let points: Point[];
+ let poly: Polygon;
+
+ before(() =>
{
- this.numbers = [0, 0, 10, 10, 20, 20];
- this.points = [new Point(0, 0), new Point(10, 10), new Point(20, 20)];
- this.poly = new Polygon(this.points);
+ numbers = [0, 0, 10, 10, 20, 20];
+ points = [new Point(0, 0), new Point(10, 10), new Point(20, 20)];
+ poly = new Polygon(points);
});
- it('should support polygon argument', function ()
+ it('should support polygon argument', () =>
{
const graphics = new Graphics();
expect(graphics.currentPath).to.be.null;
- graphics.drawPolygon(this.poly);
+ graphics.drawPolygon(poly);
expect(graphics.geometry.graphicsData[0]).to.be.not.null;
- const result = graphics.geometry.graphicsData[0].shape.points;
+ const result = (graphics.geometry.graphicsData[0].shape as Polygon).points;
- expect(result).to.deep.equals(this.numbers);
+ expect(result).to.deep.equals(numbers);
});
- it('should support array of numbers', function ()
+ it('should support array of numbers', () =>
{
const graphics = new Graphics();
expect(graphics.currentPath).to.be.null;
- graphics.drawPolygon(this.numbers);
+ graphics.drawPolygon(numbers);
expect(graphics.geometry.graphicsData[0]).to.be.not.null;
- const result = graphics.geometry.graphicsData[0].shape.points;
+ const result = (graphics.geometry.graphicsData[0].shape as Polygon).points;
- expect(result).to.deep.equals(this.numbers);
+ expect(result).to.deep.equals(numbers);
});
- it('should support array of points', function ()
+ it('should support array of points', () =>
{
const graphics = new Graphics();
- graphics.drawPolygon(this.points);
+ graphics.drawPolygon(points);
expect(graphics.geometry.graphicsData[0]).to.be.not.null;
- const result = graphics.geometry.graphicsData[0].shape.points;
+ const result = (graphics.geometry.graphicsData[0].shape as Polygon).points;
- expect(result).to.deep.equals(this.numbers);
+ expect(result).to.deep.equals(numbers);
});
- it('should support flat arguments of numbers', function ()
+ it('should support flat arguments of numbers', () =>
{
const graphics = new Graphics();
expect(graphics.currentPath).to.be.null;
- graphics.drawPolygon(...this.numbers);
+ graphics.drawPolygon(...numbers);
expect(graphics.geometry.graphicsData[0]).to.be.not.null;
- const result = graphics.geometry.graphicsData[0].shape.points;
+ const result = (graphics.geometry.graphicsData[0].shape as Polygon).points;
- expect(result).to.deep.equals(this.numbers);
+ expect(result).to.deep.equals(numbers);
});
- it('should support flat arguments of points', function ()
+ it('should support flat arguments of points', () =>
{
const graphics = new Graphics();
expect(graphics.currentPath).to.be.null;
- graphics.drawPolygon(...this.points);
+ graphics.drawPolygon(...points);
expect(graphics.geometry.graphicsData[0]).to.be.not.null;
- const result = graphics.geometry.graphicsData[0].shape.points;
+ const result = (graphics.geometry.graphicsData[0].shape as Polygon).points;
- expect(result).to.deep.equals(this.numbers);
+ expect(result).to.deep.equals(numbers);
});
});
- describe('drawing same rectangle with drawPolygon and drawRect', function ()
+ describe('drawing same rectangle with drawPolygon and drawRect', () =>
{
- before(function ()
+ let width: number;
+ let height: number;
+ let points: Point[];
+
+ before(() =>
{
- this.width = 100;
- this.height = 100;
- this.points = [
+ width = 100;
+ height = 100;
+ points = [
new Point(0, 0),
- new Point(this.width, 0),
- new Point(this.width, this.height),
- new Point(0, this.height)
+ new Point(width, 0),
+ new Point(width, height),
+ new Point(0, height)
];
});
- it('should have the same bounds for any line alignment value', function ()
+ it('should have the same bounds for any line alignment value', () =>
{
const polyGraphics = new Graphics();
const rectGraphics = new Graphics();
@@ -575,12 +583,12 @@ describe('Graphics', function ()
polyGraphics.beginFill(0x0000ff);
polyGraphics.lineStyle(lineWidth, 0xff0000, 1, lineAlignment);
- polyGraphics.drawPolygon(this.points);
+ polyGraphics.drawPolygon(points);
polyGraphics.endFill();
rectGraphics.beginFill(0x0000ff);
rectGraphics.lineStyle(lineWidth, 0xff0000, 1, lineAlignment);
- rectGraphics.drawRect(0, 0, this.width, this.height);
+ rectGraphics.drawRect(0, 0, width, height);
rectGraphics.endFill();
const polyBounds = polyGraphics.getBounds();
@@ -594,9 +602,9 @@ describe('Graphics', function ()
});
});
- describe('arc', function ()
+ describe('arc', () =>
{
- it('should draw an arc', function ()
+ it('should draw an arc', () =>
{
const graphics = new Graphics();
@@ -607,7 +615,7 @@ describe('Graphics', function ()
expect(graphics.currentPath).to.be.not.null;
});
- it('should not throw with other shapes', function ()
+ it('should not throw with other shapes', () =>
{
// complex drawing #1: draw triangle, rounder rect and an arc (issue #3433)
const graphics = new Graphics();
@@ -634,7 +642,7 @@ describe('Graphics', function ()
expect(() => graphics.arc(300, 100, 20, 0, Math.PI)).to.not.throw();
});
- it('should do nothing when startAngle and endAngle are equal', function ()
+ it('should do nothing when startAngle and endAngle are equal', () =>
{
const graphics = new Graphics();
@@ -645,7 +653,7 @@ describe('Graphics', function ()
expect(graphics.currentPath).to.be.null;
});
- it('should do nothing if sweep equals zero', function ()
+ it('should do nothing if sweep equals zero', () =>
{
const graphics = new Graphics();
@@ -657,44 +665,44 @@ describe('Graphics', function ()
});
});
- describe('_calculateBounds', function ()
+ describe('_calculateBounds', () =>
{
- it('should only call updateLocalBounds once when not empty', function ()
+ it('should only call updateLocalBounds once when not empty', () =>
{
const graphics = new Graphics();
graphics.drawRect(0, 0, 10, 10);
- const spy = sinon.spy(graphics.geometry, 'calculateBounds');
+ const spy = sinon.spy(graphics.geometry, 'calculateBounds' as keyof GraphicsGeometry);
- graphics._calculateBounds();
+ graphics['_calculateBounds']();
expect(spy).to.have.been.calledOnce;
- graphics._calculateBounds();
+ graphics['_calculateBounds']();
expect(spy).to.have.been.calledOnce;
});
- it('should not call updateLocalBounds when empty', function ()
+ it('should not call updateLocalBounds when empty', () =>
{
const graphics = new Graphics();
- const spy = sinon.spy(graphics.geometry, 'calculateBounds');
+ const spy = sinon.spy(graphics.geometry, 'calculateBounds' as keyof GraphicsGeometry);
- graphics._calculateBounds();
+ graphics['_calculateBounds']();
expect(spy).to.not.have.been.called;
- graphics._calculateBounds();
+ graphics['_calculateBounds']();
expect(spy).to.not.have.been.called;
});
});
- describe('getBounds', function ()
+ describe('getBounds', () =>
{
- it('should use getBounds without stroke', function ()
+ it('should use getBounds without stroke', () =>
{
const graphics = new Graphics();
@@ -708,7 +716,7 @@ describe('Graphics', function ()
expect(height).to.equal(200);
});
- it('should use getBounds with stroke', function ()
+ it('should use getBounds with stroke', () =>
{
const graphics = new Graphics();
@@ -725,7 +733,7 @@ describe('Graphics', function ()
expect(height).to.equal(204);
});
- it('should be zero for empty Graphics', function ()
+ it('should be zero for empty Graphics', () =>
{
const graphics = new Graphics();
@@ -737,7 +745,7 @@ describe('Graphics', function ()
expect(height).to.equal(0);
});
- it('should be zero after clear', function ()
+ it('should be zero after clear', () =>
{
const graphics = new Graphics();
@@ -755,7 +763,7 @@ describe('Graphics', function ()
expect(height).to.equal(0);
});
- it('should be equal of childs bounds when empty', function ()
+ it('should be equal of childs bounds when empty', () =>
{
const graphics = new Graphics();
const child = new Graphics();
@@ -775,9 +783,9 @@ describe('Graphics', function ()
});
});
- describe('startPoly', function ()
+ describe('startPoly', () =>
{
- it('should fill two triangles', function ()
+ it('should fill two triangles', () =>
{
const graphics = new Graphics();
@@ -796,11 +804,11 @@ describe('Graphics', function ()
const data = graphics.geometry.graphicsData;
expect(data.length).to.equals(2);
- expect(data[0].shape.points).to.eql([50, 50, 250, 50, 100, 100, 50, 50]);
- expect(data[1].shape.points).to.eql([250, 50, 450, 50, 300, 100, 250, 50]);
+ expect((data[0].shape as Polygon).points).to.eql([50, 50, 250, 50, 100, 100, 50, 50]);
+ expect((data[1].shape as Polygon).points).to.eql([250, 50, 450, 50, 300, 100, 250, 50]);
});
- it('should honor lineStyle break', function ()
+ it('should honor lineStyle break', () =>
{
const graphics = new Graphics();
@@ -815,12 +823,12 @@ describe('Graphics', function ()
const data = graphics.geometry.graphicsData;
expect(data.length).to.equals(2);
- expect(data[0].shape.points).to.eql([50, 50, 250, 50]);
- expect(data[1].shape.points).to.eql([250, 50, 100, 100, 50, 50]);
+ expect((data[0].shape as Polygon).points).to.eql([50, 50, 250, 50]);
+ expect((data[1].shape as Polygon).points).to.eql([250, 50, 100, 100, 50, 50]);
});
});
- describe('should support adaptive curves', function ()
+ describe('should support adaptive curves', () =>
{
const defMode = GRAPHICS_CURVES.adaptive;
const defMaxLen = GRAPHICS_CURVES.maxLength;
@@ -834,7 +842,7 @@ describe('Graphics', function ()
graphics.quadraticCurveTo(600, 510, 590, 500);
graphics.endFill();
- const pointsLen = graphics.geometry.graphicsData[0].shape.points.length / 2;
+ const pointsLen = (graphics.geometry.graphicsData[0].shape as Polygon).points.length / 2;
const arcLen = Math.PI / 2 * Math.sqrt(200);
const estimate = Math.ceil(arcLen / myMaxLen) + 1;
@@ -844,9 +852,9 @@ describe('Graphics', function ()
GRAPHICS_CURVES.maxLength = defMaxLen;
});
- describe('geometry', function ()
+ describe('geometry', () =>
{
- it('validateBatching should return false if any of textures is invalid', function ()
+ it('validateBatching should return false if any of textures is invalid', () =>
{
const graphics = new Graphics();
const invalidTex = Texture.EMPTY;
@@ -859,10 +867,10 @@ describe('Graphics', function ()
const geometry = graphics.geometry;
- expect(geometry.validateBatching()).to.be.false;
+ expect(geometry['validateBatching']()).to.be.false;
});
- it('validateBatching should return true if all textures is valid', function ()
+ it('validateBatching should return true if all textures is valid', () =>
{
const graphics = new Graphics();
const validTex = Texture.WHITE;
@@ -874,10 +882,10 @@ describe('Graphics', function ()
const geometry = graphics.geometry;
- expect(geometry.validateBatching()).to.be.true;
+ expect(geometry['validateBatching']()).to.be.true;
});
- it('should be batchable if graphicsData is empty', function ()
+ it('should be batchable if graphicsData is empty', () =>
{
const graphics = new Graphics();
const geometry = graphics.geometry;
@@ -886,7 +894,7 @@ describe('Graphics', function ()
expect(geometry.batchable).to.be.true;
});
- it('_compareStyles should return true for identical styles', function ()
+ it('_compareStyles should return true for identical styles', () =>
{
const graphics = new Graphics();
const geometry = graphics.geometry;
@@ -899,7 +907,7 @@ describe('Graphics', function ()
const second = first.clone();
- expect(geometry._compareStyles(first, second)).to.be.true;
+ expect(geometry['_compareStyles'](first, second)).to.be.true;
const firstLine = new LineStyle();
@@ -909,10 +917,10 @@ describe('Graphics', function ()
const secondLine = firstLine.clone();
- expect(geometry._compareStyles(firstLine, secondLine)).to.be.true;
+ expect(geometry['_compareStyles'](firstLine, secondLine)).to.be.true;
});
- it('should be 1 batch for same styles', function ()
+ it('should be 1 batch for same styles', () =>
{
const graphics = new Graphics();
@@ -926,7 +934,7 @@ describe('Graphics', function ()
expect(geometry.batches).to.have.lengthOf(1);
});
- it('should be 2 batches for 2 different styles', function ()
+ it('should be 2 batches for 2 different styles', () =>
{
const graphics = new Graphics();
@@ -947,7 +955,7 @@ describe('Graphics', function ()
expect(geometry.batches).to.have.lengthOf(2);
});
- it('should be 1 batch if fill and line are the same', function ()
+ it('should be 1 batch if fill and line are the same', () =>
{
const graphics = new Graphics();
@@ -962,7 +970,7 @@ describe('Graphics', function ()
expect(geometry.batches).to.have.lengthOf(1);
});
- it('should not use fill if triangulation does nothing', function ()
+ it('should not use fill if triangulation does nothing', () =>
{
const graphics = new Graphics();
diff --git a/packages/interaction/package.json b/packages/interaction/package.json
index fe6e0dcc8e..eb5c607e7a 100644
--- a/packages/interaction/package.json
+++ b/packages/interaction/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/interaction",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/interaction.js",
"module": "dist/esm/interaction.js",
"bundle": "dist/browser/interaction.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/interaction.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/interaction.js"
+ }
+ }
+ },
"description": "Plugin for handling mouse, touch and pointer events",
"author": "Mat Groves",
"contributors": [
@@ -25,10 +38,10 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/core": "6.3.0",
- "@pixi/display": "6.3.0",
- "@pixi/math": "6.3.0",
- "@pixi/ticker": "6.3.0",
- "@pixi/utils": "6.3.0"
+ "@pixi/core": "6.4.2",
+ "@pixi/display": "6.4.2",
+ "@pixi/math": "6.4.2",
+ "@pixi/ticker": "6.4.2",
+ "@pixi/utils": "6.4.2"
}
}
diff --git a/packages/interaction/src/InteractionData.ts b/packages/interaction/src/InteractionData.ts
index eacbf95385..f8a20e0de5 100644
--- a/packages/interaction/src/InteractionData.ts
+++ b/packages/interaction/src/InteractionData.ts
@@ -6,7 +6,6 @@ export type InteractivePointerEvent = PointerEvent | TouchEvent | MouseEvent;
/**
* Holds all information related to an Interaction event
- *
* @memberof PIXI
*/
export class InteractionData
@@ -19,7 +18,6 @@ export class InteractionData
/**
* When passed to an event handler, this will be the original DOM Event that was captured
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
* @see https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent
@@ -32,21 +30,18 @@ export class InteractionData
/**
* Indicates whether or not the pointer device that created the event is the primary pointer.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary
*/
public isPrimary: boolean;
/**
* Indicates which button was pressed on the mouse or pointer device to trigger the event.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
*/
public button: number;
/**
* Indicates which buttons are pressed on the mouse or pointer device when the event is triggered.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
*/
public buttons: number;
@@ -54,7 +49,6 @@ export class InteractionData
/**
* The width of the pointer's contact along the x-axis, measured in CSS pixels.
* radiusX of TouchEvents will be represented by this value.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width
*/
public width: number;
@@ -62,28 +56,24 @@ export class InteractionData
/**
* The height of the pointer's contact along the y-axis, measured in CSS pixels.
* radiusY of TouchEvents will be represented by this value.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height
*/
public height: number;
/**
* The angle, in degrees, between the pointer device and the screen.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX
*/
public tiltX: number;
/**
* The angle, in degrees, between the pointer device and the screen.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY
*/
public tiltY: number;
/**
* The type of pointer that triggered the event.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
*/
public pointerType: string;
@@ -91,28 +81,24 @@ export class InteractionData
/**
* Pressure applied by the pointing device during the event. A Touch's force property
* will be represented by this value.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure
*/
public pressure = 0;
/**
* From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch.
- *
* @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle
*/
public rotationAngle = 0;
/**
* Twist of a stylus pointer.
- *
* @see https://w3c.github.io/pointerevents/#pointerevent-interface
*/
public twist = 0;
/**
* Barrel pressure on a stylus pointer.
- *
* @see https://w3c.github.io/pointerevents/#pointerevent-interface
*/
public tangentialPressure = 0;
@@ -139,7 +125,6 @@ export class InteractionData
/**
* The unique identifier of the pointer. It will be the same as `identifier`.
- *
* @readonly
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId
*/
@@ -150,14 +135,13 @@ export class InteractionData
/**
* This will return the local coordinates of the specified displayObject for this InteractionData
- *
* @param displayObject - The DisplayObject that you would like the local
* coords off
* @param point - A Point object in which to store the value, optional (otherwise
* will create a new point)
* @param globalPos - A Point object containing your custom global coords, optional
* (otherwise will use the current global coords)
- * @return - A point containing the coordinates of the InteractionData position relative
+ * @returns - A point containing the coordinates of the InteractionData position relative
* to the DisplayObject
*/
public getLocalPosition(displayObject: DisplayObject, point?: P, globalPos?: IPointData): P
@@ -167,7 +151,6 @@ export class InteractionData
/**
* Copies properties from normalized event data.
- *
* @param {Touch|MouseEvent|PointerEvent} event - The normalized event data
*/
public copyEvent(event: Touch | InteractivePointerEvent): void
diff --git a/packages/interaction/src/InteractionEvent.ts b/packages/interaction/src/InteractionEvent.ts
index 6b2df88ed1..6214cd62a5 100644
--- a/packages/interaction/src/InteractionEvent.ts
+++ b/packages/interaction/src/InteractionEvent.ts
@@ -5,7 +5,6 @@ export type InteractionCallback = (interactionEvent: InteractionEvent, displayOb
/**
* Event class that mimics native DOM events.
- *
* @memberof PIXI
*/
export class InteractionEvent
@@ -20,7 +19,6 @@ export class InteractionEvent
/**
* At which object this event stops propagating.
- *
* @private
*/
public stopsPropagatingAt: DisplayObject;
@@ -29,7 +27,6 @@ export class InteractionEvent
* Whether we already reached the element we want to
* stop propagating at. This is important for delayed events,
* where we start over deeper in the tree again.
- *
* @private
*/
public stopPropagationHint: boolean;
diff --git a/packages/interaction/src/InteractionManager.ts b/packages/interaction/src/InteractionManager.ts
index 8cbaba67eb..11cba6d0e7 100644
--- a/packages/interaction/src/InteractionManager.ts
+++ b/packages/interaction/src/InteractionManager.ts
@@ -31,13 +31,15 @@ const hitTestEvent: TestInteractionEvent = {
},
};
-export interface InteractionManagerOptions {
+export interface InteractionManagerOptions
+{
autoPreventDefault?: boolean;
interactionFrequency?: number;
useSystemTicker?: boolean;
}
-export interface DelayedEvent {
+export interface DelayedEvent
+{
displayObject: DisplayObject;
eventString: string;
eventData: InteractionEvent;
@@ -57,55 +59,43 @@ interface CrossCSSStyleDeclaration extends CSSStyleDeclaration
* This manager also supports multitouch.
*
* An instance of this class is automatically created by default, and can be found at `renderer.plugins.interaction`
- *
* @memberof PIXI
*/
export class InteractionManager extends EventEmitter
{
/**
* Actively tracked InteractionData
- *
* @private
- * @member {Object.}
+ * @member {Object}
*/
public readonly activeInteractionData: { [key: number]: InteractionData };
- /**
- * Does the device support touch events
- * https://www.w3.org/TR/touch-events/
- */
+ /** Does the device support touch events https://www.w3.org/TR/touch-events/ */
public readonly supportsTouchEvents: boolean;
- /**
- * Does the device support pointer events
- * https://www.w3.org/Submission/pointer-events/
- */
+ /** Does the device support pointer events https://www.w3.org/Submission/pointer-events/ */
public readonly supportsPointerEvents: boolean;
/**
* Pool of unused InteractionData
- *
* @private
*/
public interactionDataPool: InteractionData[];
/**
* Internal cached let.
- *
* @private
*/
public cursor: string;
/**
* Delayed pointer events. Used to guarantee correct ordering of over/out events.
- *
* @private
*/
public delayedEvents: DelayedEvent[];
/**
* TreeSearch component that is used to hitTest stage tree.
- *
* @private
*/
public search: TreeSearch;
@@ -118,14 +108,12 @@ export class InteractionManager extends EventEmitter
* Does not apply to pointer events for backwards compatibility
* preventDefault on pointer events stops mouse events from firing
* Thus, for every pointer event, there will always be either a mouse of touch event alongside it.
- *
* @default true
*/
public autoPreventDefault: boolean;
/**
* Maximum frequency in milliseconds at which pointer over/out states will be checked by {@link tickerUpdate}.
- *
* @default 10
*/
public interactionFrequency: number;
@@ -143,7 +131,6 @@ export class InteractionManager extends EventEmitter
* Setting to false can make things easier for things like dragging
* It is currently set to false as this is how PixiJS used to work. This will be set to true in
* future versions of pixi.
- *
* @default false
*/
public moveWhenInside: boolean;
@@ -153,20 +140,15 @@ export class InteractionManager extends EventEmitter
* values, objects are handled as dictionaries of CSS values for interactionDOMElement,
* and functions are called instead of changing the CSS.
* Default CSS cursor values are provided for 'default' and 'pointer' modes.
- *
- * @member {Object.}
+ * @member {Object}
*/
public cursorStyles: Dict void) | CSSStyleDeclaration>;
- /**
- * The mode of the cursor that is being used.
- * The value of this is a key from the cursorStyles dictionary.
- */
+ /** The mode of the cursor that is being used. The value of this is a key from the cursorStyles dictionary. */
public currentCursorMode: string;
/**
* The current resolution / device pixel ratio.
- *
* @default 1
*/
public resolution: number;
@@ -192,8 +174,7 @@ export class InteractionManager extends EventEmitter
/**
* An options object specifies characteristics about the event listener.
- *
- * @member {Object.}
+ * @member {Object}
*/
private readonly _eventListenerOptions: { capture: true, passive: false };
@@ -269,7 +250,6 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a pointer device button (usually a mouse left-button) is pressed on the display
* object.
- *
* @event PIXI.InteractionManager#mousedown
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -277,7 +257,6 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a pointer device secondary button (usually a mouse right-button) is pressed
* on the display object.
- *
* @event PIXI.InteractionManager#rightdown
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -285,7 +264,6 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a pointer device button (usually a mouse left-button) is released over the display
* object.
- *
* @event PIXI.InteractionManager#mouseup
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -293,7 +271,6 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a pointer device secondary button (usually a mouse right-button) is released
* over the display object.
- *
* @event PIXI.InteractionManager#rightup
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -301,7 +278,6 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a pointer device button (usually a mouse left-button) is pressed and released on
* the display object.
- *
* @event PIXI.InteractionManager#click
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -309,7 +285,6 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a pointer device secondary button (usually a mouse right-button) is pressed
* and released on the display object.
- *
* @event PIXI.InteractionManager#rightclick
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -318,7 +293,6 @@ export class InteractionManager extends EventEmitter
* Fired when a pointer device button (usually a mouse left-button) is released outside the
* display object that initially registered a
* [mousedown]{@link PIXI.InteractionManager#event:mousedown}.
- *
* @event PIXI.InteractionManager#mouseupoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -327,35 +301,30 @@ export class InteractionManager extends EventEmitter
* Fired when a pointer device secondary button (usually a mouse right-button) is released
* outside the display object that initially registered a
* [rightdown]{@link PIXI.InteractionManager#event:rightdown}.
- *
* @event PIXI.InteractionManager#rightupoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device (usually a mouse) is moved while over the display object
- *
* @event PIXI.InteractionManager#mousemove
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device (usually a mouse) is moved onto the display object
- *
* @event PIXI.InteractionManager#mouseover
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device (usually a mouse) is moved off the display object
- *
* @event PIXI.InteractionManager#mouseout
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device button is pressed on the display object.
- *
* @event PIXI.InteractionManager#pointerdown
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -365,21 +334,18 @@ export class InteractionManager extends EventEmitter
* Not always fired when some buttons are held down while others are released. In those cases,
* use [mousedown]{@link PIXI.InteractionManager#event:mousedown} and
* [mouseup]{@link PIXI.InteractionManager#event:mouseup} instead.
- *
* @event PIXI.InteractionManager#pointerup
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when the operating system cancels a pointer event
- *
* @event PIXI.InteractionManager#pointercancel
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device button is pressed and released on the display object.
- *
* @event PIXI.InteractionManager#pointertap
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -387,56 +353,48 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a pointer device button is released outside the display object that initially
* registered a [pointerdown]{@link PIXI.InteractionManager#event:pointerdown}.
- *
* @event PIXI.InteractionManager#pointerupoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device is moved while over the display object
- *
* @event PIXI.InteractionManager#pointermove
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device is moved onto the display object
- *
* @event PIXI.InteractionManager#pointerover
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a pointer device is moved off the display object
- *
* @event PIXI.InteractionManager#pointerout
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a touch point is placed on the display object.
- *
* @event PIXI.InteractionManager#touchstart
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a touch point is removed from the display object.
- *
* @event PIXI.InteractionManager#touchend
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when the operating system cancels a touch
- *
* @event PIXI.InteractionManager#touchcancel
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a touch point is placed and removed from the display object.
- *
* @event PIXI.InteractionManager#tap
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -444,14 +402,12 @@ export class InteractionManager extends EventEmitter
/**
* Fired when a touch point is removed outside of the display object that initially
* registered a [touchstart]{@link PIXI.InteractionManager#event:touchstart}.
- *
* @event PIXI.InteractionManager#touchendoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
/**
* Fired when a touch point is moved along the display object.
- *
* @event PIXI.InteractionManager#touchmove
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -461,7 +417,6 @@ export class InteractionManager extends EventEmitter
* object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#mousedown
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -471,7 +426,6 @@ export class InteractionManager extends EventEmitter
* on the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#rightdown
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -481,7 +435,6 @@ export class InteractionManager extends EventEmitter
* object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#mouseup
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -491,7 +444,6 @@ export class InteractionManager extends EventEmitter
* over the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#rightup
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -501,7 +453,6 @@ export class InteractionManager extends EventEmitter
* the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#click
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -511,7 +462,6 @@ export class InteractionManager extends EventEmitter
* and released on the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#rightclick
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -523,7 +473,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#mouseupoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -535,7 +484,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#rightupoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -545,7 +493,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#mousemove
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -555,7 +502,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#mouseover
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -565,7 +511,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#mouseout
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -575,7 +520,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointerdown
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -585,7 +529,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointerup
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -595,7 +538,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointercancel
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -605,7 +547,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointertap
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -616,7 +557,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointerupoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -626,7 +566,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointermove
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -636,7 +575,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointerover
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -646,7 +584,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#pointerout
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -656,7 +593,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#touchstart
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -666,7 +602,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#touchend
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -676,7 +611,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#touchcancel
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -686,7 +620,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#tap
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -697,7 +630,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#touchendoutside
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -707,7 +639,6 @@ export class InteractionManager extends EventEmitter
* DisplayObject's `interactive` property must be set to `true` to fire event.
*
* This comes from the @pixi/interaction package.
- *
* @event PIXI.DisplayObject#touchmove
* @param {PIXI.InteractionEvent} event - Interaction event
*/
@@ -719,7 +650,6 @@ export class InteractionManager extends EventEmitter
/**
* Should the InteractionManager automatically add {@link tickerUpdate} to {@link PIXI.Ticker.system}.
- *
* @default true
*/
get useSystemTicker(): boolean
@@ -742,7 +672,6 @@ export class InteractionManager extends EventEmitter
/**
* Last rendered object or temp object.
- *
* @readonly
* @protected
*/
@@ -753,11 +682,10 @@ export class InteractionManager extends EventEmitter
/**
* Hit tests a point against the display tree, returning the first interactive object that is hit.
- *
* @param globalPoint - A point to hit test with, in global space.
* @param root - The root display object to start from. If omitted, defaults
* to the last rendered root of the associated renderer.
- * @return - The hit display object, if any.
+ * @returns - The hit display object, if any.
*/
public hitTest(globalPoint: Point, root?: DisplayObject): DisplayObject
{
@@ -781,7 +709,6 @@ export class InteractionManager extends EventEmitter
* Sets the DOM element which will receive mouse/touch events. This is useful for when you have
* other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate
* another DOM element to receive those events.
- *
* @param element - the DOM element which will receive mouse and touch events.
* @param resolution - The resolution / device pixel ratio of the new element (relative to the canvas).
*/
@@ -836,7 +763,7 @@ export class InteractionManager extends EventEmitter
const style = this.interactionDOMElement.style as CrossCSSStyleDeclaration;
- if (globalThis.navigator.msPointerEnabled)
+ if ((globalThis.navigator as any).msPointerEnabled)
{
style.msContentZooming = 'none';
style.msTouchAction = 'none';
@@ -895,7 +822,7 @@ export class InteractionManager extends EventEmitter
const style = this.interactionDOMElement.style as CrossCSSStyleDeclaration;
- if (globalThis.navigator.msPointerEnabled)
+ if ((globalThis.navigator as any).msPointerEnabled)
{
style.msContentZooming = '';
style.msTouchAction = '';
@@ -941,7 +868,6 @@ export class InteractionManager extends EventEmitter
* milliseconds have passed since the last invocation.
*
* Invoked by a throttled ticker update from {@link PIXI.Ticker.system}.
- *
* @param deltaTime - time delta since the last call
*/
public tickerUpdate(deltaTime: number): void
@@ -1009,7 +935,6 @@ export class InteractionManager extends EventEmitter
/**
* Sets the current cursor mode, handling any callbacks or CSS style changes.
- *
* @param mode - cursor mode, a key from the cursorStyles dictionary
*/
public setCursorMode(mode: string): void
@@ -1067,7 +992,6 @@ export class InteractionManager extends EventEmitter
/**
* Dispatches an event on the display object that was interacted with.
- *
* @param displayObject - the display object in question
* @param eventString - the name of the event (e.g, mousedown)
* @param eventData - the event data object
@@ -1093,7 +1017,6 @@ export class InteractionManager extends EventEmitter
/**
* Puts a event on a queue to be dispatched later. This is used to guarantee correct
* ordering of over/out events.
- *
* @param displayObject - the display object in question
* @param eventString - the name of the event (e.g, mousedown)
* @param eventData - the event data object
@@ -1107,7 +1030,6 @@ export class InteractionManager extends EventEmitter
* Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The
* resulting value is stored in the point. This takes into account the fact that the DOM
* element could be scaled and positioned anywhere on the screen.
- *
* @param point - the point that the result will be stored in
* @param x - the x coord of the position to map
* @param y - the y coord of the position to map
@@ -1143,7 +1065,6 @@ export class InteractionManager extends EventEmitter
* This function is provides a neat way of crawling through the scene graph and running a
* specified function on all interactive objects it finds. It will also take care of hit
* testing the interactive objects and passes the hit across in the function.
- *
* @protected
* @param interactionEvent - event containing the point that
* is tested for collision
@@ -1192,7 +1113,6 @@ export class InteractionManager extends EventEmitter
/**
* Is called when the pointer button is pressed down on the renderer element
- *
* @param originalEvent - The DOM event of a pointer button being pressed down
*/
private onPointerDown(originalEvent: InteractivePointerEvent): void
@@ -1251,7 +1171,6 @@ export class InteractionManager extends EventEmitter
/**
* Processes the result of the pointer down check and dispatches the event if need be
- *
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
@@ -1293,7 +1212,6 @@ export class InteractionManager extends EventEmitter
/**
* Is called when the pointer button is released on the renderer element
- *
* @param originalEvent - The DOM event of a pointer button being released
* @param cancelled - true if the pointer is cancelled
* @param func - Function passed to {@link processInteractive}
@@ -1339,7 +1257,6 @@ export class InteractionManager extends EventEmitter
/**
* Is called when the pointer button is cancelled
- *
* @param event - The DOM event of a pointer button being released
*/
private onPointerCancel(event: InteractivePointerEvent): void
@@ -1352,7 +1269,6 @@ export class InteractionManager extends EventEmitter
/**
* Processes the result of the pointer cancel check and dispatches the event if need be
- *
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
*/
@@ -1376,7 +1292,6 @@ export class InteractionManager extends EventEmitter
/**
* Is called when the pointer button is released on the renderer element
- *
* @param event - The DOM event of a pointer button being released
*/
private onPointerUp(event: InteractivePointerEvent): void
@@ -1389,7 +1304,6 @@ export class InteractionManager extends EventEmitter
/**
* Processes the result of the pointer up check and dispatches the event if need be
- *
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
@@ -1485,7 +1399,6 @@ export class InteractionManager extends EventEmitter
/**
* Is called when the pointer moves across the renderer element
- *
* @param originalEvent - The DOM event of a pointer moving
*/
private onPointerMove(originalEvent: InteractivePointerEvent): void
@@ -1531,7 +1444,6 @@ export class InteractionManager extends EventEmitter
/**
* Processes the result of the pointer move check and dispatches the event if need be
- *
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
@@ -1559,7 +1471,6 @@ export class InteractionManager extends EventEmitter
/**
* Is called when the pointer is moved out of the renderer element
- *
* @private
* @param {PointerEvent} originalEvent - The DOM event of a pointer being moved out
*/
@@ -1602,7 +1513,6 @@ export class InteractionManager extends EventEmitter
/**
* Processes the result of the pointer over/out check and dispatches the event if need be.
- *
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
@@ -1662,7 +1572,6 @@ export class InteractionManager extends EventEmitter
/**
* Is called when the pointer is moved into the renderer element.
- *
* @param originalEvent - The DOM event of a pointer button being moved into the renderer view.
*/
private onPointerOver(originalEvent: InteractivePointerEvent): void
@@ -1692,9 +1601,8 @@ export class InteractionManager extends EventEmitter
/**
* Get InteractionData for a given pointerId. Store that data as well.
- *
* @param event - Normalized pointer event, output from normalizeToPointerData.
- * @return - Interaction data for the given pointer identifier.
+ * @returns - Interaction data for the given pointer identifier.
*/
private getInteractionDataForPointerId(event: PointerEvent): InteractionData
{
@@ -1725,7 +1633,6 @@ export class InteractionManager extends EventEmitter
/**
* Return unused InteractionData to the pool, for a given pointerId
- *
* @param pointerId - Identifier from a pointer event
*/
private releaseInteractionDataForPointerId(pointerId: number): void
@@ -1742,12 +1649,11 @@ export class InteractionManager extends EventEmitter
/**
* Configure an InteractionEvent to wrap a DOM PointerEvent and InteractionData
- *
* @param interactionEvent - The event to be configured
* @param pointerEvent - The DOM event that will be paired with the InteractionEvent
* @param interactionData - The InteractionData that will be paired
* with the InteractionEvent
- * @return - the interaction event that was passed in
+ * @returns - the interaction event that was passed in
*/
private configureInteractionEventForDOMEvent(interactionEvent: InteractionEvent, pointerEvent: PointerEvent,
interactionData: InteractionData
@@ -1772,9 +1678,8 @@ export class InteractionManager extends EventEmitter
/**
* Ensures that the original event object contains all data that a regular pointer event would have
- *
* @param {TouchEvent|MouseEvent|PointerEvent} event - The original event data from a touch or mouse event
- * @return - An array containing a single normalized pointer event, in the case of a pointer
+ * @returns - An array containing a single normalized pointer event, in the case of a pointer
* or mouse event, or a multiple normalized pointer events if there are multiple changed touches
*/
private normalizeToPointerData(event: InteractivePointerEvent): PointerEvent[]
diff --git a/packages/interaction/src/InteractionTrackingData.ts b/packages/interaction/src/InteractionTrackingData.ts
index 1f6c32ce49..c67b19765f 100644
--- a/packages/interaction/src/InteractionTrackingData.ts
+++ b/packages/interaction/src/InteractionTrackingData.ts
@@ -8,7 +8,6 @@ export interface InteractionTrackingFlags
/**
* DisplayObjects with the {@link PIXI.interactiveTarget} mixin use this class to track interactions
- *
* @class
* @private
* @memberof PIXI
@@ -55,7 +54,6 @@ export class InteractionTrackingData
/**
* Unique pointer id of the event
- *
* @readonly
* @private
* @member {number}
@@ -67,7 +65,6 @@ export class InteractionTrackingData
/**
* State of the tracking data, expressed as bit flags
- *
* @private
* @member {number}
*/
@@ -83,7 +80,6 @@ export class InteractionTrackingData
/**
* Is the tracked event inactive (not over or down)?
- *
* @private
* @member {number}
*/
@@ -94,7 +90,6 @@ export class InteractionTrackingData
/**
* Is the tracked event over the DisplayObject?
- *
* @private
* @member {boolean}
*/
@@ -110,7 +105,6 @@ export class InteractionTrackingData
/**
* Did the right mouse button come down in the DisplayObject?
- *
* @private
* @member {boolean}
*/
@@ -126,7 +120,6 @@ export class InteractionTrackingData
/**
* Did the left mouse button come down in the DisplayObject?
- *
* @private
* @member {boolean}
*/
diff --git a/packages/interaction/src/TreeSearch.ts b/packages/interaction/src/TreeSearch.ts
index f08817f185..1472dc2c3a 100644
--- a/packages/interaction/src/TreeSearch.ts
+++ b/packages/interaction/src/TreeSearch.ts
@@ -5,7 +5,6 @@ import type { Container, DisplayObject } from '@pixi/display';
/**
* Strategy how to search through stage tree for interactive objects
- *
* @memberof PIXI
*/
export class TreeSearch
@@ -19,7 +18,6 @@ export class TreeSearch
/**
* Recursive implementation for findHit
- *
* @private
* @param interactionEvent - event containing the point that
* is tested for collision
@@ -29,7 +27,7 @@ export class TreeSearch
* interactionEvent, displayObject and hit will be passed to the function
* @param hitTest - this indicates if the objects inside should be hit test against the point
* @param interactive - Whether the displayObject is interactive
- * @return - Returns true if the displayObject hit the point
+ * @returns - Returns true if the displayObject hit the point
*/
public recursiveFindHit(interactionEvent: InteractionEvent, displayObject: DisplayObject,
func?: InteractionCallback, hitTest?: boolean, interactive?: boolean
@@ -180,7 +178,6 @@ export class TreeSearch
* This function is provides a neat way of crawling through the scene graph and running a
* specified function on all interactive objects it finds. It will also take care of hit
* testing the interactive objects and passes the hit across in the function.
- *
* @private
* @param interactionEvent - event containing the point that
* is tested for collision
@@ -189,7 +186,7 @@ export class TreeSearch
* @param func - the function that will be called on each interactive object. The
* interactionEvent, displayObject and hit will be passed to the function
* @param hitTest - this indicates if the objects inside should be hit test against the point
- * @return - Returns true if the displayObject hit the point
+ * @returns - Returns true if the displayObject hit the point
*/
public findHit(interactionEvent: InteractionEvent, displayObject: DisplayObject,
func?: InteractionCallback, hitTest?: boolean
diff --git a/packages/interaction/src/interactiveTarget.ts b/packages/interaction/src/interactiveTarget.ts
index baa28049c5..2c17c4bbe4 100644
--- a/packages/interaction/src/interactiveTarget.ts
+++ b/packages/interaction/src/interactiveTarget.ts
@@ -1,47 +1,49 @@
import type { InteractionTrackingData } from './InteractionTrackingData';
type Cursor = 'auto'
- | 'default'
- | 'none'
- | 'context-menu'
- | 'help'
- | 'pointer'
- | 'progress'
- | 'wait'
- | 'cell'
- | 'crosshair'
- | 'text'
- | 'vertical-text'
- | 'alias'
- | 'copy'
- | 'move'
- | 'no-drop'
- | 'not-allowed'
- | 'e-resize'
- | 'n-resize'
- | 'ne-resize'
- | 'nw-resize'
- | 's-resize'
- | 'se-resize'
- | 'sw-resize'
- | 'w-resize'
- | 'ns-resize'
- | 'ew-resize'
- | 'nesw-resize'
- | 'col-resize'
- | 'nwse-resize'
- | 'row-resize'
- | 'all-scroll'
- | 'zoom-in'
- | 'zoom-out'
- | 'grab'
- | 'grabbing';
+| 'default'
+| 'none'
+| 'context-menu'
+| 'help'
+| 'pointer'
+| 'progress'
+| 'wait'
+| 'cell'
+| 'crosshair'
+| 'text'
+| 'vertical-text'
+| 'alias'
+| 'copy'
+| 'move'
+| 'no-drop'
+| 'not-allowed'
+| 'e-resize'
+| 'n-resize'
+| 'ne-resize'
+| 'nw-resize'
+| 's-resize'
+| 'se-resize'
+| 'sw-resize'
+| 'w-resize'
+| 'ns-resize'
+| 'ew-resize'
+| 'nesw-resize'
+| 'col-resize'
+| 'nwse-resize'
+| 'row-resize'
+| 'all-scroll'
+| 'zoom-in'
+| 'zoom-out'
+| 'grab'
+| 'grabbing';
-export interface IHitArea {
+export interface IHitArea
+{
contains(x: number, y: number): boolean;
}
-export interface InteractiveTarget {
+export interface InteractiveTarget
+{
interactive: boolean;
interactiveChildren: boolean;
hitArea: IHitArea | null;
@@ -59,29 +61,26 @@ export interface InteractiveTarget {
* - {@link PIXI.Ellipse}
* - {@link PIXI.Polygon}
* - {@link PIXI.RoundedRectangle}
- *
* @interface IHitArea
* @memberof PIXI
*/
/**
* Checks whether the x and y coordinates given are contained within this area
- *
* @method
* @name contains
* @memberof PIXI.IHitArea#
* @param {number} x - The X coordinate of the point to test
* @param {number} y - The Y coordinate of the point to test
- * @return {boolean} Whether the x/y coordinates are within this area
+ * @returns {boolean} Whether the x/y coordinates are within this area
*/
/**
* Default property values of interactive objects
* Used by {@link PIXI.InteractionManager} to automatically give all DisplayObjects these properties
- *
* @private
* @name interactiveTarget
- * @type {Object}
+ * @type {object}
* @memberof PIXI
* @example
* function MyObject() {}
@@ -99,7 +98,6 @@ export const interactiveTarget: InteractiveTarget = {
/**
* If enabled, the mouse cursor use the pointer behavior when hovered over the displayObject if it is interactive
* Setting this changes the 'cursor' property to `'pointer'`.
- *
* @example
* const sprite = new PIXI.Sprite(texture);
* sprite.interactive = true;
@@ -126,13 +124,11 @@ export const interactiveTarget: InteractiveTarget = {
/**
* This defines what cursor mode is used when the mouse cursor
* is hovered over the displayObject.
- *
* @example
* const sprite = new PIXI.Sprite(texture);
* sprite.interactive = true;
* sprite.cursor = 'wait';
* @see https://developer.mozilla.org/en/docs/Web/CSS/cursor
- *
* @member {string}
* @memberof PIXI.DisplayObject#
*/
@@ -140,7 +136,6 @@ export const interactiveTarget: InteractiveTarget = {
/**
* Internal set of all active pointers, by identifier
- *
* @member {Map}
* @memberof PIXI.DisplayObject#
* @private
@@ -154,7 +149,6 @@ export const interactiveTarget: InteractiveTarget = {
/**
* Map of all tracked pointers, by identifier. Use trackedPointers to access.
- *
* @private
* @type {Map}
*/
diff --git a/packages/interaction/test/InteractionData.tests.ts b/packages/interaction/test/InteractionData.tests.ts
index ac3d46e174..3f75ee6c37 100755
--- a/packages/interaction/test/InteractionData.tests.ts
+++ b/packages/interaction/test/InteractionData.tests.ts
@@ -5,14 +5,16 @@ import { expect } from 'chai';
import '@pixi/canvas-display';
-describe('InteractionData', function ()
+describe('InteractionData', () =>
{
- describe('getLocalPosition', function ()
+ describe('getLocalPosition', () =>
{
- it('should populate second parameter with result', function ()
+ it('should populate second parameter with result', () =>
{
const data = new InteractionData();
+ // @ts-expect-error - instantiating DisplayObject
const stage = new DisplayObject();
+ // @ts-expect-error - instantiating DisplayObject
const displayObject = new DisplayObject();
const point = new Point();
diff --git a/packages/interaction/test/InteractionManager.tests.ts b/packages/interaction/test/InteractionManager.tests.ts
index e3bbbb0dd0..dc64d75738 100644
--- a/packages/interaction/test/InteractionManager.tests.ts
+++ b/packages/interaction/test/InteractionManager.tests.ts
@@ -12,31 +12,35 @@ import sinon from 'sinon';
import { expect } from 'chai';
import '@pixi/canvas-display';
+import { Texture } from '@pixi/core';
CanvasRenderer.registerPlugin('interaction', InteractionManager);
CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer);
CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer);
-describe('InteractionManager', function ()
+describe('InteractionManager', () =>
{
- afterEach(function ()
+ let pointer: MockPointer;
+
+ afterEach(() =>
{
// if we made a MockPointer for the test, clean it up
- if (this.pointer)
+ if (pointer)
{
- this.pointer.cleanUp();
- this.pointer = null;
+ pointer.cleanup();
+ pointer = null;
}
});
- describe('event basics', function ()
+ describe('event basics', () =>
{
- it('should call mousedown handler', function ()
+ it('should call mousedown handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -49,12 +53,13 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.calledOnce;
});
- it('should call mouseup handler', function ()
+ it('should call mouseup handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -67,12 +72,13 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.called;
});
- it('should call mouseupoutside handler', function ()
+ it('should call mouseupoutside handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -86,12 +92,13 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.called;
});
- it('should call mouseupoutside handler on mouseup on different elements', function ()
+ it('should call mouseupoutside handler on mouseup on different elements', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -105,12 +112,13 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.called;
});
- it('should call mouseover handler', function ()
+ it('should call mouseover handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -123,12 +131,13 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.called;
});
- it('should call mouseout handler', function ()
+ it('should call mouseout handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -142,7 +151,7 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.called;
});
- it('should always call mouseout before mouseover', function ()
+ it('should always call mouseout before mouseover', () =>
{
const stage = new Container();
const graphicsA = new Graphics();
@@ -154,7 +163,7 @@ describe('InteractionManager', function ()
const mouseOverSpyB = sinon.spy();
const mouseOutSpyB = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+ pointer = new MockPointer(stage);
stage.addChild(graphicsA);
graphicsA.beginFill(0xFFFFFF);
@@ -187,15 +196,15 @@ describe('InteractionManager', function ()
});
});
- describe('event propagation', function ()
+ describe('event propagation', () =>
{
- it('should stop event propagation', function ()
+ it('should stop event propagation', () =>
{
const stage = new Container();
const parent = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+ pointer = new MockPointer(stage);
const mouseDownChild = sinon.spy((evt) => evt.stopPropagation());
const mouseDownParent = sinon.spy();
@@ -218,13 +227,13 @@ describe('InteractionManager', function ()
expect(mouseDownParent).to.not.have.been.called;
});
- it('should not stop events on the same object from happening', function ()
+ it('should not stop events on the same object from happening', () =>
{
const stage = new Container();
const parent = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+ pointer = new MockPointer(stage);
// Neither of these should stop the other from firing
const mouseMoveChild = sinon.spy((evt) => evt.stopPropagation());
@@ -256,13 +265,13 @@ describe('InteractionManager', function ()
expect(mouseMoveParent).to.not.have.been.called;
});
- it('should not stop events on children of an object from happening', function ()
+ it('should not stop events on children of an object from happening', () =>
{
const stage = new Container();
const parent = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+ pointer = new MockPointer(stage);
const mouseMoveChild = sinon.spy();
const mouseMoveParent = sinon.spy((evt) => evt.stopPropagation());
@@ -294,15 +303,16 @@ describe('InteractionManager', function ()
});
});
- describe('touch vs pointer', function ()
+ describe('touch vs pointer', () =>
{
- it('should call touchstart and pointerdown when touch event and pointer supported', function ()
+ it('should call touchstart and pointerdown when touch event and pointer supported', () =>
{
const stage = new Container();
const graphics = new Graphics();
const touchSpy = sinon.spy(function touchListen() { /* noop */ });
const pointerSpy = sinon.spy(function pointerListen() { /* noop */ });
- const pointer = this.pointer = new MockPointer(stage, null, null, true);
+
+ pointer = new MockPointer(stage, null, null, true);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -317,13 +327,14 @@ describe('InteractionManager', function ()
expect(pointerSpy).to.have.been.calledOnce;
});
- it('should not call touchstart or pointerdown when pointer event and touch supported', function ()
+ it('should not call touchstart or pointerdown when pointer event and touch supported', () =>
{
const stage = new Container();
const graphics = new Graphics();
const touchSpy = sinon.spy(function touchListen() { /* noop */ });
const pointerSpy = sinon.spy(function pointerListen() { /* noop */ });
- const pointer = this.pointer = new MockPointer(stage, null, null, true);
+
+ pointer = new MockPointer(stage, null, null, true);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -338,13 +349,14 @@ describe('InteractionManager', function ()
expect(pointerSpy).to.not.have.been.called;
});
- it('should call touchstart and pointerdown when touch event and pointer not supported', function ()
+ it('should call touchstart and pointerdown when touch event and pointer not supported', () =>
{
const stage = new Container();
const graphics = new Graphics();
const touchSpy = sinon.spy(function touchListen() { /* noop */ });
const pointerSpy = sinon.spy(function pointerListen() { /* noop */ });
- const pointer = this.pointer = new MockPointer(stage, null, null, false);
+
+ pointer = new MockPointer(stage, null, null, false);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -359,13 +371,14 @@ describe('InteractionManager', function ()
expect(pointerSpy).to.have.been.calledOnce;
});
- it('should call touchstart and pointerdown when pointer event and touch not supported', function ()
+ it('should call touchstart and pointerdown when pointer event and touch not supported', () =>
{
const stage = new Container();
const graphics = new Graphics();
const touchSpy = sinon.spy(function touchListen() { /* noop */ });
const pointerSpy = sinon.spy(function pointerListen() { /* noop */ });
- const pointer = this.pointer = new MockPointer(stage, null, null, true);
+
+ pointer = new MockPointer(stage, null, null, true);
pointer.interaction.supportsTouchEvents = false;
@@ -383,35 +396,40 @@ describe('InteractionManager', function ()
});
});
- describe('add/remove events and ticker', function ()
+ describe('add/remove events and ticker', () =>
{
- let stub;
+ let stub: sinon.SinonStub;
- before(function ()
+ before(() =>
{
stub = sinon.stub(InteractionManager.prototype, 'setTargetElement');
});
- after(function ()
+ after(() =>
{
stub.restore();
});
- it('should add and remove pointer events to document', function ()
+ it('should add and remove pointer events to document', () =>
{
- const manager = new InteractionManager(sinon.stub());
+ const manager = new InteractionManager(sinon.stub() as any);
const addSpy = sinon.spy(window.document, 'addEventListener');
const removeSpy = sinon.spy(window.document, 'removeEventListener');
- manager.interactionDOMElement = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
- manager.supportsPointerEvents = true;
+ manager['interactionDOMElement'] = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = true;
- manager.addEvents();
+ manager['addEvents']();
expect(addSpy).to.have.been.calledOnce;
expect(addSpy).to.have.been.calledWith('pointermove');
- manager.removeEvents();
+ manager['removeEvents']();
expect(removeSpy).to.have.been.calledOnce;
expect(removeSpy).to.have.been.calledWith('pointermove');
@@ -420,22 +438,27 @@ describe('InteractionManager', function ()
removeSpy.restore();
});
- it('should add and remove pointer events to window', function ()
+ it('should add and remove pointer events to window', () =>
{
- const manager = new InteractionManager(sinon.stub());
+ const manager = new InteractionManager(sinon.stub() as any);
const addSpy = sinon.spy(window, 'addEventListener');
const removeSpy = sinon.spy(window, 'removeEventListener');
- manager.interactionDOMElement = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
- manager.supportsPointerEvents = true;
+ manager['interactionDOMElement'] = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = true;
- manager.addEvents();
+ manager['addEvents']();
expect(addSpy).to.have.been.calledTwice;
expect(addSpy).to.have.been.calledWith('pointercancel');
expect(addSpy).to.have.been.calledWith('pointerup');
- manager.removeEvents();
+ manager['removeEvents']();
expect(removeSpy).to.have.been.calledTwice;
expect(removeSpy).to.have.been.calledWith('pointercancel');
@@ -445,16 +468,22 @@ describe('InteractionManager', function ()
removeSpy.restore();
});
- it('should add and remove pointer events to element seven times when touch events are supported', function ()
+ it('should add and remove pointer events to element seven times when touch events are supported', () =>
{
- const manager = new InteractionManager(sinon.stub());
- const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
+ const manager = new InteractionManager(sinon.stub() as any);
+ const element = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
- manager.interactionDOMElement = element;
- manager.supportsPointerEvents = true;
- manager.supportsTouchEvents = true;
+ manager['interactionDOMElement'] = element;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = true;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsTouchEvents'] = true;
- manager.addEvents();
+ manager['addEvents']();
expect(element.addEventListener).to.have.been.callCount(7);
expect(element.addEventListener).to.have.been.calledWith('pointerdown');
@@ -466,7 +495,7 @@ describe('InteractionManager', function ()
expect(element.addEventListener).to.have.been.calledWith('touchend');
expect(element.addEventListener).to.have.been.calledWith('touchmove');
- manager.removeEvents();
+ manager['removeEvents']();
expect(element.removeEventListener).to.have.been.callCount(7);
expect(element.removeEventListener).to.have.been.calledWith('pointerdown');
@@ -479,23 +508,29 @@ describe('InteractionManager', function ()
expect(element.removeEventListener).to.have.been.calledWith('touchmove');
});
- it('should add and remove pointer events to element three times when touch events are not supported', function ()
+ it('should add and remove pointer events to element three times when touch events are not supported', () =>
{
- const manager = new InteractionManager(sinon.stub());
- const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
+ const manager = new InteractionManager(sinon.stub() as any);
+ const element = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
- manager.interactionDOMElement = element;
- manager.supportsPointerEvents = true;
- manager.supportsTouchEvents = false;
+ manager['interactionDOMElement'] = element;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = true;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsTouchEvents'] = false;
- manager.addEvents();
+ manager['addEvents']();
expect(element.addEventListener).to.have.been.calledThrice;
expect(element.addEventListener).to.have.been.calledWith('pointerdown');
expect(element.addEventListener).to.have.been.calledWith('pointerleave');
expect(element.addEventListener).to.have.been.calledWith('pointerover');
- manager.removeEvents();
+ manager['removeEvents']();
expect(element.removeEventListener).to.have.been.calledThrice;
expect(element.removeEventListener).to.have.been.calledWith('pointerdown');
@@ -503,21 +538,26 @@ describe('InteractionManager', function ()
expect(element.removeEventListener).to.have.been.calledWith('pointerover');
});
- it('should add and remove mouse events to document', function ()
+ it('should add and remove mouse events to document', () =>
{
- const manager = new InteractionManager(sinon.stub());
+ const manager = new InteractionManager(sinon.stub() as any);
const addSpy = sinon.spy(window.document, 'addEventListener');
const removeSpy = sinon.spy(window.document, 'removeEventListener');
- manager.interactionDOMElement = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
- manager.supportsPointerEvents = false;
+ manager['interactionDOMElement'] = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = false;
- manager.addEvents();
+ manager['addEvents']();
expect(addSpy).to.have.been.calledOnce;
expect(addSpy).to.have.been.calledWith('mousemove');
- manager.removeEvents();
+ manager['removeEvents']();
expect(removeSpy).to.have.been.calledOnce;
expect(removeSpy).to.have.been.calledWith('mousemove');
@@ -526,21 +566,26 @@ describe('InteractionManager', function ()
removeSpy.restore();
});
- it('should add and remove mouse events to window', function ()
+ it('should add and remove mouse events to window', () =>
{
- const manager = new InteractionManager(sinon.stub());
+ const manager = new InteractionManager(sinon.stub() as any);
const addSpy = sinon.spy(window, 'addEventListener');
const removeSpy = sinon.spy(window, 'removeEventListener');
- manager.interactionDOMElement = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
- manager.supportsPointerEvents = false;
+ manager['interactionDOMElement'] = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = false;
- manager.addEvents();
+ manager['addEvents']();
expect(addSpy).to.have.been.calledOnce;
expect(addSpy).to.have.been.calledWith('mouseup');
- manager.removeEvents();
+ manager['removeEvents']();
expect(removeSpy).to.have.been.calledOnce;
expect(removeSpy).to.have.been.calledWith('mouseup');
@@ -549,23 +594,29 @@ describe('InteractionManager', function ()
removeSpy.restore();
});
- it('should add and remove mouse events to element', function ()
+ it('should add and remove mouse events to element', () =>
{
- const manager = new InteractionManager(sinon.stub());
- const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
+ const manager = new InteractionManager(sinon.stub() as any);
+ const element = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
- manager.interactionDOMElement = element;
- manager.supportsPointerEvents = false;
- manager.supportsTouchEvents = false;
+ manager['interactionDOMElement'] = element;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = false;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsTouchEvents'] = false;
- manager.addEvents();
+ manager['addEvents']();
expect(element.addEventListener).to.have.been.calledThrice;
expect(element.addEventListener).to.have.been.calledWith('mousedown');
expect(element.addEventListener).to.have.been.calledWith('mouseout');
expect(element.addEventListener).to.have.been.calledWith('mouseover');
- manager.removeEvents();
+ manager['removeEvents']();
expect(element.removeEventListener).to.have.been.calledThrice;
expect(element.removeEventListener).to.have.been.calledWith('mousedown');
@@ -573,23 +624,29 @@ describe('InteractionManager', function ()
expect(element.removeEventListener).to.have.been.calledWith('mouseover');
});
- it('should add and remove touch events to element without pointer events', function ()
+ it('should add and remove touch events to element without pointer events', () =>
{
- const manager = new InteractionManager(sinon.stub());
- const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
+ const manager = new InteractionManager(sinon.stub() as any);
+ const element = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
- manager.interactionDOMElement = element;
- manager.supportsPointerEvents = false;
- manager.supportsTouchEvents = true;
+ manager['interactionDOMElement'] = element;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = false;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsTouchEvents'] = true;
- manager.addEvents();
+ manager['addEvents']();
expect(element.addEventListener).to.have.been.calledWith('touchstart');
expect(element.addEventListener).to.have.been.calledWith('touchcancel');
expect(element.addEventListener).to.have.been.calledWith('touchend');
expect(element.addEventListener).to.have.been.calledWith('touchmove');
- manager.removeEvents();
+ manager['removeEvents']();
expect(element.removeEventListener).to.have.been.calledWith('touchstart');
expect(element.removeEventListener).to.have.been.calledWith('touchcancel');
@@ -597,23 +654,29 @@ describe('InteractionManager', function ()
expect(element.removeEventListener).to.have.been.calledWith('touchmove');
});
- it('should add and remove touch events to element with pointer events', function ()
+ it('should add and remove touch events to element with pointer events', () =>
{
- const manager = new InteractionManager(sinon.stub());
- const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() };
+ const manager = new InteractionManager(sinon.stub() as any);
+ const element = {
+ style: {},
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub()
+ } as unknown as HTMLElement;
- manager.interactionDOMElement = element;
- manager.supportsPointerEvents = true;
- manager.supportsTouchEvents = true;
+ manager['interactionDOMElement'] = element;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsPointerEvents'] = true;
+ // @ts-expect-error - overriding readonly prop
+ manager['supportsTouchEvents'] = true;
- manager.addEvents();
+ manager['addEvents']();
expect(element.addEventListener).to.have.been.calledWith('touchstart');
expect(element.addEventListener).to.have.been.calledWith('touchcancel');
expect(element.addEventListener).to.have.been.calledWith('touchend');
expect(element.addEventListener).to.have.been.calledWith('touchmove');
- manager.removeEvents();
+ manager['removeEvents']();
expect(element.removeEventListener).to.have.been.calledWith('touchstart');
expect(element.removeEventListener).to.have.been.calledWith('touchcancel');
@@ -621,17 +684,16 @@ describe('InteractionManager', function ()
expect(element.removeEventListener).to.have.been.calledWith('touchmove');
});
- it('should add and remove Ticker.system listener', function ()
+ it('should add and remove Ticker.system listener', () =>
{
- const manager = new InteractionManager(sinon.stub());
+ const manager = new InteractionManager(sinon.stub() as any);
+ const element = {} as unknown as HTMLElement;
- const element = {};
-
- manager.interactionDOMElement = element;
+ manager['interactionDOMElement'] = element;
const listenerCount = Ticker.system.count;
- manager.addTickerListener();
+ manager['addTickerListener']();
expect(Ticker.system.count).to.equal(listenerCount + 1);
@@ -643,7 +705,7 @@ describe('InteractionManager', function ()
expect(Ticker.system.count).to.equal(listenerCount + 1);
- manager.removeTickerListener();
+ manager['removeTickerListener']();
expect(Ticker.system.count).to.equal(listenerCount);
@@ -651,20 +713,21 @@ describe('InteractionManager', function ()
expect(Ticker.system.count).to.equal(listenerCount);
- manager.addTickerListener();
+ manager['addTickerListener']();
expect(Ticker.system.count).to.equal(listenerCount);
});
});
- describe('onClick', function ()
+ describe('onClick', () =>
{
- it('should call handler when inside', function ()
+ it('should call handler when inside', () =>
{
const stage = new Container();
const graphics = new Graphics();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -677,12 +740,13 @@ describe('InteractionManager', function ()
expect(clickSpy).to.have.been.calledOnce;
});
- it('should not call handler when outside', function ()
+ it('should not call handler when outside', () =>
{
const stage = new Container();
const graphics = new Graphics();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -695,7 +759,7 @@ describe('InteractionManager', function ()
expect(clickSpy).to.not.have.been.called;
});
- it('should not call handler when mousedown not received', function ()
+ it('should not call handler when mousedown not received', () =>
{
const stage = new Container();
const graphics = new Graphics();
@@ -719,14 +783,15 @@ describe('InteractionManager', function ()
});
});
- describe('onTap', function ()
+ describe('onTap', () =>
{
- it('should call handler when inside', function ()
+ it('should call handler when inside', () =>
{
const stage = new Container();
const graphics = new Graphics();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -739,12 +804,13 @@ describe('InteractionManager', function ()
expect(clickSpy).to.have.been.calledOnce;
});
- it('should not call handler when outside', function ()
+ it('should not call handler when outside', () =>
{
const stage = new Container();
const graphics = new Graphics();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -757,7 +823,7 @@ describe('InteractionManager', function ()
expect(clickSpy).to.not.have.been.called;
});
- it('should not call handler when moved to other sprite', function ()
+ it('should not call handler when moved to other sprite', () =>
{
const stage = new Container();
const graphics = new Graphics();
@@ -765,13 +831,13 @@ describe('InteractionManager', function ()
const clickSpy = sinon.spy();
const overSpy = sinon.spy();
const endSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
graphics.drawRect(0, 0, 50, 50);
graphics.interactive = true;
- graphics.name = 'graphics1';
stage.addChild(graphics2);
graphics2.beginFill(0xFFFFFF);
@@ -780,7 +846,6 @@ describe('InteractionManager', function ()
graphics2.on('tap', clickSpy);
graphics2.on('touchmove', overSpy);
graphics2.on('touchend', endSpy);
- graphics2.name = 'graphics2';
pointer.touchstart(25, 25, 3);
pointer.touchmove(60, 60, 3);
@@ -793,14 +858,15 @@ describe('InteractionManager', function ()
});
});
- describe('pointertap', function ()
+ describe('pointertap', () =>
{
- it('should call handler when inside', function ()
+ it('should call handler when inside', () =>
{
const stage = new Container();
const graphics = new Graphics();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -813,12 +879,13 @@ describe('InteractionManager', function ()
expect(clickSpy).to.have.been.calledOnce;
});
- it('should not call handler when outside', function ()
+ it('should not call handler when outside', () =>
{
const stage = new Container();
const graphics = new Graphics();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -831,7 +898,7 @@ describe('InteractionManager', function ()
expect(clickSpy).to.not.have.been.called;
});
- it('with mouse events, should not call handler when moved to other sprite', function ()
+ it('with mouse events, should not call handler when moved to other sprite', () =>
{
const stage = new Container();
const graphics = new Graphics();
@@ -839,13 +906,13 @@ describe('InteractionManager', function ()
const overSpy = sinon.spy();
const upSpy = sinon.spy();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
graphics.drawRect(0, 0, 50, 50);
graphics.interactive = true;
- graphics.name = 'graphics1';
stage.addChild(graphics2);
graphics2.beginFill(0xFFFFFF);
@@ -854,7 +921,6 @@ describe('InteractionManager', function ()
graphics2.on('pointertap', clickSpy);
graphics2.on('pointerover', overSpy);
graphics2.on('pointerup', upSpy);
- graphics2.name = 'graphics2';
pointer.mousedown(25, 25);
pointer.mousemove(60, 60);
@@ -866,7 +932,7 @@ describe('InteractionManager', function ()
expect(clickSpy).to.not.have.been.called;
});
- it('with pointer events, should not call handler when moved to other sprite', function ()
+ it('with pointer events, should not call handler when moved to other sprite', () =>
{
const stage = new Container();
const graphics = new Graphics();
@@ -874,13 +940,13 @@ describe('InteractionManager', function ()
const overSpy = sinon.spy();
const upSpy = sinon.spy();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
graphics.drawRect(0, 0, 50, 50);
graphics.interactive = true;
- graphics.name = 'graphics1';
stage.addChild(graphics2);
graphics2.beginFill(0xFFFFFF);
@@ -889,7 +955,6 @@ describe('InteractionManager', function ()
graphics2.on('pointertap', clickSpy);
graphics2.on('pointerover', overSpy);
graphics2.on('pointerup', upSpy);
- graphics2.name = 'graphics2';
pointer.mousedown(25, 25, true);
pointer.mousemove(60, 60, true);
@@ -901,7 +966,7 @@ describe('InteractionManager', function ()
expect(clickSpy).to.not.have.been.called;
});
- it('with touch events, should not call handler when moved to other sprite', function ()
+ it('with touch events, should not call handler when moved to other sprite', () =>
{
const stage = new Container();
const graphics = new Graphics();
@@ -909,13 +974,13 @@ describe('InteractionManager', function ()
const moveSpy = sinon.spy();
const upSpy = sinon.spy();
const clickSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
graphics.drawRect(0, 0, 50, 50);
graphics.interactive = true;
- graphics.name = 'graphics1';
stage.addChild(graphics2);
graphics2.beginFill(0xFFFFFF);
@@ -924,7 +989,6 @@ describe('InteractionManager', function ()
graphics2.on('pointertap', clickSpy);
graphics2.on('pointermove', moveSpy);
graphics2.on('pointerup', upSpy);
- graphics2.name = 'graphics2';
pointer.touchstart(25, 25, true);
pointer.touchmove(60, 60, true);
@@ -937,9 +1001,9 @@ describe('InteractionManager', function ()
});
});
- describe('overlapping children', function ()
+ describe('overlapping children', () =>
{
- function getScene(callbackEventName, splitParents)
+ function getScene(callbackEventName: string, splitParents?: boolean)
{
const behindChild = new Graphics();
const frontChild = new Graphics();
@@ -947,27 +1011,23 @@ describe('InteractionManager', function ()
const behindChildCallback = sinon.spy(function behindSpy() { /* no op*/ });
const frontChildCallback = sinon.spy(function frontSpy() { /* no op*/ });
const parentCallback = sinon.spy(function parentSpy() { /* no op*/ });
- let behindParent;
- let frontParent;
- let behindParentCallback;
- let frontParentCallback;
+ let behindParent: Container;
+ let frontParent: Container;
+ let behindParentCallback: sinon.SinonSpy;
+ let frontParentCallback: sinon.SinonSpy;
behindChild.beginFill(0xFF);
behindChild.drawRect(0, 0, 50, 50);
behindChild.on(callbackEventName, behindChildCallback);
- behindChild.name = 'behind';
frontChild.beginFill(0x00FF);
frontChild.drawRect(0, 0, 50, 50);
frontChild.on(callbackEventName, frontChildCallback);
- frontChild.name = 'front';
if (splitParents)
{
behindParent = new Container();
- behindParent.name = 'behindParent';
frontParent = new Container();
- frontParent.name = 'frontParent';
behindParentCallback = sinon.spy(function behindParentSpy() { /* no op*/ });
frontParentCallback = sinon.spy(function frontParentSpy() { /* no op*/ });
behindParent.on(callbackEventName, behindParentCallback);
@@ -976,8 +1036,6 @@ describe('InteractionManager', function ()
parent.addChild(behindParent, frontParent);
behindParent.addChild(behindChild);
frontParent.addChild(frontChild);
-
- parent.name = 'parent';
}
else
{
@@ -999,14 +1057,15 @@ describe('InteractionManager', function ()
};
}
- describe('when parent is non-interactive', function ()
+ describe('when parent is non-interactive', () =>
{
- describe('when both children are interactive', function ()
+ describe('when both children are interactive', () =>
{
- it('should callback front child when clicking front child', function ()
+ it('should callback front child when clicking front child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1021,10 +1080,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.not.have.been.called;
});
- it('should callback front child when clicking overlap', function ()
+ it('should callback front child when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1039,10 +1099,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.not.have.been.called;
});
- it('should callback behind child when clicking behind child', function ()
+ it('should callback behind child when clicking behind child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1057,10 +1118,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.not.have.been.called;
});
- it('should callback front child of different non-interactive parents when clicking overlap', function ()
+ it('should callback front child of different non-interactive parents when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click', true);
scene.behindChild.interactive = true;
@@ -1077,10 +1139,11 @@ describe('InteractionManager', function ()
expect(scene.frontParentCallback).to.not.have.been.called;
});
- it('should callback front child of different interactive parents when clicking overlap', function ()
+ it('should callback front child of different interactive parents when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click', true);
scene.behindChild.interactive = true;
@@ -1100,12 +1163,13 @@ describe('InteractionManager', function ()
});
});
- describe('when front child is non-interactive', function ()
+ describe('when front child is non-interactive', () =>
{
- it('should not callback when clicking front child', function ()
+ it('should not callback when clicking front child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1119,10 +1183,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.not.have.been.called;
});
- it('should callback behind child when clicking overlap', function ()
+ it('should callback behind child when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1136,10 +1201,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.not.have.been.called;
});
- it('should callback behind child when clicking behind child', function ()
+ it('should callback behind child when clicking behind child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1154,12 +1220,13 @@ describe('InteractionManager', function ()
});
});
- describe('when behind child is non-interactive', function ()
+ describe('when behind child is non-interactive', () =>
{
- it('should callback front child when clicking front child', function ()
+ it('should callback front child when clicking front child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.x = 25;
@@ -1173,10 +1240,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.not.have.been.called;
});
- it('should callback front child when clicking overlap', function ()
+ it('should callback front child when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.x = 25;
@@ -1190,10 +1258,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.not.have.been.called;
});
- it('should not callback when clicking behind child', function ()
+ it('should not callback when clicking behind child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.x = 25;
@@ -1209,14 +1278,15 @@ describe('InteractionManager', function ()
});
});
- describe('when parent is interactive', function ()
+ describe('when parent is interactive', () =>
{
- describe('when both children are interactive', function ()
+ describe('when both children are interactive', () =>
{
- it('should callback parent and front child when clicking front child', function ()
+ it('should callback parent and front child when clicking front child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1232,10 +1302,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.have.been.calledOnce;
});
- it('should callback parent and front child when clicking overlap', function ()
+ it('should callback parent and front child when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1251,10 +1322,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.have.been.calledOnce;
});
- it('should callback parent and behind child when clicking behind child', function ()
+ it('should callback parent and behind child when clicking behind child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1270,10 +1342,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.have.been.calledOnce;
});
- it('should callback front child of different non-interactive parents when clicking overlap', function ()
+ it('should callback front child of different non-interactive parents when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click', true);
scene.behindChild.interactive = true;
@@ -1291,10 +1364,11 @@ describe('InteractionManager', function ()
expect(scene.frontParentCallback).to.not.have.been.called;
});
- it('should callback front child of different interactive parents when clicking overlap', function ()
+ it('should callback front child of different interactive parents when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click', true);
scene.behindChild.interactive = true;
@@ -1315,12 +1389,13 @@ describe('InteractionManager', function ()
});
});
- describe('when front child is non-interactive', function ()
+ describe('when front child is non-interactive', () =>
{
- it('should callback parent when clicking front child', function ()
+ it('should callback parent when clicking front child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1335,10 +1410,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.have.been.calledOnce;
});
- it('should callback parent and behind child when clicking overlap', function ()
+ it('should callback parent and behind child when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1353,10 +1429,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.have.been.calledOnce;
});
- it('should callback parent and behind child when clicking behind child', function ()
+ it('should callback parent and behind child when clicking behind child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.interactive = true;
@@ -1372,12 +1449,13 @@ describe('InteractionManager', function ()
});
});
- describe('when behind child is non-interactive', function ()
+ describe('when behind child is non-interactive', () =>
{
- it('should callback parent and front child when clicking front child', function ()
+ it('should callback parent and front child when clicking front child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.x = 25;
@@ -1392,10 +1470,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.have.been.calledOnce;
});
- it('should callback parent and front child when clicking overlap', function ()
+ it('should callback parent and front child when clicking overlap', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.x = 25;
@@ -1410,10 +1489,11 @@ describe('InteractionManager', function ()
expect(scene.parentCallback).to.have.been.calledOnce;
});
- it('should callback parent when clicking behind child', function ()
+ it('should callback parent when clicking behind child', () =>
{
const stage = new Container();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
const scene = getScene('click');
scene.behindChild.x = 25;
@@ -1430,7 +1510,7 @@ describe('InteractionManager', function ()
});
});
- it('Semi-complicated nesting with overlap, should not call behind callback', function ()
+ it('Semi-complicated nesting with overlap, should not call behind callback', () =>
{
const stage = new Container();
const frontParent = new Container();
@@ -1448,7 +1528,7 @@ describe('InteractionManager', function ()
frontChild.beginFill(0x00FF);
frontChild.drawRect(0, 0, 50, 50);
frontParent.on('click', frontCallback);
- const pointer = this.pointer = new MockPointer(stage);
+ pointer = new MockPointer(stage);
behindParent.x = 25;
subParent.interactive = true;
@@ -1467,9 +1547,9 @@ describe('InteractionManager', function ()
});
});
- describe('masks', function ()
+ describe('masks', () =>
{
- it('should trigger interaction callback when no mask present', function ()
+ it('should trigger interaction callback when no mask present', () =>
{
const stage = new Container();
const pointer = new MockPointer(stage);
@@ -1491,7 +1571,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.been.calledOnce;
});
- it('should trigger interaction callback when mask uses beginFill', function ()
+ it('should trigger interaction callback when mask uses beginFill', () =>
{
const stage = new Container();
const pointer = new MockPointer(stage);
@@ -1513,7 +1593,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.been.calledOnce;
});
- it('should trigger interaction callback on child when inside of parents mask', function ()
+ it('should trigger interaction callback on child when inside of parents mask', () =>
{
const stage = new Container();
const parent = new Container();
@@ -1537,7 +1617,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.been.calledOnce;
});
- it('should not trigger interaction callback on child when outside of parents mask', function ()
+ it('should not trigger interaction callback on child when outside of parents mask', () =>
{
const stage = new Container();
const parent = new Container();
@@ -1561,7 +1641,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.not.been.calledOnce;
});
- it('should not trigger interaction callback when mask doesn\'t use beginFill', function ()
+ it('should not trigger interaction callback when mask doesn\'t use beginFill', () =>
{
const stage = new Container();
const pointer = new MockPointer(stage);
@@ -1582,7 +1662,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.not.been.called;
});
- it('should trigger interaction callback when mask doesn\'t use beginFill but hitArea is defined', function ()
+ it('should trigger interaction callback when mask doesn\'t use beginFill but hitArea is defined', () =>
{
const stage = new Container();
const pointer = new MockPointer(stage);
@@ -1604,7 +1684,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.been.calledOnce;
});
- it('should trigger interaction callback when mask is a sprite', function ()
+ it('should trigger interaction callback when mask is a sprite', () =>
{
const stage = new Container();
const pointer = new MockPointer(stage);
@@ -1618,7 +1698,7 @@ describe('InteractionManager', function ()
graphics.on('click', spy);
stage.addChild(graphics);
mask.drawRect(0, 0, 50, 50);
- graphics.mask = new Sprite(mask.generateCanvasTexture());
+ graphics.mask = new Sprite(mask.generateCanvasTexture() as Texture);
pointer.click(10, 10);
@@ -1626,9 +1706,9 @@ describe('InteractionManager', function ()
});
});
- describe('hitArea', function ()
+ describe('hitArea', () =>
{
- it('should trigger interaction callback when within hitArea', function ()
+ it('should trigger interaction callback when within hitArea', () =>
{
const stage = new Container();
const pointer = new MockPointer(stage);
@@ -1647,7 +1727,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.been.calledOnce;
});
- it('should not trigger interaction callback when not within hitArea', function ()
+ it('should not trigger interaction callback when not within hitArea', () =>
{
const stage = new Container();
const pointer = new MockPointer(stage);
@@ -1666,7 +1746,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.not.been.calledOnce;
});
- it('should trigger interaction callback on child when inside of parents hitArea', function ()
+ it('should trigger interaction callback on child when inside of parents hitArea', () =>
{
const stage = new Container();
const parent = new Container();
@@ -1687,7 +1767,7 @@ describe('InteractionManager', function ()
expect(spy).to.have.been.calledOnce;
});
- it('should not trigger interaction callback on child when outside of parents hitArea', function ()
+ it('should not trigger interaction callback on child when outside of parents hitArea', () =>
{
const stage = new Container();
const parent = new Container();
@@ -1709,13 +1789,14 @@ describe('InteractionManager', function ()
});
});
- describe('cursor changes', function ()
+ describe('cursor changes', () =>
{
- it('cursor should be the cursor of interactive item', function ()
+ it('cursor should be the cursor of interactive item', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1729,11 +1810,12 @@ describe('InteractionManager', function ()
expect(pointer.renderer.view.style.cursor).to.equal('help');
});
- it('should return cursor to default on mouseout', function ()
+ it('should return cursor to default on mouseout', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1748,11 +1830,12 @@ describe('InteractionManager', function ()
expect(pointer.renderer.view.style.cursor).to.equal(pointer.interaction.cursorStyles.default);
});
- it('should still be the over cursor after a click', function ()
+ it('should still be the over cursor after a click', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1767,11 +1850,12 @@ describe('InteractionManager', function ()
expect(pointer.renderer.view.style.cursor).to.equal('help');
});
- it('should return cursor to default when mouse leaves renderer', function ()
+ it('should return cursor to default when mouse leaves renderer', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1786,13 +1870,14 @@ describe('InteractionManager', function ()
expect(pointer.renderer.view.style.cursor).to.equal(pointer.interaction.cursorStyles.default);
});
- it('cursor callback should be called', function ()
+ it('cursor callback should be called', () =>
{
const stage = new Container();
const graphics = new Graphics();
const overSpy = sinon.spy();
const defaultSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1809,12 +1894,13 @@ describe('InteractionManager', function ()
expect(defaultSpy).to.have.been.called;
});
- it('cursor callback should only be called if the cursor actually changed', function ()
+ it('cursor callback should only be called if the cursor actually changed', () =>
{
const stage = new Container();
const graphics = new Graphics();
const defaultSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1829,11 +1915,12 @@ describe('InteractionManager', function ()
expect(defaultSpy).to.have.been.calledOnce;
});
- it('cursor style object should be fully applied', function ()
+ it('cursor style object should be fully applied', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1851,11 +1938,12 @@ describe('InteractionManager', function ()
expect(pointer.renderer.view.style.display).to.equal('none');
});
- it('should not change cursor style if null cursor style provided', function ()
+ it('should not change cursor style if null cursor style provided', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1872,11 +1960,12 @@ describe('InteractionManager', function ()
expect(pointer.renderer.view.style.cursor).to.equal('');
});
- it('should use cursor property as css if no style entry', function ()
+ it('should use cursor property as css if no style entry', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1889,7 +1978,7 @@ describe('InteractionManager', function ()
});
});
- describe('recursive hitTesting', function ()
+ describe('recursive hitTesting', () =>
{
function getScene()
{
@@ -1917,12 +2006,13 @@ describe('InteractionManager', function ()
};
}
- describe('when frontChild is interactive', function ()
+ describe('when frontChild is interactive', () =>
{
- it('should stop hitTesting after first hit', function ()
+ it('should stop hitTesting after first hit', () =>
{
const scene = getScene();
- const pointer = this.pointer = new MockPointer(scene.stage);
+
+ pointer = new MockPointer(scene.stage);
const frontHitTest = sinon.spy(scene.frontChild, 'containsPoint');
const middleHitTest = sinon.spy(scene.middleChild, 'containsPoint');
const behindHitTest = sinon.spy(scene.behindChild, 'containsPoint');
@@ -1939,12 +2029,13 @@ describe('InteractionManager', function ()
});
});
- describe('when frontChild is not interactive', function ()
+ describe('when frontChild is not interactive', () =>
{
- it('should stop hitTesting after first hit', function ()
+ it('should stop hitTesting after first hit', () =>
{
const scene = getScene();
- const pointer = this.pointer = new MockPointer(scene.stage);
+
+ pointer = new MockPointer(scene.stage);
const frontHitTest = sinon.spy(scene.frontChild, 'containsPoint');
const middleHitTest = sinon.spy(scene.middleChild, 'containsPoint');
const behindHitTest = sinon.spy(scene.behindChild, 'containsPoint');
@@ -1962,13 +2053,14 @@ describe('InteractionManager', function ()
});
});
- describe('pointer handling', function ()
+ describe('pointer handling', () =>
{
- it('pointer event from mouse should use single mouse data', function ()
+ it('pointer event from mouse should use single mouse data', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage, 100, 100, true);
+
+ pointer = new MockPointer(stage, 100, 100, true);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -1982,13 +2074,14 @@ describe('InteractionManager', function ()
});
});
- describe('data cleanup', function ()
+ describe('data cleanup', () =>
{
- it('touchleave after touchout should not orphan data', function ()
+ it('touchleave after touchout should not orphan data', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -2004,13 +2097,14 @@ describe('InteractionManager', function ()
});
});
- describe('hitTest()', function ()
+ describe('hitTest()', () =>
{
- it('should return hit', function ()
+ it('should return hit', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -2023,11 +2117,12 @@ describe('InteractionManager', function ()
expect(hit).to.equal(graphics);
});
- it('should return null if not hit', function ()
+ it('should return null if not hit', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -2040,12 +2135,13 @@ describe('InteractionManager', function ()
expect(hit).to.be.null;
});
- it('should return top thing that was hit', function ()
+ it('should return top thing that was hit', () =>
{
const stage = new Container();
const graphics = new Graphics();
const behind = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(behind);
stage.addChild(graphics);
@@ -2062,12 +2158,13 @@ describe('InteractionManager', function ()
expect(hit).to.equal(graphics);
});
- it('should return hit when passing in root', function ()
+ it('should return hit when passing in root', () =>
{
const stage = new Container();
const graphics = new Graphics();
const behind = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(behind);
stage.addChild(graphics);
@@ -2085,13 +2182,14 @@ describe('InteractionManager', function ()
});
});
- describe('InteractionData properties', function ()
+ describe('InteractionData properties', () =>
{
- it('isPrimary should be set for first touch only', function ()
+ it('isPrimary should be set for first touch only', () =>
{
const stage = new Container();
const graphics = new Graphics();
- const pointer = this.pointer = new MockPointer(stage);
+
+ pointer = new MockPointer(stage);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -2115,14 +2213,15 @@ describe('InteractionManager', function ()
});
});
- describe('mouse events from pens', function ()
+ describe('mouse events from pens', () =>
{
- it('should call mousedown handler', function ()
+ it('should call mousedown handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage, null, null, true);
+
+ pointer = new MockPointer(stage, null, null, true);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -2135,12 +2234,13 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.calledOnce;
});
- it('should call mousemove handler', function ()
+ it('should call mousemove handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage, null, null, true);
+
+ pointer = new MockPointer(stage, null, null, true);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
@@ -2153,12 +2253,13 @@ describe('InteractionManager', function ()
expect(eventSpy).to.have.been.calledOnce;
});
- it('should call mouseup handler', function ()
+ it('should call mouseup handler', () =>
{
const stage = new Container();
const graphics = new Graphics();
const eventSpy = sinon.spy();
- const pointer = this.pointer = new MockPointer(stage, null, null, true);
+
+ pointer = new MockPointer(stage, null, null, true);
stage.addChild(graphics);
graphics.beginFill(0xFFFFFF);
diff --git a/packages/interaction/test/MockPointer.ts b/packages/interaction/test/MockPointer.ts
index 93959684a5..24a9c92112 100644
--- a/packages/interaction/test/MockPointer.ts
+++ b/packages/interaction/test/MockPointer.ts
@@ -1,33 +1,38 @@
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { CanvasRenderer } from '@pixi/canvas-renderer';
import { Ticker } from '@pixi/ticker';
-import { Rectangle } from '@pixi/math';
-import sinon from 'sinon';
+import { Point, Rectangle } from '@pixi/math';
+import { Container } from '@pixi/display';
const { system } = Ticker;
/**
* Use this to mock mouse/touch/pointer events
- *
* @class
*/
class MockPointer
{
+ public createdPointerEvent: any;
+ public activeTouches: any[];
+ public stage: Container;
+ public renderer: CanvasRenderer;
+ public interaction: any;
/**
* @param {PIXI.Container} stage - The root of the scene tree
* @param {number} [width=100] - Width of the renderer
* @param {number} [height=100] - Height of the renderer
* @param {boolean} [ensurePointerEvents=false] - If we should make sure that PointerEvents are 'supported'
*/
- constructor(stage, width, height, ensurePointerEvents)
+ constructor(stage?: Container, width?: number, height?: number, ensurePointerEvents?: boolean)
{
// fake PointerEvent existing
if (ensurePointerEvents && !window.PointerEvent)
{
- window.PointerEvent = class PointerEvent extends MouseEvent
+ (window as any).PointerEvent = class PointerEvent extends MouseEvent
{
+ public pointerType: string;
// eslint-disable-next-line
- constructor(type, opts)
+ constructor(type: string, opts: any)
{
super(type, opts);
this.pointerType = opts.pointerType;
@@ -38,16 +43,18 @@ class MockPointer
this.activeTouches = [];
this.stage = stage;
- this.renderer = new CanvasRenderer(width || 100, height || 100);
+ this.renderer = new CanvasRenderer({
+ width: width || 100,
+ height: height || 100,
+ });
+ // @ts-expect-error ---
this.renderer.sayHello = () => { /* empty */ };
this.interaction = this.renderer.plugins.interaction;
this.interaction.supportsTouchEvents = true;
system.remove(this.interaction.update, this.interaction);
}
- /**
- * Cleans up after tests
- */
+ /** Cleans up after tests */
cleanup()
{
if (this.createdPointerEvent)
@@ -62,9 +69,9 @@ class MockPointer
* @param {number} x - pointer x position
* @param {number} y - pointer y position
*/
- setPosition(x, y)
+ setPosition(x: number, y: number)
{
- this.renderer.plugins.interaction.mapPositionToPoint = (point) =>
+ this.renderer.plugins.interaction.mapPositionToPoint = (point: Point) =>
{
point.x = x;
point.y = y;
@@ -81,17 +88,24 @@ class MockPointer
/**
* [createEvent description]
- * @param {string} eventType `type` of event
- * @param {number} x pointer x position
- * @param {number} y pointer y position
- * @param {number} [identifier] pointer id for touch events
- * @param {boolean} [asPointer] If it should be a PointerEvent from a mouse or touch
- * @param {boolean} [onCanvas=true] If the event should be on the canvas (as opposed to a different element)
- * @return {Event} Generated MouseEvent, TouchEvent, or PointerEvent
+ * @param {string} eventType - `type` of event
+ * @param {number} x - pointer x position
+ * @param {number} y - pointer y position
+ * @param {number} [identifier] - pointer id for touch events
+ * @param {boolean} [asPointer] - If it should be a PointerEvent from a mouse or touch
+ * @param {boolean} [onCanvas=true] - If the event should be on the canvas (as opposed to a different element)
+ * @returns {Event} Generated MouseEvent, TouchEvent, or PointerEvent
*/
- createEvent(eventType, x, y, identifier, asPointer, onCanvas = true)
+ createEvent(
+ eventType: string,
+ x: number,
+ y: number,
+ identifier?: number | boolean,
+ asPointer?: boolean,
+ onCanvas = true
+ ): Event
{
- let event;
+ let event: PointerEvent | MouseEvent | TouchEvent;
if (eventType.startsWith('mouse'))
{
@@ -101,7 +115,6 @@ class MockPointer
pointerType: 'mouse',
clientX: x,
clientY: y,
- preventDefault: sinon.stub(),
});
}
else
@@ -109,7 +122,6 @@ class MockPointer
event = new MouseEvent(eventType, {
clientX: x,
clientY: y,
- preventDefault: sinon.stub(),
});
}
if (onCanvas)
@@ -124,16 +136,15 @@ class MockPointer
eventType = eventType.replace('touch', 'pointer').replace('start', 'down').replace('end', 'up');
event = new PointerEvent(eventType, {
pointerType: 'touch',
- pointerId: identifier || 0,
+ pointerId: identifier as number || 0,
clientX: x,
clientY: y,
- preventDefault: sinon.stub(),
});
Object.defineProperty(event, 'target', { value: this.renderer.view });
}
else
{
- const touch = new Touch({ identifier: identifier || 0, target: this.renderer.view });
+ const touch = new Touch({ identifier: identifier as number || 0, target: this.renderer.view });
if (eventType.endsWith('start'))
{
@@ -151,7 +162,6 @@ class MockPointer
}
}
event = new TouchEvent(eventType, {
- preventDefault: sinon.stub(),
changedTouches: [touch],
touches: this.activeTouches,
});
@@ -163,10 +173,9 @@ class MockPointer
{
event = new PointerEvent(eventType, {
pointerType: 'pen',
- pointerId: identifier || 0,
+ pointerId: identifier as number || 0,
clientX: x,
clientY: y,
- preventDefault: sinon.stub(),
});
Object.defineProperty(event, 'target', { value: this.renderer.view });
}
@@ -182,7 +191,7 @@ class MockPointer
* @param {number} y - pointer y position
* @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse
*/
- mousemove(x, y, asPointer)
+ mousemove(x: number, y: number, asPointer?: boolean)
{
// mouseOverRenderer state should be correct, so mouse position to view rect
const rect = new Rectangle(0, 0, this.renderer.width, this.renderer.height);
@@ -206,7 +215,7 @@ class MockPointer
* @param {number} y - pointer y position
* @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse
*/
- click(x, y, asPointer)
+ click(x: number, y: number, asPointer?: boolean)
{
this.mousedown(x, y, asPointer);
this.mouseup(x, y, asPointer);
@@ -217,7 +226,7 @@ class MockPointer
* @param {number} y - pointer y position
* @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse
*/
- mousedown(x, y, asPointer)
+ mousedown(x: number, y: number, asPointer?: boolean)
{
this.interaction.onPointerDown(this.createEvent('mousedown', x, y, null, asPointer));
}
@@ -228,7 +237,7 @@ class MockPointer
* @param {boolean} [onCanvas=true] - if the event happened on the Canvas element or not
* @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse
*/
- mouseup(x, y, onCanvas = true, asPointer = false)
+ mouseup(x: number, y: number, onCanvas = true, asPointer = false)
{
this.interaction.onPointerUp(this.createEvent('mouseup', x, y, null, asPointer, onCanvas));
}
@@ -239,7 +248,7 @@ class MockPointer
* @param {number} [identifier] - pointer id
* @param {boolean} [asPointer] - if it should be a PointerEvent from a touch
*/
- tap(x, y, identifier, asPointer)
+ tap(x: number, y: number, identifier?: undefined, asPointer?: undefined)
{
this.touchstart(x, y, identifier, asPointer);
this.touchend(x, y, identifier, asPointer);
@@ -251,7 +260,7 @@ class MockPointer
* @param {number} [identifier] - pointer id
* @param {boolean} [asPointer] - if it should be a PointerEvent from a touch
*/
- touchstart(x, y, identifier, asPointer)
+ touchstart(x: number, y: number, identifier?: number | boolean, asPointer?: boolean)
{
this.interaction.onPointerDown(this.createEvent('touchstart', x, y, identifier, asPointer));
}
@@ -262,7 +271,7 @@ class MockPointer
* @param {number} [identifier] - pointer id
* @param {boolean} [asPointer] - if it should be a PointerEvent from a touch
*/
- touchmove(x, y, identifier, asPointer)
+ touchmove(x: number, y: number, identifier?: number | boolean, asPointer?: boolean)
{
this.interaction.onPointerMove(this.createEvent('touchmove', x, y, identifier, asPointer));
}
@@ -273,7 +282,7 @@ class MockPointer
* @param {number} [identifier] - pointer id
* @param {boolean} [asPointer] - if it should be a PointerEvent from a touch
*/
- touchend(x, y, identifier, asPointer)
+ touchend(x: number, y: number, identifier?: number | boolean, asPointer?: boolean)
{
this.interaction.onPointerUp(this.createEvent('touchend', x, y, identifier, asPointer));
}
@@ -284,7 +293,7 @@ class MockPointer
* @param {number} [identifier] - pointer id
* @param {boolean} [asPointer] - if it should be a PointerEvent from a touch
*/
- touchleave(x, y, identifier, asPointer)
+ touchleave(x: number, y: number, identifier?: number | boolean, asPointer?: boolean)
{
this.interaction.onPointerOut(this.createEvent('touchleave', x, y, identifier, asPointer));
}
@@ -294,7 +303,7 @@ class MockPointer
* @param {number} y - pointer y position
* @param {number} [identifier] - pointer id
*/
- pendown(x, y, identifier)
+ pendown(x: number, y: number, identifier?: number)
{
this.interaction.onPointerDown(this.createEvent('pointerdown', x, y, identifier, true));
}
@@ -304,7 +313,7 @@ class MockPointer
* @param {number} y - pointer y position
* @param {number} [identifier] - pointer id
*/
- penmove(x, y, identifier)
+ penmove(x: number, y: number, identifier?: number)
{
this.interaction.onPointerMove(this.createEvent('pointermove', x, y, identifier, true));
}
@@ -314,7 +323,7 @@ class MockPointer
* @param {number} y - pointer y position
* @param {number} [identifier] - pointer id
*/
- penup(x, y, identifier)
+ penup(x: number, y: number, identifier?: number)
{
this.interaction.onPointerUp(this.createEvent('pointerup', x, y, identifier, true));
}
diff --git a/packages/loaders/global.d.ts b/packages/loaders/global.d.ts
index a72dfb0e4f..fdb725c333 100644
--- a/packages/loaders/global.d.ts
+++ b/packages/loaders/global.d.ts
@@ -3,9 +3,7 @@ declare namespace GlobalMixins
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface LoaderResource
{
- /**
- * Texture reference for loading images and other textures.
- */
+ /** Texture reference for loading images and other textures. */
texture?: Texture;
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
diff --git a/packages/loaders/package.json b/packages/loaders/package.json
index 7df85ce9e7..f117ede212 100644
--- a/packages/loaders/package.json
+++ b/packages/loaders/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/loaders",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/loaders.js",
"module": "dist/esm/loaders.js",
"bundle": "dist/browser/loaders.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/loaders.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/loaders.js"
+ }
+ }
+ },
"description": "Load assets and resources",
"author": "Mat Groves",
"contributors": [
@@ -25,8 +38,8 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/constants": "6.3.0",
- "@pixi/core": "6.3.0",
- "@pixi/utils": "6.3.0"
+ "@pixi/constants": "6.4.2",
+ "@pixi/core": "6.4.2",
+ "@pixi/utils": "6.4.2"
}
}
diff --git a/packages/loaders/src/AppLoaderPlugin.ts b/packages/loaders/src/AppLoaderPlugin.ts
index 9353cbe58b..fb891c1c50 100644
--- a/packages/loaders/src/AppLoaderPlugin.ts
+++ b/packages/loaders/src/AppLoaderPlugin.ts
@@ -20,7 +20,7 @@ export class AppLoaderPlugin
/**
* Called on application constructor
- *
+ * @param options
* @private
*/
static init(options?: GlobalMixins.IApplicationOptions): void
@@ -34,7 +34,6 @@ export class AppLoaderPlugin
/**
* Called when application destroyed
- *
* @private
*/
static destroy(): void
diff --git a/packages/loaders/src/Loader.ts b/packages/loaders/src/Loader.ts
index 1e80ed2d4b..bc49230d98 100644
--- a/packages/loaders/src/Loader.ts
+++ b/packages/loaders/src/Loader.ts
@@ -10,7 +10,8 @@ const rgxExtractUrlHash = /(#[\w-]+)?$/;
export type ILoaderMiddleware = (resource: LoaderResource, next: (...args: any[]) => void) => void;
-export interface ILoaderAdd {
+export interface ILoaderAdd
+{
(this: Loader, name: string, url: string, callback?: LoaderResource.OnCompleteSignal): Loader;
(this: Loader, name: string, url: string, options?: IAddOptions, callback?: LoaderResource.OnCompleteSignal): Loader;
(this: Loader, url: string, callback?: LoaderResource.OnCompleteSignal): Loader;
@@ -21,24 +22,23 @@ export interface ILoaderAdd {
/**
* Options for a call to `.add()`.
- *
* @see Loader#add
- *
- * @property name - The name of the resource to load, if not passed the url is used.
- * @property key - Alias for `name`.
- * @property url - The url for this resource, relative to the baseUrl of this loader.
- * @property crossOrigin - Is this request cross-origin? Default is to determine automatically.
- * @property timeout=0 - A timeout in milliseconds for the load. If the load takes longer
+ * @property {string} name - The name of the resource to load, if not passed the url is used.
+ * @property {string} key - Alias for `name`.
+ * @property {string} url - The url for this resource, relative to the baseUrl of this loader.
+ * @property {string|boolean} crossOrigin - Is this request cross-origin? Default is to determine automatically.
+ * @property {number} [timeout=0] - A timeout in milliseconds for the load. If the load takes longer
* than this time it is cancelled and the load is considered a failure. If this value is
* set to `0` then there is no explicit timeout.
- * @property loadType=LoaderResource.LOAD_TYPE.XHR - How should this resource be loaded?
- * @property xhrType=LoaderResource.XHR_RESPONSE_TYPE.DEFAULT - How should the data being
- * loaded be interpreted when using XHR?
- * @property onComplete - Callback to add an an onComplete signal istener.
- * @property callback - Alias for `onComplete`.
- * @property metadata - Extra configuration for middleware and the Resource object.
+ * @property {LoaderResource.LOAD_TYPE} [loadType=LoaderResource.LOAD_TYPE.XHR] - How should this resource be loaded?
+ * @property {LoaderResource.XHR_RESPONSE_TYPE} [xhrType=LoaderResource.XHR_RESPONSE_TYPE.DEFAULT] - How should the data
+ * being loaded be interpreted when using XHR?
+ * @property {LoaderResource.OnCompleteSignal} onComplete - Callback to add an an onComplete signal istener.
+ * @property {LoaderResource.OnCompleteSignal} callback - Alias for `onComplete`.
+ * @property {IResourceMetadata} metadata - Extra configuration for middleware and the Resource object.
*/
-export interface IAddOptions {
+export interface IAddOptions
+{
name?: string;
key?: string;
url?: string;
@@ -95,24 +95,17 @@ export interface IAddOptions {
* loader.onLoad.add(() => {}); // called once per loaded file
* loader.onComplete.add(() => {}); // called once when the queued resources all load.
* ```
- *
* @memberof PIXI
*/
class Loader
{
- /**
- * The base url for all resources loaded by this loader.
- */
+ /** The base url for all resources loaded by this loader. */
baseUrl: string;
- /**
- * The progress percent of the loader going through the queue.
- */
+ /** The progress percent of the loader going through the queue. */
progress = 0;
- /**
- * Loading state of the loader, true if it is currently loading resources.
- */
+ /** Loading state of the loader, true if it is currently loading resources. */
loading = false;
/**
@@ -121,7 +114,6 @@ class Loader
* This should be a valid query string *without* the question-mark (`?`). The loader will
* also *not* escape values for you. Make sure to escape your parameters with
* [`encodeURIComponent`](https://mdn.io/encodeURIComponent) before assigning this property.
- *
* @example
* const loader = new Loader();
*
@@ -137,62 +129,41 @@ class Loader
*/
defaultQueryString = '';
- /**
- * The middleware to run before loading each resource.
- */
+ /** The middleware to run before loading each resource. */
private _beforeMiddleware: Array = [];
- /**
- * The middleware to run after loading each resource.
- */
+ /** The middleware to run after loading each resource. */
private _afterMiddleware: Array = [];
- /**
- * The tracks the resources we are currently completing parsing for.
- */
+ /** The tracks the resources we are currently completing parsing for. */
private _resourcesParsing: Array = [];
/**
* The `_loadResource` function bound with this object context.
- *
* @param r - The resource to load
* @param d - The dequeue function
*/
private _boundLoadResource = (r: LoaderResource, d: () => void): void => this._loadResource(r, d);
- /**
- * The resources waiting to be loaded.
- */
+ /** The resources waiting to be loaded. */
private _queue: AsyncQueue;
- /**
- * All the resources for this loader keyed by name.
- */
+ /** All the resources for this loader keyed by name. */
resources: Dict = {};
- /**
- * Dispatched once per loaded or errored resource.
- */
+ /** Dispatched once per loaded or errored resource. */
onProgress: Signal;
- /**
- * Dispatched once per errored resource.
- */
+ /** Dispatched once per errored resource. */
onError: Signal;
- /**
- * Dispatched once per loaded resource.
- */
+ /** Dispatched once per loaded resource. */
onLoad: Signal;
- /**
- * Dispatched when the loader begins to process the queue.
- */
+ /** Dispatched when the loader begins to process the queue. */
onStart: Signal;
- /**
- * Dispatched when the queued resources all load.
- */
+ /** Dispatched when the queued resources all load. */
onComplete: Signal;
/**
@@ -282,13 +253,12 @@ class Loader
/**
* Same as add, params have strict order
- *
* @private
* @param name - The name of the resource to load.
* @param url - The url for this resource, relative to the baseUrl of this loader.
* @param options - The options for the load.
* @param callback - Function to call when this specific resource completes loading.
- * @return The loader itself.
+ * @returns The loader itself.
*/
protected _add(name: string, url: string, options: IAddOptions, callback?: LoaderResource.OnCompleteSignal): this
{
@@ -354,9 +324,8 @@ class Loader
/**
* Sets up a middleware function that will run *before* the
* resource is loaded.
- *
* @param fn - The middleware function to register.
- * @return The loader itself.
+ * @returns The loader itself.
*/
pre(fn: ILoaderMiddleware): this
{
@@ -368,9 +337,8 @@ class Loader
/**
* Sets up a middleware function that will run *after* the
* resource is loaded.
- *
* @param fn - The middleware function to register.
- * @return The loader itself.
+ * @returns The loader itself.
*/
use(fn: ILoaderMiddleware): this
{
@@ -381,8 +349,7 @@ class Loader
/**
* Resets the queue of the loader to prepare for a new load.
- *
- * @return The loader itself.
+ * @returns The loader itself.
*/
reset(): this
{
@@ -416,7 +383,7 @@ class Loader
/**
* Starts loading the queued resources.
* @param cb - Optional callback that will be bound to the `complete` event.
- * @return The loader itself.
+ * @returns The loader itself.
*/
load(cb?: Loader.OnCompleteSignal): this
{
@@ -460,7 +427,6 @@ class Loader
/**
* The number of resources to load concurrently.
- *
* @default 10
*/
get concurrency(): number
@@ -475,7 +441,7 @@ class Loader
/**
* Prepares a url for usage based on the configuration of this object
* @param url - The url to prepare.
- * @return The prepared url.
+ * @returns The prepared url.
*/
private _prepareUrl(url: string): string
{
@@ -524,7 +490,6 @@ class Loader
/**
* Loads a single resource.
- *
* @param resource - The resource to load.
* @param dequeue - The function to call when we need to dequeue this item.
*/
@@ -560,9 +525,7 @@ class Loader
);
}
- /**
- * Called once loading has started.
- */
+ /** Called once loading has started. */
private _onStart(): void
{
this.progress = 0;
@@ -570,9 +533,7 @@ class Loader
this.onStart.dispatch(this);
}
- /**
- * Called once each resource has loaded.
- */
+ /** Called once each resource has loaded. */
private _onComplete(): void
{
this.progress = MAX_PROGRESS;
@@ -635,9 +596,7 @@ class Loader
*/
private _protected: boolean;
- /**
- * Destroy the loader, removes references.
- */
+ /** Destroy the loader, removes references. */
public destroy(): void
{
if (!this._protected)
@@ -646,9 +605,7 @@ class Loader
}
}
- /**
- * A premade instance of the loader that can be used to load resources.
- */
+ /** A premade instance of the loader that can be used to load resources. */
public static get shared(): Loader
{
let shared = Loader._shared;
@@ -666,9 +623,8 @@ class Loader
/**
* Adds a Loader plugin for the global shared loader and all
* new Loader instances created.
- *
* @param plugin - The plugin to add
- * @return Reference to PIXI.Loader for chaining
+ * @returns Reference to PIXI.Loader for chaining
*/
public static registerPlugin(plugin: ILoaderPlugin): typeof Loader
{
@@ -766,30 +722,28 @@ export { Loader };
/**
* Plugin to be installed for handling specific Loader resources.
- *
- * @property add - Function to call immediate after registering plugin.
- * @property pre - Middleware function to run before load, the
+ * @property {Function} add - Function to call immediate after registering plugin.
+ * @property {Function} pre - Middleware function to run before load, the
* arguments for this are `(resource, next)`
- * @property use - Middleware function to run after load, the
+ * @property {Function} use - Middleware function to run after load, the
* arguments for this are `(resource, next)`
*/
-export interface ILoaderPlugin {
- /**
- * Function to call immediate after registering plugin.
- */
+export interface ILoaderPlugin
+{
+ /** Function to call immediate after registering plugin. */
add?(): void;
/**
* Middleware function to run before load
- * @param resource - resource
- * @param next - next middleware
+ * @param {LoaderResource} resource - resource
+ * @param {LoaderResource} next - next middleware
*/
pre?(resource: LoaderResource, next: (...args: any[]) => void): void;
/**
* Middleware function to run after load
- * @param resource - resource
- * @param next - next middleware
+ * @param {LoaderResource} resource - resource
+ * @param {LoaderResource} next - next middleware
*/
use?(resource: LoaderResource, next: (...args: any[]) => void): void;
}
diff --git a/packages/loaders/src/LoaderResource.ts b/packages/loaders/src/LoaderResource.ts
index 42b050f71b..b1d64616c9 100644
--- a/packages/loaders/src/LoaderResource.ts
+++ b/packages/loaders/src/LoaderResource.ts
@@ -4,7 +4,7 @@ import { parseUri } from './base/parseUri';
import type { IBaseTextureOptions, Texture } from '@pixi/core';
// tests if CORS is supported in XHR, if not we need to use XDR
-const useXdr = !!((globalThis as any).XDomainRequest && !('withCredentials' in (new XMLHttpRequest())));
+let useXdr: boolean;
let tempAnchor: any = null;
// some status constants
@@ -20,7 +20,6 @@ function _noop(): void { /* empty */ }
/**
* Quick helper to set a value on one of the extension maps. Ensures there is no
* dot at the start of the extension.
- *
* @ignore
* @param map - The map to set on.
* @param extname - The extension (or key) to set.
@@ -43,10 +42,9 @@ function setExtMap(map: Dict, extname: string, val: number)
/**
* Quick helper to get string xhr type.
- *
* @ignore
* @param xhr - The request to check.
- * @return The type.
+ * @returns The type.
*/
function reqType(xhr: XMLHttpRequest)
{
@@ -57,14 +55,11 @@ function reqType(xhr: XMLHttpRequest)
* Metadata for loader resource. It is very messy way to pass options for loader middlewares
*
* Can be extended in `GlobalMixins.IResourceMetadata`
- *
* @memberof PIXI
*/
export interface IResourceMetadata extends GlobalMixins.IResourceMetadata, IBaseTextureOptions
{
- /**
- * The element to use for loading, instead of creating one.
- */
+ /** The element to use for loading, instead of creating one. */
loadElement?: HTMLImageElement | HTMLAudioElement | HTMLVideoElement;
/**
* Skips adding source(s) to the load element. This
@@ -92,7 +87,6 @@ interface LoaderResource extends GlobalMixins.LoaderResource, GlobalMixins.ILoad
* Manages the state and loading of a resource and all child resources.
*
* Can be extended in `GlobalMixins.LoaderResource`.
- *
* @memberof PIXI
*/
class LoaderResource
@@ -103,57 +97,45 @@ class LoaderResource
*/
texture?: Texture;
- /**
- * used by parsing middleware
- */
+ /** used by parsing middleware */
blob?: Blob;
/**
* The name of this resource.
- *
* @readonly
* @type {string}
*/
readonly name: string;
/**
* The url used to load this resource.
- *
* @readonly
* @type {string}
*/
readonly url: string;
/**
* The extension used to load this resource.
- *
* @readonly
* @type {string}
*/
readonly extension: string;
- /**
- * The data that was loaded by the resource.
- */
+ /** The data that was loaded by the resource. */
data: any;
- /**
- * Is this request cross-origin? If unset, determined automatically.
- */
+ /** Is this request cross-origin? If unset, determined automatically. */
crossOrigin: string | boolean;
/**
* A timeout in milliseconds for the load. If the load takes longer than this time
* it is cancelled and the load is considered a failure. If this value is set to `0`
* then there is no explicit timeout.
- *
* @type {number}
*/
timeout: number;
/**
* The method of loading to use for this resource.
- *
* @type {PIXI.LoaderResource.LOAD_TYPE}
*/
loadType: LoaderResource.LOAD_TYPE;
/**
* The type used to load the resource via XHR. If unset, determined automatically.
- *
* @member {string}
*/
xhrType: string;
@@ -163,13 +145,11 @@ class LoaderResource
*
* Note that if you pass in a `loadElement`, the Resource class takes ownership of it.
* Meaning it will modify it as it sees fit.
- *
* @type {PIXI.IResourceMetadata}
*/
metadata: IResourceMetadata;
/**
* The error that occurred while loading (if any).
- *
* @readonly
* @member {Error}
*/
@@ -177,7 +157,6 @@ class LoaderResource
/**
* The XHR object that was used to load this resource. This is only set
* when `loadType` is `LoaderResource.LOAD_TYPE.XHR`.
- *
* @readonly
*/
xhr: XMLHttpRequest;
@@ -185,20 +164,17 @@ class LoaderResource
private xdr: any;
/**
* The child resources this resource owns.
- *
* @type {PIXI.LoaderResource[]}
*/
readonly children: LoaderResource[];
/**
* The resource type.
- *
* @readonly
* @type {PIXI.LoaderResource.TYPE}
*/
type: LoaderResource.TYPE;
/**
* The progress chunk owned by this resource.
- *
* @readonly
* @member {number}
*/
@@ -207,7 +183,6 @@ class LoaderResource
* Dispatched when the resource beings to load.
*
* The callback looks like {@link LoaderResource.OnStartSignal}.
- *
* @type {PIXI.Signal}
*/
onStart: Signal;
@@ -219,7 +194,6 @@ class LoaderResource
* properly sets Content-Length headers, then this will be available.
*
* The callback looks like {@link LoaderResource.OnProgressSignal}.
- *
* @type {PIXI.Signal}
*/
onProgress: Signal;
@@ -228,7 +202,6 @@ class LoaderResource
* be in the `error` property.
*
* The callback looks like {@link LoaderResource.OnCompleteSignal}.
- *
* @type {PIXI.Signal}
*/
onComplete: Signal;
@@ -236,14 +209,12 @@ class LoaderResource
* Dispatched after this resource has had all the *after* middleware run on it.
*
* The callback looks like {@link LoaderResource.OnCompleteSignal}.
- *
* @type {PIXI.Signal}
*/
onAfterMiddleware: Signal;
/**
* The state flags of this resource.
- *
* @private
* @member {number}
*/
@@ -252,56 +223,49 @@ class LoaderResource
/**
* The `dequeue` method that will be used a storage place for the async queue dequeue method
* used privately by the loader.
- *
* @private
- * @member {function}
+ * @member {Function}
*/
_dequeue: any = _noop;
/**
* Used a storage place for the on load binding used privately by the loader.
- *
* @private
- * @member {function}
+ * @member {Function}
*/
_onLoadBinding: any = null;
/**
* The timer for element loads to check if they timeout.
- *
* @private
*/
private _elementTimer = 0;
/**
* The `complete` function bound to this resource's context.
- *
* @private
- * @type {function}
+ * @type {Function}
*/
private _boundComplete: any = null;
/**
* The `_onError` function bound to this resource's context.
- *
* @private
- * @type {function}
+ * @type {Function}
*/
private _boundOnError: any = null;
/**
* The `_onProgress` function bound to this resource's context.
- *
* @private
- * @type {function}
+ * @type {Function}
*/
private _boundOnProgress: any = null;
/**
* The `_onTimeout` function bound to this resource's context.
- *
* @private
- * @type {function}
+ * @type {Function}
*/
private _boundOnTimeout: any = null;
@@ -312,7 +276,6 @@ class LoaderResource
/**
* Sets the load type to be used for a specific extension.
- *
* @static
* @param {string} extname - The extension to set the type for, e.g. "png" or "fnt"
* @param {PIXI.LoaderResource.LOAD_TYPE} loadType - The load type to set it to.
@@ -323,7 +286,6 @@ class LoaderResource
}
/**
* Sets the load type to be used for a specific extension.
- *
* @static
* @param {string} extname - The extension to set the type for, e.g. "png" or "fnt"
* @param {PIXI.LoaderResource.XHR_RESPONSE_TYPE} xhrType - The xhr type to set it to.
@@ -449,27 +411,24 @@ class LoaderResource
/**
* When the resource starts to load.
- *
* @memberof PIXI.LoaderResource
* @callback OnStartSignal
- * @param {Resource} resource - The resource that the event happened on.
+ * @param {PIXI.Resource} resource - The resource that the event happened on.
*/
/**
* When the resource reports loading progress.
- *
* @memberof PIXI.LoaderResource
* @callback OnProgressSignal
- * @param {Resource} resource - The resource that the event happened on.
+ * @param {PIXI.Resource} resource - The resource that the event happened on.
* @param {number} percentage - The progress of the load in the range [0, 1].
*/
/**
* When the resource finishes loading.
- *
* @memberof PIXI.LoaderResource
* @callback OnCompleteSignal
- * @param {Resource} resource - The resource that the event happened on.
+ * @param {PIXI.Resource} resource - The resource that the event happened on.
*/
/**
@@ -486,7 +445,6 @@ class LoaderResource
/**
* Stores whether or not this url is a data url.
- *
* @readonly
* @member {boolean}
*/
@@ -498,7 +456,6 @@ class LoaderResource
/**
* Describes if this resource has finished loading. Is true when the resource has completely
* loaded.
- *
* @readonly
* @member {boolean}
*/
@@ -510,7 +467,6 @@ class LoaderResource
/**
* Describes if this resource is currently loading. Is true when the resource starts loading,
* and is false again when complete.
- *
* @readonly
* @member {boolean}
*/
@@ -519,10 +475,7 @@ class LoaderResource
return this._hasFlag(LoaderResource.STATUS_FLAGS.LOADING);
}
- /**
- * Marks the resource as complete.
- *
- */
+ /** Marks the resource as complete. */
complete(): void
{
this._clearEvents();
@@ -531,7 +484,6 @@ class LoaderResource
/**
* Aborts the loading of this resource, with an optional message.
- *
* @param {string} message - The message to use for the error
*/
abort(message: string): void
@@ -580,7 +532,6 @@ class LoaderResource
/**
* Kicks off loading of this resource. This method is asynchronous.
- *
* @param {PIXI.LoaderResource.OnCompleteSignal} [cb] - Optional callback to call once the resource is loaded.
*/
load(cb?: LoaderResource.OnCompleteSignal): void
@@ -634,6 +585,10 @@ class LoaderResource
case LoaderResource.LOAD_TYPE.XHR:
/* falls through */
default:
+ if (typeof useXdr === 'undefined')
+ {
+ useXdr = !!((globalThis as any).XDomainRequest && !('withCredentials' in (new XMLHttpRequest())));
+ }
if (useXdr && this.crossOrigin)
{
this._loadXdr();
@@ -648,9 +603,8 @@ class LoaderResource
/**
* Checks if the flag is set.
- *
* @param flag - The flag to check.
- * @return True if the flag is set.
+ * @returns True if the flag is set.
*/
private _hasFlag(flag: number): boolean
{
@@ -659,7 +613,6 @@ class LoaderResource
/**
* (Un)Sets the flag.
- *
* @param flag - The flag to (un)set.
* @param value - Whether to set or (un)set the flag.
*/
@@ -668,9 +621,7 @@ class LoaderResource
this._flags = value ? (this._flags | flag) : (this._flags & ~flag);
}
- /**
- * Clears all the events from the underlying loading source.
- */
+ /** Clears all the events from the underlying loading source. */
private _clearEvents(): void
{
clearTimeout(this._elementTimer);
@@ -703,9 +654,7 @@ class LoaderResource
}
}
- /**
- * Finalizes the load.
- */
+ /** Finalizes the load. */
private _finish(): void
{
if (this.isComplete)
@@ -833,9 +782,7 @@ class LoaderResource
}
}
- /**
- * Loads this resources using an XMLHttpRequest.
- */
+ /** Loads this resources using an XMLHttpRequest. */
private _loadXhr(): void
{
// if unset, determine the value
@@ -878,9 +825,7 @@ class LoaderResource
xhr.send();
}
- /**
- * Loads this resources using an XDomainRequest. This is here because we need to support IE9 (gross).
- */
+ /** Loads this resources using an XDomainRequest. This is here because we need to support IE9 (gross). */
private _loadXdr(): void
{
// if unset, determine the value
@@ -915,7 +860,7 @@ class LoaderResource
* @param type - The element type (video or audio).
* @param url - The source URL to load from.
* @param [mime] - The mime type of the video
- * @return The source element.
+ * @returns The source element.
*/
private _createSource(type: string, url: string, mime: string): HTMLSourceElement
{
@@ -934,7 +879,6 @@ class LoaderResource
/**
* Called if a load errors out.
- *
* @param event - The error event from the element that emits it.
*/
private _onError(event: Event): void
@@ -954,17 +898,13 @@ class LoaderResource
}
}
- /**
- * Called if a timeout event fires for an element.
- */
+ /** Called if a timeout event fires for an element. */
private _onTimeout(): void
{
this.abort(`Load timed out.`);
}
- /**
- * Called if an error event fires for xhr/xdr.
- */
+ /** Called if an error event fires for xhr/xdr. */
private _xhrOnError(): void
{
const xhr = this.xhr;
@@ -972,9 +912,7 @@ class LoaderResource
this.abort(`${reqType(xhr)} Request failed. Status: ${xhr.status}, text: "${xhr.statusText}"`);
}
- /**
- * Called if an error event fires for xhr/xdr.
- */
+ /** Called if an error event fires for xhr/xdr. */
private _xhrOnTimeout(): void
{
const xhr = this.xhr;
@@ -982,9 +920,7 @@ class LoaderResource
this.abort(`${reqType(xhr)} Request timed out.`);
}
- /**
- * Called if an abort event fires for xhr/xdr.
- */
+ /** Called if an abort event fires for xhr/xdr. */
private _xhrOnAbort(): void
{
const xhr = this.xhr;
@@ -992,9 +928,7 @@ class LoaderResource
this.abort(`${reqType(xhr)} Request was aborted by the user.`);
}
- /**
- * Called when data successfully loads from an xhr/xdr request.
- */
+ /** Called when data successfully loads from an xhr/xdr request. */
private _xhrOnLoad(): void
{
const xhr = this.xhr;
@@ -1096,7 +1030,7 @@ class LoaderResource
* @private
* @param url - The url to test.
* @param [loc=globalThis.location] - The location object to test against.
- * @return The crossOrigin value to use (or empty string for none).
+ * @returns The crossOrigin value to use (or empty string for none).
*/
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
_determineCrossOrigin(url: string, loc?: any): string
@@ -1144,9 +1078,8 @@ class LoaderResource
/**
* Determines the responseType of an XHR request based on the extension of the
* resource being loaded.
- *
* @private
- * @return {PIXI.LoaderResource.XHR_RESPONSE_TYPE} The responseType to use.
+ * @returns {PIXI.LoaderResource.XHR_RESPONSE_TYPE} The responseType to use.
*/
private _determineXhrType(): LoaderResource.XHR_RESPONSE_TYPE
{
@@ -1156,9 +1089,8 @@ class LoaderResource
/**
* Determines the loadType of a resource based on the extension of the
* resource being loaded.
- *
* @private
- * @return {PIXI.LoaderResource.LOAD_TYPE} The loadType to use.
+ * @returns {PIXI.LoaderResource.LOAD_TYPE} The loadType to use.
*/
private _determineLoadType(): LoaderResource.LOAD_TYPE
{
@@ -1167,9 +1099,8 @@ class LoaderResource
/**
* Extracts the extension (sans '.') of the file being loaded by the resource.
- *
* @param [url] - url to parse, `this.url` by default.
- * @return The extension.
+ * @returns The extension.
*/
private _getExtension(url = this.url): string
{
@@ -1200,10 +1131,9 @@ class LoaderResource
/**
* Determines the mime type of an XHR request based on the responseType of
* resource being loaded.
- *
* @param type - The type to get a mime type for.
* @private
- * @return The mime type to use.
+ * @returns The mime type to use.
*/
_getMimeFromXhrType(type: LoaderResource.XHR_RESPONSE_TYPE): string
{
@@ -1231,86 +1161,87 @@ class LoaderResource
}
// eslint-disable-next-line @typescript-eslint/no-namespace
-namespace LoaderResource {
+namespace LoaderResource
+{
/**
* When the resource starts to load.
- *
* @memberof PIXI.LoaderResource
* @callback OnStartSignal
- * @param {Resource} resource - The resource that the event happened on.
+ * @param {PIXI.Resource} resource - The resource that the event happened on.
*/
export type OnStartSignal = (resource: LoaderResource) => void;
/**
* When the resource reports loading progress.
- *
* @memberof PIXI.LoaderResource
* @callback OnProgressSignal
- * @param {Resource} resource - The resource that the event happened on.
+ * @param {PIXI.Resource} resource - The resource that the event happened on.
* @param {number} percentage - The progress of the load in the range [0, 1].
*/
export type OnProgressSignal = (resource: LoaderResource, percentage: number) => void;
/**
* When the resource finishes loading.
- *
* @memberof PIXI.LoaderResource
* @callback OnCompleteSignal
- * @param {Resource} resource - The resource that the event happened on.
+ * @param {PIXI.Resource} resource - The resource that the event happened on.
*/
export type OnCompleteSignal = (resource: LoaderResource) => void;
/**
* The types of resources a resource could represent.
- *
* @static
* @readonly
* @enum {number}
* @memberof PIXI.LoaderResource
*/
- export enum STATUS_FLAGS {
+ export enum STATUS_FLAGS
+ // eslint-disable-next-line @typescript-eslint/indent
+ {
/** None */
- NONE= 0,
+ NONE = 0,
/** Data URL */
- DATA_URL= (1 << 0),
+ DATA_URL = (1 << 0),
/** Complete */
- COMPLETE= (1 << 1),
+ COMPLETE = (1 << 1),
/** Loading */
- LOADING= (1 << 2),
+ LOADING = (1 << 2),
}
/**
* The types of resources a resource could represent.
- *
* @static
* @readonly
* @enum {number}
* @memberof PIXI.LoaderResource
*/
- export enum TYPE {
+ export enum TYPE
+ // eslint-disable-next-line @typescript-eslint/indent
+ {
/** Unknown */
- UNKNOWN= 0,
+ UNKNOWN = 0,
/** JSON */
- JSON= 1,
+ JSON = 1,
/** XML */
- XML= 2,
+ XML = 2,
/** Image */
- IMAGE= 3,
+ IMAGE = 3,
/** Audio */
- AUDIO= 4,
+ AUDIO = 4,
/** Video */
- VIDEO= 5,
+ VIDEO = 5,
/** Plain text */
- TEXT= 6,
+ TEXT = 6,
}
/**
* The types of loading a resource can use.
- *
* @static
* @readonly
* @enum {number}
* @memberof PIXI.LoaderResource
*/
- export enum LOAD_TYPE {
+ export enum LOAD_TYPE
+ // eslint-disable-next-line @typescript-eslint/indent
+ {
/** Uses XMLHttpRequest to load the resource. */
XHR = 1,
/** Uses an `Image` object to load the resource. */
@@ -1323,13 +1254,14 @@ namespace LoaderResource {
/**
* The XHR ready states, used internally.
- *
* @static
* @readonly
* @enum {string}
* @memberof PIXI.LoaderResource
*/
- export enum XHR_RESPONSE_TYPE {
+ export enum XHR_RESPONSE_TYPE
+ // eslint-disable-next-line @typescript-eslint/indent
+ {
/** string */
DEFAULT = 'text',
/** ArrayBuffer */
diff --git a/packages/loaders/src/TextureLoader.ts b/packages/loaders/src/TextureLoader.ts
index 4c4f9b0901..ff5c621e89 100644
--- a/packages/loaders/src/TextureLoader.ts
+++ b/packages/loaders/src/TextureLoader.ts
@@ -3,14 +3,11 @@ import { LoaderResource } from './LoaderResource';
/**
* Loader plugin for handling Texture resources.
- *
* @memberof PIXI
*/
export class TextureLoader
{
- /**
- * Handle SVG elements a text, render with SVGResource.
- */
+ /** Handle SVG elements a text, render with SVGResource. */
public static add(): void
{
LoaderResource.setExtensionLoadType('svg', LoaderResource.LOAD_TYPE.XHR);
@@ -21,7 +18,7 @@ export class TextureLoader
* Called after a resource is loaded.
* @see PIXI.Loader.loaderMiddleware
* @param resource
- * @param {function} next
+ * @param {Function} next
*/
public static use(resource: LoaderResource, next: (...args: any[]) => void): void
{
diff --git a/packages/loaders/src/base/AsyncQueue.ts b/packages/loaders/src/base/AsyncQueue.ts
index 5a5c582abb..f691c4b3ce 100644
--- a/packages/loaders/src/base/AsyncQueue.ts
+++ b/packages/loaders/src/base/AsyncQueue.ts
@@ -9,8 +9,8 @@ function _noop(): void
/**
* Ensures a function is only called once.
* @ignore
- * @param {function} fn - The function to wrap.
- * @return {function} The wrapping function.
+ * @param {Function} fn - The function to wrap.
+ * @returns {Function} The wrapping function.
*/
function onlyOnce(fn: () => void): () => void
{
@@ -29,7 +29,8 @@ function onlyOnce(fn: () => void): () => void
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IQueue {
+export interface IQueue
+{
}
@@ -43,6 +44,8 @@ export class AsyncQueueItem
callback: (...args: any[]) => void;
/**
+ * @param data
+ * @param callback
* @private
*/
constructor(data: TaskData, callback: (...args: any[]) => void)
@@ -76,6 +79,8 @@ export class AsyncQueue
_tasks: Array> = [];
/**
+ * @param worker
+ * @param concurrency
* @private
*/
constructor(worker: (x: TaskData, next: () => void) => void, concurrency = 1)
@@ -149,6 +154,7 @@ export class AsyncQueue
};
/**
+ * @param task
* @private
*/
_next(task: AsyncQueueItem): (...args: any) => void
@@ -245,10 +251,9 @@ export class AsyncQueue
/**
* Iterates an array in series.
- *
* @param {Array.<*>} array - Array to iterate.
- * @param {function} iterator - Function to call for each element.
- * @param {function} callback - Function to call when done, or on error.
+ * @param {Function} iterator - Function to call for each element.
+ * @param {Function} callback - Function to call when done, or on error.
* @param {boolean} [deferNext=false] - Break synchronous each loop by calling next with a setTimeout of 1.
*/
static eachSeries(array: Array, iterator: (x: any, next: (err?: any) => void) => void,
@@ -287,10 +292,9 @@ export class AsyncQueue
/**
* Async queue implementation,
- *
- * @param {function} worker - The worker function to call for each task.
+ * @param {Function} worker - The worker function to call for each task.
* @param {number} concurrency - How many workers to run in parrallel.
- * @return {*} The async queue object.
+ * @returns {*} The async queue object.
*/
static queue(worker: (x: any, next: (...args: any) => void) => void, concurrency?: number): AsyncQueue
{
diff --git a/packages/loaders/src/base/Signal.ts b/packages/loaders/src/base/Signal.ts
index 4078ee5830..eab49cd408 100644
--- a/packages/loaders/src/base/Signal.ts
+++ b/packages/loaders/src/base/Signal.ts
@@ -16,7 +16,7 @@ export class SignalBinding
* SignalBinding constructor.
* @constructs SignalBinding
* @param {Function} fn - Event handler to be called.
- * @param {Boolean} [once=false] - Should this listener be removed after dispatch
+ * @param {boolean} [once=false] - Should this listener be removed after dispatch
* @param {object} [thisArg] - The context of the callback function.
* @api private
*/
@@ -39,6 +39,8 @@ export class SignalBinding
}
/**
+ * @param self
+ * @param node
* @private
*/
function _addSignalBinding(self: Signal, node: SignalBinding)
@@ -83,9 +85,8 @@ export class Signal void>
/**
* Return an array of attached SignalBinding.
- *
- * @param {Boolean} [exists=false] - We only need to know if there are handlers.
- * @returns {PIXI.SignalBinding[]|Boolean} Array of attached SignalBinding or Boolean if called with exists = true
+ * @param {boolean} [exists=false] - We only need to know if there are handlers.
+ * @returns {PIXI.SignalBinding[] | boolean} Array of attached SignalBinding or Boolean if called with exists = true
* @api public
*/
handlers(exists = false): Array> | boolean
@@ -107,9 +108,8 @@ export class Signal void>
/**
* Return true if node is a SignalBinding attached to this MiniSignal
- *
* @param {PIXI.SignalBinding} node - Node to check.
- * @returns {Boolean} True if node is attache to mini-signal
+ * @returns {boolean} True if node is attache to mini-signal
*/
has(node: SignalBinding): boolean
{
@@ -123,8 +123,8 @@ export class Signal void>
/**
* Dispaches a signal to all registered listeners.
- *
- * @returns {Boolean} Indication if we've emitted an event.
+ * @param {...any} args
+ * @returns {boolean} Indication if we've emitted an event.
*/
dispatch(...args: any[]): boolean
{
@@ -144,7 +144,6 @@ export class Signal void>
/**
* Register a new listener.
- *
* @param {Function} fn - Callback function.
* @param {object} [thisArg] - The context of the callback function.
* @returns {PIXI.SignalBinding} The SignalBinding node that was added.
@@ -161,7 +160,6 @@ export class Signal void>
/**
* Register a new listener that will be executed only once.
- *
* @param {Function} fn - Callback function.
* @param {object} [thisArg] - The context of the callback function.
* @returns {PIXI.SignalBinding} The SignalBinding node that was added.
@@ -178,10 +176,9 @@ export class Signal void>
/**
* Remove binding object.
- *
* @param {PIXI.SignalBinding} node - The binding node that will be removed.
* @returns {Signal} The instance on which this method was called.
- * @api public */
+ @api public */
detach(node: SignalBinding): this
{
if (!(node instanceof SignalBinding))
@@ -214,7 +211,6 @@ export class Signal void>
/**
* Detach all listeners.
- *
* @returns {Signal} The instance on which this method was called.
*/
detachAll(): this
diff --git a/packages/loaders/src/base/encodeBinary.ts b/packages/loaders/src/base/encodeBinary.ts
index 82d43c7f19..8270088fba 100644
--- a/packages/loaders/src/base/encodeBinary.ts
+++ b/packages/loaders/src/base/encodeBinary.ts
@@ -2,7 +2,6 @@ const _keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+
/**
* Encodes binary into base64.
- *
* @function encodeBinary
* @param {string} input - The input data to encode.
* @returns {string} The encoded base64 string
diff --git a/packages/loaders/src/middleware/caching.ts b/packages/loaders/src/middleware/caching.ts
index 22046889d4..106f05426b 100644
--- a/packages/loaders/src/middleware/caching.ts
+++ b/packages/loaders/src/middleware/caching.ts
@@ -6,7 +6,6 @@ const cache: Dict = {};
/**
* A simple in-memory cache for resource.
- *
* @ignore
* @function caching
* @example
diff --git a/packages/loaders/src/middleware/parsing.ts b/packages/loaders/src/middleware/parsing.ts
index 896282751d..79c4e09013 100644
--- a/packages/loaders/src/middleware/parsing.ts
+++ b/packages/loaders/src/middleware/parsing.ts
@@ -1,11 +1,8 @@
import { LoaderResource } from '../LoaderResource';
import { encodeBinary } from '../base/encodeBinary';
-const Url = self.URL || self.webkitURL;
-
/**
* A middleware for transforming XHR loaded Blobs into more useful objects
- *
* @ignore
* @function parsing
* @example
@@ -55,6 +52,7 @@ export function parsing(resource: LoaderResource, next: (...args: any) => void):
// if content type says this is an image, then we should transform the blob into an Image object
else if (resource.data.type.indexOf('image') === 0)
{
+ const Url = globalThis.URL || globalThis.webkitURL;
const src = Url.createObjectURL(resource.data);
resource.blob = resource.data;
diff --git a/packages/loaders/test/AppLoaderPlugin.tests.ts b/packages/loaders/test/AppLoaderPlugin.tests.ts
index fb691a83bd..f8440af539 100644
--- a/packages/loaders/test/AppLoaderPlugin.tests.ts
+++ b/packages/loaders/test/AppLoaderPlugin.tests.ts
@@ -1,11 +1,11 @@
import { AppLoaderPlugin, Loader } from '@pixi/loaders';
import { expect } from 'chai';
-describe('AppLoaderPlugin', function ()
+describe('AppLoaderPlugin', () =>
{
- it('should contain loader property', function ()
+ it('should contain loader property', () =>
{
- const obj = {};
+ const obj = {} as any;
AppLoaderPlugin.init.call(obj);
@@ -17,9 +17,9 @@ describe('AppLoaderPlugin', function ()
expect(obj.loader).to.be.null;
});
- it('should use sharedLoader option', function ()
+ it('should use sharedLoader option', () =>
{
- const obj = {};
+ const obj = {} as any;
AppLoaderPlugin.init.call(obj, { sharedLoader: true });
diff --git a/packages/loaders/test/AsyncQueue.tests.ts b/packages/loaders/test/AsyncQueue.tests.ts
index eb14fdcfbe..1be0e50565 100644
--- a/packages/loaders/test/AsyncQueue.tests.ts
+++ b/packages/loaders/test/AsyncQueue.tests.ts
@@ -296,6 +296,7 @@ describe('async', () =>
expect(() =>
{
+ // @ts-expect-error - testing for error
q.push({}, 1);
}).to.throw();
done();
@@ -660,13 +661,13 @@ describe('async', () =>
]);
done();
};
- q.push();
+ q.push(undefined);
});
it('saturated', (done: () => void) =>
{
let saturatedCalled = false;
- const q = async.queue((task, cb) =>
+ const q = async.queue((_task, cb) =>
{
setTimeout(cb, 1);
}, 2);
@@ -855,7 +856,7 @@ describe('async', () =>
it('empty array', (done: () => void) =>
{
- async.eachSeries([], (x: number, callback: () => void) =>
+ async.eachSeries([], (_x: number, callback: () => void) =>
{
expect(false).to.equal(true, 'iteratee should not be called');
callback();
@@ -875,7 +876,7 @@ describe('async', () =>
{
const arr = [1, 2, 3, 4];
- async.eachSeries(arr, (x, callback) =>
+ async.eachSeries(arr, (_x, callback) =>
{
setTimeout(callback, 1);
}, () =>
@@ -896,7 +897,7 @@ describe('async', () =>
async.eachSeries(
[1],
- (i, cb) =>
+ (_i, cb) =>
{
cb(null);
},
@@ -916,7 +917,7 @@ describe('async', () =>
async.eachSeries(
[1],
- (i, cb) =>
+ (_i, cb) =>
{
cb(null);
},
diff --git a/packages/loaders/test/Loader.tests.ts b/packages/loaders/test/Loader.tests.ts
index ec09541c63..7cfcfa7f99 100644
--- a/packages/loaders/test/Loader.tests.ts
+++ b/packages/loaders/test/Loader.tests.ts
@@ -5,40 +5,44 @@ import { SCALE_MODES } from '@pixi/constants';
import { createServer } from './resources';
import { expect } from 'chai';
+import { Server } from 'http';
const createRandomName = () => `image${(Math.random() * 10000) | 0}`;
-describe('Loader', function ()
+describe('Loader', () =>
{
- before(function ()
+ let server: Server;
+ let baseUrl: string;
+
+ before(() =>
{
- this.server = createServer(8125);
- this.baseUrl = 'http://localhost:8125';
+ server = createServer(8125);
+ baseUrl = 'http://localhost:8125';
});
- after(function ()
+ after(() =>
{
- this.server.close();
- this.server = null;
- this.baseUrl = null;
+ server.close();
+ server = null;
+ baseUrl = null;
});
- it('should exist', function ()
+ it('should exist', () =>
{
expect(Loader).to.be.a('function');
});
- it('should have shared loader', function ()
+ it('should have shared loader', () =>
{
expect(Loader.shared).to.not.be.undefined;
expect(Loader.shared).to.be.instanceof(Loader);
});
- it('should basic load an image using the TextureLoader', function (done)
+ it('should basic load an image using the TextureLoader', (done) =>
{
const loader = new Loader();
const name = createRandomName();
- const url = `${this.baseUrl}/bunny.png`;
+ const url = `${baseUrl}/bunny.png`;
loader.add(name, url);
loader.load((ldr, resources) =>
@@ -46,7 +50,7 @@ describe('Loader', function ()
expect(ldr).equals(loader);
expect(name in resources).to.be.ok;
- const { texture } = resources[name];
+ const texture = resources[name].texture as Texture;
expect(texture).instanceof(Texture);
expect(texture.baseTexture.valid).to.be.true;
@@ -63,11 +67,11 @@ describe('Loader', function ()
});
});
- it('should basic load an SVG using the TextureLoader', function (done)
+ it('should basic load an SVG using the TextureLoader', (done) =>
{
const loader = new Loader();
const name = createRandomName();
- const url = `${this.baseUrl}/logo.svg`;
+ const url = `${baseUrl}/logo.svg`;
loader.add(name, url);
loader.load(() =>
@@ -86,7 +90,7 @@ describe('Loader', function ()
});
});
- it('should allow setting baseTexture properties through metadata', function (done)
+ it('should allow setting baseTexture properties through metadata', (done) =>
{
const loader = new Loader();
const name = createRandomName();
@@ -97,7 +101,7 @@ describe('Loader', function ()
},
};
- loader.add(name, `${this.baseUrl}/bunny.png`, options).load(() =>
+ loader.add(name, `${baseUrl}/bunny.png`, options).load(() =>
{
const { texture } = loader.resources[name];
const { scaleMode, resolution } = texture.baseTexture;
@@ -110,7 +114,7 @@ describe('Loader', function ()
});
});
- it('should allow setting SVG width/height through metadata', function (done)
+ it('should allow setting SVG width/height through metadata', (done) =>
{
const loader = new Loader();
const name = createRandomName();
@@ -123,7 +127,7 @@ describe('Loader', function ()
},
};
- loader.add(name, `${this.baseUrl}/logo.svg`, options).load(() =>
+ loader.add(name, `${baseUrl}/logo.svg`, options).load(() =>
{
const { texture } = loader.resources[name];
const { width, height } = texture.baseTexture;
@@ -136,7 +140,7 @@ describe('Loader', function ()
});
});
- it('should allow setting SVG scale through metadata', function (done)
+ it('should allow setting SVG scale through metadata', (done) =>
{
const loader = new Loader();
const name = createRandomName();
@@ -148,7 +152,7 @@ describe('Loader', function ()
},
};
- loader.add(name, `${this.baseUrl}/logo.svg`, options).load(() =>
+ loader.add(name, `${baseUrl}/logo.svg`, options).load(() =>
{
const { texture } = loader.resources[name];
const { width, height } = texture.baseTexture;
diff --git a/packages/loaders/test/LoaderBase.tests.ts b/packages/loaders/test/LoaderBase.tests.ts
index 7b4be5db49..c0a6db88bb 100644
--- a/packages/loaders/test/LoaderBase.tests.ts
+++ b/packages/loaders/test/LoaderBase.tests.ts
@@ -6,20 +6,21 @@ import { fixtureData } from './fixtures/data';
import { spritesheetMiddleware } from './fixtures/spritesheet';
import { Dict } from '@pixi/utils/src';
import { createServer } from './resources';
+import { Server } from 'http';
describe('Loader', () =>
{
- before(function ()
+ let server: Server;
+
+ before(() =>
{
- this.server = createServer(8126);
- this.baseUrl = 'http://localhost:8126';
+ server = createServer(8126);
});
- after(function ()
+ after(() =>
{
- this.server.close();
- this.server = null;
- this.baseUrl = null;
+ server.close();
+ server = null;
});
let loader: Loader = null;
@@ -27,8 +28,8 @@ describe('Loader', () =>
beforeEach(() =>
{
loader = new Loader(fixtureData.baseUrl);
- loader._beforeMiddleware = [];
- loader._afterMiddleware = [];
+ loader['_beforeMiddleware'] = [];
+ loader['_afterMiddleware'] = [];
});
it('should have correct properties', () =>
@@ -61,9 +62,9 @@ describe('Loader', () =>
{
loader.add(name, fixtureData.url, options, callback);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', name);
@@ -81,9 +82,9 @@ describe('Loader', () =>
{
loader.add(name, fixtureData.url, options);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', name);
@@ -97,9 +98,9 @@ describe('Loader', () =>
{
loader.add(name, fixtureData.url, callback);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', name);
@@ -114,9 +115,9 @@ describe('Loader', () =>
{
loader.add(name, fixtureData.url);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', name);
@@ -127,9 +128,9 @@ describe('Loader', () =>
{
loader.add(fixtureData.url, options, callback);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', fixtureData.url);
@@ -147,9 +148,9 @@ describe('Loader', () =>
{
loader.add(fixtureData.url, options);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', fixtureData.url);
@@ -163,9 +164,9 @@ describe('Loader', () =>
{
loader.add(fixtureData.url, callback);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', fixtureData.url);
@@ -180,9 +181,9 @@ describe('Loader', () =>
{
loader.add(fixtureData.url);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', fixtureData.url);
@@ -193,9 +194,9 @@ describe('Loader', () =>
{
loader.add({ name, url: fixtureData.url }, callback);
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', name);
@@ -210,9 +211,9 @@ describe('Loader', () =>
{
loader.add({ name, url: fixtureData.url, onComplete: callback });
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', name);
@@ -227,9 +228,9 @@ describe('Loader', () =>
{
loader.add({ url: fixtureData.url, onComplete: callback });
- expect(loader._queue.length()).to.equal(1);
+ expect(loader['_queue'].length()).to.equal(1);
- const res = loader._queue._tasks[0].data;
+ const res = loader['_queue']._tasks[0].data;
expect(res).to.be.an.instanceOf(LoaderResource);
expect(res).to.have.property('name', fixtureData.url);
@@ -264,7 +265,7 @@ describe('Loader', () =>
{
loader.pre(() => { /* empty */ });
- expect(loader._beforeMiddleware).to.have.length(1);
+ expect(loader['_beforeMiddleware']).to.have.length(1);
});
});
@@ -274,7 +275,7 @@ describe('Loader', () =>
{
loader.use(() => { /* empty */ });
- expect(loader._afterMiddleware).to.have.length(1);
+ expect(loader['_afterMiddleware']).to.have.length(1);
});
});
@@ -300,13 +301,13 @@ describe('Loader', () =>
it('should reset the queue/buffer of the loader', () =>
{
- loader._queue.push('me');
- expect(loader._queue.length()).to.equal(1);
- expect(loader._queue.started).to.equal(true);
+ loader['_queue'].push('me');
+ expect(loader['_queue'].length()).to.equal(1);
+ expect(loader['_queue'].started).to.equal(true);
loader.reset();
- expect(loader._queue.length()).to.equal(0);
- expect(loader._queue.started).to.equal(false);
+ expect(loader['_queue'].length()).to.equal(0);
+ expect(loader['_queue'].started).to.equal(false);
});
it('should reset the resources of the loader', () =>
@@ -482,10 +483,10 @@ describe('Loader', () =>
const u3 = '//myshare/image.png';
const u4 = '//myshare/image.png?v=1#me';
- expect(loader._prepareUrl(u1)).to.equal(u1);
- expect(loader._prepareUrl(u2)).to.equal(u2);
- expect(loader._prepareUrl(u3)).to.equal(u3);
- expect(loader._prepareUrl(u4)).to.equal(u4);
+ expect(loader['_prepareUrl'](u1)).to.equal(u1);
+ expect(loader['_prepareUrl'](u2)).to.equal(u2);
+ expect(loader['_prepareUrl'](u3)).to.equal(u3);
+ expect(loader['_prepareUrl'](u4)).to.equal(u4);
});
it('should add the baseUrl for relative urls (no trailing slash on baseUrl)', () =>
@@ -496,10 +497,10 @@ describe('Loader', () =>
const u3 = 'image.png?v=1';
const u4 = '/image.png?v=1#me';
- expect(loader._prepareUrl(u1)).to.equal(`${b}/${u1}`);
- expect(loader._prepareUrl(u2)).to.equal(`${b}${u2}`);
- expect(loader._prepareUrl(u3)).to.equal(`${b}/${u3}`);
- expect(loader._prepareUrl(u4)).to.equal(`${b}${u4}`);
+ expect(loader['_prepareUrl'](u1)).to.equal(`${b}/${u1}`);
+ expect(loader['_prepareUrl'](u2)).to.equal(`${b}${u2}`);
+ expect(loader['_prepareUrl'](u3)).to.equal(`${b}/${u3}`);
+ expect(loader['_prepareUrl'](u4)).to.equal(`${b}${u4}`);
});
it('should add the baseUrl for relative urls (yes trailing slash on baseUrl)', () =>
@@ -510,10 +511,10 @@ describe('Loader', () =>
const u3 = 'image.png?v=1';
const u4 = '/image.png?v=1#me';
- expect(loader._prepareUrl(u1)).to.equal(`${b}${u1}`);
- expect(loader._prepareUrl(u2)).to.equal(`${b}${u2}`);
- expect(loader._prepareUrl(u3)).to.equal(`${b}${u3}`);
- expect(loader._prepareUrl(u4)).to.equal(`${b}${u4}`);
+ expect(loader['_prepareUrl'](u1)).to.equal(`${b}${u1}`);
+ expect(loader['_prepareUrl'](u2)).to.equal(`${b}${u2}`);
+ expect(loader['_prepareUrl'](u3)).to.equal(`${b}${u3}`);
+ expect(loader['_prepareUrl'](u4)).to.equal(`${b}${u4}`);
});
it('should add the queryString when set', () =>
@@ -524,10 +525,10 @@ describe('Loader', () =>
loader.defaultQueryString = 'u=me&p=secret';
- expect(loader._prepareUrl(u1))
+ expect(loader['_prepareUrl'](u1))
.to.equal(`${b}/${u1}?${loader.defaultQueryString}`);
- expect(loader._prepareUrl(u2))
+ expect(loader['_prepareUrl'](u2))
.to.equal(`${b}${u2}?${loader.defaultQueryString}`);
});
@@ -539,10 +540,10 @@ describe('Loader', () =>
loader.defaultQueryString = 'u=me&p=secret';
- expect(loader._prepareUrl(u1))
+ expect(loader['_prepareUrl'](u1))
.to.equal(`${b}/${u1}?${loader.defaultQueryString}`);
- expect(loader._prepareUrl(u2))
+ expect(loader['_prepareUrl'](u2))
.to.equal(`${b}${u2}?${loader.defaultQueryString}`);
});
@@ -553,7 +554,7 @@ describe('Loader', () =>
loader.defaultQueryString = 'u=me&p=secret';
- expect(loader._prepareUrl(u1))
+ expect(loader['_prepareUrl'](u1))
.to.equal(`${b}/${u1}&${loader.defaultQueryString}`);
});
@@ -563,7 +564,7 @@ describe('Loader', () =>
loader.defaultQueryString = 'u=me&p=secret';
- expect(loader._prepareUrl('/image.png#me'))
+ expect(loader['_prepareUrl']('/image.png#me'))
.to.equal(`${b}/image.png?${loader.defaultQueryString}#me`);
});
@@ -573,7 +574,7 @@ describe('Loader', () =>
loader.defaultQueryString = 'u=me&p=secret';
- expect(loader._prepareUrl('/image.png?v=1#me'))
+ expect(loader['_prepareUrl']('/image.png?v=1#me'))
.to.equal(`${b}/image.png?v=1&${loader.defaultQueryString}#me`);
});
});
@@ -583,11 +584,11 @@ describe('Loader', () =>
it('should run the before middleware before loading the resource', (done: () => void) =>
{
const spy = sinon.spy();
- const res = {};
+ const res = {} as LoaderResource;
loader.pre(spy);
- loader._loadResource(res, null);
+ loader['_loadResource'](res, null);
setTimeout(() =>
{
@@ -605,7 +606,7 @@ describe('Loader', () =>
res.load = sinon.spy();
- loader._loadResource(res, null);
+ loader['_loadResource'](res, null);
expect(res.load).to.have.been.calledOnce;
});
@@ -622,7 +623,7 @@ describe('Loader', () =>
done();
});
- loader._onStart();
+ loader['_onStart']();
});
});
@@ -638,7 +639,7 @@ describe('Loader', () =>
done();
});
- loader._onComplete();
+ loader['_onComplete']();
});
});
@@ -653,7 +654,7 @@ describe('Loader', () =>
loader.onProgress.once(spy);
- loader._onLoad(res);
+ loader['_onLoad'](res);
expect(spy).to.have.been.calledOnce;
});
@@ -669,7 +670,7 @@ describe('Loader', () =>
loader.onError.once(spy);
- loader._onLoad(res);
+ loader['_onLoad'](res);
expect(spy).to.have.been.calledOnce;
});
@@ -683,7 +684,7 @@ describe('Loader', () =>
loader.onLoad.once(spy);
- loader._onLoad(res);
+ loader['_onLoad'](res);
expect(spy).to.have.been.calledOnce;
});
@@ -697,7 +698,7 @@ describe('Loader', () =>
loader.use(spy);
- loader._onLoad(res);
+ loader['_onLoad'](res);
setTimeout(() =>
{
diff --git a/packages/loaders/test/LoaderResource.test.ts b/packages/loaders/test/LoaderResource.test.ts
index 5881402745..15f48bbd7b 100644
--- a/packages/loaders/test/LoaderResource.test.ts
+++ b/packages/loaders/test/LoaderResource.test.ts
@@ -1,13 +1,13 @@
/* eslint-disable @typescript-eslint/no-unused-expressions */
import sinon from 'sinon';
-import { LoaderResource } from '@pixi/loaders';
+import { IResourceMetadata, LoaderResource } from '@pixi/loaders';
import { expect } from 'chai';
import { fixtureData } from './fixtures/data';
describe('LoaderResource', () =>
{
let request: any;
- let res: LoaderResource;
+ let res: any;
let xhr: any;
let clock: any;
const name = 'test-resource';
@@ -59,7 +59,7 @@ describe('LoaderResource', () =>
crossOrigin: true,
loadType: LoaderResource.LOAD_TYPE.IMAGE,
xhrType: LoaderResource.XHR_RESPONSE_TYPE.BLOB,
- metadata: meta,
+ metadata: meta as IResourceMetadata,
});
expect(res).to.have.property('name', name);
@@ -139,7 +139,7 @@ describe('LoaderResource', () =>
res.xhr.abort = sinon.spy();
- res.abort();
+ res.abort(undefined);
expect(res.xhr.abort).to.have.been.calledOnce;
});
@@ -153,7 +153,7 @@ describe('LoaderResource', () =>
expect(res.data.src).to.equal(fixtureData.url);
- res.abort();
+ res.abort(undefined);
expect(res.data.src).to.equal(LoaderResource.EMPTY_GIF);
});
@@ -165,7 +165,7 @@ describe('LoaderResource', () =>
expect(res.data.firstChild).to.exist;
- res.abort();
+ res.abort(undefined);
expect(res.data.firstChild).to.not.exist;
});
@@ -177,7 +177,7 @@ describe('LoaderResource', () =>
expect(res.data.firstChild).to.exist;
- res.abort();
+ res.abort(undefined);
expect(res.data.firstChild).to.not.exist;
});
@@ -475,7 +475,7 @@ describe('LoaderResource', () =>
xhr.responseText = 'I am loaded resource';
res.xhr = xhr;
- res._xhrOnLoad();
+ res['_xhrOnLoad']();
expect(res.isComplete).to.equal(true);
});
@@ -485,7 +485,7 @@ describe('LoaderResource', () =>
xhr.responseType = LoaderResource.XHR_RESPONSE_TYPE.BUFFER;
res.xhr = xhr;
- res._xhrOnLoad();
+ res['_xhrOnLoad']();
expect(res.isComplete).to.equal(true);
});
@@ -568,35 +568,35 @@ describe('LoaderResource', () =>
it('should return the proper extension', () =>
{
res.url = 'http://www.google.com/image.png';
- expect(res._getExtension()).to.equal('png');
+ expect(res['_getExtension']()).to.equal('png');
res.url = 'http://domain.net/really/deep/path/that/goes/for/a/while/movie.wmv';
- expect(res._getExtension()).to.equal('wmv');
+ expect(res['_getExtension']()).to.equal('wmv');
res.url = 'http://somewhere.io/path.with.dots/and_a-bunch_of.symbols/data.txt';
- expect(res._getExtension()).to.equal('txt');
+ expect(res['_getExtension']()).to.equal('txt');
res.url = 'http://nowhere.me/image.jpg?query=true&string=false&name=real';
- expect(res._getExtension()).to.equal('jpg');
+ expect(res['_getExtension']()).to.equal('jpg');
res.url = 'http://nowhere.me/image.jpeg?query=movie.wmv&file=data.json';
- expect(res._getExtension()).to.equal('jpeg');
+ expect(res['_getExtension']()).to.equal('jpeg');
res.url = 'http://nowhere.me/image.jpeg?query=movie.wmv&file=data.json';
- expect(res._getExtension()).to.equal('jpeg');
+ expect(res['_getExtension']()).to.equal('jpeg');
res.url = 'http://nowhere.me/image.jpeg?query=movie.wmv&file=data.json#/derp.mp3';
- expect(res._getExtension()).to.equal('jpeg');
+ expect(res['_getExtension']()).to.equal('jpeg');
res.url = 'http://nowhere.me/image.jpeg?query=movie.wmv&file=data.json#/derp.mp3&?me=two';
- expect(res._getExtension()).to.equal('jpeg');
+ expect(res['_getExtension']()).to.equal('jpeg');
res.url = 'http://nowhere.me/image.jpeg#nothing-to-see-here?query=movie.wmv&file=data.json#/derp.mp3&?me=two'; // eslint-disable-line max-len
- expect(res._getExtension()).to.equal('jpeg');
+ expect(res['_getExtension']()).to.equal('jpeg');
- res._setFlag(LoaderResource.STATUS_FLAGS.DATA_URL, true);
+ res['_setFlag'](LoaderResource.STATUS_FLAGS.DATA_URL, true);
res.url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='; // eslint-disable-line max-len
- expect(res._getExtension()).to.equal('png');
+ expect(res['_getExtension']()).to.equal('png');
});
});
@@ -605,63 +605,63 @@ describe('LoaderResource', () =>
it('Should return the correct src url', () =>
{
res.url = 'http://www.google.com/audio.mp3';
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
res.url = 'http://domain.net/really/deep/path/that/goes/for/a/while/movie.wmv';
- expect(res._createSource('video', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('video', res.url)).to.have.property('src', res.url);
res.url = 'http://somewhere.io/path.with.dots/and_a-bunch_of.symbols/audio.mp3';
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
res.url = 'http://nowhere.me/audio.mp3?query=true&string=false&name=real';
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
res.url = 'http://nowhere.me/audio.mp3?query=movie.wmv&file=data.json';
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
res.url = 'http://nowhere.me/audio.mp3?query=movie.wmv&file=data.json';
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
res.url = 'http://nowhere.me/audio.mp3?query=movie.wmv&file=data.json#/derp.mp3&?me=two';
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
res.url = 'http://nowhere.me/audio.mp3#nothing-to-see-here?query=movie.wmv&file=data.json#/derp.mp3&?me=two'; // eslint-disable-line max-len
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
- res._setFlag(LoaderResource.STATUS_FLAGS.DATA_URL, true);
+ res['_setFlag'](LoaderResource.STATUS_FLAGS.DATA_URL, true);
res.url = 'data:audio/wave;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA=='; // eslint-disable-line max-len
- expect(res._createSource('audio', res.url)).to.have.property('src', res.url);
+ expect(res['_createSource']('audio', res.url)).to.have.property('src', res.url);
});
it('Should correctly auto-detect the mime type', () =>
{
res.url = 'http://www.google.com/audio.mp3';
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/mp3');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/mp3');
res.url = 'http://domain.net/really/deep/path/that/goes/for/a/while/movie.wmv';
- expect(res._createSource('video', res.url)).to.have.property('type', 'video/wmv');
+ expect(res['_createSource']('video', res.url)).to.have.property('type', 'video/wmv');
res.url = 'http://somewhere.io/path.with.dots/and_a-bunch_of.symbols/audio.mp3';
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/mp3');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/mp3');
res.url = 'http://nowhere.me/audio.mp3?query=true&string=false&name=real';
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/mp3');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/mp3');
res.url = 'http://nowhere.me/audio.mp3?query=movie.wmv&file=data.json';
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/mp3');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/mp3');
res.url = 'http://nowhere.me/audio.mp3?query=movie.wmv&file=data.json';
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/mp3');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/mp3');
res.url = 'http://nowhere.me/audio.mp3?query=movie.wmv&file=data.json#/derp.mp3&?me=two';
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/mp3');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/mp3');
res.url = 'http://nowhere.me/audio.mp3#nothing-to-see-here?query=movie.wmv&file=data.json#/derp.mp3&?me=two'; // eslint-disable-line max-len
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/mp3');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/mp3');
- res._setFlag(LoaderResource.STATUS_FLAGS.DATA_URL, true);
+ res['_setFlag'](LoaderResource.STATUS_FLAGS.DATA_URL, true);
res.url = 'data:audio/wave;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA=='; // eslint-disable-line max-len
- expect(res._createSource('audio', res.url)).to.have.property('type', 'audio/wave');
+ expect(res['_createSource']('audio', res.url)).to.have.property('type', 'audio/wave');
});
});
});
diff --git a/packages/loaders/test/TextureLoader.tests.ts b/packages/loaders/test/TextureLoader.tests.ts
index 3a9dd53ff7..8176b7a6b5 100644
--- a/packages/loaders/test/TextureLoader.tests.ts
+++ b/packages/loaders/test/TextureLoader.tests.ts
@@ -4,18 +4,18 @@ import { BaseTextureCache, TextureCache } from '@pixi/utils';
import sinon from 'sinon';
import { expect } from 'chai';
-describe('TextureLoader', function ()
+describe('TextureLoader', () =>
{
- it('should exist and return a function', function ()
+ it('should exist and return a function', () =>
{
expect(TextureLoader).to.not.be.undefined;
expect(TextureLoader.use).to.be.a('function');
});
- it('should do nothing if the resource is not an image', function ()
+ it('should do nothing if the resource is not an image', () =>
{
const spy = sinon.spy();
- const res = {};
+ const res = {} as LoaderResource;
TextureLoader.use(res, spy);
@@ -23,13 +23,13 @@ describe('TextureLoader', function ()
expect(res.texture).to.be.undefined;
});
- it('should create a texture if resource is an image', function (done)
+ it('should create a texture if resource is an image', (done) =>
{
const name = `${(Math.random() * 10000) | 0}`;
const url = `http://localhost/doesnt_exist/${name}`;
const data = new Image();
const type = LoaderResource.TYPE.IMAGE;
- const res = { url, name, type, data, metadata: {} };
+ const res = { url, name, type, data, metadata: {} } as LoaderResource;
// Transparent image
data.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ'
diff --git a/packages/loaders/test/resources/index.ts b/packages/loaders/test/resources/index.ts
index f8cd47d39c..4159800ed5 100644
--- a/packages/loaders/test/resources/index.ts
+++ b/packages/loaders/test/resources/index.ts
@@ -14,14 +14,15 @@ const mimeTypes = {
/**
* Very HTTP server to requesting files.
+ * @param port
*/
-const createServer = (port) =>
+const createServer = (port: number) =>
{
const server = http.createServer((request, response) =>
{
const filePath = path.join(__dirname, request.url);
const extname = path.extname(filePath);
- const contentType = mimeTypes[extname] || 'text/html';
+ const contentType = mimeTypes[extname as keyof typeof mimeTypes] || 'text/html';
fs.readFile(filePath, (error, content) =>
{
diff --git a/packages/math-extras/global.d.ts b/packages/math-extras/global.d.ts
index 8165d10230..3ecce994ae 100644
--- a/packages/math-extras/global.d.ts
+++ b/packages/math-extras/global.d.ts
@@ -12,21 +12,20 @@ declare namespace GlobalMixins
interface Rectangle
{
- intersects(other: Rectangle): boolean;
+ containsRect(other: import('@pixi/math').Rectangle): boolean;
- containsRect(other: Rectangle): boolean;
+ equals(other: import('@pixi/math').Rectangle): boolean;
- equals(other: Rectangle): boolean;
+ intersection(other: import('@pixi/math').Rectangle): import('@pixi/math').Rectangle;
+ intersection(other: import('@pixi/math').Rectangle, outRect: T): T;
- intersection(other: Rectangle): Rectangle;
- intersection(other: Rectangle, outRect: T): T;
-
- union(other: Rectangle): Rectangle;
- union(other: Rectangle, outRect: T): T;
+ union(other: import('@pixi/math').Rectangle): import('@pixi/math').Rectangle;
+ union(other: import('@pixi/math').Rectangle, outRect: T): T;
}
}
-interface Vector2Math {
+interface Vector2Math
+{
add(other: import('@pixi/math').IPointData): import('@pixi/math').Point;
add(other: import('@pixi/math').IPointData, outPoint: T): T;
diff --git a/packages/math-extras/package.json b/packages/math-extras/package.json
index 583f8c4a45..0ef97c2d97 100644
--- a/packages/math-extras/package.json
+++ b/packages/math-extras/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/math-extras",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/math-extras.js",
"module": "dist/esm/math-extras.js",
"bundle": "dist/browser/math-extras.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/math-extras.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/math-extras.js"
+ }
+ }
+ },
"bundleNoExports": true,
"description": "Useful methods for some math structures",
"author": "Milton Candelero",
@@ -27,6 +40,6 @@
"*.d.ts"
],
"peerDependencies": {
- "@pixi/math": "6.3.0"
+ "@pixi/math": "6.4.2"
}
}
diff --git a/packages/math-extras/src/index.ts b/packages/math-extras/src/index.ts
index 8f086ee214..8405601c7d 100644
--- a/packages/math-extras/src/index.ts
+++ b/packages/math-extras/src/index.ts
@@ -8,7 +8,6 @@ import { IPointData, Point } from '@pixi/math';
* and see if it is less than `Math.EPSILON`.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @param {number} a - First floating number to compare.
* @param {number} b - Second floating number to compare.
* @returns {boolean} Returns `true` if the difference between the values is less than `Math.EPSILON`; otherwise `false`.
@@ -20,7 +19,6 @@ export function floatEqual(a: number, b: number): boolean;
* A good epsilon would be the N% of the largest of the two values or `Math.EPSILON`.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @memberof PIXI
* @param {number} a - First floating number to compare.
* @param {number} b - Second floating number to compare.
@@ -113,7 +111,6 @@ function genericLineIntersection(
* The intersection point may land outside the extents of the lines.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @param aStart - First point of the first line.
* @param aEnd - Second point of the first line.
* @param bStart - First point of the second line.
@@ -127,7 +124,6 @@ export function lineIntersection(aStart: IPointData, aEnd: IPointData, bStart: I
* The intersection point may land outside the extents of the lines.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @memberof PIXI
* @param aStart - First point of the first line.
* @param aEnd - Second point of the first line.
@@ -151,7 +147,6 @@ export function lineIntersection
* The intersection point must land inside the extents of the segments or return a `NaN` Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @param aStart - Starting point of the first segment.
* @param aEnd - Ending point of the first segment.
* @param bStart - Starting point of the second segment.
@@ -165,7 +160,6 @@ export function segmentIntersection(aStart: IPointData, aEnd: IPointData, bStart
* The intersection point must land inside the extents of the segments or return a `NaN` Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @memberof PIXI
* @param aStart - Starting point of the first segment.
* @param aEnd - Ending point of the first segment.
diff --git a/packages/math-extras/src/pointExtras.ts b/packages/math-extras/src/pointExtras.ts
index 1797b10c6b..6704e4063e 100644
--- a/packages/math-extras/src/pointExtras.ts
+++ b/packages/math-extras/src/pointExtras.ts
@@ -5,7 +5,6 @@ const mixins: any = {
* Adds `other` to `this` point and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method add
* @memberof PIXI.Point#
* @param {IPointData} other - The point to add to `this`.
@@ -17,7 +16,6 @@ const mixins: any = {
* Adds `other` to `this` point and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method add
* @memberof PIXI.ObservablePoint#
* @param {IPointData} other - The point to add to `this`.
@@ -41,7 +39,6 @@ const mixins: any = {
* Subtracts `other` from `this` point and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method subtract
* @memberof PIXI.Point#
* @param {IPointData} other - The point to subtract to `this`.
@@ -53,7 +50,6 @@ const mixins: any = {
* Subtracts `other` from `this` point and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method subtract
* @memberof PIXI.ObservablePoint#
* @param {IPointData} other - The point to subtract to `this`.
@@ -77,7 +73,6 @@ const mixins: any = {
* Multiplies component-wise `other` and `this` points and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method multiply
* @memberof PIXI.Point#
* @param {IPointData} other - The point to multiply with `this`.
@@ -89,7 +84,6 @@ const mixins: any = {
* Multiplies component-wise `other` and `this` points and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method multiply
* @memberof PIXI.ObservablePoint#
* @param {IPointData} other - The point to multiply with `this`.
@@ -113,7 +107,6 @@ const mixins: any = {
* Multiplies each component of `this` point with the number `scalar` and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method multiplyScalar
* @memberof PIXI.Point#
* @param {number} scalar - The number to multiply both components of `this`.
@@ -125,7 +118,6 @@ const mixins: any = {
* Multiplies each component of `this` point with the number `scalar` and outputs into `outPoint` or a new Point.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method multiplyScalar
* @memberof PIXI.ObservablePoint#
* @param {number} scalar - The number to multiply both components of `this`.
@@ -150,7 +142,6 @@ const mixins: any = {
* The dot product is the sum of the products of the corresponding components of two vectors.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method dot
* @memberof PIXI.Point#
* @param {IPointData} other - The other point to calculate the dot product with `this`.
@@ -161,7 +152,6 @@ const mixins: any = {
* The dot product is the sum of the products of the corresponding components of two vectors.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method dot
* @memberof PIXI.ObservablePoint#
* @param {IPointData} other - The other point to calculate the dot product with `this`.
@@ -182,7 +172,6 @@ const mixins: any = {
* This function returns the z component of the cross product of the two points.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method cross
* @memberof PIXI.Point#
* @param {IPointData} other - The other point to calculate the cross product with `this`.
@@ -198,7 +187,6 @@ const mixins: any = {
* This function returns the z component of the cross product of the two points.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method cross
* @memberof PIXI.ObservablePoint#
* @param {IPointData} other - The other point to calculate the cross product with `this`.
@@ -224,7 +212,6 @@ const mixins: any = {
* A normalized vector is a vector of magnitude (length) 1
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method normalize
* @memberof PIXI.Point#
* @param {IPointData} [outPoint] - A Point-like object in which to store the value,
@@ -237,7 +224,6 @@ const mixins: any = {
* A normalized vector is a vector of magnitude (length) 1
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method normalize
* @memberof PIXI.ObservablePoint#
* @param {IPointData} [outPoint] - A Point-like object in which to store the value,
@@ -264,7 +250,6 @@ const mixins: any = {
* Defined as the square root of the sum of the squares of each component.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method magnitude
* @memberof PIXI.Point#
* @returns {number} The magnitude (length) of the vector.
@@ -275,7 +260,6 @@ const mixins: any = {
* Defined as the square root of the sum of the squares of each component.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method magnitude
* @memberof PIXI.ObservablePoint#
* @returns {number} The magnitude (length) of the vector.
@@ -293,7 +277,6 @@ const mixins: any = {
* Defined as the sum of the squares of each component.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method magnitudeSquared
* @memberof PIXI.Point#
* @returns {number} The magnitude squared (length squared) of the vector.
@@ -306,7 +289,6 @@ const mixins: any = {
* Defined as the sum of the squares of each component.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method magnitudeSquared
* @memberof PIXI.ObservablePoint#
* @returns {number} The magnitude squared (length squared) of the vector.
@@ -324,7 +306,6 @@ const mixins: any = {
* `this.project(onto)` is the shadow cast by `this` on the line defined by `onto` .
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method project
* @memberof PIXI.Point#
* @param {IPointData} onto - A non zero vector describing a line on which to project `this`.
@@ -340,7 +321,6 @@ const mixins: any = {
* `this.project(onto)` is the shadow cast by `this` on the line defined by `onto` .
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method project
* @memberof PIXI.ObservablePoint#
* @param {IPointData} onto - A non zero vector describing a line on which to project `this`.
@@ -372,7 +352,6 @@ const mixins: any = {
* `this.reflect(normal)` is the reflection of `this` on that mirror.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method reflect
* @memberof PIXI.Point#
* @param {IPointData} normal - The normal vector of your reflecting plane.
@@ -389,7 +368,6 @@ const mixins: any = {
* `this.reflect(normal)` is the reflection of `this` on that mirror.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method reflect
* @memberof PIXI.ObservablePoint#
* @param {IPointData} normal - The normal vector of your reflecting plane.
diff --git a/packages/math-extras/src/rectangleExtras.ts b/packages/math-extras/src/rectangleExtras.ts
index ff0f930503..ac6c6c9e1d 100644
--- a/packages/math-extras/src/rectangleExtras.ts
+++ b/packages/math-extras/src/rectangleExtras.ts
@@ -7,7 +7,6 @@ import { Rectangle } from '@pixi/math';
* not even other arealess rectangles.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method containsRect
* @memberof PIXI.Rectangle#
* @param {Rectangle} other - The Rectangle to fit inside `this`.
@@ -27,7 +26,6 @@ Rectangle.prototype.containsRect = function containsRect(other: Rectangle): bool
* Accepts `other` Rectangle and returns true if the given Rectangle is equal to `this` Rectangle.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method equals
* @memberof PIXI.Rectangle#
* @param {Rectangle} other - The Rectangle to compare with `this`
@@ -51,7 +49,6 @@ Rectangle.prototype.equals = function equals(other: Rectangle): boolean
* and will always return an empty rectangle with its properties set to zero.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method intersection
* @memberof PIXI.Rectangle#
* @param {Rectangle} other - The Rectangle to intersect with `this`.
@@ -99,7 +96,6 @@ Rectangle.prototype.intersection = function intersection(ot
* the horizontal and vertical space between the two rectangles.
*
* _Note: Only available with **@pixi/math-extras**._
- *
* @method union
* @memberof PIXI.Rectangle#
* @param {Rectangle} other - The Rectangle to unite with `this`.
diff --git a/packages/math-extras/test/Point.tests.ts b/packages/math-extras/test/Point.tests.ts
index 1ea093e400..92bfed1eb8 100644
--- a/packages/math-extras/test/Point.tests.ts
+++ b/packages/math-extras/test/Point.tests.ts
@@ -2,11 +2,11 @@ import { ObservablePoint, Point } from '@pixi/math';
import { expect } from 'chai';
import '@pixi/math-extras';
-describe('Point', function ()
+describe('Point', () =>
{
- describe('add', function ()
+ describe('add', () =>
{
- it('should add component-wise', function ()
+ it('should add component-wise', () =>
{
// Point
const a = new Point(1, 2);
@@ -25,7 +25,7 @@ describe('Point', function ()
expect(oc.y).to.equal(6);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const a = new Point(1, 2);
@@ -42,7 +42,7 @@ describe('Point', function ()
expect(oc).to.equal(oa);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
// Point
const a = new Point(1, 2);
@@ -61,7 +61,7 @@ describe('Point', function ()
expect(oc.y).to.equal(6);
});
- it('can take any IPointData as other input', function ()
+ it('can take any IPointData as other input', () =>
{
// Point
const a = new Point(1, 2);
@@ -79,9 +79,9 @@ describe('Point', function ()
});
});
- describe('subtract', function ()
+ describe('subtract', () =>
{
- it('should subtract component-wise', function ()
+ it('should subtract component-wise', () =>
{
// Point
const a = new Point(1, 2);
@@ -100,7 +100,7 @@ describe('Point', function ()
expect(oc.y).to.equal(-2);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const a = new Point(1, 2);
@@ -117,7 +117,7 @@ describe('Point', function ()
expect(oc).to.equal(oa);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
// Point
const a = new Point(1, 2);
@@ -136,7 +136,7 @@ describe('Point', function ()
expect(oc.y).to.equal(-2);
});
- it('can take any IPointData as other input', function ()
+ it('can take any IPointData as other input', () =>
{
// Point
const a = new Point(1, 2);
@@ -154,9 +154,9 @@ describe('Point', function ()
});
});
- describe('multiply', function ()
+ describe('multiply', () =>
{
- it('should multiply component-wise', function ()
+ it('should multiply component-wise', () =>
{
// Point
const a = new Point(1, 2);
@@ -175,7 +175,7 @@ describe('Point', function ()
expect(oc.y).to.equal(8);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const a = new Point(1, 2);
@@ -192,7 +192,7 @@ describe('Point', function ()
expect(oc).to.equal(oa);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
// Point
const a = new Point(1, 2);
@@ -211,7 +211,7 @@ describe('Point', function ()
expect(oc.y).to.equal(8);
});
- it('can take any IPointData as other input', function ()
+ it('can take any IPointData as other input', () =>
{
// Point
const a = new Point(1, 2);
@@ -229,9 +229,9 @@ describe('Point', function ()
});
});
- describe('multiplyScalar', function ()
+ describe('multiplyScalar', () =>
{
- it('should multiply both components by a scalar', function ()
+ it('should multiply both components by a scalar', () =>
{
// Point
const a = new Point(1, 2);
@@ -248,7 +248,7 @@ describe('Point', function ()
expect(oc.y).to.equal(6);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const a = new Point(1, 2);
@@ -263,7 +263,7 @@ describe('Point', function ()
expect(oc).to.equal(oa);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
// Point
const a = new Point(1, 2);
@@ -281,9 +281,9 @@ describe('Point', function ()
});
});
- describe('dot', function ()
+ describe('dot', () =>
{
- it('should multiply component-wise and then add both components', function ()
+ it('should multiply component-wise and then add both components', () =>
{
// Point
const a = new Point(1, 2);
@@ -301,9 +301,9 @@ describe('Point', function ()
});
});
- describe('cross', function ()
+ describe('cross', () =>
{
- it('should return the magnitude of the result of a cross product', function ()
+ it('should return the magnitude of the result of a cross product', () =>
{
// Point
const a = new Point(1, 2);
@@ -321,9 +321,9 @@ describe('Point', function ()
});
});
- describe('normalize', function ()
+ describe('normalize', () =>
{
- it('magnitude should be 1', function ()
+ it('magnitude should be 1', () =>
{
// Point
const a = new Point(3, 4);
@@ -342,7 +342,7 @@ describe('Point', function ()
expect(omagnitude).to.be.closeTo(1, 0.001);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const a = new Point(3, 4);
@@ -357,7 +357,7 @@ describe('Point', function ()
expect(oc).to.equal(oa);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
// Point
const a = new Point(1, 2);
@@ -377,9 +377,9 @@ describe('Point', function ()
});
});
- describe('magnitude', function ()
+ describe('magnitude', () =>
{
- it('should return the square root of the sum of the squares of each component', function ()
+ it('should return the square root of the sum of the squares of each component', () =>
{
const expectedMagnitude = Math.sqrt((3 * 3) + (4 * 4));
// Point
@@ -395,7 +395,7 @@ describe('Point', function ()
expect(oc).to.be.closeTo(expectedMagnitude, 0.001);
});
- it('should return the sum of the squares of each component', function ()
+ it('should return the sum of the squares of each component', () =>
{
const expectedMagnitudeSquared = (3 * 3) + (4 * 4);
// Point
@@ -412,9 +412,9 @@ describe('Point', function ()
});
});
- describe('project', function ()
+ describe('project', () =>
{
- it('should return the vector projection of a vector onto another nonzero vector', function ()
+ it('should return the vector projection of a vector onto another nonzero vector', () =>
{
// Point
const a = new Point(1, 2);
@@ -433,7 +433,7 @@ describe('Point', function ()
expect(oc.y).to.be.closeTo(44 / 25, 0.001);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const a = new Point(1, 2);
@@ -450,7 +450,7 @@ describe('Point', function ()
expect(oc).to.equal(oa);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
// Point
const a = new Point(1, 2);
@@ -469,7 +469,7 @@ describe('Point', function ()
expect(oc.y).to.be.closeTo(44 / 25, 0.001);
});
- it('can take any IPointData as other input', function ()
+ it('can take any IPointData as other input', () =>
{
// Point
const a = new Point(1, 2);
@@ -487,9 +487,9 @@ describe('Point', function ()
});
});
- describe('reflect', function ()
+ describe('reflect', () =>
{
- it('should return the specular reflect vector', function ()
+ it('should return the specular reflect vector', () =>
{
// Point
const a = new Point(1, 2);
@@ -508,7 +508,7 @@ describe('Point', function ()
expect(oc.y).to.equal(-86);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const a = new Point(1, 2);
@@ -525,7 +525,7 @@ describe('Point', function ()
expect(oc).to.equal(oa);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
// Point
const a = new Point(1, 2);
@@ -544,7 +544,7 @@ describe('Point', function ()
expect(oc.y).to.equal(-86);
});
- it('can take any IPointData as other input', function ()
+ it('can take any IPointData as other input', () =>
{
// Point
const a = new Point(1, 2);
diff --git a/packages/math-extras/test/Rectangle.tests.ts b/packages/math-extras/test/Rectangle.tests.ts
index 76de6039c6..082ad5eecc 100644
--- a/packages/math-extras/test/Rectangle.tests.ts
+++ b/packages/math-extras/test/Rectangle.tests.ts
@@ -2,11 +2,11 @@ import { Rectangle } from '@pixi/math';
import { expect } from 'chai';
import '@pixi/math-extras';
-describe('Rectangle', function ()
+describe('Rectangle', () =>
{
- describe('containsRect', function ()
+ describe('containsRect', () =>
{
- it('should return true if all four corners are inside or on the edge of the rectangle', function ()
+ it('should return true if all four corners are inside or on the edge of the rectangle', () =>
{
/*
+-----------------+-----------------+
@@ -45,9 +45,9 @@ describe('Rectangle', function ()
});
});
- describe('equals', function ()
+ describe('equals', () =>
{
- it('should return true x, y, width and height match', function ()
+ it('should return true x, y, width and height match', () =>
{
const a = new Rectangle(0, 0, 100, 100);
const b = new Rectangle(0, 0, 100, 100);
@@ -67,10 +67,10 @@ describe('Rectangle', function ()
expect(c.equals(c.clone())).to.equal(true);
});
});
- describe('intersection', function ()
+ describe('intersection', () =>
{
it('should return a rectangle with the intersection if the area is > 0, otherwise an empty rectangle',
- function ()
+ () =>
{
/*
+--------+
@@ -120,7 +120,7 @@ describe('Rectangle', function ()
expect(emptyIntersectsItself.height).to.equal(0);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
const a = new Rectangle(0, 0, 100, 100);
const b = new Rectangle(50, 50, 100, 100);
@@ -130,10 +130,10 @@ describe('Rectangle', function ()
});
});
- describe('union', function ()
+ describe('union', () =>
{
it('should return a rectangle that includes both rectangles (similar to enlarge)',
- function ()
+ () =>
{
const a = new Rectangle(0, 0, 100, 100);
const b = new Rectangle(50, 50, 100, 100);
@@ -145,7 +145,7 @@ describe('Rectangle', function ()
expect(c.height).to.equal(150);
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
const a = new Rectangle(0, 0, 100, 100);
const b = new Rectangle(50, 50, 100, 100);
@@ -155,7 +155,7 @@ describe('Rectangle', function ()
});
it('should return the same values as enalrge()',
- function ()
+ () =>
{
const enlarged = new Rectangle(0, 0, 100, 100);
const a = new Rectangle(0, 0, 100, 100);
diff --git a/packages/math-extras/test/floatEqual.tests.ts b/packages/math-extras/test/floatEqual.tests.ts
index 89c1d92f43..9726c29ce1 100644
--- a/packages/math-extras/test/floatEqual.tests.ts
+++ b/packages/math-extras/test/floatEqual.tests.ts
@@ -1,10 +1,10 @@
import { expect } from 'chai';
import { floatEqual } from '@pixi/math-extras';
-describe('floatEqual', function ()
+describe('floatEqual', () =>
{
it('should return true if the difference between values is less than epsilon',
- function ()
+ () =>
{
// 0.1 + 0.2 = 0.3 is the common floating point pitfall.
expect(floatEqual(0.1 + 0.2, 0.3)).to.equal(true);
diff --git a/packages/math-extras/test/lineIntersection.tests.ts b/packages/math-extras/test/lineIntersection.tests.ts
index 4f90b40fd3..41061be073 100644
--- a/packages/math-extras/test/lineIntersection.tests.ts
+++ b/packages/math-extras/test/lineIntersection.tests.ts
@@ -2,10 +2,10 @@ import { Point } from '@pixi/math';
import { lineIntersection } from '@pixi/math-extras';
import { expect } from 'chai';
-describe('lineIntersection', function ()
+describe('lineIntersection', () =>
{
it('should return the point where the lines intersect',
- function ()
+ () =>
{
const aStart = new Point(1, 2);
const aEnd = new Point(3, 4);
@@ -19,7 +19,7 @@ describe('lineIntersection', function ()
});
it('should return NaN if the lines are parallel',
- function ()
+ () =>
{
const aStart = new Point(1, 2);
const aEnd = new Point(3, 4);
@@ -31,7 +31,7 @@ describe('lineIntersection', function ()
expect(parallel.x).to.be.NaN;
expect(parallel.y).to.be.NaN;
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const aStart = new Point(1, 2);
@@ -44,7 +44,7 @@ describe('lineIntersection', function ()
expect(intersect).to.equal(outValue);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
const aStart = new Point(1, 2);
const aEnd = new Point(3, 4);
@@ -58,7 +58,7 @@ describe('lineIntersection', function ()
expect(outValue.y).to.equal(7.25);
});
- it('can take any IPointData as input', function ()
+ it('can take any IPointData as input', () =>
{
const aStart = { x: 1, y: 2 };
const aEnd = { x: 3, y: 4 };
diff --git a/packages/math-extras/test/segmentIntersection.tests.ts b/packages/math-extras/test/segmentIntersection.tests.ts
index 2df1fdb6a9..a805748fc2 100644
--- a/packages/math-extras/test/segmentIntersection.tests.ts
+++ b/packages/math-extras/test/segmentIntersection.tests.ts
@@ -2,10 +2,10 @@ import { Point } from '@pixi/math';
import { expect } from 'chai';
import { segmentIntersection } from '@pixi/math-extras';
-describe('segmentIntersection', function ()
+describe('segmentIntersection', () =>
{
it('should return the point where the segments intersect',
- function ()
+ () =>
{
const aStart = new Point(1, 2);
const aEnd = new Point(11, 12);
@@ -19,7 +19,7 @@ describe('segmentIntersection', function ()
});
it('should return NaN if the segments are parallel',
- function ()
+ () =>
{
const aStart = new Point(1, 2);
const aEnd = new Point(11, 12);
@@ -32,7 +32,7 @@ describe('segmentIntersection', function ()
expect(parallel.y).to.be.NaN;
});
it('should return NaN if the segments dont intersect',
- function ()
+ () =>
{
const aStart = new Point(1, 2);
const aEnd = new Point(3, 4);
@@ -44,7 +44,7 @@ describe('segmentIntersection', function ()
expect(parallel.x).to.be.NaN;
expect(parallel.y).to.be.NaN;
});
- it('should return the same reference given', function ()
+ it('should return the same reference given', () =>
{
// Point
const aStart = new Point(1, 2);
@@ -57,7 +57,7 @@ describe('segmentIntersection', function ()
expect(intersect).to.equal(outValue);
});
- it('can output into any IPointData given', function ()
+ it('can output into any IPointData given', () =>
{
const aStart = new Point(1, 2);
const aEnd = new Point(11, 12);
@@ -71,7 +71,7 @@ describe('segmentIntersection', function ()
expect(outValue.y).to.equal(7.25);
});
- it('can take any IPointData as input', function ()
+ it('can take any IPointData as input', () =>
{
const aStart = { x: 1, y: 2 };
const aEnd = { x: 11, y: 12 };
diff --git a/packages/math/package.json b/packages/math/package.json
index bd4d4fe3a0..d15f79f8ab 100644
--- a/packages/math/package.json
+++ b/packages/math/package.json
@@ -1,9 +1,22 @@
{
"name": "@pixi/math",
- "version": "6.3.0",
+ "version": "6.4.2",
"main": "dist/cjs/math.js",
"module": "dist/esm/math.js",
"bundle": "dist/browser/math.js",
+ "types": "index.d.ts",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./index.d.ts",
+ "default": "./dist/esm/math.js"
+ },
+ "require": {
+ "types": "./index.d.ts",
+ "default": "./dist/cjs/math.js"
+ }
+ }
+ },
"description": "Collection of math utilities",
"author": "Mat Groves",
"contributors": [
diff --git a/packages/math/src/IPoint.ts b/packages/math/src/IPoint.ts
index 58900332c5..939ee623ed 100644
--- a/packages/math/src/IPoint.ts
+++ b/packages/math/src/IPoint.ts
@@ -17,7 +17,6 @@ export interface IPoint extends IPointData
/**
* Sets the point to a new x and y position.
* If y is omitted, both x and y will be set to x.
- *
* @method set
* @memberof PIXI.IPoint#
* @param {number} [x=0] - position of the point on the x axis
@@ -42,7 +41,6 @@ export interface IPoint extends IPointData
/**
* Returns true if the given point is equal to this point
- *
* @method equals
* @memberof PIXI.IPoint#
* @param {PIXI.IPointData} p - The point to check
diff --git a/packages/math/src/Matrix.ts b/packages/math/src/Matrix.ts
index 2301c8ddc4..0505720578 100644
--- a/packages/math/src/Matrix.ts
+++ b/packages/math/src/Matrix.ts
@@ -13,7 +13,6 @@ import type { IPointData } from './IPointData';
* | b | d | ty|
* | 0 | 0 | 1 |
* ```
- *
* @memberof PIXI
*/
export class Matrix
@@ -36,7 +35,7 @@ export class Matrix
/** @default 0 */
public ty: number;
- public array: Float32Array|null = null;
+ public array: Float32Array | null = null;
/**
* @param a - x scale
@@ -65,7 +64,6 @@ export class Matrix
* d = array[4]
* tx = array[2]
* ty = array[5]
- *
* @param array - The array that the matrix will be populated from.
*/
fromArray(array: number[]): void
@@ -80,14 +78,13 @@ export class Matrix
/**
* Sets the matrix properties.
- *
* @param a - Matrix component
* @param b - Matrix component
* @param c - Matrix component
* @param d - Matrix component
* @param tx - Matrix component
* @param ty - Matrix component
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
set(a: number, b: number, c: number, d: number, tx: number, ty: number): this
{
@@ -103,10 +100,9 @@ export class Matrix
/**
* Creates an array from the current Matrix object.
- *
* @param transpose - Whether we need to transpose the matrix or not
* @param [out=new Float32Array(9)] - If provided the array will be assigned to out
- * @return The newly created array which contains the matrix
+ * @returns The newly created array which contains the matrix
*/
toArray(transpose: boolean, out?: Float32Array): Float32Array
{
@@ -148,10 +144,9 @@ export class Matrix
/**
* Get a new position with the current transformation applied.
* Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering)
- *
* @param pos - The origin
* @param {PIXI.Point} [newPos] - The point that the new position is assigned to (allowed to be same as input)
- * @return {PIXI.Point} The new point, transformed through this matrix
+ * @returns {PIXI.Point} The new point, transformed through this matrix
*/
apply(pos: IPointData, newPos?: P): P
{
@@ -169,10 +164,9 @@ export class Matrix
/**
* Get a new position with the inverse of the current transformation applied.
* Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input)
- *
* @param pos - The origin
* @param {PIXI.Point} [newPos] - The point that the new position is assigned to (allowed to be same as input)
- * @return {PIXI.Point} The new point, inverse-transformed through this matrix
+ * @returns {PIXI.Point} The new point, inverse-transformed through this matrix
*/
applyInverse
(pos: IPointData, newPos?: P): P
{
@@ -191,10 +185,9 @@ export class Matrix
/**
* Translates the matrix on the x and y.
- *
* @param x - How much to translate x by
* @param y - How much to translate y by
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
translate(x: number, y: number): this
{
@@ -206,10 +199,9 @@ export class Matrix
/**
* Applies a scale transformation to the matrix.
- *
* @param x - The amount to scale horizontally
* @param y - The amount to scale vertically
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
scale(x: number, y: number): this
{
@@ -225,9 +217,8 @@ export class Matrix
/**
* Applies a rotation transformation to the matrix.
- *
* @param angle - The angle in radians.
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
rotate(angle: number): this
{
@@ -250,9 +241,8 @@ export class Matrix
/**
* Appends the given Matrix to this Matrix.
- *
* @param matrix - The matrix to append.
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
append(matrix: Matrix): this
{
@@ -274,7 +264,6 @@ export class Matrix
/**
* Sets the matrix based on all the available properties
- *
* @param x - Position on the x axis
* @param y - Position on the y axis
* @param pivotX - Pivot on the x axis
@@ -284,7 +273,7 @@ export class Matrix
* @param rotation - Rotation in radians
* @param skewX - Skew on the x axis
* @param skewY - Skew on the y axis
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
setTransform(x: number, y: number, pivotX: number, pivotY: number, scaleX: number,
scaleY: number, rotation: number, skewX: number, skewY: number): this
@@ -302,9 +291,8 @@ export class Matrix
/**
* Prepends the given Matrix to this Matrix.
- *
* @param matrix - The matrix to prepend
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
prepend(matrix: Matrix): this
{
@@ -329,9 +317,8 @@ export class Matrix
/**
* Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform.
- *
* @param transform - The transform to apply the properties to.
- * @return The transform with the newly applied properties
+ * @returns The transform with the newly applied properties
*/
decompose(transform: Transform): Transform
{
@@ -372,8 +359,7 @@ export class Matrix
/**
* Inverts this matrix
- *
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
invert(): this
{
@@ -396,8 +382,7 @@ export class Matrix
/**
* Resets this Matrix to an identity (default) matrix.
- *
- * @return This matrix. Good for chaining method calls.
+ * @returns This matrix. Good for chaining method calls.
*/
identity(): this
{
@@ -413,8 +398,7 @@ export class Matrix
/**
* Creates a new Matrix object with the same values as this one.
- *
- * @return A copy of this matrix. Good for chaining method calls.
+ * @returns A copy of this matrix. Good for chaining method calls.
*/
clone(): Matrix
{
@@ -432,9 +416,8 @@ export class Matrix
/**
* Changes the values of the given matrix to be the same as the ones in this matrix
- *
* @param matrix - The matrix to copy to.
- * @return The matrix given in parameter with its values updated.
+ * @returns The matrix given in parameter with its values updated.
*/
copyTo(matrix: Matrix): Matrix
{
@@ -450,9 +433,8 @@ export class Matrix
/**
* Changes the values of the matrix to be the same as the ones in given matrix
- *
* @param {PIXI.Matrix} matrix - The matrix to copy from.
- * @return {PIXI.Matrix} this
+ * @returns {PIXI.Matrix} this
*/
copyFrom(matrix: Matrix): this
{
@@ -475,7 +457,6 @@ export class Matrix
/**
* A default (identity) matrix
- *
* @readonly
*/
static get IDENTITY(): Matrix
@@ -485,7 +466,6 @@ export class Matrix
/**
* A temp matrix
- *
* @readonly
*/
static get TEMP_MATRIX(): Matrix
diff --git a/packages/math/src/ObservablePoint.ts b/packages/math/src/ObservablePoint.ts
index e8c9bb7beb..1943eb5dfb 100644
--- a/packages/math/src/ObservablePoint.ts
+++ b/packages/math/src/ObservablePoint.ts
@@ -8,7 +8,6 @@ export interface ObservablePoint extends GlobalMixins.Point, IPoint {}
* the position on the horizontal axis and `y` represents the position on the vertical axis.
*
* An `ObservablePoint` is a point that triggers a callback when the point's position is changed.
- *
* @memberof PIXI
*/
export class ObservablePoint implements IPoint
@@ -24,12 +23,11 @@ export class ObservablePoint implements IPoint
/**
* Creates a new `ObservablePoint`
- *
* @param cb - callback function triggered when `x` and/or `y` are changed
* @param scope - owner of callback
* @param {number} [x=0] - position of the point on the x axis
* @param {number} [y=0] - position of the point on the y axis
- */
+ */
constructor(cb: (this: T) => any, scope: T, x = 0, y = 0)
{
this._x = x;
@@ -43,11 +41,10 @@ export class ObservablePoint