admin/ucvl-home-vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 43 Wiki Activity

Use pointer-based monitoring wall drag for mouse and touch

Browse Source
This commit is contained in:
Codex
2026-10-03 18:36:58 +08:00
parent 38fad1a46d
commit de6eae176d
4 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/monitor.js
+19 -4
View File
@@ -46,10 +46,25 @@ document.addEventListener('keydown',e=>{
if(e.key==='Escape'&&document.fullscreenElement===$('#page-live'))document.exitFullscreen().catch(()=>{});
});
setInterval(()=>{$('#wall-clock').textContent=new Date().toLocaleString('zh-CN',{hour12:false});},1000);
document.addEventListener('dragstart',e=>{const h=e.target.closest('[data-wall-drag]');if(!h)return;wallDragging=h.dataset.wallDrag;e.dataTransfer.setData('text/plain',wallDragging);e.dataTransfer.effectAllowed='move';});
$('#live-grid').addEventListener('dragover',e=>{if(wallDragging&&$('#wall-arrange').checked)e.preventDefault();});
$('#live-grid').addEventListener('drop',e=>{const c=e.target.closest('.camera-card');if(!c||!wallDragging)return;e.preventDefault();wallMove(wallDragging,c.querySelector('video').dataset.camera);wallDragging='';});
document.addEventListener('dragend',()=>wallDragging='');
let wallPointer=null;
function wallDragEnd(){wallPointer=null;wallDragging='';$$('.wall-drop-target').forEach(c=>c.classList.remove('wall-drop-target'));}
$('#live-grid').addEventListener('pointerdown',e=>{
const handle=e.target.closest('[data-wall-drag]');if(!handle||e.button!==0||!$('#wall-arrange').checked)return;
e.preventDefault();handle.setPointerCapture(e.pointerId);wallDragging=handle.dataset.wallDrag;
wallPointer={x:e.clientX,y:e.clientY,id:e.pointerId,moved:false};
});
$('#live-grid').addEventListener('pointermove',e=>{
if(!wallPointer||wallPointer.id!==e.pointerId)return;
wallPointer.moved ||= Math.hypot(e.clientX-wallPointer.x,e.clientY-wallPointer.y)>8;
$$('.wall-drop-target').forEach(c=>c.classList.remove('wall-drop-target'));
if(wallPointer.moved)document.elementFromPoint(e.clientX,e.clientY)?.closest('.camera-card')?.classList.add('wall-drop-target');
});
$('#live-grid').addEventListener('pointerup',e=>{
if(!wallPointer||wallPointer.id!==e.pointerId)return;
const target=document.elementFromPoint(e.clientX,e.clientY)?.closest('.camera-card')?.querySelector('video')?.dataset.camera;
if(wallPointer.moved&&target)wallMove(wallDragging,target);wallDragEnd();
});
$('#live-grid').addEventListener('pointercancel',wallDragEnd);
document.addEventListener('click',e=>{
const b=e.target.closest('button');if(!b)return;
if(b.dataset.wallBefore||b.dataset.wallAfter){const ids=wallOrder.filter(id=>filtered().some(c=>c.id===id)),id=b.dataset.wallBefore||b.dataset.wallAfter;wallMove(id,ids[ids.indexOf(id)+(b.dataset.wallBefore?-1:1)]);}