Set default props based on type

michalochman · Nov 23, 2019 · be6a556 · be6a556
1 parent 2868acd
commit be6a556
Show file tree

Hide file tree

Showing 8 changed files with 354 additions and 143 deletions.
diff --git a/src/PixiPropertyOperations.js b/src/PixiPropertyOperations.js
@@ -1,8 +1,15 @@
 // 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";
 
+export function getDefaultValue(type, propName) {
+  const defaultValues = defaultProps[type];
+  if (typeof defaultValues !== "undefined") {
+    return defaultValues[propName];
+  }
+}
+
 /**
  * Sets the value for a property on a PIXI.DisplayObject instance.
  *
@@ -19,7 +26,7 @@ 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 defaultValue = getDefaultValue(type, propName);
     if (typeof defaultValue !== "undefined") {
       value = defaultValue;
     } else {

diff --git 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
@@ -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
@@ -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
@@ -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],
+}
+`;