Open AmoebeLabs opened 1 year ago
I know you have a lot of work already done but is there any progress tot be expected from this? I would really help extending mu button functionality (e.g. browser_mod popup with a long press). Can I alternatively also use the drag action as a work around so I could slide over a a button (not a slider) to get a different action than tap_action e.g. on your comment in the helper files: "fill: rgba(0,0,0,0) for 'invisible' backgrounds for circles/rectangles that need interaction!" Can i make a "drag"movement over the rectangle to initiate a different action than the tap action?
The Problem To Be Solved
The current tools implement just two actions:
Adding some other actions could extend the usage of some tools:
As these actions have relations, you must delay the single-click event as you wait for a double-click, only an integrated solution will work that can handle and distinguish all these events on a single tool!
Additional background:
Related Issues (if any)
(Optional): Suggested Solution
There is a
dblClick
event, but the internet (read: Google, Bing, CanIUse and ChatGPT) don't agree on the fact if this is supported by Android mobile devices...Solution 1
While discussing this with ChatGPT, the following integrated basic event logic was created:
Of course, this does NOT take into account all the browser dependencies and how Lit works. Click and Touch (mobile) event propagation is not blocked as you can see in the above examples. But at least this can be a start for experimenting.
Furthermore, ChatGPT gives me two event handlers for 'mousedown', which obviously should be integrated I think.
I can check both Chrome/Edge on Win11 and Mobile Safari on my iPhone and iPad. I can't check Safari and Android (which is basically Chrome with some exceptions), but in general, it will be fine.
The ChatGPT questions I asked were as follows (ChatGPT not always understand me right...)
Solution 2
Solution 1 gave me two
mousedown
eventhandlers, so I asked ChatGPT to:This time, ChatGPT gives me a completely different implementation, where the hold-repeat-drag is time-limited. Also, hold will cancel drag, which is not what I want. If I push a button and hold it for repeat, I still want to be able to drag the mouse/finger to influence the repeat timer!
const element = document.getElementById('myElement');
// Handle click event element.addEventListener('click', function(event) { if (clickTimeout !== undefined) { // A click has already been registered // This is the second click - handle as a double click clearTimeout(clickTimeout); clickTimeout = undefined; console.log('Double click detected!'); } else { // Register the click and wait for another click clickTimeout = setTimeout(function() { clickTimeout = undefined; console.log('Single click detected!'); }, 250); } });
// Handle hold and repeat events element.addEventListener('mousedown', function(event) { const startTime = Date.now(); let interval = 500; let speed = 1; holdTimeout = setTimeout(function() { clearInterval(repeatInterval); repeatInterval = setInterval(function() { const timeElapsed = Date.now() - startTime; const dragDistanceX = Math.abs(dragStartX - event.clientX); const dragDistanceY = Math.abs(dragStartY - event.clientY); const dragDistance = Math.max(dragDistanceX, dragDistanceY); speed = Math.max(1, Math.floor(dragDistance / 10)); interval = Math.max(200, Math.min(500, 1000 / speed)); console.log('Hold and repeat with speed:', speed, 'and interval:', interval); }, interval); console.log('Hold detected!'); }, 500);
const checkHold = setInterval(() => { if ((Date.now() - startTime) >= 500) { clearInterval(checkHold); element.removeEventListener('mousemove', handleDrag); isDragging = false; } }, 100);
const handleDrag = (event) => { if (isDragging) { const dragEndX = event.clientX; const dragEndY = event.clientY; const dragDistanceX = dragEndX - dragStartX; const dragDistanceY = dragEndY - dragStartY; console.log('Dragged by: (' + dragDistanceX + ', ' + dragDistanceY + ')'); // Perform some action in response to the drag movement } };
element.addEventListener('mousemove', handleDrag); });
element.addEventListener('mouseup', function(event) { clearInterval(repeatInterval); clearTimeout(holdTimeout); isDragging = false; element.removeEventListener('mousemove', handleDrag); });
(Optional): Alternative Solutions
The current click and drag handling is already custom-made for this card as libraries just didn't work with mobile Safari, ie Touch events, so the solution above seems to go in this direction too!
For instance, the following explanation is exactly how the current drag for sliders is implemented by me already: