vue-timeline-chart
Version:
Vue3 Timeline Chart component
3 lines (2 loc) • 23.6 kB
JavaScript
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`vue-timeline-chart`]={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=e=>{let n=(0,t.shallowRef)(0),r=(0,t.shallowRef)(0),i;function a(e){i=new ResizeObserver(([e])=>{let t=e?.contentRect;t&&([n.value,r.value]=[t.width,t.height])}),i.observe(e)}return(0,t.watch)(e,e=>{if(e){a(e);return}i?.disconnect()}),{width:n,height:r}},r=function(e){return`${e}`.trim().padStart(2,`0`)},i=365.2425,a=6048e5,o=6e4,s=3600*24;s*7,s*i/12*3;var c=Symbol.for(`constructDateFrom`);function l(e,t){return typeof e==`function`?e(t):e&&typeof e==`object`&&c in e?e[c](t):e instanceof Date?new e.constructor(t):new Date(t)}function u(e,t){return l(t||e,e)}function d(e,t,n){let r=u(e,n?.in);return isNaN(t)?l(n?.in||e,NaN):(t&&r.setDate(r.getDate()+t),r)}var f={};function p(){return f}function m(e,t){let n=p(),r=t?.weekStartsOn??t?.locale?.options?.weekStartsOn??n.weekStartsOn??n.locale?.options?.weekStartsOn??0,i=u(e,t?.in),a=i.getDay(),o=(a<r?7:0)+a-r;return i.setDate(i.getDate()-o),i.setHours(0,0,0,0),i}function h(e,...t){let n=l.bind(null,e||t.find(e=>typeof e==`object`));return t.map(n)}function g(e,t){let n=u(e,t?.in);return n.setHours(0,0,0,0),n}function _(e,t,n){let r=u(e,n?.in);return r.setTime(r.getTime()+t*o),r}function v(e,t,n){return d(e,t*7,n)}function y(e,t){let[n,r]=h(e,t.start,t.end);return{start:n,end:r}}function b(e,t){let{start:n,end:r}=y(t?.in,e),i=+n>+r,a=i?+n:+r,o=i?r:n;o.setHours(0,0,0,0);let s=t?.step??1;if(!s)return[];s<0&&(s=-s,i=!i);let c=[];for(;+o<=a;)c.push(l(n,o)),o.setDate(o.getDate()+s),o.setHours(0,0,0,0);return i?c.reverse():c}function x(e,t){let{start:n,end:r}=y(t?.in,e),i=+n>+r,a=i?+n:+r,o=i?r:n;o.setMinutes(0,0,0);let s=t?.step??1;if(!s)return[];s<0&&(s=-s,i=!i);let c=[];for(;+o<=a;)c.push(l(n,o)),o.setHours(o.getHours()+s);return i?c.reverse():c}function S(e,t){let{start:n,end:r}=y(t?.in,e);n.setSeconds(0,0);let i=+n>+r,a=i?+n:+r,o=i?r:n,s=t?.step??1;if(!s)return[];s<0&&(s=-s,i=!i);let c=[];for(;+o<=a;)c.push(l(n,o)),o=_(o,s);return i?c.reverse():c}function C(e,t){let{start:n,end:r}=y(t?.in,e),i=+n>+r,a=i?+n:+r,o=i?r:n;o.setHours(0,0,0,0),o.setDate(1);let s=t?.step??1;if(!s)return[];s<0&&(s=-s,i=!i);let c=[];for(;+o<=a;)c.push(l(n,o)),o.setMonth(o.getMonth()+s);return i?c.reverse():c}function w(e,t){let{start:n,end:r}=y(t?.in,e),i=+n>+r,a=m(i?r:n,t),o=m(i?n:r,t);a.setHours(15),o.setHours(15);let s=+o.getTime(),c=a,u=t?.step??1;if(!u)return[];u<0&&(u=-u,i=!i);let d=[];for(;+c<=s;)c.setHours(0),d.push(l(n,c)),c=v(c,u),c.setHours(15);return i?d.reverse():d}function T(e,t){let n=u(e,t?.in);return n.setDate(1),n.setHours(0,0,0,0),n}function E(e,t){let n=u(e,t?.in);return n.setFullYear(n.getFullYear(),0,1),n.setHours(0,0,0,0),n}function D(e,t){let{start:n,end:r}=y(t?.in,e),i=+n>+r,a=i?+n:+r,o=i?r:n;o.setHours(0,0,0,0),o.setMonth(0,1);let s=t?.step??1;if(!s)return[];s<0&&(s=-s,i=!i);let c=[];for(;+o<=a;)c.push(l(n,o)),o.setFullYear(o.getFullYear()+s);return i?c.reverse():c}function O(e,t){let n=u(e,t?.in),r=n.getFullYear(),i=p(),a=t?.firstWeekContainsDate??t?.locale?.options?.firstWeekContainsDate??i.firstWeekContainsDate??i.locale?.options?.firstWeekContainsDate??1,o=l(t?.in||e,0);o.setFullYear(r+1,0,a),o.setHours(0,0,0,0);let s=m(o,t),c=l(t?.in||e,0);c.setFullYear(r,0,a),c.setHours(0,0,0,0);let d=m(c,t);return+n>=+s?r+1:+n>=+d?r:r-1}function k(e,t){let n=p(),r=t?.firstWeekContainsDate??t?.locale?.options?.firstWeekContainsDate??n.firstWeekContainsDate??n.locale?.options?.firstWeekContainsDate??1,i=O(e,t),a=l(t?.in||e,0);return a.setFullYear(i,0,r),a.setHours(0,0,0,0),m(a,t)}function A(e,t){let n=u(e,t?.in),r=m(n,t)-+k(n,t);return Math.round(r/a)+1}var j={ms:1,seconds:1e3,minutes:1e3*60,hours:1e3*60*60,days:1e3*60*60*24,weeks:1e3*60*60*24*7,months:1e3*60*60*24*7*4,years:1e3*60*60*24*7*4*12},M=e=>Object.keys(j).indexOf(e),N=(e,n,r,i,a,o)=>{let s=(0,t.shallowRef)(r.value),c=(0,t.shallowRef)(i.value),l=(0,t.computed)(()=>(a.value?.length?a.value:[{unit:`seconds`,steps:[.1,1,2,5,10]},{unit:`minutes`,steps:[.25,.5,1,2,5,10]},{unit:`hours`,steps:[.25,.5,1,2,4,6,12]},{unit:`days`,steps:[1]},{unit:`weeks`,steps:[1]},{unit:`months`,steps:[1,2]},{unit:`years`,steps:[1,5,10,25,50,100,250,500,1e3]}]).toSorted((e,t)=>M(e.unit)-M(t.unit)).flatMap(e=>e.steps.toSorted((e,t)=>e-t).map(t=>({unit:e.unit,step:t}))));(0,t.watch)(r,()=>{s.value=r.value}),(0,t.watch)(i,()=>{c.value=i.value});let u=(0,t.computed)(()=>{let[e]=l.value;for(let[t,n]of l.value.entries()){let r=s.value/(j[n.unit]*(n.step??1));if(r>=1&&r<=c.value){e=n;break}if(r<1){e=l.value[t-1]??n;break}r>=1&&t===l.value.length-1&&(e=n)}return{unit:e.unit,step:e.step??1}});function d(e){switch(u.value.unit){case`years`:return e.getFullYear()%u.value.step===0;case`months`:return e.getMonth()%u.value.step===0;case`weeks`:return A(e,{weekStartsOn:o.value})%u.value.step===0;case`days`:return e.getDate()%u.value.step===0;case`hours`:return e.getHours()%u.value.step===0;case`minutes`:return e.getMinutes()%u.value.step===0;case`seconds`:return e.getSeconds()%u.value.step===0;case`ms`:return e.getMilliseconds()%u.value.step===0}}return{scale:u,baseDividers:j,visibleTimestamps:(0,t.computed)(()=>{let t=[],r=e.value,i=n.value,{unit:a,step:s}=u.value;if(a===`ms`){let e=Math.max(1,s),n=Math.ceil(r/e)*e;for(let r=n;r<i;r+=e)t.push(r);return t}let c=[];switch(a){case`seconds`:c=S({start:r,end:i}).flatMap(e=>{let t=[];for(let n=0;n<60;n++)t.push(new Date(e.valueOf()+n*j.seconds));return t});break;case`minutes`:c=S({start:r,end:i});break;case`hours`:c=x({start:r,end:i});break;case`days`:c=b({start:r,end:i});break;case`weeks`:c=w({start:r,end:i},{weekStartsOn:o.value});break;case`months`:c=C({start:r,end:i});break;case`years`:c=D({start:r,end:i});break}for(let e of c)if(!(s>1&&!d(e))&&(t.push(e.valueOf()),s<1))for(let n=1;n<1/s;n++)t.push(e.valueOf()+n*s*j[a]);return t})}};function P(e,n){return(0,t.getCurrentScope)()?((0,t.onScopeDispose)(e,n),!0):!1}var F=typeof window<`u`&&typeof document<`u`;typeof WorkerGlobalScope<`u`&&globalThis instanceof WorkerGlobalScope;var I=e=>e!=null,L=Object.prototype.toString,R=e=>L.call(e)===`[object Object]`;function z(e){return Array.isArray(e)?e:[e]}function B(e){return e||(0,t.getCurrentInstance)()}function V(e,n=!0,r){B(r)?(0,t.onMounted)(e,r):n?e():(0,t.nextTick)(e)}function H(e,n,r){return(0,t.watch)(e,n,{...r,immediate:!0})}var U=F?window:void 0;F&&window.document,F&&window.navigator,F&&window.location;function W(e){let n=(0,t.toValue)(e);return n?.$el??n}function G(...e){let n=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),r=(0,t.computed)(()=>{let n=z((0,t.toValue)(e[0])).filter(e=>e!=null);return n.every(e=>typeof e!=`string`)?n:void 0});return H(()=>[r.value?.map(e=>W(e))??[U].filter(e=>e!=null),z((0,t.toValue)(r.value?e[1]:e[0])),z((0,t.unref)(r.value?e[2]:e[1])),(0,t.toValue)(r.value?e[3]:e[2])],([e,t,r,i],a,o)=>{if(!e?.length||!t?.length||!r?.length)return;let s=R(i)?{...i}:i,c=e.flatMap(e=>t.flatMap(t=>r.map(r=>n(e,t,r,s))));o(()=>{c.forEach(e=>e())})},{flush:`post`})}function K(){let e=(0,t.shallowRef)(!1),n=(0,t.getCurrentInstance)();return n&&(0,t.onMounted)(()=>{e.value=!0},n),e}function q(e){let n=K();return(0,t.computed)(()=>(n.value,!!e()))}function J(e,n,r={}){let{window:i=U,...a}=r,o,s=q(()=>i&&`MutationObserver`in i),c=()=>{o&&=(o.disconnect(),void 0)},l=(0,t.watch)((0,t.computed)(()=>{let n=z((0,t.toValue)(e)).map(W).filter(I);return new Set(n)}),e=>{c(),s.value&&e.size&&(o=new MutationObserver(n),e.forEach(e=>o.observe(e,a)))},{immediate:!0,flush:`post`}),u=()=>o?.takeRecords(),d=()=>{l(),c()};return P(d),{isSupported:s,stop:d,takeRecords:u}}function Y(e,n,r={}){let{window:i=U,...a}=r,o,s=q(()=>i&&`ResizeObserver`in i),c=()=>{o&&=(o.disconnect(),void 0)},l=(0,t.watch)((0,t.computed)(()=>{let n=(0,t.toValue)(e);return Array.isArray(n)?n.map(e=>W(e)):[W(n)]}),e=>{if(c(),s.value&&i){o=new ResizeObserver(n);for(let t of e)t&&o.observe(t,a)}},{immediate:!0,flush:`post`}),u=()=>{c(),l()};return P(u),{isSupported:s,stop:u}}function ee(e,n={}){let{reset:r=!0,windowResize:i=!0,windowScroll:a=!0,immediate:o=!0,updateTiming:s=`sync`}=n,c=(0,t.shallowRef)(0),l=(0,t.shallowRef)(0),u=(0,t.shallowRef)(0),d=(0,t.shallowRef)(0),f=(0,t.shallowRef)(0),p=(0,t.shallowRef)(0),m=(0,t.shallowRef)(0),h=(0,t.shallowRef)(0);function g(){let t=W(e);if(!t){r&&(c.value=0,l.value=0,u.value=0,d.value=0,f.value=0,p.value=0,m.value=0,h.value=0);return}let n=t.getBoundingClientRect();c.value=n.height,l.value=n.bottom,u.value=n.left,d.value=n.right,f.value=n.top,p.value=n.width,m.value=n.x,h.value=n.y}function _(){s===`sync`?g():s===`next-frame`&&requestAnimationFrame(()=>g())}return Y(e,_),(0,t.watch)(()=>W(e),e=>!e&&_()),J(e,_,{attributeFilter:[`style`,`class`]}),a&&G(`scroll`,_,{capture:!0,passive:!0}),i&&G(`resize`,_,{passive:!0}),V(()=>{o&&_()}),{height:c,bottom:l,left:u,right:d,top:f,width:p,x:m,y:h,update:_}}function X(e,t){return Math.hypot(t.clientX-e.clientX,t.clientY-e.clientY)}function te({viewportStart:e,viewportEnd:t}){let n=null,r=null,i=null,a=null,o=null;function s(e){if(e.touches.length<2){let[t]=Array.from(e.touches);n=t?.clientX||null}}function c(n){l.initialTouchList=n.touches;let[r,i]=Array.from(n.touches);l.initialTouchViewportStart=e.value,l.initialTouchViewportEnd=t.value,l.initialPinchDistance=r&&i?X(r,i):null}let l={get lastTouchX(){return n},set lastTouchX(e){n=e},get initialTouchList(){return r},set initialTouchList(e){r=e},get initialTouchViewportStart(){return i},set initialTouchViewportStart(e){i=e},get initialTouchViewportEnd(){return a},set initialTouchViewportEnd(e){a=e},get initialPinchDistance(){return o},set initialPinchDistance(e){o=e}};return{setLastTouchX:s,setInitialTouchList:c,state:l}}var ne={class:`timeline-wrapper`},re={class:`timestamps`},ie={class:`groups`},ae={class:`group-items`},oe=[`onClick`,`onPointermove`,`onPointerdown`,`onPointerup`,`onContextmenu`],se=[`onClick`,`onPointermove`,`onPointerdown`,`onPointerup`,`onContextmenu`],ce={key:0,class:`backgrounds`},le=[`onClick`,`onPointermove`,`onPointerdown`,`onPointerup`,`onContextmenu`],ue={key:1,class:`markers`};e.Timeline=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`Timeline`,props:{groups:{default:()=>[]},items:{default:()=>[]},markers:{default:()=>[]},viewportMin:{default:void 0},viewportMax:{default:void 0},minViewportDuration:{default:1e3},maxViewportDuration:{default:void 0},initialViewportStart:{default:void 0},initialViewportEnd:{default:void 0},renderTimestampLabel:{type:Function,default:(e,t)=>{let n=new Date(e),i=``;return(![`hours`,`minutes`,`seconds`,`ms`].includes(t.unit)||g(n).valueOf()===e)&&(i+=`${n.toLocaleString(`default`,{month:t.unit!==`years`&&(T(n).valueOf()===e||t.unit===`days`||g(n).valueOf()===e&&!(t.unit===`months`&&t.step===.25))?`short`:void 0,year:E(n).valueOf()===e?`numeric`:void 0,era:E(n).valueOf()===e&&E(n).getFullYear()<=0?`short`:void 0,day:t.unit!==`years`&&!(t.unit===`months`&&t.step>=1)&&g(n).valueOf()===e?`numeric`:void 0})} `),[`hours`,`minutes`,`seconds`,`ms`].includes(t.unit)&&(i+=`${r(n.getHours())}:${r(n.getMinutes())}${n.getSeconds()>0?`:${r(n.getSeconds())}`:``}${n.getMilliseconds()>0?`.${r(n.getMilliseconds())}`:``}`),i}},fixedLabels:{type:Boolean,default:!1},minTimestampWidth:{default:100},maxZoomSpeed:{default:60},activeItems:{default:()=>[]},maxOffsetOutsideViewport:{default:50},scales:{default:()=>[]},weekStartsOn:{default:0}},emits:[`pointermove`,`pointerdown`,`pointerup`,`wheel`,`click`,`contextmenu`,`touchmove`,`touchstart`,`touchend`,`mousemoveTimeline`,`mouseleaveTimeline`,`changeViewport`,`changeScale`],setup(e,{expose:r,emit:i}){let a=e,o=i;r({setViewport:L,onWheel:R,clearCache:C});let s=(0,t.useTemplateRef)(`timelineEl`),{width:c}=n(s),l=(0,t.shallowRef)(0),u=(0,t.shallowRef)(1e4),d=(0,t.computed)(()=>u.value-l.value),f=(0,t.computed)(()=>c.value/d.value);(0,t.watch)([l,u],([e,t])=>{o(`changeViewport`,{start:e,end:t})}),(0,t.watch)(()=>a.items,e=>{e.some(e=>e.id===void 0)&&console.error("[vue-timeline-chart] Some items are missing an `id` property. Please provide a unique ID for each item.")},{immediate:!0}),(0,t.watch)(()=>a.markers,e=>{e.some(e=>e.id===void 0)&&console.error("[vue-timeline-chart] Some markers are missing an `id` property. Please provide a unique ID for each marker.")},{immediate:!0}),(0,t.watchEffect)(()=>{try{I()}catch(e){console.error(e)}});let{left:p}=ee(s);function m(){return a.items?.reduce((e,t)=>t.start<e?t.start:e,1/0)}function h(){return a.items?.reduce((e,t)=>t.end!==void 0&&t.end>e||t.start>e?t.end??t.start:e,-1/0)}function g(){L(a.initialViewportStart??a.viewportMin??m()??0,a.initialViewportEnd??a.viewportMax??h()??1e4)}(0,t.watch)([()=>a.viewportMin,()=>a.viewportMax],()=>{L(l.value,u.value)}),(0,t.watch)([()=>a.initialViewportStart,()=>a.initialViewportEnd],()=>{L(a.initialViewportStart,a.initialViewportEnd)});let _=(0,t.computed)(()=>a.items.filter(e=>e.start<u.value&&(e.end??e.start)>l.value).sort((e,t)=>e.start-t.start)||[]),v=(0,t.computed)(()=>a.markers.filter(e=>e.start<u.value&&e.start>l.value).sort((e,t)=>e.start-t.start)||[]),y=(0,t.computed)(()=>v.value.filter(e=>!e.group)),b=(0,t.computed)(()=>_.value.filter(e=>e.type===`background`&&!e.group)),x=new Map,S=new Map;function C(){x.clear(),S.clear()}(0,t.watch)([l,u,c],()=>{C()}),(0,t.watch)(_,()=>{x.clear()}),(0,t.watch)(v,()=>{S.clear()}),(0,t.onMounted)(()=>{g(),(0,t.nextTick)(()=>{C()})});function w(e){return{"--_left":`${M(e.start,e.end)}px`,"--_width":e.end===void 0?void 0:`${P(e.start,e.end)}px`,...e.cssVariables}}function T(e,t=!1){let n=t?S:x,r=n.get(e.id);if(r)return r;let i=w(e);return n.set(e.id,i),i}let{visibleTimestamps:E,scale:D}=N(l,u,d,(0,t.computed)(()=>c.value/a.minTimestampWidth),(0,t.computed)(()=>a.scales),(0,t.computed)(()=>a.weekStartsOn)),O=(0,t.computed)(()=>E.value.map(e=>M(e)));(0,t.watch)(D,(e,t)=>{e.step===t?.step&&e.unit===t?.unit||o(`changeScale`,e)},{immediate:!0});function k(e){let t=new Date(e),n=t.getMilliseconds()===0,r=n&&t.getSeconds()===0,i=r&&t.getMinutes()===0,o=i&&t.getHours()===0,s=o&&t.getDay()===a.weekStartsOn,c=o&&t.getDate()===1,l=c&&t.getMonth()===0;return{"is-second":n,"is-minute":r,"is-hour":i,"is-day":o,"is-week":s,"is-month":c,"is-year":l}}let A=(0,t.computed)(()=>a.maxOffsetOutsideViewport/c.value*d.value),j=(0,t.computed)(()=>c.value+2*(A.value/d.value)*c.value);function M(e,t){if(t!==void 0&&e<l.value-A.value&&(t-e)/d.value*c.value>j.value){let e=-A.value/d.value*c.value,n=u.value+A.value;return t>n?e:e-(n-t)/d.value*c.value}return(e-l.value)/d.value*c.value}function P(e,t){let n=(t-e)/d.value*c.value;return Math.min(n,j.value)}function F(e,t){let n=e/c.value*d.value;if(e>0&&a.viewportMax!==void 0&&u.value>=a.viewportMax||e<0&&a.viewportMin!==void 0&&l.value<=a.viewportMin)return;let r=l.value+n,i=u.value+n;if(a.viewportMax!==void 0&&i>a.viewportMax){let e=i-a.viewportMax;r-=e,i=a.viewportMax}if(a.viewportMin!==void 0&&r<a.viewportMin){let e=a.viewportMin-r;i+=e,r=a.viewportMin}L(r,i),t.type===`wheel`&&$(t)}function I(){if(a.initialViewportStart!==void 0&&a.initialViewportEnd!==void 0&&a.initialViewportStart>=a.initialViewportEnd)throw Error(`[vue-timeline-chart] Invalid props: initialViewportStart must be smaller than initialViewportEnd`);if(a.viewportMin!==void 0&&a.viewportMax!==void 0&&a.viewportMin>=a.viewportMax)throw Error(`[vue-timeline-chart] Invalid props: viewportMin must be smaller than viewportMax`)}function L(e,t){if(e===void 0&&t===void 0){console.warn(`[vue-timeline-chart] setViewport: both start and end are undefined. No viewport will be set.`);return}let n=e===void 0?l.value:a.viewportMin===void 0?e:Math.max(e,a.viewportMin),r=t===void 0?u.value:a.viewportMax===void 0?t:Math.min(t,a.viewportMax),i=r-n;if(a.minViewportDuration!==void 0&&i<a.minViewportDuration){let e=a.minViewportDuration-i;n-=e*.5,r+=e*.5}else if(a.maxViewportDuration!==void 0&&i>a.maxViewportDuration){let e=a.maxViewportDuration-i;n-=e*.5,r+=e*.5}l.value=Math.round(n),u.value=Math.round(r)}function R(e){if(I(),o(`wheel`,e),e.deltaY===0&&e.preventDefault(),e.shiftKey){e.preventDefault(),F((e.deltaY===0&&e.deltaX!==0?e.deltaX:e.deltaY)*(e.deltaMode===0?1:18),e);return}if(e.deltaX!==0){F(e.deltaX*(e.deltaMode===0?1:18),e);return}if(!(e.metaKey||e.ctrlKey))return;e.preventDefault();let t=(e.clientX-p.value)/c.value,n=a.maxZoomSpeed?Math.max(-a.maxZoomSpeed,Math.min(a.maxZoomSpeed,e.deltaY*(e.deltaMode===0?1:10))):e.deltaY*(e.deltaMode===0?1:10);z(Math.round(-d.value*.01*n),t,e)}function z(e,t=.5,n){e>0?e=d.value-e<a.minViewportDuration?d.value-a.minViewportDuration:e:a.maxViewportDuration&&(e=d.value-e>a.maxViewportDuration?-(a.maxViewportDuration-d.value):e);let r=e*t,i=e-r,o=l.value+r,s=u.value-i;if(o>=s){console.error(`Rounding issue probably occured while zooming.
Setting different values for minViewportDuration and maxViewportDuration might help.`);return}L(o,s),$(n)}function B(e){let t;t=`touches`in e?Array.from(e.touches).reduce((e,t)=>e+t.clientX,0)/e.touches.length:e.clientX;let n=(t-p.value)/c.value;return l.value+d.value*n}let{state:V,setLastTouchX:H,setInitialTouchList:U}=te({viewportStart:l,viewportEnd:u});function W(e){if(e.touches.length===2&&V.initialPinchDistance!==null&&V.initialTouchViewportStart!==null&&V.initialTouchViewportEnd!==null){let[t,n]=[...e.touches].sort((e,t)=>e.clientX-t.clientX),[r,i]=[t,n].map(e=>[...V.initialTouchList].find(t=>t.identifier===e.identifier)),a=X(t,n)/V.initialPinchDistance,o=(r.screenX+i.screenX)/2,s=-((t.screenX+n.screenX)/2-o)/f.value,l=(o-p.value)/c.value,u=V.initialTouchViewportEnd-V.initialTouchViewportStart,d=u/a,m=d-u,h=V.initialTouchViewportStart-m*l+s;L(h,h+d)}else if(e.touches.length===1){let[t]=e.touches;V.lastTouchX===null?V.lastTouchX=t.clientX:(F(V.lastTouchX-t.clientX,e),H(e))}o(`touchmove`,{time:B(e),event:e})}function G(e){U(e),H(e),o(`touchstart`,{time:B(e),event:e})}function K(e){H(e),U(e),o(`touchend`,{event:e})}function q(e,t=null){o(`pointerdown`,{time:B(e),event:e,item:t})}function J(e,t=null){o(`pointermove`,{time:B(e),event:e,item:t})}function Y(e,t=null){o(`pointerup`,{time:B(e),event:e,item:t})}function Z(e,t=null){o(`click`,{time:B(e),event:e,item:t})}function Q(e,t=null){o(`contextmenu`,{time:B(e),event:e,item:t})}function $(e){o(`mousemoveTimeline`,{time:B(e),event:e})}function de(e){o(`mouseleaveTimeline`,{event:e})}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,ne,[(0,t.createElementVNode)(`div`,{ref_key:`timelineEl`,ref:s,class:`timeline`,onWheel:R,onClick:Z,onTouchmove:W,onTouchstart:G,onTouchend:K,onPointermove:J,onPointerdown:q,onPointerup:Y,onContextmenu:(0,t.withModifiers)(Q,[`prevent`]),onMousemove:$,onMouseleave:de},[(0,t.createElementVNode)(`div`,re,[(0,t.renderSlot)(n.$slots,`timestamps-before`,{scale:(0,t.unref)(D)},void 0,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(E),(r,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:(0,t.normalizeClass)([`timestamp`,k(r)]),style:(0,t.normalizeStyle)({"--_left":`${O.value[i]}px`})},[(0,t.renderSlot)(n.$slots,`timestamp`,{timestamp:r,scale:(0,t.unref)(D)},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e.renderTimestampLabel(r,(0,t.unref)(D))),1)],!0)],6))),128)),(0,t.renderSlot)(n.$slots,`timestamps-after`,{scale:(0,t.unref)(D)},void 0,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(v.value.filter(e=>e.group===`_timestamps`),e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,style:(0,t.normalizeStyle)(T(e)),class:(0,t.normalizeClass)([e.type,e.className])},[(0,t.renderSlot)(n.$slots,`marker`,{item:e},void 0,!0)],6))),128)),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(_.value.filter(e=>e.group===`_timestamps`&&e.type===`marker`),e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,style:(0,t.normalizeStyle)(T(e)),class:(0,t.normalizeClass)([e.type,e.className])},[(0,t.renderSlot)(n.$slots,`marker`,{item:e},void 0,!0)],6))),128))]),(0,t.createElementVNode)(`div`,ie,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.groups,r=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r.id,class:(0,t.normalizeClass)([`group`,r.className]),style:(0,t.normalizeStyle)(r.cssVariables)},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`group-label`,{fixed:e.fixedLabels}])},[(0,t.renderSlot)(n.$slots,`group-label`,{group:r},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(r.label),1)],!0)],2),(0,t.createElementVNode)(`div`,ae,[(0,t.renderSlot)(n.$slots,`items-${r.id}`,{group:r,itemsInViewport:_.value.filter(e=>e.group===r.id),viewportStart:l.value,viewportEnd:u.value},()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(_.value.filter(e=>e.group===r.id&&e.type!==`background`),r=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r.id,style:(0,t.normalizeStyle)(T(r)),class:(0,t.normalizeClass)([`item`,r.type,r.className,{active:e.activeItems.includes(r.id)}]),onClick:(0,t.withModifiers)(e=>Z(e,r),[`stop`]),onPointermove:(0,t.withModifiers)(e=>J(e,r),[`stop`]),onPointerdown:(0,t.withModifiers)(e=>q(e,r),[`stop`]),onPointerup:(0,t.withModifiers)(e=>Y(e,r),[`stop`]),onContextmenu:(0,t.withModifiers)(e=>Q(e,r),[`prevent`,`stop`])},[(0,t.renderSlot)(n.$slots,`item`,{item:r},void 0,!0)],46,oe))),128))],!0)]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(_.value.filter(e=>e.group===r.id&&e.type===`background`),e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,style:(0,t.normalizeStyle)(T(e)),class:(0,t.normalizeClass)([e.type,e.className]),onClick:(0,t.withModifiers)(t=>Z(t,e),[`stop`]),onPointermove:(0,t.withModifiers)(t=>J(t,e),[`stop`]),onPointerdown:(0,t.withModifiers)(t=>q(t,e),[`stop`]),onPointerup:(0,t.withModifiers)(t=>Y(t,e),[`stop`]),onContextmenu:(0,t.withModifiers)(t=>Q(t,e),[`prevent`,`stop`])},null,46,se))),128)),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(v.value.filter(e=>e.group===r.id),e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,style:(0,t.normalizeStyle)(T(e,!0)),class:(0,t.normalizeClass)([e.type,e.className])},[(0,t.renderSlot)(n.$slots,`marker`,{item:e},void 0,!0)],6))),128))],6))),128)),b.value.length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,ce,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(b.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,style:(0,t.normalizeStyle)(T(e)),class:(0,t.normalizeClass)([e.type,e.className]),onClick:(0,t.withModifiers)(t=>Z(t,e),[`stop`]),onPointermove:(0,t.withModifiers)(t=>J(t,e),[`stop`]),onPointerdown:(0,t.withModifiers)(t=>q(t,e),[`stop`]),onPointerup:(0,t.withModifiers)(t=>Y(t,e),[`stop`]),onContextmenu:(0,t.withModifiers)(t=>Q(t,e),[`prevent`,`stop`])},null,46,le))),128))])):(0,t.createCommentVNode)(``,!0),y.value.length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,ue,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(y.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.id,style:(0,t.normalizeStyle)(T(e,!0)),class:(0,t.normalizeClass)([e.type,e.className])},[(0,t.renderSlot)(n.$slots,`marker`,{item:e},void 0,!0)],6))),128))])):(0,t.createCommentVNode)(``,!0)])],544)]))}}),[[`__scopeId`,`data-v-c1d18caa`]])});