time-axis-plus 0.0.1

package/index.umd.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".timeline-group[data-v-b90b2c6f]{font-size:0}.timeline-group .timeline-canvas[data-v-b90b2c6f]{background-color:#2b2f33}.timeline-group canvas[data-v-b90b2c6f]{display:block;touch-action:none}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(c,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],d):(c=typeof globalThis<"u"?globalThis:c||self,d(c.VueTimeAxis={},c.Vue))})(this,function(c,d){"use strict";const y={borderColor:"rgb(151, 158, 167)",graduationColor:"rgba(151, 158, 167, 1)",tickTextColor:"#ffffff",hoverLineColor:"rgb(194, 202, 215)",hoverTextColor:"rgb(0, 255, 0)",overviewBg:"rgb(43, 47, 51)",overviewTickColor:"rgba(151, 158, 167, 0.35)",overviewWindowColor:"rgba(64, 196, 255, 0.15)",overviewWindowBorder:"rgb(64, 196, 255)",overviewPlayColor:"rgb(255, 92, 92)"};class b{constructor(t){if(!t)throw new Error("timeAxis: options is required");let e=typeof t.container=="string"?document.getElementById(t.container):t.container;if(!e)throw new Error("timeAxis: options.container is required（DOM 元素或 id 字符串）");let i={visibleHours:24,minVisibleHours:.02,maxVisibleHours:24,graduationMinStep:10,secondsPerStep:[1,2,6,12,60,120,240,360,720,3600,7200,14400,21600,43200,86400],segmentStyle:{background:"rgba(24,208,217,0.5)"},pointerOptions:{beginY:0,endY:30,color:"rgb(64, 196, 255)",width:2},minTime:null,maxTime:null,startTime:this.dayStartOf(Date.now()),backgroundColor:"#000",snapToNearest:!1,hoverTip:!0,centerPointer:!1,centerResumeDelay:3e3,overview:!1,overviewHeight:20,overviewGap:4,overviewStart:null,overviewEnd:null,segments:[]};this.options=Object.assign({},i,t),this.options.container=e,this.options.visibleHours=Math.min(this.options.maxVisibleHours,Math.max(this.options.minVisibleHours,this.options.visibleHours)),this.configMinVisibleHours=this.options.minVisibleHours,this.options.segments=this.normalizeSegments(this.options.segments),this.options.segments.length&&(this.currentTimestamp=this.options.segments[0].begin),this.options.segmentStyle&&this.options.segmentStyle.background||(this.options.segmentStyle={background:"rgba(24,208,217,0.5)"}),this.options.axisStyle=Object.assign({},y,this.options.axisStyle||{}),this.options.startTime=this.clampStartTime(this.options.startTime),this.options.overviewStart==null&&(this.options.overviewStart=this.options.minTime!=null?this.options.minTime:this.dayStartOf(this.options.startTime)),this.options.overviewEnd==null&&(this.options.overviewEnd=this.options.maxTime!=null?this.options.maxTime:this.options.overviewStart+24*60*60*1e3),this.isClick=!1,this.button=0,this.isPressDown=!1,this.isDragPointer=!1,this.currentChecked="",this.pinchStartDistance=0,this.hoverState=null,this.centerPaused=!1,this.lastInteractTime=0,this.initCanvas(),this.drawStatic()}initCanvas(){this.options.container.style.position="relative",this.canvas=document.createElement("canvas"),this.canvas.style.position="absolute",this.canvas.style.left="0",this.canvas.style.top="0",this.overlayCanvas=document.createElement("canvas"),this.overlayCanvas.style.position="absolute",this.overlayCanvas.style.left="0",this.overlayCanvas.style.top="0",this.options.container.appendChild(this.canvas),this.options.container.appendChild(this.overlayCanvas),this.canvasCtx=this.canvas.getContext("2d"),this.overlayCtx=this.overlayCanvas.getContext("2d"),this.options.overview&&this.mountOverview(),this.initCanvasSize(),this.canvas.style.backgroundColor=this.options.backgroundColor,this.initEvents()}initCanvasSize(){let t=window.devicePixelRatio||1,e=this.options.container.clientWidth,i=this.options.container.clientHeight,s=this.options.overview?Math.max(0,i-this.options.overviewHeight-this.options.overviewGap):i,o=(a,u,v)=>{a.width=Math.round(e*t),a.height=Math.round(v*t),a.style.width=e+"px",a.style.height=v+"px",u.setTransform(t,0,0,t,0,0)};o(this.canvas,this.canvasCtx,s),o(this.overlayCanvas,this.overlayCtx,s),this.overviewCanvas&&(o(this.overviewCanvas,this.overviewCtx,this.options.overviewHeight),this.overviewCanvas.style.top=s+this.options.overviewGap+"px"),this.canvasWidth=e,this.canvasHeight=s,this.options.minVisibleHours=Math.min(this.configMinVisibleHours,this.canvasWidth/(this.options.graduationMinStep+2)/3600)}resize(){this.initCanvasSize(),this.drawStatic()}drawStatic(){this.pxPerMs=this.canvasWidth/(this.options.visibleHours*60*60*1e3),this.clearCanvas(),this.initBorders(),this.initSegments(this.options.segments||[]),this.initGraduationsLines(this.options.startTime),this.drawOverlay()}drawOverlay(){if(this.clearOverlay(),this.options.hoverTip&&this.hoverState){let{x:t,time:e}=this.hoverState;this.drawLine(this.overlayCtx,{beginX:t,beginY:0,endX:t,endY:this.canvasHeight,color:this.options.axisStyle.hoverLineColor,width:1,center:!0}),this.overlayCtx.fillStyle=this.options.axisStyle.hoverTextColor,this.overlayCtx.textAlign="center",this.overlayCtx.font="normal normal 12px Arial,sans-serif",this.overlayCtx.fillText(this.formatDate("yyyy-MM-dd hh:mm:ss",e),t,18)}this.isClick&&this.currentTimestamp!=null&&this.drawPointer(),this.drawOverview()}initBorders(){let t=this.options.axisStyle.borderColor;this.drawLine(this.canvasCtx,{beginX:0,beginY:0,endX:this.canvasWidth,endY:0,color:t,width:1}),this.drawLine(this.canvasCtx,{beginX:0,beginY:this.canvasHeight,endX:this.canvasWidth,endY:this.canvasHeight,color:t,width:1})}drawLine(t,{beginX:e,beginY:i,endX:s,endY:o,color:a,width:u,center:v}){let h=!v&&u%2===1?.5:0;t.beginPath(),t.moveTo(e+h,i+h),t.lineTo(s+h,o+h),t.strokeStyle=a,t.lineWidth=u,t.stroke()}initSegments(t){t.forEach((e,i)=>{this.drawSegment(e,i)}),this.canvasCtx.font="normal normal 12px Arial,sans-serif",this.canvasCtx.fillStyle=this.options.axisStyle.tickTextColor}drawSegment(t,e){let i=this.options.segmentStyle.background;t.style&&t.style.background&&(i=t.style.background);let s=this.pxPerMs*(t.begin-this.options.startTime),o=(t.end-t.begin)*this.pxPerMs;this.canvasCtx.fillStyle=i,this.canvasCtx.font="normal normal 12px Arial,sans-serif",this.canvasCtx.fillRect(s,0,o,this.canvasHeight),this.canvasCtx.fillStyle=this.options.axisStyle.tickTextColor}initGraduationsLines(t){let e=this.canvasWidth,i=e/(this.options.visibleHours*60*60),s=this.options.graduationMinStep/i,o=this.options.secondsPerStep.find(l=>l>s),a=o*i,u=e/a,v=this.ms_to_next_step(t,o),h=v*this.pxPerMs,r=o<60&&i*60>=50;for(let l=0;l<=u;l++){let m=t+v+l*o*1e3,g=h+l*a,p=new Date(Math.round(m)),w=10,T=1;if(p.getHours()===0&&p.getMinutes()===0&&p.getSeconds()===0){w=24,T=2;let x=this.formatDate("MM-dd",m);this.canvasCtx.textAlign="center",this.canvasCtx.fillStyle=this.options.axisStyle.tickTextColor,this.canvasCtx.font="normal normal 12px Arial,sans-serif",this.canvasCtx.fillText(x,g,34)}else if(p.getMinutes()===0&&p.getSeconds()===0){w=19,T=2;let x=this.formatDate(o<60?"hh:mm:ss":"hh:mm",m);this.canvasCtx.fillStyle=this.options.axisStyle.tickTextColor,this.canvasCtx.textAlign="center",this.canvasCtx.font="normal normal 12px Arial,sans-serif",this.canvasCtx.fillText(x,g,29)}else if(r&&p.getSeconds()===0){w=14,T=2;let x=this.formatDate("hh:mm:ss",m);this.canvasCtx.fillStyle=this.options.axisStyle.tickTextColor,this.canvasCtx.textAlign="center",this.canvasCtx.font="normal normal 12px Arial,sans-serif",this.canvasCtx.fillText(x,g,24)}this.drawLine(this.canvasCtx,{beginX:g,beginY:0,endX:g,endY:w,color:this.options.axisStyle.graduationColor,width:T,center:!0})}}drawPointer(){let t=this.pxPerMs*(this.currentTimestamp-this.options.startTime),e=this.overlayCtx;e.beginPath(),e.moveTo(t,0),e.lineTo(t,this.options.pointerOptions.endY),e.strokeStyle=this.options.pointerOptions.color,e.lineWidth=this.options.pointerOptions.width,e.stroke(),e.beginPath();let i=12/Math.sin(Math.PI/3.5);e.moveTo(t,this.options.pointerOptions.endY-1),e.lineTo(t-i/2,40),e.lineTo(t+i/2,40),e.closePath(),e.fillStyle=this.options.pointerOptions.color,e.fill()}dayStartOf(t){let e=new Date(t);return e.setHours(0,0,0,0),e.getTime()}drawOverview(){if(!this.overviewCanvas)return;let t=this.overviewCtx,e=this.canvasWidth,i=this.options.overviewHeight;t.clearRect(0,0,e,i);let s=this.options.overviewEnd-this.options.overviewStart;if(s<=0)return;let o=e/s;t.fillStyle=this.options.axisStyle.overviewBg,t.fillRect(0,0,e,i),t.strokeStyle=this.options.axisStyle.overviewTickColor,t.lineWidth=1;let a=60*60*1e3;for(let r=this.dayStartOf(this.options.overviewStart);r<=this.options.overviewEnd;r+=a){if(r<this.options.overviewStart)continue;let l=(r-this.options.overviewStart)*o;t.beginPath(),t.moveTo(l,0),t.lineTo(l,4),t.stroke()}let u=i/2-3;(this.options.segments||[]).forEach(r=>{let l=Math.max(r.begin,this.options.overviewStart),m=Math.min(r.end,this.options.overviewEnd);m<=l||(t.fillStyle=r.style&&r.style.background||this.options.segmentStyle.background,t.fillRect((l-this.options.overviewStart)*o,u,Math.max((m-l)*o,1),6))});let v=(this.options.startTime-this.options.overviewStart)*o,h=this.options.visibleHours*60*60*1e3*o;if(t.fillStyle=this.options.axisStyle.overviewWindowColor,t.fillRect(v,0,h,i),t.strokeStyle=this.options.axisStyle.overviewWindowBorder,t.strokeRect(v+.5,.5,Math.max(h-1,0),i-1),this.isClick&&this.currentTimestamp!=null){let r=(this.currentTimestamp-this.options.overviewStart)*o;r>=0&&r<=e&&this.drawLine(t,{beginX:r,beginY:0,endX:r,endY:i,color:this.options.axisStyle.overviewPlayColor,width:1,center:!0})}}ms_to_next_step(t,e){let i=new Date(t),o=(i.getHours()*3600+i.getMinutes()*60+i.getSeconds())%e;return(o?e-o:0)*1e3-i.getMilliseconds()}clampStartTime(t){if(this.options.minTime==null&&this.options.maxTime==null)return t;let e=this.options.visibleHours*60*60*1e3;return this.options.maxTime!=null&&t+e>this.options.maxTime&&(t=this.options.maxTime-e),this.options.minTime!=null&&t<this.options.minTime&&(t=this.options.minTime),t}clampTime(t){return this.options.minTime!=null&&t<this.options.minTime&&(t=this.options.minTime),this.options.maxTime!=null&&t>this.options.maxTime&&(t=this.options.maxTime),t}initEvents(){this.overlayCanvas&&(this.contextmenuHandler=t=>{t.preventDefault()},this.mousemoveHandler=this.canvasMousemoveFunc.bind(this),this.wheelHandler=this.mousewheelFunc.bind(this),this.mousedownHandler=this.mousedownFunc.bind(this),this.mouseupHandler=this.mouseupFunc.bind(this),this.mouseoutHandler=this.mouseoutFunc.bind(this),this.touchstartHandler=this.touchStartFunc.bind(this),this.touchmoveHandler=this.touchMoveFunc.bind(this),this.touchendHandler=this.touchEndFunc.bind(this),this.overlayCanvas.addEventListener("contextmenu",this.contextmenuHandler),this.overlayCanvas.addEventListener("mousemove",this.mousemoveHandler),this.overlayCanvas.addEventListener("wheel",this.wheelHandler,{passive:!1}),this.overlayCanvas.addEventListener("mousedown",this.mousedownHandler),this.overlayCanvas.addEventListener("mouseup",this.mouseupHandler),this.overlayCanvas.addEventListener("mouseout",this.mouseoutHandler),this.overlayCanvas.addEventListener("touchstart",this.touchstartHandler,{passive:!1}),this.overlayCanvas.addEventListener("touchmove",this.touchmoveHandler,{passive:!1}),this.overlayCanvas.addEventListener("touchend",this.touchendHandler))}mountOverview(){this.overviewCanvas||(this.overviewCanvas=document.createElement("canvas"),this.overviewCanvas.style.position="absolute",this.overviewCanvas.style.left="0",this.options.container.appendChild(this.overviewCanvas),this.overviewCtx=this.overviewCanvas.getContext("2d"),this.bindOverviewEvents())}bindOverviewEvents(){this.overviewCanvas&&(this.overviewMousedownHandler=this.overviewMousedownFunc.bind(this),this.overviewMousemoveHandler=()=>{this.overviewCanvas.style.cursor="pointer"},this.overviewTouchstartHandler=this.overviewTouchFunc.bind(this),this.overviewTouchmoveHandler=this.overviewTouchFunc.bind(this),this.overviewCanvas.addEventListener("mousedown",this.overviewMousedownHandler),this.overviewCanvas.addEventListener("mousemove",this.overviewMousemoveHandler),this.overviewCanvas.addEventListener("touchstart",this.overviewTouchstartHandler,{passive:!1}),this.overviewCanvas.addEventListener("touchmove",this.overviewTouchmoveHandler,{passive:!1}))}unmountOverview(){this.overviewCanvas&&(this.overviewCanvas.removeEventListener("mousedown",this.overviewMousedownHandler),this.overviewCanvas.removeEventListener("mousemove",this.overviewMousemoveHandler),this.overviewCanvas.removeEventListener("touchstart",this.overviewTouchstartHandler),this.overviewCanvas.removeEventListener("touchmove",this.overviewTouchmoveHandler),this.overviewCanvas.remove(),this.overviewCanvas=null,this.overviewCtx=null)}destroy(){this.overlayCanvas&&(this.overlayCanvas.removeEventListener("contextmenu",this.contextmenuHandler),this.overlayCanvas.removeEventListener("mousemove",this.mousemoveHandler),this.overlayCanvas.removeEventListener("wheel",this.wheelHandler),this.overlayCanvas.removeEventListener("mousedown",this.mousedownHandler),this.overlayCanvas.removeEventListener("mouseup",this.mouseupHandler),this.overlayCanvas.removeEventListener("mouseout",this.mouseoutHandler),this.overlayCanvas.removeEventListener("touchstart",this.touchstartHandler),this.overlayCanvas.removeEventListener("touchmove",this.touchmoveHandler),this.overlayCanvas.removeEventListener("touchend",this.touchendHandler),this.overlayCanvas.remove(),this.overlayCanvas=null),this.unmountOverview(),this.canvas&&(this.canvas.remove(),this.canvas=null),document.onmousemove=null,document.onmouseup=null}canDragPointer(t){let e=t.offsetX,i=t.offsetY,s=window.devicePixelRatio||1;return this.overlayCtx.isPointInPath(e*s,i*s)}setPointer(t){this.canDragPointer(t)?(this.options.container.style.cursor="pointer",this.isDragPointer=!0,this.isMoveTriangle=!0):(!this.isPressDown||this.button)&&(this.isPressDown&&this.isMoveTriangle||(this.isDragPointer=!1,this.isMoveTriangle=!1,this.options.container.style.cursor=""))}mousedownFunc(t){t.button===0?(this.isPressDown=!0,this.button=t.button,this.canDragPointer(t)?this.currentChecked="pointer":this.currentChecked="axis",document.onmousemove=e=>{this.mousemoveFunc(e)},document.onmouseup=e=>{this.mouseupFunc(e),document.onmousemove=null,document.onmouseup=null},this.isDown=!0,this.g_mousedownCursor=this.getCursorPositionX(t)):t.button}canvasMousemoveFunc(t){if(this.isPressDown)return;let e=this.getCursorPositionX(t);this.setPointer(t),this.hoverState={x:e,time:this.options.startTime+e/this.pxPerMs},this.drawOverlay()}mousemoveFunc(t){let e=this.getCursorPositionX(t);if(this.setPointer(t),this.isMove=!0,this.markUserInteract(),this.currentChecked==="axis"){let i=e-this.g_mousedownCursor;this.options.startTime=this.clampStartTime(this.options.startTime-Math.round(i/this.pxPerMs)),this.g_mousedownCursor=e,this.hoverState={x:e,time:this.options.startTime+e/this.pxPerMs},this.drawStatic()}else this.currentChecked==="pointer"&&(this.currentTimestamp=this.clampTime(this.options.startTime+e/this.pxPerMs),this.g_mousedownCursor=e,this.hoverState={x:e,time:this.currentTimestamp},this.drawOverlay())}mouseupFunc(t){if(this.isPressDown&&this.button===0)if(this.isPressDown=!1,this.isMove)this.isMove=!1,this.currentChecked==="pointer"&&(this.returnTime=this.currentTimestamp,this.returnCheckTime("drag",this.returnTime),this.drawOverlay()),this.currentChecked="";else{this.isClick=!0;let e=this.getCursorPositionX(t),i=this.clampTime(this.options.startTime+e/this.pxPerMs);this.currentTimestamp=this.returnTime=i,this.returnCheckTime("click",this.returnTime),this.drawOverlay()}}mousewheelFunc(t){t.preventDefault(),this.markUserInteract();let e=t.deltaY<0?1:-1,i=this.getCursorPositionX(t),s=this.options.startTime+i/this.pxPerMs;e<0?this.options.visibleHours=Math.min(this.options.maxVisibleHours,this.options.visibleHours*1.25):e>0&&(this.options.visibleHours=Math.max(this.options.minVisibleHours,this.options.visibleHours/1.25));let o=this.canvasWidth/(this.options.visibleHours*60*60*1e3);this.options.startTime=this.clampStartTime(s-i/o),this.drawStatic()}mouseoutFunc(t){this.hoverState=null,this.drawOverlay()}touchStartFunc(t){if(t.preventDefault(),t.touches.length===1)this.mousedownFunc(this.normalizeTouchEvent(t.touches[0]));else if(t.touches.length===2){this.isPressDown=!1,this.isMove=!1,this.currentChecked="",document.onmousemove=null,document.onmouseup=null,this.pinchStartDistance=this.getTouchDistance(t.touches),this.pinchStartVisibleHours=this.options.visibleHours;let e=this.getTouchCenterX(t.touches)-this.overlayCanvas.getBoundingClientRect().left;this.pinchCenterPosX=e,this.pinchCenterTime=this.options.startTime+e/this.pxPerMs}}touchMoveFunc(t){if(t.preventDefault(),t.touches.length===1&&this.isPressDown)this.mousemoveFunc(this.normalizeTouchEvent(t.touches[0]));else if(t.touches.length===2&&this.pinchStartDistance){this.markUserInteract();let e=this.getTouchDistance(t.touches)/this.pinchStartDistance;this.options.visibleHours=Math.min(this.options.maxVisibleHours,Math.max(this.options.minVisibleHours,this.pinchStartVisibleHours/(e*e)));let i=this.canvasWidth/(this.options.visibleHours*60*60*1e3);this.options.startTime=this.clampStartTime(this.pinchCenterTime-this.pinchCenterPosX/i),this.drawStatic()}}touchEndFunc(t){if(this.pinchStartDistance&&t.touches.length<2){this.pinchStartDistance=0,this.isPressDown=!1,this.isMove=!1,this.currentChecked="",document.onmousemove=null,document.onmouseup=null;return}this.isPressDown&&t.changedTouches.length&&(this.mouseupFunc(this.normalizeTouchEvent(t.changedTouches[0])),document.onmousemove=null,document.onmouseup=null)}normalizeTouchEvent(t){let e=this.overlayCanvas.getBoundingClientRect();return{button:0,pageX:t.pageX,pageY:t.pageY,clientX:t.clientX,clientY:t.clientY,offsetX:t.clientX-e.left,offsetY:t.clientY-e.top}}getTouchDistance(t){let e=t[0].clientX-t[1].clientX,i=t[0].clientY-t[1].clientY;return Math.sqrt(e*e+i*i)}getTouchCenterX(t){return(t[0].clientX+t[1].clientX)/2}overviewSeek(t){let e=this.overviewCanvas.getBoundingClientRect();if(e.width<=0)return;this.markUserInteract();let i=Math.min(e.width,Math.max(0,t-e.left)),s=this.options.overviewStart+i/e.width*(this.options.overviewEnd-this.options.overviewStart);this.options.startTime=this.clampStartTime(s-this.options.visibleHours*60*60*1e3/2),this.drawStatic()}overviewMousedownFunc(t){t.button===0&&(this.overviewSeek(t.clientX),document.onmousemove=e=>{this.overviewSeek(e.clientX)},document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null})}overviewTouchFunc(t){t.preventDefault(),t.touches.length&&this.overviewSeek(t.touches[0].clientX)}getCursorPositionX(t){let e=0;return t||(t=window.event),t.pageX||t.pageY?e=t.pageX:(t.clientX||t.clientY)&&(e=t.clientX+document.body.scrollLeft+document.documentElement.scrollLeft),e-=this.overlayCanvas.getBoundingClientRect().left,e}clearCanvas(){this.canvasCtx.clearRect(0,0,this.canvasWidth,this.canvasHeight)}clearOverlay(){this.overlayCtx.clearRect(0,0,this.canvasWidth,this.canvasHeight)}returnCheckTime(t,e){var o,a,u,v;let i=Math.floor(e);if(this.options.segments.findIndex(h=>i>=h.begin&&i<=h.end)>=0)(a=(o=this.options).changeCallback)==null||a.call(o,{mode:t,timestamp:i,valid:!0,nextBegin:this.getNextSegment(i)});else{let h=i,r=!1,l=t;if(this.options.snapToNearest&&this.options.segments&&this.options.segments.length){let m=this.getNextSegment(i);m&&(h=Math.floor(m.begin),r=!0,l="snap",this.currentTimestamp=this.clampTime(h))}(v=(u=this.options).changeCallback)==null||v.call(u,{mode:l,timestamp:h,valid:r,nextBegin:this.getNextSegment(i)})}}formatDate(t,e){let i=e?new Date(e):new Date;t=t||"yyyy-MM-dd";const s={"M+":i.getMonth()+1,"d+":i.getDate(),"h+":i.getHours(),"m+":i.getMinutes(),"s+":i.getSeconds(),"q+":Math.floor((i.getMonth()+3)/3),S:i.getMilliseconds()};/(y+)/.test(t)&&(t=t.replace(RegExp.$1,(i.getFullYear()+"").substr(4-RegExp.$1.length)));for(const o in s)new RegExp("("+o+")").test(t)&&(t=t.replace(RegExp.$1,RegExp.$1.length==1?s[o]:("00"+s[o]).substr((""+s[o]).length)));return t}updateDatas(t){this.options.visibleHours=Math.min(this.options.maxVisibleHours,Math.max(this.options.minVisibleHours,t.visibleHours)),this.options.startTime=t.startTime,t.minTime!==void 0&&(this.options.minTime=t.minTime),t.maxTime!==void 0&&(this.options.maxTime=t.maxTime),t.overviewStart!=null&&(this.options.overviewStart=t.overviewStart),t.overviewEnd!=null&&(this.options.overviewEnd=t.overviewEnd),this.options.startTime=this.clampStartTime(this.options.startTime),this.options.segments=this.normalizeSegments(t.segments),!this.options.segments.some(i=>this.currentTimestamp>=i.begin&&this.currentTimestamp<=i.end)&&this.options.segments.length&&(this.currentTimestamp=this.options.segments[0].begin),this.drawStatic()}updateOptions(t){if(!t||typeof t!="object")return;const e=this.options.overview,i=["axisStyle","segments","visibleHours","startTime"];Object.keys(t).forEach(s=>{t[s]===void 0||i.includes(s)||(this.options[s]=t[s])}),t.axisStyle&&(this.options.axisStyle=Object.assign({},this.options.axisStyle,t.axisStyle)),t.segments!==void 0&&(this.options.segments=this.normalizeSegments(t.segments)),t.visibleHours!==void 0&&(this.options.visibleHours=Math.min(this.options.maxVisibleHours,Math.max(this.options.minVisibleHours,t.visibleHours))),t.startTime!==void 0&&(this.options.startTime=t.startTime),(t.startTime!==void 0||t.minTime!==void 0||t.maxTime!==void 0)&&(this.options.startTime=this.clampStartTime(this.options.startTime)),t.overview!==void 0&&t.overview!==e&&(this.options.overview?this.mountOverview():this.unmountOverview()),["overview","overviewHeight","overviewGap"].some(s=>t[s]!==void 0)&&this.initCanvasSize(),t.backgroundColor!==void 0&&this.canvas&&(this.canvas.style.backgroundColor=t.backgroundColor),t.segments!==void 0&&!this.options.segments.some(o=>this.currentTimestamp>=o.begin&&this.currentTimestamp<=o.end)&&this.options.segments.length&&(this.currentTimestamp=this.options.segments[0].begin),this.drawStatic()}updateTime(t){var s,o;let e=this.clampTime(t);this.currentTimestamp=e,this.returnTime=e,this.isClick=!0,this.options.centerPointer&&!this.isCenterPaused()?(this.options.startTime=this.clampStartTime(e-this.options.visibleHours*60*60*1e3/2),this.drawStatic()):this.drawOverlay();let i=(this.options.segments||[]).some(a=>e>=a.begin&&e<=a.end);(o=(s=this.options).playCallback)==null||o.call(s,{timestamp:Math.floor(e),valid:i})}markUserInteract(){this.centerPaused=!0,this.lastInteractTime=Date.now()}isCenterPaused(){return this.centerPaused?this.isPressDown||this.pinchStartDistance?!0:Date.now()-this.lastInteractTime>=this.options.centerResumeDelay?(this.centerPaused=!1,!1):!0:!1}getViewport(){return{startTime:this.options.startTime,visibleHours:this.options.visibleHours}}setViewport(t,e){e!=null&&(this.options.visibleHours=Math.min(this.options.maxVisibleHours,Math.max(this.options.minVisibleHours,e))),t!=null&&(this.options.startTime=this.clampStartTime(t)),this.drawStatic()}scrollTo(t){this.options.startTime=this.clampStartTime(t-this.options.visibleHours*60*60*1e3/2),this.drawStatic()}resumeCenter(){this.centerPaused=!1,this.lastInteractTime=0,this.scrollTo(this.currentTimestamp)}zoomBy(t){if(!(t>0))return;let e=this.options.startTime+this.options.visibleHours*60*60*1e3/2;this.options.visibleHours=Math.min(this.options.maxVisibleHours,Math.max(this.options.minVisibleHours,this.options.visibleHours/t)),this.options.startTime=this.clampStartTime(e-this.options.visibleHours*60*60*1e3/2),this.drawStatic()}zoomIn(){this.zoomBy(1.25)}zoomOut(){this.zoomBy(.8)}getNextSegments(t){return(this.options.segments||[]).filter(e=>e.begin>=t).sort((e,i)=>e.begin-i.begin)}getNextSegment(t){return this.getNextSegments(t)[0]||null}normalizeSegments(t){if(!Array.isArray(t))return[];let e=t.filter(s=>s&&s.end>s.begin).sort((s,o)=>s.begin-o.begin||o.end-s.end),i=[];return e.forEach(s=>{let o=i[i.length-1];if(!o||s.begin>=o.end){i.push(Object.assign({},s));return}s.end<=o.end||(o.end=s.begin,o.end>o.begin?i.push(Object.assign({},s)):i[i.length-1]=Object.assign({},s))}),i}}const C=(n,t)=>{const e=n.__vccOpts||n;for(const[i,s]of t)e[i]=s;return e},S={name:"TimeAxisPlus",props:{width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:40},startTime:{type:Number,default:()=>{const n=new Date;return n.setHours(0,0,0,0),n.getTime()}},segments:{type:Array,default:()=>[]},visibleHours:{type:Number,default:24},maxVisibleHours:{type:Number,default:24},mobileMaxVisibleHours:{type:Number,default:12},minTime:{type:Number,default:null},maxTime:{type:Number,default:null},snapToNearest:{type:Boolean,default:!1},hoverTip:{type:Boolean,default:null},centerPointer:{type:Boolean,default:!1},centerResumeDelay:{type:Number,default:3e3},overview:{type:Boolean,default:!1},overviewHeight:{type:Number,default:20},overviewStart:{type:Number,default:null},overviewEnd:{type:Number,default:null},movePlay:{type:Boolean,default:!1},clickPlay:{type:Boolean,default:!0},backgroundColor:{type:String,default:"#000"},axisStyle:{type:Object,default:()=>({})}},data(){return{axis:null,ro:null,isMobile:!1}},computed:{effectiveMaxVisibleHours(){return this.isMobile?this.mobileMaxVisibleHours:this.maxVisibleHours},effectiveHoverTip(){return this.hoverTip==null?!this.isMobile:this.hoverTip}},watch:{segments:{deep:!0,handler(){this.updateAxis()}},startTime(){this.updateAxis()},visibleHours(){this.updateAxis()},effectiveMaxVisibleHours(n){this.axis&&(this.axis.options.maxVisibleHours=n)},effectiveHoverTip(n){this.axis&&(this.axis.options.hoverTip=n)},minTime(){this.updateAxis()},maxTime(){this.updateAxis()},snapToNearest(n){this.axis&&(this.axis.options.snapToNearest=n)},centerPointer(n){this.axis&&(this.axis.options.centerPointer=n)},centerResumeDelay(n){this.axis&&(this.axis.options.centerResumeDelay=n)},axisStyle:{deep:!0,handler(n){this.axis&&(this.axis.options.axisStyle=Object.assign({},this.axis.options.axisStyle,n),this.axis.drawStatic())}},overview(n){console.log(9999887),this.axis&&this.axis.updateOptions({overview:n})},overviewStart(){this.updateAxis()},overviewEnd(){this.updateAxis()}},created(){this.isMobile=window.matchMedia("(pointer: coarse)").matches||/Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)},mounted(){this.$nextTick(()=>{this.initTimeAxis()}),window.addEventListener("resize",this.resizeHandler),this.watchSize()},beforeUnmount(){window.removeEventListener("resize",this.resizeHandler),this.ro&&(this.ro.disconnect(),this.ro=null),this.axis&&(this.axis.destroy(),this.axis=null)},methods:{formatSize(n){return typeof n=="number"?`${n}px`:n},watchSize(){typeof ResizeObserver>"u"||(this.ro=new ResizeObserver(()=>{this.$nextTick(()=>{this.axis&&this.axis.resize()})}),this.ro.observe(this.$refs.TimelineGroup))},initTimeAxis(){this.axis=new b({container:this.$refs.TimelineGroup,backgroundColor:this.backgroundColor,width:this.width,height:this.height,startTime:this.startTime,visibleHours:this.visibleHours,maxVisibleHours:this.effectiveMaxVisibleHours,minTime:this.minTime,maxTime:this.maxTime,snapToNearest:this.snapToNearest,hoverTip:this.effectiveHoverTip,centerPointer:this.centerPointer,centerResumeDelay:this.centerResumeDelay,axisStyle:this.axisStyle,overview:this.overview,overviewHeight:this.overviewHeight,overviewStart:this.overviewStart,overviewEnd:this.overviewEnd,segmentStyle:{background:"rgba(24,208,217,0.5)"},segments:this.segments,changeCallback:n=>{this.$emit("changeTime",n)},playCallback:n=>{this.$emit("playTime",n)}}),console.log(this.axis)},updateAxis(){this.axis&&this.axis.updateDatas({visibleHours:this.visibleHours,startTime:this.startTime,segments:this.segments,minTime:this.minTime,maxTime:this.maxTime,overviewStart:this.overviewStart,overviewEnd:this.overviewEnd})},updateTime(n){this.axis.updateTime(n)},getViewport(){return this.axis?this.axis.getViewport():null},setViewport(n,t){this.axis&&this.axis.setViewport(n,t)},scrollTo(n){this.axis&&this.axis.scrollTo(n)},resumeCenter(){this.axis&&this.axis.resumeCenter()},zoomIn(){this.axis&&this.axis.zoomIn()},zoomOut(){this.axis&&this.axis.zoomOut()},getNextSegment(n){return this.axis?this.axis.getNextSegment(n):null},getNextSegments(n){return this.axis?this.axis.getNextSegments(n):[]},updateOptions(n){this.axis&&this.axis.updateOptions(n)},resizeHandler(){this.axis&&this.axis.resize()}}};function H(n,t,e,i,s,o){return d.openBlock(),d.createElementBlock("div",{class:"timeline-group",ref:"TimelineGroup",style:d.normalizeStyle({width:o.formatSize(e.width),height:o.formatSize(e.height)})},null,4)}const f=C(S,[["render",H],["__scopeId","data-v-b90b2c6f"]]);f.install=n=>{n.component(f.name,f)},c.TimeAxisPlus=f,c.default=f,c.timeAxis=b,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "time-axis-plus",
+  "version": "0.0.1",
+  "type": "module",
+  "author": "YWL",
+  "license": "MIT",
+  "description": "",
+  "main": "index.cjs",
+  "module": "index.es.js",
+  "exports": {
+    ".": {
+      "import": "./index.es.js",
+      "require": "./index.cjs"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "index.*"
+  ],
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}