psychobolt
Prop changes don't trigger component redraws
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>
)
}
Will look into it when I have a chance. Could be that it's not being detected as a change through diffProps, or we need special handling for size prop for Rectangle in updateProps.
Update: Looks like the change is detected, but the instance is not updated. See console:
instance does not have property size
The rectangle does now resize, however the rounded corners are now stretched.
That looks like something that would happen on a resize rather than a redraw?
As an aside I had to pull the package locally and add it to my package.json as a local file.
The test above ran ok but I got a few of these errors: "Invalid hook call"
Don't know if the issue above is related or not, but if we do another round of testing it would be good to know the correct way to include the unpublished package
@paulodeon Yes, a redraw (unmount/remount) would pretty much reconstruct the Paper instance and you'll get an expected result.
However, ideally, it is computationally efficient to do resizing based on props (if it's a few changes), so we want to handle cases where reconciler handles resizing. This is something that one would trigger manually using one or two Paper's instance API call from an effect as the alternative.
This library is still at its primitive state, so in some cases different type of change haven't been implemented yet (and some of it is very experimental).
On the issue, I think the correct solution is to use the Rectangle's API rather than updating the instance's bound. However, I'm still not sure why the instance constructor returns an instance of Path and not Rectangle. I will investigate further...
As an aside I had to pull the package locally and add it to my package.json as a local file.
The test above ran ok but I got a few of these errors: "Invalid hook call"
Don't know if the issue above is related or not, but if we do another round of testing it would be good to know the correct way to include the unpublished package
Ah, sorry. I didn't realize the package was not published. Please install the latest now...