react-paper/react-paper-bindings

Paper.js bindings for React

Paper.js bindings for React Fiber

Demo

http://react-paper.github.io/react-paper-bindings/

Development

Start watching src with babel

cd react-paper-bindings
npm start

Link the library to the demo

# npm link the library
cd react-paper-bindings
npm link

cd demo
npm link react-paper-bindings

Start demo with create-react-app

cd demo
npm start

If someone knows a better way, please let me know ;)

Similar projects

• react-paperjs

Example

import React, { Component } from 'react'

import {
  View,
  Layer,
  Group,
  Path,
  Circle,
  Ellipse,
  Rectangle,
  PointText,
  Tool,
} from 'react-paper-bindings'

const ReactLogo = ({ rotation, x, y }) => {
  return (
    <Group name={'reactLogo'} rotation={rotation}>
      <Ellipse
        center={[x, y]}
        size={[70, 25]}
        strokeWidth={2.5}
        strokeColor={'#61DAFB'}
      />
      <Ellipse
        center={[x, y]}
        rotation={120}
        size={[70, 25]}
        strokeWidth={2.5}
        strokeColor={'#61DAFB'}
      />
      <Ellipse
        center={[x, y]}
        rotation={240}
        size={[70, 25]}
        strokeWidth={2.5}
        strokeColor={'#61DAFB'}
      />
      <Circle
        center={[x, y]}
        fillColor={'#61DAFB'}
        radius={7}
      />
    </Group>
  )
}

const Paper = ({ activeTool, circles, rectangles, width, height }) => {
  return (
    <View activeTool={activeTool} width={width} height={height}>
      <Layer>
        {circles.map(circle => <Circle {...circle} />)}
      </Layer>
      <Layer>
        {rectangles.map(rectangle => <Rectangle {...rectangle} />)}
      </Layer>
      <Layer>
        <Rectangle
          center={[width/2, height/2]}
          fillColor={'#222222'}
          opacity={0.8}
          size={[320, 120]}
        />
        <PointText
          content={'Paper.js'}
          fillColor={'white'}
          fontFamily={'Courier New'}
          fontSize={30}
          fontWeight={'bold'}
          justification={'center'}
          point={[(width/2)+40, (height/2)+10]}
        />
        <ReactLogo
          rotation={rotation}
          x={(width/2)-100}
          y={(height/2)}
        />
      </Layer>
      <Tool
        active={activeTool === 'move'}
        name={'move'}
        onMouseDown={props.moveToolMouseDown}
        onMouseDrag={props.moveToolMouseDrag}
        onMouseUp={props.moveToolMouseUp}
      />
      <Tool
        active={activeTool === 'pen'}
        name={'pen'}
        onMouseDown={props.penToolMouseDown}
        onMouseDrag={props.penToolMouseDrag}
        onMouseUp={props.penToolMouseUp}
      />
      <Tool
        active={activeTool === 'circle'}
        name={'circle'}
        onMouseDown={props.addCircle}
      />
      <Tool
        active={activeTool === 'rectangle'}
        name={'rectangle'}
        onMouseDown={props.addRectangle}
      />
    </View>
  )
}

react-paper-bindings's Issues

Support DevTool

Thank you for creating this great library!
Is there any plan for making paper relevant elements visible in DevTool to improve development experience?
AFAIK, Reconciler class has injectIntoDevTools method to do that.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

GitHub security message

We found a potential security vulnerability in one of your dependencies.
A dependency defined in ./package-lock.json has known security vulnerabilities and should be updated.

Only users who have been granted access to vulnerability alerts for this repository can see this message.
Learn more about vulnerability alerts

Probably just needs a dependency update

Typescript support?

Save in demo throws an error

Paper.js:58 Uncaught TypeError: Cannot read property 'project' of undefined
    at Object.n.save [as onClick] (Paper.js:58)
    at r.handleClick (Button.js:18)
    at Object.i (react-dom.production.min.js:15)
    at Object.invokeGuardedCallback (react-dom.production.min.js:16)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:16)
    at c (react-dom.production.min.js:20)
    at d (react-dom.production.min.js:22)
    at g (react-dom.production.min.js:22)
    at h (react-dom.production.min.js:21)
    at v (react-dom.production.min.js:24)

Rename respository and npm package to react-paper-renderer

Should we rename or start from scratch?

https://stackoverflow.com/questions/28371669/renaming-a-published-npm-module

Seems that we cannot rename the published package, so we need to publish a new one.

Improve performance

Pure JavaScript implementation:

React implementation:

It's obvious that React implementation does a lot more scripting. Figure out how to improve this.

Group and Path should have 'position' prop

I found some issues for moving position of Group and Path.

Problem of center and point prop on Group and Path component

both prop perfectly work for shaped paths, like Circle, Rectangle ...etc.
On the other hand, Path and Group does not reflect its initial position by these props.
For example, this below does not set its center position to [100, 100].

        <Path
          segments={[[20, 20], [80, 80], [140, 20]]}
          center={[100,100]}
          fillColor={'black'}
        />

This also does not work.

        <Path
          segments={[[20, 20], [80, 80], [140, 20]]}
          point={[100,100]}
          fillColor={'black'}
        />

introducing position prop

position prop works for not only shaped paths but also all Item based objects, Path, Group. Layers ...etc. But currently changing these props does not move its actual position. It would be better if this prop is available, like below.

        <Path
          segments={[[20, 20], [80, 80], [140, 20]]}
          position={new Point(100,100)}
          fillColor={'black'}
        />

[feature request] boolean path operations (unite, intersect, etc.)

paper.js already has boolean path operations built in.
(http://paperjs.org/reference/path/#intersect-path)

I'd love to have that feature available for react-paper-bindings :)

How to get data of the path

Hello!
I have a question about getting data of the path.
I need to put text into the closed path.
How I can to get bounds or center of closed path and set it to the textItm or point

Could it be that Path segments is not fully implemented?

Somehow segments do not seem to update as part of a group, only Rectangle, PointText and Circle do.
Please excuse the "sloppy" code, am still learning to work with React.

Below is (part of) the code I use. When Dragging the object, everything except the Path moves nicely as expected. I tried to change all segments to Line elements but same issue occurs.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Group, Path, Rectangle, Circle, PointText } from 'react-paper-bindings';

class FlowElement extends Component {

  constructor(props) {
    super(props);
    this.state = {
      x: props.x,
      y: props.y,
      s: props.s,
      name: props.name,
    };
  }

  handleDragGroup = e => { this.setState({x: e.point.x, y: e.point.y}); }

  render() {
    const { x, y, s, name } = this.state;

    return(
      <Group
        name={name}
        strokeColor={'black'}
        strokeScaling={false}
        strokeWidth={1}
        onMouseUp={this.handleSelectGroup}
        onMouseDrag={this.handleDragGroup}
      >
        <Rectangle
          fillColor={'white'}
          opacity={0.8}
          point={[x-15*s,y-15*s]}
          size={[30*s,30*s]}
          strokeColor={'black'}
        />
        <PointText
          point={[x,y+5*s]}
          content={name}
          fontFamily={'Arial'}
          fontSize={12}
          justification={'center'}
        />
       <Path segments={[[x-15*s,y-15*s],[x,y-8*s],[x+15*s,y-15*s],[x+15*s,y-8*s],[x-15*s,y-8*s]]} /> }
      </Group>
    );
  }
}

export default FlowElement;

Fix selenium tests in Travis CI

Travis test command fails with the following error:

Error: Unable to access jarfile ../node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-3.9.1.jar

Full error log

> [email protected] test /home/travis/build/react-paper/react-paper-bindings
> cd test && npm install && bash test.sh

npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
npm WARN notice [SECURITY] https-proxy-agent has the following vulnerability: 1 high. Go here for more details: https://nodesecurity.io/advisories?search=https-proxy-agent&version=1.0.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] http-proxy-agent has the following vulnerability: 1 high. Go here for more details: https://nodesecurity.io/advisories?search=http-proxy-agent&version=1.0.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] debug has the following vulnerability: 1 low. Go here for more details: https://nodesecurity.io/advisories?search=debug&version=2.2.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] growl has the following vulnerability: 1 critical. Go here for more details: https://nodesecurity.io/advisories?search=growl&version=1.9.2 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.

