psychobolt / react-paperjs Goto Github PK
View Code? Open in Web Editor NEWReact Fiber renderer and component container for Paper.js.
Home Page: https://psychobolt.github.io/react-paperjs
License: MIT License
React Fiber renderer and component container for Paper.js.
Home Page: https://psychobolt.github.io/react-paperjs
License: MIT License
I'm getting this error when moving a component i made with your repo to a project running react 16.14.0:
Error in function getNearestMountedFiber in ./node_modules/@psychobolt/react-paperjs/dist/index.dev.js:2178
Runs fine in React 17
The Paper.js example seems to all seem work well with touchscreen events using the regular onMouse
callbacks but react-paperjs doesn't seem to work with touch events at all. Is that right?
Hi,
If I try to use the PanAndZoom I'm getting the error TypeError: mergeProps is not a function
. I tried to use the exact same component which is being used in the storybook demo but I have the same issue there. I believe it's the ContextProvider which is not injecting paper
and mergeProps
.
Any suggestions on how to fix this?
Hi, I'm trying to add "paper.Raster" to the set of default types provided by react-paperjs.
// @flow
...
const PAPER = {
...
Raster: 'Raster',
};
...
const TYPES: Types = {
...
[CONSTANTS.Raster]: (props, paper) => {const temp = new paper.Raster(props.source);
console.log(temp)},
};
...
export const {
...
Raster,
} = components;
These are the minor changes i made to "src/Paper.types.js". And i'm using it as:
import React from "react"
import PropTypes from "prop-types"
import { Resizable } from 're-resizable'
import { PaperContainer, Layer, Circle, renderWithPaperScope, Raster } from '@psychobolt/react-paperjs'
import { Grid, PanAndZoom } from '@psychobolt/react-paperjs-editor'
import map from '../assets/map.png'
const ref = instanceRef => { console.log(instanceRef) }
class AppCanvas extends React.Component {
constructor(props) {
super(props)
this.state = {
width: '100%',
height: '100%',
}
this.container = React.createRef()
}
onResizeStop = (event, direction, refToElement) => {
const width = refToElement.clientWidth;
const height = refToElement.clientHeight;
Object.assign(this.container.current.props.paper.view.viewSize, { width, height });
}
render() {
const { width, height } = this.state
return (
<Resizable defaultSize={{ width: '100%', height: '100%' }} onResizeStop={this.onResizeStop}>
<PaperContainer
ref={this.container}
canvasProps={{ resize: 'true', style: { width, height } }}
// onMount={paper => paper.view.element.focus()}
viewProps={paper => ({
onResize: () => {
const { width: vWidth, height: vHeight } = paper.view.viewSize
this.setState({ width: `${vWidth}px`, height: `${vHeight}px` })
}
})}
>
<PanAndZoom
center={[0, 0]}
prepanStyle={{ cursor: '-webkit-grab' }}
panStyle={{ cursor: '-webkit-grabbing' }}
onPanEnabled={() => { console.log('Pan enabled') }}
onPanDisabled={() => { console.log('Pan disabled') }}
onZoom={level => { console.log(`Zoom: ${level}`) }}
>
{renderWithPaperScope(paper => {
const { top, left, right, bottom } = paper.view.bounds
return (
<Grid
ref={ref}
width={width}
height={height}
top={top}
left={left}
right={right}
bottom={bottom}
strokeWidth={1 / paper.view.zoom}
/>
)
})}
<Layer ref={ref}>
<Raster
source={map}/>
</Layer>
</PanAndZoom>
</PaperContainer>
</Resizable>
)
}
}
AppCanvas.propTypes = {
app: PropTypes.object
};
export default AppCanvas
I'm getting the following error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `AppCanvas`.
GatsbyJS has an SSR issue (to do with Paper itself, but perhaps there's a way round you can help with)
Issue described here: paperjs/paper.js#1483
The error I get on build with gatsby is below:
ERROR Generating SSR bundle failed
If you're trying to use a package make sure that 'jsdom/lib/jsdom/living/generated/utils' is installed. If you're trying to use a local file make sure that the path is correct.
Can't resolve 'jsdom/lib/jsdom/living/generated/utils' in '/usr/src/app/www/node_modules/paper/dist/node'
Repo here to reproduce: https://github.com/amcc/gatsby-paper-fiber
I'm trying to use this project for the first time, on a project using react 18. I'm unsure if it's actually supposed to work on that react version.
I'm getting an error "Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue." in case that helps.
See issue for bug description: https://github.com/psychobolt/react-paperjs-editor/issues/1
Hi there, I'm trying to use your library and I'm getting this error:
"react": "^16.13.1"
"react-dom": "^16.13.1"
Module not found: Can't resolve 'paper/dist/paper-core'
thanks in advance
Any thoughts on how to load SVGs using react-paperjs?
So far I've got this which does indeed load the svg and return a Group but I believe this is a paperjs group and not a React Node.
Is there some way to convert the native node into a React one?
onMount = () => {
const svg = this.imageRef.current.importSVG(imagePath('./canvas/website.svg'), { onLoad: this.onImageLoad, insert: false })
}
onImageLoad = (item, svg) => {
console.log(item, svg)
}
render() {
return (
<Rectangle
center={center}
ref={this.imageRef}
/>
)
Seems like there was an update in react-reconciler
from v0.25.0 -> v0.26.0 which maybe changes the underlying API. I'm seeing some errors here: https://github.com/psychobolt/react-paperjs/blob/master/src/Paper.container.js#L66
Is there no support for CompoundPath
?
Hi!
Do you have examples for implementing mouse events?
thanks
How would you go about applying the smooth
function to a react-paperjs Path
component?
Pending for future updates
I am encountering an issue with the Paper.js polygon tool used in the Mirador-Annotation library, which I am currently using in my project.
I have already raised an issue in the Mirador-Annotation repository regarding this problem. You can find the link to the issue here: ProjectMirador/mirador-annotations#77
The problem I am facing is related to the polygon tool in the library. When I attempt to use the polygon tool on high-resolution images, I am unable to complete (end) the polygon by connecting the last point with the starting point. Consequently, I cannot save the polygon since the target details are not being sent to the API.
As a bit of context, my project is built using React, and I have incorporated the following versions:
react: 17.0.2
mirador-annotations: 0.5.0
mirador: 3.3.0
I would greatly appreciate any insights, suggestions, or potential workarounds to resolve this issue. If you have any ideas or have encountered a similar problem, please feel free to share your thoughts in the linked issue or here.
Thank You!
Any example of how to use onFrame with PaperContainer?
It seems that prop changes to Container components don't trigger a redraw while adding and removing components does trigger a redraw.
See below a minimal test case:
Clicking the button shows the third rectangle but doesn't change the size of the first one.
import React, { useEffect, useState, useRef, forwardRef, Fragment } from "react"
import { PaperContainer, Layer, Group, Rectangle, Circle, Line, PointText, Arc, Path, renderWithPaperScope } from '@psychobolt/react-paperjs'
export default function TestCanvas() {
const [size, setSize] = useState({ width: '100%', height: '100%' })
const [step, setStep] = useState('a')
const container = useRef()
const onClick = () => {
setStep('b')
}
return (
<Fragment>
<button onClick={onClick}>Test Button</button>
<PaperContainer
ref={container}
canvasProps={{ resize: 'true', style: Object.assign({ backgroundColor: '#F9FAFB' }, size) }}
>
<Rectangle
position={[100, 100]}
size={step === 'b' ? [300, 100] : [100, 100]}
fillColor="white"
radius={20}
strokeWidth={2}
strokeColor="#C4B5FD"
/>
<Group>
<Rectangle
position={[200, 200]}
size={[100, 100]}
fillColor="white"
radius={20}
strokeWidth={2}
strokeColor="#C4B5FD"
/>
{step === 'b' && (
<Rectangle
position={[300, 300]}
size={[100, 100]}
fillColor="white"
radius={20}
strokeWidth={2}
strokeColor="#C4B5FD"
/>
)}
</Group>
</PaperContainer>
</Fragment>
)
}
Using PaperContainer
with canvasProps={{ resize: '' }}
, so the canvas gets properly resized when the browser window is resized leads to an exception. React installs some events listeners on the view that get invoked on such resize events after the component has been unmounted:
Uncaught NS_ERROR_FAILURE:
_setElementSize paper-core.js:13597
setViewSize paper-core.js:13053
resize paper-core.js:12856
add paper-core.js:12749
View paper-core.js:12854
CanvasView paper-core.js:13575
create paper-core.js:13212
Project paper-core.js:2892
setup paper-core.js:855
componentDidMount Paper.container.js:41
React 12
SizeAwareComponent with-size.js:220
SizeAwareComponent with-size.js:289
exec throttle.js:67
wrapper throttle.js:93
addListener element-resize-detector.js:163
onElementDetectable element-resize-detector.js:238
ready scroll.js:611
process batch-processor.js:124
processBatch batch-processor.js:37
setTimeout handler*raf batch-processor.js:82
requestFrame batch-processor.js:83
processBatchAsync batch-processor.js:64
addFunction batch-processor.js:24
install scroll.js:619
makeDetectable scroll.js:640
attachListenerToElement element-resize-detector.js:231
forEach collection-utils.js:14
listenTo element-resize-detector.js:199
handleDOMNode with-size.js:238
componentDidMount with-size.js:174
React 19
Adding:
if (paper.view) {
paper.view.remove();
}
at PaperContainer's componentWillUnmount() prevents this to happen.
I'm getting the below error in a bare bones create react app:
TypeError: Cannot read property 'alternate' of undefined
getNearestMountedFiber
node_modules/react-reconciler/cjs/react-reconciler.development.js:360
357 | var node = fiber;
358 | var nearestMounted = fiber;
359 |
> 360 | if (!fiber.alternate) {
| ^ 361 | // If there is no alternate, this might be a new tree that isn't inserted
362 | // yet. If it is, then it will have a pending insertion effect on it.
363 | var nextNode = node;
I've created a repo here so you can reproduce:
https://github.com/amcc/paperjs-react-app
It seems to be a react 17 error, changing to react 16.0.2 fixes the error.
When I use multiple PaperContainer
s (in multiple components), I get this warning:
Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
Other than that everything works as expected, but this warning is logged a ton.
Any ideas?
Thank you so much!
An example would be very useful. Thanks!
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.