Merge pull request #334 from vijayth2-cerebras/master

add geometry prop to Graphics

Author: inlet

src/components/Graphics.js

@@ -1,12 +1,13 @@
 import { Graphics as PixiGraphics } from 'pixi.js'
 import { applyDefaultProps } from '../utils/props'
+import invariant from '../utils/invariant'
 
-const Graphics = (root, props) => {
-  const g = new PixiGraphics()
+const Graphics = (root, { geometry }) => {
+  invariant(!geometry || geometry instanceof PixiGraphics, `Graphics geometry needs to be a \`PIXI.Graphics\``)
+  const g = geometry ? new PixiGraphics(geometry.geometry) : new PixiGraphics()
   g.applyProps = (instance, oldProps, newProps) => {
-    const { draw, ...props } = newProps
+    const { draw, geometry, ...props } = newProps
     let changed = applyDefaultProps(instance, oldProps, props)
-
     if (oldProps.draw !== draw && typeof draw === 'function') {
       changed = true
       draw.call(g, g)

src/components/Graphics.mdx

@@ -14,9 +14,10 @@ https://pixijs.download/dev/docs/PIXI.Graphics.html
 
 ## Props
 
-| prop 	| description            	|
-|------	|------------------------	|
-| draw 	| Draw callback function 	|
+| prop 	   | description            	|
+|--------- |------------------------	|
+| draw 	   | Draw callback function 	|
+| geometry | Graphics object          |
 
 
 ## Usage
@@ -72,6 +73,43 @@ function Rectangle(props) {
 }
 ```
 
+### The `geometry` prop
+Provides another Graphics object as a template. Helps in reducing memory footprint if the same shapes are used repeatedly.
+
+```jsx
+import React, { useCallback } from 'react';
+import { Graphics } from '@inlet/react-pixi';
+
+function Rectangle(props) {
+  const draw = useCallback((g) => {
+    g.clear();
+    g.lineStyle(props.lineWidth, props.color);
+    g.drawRect(
+      props.lineWidth,
+      props.lineWidth,
+      props.width - 2 * props.lineWidth,
+      props.height - 2 * props.lineWidth
+    );
+  }, [props]);
+
+  return <Graphics draw={draw} />
+}
+
+function Grid(props) {
+
+  const geometry = <Rectangle {...props} />
+
+  return (
+    <>
+      <Graphics x={0} y={0} geometry={geometry} />
+      <Graphics x={props.width} y={0} geometry={geometry} />
+      <Graphics x={0} y={props.height} geometry={geometry} />
+      <Graphics x={props.width} y={props.height} geometry={geometry} />
+    </>
+  );
+}
+```
+
 ## Example
 
 <iframe
@@ -83,3 +121,4 @@ function Rectangle(props) {
   allowFullScreen={true}
   style={{ width: '100%' }}
 />
+

test/__snapshots__/graphics.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`graphics renders a graphics component with draw prop 1`] = `<canvas />`;
+
+exports[`graphics renders a graphics component with geometry prop 1`] = `<canvas />`;

test/graphics.spec.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import * as PIXI from 'pixi.js'
+import renderer from 'react-test-renderer'
+import * as reactTest from '@testing-library/react'
+import { PixiFiber } from '../src'
+import { Container, Stage, Text, Graphics } from '../src'
+import { Context } from '../src/stage/provider'
+import { getCanvasProps } from '../src/stage'
+import { mockToSpy } from './__utils__/mock'
+
+jest.mock('../src/reconciler')
+jest.useFakeTimers()
+
+describe('graphics', () => {
+  beforeEach(() => {
+    window.matchMedia.mockClear()
+    jest.clearAllMocks()
+    mockToSpy('../src/reconciler')
+  })
+
+  test.skip('renders a graphics component with draw prop', () => {
+    const spy = jest.fn()
+    const tree = renderer.create(
+        <Stage>
+            <Graphics draw={spy} />
+        </Stage>
+    ).toJSON();
+    expect(tree).toMatchSnapshot()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  test.skip('renders a graphics component with geometry prop', () => {
+    const spy = jest.fn()
+    const geometry = <Graphics draw={spy} />
+    const tree = renderer.create(
+        <Stage>
+            <Graphics geometry={geometry} />
+            <Graphics geometry={geometry} />
+        </Stage>
+    ).toJSON();
+    expect(tree).toMatchSnapshot()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+})