diff --git a/src/PixiPropertyOperations.js b/src/PixiPropertyOperations.js index 93d6909..3558287 100644 --- a/src/PixiPropertyOperations.js +++ b/src/PixiPropertyOperations.js @@ -1,6 +1,6 @@ // Based on: https://github.com/facebook/react/blob/27535e7bfcb63e8a4d65f273311e380b4ca12eff/packages/react-dom/src/client/DOMPropertyOperations.js import { getPropertyInfo, shouldIgnoreAttribute, shouldRemoveAttribute } from "./PixiProperty"; -import { DEFAULT_PROPS } from "./props"; +import { defaultProps } from "./props"; import { setPixiValue } from "./utils"; /** @@ -19,7 +19,8 @@ export function setValueForProperty(type, instance, propName, value) { } if (shouldRemoveAttribute(type, propName, value, propertyInfo)) { // Try to reset to property to default value (if it is defined) - const defaultValue = DEFAULT_PROPS[propName]; + const defaultValues = defaultProps[type]; + const defaultValue = typeof defaultValues !== "undefined" ? defaultValues[propName] : undefined; if (typeof defaultValue !== "undefined") { value = defaultValue; } else { diff --git a/src/props.js b/src/props.js index e35925d..06dbee0 100644 --- a/src/props.js +++ b/src/props.js @@ -1,63 +1,95 @@ +import { TYPES } from "./types"; +import * as PIXI from "pixi.js"; + export const CHILDREN = "children"; -// List of default values for DisplayObject members -// TODO set different default props for different types -export const DEFAULT_PROPS = { +// http://pixijs.download/release/docs/PIXI.DisplayObject.html +const displayObjectDefaultProps = { alpha: 1, - anchor: 0, + angle: 0, buttonMode: false, cacheAsBitmap: false, cursor: "auto", - filterArea: null, - filters: null, - hitArea: null, interactive: false, - // localTransform // readonly - mask: null, - // parent // readonly pivot: 0, position: 0, renderable: true, rotation: 0, scale: 1, skew: 0, - tint: 0xffffff, - transform: null, visible: true, - // worldAlpha // readonly - // worldTransform // readonly - // worldVisible // readonly x: 0, y: 0, }; -// List of all Pixi events -export const EVENT_PROPS = [ - "added", - "click", - "mousedown", - "mousemove", - "mouseout", - "mouseover", - "mouseup", - "mouseupoutside", - "pointercancel", - "pointerdown", - "pointermove", - "pointerout", - "pointerover", - "pointertap", - "pointerup", - "pointerupoutside", - "removed", - "rightclick", - "rightdown", - "rightup", - "rightupoutside", - "tap", - "touchcancel", - "touchend", - "touchendoutside", - "touchmove", - "touchstart", -]; +// http://pixijs.download/release/docs/PIXI.Container.html +const containerDefaultProps = { + ...displayObjectDefaultProps, + interactiveChildren: true, +}; + +// http://pixijs.download/release/docs/PIXI.Sprite.html +const spriteDefaultProps = { + ...containerDefaultProps, + anchor: 0, + blendMode: PIXI.BLEND_MODES.NORMAL, + pluginName: "batch", + roundPixels: false, + tint: 0xffffff, +}; + +// http://pixijs.download/release/docs/PIXI.extras.BitmapText.html +const bitmapTextDefaultProps = { + ...containerDefaultProps, + align: "left", + anchor: 0, + letterSpacing: 0, + maxWidth: 0, + roundPixels: false, + text: "", + tint: 0xffffff, +}; + +// http://pixijs.download/release/docs/PIXI.Graphics.html +const graphicsDefaultProps = { + ...containerDefaultProps, + blendMode: PIXI.BLEND_MODES.NORMAL, + pluginName: "batch", + tint: 0xffffff, +}; + +// http://pixijs.download/release/docs/PIXI.particles.ParticleContainer.html +const particleContainerDefaultProps = { + ...containerDefaultProps, + autoResize: false, + batchSize: 16384, + blendMode: PIXI.BLEND_MODES.NORMAL, + interactiveChildren: true, + maxSize: 1500, + roundPixels: true, + tint: 0xffffff, +}; + +// http://pixijs.download/release/docs/PIXI.Text.html +const textDefaultProps = { + ...spriteDefaultProps, + resolution: 1, + text: "", +}; + +// http://pixijs.download/release/docs/PIXI.extras.TilingSprite.html +const tilingSpriteDefaultProps = { + ...spriteDefaultProps, + clampMargin: 0.5, + uvRespectAnchor: false, +}; + +export const defaultProps = { + [TYPES.BITMAP_TEXT]: bitmapTextDefaultProps, + [TYPES.CONTAINER]: containerDefaultProps, + [TYPES.GRAPHICS]: graphicsDefaultProps, + [TYPES.PARTICLE_CONTAINER]: particleContainerDefaultProps, + [TYPES.SPRITE]: spriteDefaultProps, + [TYPES.TEXT]: textDefaultProps, + [TYPES.TILING_SPRITE]: tilingSpriteDefaultProps, +}; diff --git a/test/PixiPropertyOperations.test.js b/test/PixiPropertyOperations.test.js index de97f56..ac0a7fb 100644 --- a/test/PixiPropertyOperations.test.js +++ b/test/PixiPropertyOperations.test.js @@ -3,10 +3,7 @@ import { __RewireAPI__ as PixiPropertyOperationsRewireAPI } from "../src/PixiPro describe("PixiPropertyOperations", () => { describe("setValueForProperty", () => { - const type = "type"; const instance = {}; - const propName = "prop"; - const value = "value"; const setPixiValue = jest.fn(); const shouldIgnoreAttribute = jest.fn(() => false); const shouldRemoveAttribute = jest.fn(() => false); @@ -31,29 +28,43 @@ describe("PixiPropertyOperations", () => { it("should not call setPixiValue if property should be ignored", () => { shouldIgnoreAttribute.mockImplementation(() => true); - PixiPropertyOperations.setValueForProperty(type, instance, propName, value); + PixiPropertyOperations.setValueForProperty("Sprite", instance, "ignoredProp", "unsetValue"); expect(setPixiValue).toHaveBeenCalledTimes(0); }); it("should call setPixiValue with default value if property should be removed and default is available", () => { - const propName = "alpha"; + const type = "Sprite"; + const propName = "roundPixels"; shouldRemoveAttribute.mockImplementation(() => true); - PixiPropertyOperations.setValueForProperty(type, instance, propName, value); + PixiPropertyOperations.setValueForProperty(type, instance, propName, undefined); expect(setPixiValue).toHaveBeenCalledTimes(1); - expect(setPixiValue).toHaveBeenCalledWith(instance, propName, 1); + expect(setPixiValue).toHaveBeenCalledWith(instance, propName, false); }); it("should call setPixiValue with null value if property should be removed and default is not available", () => { + const type = "Sprite"; + const propName = "unknownProp"; shouldRemoveAttribute.mockImplementation(() => true); - PixiPropertyOperations.setValueForProperty(type, instance, propName, value); + PixiPropertyOperations.setValueForProperty(type, instance, propName, undefined); + expect(setPixiValue).toHaveBeenCalledTimes(1); + expect(setPixiValue).toHaveBeenCalledWith(instance, propName, null); + }); + + it("should call setPixiValue with null value if property should be removed and defaults are not available", () => { + const type = "UnknownType"; + const propName = "unknownProp"; + shouldRemoveAttribute.mockImplementation(() => true); + PixiPropertyOperations.setValueForProperty(type, instance, propName, undefined); expect(setPixiValue).toHaveBeenCalledTimes(1); expect(setPixiValue).toHaveBeenCalledWith(instance, propName, null); }); it("should call setPixiValue with provided value if property should not be removed", () => { - PixiPropertyOperations.setValueForProperty(type, instance, propName, value); + const type = "Sprite"; + const propName = "roundPixels"; + PixiPropertyOperations.setValueForProperty(type, instance, propName, true); expect(setPixiValue).toHaveBeenCalledTimes(1); - expect(setPixiValue).toHaveBeenCalledWith(instance, propName, value); + expect(setPixiValue).toHaveBeenCalledWith(instance, propName, true); }); }); }); diff --git a/test/Stage/propTypes.test.js b/test/Stage/propTypes.test.js index 11a5225..d289c8b 100644 --- a/test/Stage/propTypes.test.js +++ b/test/Stage/propTypes.test.js @@ -8,7 +8,6 @@ import { includingStageProps, } from "../../src/Stage/propTypes"; import possibleStandardNames from "../../src/possibleStandardNames"; -import { EVENT_PROPS } from "../../src/props"; import { TYPES } from "../../src/types"; describe("includingContainerProps", () => { @@ -18,12 +17,6 @@ describe("includingContainerProps", () => { }); }); - it("returns true if prop is one of Container events", () => { - EVENT_PROPS.forEach(propName => { - expect(includingContainerProps(propName)).toBeTruthy(); - }); - }); - it("returns false if prop is not one of Container members", () => { expect(includingContainerProps("className")).toBeFalsy(); expect(includingContainerProps("style")).toBeFalsy(); diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap new file mode 100644 index 0000000..9ac9fb4 --- /dev/null +++ b/test/__snapshots__/index.test.js.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ReactPixiFiber public API should match snapshot 1`] = ` +Object { + "AppContext": Object { + "$$typeof": Symbol(react.context), + "Consumer": Object { + "$$typeof": Symbol(react.context), + "_calculateChangedBits": null, + "_context": [Circular], + }, + "Provider": Object { + "$$typeof": Symbol(react.provider), + "_context": [Circular], + }, + "_calculateChangedBits": null, + "_currentRenderer": null, + "_currentRenderer2": null, + "_currentValue": null, + "_currentValue2": null, + "_threadCount": 0, + }, + "AppProvider": [Function], + "BitmapText": "BitmapText", + "Container": "Container", + "CustomPIXIComponent": [Function], + "Graphics": "Graphics", + "ParticleContainer": "ParticleContainer", + "Sprite": "Sprite", + "Stage": [Function], + "Text": "Text", + "TilingSprite": "TilingSprite", + "applyDisplayObjectProps": [Function], + "createStageClass": [Function], + "default": Object {}, + "render": [Function], + "unmount": [Function], + "unstable_batchedUpdates": [Function], + "usePixiApp": [Function], + "usePixiTicker": [Function], + "withApp": [Function], +} +`; diff --git a/test/__snapshots__/props.test.js.snap b/test/__snapshots__/props.test.js.snap new file mode 100644 index 0000000..11c7610 --- /dev/null +++ b/test/__snapshots__/props.test.js.snap @@ -0,0 +1,167 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props defaultProps should match 1`] = ` +Object { + "BitmapText": Object { + "align": "left", + "alpha": 1, + "anchor": 0, + "angle": 0, + "buttonMode": false, + "cacheAsBitmap": false, + "cursor": "auto", + "interactive": false, + "interactiveChildren": true, + "letterSpacing": 0, + "maxWidth": 0, + "pivot": 0, + "position": 0, + "renderable": true, + "rotation": 0, + "roundPixels": false, + "scale": 1, + "skew": 0, + "text": "", + "tint": 16777215, + "visible": true, + "x": 0, + "y": 0, + }, + "Container": Object { + "alpha": 1, + "angle": 0, + "buttonMode": false, + "cacheAsBitmap": false, + "cursor": "auto", + "interactive": false, + "interactiveChildren": true, + "pivot": 0, + "position": 0, + "renderable": true, + "rotation": 0, + "scale": 1, + "skew": 0, + "visible": true, + "x": 0, + "y": 0, + }, + "Graphics": Object { + "alpha": 1, + "angle": 0, + "blendMode": 0, + "buttonMode": false, + "cacheAsBitmap": false, + "cursor": "auto", + "interactive": false, + "interactiveChildren": true, + "pivot": 0, + "pluginName": "batch", + "position": 0, + "renderable": true, + "rotation": 0, + "scale": 1, + "skew": 0, + "tint": 16777215, + "visible": true, + "x": 0, + "y": 0, + }, + "ParticleContainer": Object { + "alpha": 1, + "angle": 0, + "autoResize": false, + "batchSize": 16384, + "blendMode": 0, + "buttonMode": false, + "cacheAsBitmap": false, + "cursor": "auto", + "interactive": false, + "interactiveChildren": true, + "maxSize": 1500, + "pivot": 0, + "position": 0, + "renderable": true, + "rotation": 0, + "roundPixels": true, + "scale": 1, + "skew": 0, + "tint": 16777215, + "visible": true, + "x": 0, + "y": 0, + }, + "Sprite": Object { + "alpha": 1, + "anchor": 0, + "angle": 0, + "blendMode": 0, + "buttonMode": false, + "cacheAsBitmap": false, + "cursor": "auto", + "interactive": false, + "interactiveChildren": true, + "pivot": 0, + "pluginName": "batch", + "position": 0, + "renderable": true, + "rotation": 0, + "roundPixels": false, + "scale": 1, + "skew": 0, + "tint": 16777215, + "visible": true, + "x": 0, + "y": 0, + }, + "Text": Object { + "alpha": 1, + "anchor": 0, + "angle": 0, + "blendMode": 0, + "buttonMode": false, + "cacheAsBitmap": false, + "cursor": "auto", + "interactive": false, + "interactiveChildren": true, + "pivot": 0, + "pluginName": "batch", + "position": 0, + "renderable": true, + "resolution": 1, + "rotation": 0, + "roundPixels": false, + "scale": 1, + "skew": 0, + "text": "", + "tint": 16777215, + "visible": true, + "x": 0, + "y": 0, + }, + "TilingSprite": Object { + "alpha": 1, + "anchor": 0, + "angle": 0, + "blendMode": 0, + "buttonMode": false, + "cacheAsBitmap": false, + "clampMargin": 0.5, + "cursor": "auto", + "interactive": false, + "interactiveChildren": true, + "pivot": 0, + "pluginName": "batch", + "position": 0, + "renderable": true, + "rotation": 0, + "roundPixels": false, + "scale": 1, + "skew": 0, + "tint": 16777215, + "uvRespectAnchor": false, + "visible": true, + "x": 0, + "y": 0, + }, +} +`; diff --git a/test/index.test.js b/test/index.test.js index 14ab647..c1b948b 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -1,31 +1,45 @@ import * as ReactPixiFiber from "../src/index"; +import CustomPIXIComponent from "../src/CustomPIXIComponent"; +import { AppContext, AppProvider, withApp } from "../src/AppProvider"; +import Stage, { createStageClass } from "../src/Stage"; +import { TYPES } from "../src/types"; +import { usePixiApp, usePixiTicker } from "../src/hooks"; +import { unstable_batchedUpdates } from "../src/ReactPixiFiber"; +import { applyDisplayObjectProps } from "../src/ReactPixiFiberComponent"; describe("ReactPixiFiber public API", () => { + it("should match snapshot", () => { + expect(ReactPixiFiber).toMatchSnapshot(); + }); + it("provides expected utils", () => { - expect(ReactPixiFiber.AppContext).toBeDefined(); - expect(ReactPixiFiber.AppProvider).toBeDefined(); - expect(ReactPixiFiber.CustomPIXIComponent).toBeDefined(); - expect(ReactPixiFiber.applyDisplayObjectProps).toBeDefined(); - expect(ReactPixiFiber.createStageClass).toBeDefined(); - expect(ReactPixiFiber.render).toBeDefined(); - expect(ReactPixiFiber.unmount).toBeDefined(); - expect(ReactPixiFiber.unstable_batchedUpdates).toBeDefined(); - expect(ReactPixiFiber.withApp).toBeDefined(); + expect(ReactPixiFiber.CustomPIXIComponent).toEqual(CustomPIXIComponent); + expect(ReactPixiFiber.applyDisplayObjectProps).toEqual(applyDisplayObjectProps); + expect(ReactPixiFiber.createStageClass).toEqual(createStageClass); + expect(typeof ReactPixiFiber.render).toEqual("function"); + expect(typeof ReactPixiFiber.unmount).toEqual("function"); + expect(ReactPixiFiber.unstable_batchedUpdates).toEqual(unstable_batchedUpdates); + }); + + it("provides expected context utils", () => { + expect(ReactPixiFiber.AppContext).toEqual(AppContext); + expect(ReactPixiFiber.AppProvider).toEqual(AppProvider); + expect(ReactPixiFiber.withApp).toEqual(withApp); }); it("provides expected hooks", () => { - expect(ReactPixiFiber.usePixiApp).toBeDefined(); - expect(ReactPixiFiber.usePixiTicker).toBeDefined(); + expect(ReactPixiFiber.usePixiApp).toEqual(usePixiApp); + expect(ReactPixiFiber.usePixiTicker).toEqual(usePixiTicker); }); it("provides expected components", () => { - expect(ReactPixiFiber.BitmapText).toBeDefined(); - expect(ReactPixiFiber.Container).toBeDefined(); - expect(ReactPixiFiber.Graphics).toBeDefined(); - expect(ReactPixiFiber.ParticleContainer).toBeDefined(); - expect(ReactPixiFiber.Sprite).toBeDefined(); - expect(ReactPixiFiber.Stage).toBeDefined(); - expect(ReactPixiFiber.Text).toBeDefined(); - expect(ReactPixiFiber.TilingSprite).toBeDefined(); + expect(ReactPixiFiber.BitmapText).toEqual(TYPES.BITMAP_TEXT); + expect(ReactPixiFiber.Container).toEqual(TYPES.CONTAINER); + expect(ReactPixiFiber.Graphics).toEqual(TYPES.GRAPHICS); + expect(ReactPixiFiber.ParticleContainer).toEqual(TYPES.PARTICLE_CONTAINER); + expect(ReactPixiFiber.Sprite).toEqual(TYPES.SPRITE); + expect(ReactPixiFiber.Stage).toEqual(Stage); + expect(ReactPixiFiber.Text).toEqual(TYPES.TEXT); + expect(ReactPixiFiber.TilingSprite).toEqual(TYPES.TILING_SPRITE); }); }); diff --git a/test/props.test.js b/test/props.test.js index 31834fa..0c7aee9 100644 --- a/test/props.test.js +++ b/test/props.test.js @@ -1,65 +1,9 @@ -import { DEFAULT_PROPS, EVENT_PROPS } from "../src/props"; +import { defaultProps } from "../src/props"; describe("props", () => { - describe("DEFAULT_PROPS", () => { - it("should be an object defining default values for DisplayObject props", () => { - expect(DEFAULT_PROPS).toEqual({ - alpha: 1, - anchor: 0, - buttonMode: false, - cacheAsBitmap: false, - cursor: "auto", - filterArea: null, - filters: null, - hitArea: null, - interactive: false, - mask: null, - pivot: 0, - position: 0, - renderable: true, - rotation: 0, - scale: 1, - skew: 0, - tint: 0xffffff, - transform: null, - visible: true, - x: 0, - y: 0, - }); + describe("defaultProps", () => { + it("should match", () => { + expect(defaultProps).toMatchSnapshot(); }); }); - - describe("EVENT_PROPS", () => { - it("should be a list containing all DisplayObject events", () => { - expect(EVENT_PROPS).toEqual([ - "added", - "click", - "mousedown", - "mousemove", - "mouseout", - "mouseover", - "mouseup", - "mouseupoutside", - "pointercancel", - "pointerdown", - "pointermove", - "pointerout", - "pointerover", - "pointertap", - "pointerup", - "pointerupoutside", - "removed", - "rightclick", - "rightdown", - "rightup", - "rightupoutside", - "tap", - "touchcancel", - "touchend", - "touchendoutside", - "touchmove", - "touchstart", - ]); - }); - }) });