qwc2/components/timeline/InfiniteTimeline.js

QGIS Web Client

function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
 * Copyright 2024 Sourcepole AG
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */import React from"react";import dayjs from"dayjs";import PropTypes from"prop-types";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Icon from"../Icon";import ButtonBar from"../widgets/ButtonBar";import NumberInput from"../widgets/NumberInput";import"./style/InfiniteTimeline.css";var InfiniteTimeline=/*#__PURE__*/function(_React$Component){function InfiniteTimeline(){var _this;_classCallCheck(this,InfiniteTimeline);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,InfiniteTimeline,[].concat(args));_defineProperty(_this,"state",{timelineContainerEl:null,timelineWidth:0,timeScalePast:1,timeScaleFuture:1,panOffset:0,zoomFactor:1// 1 = [startTime, endTime] fits dialog width in linear scale,
});_defineProperty(_this,"setTimelineContainerRef",function(instance){if(_this.state.timelineContainerEl!==instance){_this.setState({timelineContainerEl:instance})}});_defineProperty(_this,"renderTicks",function(){var width=_this.state.timelineWidth;var now=dayjs(_this.props.currentTimestamp);var xnow=0.5*width-_this.state.panOffset;// Render one tick every 100px
var ticks=[{pixel:xnow,time:now}];// Compute ticks before current time
var x=xnow;x-=100;while(x>=0){if(x<width){ticks.push({pixel:x,time:InfiniteTimeline.computeTimeFromPixel(_this,x)})}x-=100}// Compute ticks after current time
x=xnow;x+=100;while(x<=width){if(x>0){ticks.push({pixel:x,time:InfiniteTimeline.computeTimeFromPixel(_this,x)})}x+=100}// Intermediate ticks (lines only)
var tickPos=[20,40,60,80].map(function(p){return Math.pow(p/100,1/_this.state.timeScalePast)*100});var i=0;for(x=xnow;x-tickPos[i]>=0;){if(x-tickPos[i]<width){ticks.push({pixel:x-tickPos[i]})}i+=1;if(i>=tickPos.length){x-=100;i=0}}i=0;tickPos=[20,40,60,80].map(function(p){return Math.pow(p/100,1/_this.state.timeScaleFuture)*100});for(x=xnow;x+tickPos[i]<=width;){if(x+tickPos[i]>0){ticks.push({pixel:x+tickPos[i]})}i+=1;if(i>=tickPos.length){x+=100;i=0}}// Render ticks
return ticks.map(function(tick){var style={left:tick.pixel-1+"px"};return/*#__PURE__*/React.createElement("span",{className:tick.time?"inftimeline-ltick":"inftimeline-tick",key:"tick"+tick.pixel,style:style},tick.time?/*#__PURE__*/React.createElement("span",null,dayjs(tick.time).format(_this.props.dateFormat)):null)})});_defineProperty(_this,"onSliderWheel",function(ev){if(ev.shiftKey){if(ev.deltaY<0){_this.setState(function(state){return{zoomFactor:state.zoomFactor*0.5}})}else if(ev.deltaY>0){_this.setState(function(state){return{zoomFactor:state.zoomFactor*2}})}}else{if(ev.deltaX<0){_this.setState(function(state){return{panOffset:state.panOffset-20}})}else if(ev.deltaX>0){_this.setState(function(state){return{panOffset:state.panOffset+20}})}}ev.preventDefault();ev.stopPropagation()});_defineProperty(_this,"navButtonClicked",function(key){if(key==="home"){_this.setState({panOffset:0,zoomFactor:1})}else if(key==="zoomin"){_this.setState(function(state){return{zoomFactor:state.zoomFactor*0.5}})}else if(key==="zoomout"){_this.setState(function(state){return{zoomFactor:state.zoomFactor*2}})}});_defineProperty(_this,"setTimeScalePast",function(value){_this.props.setMarkersCanBeEnabled(value===1&&_this.state.timeScaleFuture===1);_this.setState({timeScalePast:value})});_defineProperty(_this,"setTimeScaleFuture",function(value){_this.props.setMarkersCanBeEnabled(_this.state.timeScalePast===1&&value===1);_this.setState({timeScaleFuture:value})});_defineProperty(_this,"pan",function(offset){_this.setState(function(state){return{panOffset:state.panOffset+offset}});var panInterval=null;var panTimeout=setTimeout(function(){_this.setState(function(state){return{panOffset:state.panOffset+offset}});panInterval=setInterval(function(){_this.setState(function(state){return{panOffset:state.panOffset+offset}})},50)},250);document.addEventListener("pointerup",function(){clearInterval(panInterval);clearTimeout(panTimeout)},{once:true,capture:true})});return _this}_inherits(InfiniteTimeline,_React$Component);return _createClass(InfiniteTimeline,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.state.timelineContainerEl&&(this.props.dialogWidth!==prevProps.dialogWidth||!prevState.timelineContainerEl)){this.setState(function(state){return{timelineWidth:state.timelineContainerEl.getBoundingClientRect().width}})}if(this.props.currentTimestamp!==prevProps.currentTimestamp){var pixel=InfiniteTimeline.computePixelFromTime(this,this.props.currentTimestamp);if(pixel<0||pixel>=this.state.timelineWidth){this.setState({panOffset:0})}}}},{key:"render",value:function render(){var _this2=this;var navButtons=[{key:"home",tooltip:LocaleUtils.tr("timemanager.home"),icon:"home"},{key:"zoomout",tooltip:LocaleUtils.tr("timemanager.zoomout"),icon:"zoomout"},{key:"zoomin",tooltip:LocaleUtils.tr("timemanager.zoomin"),icon:"zoomin"}];return/*#__PURE__*/React.createElement("div",{className:"inftimeline",onWheel:this.onSliderWheel,ref:this.setTimelineContainerRef},/*#__PURE__*/React.createElement("div",{className:"inftimeline-toolbar"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:navButtons,onClick:this.navButtonClicked}),/*#__PURE__*/React.createElement("div",{className:"inftimeline-toolbar-block"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.timelinescale"),": \xA0"),/*#__PURE__*/React.createElement(NumberInput,{decimals:2,max:10,min:0.01,mobile:true,onChange:this.setTimeScalePast,value:this.state.timeScalePast}),/*#__PURE__*/React.createElement(Icon,{icon:"before",title:LocaleUtils.tr("timemanager.past")}),/*#__PURE__*/React.createElement(Icon,{icon:"after",title:LocaleUtils.tr("timemanager.future")}),/*#__PURE__*/React.createElement(NumberInput,{decimals:2,max:10,min:0.01,mobile:true,onChange:this.setTimeScaleFuture,value:this.state.timeScaleFuture})),/*#__PURE__*/React.createElement("div",{className:"inftimeline-toolbar-spacer"})),/*#__PURE__*/React.createElement("div",{className:"inftimeline-clip"},/*#__PURE__*/React.createElement("button",{className:"button inftimeline-pan-left",onContextMenu:MiscUtils.killEvent,onPointerDown:function onPointerDown(){return _this2.pan(-20)}},/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left"})),/*#__PURE__*/React.createElement("div",{className:"inftimeline-ticks"},this.renderTicks()),/*#__PURE__*/React.createElement("button",{className:"button inftimeline-pan-right",onContextMenu:MiscUtils.killEvent,onPointerDown:function onPointerDown(){return _this2.pan(20)}},/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right"}))),this.props.children(function(time){return InfiniteTimeline.computePixelFromTime(_this2,time)},function(pixel){return InfiniteTimeline.computeTimeFromPixel(_this2,pixel)}))}}],[{key:"computeTimeFromPixel",value:function computeTimeFromPixel(self,pixel){var dpx=self.state.panOffset+pixel-0.5*self.state.timelineWidth;var exp=pixel-0.5*self.state.timelineWidth<0?self.state.timeScalePast:self.state.timeScaleFuture;return self.props.currentTimestamp+Math.sign(dpx)*Math.pow(Math.abs(dpx)/(0.5*self.state.timelineWidth),exp)*0.5*self.props.timeSpan*self.state.zoomFactor}},{key:"computePixelFromTime",value:function computePixelFromTime(self,time){var dt=time-self.props.currentTimestamp;var iexp=dt<0?1/self.state.timeScalePast:1/self.state.timeScaleFuture;return 0.5*self.state.timelineWidth*(1+Math.sign(dt)*Math.pow(Math.abs(dt)/(0.5*self.props.timeSpan*self.state.zoomFactor),iexp))-self.state.panOffset}}])}(React.Component);_defineProperty(InfiniteTimeline,"propTypes",{children:PropTypes.func,currentTimestamp:PropTypes.number,dateFormat:PropTypes.string,dialogWidth:PropTypes.number,endTime:PropTypes.object,setMarkersCanBeEnabled:PropTypes.func,startTime:PropTypes.object,timeSpan:PropTypes.number});export{InfiniteTimeline as default};