I'm currently trying to learn ReactJS and wanted to work on a little project to ensure I've learnt the fundamentals .
The structure of my ReactJS application is something like this:
<App>
<MainCanvas/>
<CommandPanel>
<CommandButton/>
<CommandButton/>
<CommandButton/>
</CommandPanel>
</App>
MainCanvas contains an HTML5 Canvas. CommandPanel passes a prop down to each CommandButton. Inside the CommandButton.js file, I have an array of objects which serves as a lookup to tell the button what text to render. All the components here are functional components and sit in their own JS file.
In addition to this, I also have another JS file called 'CanvasFunctions.js' which contains some routines that draw lines on a canvas. Let's say it has two functions: DrawCircle and DrawSquare.
What I'd like to do on click of the buttons, trigger a function in the CanvasFunctions.js file that draws onto the canvas. Also note that I'd like to have access to the path information in the future so I can modify the paths by moving them around the canvas. When I click one button it triggers the DrawCircle function. Then I can click the next button and it triggers the DrawSquare. The square should be drawn on top of the circle and not clear the canvas. However, I'm not sure what the correct way of going about this is.
There was a lot of useful information here, however, all the code is under a single Canvas element and given what I'm trying to do, I don't think I should be coding it that way.
This seems to be very similar to what I'm trying to do.
Do I pass down a callback function in App down through CommandPanel to each CommandButton (adding it to the lookup object so I can generate these buttons dynamically) that gets called with onClick? If so, how do I get App to trigger a function on MainCanvas? It also doesn't seem to be the "correct" way of doing this. My understanding is that parents need to pass props to children and callbacks. They shouldn't be triggering methods in children components.
Could someone point me in the right direction of what I should be doing?
Thanks
Edit: Been thinking about this some more. Maybe a restructuring of my application? Moving the CommandPanel into the MainCanvas. That way, I can set up functions inside MainCanvas and pass them via props to the CommandButton elements below. Maybe that would be a better approach? And if it is the way to do it, how do I set the names of the callback functions into the lookup object so I can only pass one prop to the button and lookup the name of the callback function from the object?
Related
I have just started working on react-spring. From the very beginning, I have seen the usage of '''<animated>''' tag. As, I explored more and complexity increases, I find more and more details of the code which I do not fully understand.
For example, Just have a look at this sandbox-
https://codesandbox.io/s/stupefied-noether-8i6o0
I am still not clear how the key variable passed to animated tag is working under the hood. Moreover, is there is an exhaustive list on which parameters can I pass to animated tag?
Also, is there any good tutorials/resources to understand react-spring in detail? The official document though is quite helpful, doesn't provide enough resolution on micro details of each aspect of it's function.
The key prop is not directly related to react-spring, in your example you can see that string which is an array uses the map() function to map and render animated divs.
key is used by React in order to be able to track those elements between changes and be able to determine whether the virtual DOM needs to generate those elements again as a whole or only the new ones that are added. More about keys and lists can be found here.
For more info about react-spring you might find some more information here, if you have something specific you would like to achieve feel free to make a question about it, playing with the library and experiencing it yourself will probably be the best way to learn about it.
I'm relatively new to the Angular 2.0+ world, and I'm facing a question about template design. I'm sure there's an Angular way to do this; I just didn't find a clear answer yet.
So, the idea is that (see the attached image) I've the red component, that has to be included in many parts of the application. The red component has some styles, inputs and outputs that are gonna be the same for the whole app. But inside the red component there must be embedded three components that will vary depending on where the red component is placed.
For example, imagine the red component is the container for a detail page. If it's placed in the detail page of the entity A, green component will be a map, yellow an image and blue a read more button. All of those components must have inputs, outputs and probably references so they can be manipulated using view childs.
If the red component is placed somewhere else, then those three components will be different. And there could even be just 2, not three components.
Does someone has a clue on how to design the red component so it's reusable and can fit my necesities? Thanks a lot, and please let me know if more explanations are required for my problem to be understood.
In this case you can use named ng-content, where you can more than one component as its container data and pass input/events/style or whatever you want to pass for example -
<red-component>
<yellow-component></yellow-component>
<blue-component></blue-component>
<green-component></green-component>
</red-component>
https://medium.freecodecamp.org/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691
From looking at the code, it seems that three does not give much control over the depthFunc. I would like to confirm that it's only set once as the default GL state, and not available say, in the material?
I'm not familiar with all examples, and was wondering if this is happening somewhere?
If not, what would be the best approach to set the depthFunc to gl.EQUAL for example, when a specific draw call is being made i.e. a mesh with a material?
Is something like toggling between scenes i.e. use one to render stuff, then use another one to render stuff on top of the first one a good solution for this? That's the only example that i've seen of tweaking the otherwise sorted objects.
It's currently in the dev branch of three.js: the pull request.
Before creating tree I use canvas to draw some icons (plus, minus, node. etc.). Then I put images to object and stop using canvas. Like this:
var imgFromCnvs = NewElem.toDataURL("image/png");
var ElemIdName = 'treeVLineLast';
treeEl.imgs[ElemIdName]=imgFromCnvs
Then I use them in background images on the tree:
NewElem.style.backgroundImage = 'url("'+treeEl.imgs.treeVLineLast+'")';
So, as I understand, it extremely enlarges data amount on page, because I place data from object strictly to every element instead of using link to it. Since there can be hundreds or even thousands tree elements in a tree, it will cause some memory issues, I think.
I guess, it could be the best way to use link to data in the object somehow, but I do not know how. May be, create some new element?
Is there any way to solve this problem?
P.S.: I'm learning JavaScript and need to understand the basics without using any libraries.
I want to create an application where a user can click an object then can rotate it. I am using three js to create this application. Currently I'm stuck because I have an object and I used a callback function to do stuff when an object is clicked.
I'm using the same idea as shown in the following link for finding the clicked item:
Clickable three Js Objects / Convex Items
The problem is getting the object to rotate after it is clicked. I also have multiple objects, so each object has it's own callback function.
I have also found an example which I shows the rotation of a cube, but I haven't found any where an object is clicked and then some is done to it. Thank You in advance.