How to select Object below another Objects bounding box - javascript

I'm working on a Tumult Hype (Javascript) project to select items that share overlapping space (if their Bounding Boxes are taken into consideration).
For instance, the Orange Triangle's bounding box is represented by the Red Outline. Is there any way/logic that would enable selecting the Green Triangle when it is below the Orange Triangle?
My original idea was to use the Path in an SVG based on it's ID. This works perfectly to select an unusual shaped Object and ignore it's bounding box. But, the Bounding Box still disallows selecting the lower level DOM Object.

The solution to this problem is to NOT use separate Objects (SVGs). Create 1 SVG that has all the Objects with unique paths that can be selected using their ID.

Related

Select across multiple text elements via rectangular area JS

I don't want to use the device's native text selecting ability, rather I want to replace it with my own method. How can I select text across multiple elements based off of coordinate positions on the page?
Basically, I have the results of Touch clientX/clientYs to make a rectangular area and I want to select all the text contained in that area
I've tried using absolutely-positioned elements and creating a range with those elements as the bounding start and end but it did not work.
I found these two methods that can be used to construct a range that can be added to the window selection.
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint

Draw an outline around a group of objects that surrounds the objects drawn area (not a bounding box)

I am trying to figure out a way to draw an outline around the area of a group of items as illustrated hopefully clearly in the sample image.
The idea is a user creates a bunch of rectangular objects always adjacent (vertically/horizontally), groups them together and then clicks a button to create the outline. I cannot figure out the outline part.
My only idea so far is to perhaps export the group to SVG and then manipulate it somehow (eg. add a thick border and use a clipPath to keep only the outer part of the border). Not even sure this idea is right because my SVG knowledge is kind of limited. Perhaps this can all be done in the context of fabricjs or with the help of an additional library?
(Using fabricjs 3.6.3)
Sample of outline around drawn area of objects
Scenario with group of objects where an object is in landscape position

The FabricJS selection box is shifted when the canvas is transformed

I am using FabricJS and I am trying to have two canvases next to each other which behave like one. So I can drag objects between them.
My idea was to shift the viewport of the second canvas about the size of the first and then add the same objects to both of the canvases.
Here you can see what I did so far:
https://jsfiddle.net/ytdzo38h/
The selection box for the object is now shifted and therefore the object can't be grabbed in both canvases.
I found out that canvas.wrapperEl.getBoundingClientRect()gives back the coordinates of the selection box, but I have no idea how I could adjust that to fit my needs. I would really appreciate your help :)

three.js drag multi objects

I made an 3D space with Three.js like in this example http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html
The next target is to enable user to select and drag/move multiple objects at a time.
I wonder if the enhancement of current implementation of the example can make it that way or I need a different implementation?
Thanks in advance.
You could use the bounding box of each object that you're selecting, then raycast a cube that matches that combined bounding box, move that big box and apply the position change to the selected objects.

Getting the bounding selection rectangle of UIWebView

How do we get the on-screen location of a selection in UIWebView? That is whenever the user selects some text and the system displays the selection box, I want to know what is the bounding coordinate of the rectangle in screen (or view) units.
The reason for this that I want to display a UIPopoverController that has an arrow pointing to the selection rectangle.
I've tried getting the selection via the JavaScript call window.getSelection() but it seems that both the resulting Selection and Range JavaScript objects could not point to the exact screen (or document) relative point (pixel) coordinate since they are not atomic DOM nodes.
Thanks.
See my answer here: How to get coordinates (CGRect) for the selected text in UIWebView?
Basically, you call getBoundingClientRect() on the selected text range.
You can't get the physical location of the highlighted range of text from a UIWebView.
The reason for this that I want to
display a UIPopoverController that has
an arrow pointing to the selection
rectangle.
That is not what UIPopoverController is for. This is non-standard so it will confuse users and might get you rejected by Apple in the approval process.

Categories