https://futureofcoding.org/ logo
Join Slack
Powered by
----TODAYS DEVELOPMENT COMPLAINTS---- Context: I’m...
# thinking-together
g
----TODAYS DEVELOPMENT COMPLAINTS---- Context: I’m reimplementing a dragbox select a la: https://simonwep.github.io/selection/ or many other libraries because I need to deal with elements that are overlapping (I’m using it for dom element selection, but you could imagine selecting items in an outline and you’d have 60% of the hairiness). ---ISSUES IN THREAD BELOW---
1. I’ve looked at four or five of these libraries and every single one of them implements its own, slightly unique logic for: a. handling/drawing the box when you drag select/making it disappear on mouseup. this seems like it should really be much simpler, but like with the convivial talk on dealing with SVG for modeling object models ( 

https://youtu.be/uXv_386TyqY?t=1419▾

 ) the DOM gives you very specific handles on geometry for mouse moves (weird choices off offsets, no other options) b. wrappers/callbacks for the javascript event model for mice and keyboards. it always feels so, so wrong. I don’t know quite how to describe this: it’s like a lego kit where you have to mix chemicals and mold 20% of the bricks yourself. You’re constantly interrupting every single mouse move or click to check a condition. Shouldn’t this be more of a “bidirectional” relationship? where you can put the “if” block outside the mouse move?? I certainly dont personally think “am i holding a knife?” every single time I move my arm—not sure if this analogy makes sense.
➕ 1
2. Github’s new-ish “jump to definitions” feature is just good enough to make reading other peoples code clearer, but it’s like getting a moment of clarity where you realize you’ve become way more inebriated than you intended. What am I doing here? Why does this jump me out of my context instead of opening the function in a sidebar? Why doesn’t this pop open a console and let me test values with each function definition in some kind of reasonably scoped way? Why don’t example uses of libraries contain a little collapsed and interactive debugger of the library tools running with example input?
the getBoundingClientRect API feels like it was designed by a sphinx who lost its job during the recession and got pressured into learning to code
😂 2
on the off chance anyone around here is really into tree querying algorithms: I’m trying to grab and copy DOM elements out of the browser with a homemade box-select extension—which has some issues because the DOM is a tree, so if you drag select over a parent and its children I end up double-counting children (because their nodes are still attached to their parents). i suspect there are better ways to do this (either algorithmically, or using some APIs I don’t know about). If anyone has any feedback please let me know in this thread!
j
Let me see if I understand: You’re using the mouse to select a rectangle, and checking all of the dom elements to see if they live inside of that rectangle, and including the ones that do, along with their children? A few ideas: • Can you just ignore children? • What about: for each element you find in the rectangle, walk up the parent tree until you find a node that doesn’t live in the rectangle. The node before that is a top-level parent in your rectangle. If you find all of the top level-parents, and include all of their children, then you’ll probably not have the duplication issue. I’d be concerned about elements that don’t have boundingRects inside of their parent’s boundingRect, though (I think using 
transform
can probably cause that). But if you’re including children regardless already, then you’d already have that problem. • I think a more robust way to do this might be to walk the tree once (or on updates) and build a quad tree, or other space-partitioning lookup. Then you wouldn’t have to rely on parent-child relationships at all.
g
I’ve been considering the quad tree as a last resort. there are a bunch of issues pushing me that way, like the fact that it’s not just 
transform
, you can have 
pre
selectors and negative margins screwing around
your description of the tool is exactly right. i’m trying to let people box-select and copy dom nodes so that they can essentially drag pieces of webpages into their own notetaking app while preserving styles
it’s a kind of pruning, which is a lot like depth-first traversal
my main concern is situations like this one (ignore the writing)
where I’d want to select the last child of the first parent, and only the first two of the second. working with the native dom structures is giving me brain fog. i think the quad tree is the right idea
thanks!
… it’s a quad interval tree. i feel like im doing a coding interview
the other issue is that if i throw out all the children, I have to hunt through every selected node and rehook it to its parent at the end of the process, which feels like duplicated work
2 Views
Open in Slack
PreviousNext
Powered by