We Keep Coding

Detemine all elements at a given point js

I am working on an API that use shapes (and irregular) shapes to build websites. My problem is where I can provide a div that can carry as a background to irregular shapes so .
However to do this I would need to know the max area the object is taking up by having the max height and width.
I am aware that element.getBoundingClientRect does this but my roadblock is that is does not consider any psuedo elements, which is how most of these shapes are made.
I know when working with the CSS transform property, especially using scale, the browser knows to resize the whole shape including the pseudo element that makes up the shape.
It also uses the border-box coordinate system.
However the browser does not provide this information as it comes from the user agent
My main question is how do I access the dimensions the user agent computes for any given element, or how do I find the proper dimensions of a 'getBoundingClientRect' that considers an elements psuedo classes
My shapes can be found in the attached links.
httpsmichaelodumosu57.github.iosigma-xi-mu
https://css-tricks.com/examples/ShapesOfCSS/
I can't afford to use any other method to create my shapes because I have limited time on the project, but I do know that the browser can provide me with the information I am looking for.

Yes I have answered my own question. What you want to do is to scale the image to a very small since (since transform scale() works perfectly) and place it in a grid box (this could be a div of small size as well. You would run document.elementsFromPoint(x, y)
(notice the pluralization) on every point in the div containing you shrunked irregular shape and from there you can find the height and width of its bounding box by the difference of the highest range of their respective coordinate values. To center you must place your irregular shape in the bounding box of the background drop with the re-scaled dimensions (remember your skrunked your irregular shape to find them) and have the margin of the inner shape set to zero. This works only if your real (not pseudo element) is to the left most of the screen. Question is how do you position your background when your irregular shape is not properrly centering inside of it?

You can use document.elementFromPoint(x, y) for getting the element that exists in specific point, but I have not tested it for any kind of shapes.

Make Cytoscape.js container just wide enough and just long enough

I am rendering several tree layouts in separate canvases using Cytoscape.js.
Currently, each canvas is enveloped by a container div with set dimensions (e.g. 400x400). Cytoscape offers a setting to fit each tree into its container, and will zoom in an out of each tree to the extent necessary to make the full tree visible within the given dimensions.
Instead of telling each layout to fit the container, I would like to instead resize each container to accommodate its child canvas perfectly. In other words, I need a way of asking each instance of the Cytoscape canvas, "What width and height would you be at 0 zoom", or "how many pixels do you need in each direction to draw fully", and then resize each container appropriately.
Cytoscape does offer methods to get the canvas's width() and height(), but those end up being the actual dimensions (which may not fit the container), instead of the "desired"/needed dimensions.
It occurred to me that I could come up with some heuristic to set the container's width and height based on the number of nodes and edges, but this approach hasn't proven fruitful yet; the number of nodes and edges tells me little about the final layout and arrangement, which alone informs decisions about desired width and height.

Have you tried using:
eles.boundingBox(options);
or:
eles.renderedBoundingBox();
'eles' has to be this:
var eles = cy.elements();
You can get two information about your nodes via the cytoscape methods mostly:
The actual position in cytoscape and it's rendered position, read this article for more information:
http://js.cytoscape.org/#notation/position
To your second question:
Aligning your tree is quite easy if you just call
cy.fit(/*eles, padding*/); // Pan and zoom fitted to the tree
cy.center(/*eles*/); // Moves the graph to the exact center of your tree
cy.elements().shift('x', offset); // Moves the nodes to the right, offset must be negative to move them to the left

Create HTML grid from output of rectangle packing algorithm

I'm using the rectpack python library to obtain the optimal rectangle packing positions for div elements that contain d3 charts. I have the height, width, bottom-left corner x coordinate, bottom-left corner y coordinate for the div elements on a 1200px wide canvas that looks like the plot below.
Note: Due to the nature of the project I have to iframe the d3 chart HTML in my grid. I only have the width and height info for the charts and they may also be later replaced by another kind of charts like bokeh chart HTML outputs for example. So, positioning the divs is my only options for this.
I need to translate this into a HTML grid but since I'm not a web developer I'm kind of stuck as to how to create such a grid with the information above. I'm using the jinja2 templating engine to create this. However, I'm stuck trying to position the divs exactly since there doesn't seem to be an obvious place to add the position information outside css. But since each element is unique, dynamically creating css for each element doesn't seem to be optimal.
What would be the best approach in this scenario?

Zoomable background for cytoscape js

We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards

You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.

Raphael repeat background pattern

I would like to have a repeated pattern of squares (a little like a blueprint) as a background to the entire SVG element. I am using Raphael. How can I accomplish this?
I want to do this with SVG rather than images as I pan / zoom the SVG using SetViewBox and I would like the background to scale appropriately too.

One option is to render those squares the usual way, via paper.rect(). Might be expensive, though, and would take some maintenance if the canvas can grow in size.
The other option is to do a patterned fill, paper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"}); (see this tutorial), which should automatically repeat the image it is given. I haven't done that myself, though, so I'm not really sure how the pattern is scaled when you do SetViewBox().