We are developing a drawer SVG based. The user can add elements to it and so on. The elements of the SVG have theirs points saved in the database. When the application loads, the SVG is drawn properly. Here it works fine!
Now the user can move elements around and rotate them. Once those actions are made, the new points of the elements should be sent to the database. The problem with this is that using transform we are changing the user coordinate system and with that the points of all other elements.
My first thought was to iterate throughout all the SVG elements and update their points when the points of one single element changes.
What is the best practice when working with SVG?
Related
I am creating a web page that has an Azure Maps control on it. The purpose of it being a sort of snail trail of movement. I have the map rendering and am using a LineLayer with a SymbolLayer in order to draw a line from point to point and then put an arrow on the line to show movement.
Another requirement is that we are able to hover over the points on the map to see information about that specific point, but I don't seem to be finding much online about "Points" on a line.
Any idea how to access individual points in the Linestring and add attributes to them in order to show a pop up?
To accomplish what you are asking you would need to have a second data source that contains the individual points with the attribute information, then connect this data source to a bubble or symbol layer. By doing this, you can add an event to that layer.
Another, less elegant approach is to have a property in your linestring that has an array of all the attribute information for each point. Then when the user hovers the line, loop through all points in the line and calculate the distance to each point from the mouse pointer location, use the index of the closest point to do a look up in your array.
I'm trying to understand animation loops in WebGl, along with React.
Basically, does the browser repaint specific elements without repainting the whole screen? Does a a reflow always refresh the whole screen? What exactly is the difference between what happens when you manually refresh the window with a refresh button, verses what reflow or repaint? I know this technology has been around awhile, but I never really dove into it much before.
I'm just trying to to understand how a webGL code animates on a canvas element and how React changes elements on a screen, without the whole screen reloading. I've read about requestAnimationFrame, and about how React bundles and diffs virtual dom changes, reducing the number of requests for rerender, but my question is more about the entire window reloading, verses rerendering individual components only. Im building a site with gatsby/react and babylonjs, and just trying to wrap my head around the underlying concepts. Thanks.
What the browser does is somewhat undefined. You give it HTML elements, it somehow draws them on the screen. How it optimizes that process is undefined, all that's defined is what the results are kind of supposed to be like. I say "kind of" because even a simple element like <p>Hello world</p> will be rendered differently on different browsers and differently on the same browser on different OSes or in the same browser on the same OS but with different OS settings etc..
In general the browser builds a tree of nodes (the elements and their contents) called the DOM. It then walks that tree and builds whatever it needs to apply the CSS and then render those elements. Most browsers would try to cache data at various points in that process so that if something changes on the page they don't have to compute everything from scratch. Example might include they generate a glyph (The pixel for a letter), store those pixels somewhere, next time they need to draw the letter at the same size they can just use the pixels they already generated instead having to rasterize that letter from the font definition.
does the browser repaint specific elements without repainting the whole screen?
That's up to the browser.
Does a a reflow always refresh the whole screen?
That's up to the browser. If the browser has way to figure out it only has to compute a partial reflow of some branch of the tree then it might not have to refresh the whole screen.
What exactly is the difference between what happens when you manually refresh the window with a refresh button, verses what reflow or repaint?
Refreshing a window is like killing a program and re-running it from scratch. All the data has to be reloaded either from the network or from the cache, the text gets parsed into elements, etc..
Reflow is computing where all the elements belong, where words or elements wrap, what size they are.
Repaint is drawing the elements. You can repaint without reflow.
how a webGL code animates on a canvas element
A canvas is just a rectangle of pixels, similar to an <img>. The difference is you can get one of several APIs to affect those pixels ("2d", "webgl", "webgl2", "webgpu", ...)
When you change those pixels the browser knows that <canvas> element needs to be re-drawn. How it re-draws it is up to the browser but at does have to at least follow the rules of the spec so for example a <canvas> like pretty much all elements, has CSS applied (it could have border, a background image/color/pattern, rounded corners, etc....). Elements are composited on top of each other so you might have elements in front of the canvas, you might have elements behind the canvas.
Like I said above, what the browser does to draw the elements is undefined but you can certainly imagine that if it can figure out the only thing that changed is the canvas's content, and there are no elements in front of the canvas, and there is nothing behind the canvas, and the canvas is opaque, then it could, potentially, just re-draw the canvas area only.
That situation is rare though. For example, most three.js examples have text at the top positioned over the canvas (the title of the example). Many also have an FPS meter. Some have a drop down UI. All of that is drawn over the canvas so at a minimum, the new contents of the canvas have to be drawn into the window and then those other elements have to rendered on top of that.
Again, how that, happens is up to the browser. It could use software rendering to draw those elements pixel by pixel, or it's possible it has stored the contents of those elements in textures and draws them as quads on top using the GPU.
how React changes elements on a screen, without the whole screen reloading
I'm not sure what you mean by reloading. React keeps its own "virtual DOM". It then tries to apply the changes in the virtual DOM to the actual browser DOM. If there are no changes needed to some elements those elements will not be affected.
From the POV of the browser, nothing is different. All the browser sees is the DOM. If you make changes to the DOM (using React or anything else), then, once your current event exits, the browser will schedule a task to walk the DOM and re-draw the page (using optimizations to re-compute/re-draw less is up to the browser).
I want to make a layout with a flexible partitioning in ReactJS.
Elements should change their size by dragging (or equal operation).
When working with fat clients (desktop applications), it is possible to manipulate the layout of the application. E.g. is adjusting the size of a section by pushing the the left mouse button at the border of the section and keep it hold. Moving to the left or right direction will shrink or increase the size of the section. Another handy example is the cell in Excel. You can define it's size by manipulating the row or column size (thus affecting the positioning on any following columns/size).
Is this possible (in ReactJS)?
Is this a ReactJS problem? (or simply affects only CSS or any other technology?)
Let's say you adjusted
the size elements for yourself. Is it possible to save the
customization, so that I as user don't have to adjust it again?
As I found out, it isn't a specific reactjs problem. It's about JS in general.
If you want to store a customized layout with its values, you should use
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
Using Helixtoolkit you have set up a scene (viewport). Added the camera, default lights, grids, etc. You also added a SortingVisual3D where you add various box elements for example. They are rendered as they are placed in the view. Everything fine.
Now I would like to achieve is to create a new container for 3D objects where my moving gizmo would be placed (every object gets one). If I add gizmo to sorting container, it might not be visible (box overlapping gizmo), so I need a separate container which has to be rendered on top of everything.
How to set container (content) to be rendered on top of everything - regardless of its physical location while still keeping it in the correct 3d space when rotating camera. Something like 3dsmax does (example).
Tnx
Ok, found the solution myself. What you want to do is to make an overlay and transform Point3D to Point and place objects there (a canvas for example).
I am currently attempting to write a control(s) that will display a collection of elements, each of which have a start time between 0 and 1. The desired visual look we're aiming for is something akin to a simple timeline.
I've already created a FrameworkElement that renders an individual element as a line (this line represents the transition between one element and the next, e.g. y(x) = x) and my intention is to use this element as part of the DataTemplate for my custom ItemsControl. By flipping the odd elements horizontally and butting them together in a panel, it should be possible to see a continuous series of transitions between the elements. I'm having difficulty in deciding how to implement this panel, in particular with filling 'dead space' that might occur at the start of the panel.
The collection of elements that I'm trying to draw represents a looping effect, but the first element may not start at time T=0. Because the effect loops back on itself this means that the gap between T=0 and the first effect's start time is actually made up of the final part of the last element in the collection. This means I have to find a way of chopping up the last visual element in the panel so that the front part sits at the end of the panel and the back part sits at the start.
Another way to think of this is in terms of a circle/pie chart - if element A starts at 15% and element B starts at 50%, element B would occupy the regions 50-100% and 0%-15% continuously.
I'm really looking for a way to get this done in WPF visually rather than by modifying the collection of items (e.g. by adding a fake 'padding' element between 0 and the first element) as this would create complications down the line when it comes to things like modifying/selecting items, etc.
Someone has suggested drawing this as a 0-1 effect (removing any offset on the first element if there is one) then recreating the offset using a pair of cameras/viewports, which is something I'm not familiar with and seems a bit overkill. Can anyone suggest a simpler or more elegant way?
The 3D XAML question posed below contains code that achieves the kind of effect I was looking for, with some modifications. I set it up as an orthographic camera and made the position and texture co-ordinates of the MeshGeometry3D into dependency properties:
Why does TextureCoordinates work as expected for a Viewport2DVisual3D, but not for a GeometryModel3D?