diff --git a/index.js b/index.js index abd0d53..fca0ac2 100644 --- a/index.js +++ b/index.js @@ -1 +1 @@ -"use strict";(()=>{var p=(e,t)=>{let i=e.previousElementSibling,r=e.nextElementSibling,o=getComputedStyle(e.parentElement);(o.flexDirection.indexOf("reverse")!==-1?-1:1)*(t&&o.direction==="rtl"?-1:1)===-1&&([i,r]=[r,i]);let s=getComputedStyle(i),a=getComputedStyle(r);if(t){let l=i.offsetWidth,n=l+r.offsetWidth,c=Math.max(parseInt(s.minWidth,10)||0,n-(parseInt(a.maxWidth,10)||n)),d=Math.min(parseInt(s.maxWidth,10)||n,n-(parseInt(a.minWidth,10)||0));return h=>{let m=Math.round(Math.min(Math.max(l+h,c),d));i.style.width=m+"px",r.style.width=n-m+"px",i.style.flexShrink=r.style.flexShrink=1}}else{let l=i.offsetHeight,n=l+r.offsetHeight,c=Math.max(parseInt(s.minHeight,10)||0,n-(parseInt(a.maxHeight,10)||n)),d=Math.min(parseInt(s.maxHeight,10)||n,n-(parseInt(a.minHeight,10)||0));return h=>{let m=Math.round(Math.min(Math.max(l+h,c),d));i.style.height=m+"px",r.style.height=n-m+"px",i.style.flexShrink=r.style.flexShrink=1}}};var u=e=>+e.replace(/\s+/g,"").match(/^keyboard-movement:([+-]?\d*(?:\.\d*)?)$/)?.[1]||2;addEventListener("keydown",e=>{let t=e.keyCode,i=e.target,r=i.parentElement;if(!r||e.ctrlKey||e.metaKey||e.altKey||t<37||t>40||i.getAttribute("role")!=="separator")return;let o=r.getAttribute("data-flex-splitter-vertical");if(o!==null){let a=t===38?-1:t===40?1:0;a&&p(i,!1)(a*u(o)),e.preventDefault();return}let s=r.getAttribute("data-flex-splitter-horizontal");if(s!==null){let a=t===37?-1:t===39?1:0;a&&p(i,!0)(a*u(s)),e.preventDefault()}});addEventListener("pointerdown",e=>{let t=e.target,i=t.parentElement;if(!i||!e.isPrimary||e.button!==0||t.getAttribute("role")!=="separator")return;let r=i.hasAttribute("data-flex-splitter-horizontal");if(!r&&!i.hasAttribute("data-flex-splitter-vertical"))return;let o=e.pointerId,s=p(t,r),a=r?n=>n.pointerId===o&&s(n.clientX-e.clientX):n=>n.pointerId===o&&s(n.clientY-e.clientY),l=n=>{n.pointerId===o&&(t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",l),t.removeEventListener("pointercancel",l))};a(e),t.addEventListener("pointercancel",l),t.addEventListener("pointerup",l),t.addEventListener("pointermove",a),t.setPointerCapture(o),e.preventDefault()});})(); +"use strict";(()=>{var p=(t,n)=>{let i=t.previousElementSibling,r=t.nextElementSibling,o=getComputedStyle(t.parentElement);(o.flexDirection.indexOf("reverse")!==-1?-1:1)*(n&&o.direction==="rtl"?-1:1)===-1&&([i,r]=[r,i]);let s=getComputedStyle(i),a=getComputedStyle(r);if(n){let l=i.offsetWidth,e=l+r.offsetWidth,c=Math.max(parseInt(s.minWidth,10)||0,e-(parseInt(a.maxWidth,10)||e)),d=Math.min(parseInt(s.maxWidth,10)||e,e-(parseInt(a.minWidth,10)||0));return h=>{let m=Math.round(Math.min(Math.max(l+h,c),d));i.style.width=m+"px",r.style.width=e-m+"px",i.style.flexShrink=r.style.flexShrink=1}}else{let l=i.offsetHeight,e=l+r.offsetHeight,c=Math.max(parseInt(s.minHeight,10)||0,e-(parseInt(a.maxHeight,10)||e)),d=Math.min(parseInt(s.maxHeight,10)||e,e-(parseInt(a.minHeight,10)||0));return h=>{let m=Math.round(Math.min(Math.max(l+h,c),d));i.style.height=m+"px",r.style.height=e-m+"px",i.style.flexShrink=r.style.flexShrink=1}}};var u=t=>+t.replace(/\s+/g,"").match(/^keyboard-movement:([+-]?\d*(?:\.\d*)?)$/)?.[1]||2;addEventListener("keydown",t=>{let n=t.keyCode,i=t.target,r=i.parentElement;if(!r||t.ctrlKey||t.metaKey||t.altKey||n<37||n>40||i.getAttribute("role")!=="separator")return;let o=r.getAttribute("data-flex-splitter-vertical");if(o!==null){let a=n===38?-1:n===40?1:0;a&&p(i,!1)(a*u(o)),t.preventDefault();return}let s=r.getAttribute("data-flex-splitter-horizontal");if(s!==null){let a=n===37?-1:n===39?1:0;a&&p(i,!0)(a*u(s)),t.preventDefault()}});addEventListener("pointerdown",t=>{let n=t.target,i=n.parentElement;if(!i||!t.isPrimary||t.button!==0||n.getAttribute("role")!=="separator")return;let r=i.hasAttribute("data-flex-splitter-horizontal");if(!r&&!i.hasAttribute("data-flex-splitter-vertical"))return;let o=t.pointerId,s=p(n,r),a=r?e=>e.pointerId===o&&s(e.clientX-t.clientX):e=>e.pointerId===o&&s(e.clientY-t.clientY),l=e=>{e.pointerId===o&&(n.removeEventListener("pointermove",a),n.removeEventListener("lostpointercapture",l))};a(t),n.addEventListener("lostpointercapture",l),n.addEventListener("pointermove",a),n.setPointerCapture(o),t.preventDefault()});})(); diff --git a/src/pointer.ts b/src/pointer.ts index 3c2f598..9da0ed5 100644 --- a/src/pointer.ts +++ b/src/pointer.ts @@ -17,18 +17,16 @@ addEventListener("pointerdown", (pointerDownEvent: PointerEvent) => { ? (event) => event.pointerId === pointerId && move(event.clientX - pointerDownEvent.clientX) : (event) => event.pointerId === pointerId && move(event.clientY - pointerDownEvent.clientY); - const onPointerUp = (event: PointerEvent) => { + const onLostPointerCapture = (event: PointerEvent) => { if (event.pointerId === pointerId) { separator.removeEventListener("pointermove", onPointerMove); - separator.removeEventListener("pointerup", onPointerUp); - separator.removeEventListener("pointercancel", onPointerUp); + separator.removeEventListener("lostpointercapture", onLostPointerCapture); } - }; + } onPointerMove(pointerDownEvent); - separator.addEventListener("pointercancel", onPointerUp); - separator.addEventListener("pointerup", onPointerUp); + separator.addEventListener("lostpointercapture", onLostPointerCapture) separator.addEventListener("pointermove", onPointerMove); separator.setPointerCapture(pointerId);