react-paper / react-paper-bindings Goto Github PK
View Code? Open in Web Editor NEWPaper.js bindings for React
Home Page: http://react-paper.github.io/react-paper-bindings/
Paper.js bindings for React
Home Page: http://react-paper.github.io/react-paper-bindings/
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?
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)
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.
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?
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
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.
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
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:
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.
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 π¦π
Doing so should reveal any bugs and problems.
Links:
http://paperjs.org/examples/
https://github.com/paperjs/paper.js/tree/develop/examples/Paperjs.org
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:
react-use-measure
packagewidth
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.
I found some issues for moving position of Group and Path.
center
and point
prop on Group and Path componentboth 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'}
/>
position
propposition
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'}
/>
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 ?!
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.
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
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.
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.
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?
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 :)
What is the license for this?
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!
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
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;
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?
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?
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:
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.
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 π¦π
Just wondering what the license for this is. Specifically the demo code...
Thanks!
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:
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 ...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.