import React, { Component } from 'react' import PropTypes from 'prop-types' import paper from 'paper' import invariant from 'fbjs/lib/invariant' import emptyObject from 'fbjs/lib/emptyObject' import { ReactFiberReconciler } from 'react-dom' const TYPES = { LAYER: 'Layer', GROUP: 'Group', PATH: 'Path', CIRCLE: 'Circle', TOOL: 'Tool', } const Layer = TYPES.LAYER const Group = TYPES.GROUP const Path = TYPES.PATH const Circle = TYPES.CIRCLE const Tool = TYPES.TOOL class Paper extends Component { static propTypes = { activeTool: PropTypes.string, height: PropTypes.number, onWheel: PropTypes.func, width: PropTypes.number, zoom: PropTypes.number, } componentDidMount() { const { activeTool, children, height, width, zoom } = this.props this._paper = new paper.PaperScope() this._paper.setup(this._canvas) this._paper.view.viewSize = new paper.Size(width, height) this._paper.view.zoom = zoom this._mountNode = PaperRenderer.createContainer(this._paper) PaperRenderer.updateContainer( children, this._mountNode, this, ) this._paper.view.draw() if (activeTool) { this._paper.tools.forEach(tool => { if (tool.name === activeTool) { tool.activate() } }) } } componentDidUpdate(prevProps, prevState) { const { activeTool, children, height, width, zoom } = this.props if (width !== prevProps.width || height !== prevProps.height) { this._paper.view.viewSize = new paper.Size(width, height) } if (zoom !== prevProps.zoom) { this._paper.view.zoom = zoom } PaperRenderer.updateContainer( children, this._mountNode, this, ) this._paper.view.draw() if (activeTool !== prevProps.activeTool) { this._paper.tools.forEach(tool => { if (tool.name === activeTool) { tool.activate() } }) } } componentWillUnmount() { PaperRenderer.updateContainer( null, this._mountNode, this, ) } render() { const { height, onWheel, width } = this.props const canvasProps = { ref: ref => this._canvas = ref, height, onWheel, width, } return ( <canvas {...canvasProps} /> ) } } function applyLayerProps(instance, props, prevProps = {}) { // TODO } function applyToolProps(tool, props, prevProps = {}) { // TODO } function applyGroupProps(tool, props, prevProps = {}) { // TODO } function applyCircleProps(instance, props, prevProps = {}) { if (props.center !== prevProps.center) { instance.center = new paper.Point(props.center) } if (props.strokeColor !== prevProps.strokeColor) { instance.strokeColor = props.strokeColor } if (props.strokeWidth !== prevProps.strokeWidth) { instance.strokeWidth = props.strokeWidth } if (props.fillColor !== prevProps.fillColor) { instance.fillColor = props.fillColor } } function applyPathProps(instance, props, prevProps = {}) { if (props.strokeColor !== prevProps.strokeColor) { instance.strokeColor = props.strokeColor } if (props.strokeWidth !== prevProps.strokeWidth) { instance.strokeWidth = props.strokeWidth } } const PaperRenderer = ReactFiberReconciler({ appendChild(parentInstance, child) { if (child.parentNode === parentInstance) { child.remove() } if ( child instanceof paper.Path && ( parentInstance instanceof paper.Layer || parentInstance instanceof paper.Group ) ) { child.addTo(parentInstance) } }, appendInitialChild(parentInstance, child) { if (typeof child === 'string') { // Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>) invariant(false, 'Text children should already be flattened.') return } if ( child instanceof paper.Path && ( parentInstance instanceof paper.Layer || parentInstance instanceof paper.Group ) ) { child.addTo(parentInstance) } }, commitTextUpdate(textInstance, oldText, newText) { // Noop }, commitMount(instance, type, newProps) { // Noop }, commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) { instance._applyProps(instance, newProps, oldProps) }, createInstance(type, props, internalInstanceHandle) { const { children, ...paperProps } = props let instance switch (type) { case TYPES.TOOL: instance = new paper.Tool(paperProps) instance._applyProps = applyToolProps break case TYPES.LAYER: instance = new paper.Layer(paperProps) instance._applyProps = applyLayerProps break case TYPES.GROUP: instance = new paper.Group(paperProps) instance._applyProps = applyGroupProps break case TYPES.PATH: instance = new paper.Path(paperProps) instance._applyProps = applyPathProps break case TYPES.CIRCLE: instance = new paper.Path.Circle(paperProps) instance._applyProps = applyCircleProps break } invariant(instance, 'PaperReact does not support the type "%s"', type) instance._applyProps(instance, props) return instance }, createTextInstance(text, rootContainerInstance, internalInstanceHandle) { return text }, finalizeInitialChildren(domElement, type, props) { return false }, insertBefore(parentInstance, child, beforeChild) { invariant( child !== beforeChild, 'PaperReact: Can not insert node before itself' ) child.insertAbove(beforeChild) }, prepareForCommit() { // Noop }, prepareUpdate(domElement, type, oldProps, newProps) { return true }, removeChild(parentInstance, child) { //destroyEventListeners(child) child.remove() }, resetAfterCommit() { // Noop }, resetTextContent(domElement) { // Noop }, getRootHostContext() { return emptyObject }, getChildHostContext() { return emptyObject }, scheduleAnimationCallback: window.requestAnimationFrame, scheduleDeferredCallback: window.requestIdleCallback, shouldSetTextContent(props) { return ( typeof props.children === 'string' || typeof props.children === 'number' ) }, useSyncScheduling: true, }) export { Paper, Layer, Path, Circle, Group, Tool, } 

<Paper {...paperProps}> <Layer> <Path segments={SEGMENTS} strokeColor={strokeColor} strokeScaling={false} /> <Group> <Circle center={[333,333]} radius={20} strokeColor={'black'} fillColor={'green'} strokeScaling={false} /> </Group> </Layer> <Layer> <Path dashArray={[6,4]} segments={SEGMENTS2} strokeColor={strokeColor} strokeScaling={false} /> <Group> <Circle center={[464,444]} radius={20} strokeColor={'black'} fillColor={'orange'} strokeScaling={false} /> </Group> </Layer> <Layer> {circles.map(circle => <Circle key={circle.id} {...circle} /> )} </Layer> <Tool name={'move'} onMouseDown={this.onMoveMouseDown} onMouseDrag={this.onMoveMouseDrag} onMouseUp={this.onMoveMouseUp} /> <Tool name={'pen'} onMouseDown={this.onPenMouseDown} onMouseDrag={this.onPenMouseDrag} onMouseUp={this.onPenMouseUp} /> </Paper> 

createInstance Path createInstance Circle createInstance Group createInstance Layer createInstance Path createInstance Circle createInstance Group createInstance Layer createInstance Circle (3x) createInstance Layer createInstance Tool (2x) 

PaperRenderer.updateContainer( children, this._mountNode, this, )