qwc2/components/timeline/FixedTimeline.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 Input from"../widgets/Input";import"./style/FixedTimeline.css";var FixedTimeline=/*#__PURE__*/function(_React$Component){function FixedTimeline(){var _this;_classCallCheck(this,FixedTimeline);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,FixedTimeline,[].concat(args));_defineProperty(_this,"state",{ticksContainerEl:null,timelineWidth:0});_defineProperty(_this,"navButtonClicked",function(key){if(key==="home"){_this.props.setStartTime(null);_this.props.setEndTime(null)}else if(key==="zoomin"){var mid=0.5*(_this.props.startTime+_this.props.endTime);_this.props.setStartTime(mid-0.25*_this.props.timeSpan);_this.props.setEndTime(mid+0.25*_this.props.timeSpan)}else if(key==="zoomout"){var _mid=0.5*(_this.props.startTime+_this.props.endTime);var newStartTime=Math.max(_this.props.dataStartTime,_mid-_this.props.timeSpan);_this.props.setStartTime(newStartTime);_this.props.setEndTime(Math.min(_this.props.dataEndTime,newStartTime+2*_this.props.timeSpan))}});_defineProperty(_this,"pan",function(dir){var delta=0.1*_this.props.timeSpan;if(dir>0){if(_this.props.dataEndTime-_this.props.endTime>0){var newEndTime=Math.min(_this.props.dataEndTime,_this.props.endTime+delta);_this.props.setStartTime(newEndTime-_this.props.timeSpan);_this.props.setEndTime(newEndTime)}}else{if(_this.props.startTime-_this.props.dataStartTime>0){var newStartTime=Math.max(_this.props.dataStartTime,_this.props.startTime-delta);_this.props.setStartTime(newStartTime);_this.props.setEndTime(newStartTime+_this.props.timeSpan)}}});_defineProperty(_this,"startPan",function(dir){_this.pan(dir);var panInterval=null;var panTimeout=setTimeout(function(){_this.pan(dir);panInterval=setInterval(function(){_this.pan(dir)},50)},250);document.addEventListener("pointerup",function(){clearInterval(panInterval);clearTimeout(panTimeout)},{once:true,capture:true})});_defineProperty(_this,"setTicksContainerRef",function(instance){if(_this.state.ticksContainerEl!==instance){_this.setState({ticksContainerEl:instance})}});_defineProperty(_this,"renderTicks",function(){// Render approx 1 tick every 100 px
var nTicks=Math.round(_this.state.timelineWidth/100);var tickInterval=_this.state.timelineWidth/nTicks;var ticks=[];for(var x=0;x<_this.state.timelineWidth-0.5*tickInterval;x+=tickInterval){ticks.push({pixel:x,time:FixedTimeline.computeTimeFromPixel(_this,x)})}ticks.push({pixel:_this.state.timelineWidth,time:_this.props.endTime});// Render ticks
return ticks.map(function(tick){var style={left:tick.pixel-1+"px"};return/*#__PURE__*/React.createElement("span",{className:tick.time?"fixtimeline-ltick":"fixtimeline-tick",key:"tick"+tick.pixel,style:style},tick.time?/*#__PURE__*/React.createElement("span",null,dayjs(tick.time).format(_this.props.dateFormat)):null)})});return _this}_inherits(FixedTimeline,_React$Component);return _createClass(FixedTimeline,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.state.ticksContainerEl&&(this.props.dialogWidth!==prevProps.dialogWidth||!prevState.ticksContainerEl)){this.setState(function(state){return{timelineWidth:state.ticksContainerEl.getBoundingClientRect().width}})}// Automatically pan if nearing the start/end of timeline
if(this.props.currentTimestamp>this.props.endTime-0.1*this.props.timeSpan){if(this.props.endTime-this.props.currentTimestamp>0){this.pan(+1)}}else if(this.props.currentTimestamp<this.props.startTime+0.1*this.props.timeSpan){if(this.props.currentTimestamp-this.props.startTime>0){this.pan(-1)}}}},{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:"fixtimeline"},/*#__PURE__*/React.createElement("div",{className:"fixtimeline-toolbar"},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(Input,{onChange:this.props.setStartTime,type:"date",value:this.props.startTime.format("YYYY-MM-DD")})),/*#__PURE__*/React.createElement("div",{className:"fixtimeline-toolbar-spacer"}),/*#__PURE__*/React.createElement(ButtonBar,{buttons:navButtons,onClick:this.navButtonClicked}),/*#__PURE__*/React.createElement("div",{className:"fixtimeline-toolbar-spacer"}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(Input,{onChange:this.props.setEndTime,type:"date",value:this.props.endTime.format("YYYY-MM-DD")}))),/*#__PURE__*/React.createElement("div",{className:"fixtimeline-slider"},/*#__PURE__*/React.createElement("button",{className:"button fixtimeline-pan-left",disabled:this.props.startTime.isSame(this.props.dataStartTime),onContextMenu:MiscUtils.killEvent,onPointerDown:function onPointerDown(){return _this2.startPan(-1)}},/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left"})),/*#__PURE__*/React.createElement("div",{className:"fixtimeline-ticks",ref:this.setTicksContainerRef},this.renderTicks()),/*#__PURE__*/React.createElement("button",{className:"button fixtimeline-pan-right",disabled:this.props.endTime.isSame(this.props.dataEndTime),onContextMenu:MiscUtils.killEvent,onPointerDown:function onPointerDown(){return _this2.startPan(1)}},/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right"}))),this.props.children(function(time){return FixedTimeline.computePixelFromTime(_this2,time)},function(pixel){return FixedTimeline.computeTimeFromPixel(_this2,pixel)}))}}],[{key:"computeTimeFromPixel",value:function computeTimeFromPixel(self,pixel){return self.props.startTime+pixel/self.state.timelineWidth*self.props.timeSpan}},{key:"computePixelFromTime",value:function computePixelFromTime(self,time){return(time-self.props.startTime)/self.props.timeSpan*self.state.timelineWidth}}])}(React.Component);_defineProperty(FixedTimeline,"propTypes",{children:PropTypes.func,currentTimestamp:PropTypes.number,dataEndTime:PropTypes.object,dataStartTime:PropTypes.object,dateFormat:PropTypes.string,dialogWidth:PropTypes.number,endTime:PropTypes.object,setEndTime:PropTypes.func,setStartTime:PropTypes.func,startTime:PropTypes.object,timeSpan:PropTypes.number});export{FixedTimeline as default};