Select across multiple text elements via rectangular area JS - javascript

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

Related

jsPDF text between two elements

I am trying to insert a text between two elements in pdf via javascript. I know the coordinates of both elements and I want text to be in the middle of this two coordinates.
I have tried to find width of text and find starting point of text. However, there is not useful function to find width of text.
I solves it.
I just find width of text by using pdf.getTextWidth(text) and divided by 2. Then make a minus from y middle.

How to select Object below another Objects bounding box

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.

How to make groups invisible but their contents visible in gojs?

I've followed go.js example (http://gojs.net/latest/intro/layers.html) of using layers and now I want to modify it, so I can assign all groups to the same new layer while keeping the contents of the group in a separate layer. This seems to be working, as I can see, that depending on addLayerBefore or addLayerAfter being called the group overlay is displayed in front or behind the group contents. Now unfortunately, when I set the group layer invisible the group contents also become invisible. This is bad, as my whole idea to put the group and its contents to the separate layers, was in order to be able to add button, that toggle displaying group overlay, while keeping group contents always visible. Is there any way to achieve this functionality?
The easiest way would be to set a group's or layer's opacity to 0, instead of using the visible property of Parts or Layers.
visible has specific rules about hiding other objects, such as a Group's member parts, connected Links, etc. opacity is always only cosmetic.

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