> [email protected] install /home/travis/build/react-paper/react-paper-bindings/test/node_modules/chromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.39/chromedriver_linux64.zip
Saving to /tmp/chromedriver/chromedriver_linux64.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3749K total.
Extracting zip contents
Copying to target path /home/travis/build/react-paper/react-paper-bindings/test/node_modules/chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /home/travis/build/react-paper/react-paper-bindings/test/node_modules/chromedriver/lib/chromedriver/chromedriver

> [email protected] postinstall /home/travis/build/react-paper/react-paper-bindings/test/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1401 packages in 45.522s
Starting the development server...

Compiled with warnings.

> [email protected] test /home/travis/build/react-paper/react-paper-bindings/test
> cd test && nightwatch

Starting selenium server... There was an error while starting the Selenium server:

Error: Unable to access jarfile ../node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-3.9.1.jar

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `cd test && nightwatch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2018-06-07T12_15_09_666Z-debug.log

The command "npm test" exited with 0.

@kota65535 any ideas on how to fix this?

Webpack error

When I run the application I have this error, could you let me know if I am missing something?

webpack_require.i(...) is not a function
(anonymous function)
/Users/Projects/React/react-paper-bindings/dist/PaperRenderer.js:179
176 | }
177 | }
178 |
179 | var PaperRenderer = ReactFiberReconciler({
180 | appendChild: function appendChild(parentInstance, child) {
181 | if (child.parentNode === parentInstance) {
182 | child.remove();
View compiled
2 stack frames were collapsed.
(anonymous function)
/Users/Projects/React/react-paper-bindings/dist/View.js:1
1 | var _jsxFileName = 'src/View.js';
2 |
3 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
4 |
View compiled
2 stack frames were collapsed.
Object.defineProperty.value
/Users/Projects/React/react-paper-bindings/dist/index.js:1
1 | import TYPES from './types';
2 | import View from './View';
3 |
4 | var CIRCLE = TYPES.CIRCLE,
View compiled
15 stack frames were collapsed.

Port some of the examples from paperjs.org

Doing so should reveal any bugs and problems.

Links:
http://paperjs.org/examples/
https://github.com/paperjs/paper.js/tree/develop/examples/Paperjs.org

Responsive Shapes

I am trying to change some points in a couple of shapes from a controller outside the paperjs view passing them through props to create the new layout but the points in any shape are not responsive to any change. Although when i printed the data object in the console the points were changed. Any Idea Why this behaviour happens ?!

I followed the instructions in README but it show me error!!

the error is :

react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Is matrix a required prop on View?

I can't figure out where View's matrix property fits into things. View's propTypes doesn't list it as required, but I get an error when I don't include it as a property on View. Specifically the error happens at line 82 of View.js.

var x = matrix.x,
      y = matrix.y,
      zoom = matrix.zoom;

The error says "Cannot read property 'x' of undefined."

Is matrix supposed to be calculated from the width and height properties? If so, where does that happen? What am I missing?

Backwards compatible branch (React 15)

Im working with react 15 and due to our dependencies can't upgrade to 16 just yet. Can you please create a branch, where you've reverted the changes to react 16 back to react 15. Much appreciated!

responsive size documentation

I was just looking at getting started with these bindings, and one of the first things I would like to do was to set up responsive sizing of the canvas. (I.e. '50%', '50vw', etc., basically css sizing.)

As you most definitely know, we currently have to provide width and height props to the Canvas element. It was obvious to me that I'd have to use some kind of size hook in react to get the right size in pixels, but I was unsure how to do it correctly.

But then I was looking through the source code, and in this file it's done using the react-use-measure package. We can refer to another html element, and the canvas copies the size automatically, awesome!

I'm sure other users would like to achieve the same thing, so let's try to improve. What do you think about these two ideas:

1. Update the documentation somewhere to show how easy it is to make a canvas with responsive size using the react-use-measure package
2. Change the default behavior of the canvas, so that it automatically takes the width and height of the parent component. This would be in line with other react-fiber packages like react-three-fiber where the user specifies a 'parent' div, with a unique id.

Perhaps we can even do both options.
I'm willing to make a pull request.
Thanks for your time and work.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Remove matrix from the View

I think matrix does not belong in the View and should be removed in the next major version. Something like this can easily be implemented in the userland (or with a HOC).

But it is a breaking change, so we need to be careful and provide an upgrade path. I was hoping to get some feedback from the people who use this library.

What do you think?

Create organization

It seems that the maintainers of the PaperJS are not interested in adding this library to the paperjs organization, so I think we should create a new one. Or I can just add people as owners/maintainers. I don't really care, as long as it benefits us all.

@andriibuts and @kota65535 what do you guys think? I don't have much experience maintaining a lib, and even less time, so if you guys can help me out, that would be great.

Is drawing priority handled correctly ?

I want to have some Path drawn on top of another. So I have them one after the other, however, one of them is always on top, regardless of the order I put them in. I tried adding them to Layers or Groups with no success, the drawing order always stays the same

Improve demo and think about best practices and better API

Just thinking ... in the demo, most of the tool functionality is split out into higher order components, which add props directly to the Paper component.

export default compose(
  withHistory,
  withFullscreen,
  withTools,
  withMoveTool,
  withSelectTool,
  withPenTool,
  withCircleTool,
  withRectangleTool,
  withDeleteTool,
)(Paper)

There are a few problems with this approach:

1. it's hard to track all the props injected
2. too many props on the Paper component
3. order is important, because some HOCs depend on other HOC's props
4. it's messy and not really reusable

I'm thinking something like this:

import { View, Layer, Raster, Tools, MoveTool } from 'react-paper-renderer'

const Paper = ({ width, height, src }) => {
  return (
    <View width={width} height={height}>
      <Tools>
        <MoveTool />
      </Tools>
      <Layer>
        <Raster source={src} />
      </Layer>
    </View>
  )
}

Maybe render props API can help us? Not really sure ...

The size property won't work

If I change the endX and endY state in mousemove event
the size of the shape won't change

let shape = null;
let centerX = (this.state.startX + this.state.endX) / 2;
let centerY = (this.state.startY + this.state.endY) / 2;
let width = Math.abs(this.state.endX - this.state.startX);
let height = Math.abs(this.state.endY - this.state.startY);
shape =<Paper.Rectangle center={[centerX, centerY]} size={[width, height]} strokeWidth={4} strokeColor={'#ff0000'} />

return (
<div>
	<Paper.View ref={(view) => { this.view = view; }} {...viewProps}>
		{shape}
	</Paper.View>
</div>
);

It can be fixed by adding a random key property to shape
but it's kind of hacking

License?

Just wondering what the license for this is. Specifically the demo code...

Thanks!

How to unit test?

I'm struggling with unit testing of react components that include <Path>.
I think karma is good for me because it works on an actual browser and can see the rendered result.
But strangely <Path> seems to be not rendered, and a warning message The tag <Path> is unrecognized in this browser. is displayed.
Am I missing something? What testing framework did you use for the project using this library?

Error: Expected subtree parent to be a mounted class component.

I have use create-react-app to create a demo app, and added react-paper-bindings, App component like this:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { View, Layer, PointText, Circle } from "react-paper-bindings";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mounted: false
    };
    this._box = null;
  }

  componentDidMount() {
    this.setState({ mounted: true });
  }

  render() {
    const { mounted } = this.state;
    const box = this._box && this._box.getBoundingClientRect();

    const viewProps = {
      width: (box && box.width) || 1000,
      height: (box && box.height) || 1000
    };

    return (
      <div className="App" ref={ref => (this._box = ref)}>
        {mounted && (
          <View {...viewProps}>
            <Layer>
              <PointText
                point={[200, 200]}
                content={"Click Me"}
                fillColor={"#000000"}
                fontSize={18}
              />
              <Circle center={[80, 50]} radius={30} strokeColor={"black"} />
            </Layer>
          </View>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

When start the demo, it's always generate error:

Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue.

package.js

{
  "name": "paper-demo",
  "version": "0.1.0",
  "private": true,
  "main": "src/index.js",
  "dependencies": {
    "lodash": "^4.17.11",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-paper-bindings": "^1.1.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

And I have tried the same code in codesandbox, it's worked. Did I miss something or do something wrong?

License?

What is the license for this?