I'm creating a MS Paint replica. After a week of messing around with React states, I wanted to go with Redux. The problem I think of is: How can I pair a reducer which must be pure, with a canvas context which basically has its own state (what is drawn on it)? I see two options here:
Do I need to recreate canvas context every time the state changes? If so, I do think this is really redundant practice.
Or can I just carry the context between states and use its methods to draw in reducers as I'd usually do? But this makes my reducers impure as I understand.
Thank you.
I'm assuming the canvas context can't be easily serialized and it's not the "source of truth" in terms of application state (rather an object created by the native browser api). Therefore I'd only use redux to have undo/time travel functionality. Your reducer would only hold a history of drawing actions. Replaying those on an empty canvas should restore the state of the app.
The canvas represents the UI of your application, and shouldn't be kept in the store itself. Since a canvas retains whatever pixels have already been drawn, what you probably need to do is re-execute your drawing logic whenever the store has been updated.
There's a pair of posts out there that demonstrate how to use a Redux store to drive drawing on a canvas as the UI:
A Functional Canvas Approach with Redux, Part 1
A Functional Canvas Approach with Redux, Part 2
I've chosen to store ImageData (getting it via context getImageData method) in Redux store. This keeps the store serializable and immutable. I face some troubles with performance though, because getImageData and putImageData are very slow, so I need to update ImageData in my store as rarely as possible.
Related
I'm having trouble with a graph I'm building with React-ChartJS-2:
I've got two line charts in one canvas, one of them is interactive (the user can activate points and can compare different values on that graph) the other one is just a static graph which should be a orientation for the user. I'm trying to prevent the rerendering of the static graph if the user activates datapoints on the interactive graph (which changes the props and thus the useMemo Hook doesnt work). Is there a way to separate the two datasets in two single components so the props don't change for the static graph without some hacky CSS?
Thank you in advance!
I kinda found a solution by deactivating the animation so the user doesn't see the rerendering, but it's not the nicest I guess. Right now I'm trying to render the two line Charts and try to stack one on top of the other with CSS
Hi There #Lucas2101 it would be easier to answer your question with a code example. What is the reason you need the useMemo hook. And to answer one of your questions the useMemo hook runs when the items in the dependency array update so it might be that you haven't added the correct thing to that array. I can't say for sure as i have no code.
The documentation of React Native describes LayoutAnimation like so:
Automatically animates views to their new positions when the next
layout happens.
I don't understand why this API is needed when the Animation API already can do this.
Why / when should I use the LayoutAnimation API?
I read about it here, and it says that:
LayoutAnimation works by identifying views by their unique key,
computing their expected position, and relying on the underlying
native framework (CoreAnimation on iOS) to animate the change. Frame
changes are animated as long as the view keeps the same key between
state changes. Opacity and Scale are the only additional properties
supported, but it is possible to add a few more such as
backgroundColor and transformations.
ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this gets messy fast.
As said here:
Use the Animated API and handle all the movements ( which in this case
are simple to be fair ) between the two modes in a relatively
complicated way by having one view move off screen when the other
comes in and vica versa. ( I would explain how but this article is not
about Animated ).
Use the LayoutAnimation API to essentially configure how changes in
the layout are to be handled.
LayoutAnimation handles the way layout changes are handled every time the screen ( or part of it ) is re-rendered. What this means is that every time you call setState in your code and that results in your views changing position LayoutAnimation can be used to animate the way your views move to their new positions. For example in the Login/Logout scenario I have a simple function that toggles a flag that decides whether to show the login view or not.
I am having a problem with list/scroll views in big screens.
In the application there is a scroll component who queries for more rows when its end is reached. However, when the screen has big enough resolution, the initial query is not enough to generate the scroll bar, and thus, the event is never triggered.
The team agrees that because of the instability of the Dimensions module in React Native, a better solution would involve already implemented abstractions instead of getting the screen's dimension with the mentioned module.
What could be a good solution to the problem? I hope I was clear.
Thanks in advance.
My solution was to query when the 'layout' event was fired. I did this through the 'onLayout' and 'onContentSizeChange' props. They store the heights of the list and the component, which made me able to compare both and query for more data.
I have a SceneKit game that I'm attempting to integrate with GameplayKit.
In order for GameplayKit to work, I need to update my components and entities by calling their updateWithDeltaTime(seconds:) method.
In the SpriteKit/GameplayKit examples I've seen, this is done using the SKScene's update method which fires continuously with no input from the user or the developer.
It seems that in SceneKit, to achieve something similar I need to call the SCNSceneRendererDelegate method renderer(renderer: updateAtTime time:).
However, this only fires when something in the scene is running, such as an SCNAction. But in my game, nothing is running until the user swipes.
Is there another, recommended SceneKit way to hook into some sort of run loop that runs continuously without any sort of prompt?
By default, SceneKit doesn't run the animation loop unless it knows there's something animating. That can include actions, animations, or physics.
If you want the animation loop to run without any of those things going on, set the view's playing property to true.
Is there a good way of updating the values displayed in an ExtJS 4 PropertyGrid many times a second?
Calling setSource works, but it triggers a full re-render of the component, hammering the component layout and making things like scrollbars unresponsive.
I must say I never used propertyGrids that much but in case o high frequent changes I would directly write to the dom and ensure (along with each writing or a trigger) that no events gets bubbled up to ExtJS.
Anyway, I am pretty sure that any change to the bound store will also affect the value. setSource is just a way to apply data that get also inserted into the store. But this will always change all and I guess override any existing data (the last I don't know for sure)
But you can also use setProperty to change a single property. May that one is enough. Worth a try.