qwc2 2025.3.31

package/components/style/ThemeList.css

@@ -0,0 +1,200 @@
+div.ThemeList ul {
+    padding: 0;
+    list-style-type: none;
+}
+
+div.ThemeList li.theme-group-header > span {
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    padding: 0.25em;
+    margin: 0 0.5em 0.5em 0.5em;
+}
+
+div.ThemeList li.theme-group-header > span > span.icon {
+    margin-right: 0.25em;
+}
+
+div.ThemeList ul.theme-group-body {
+    padding: 0.25em;
+}
+
+div.ThemeList li.theme-group-header ul.theme-group-body {
+    margin-left: 0.25em;
+}
+
+div.ThemeList li.theme-item {
+    background-color: var(--list-bg-color);
+    font-weight: bold;
+    font-size: small;
+    border: 1px solid var(--border-color);
+    margin: 0.5em;
+    text-align: center;
+    display: inline-block;
+    width: calc(15em + 2px);
+    position: relative;
+}
+div.ThemeList div.theme-item-title {
+    display: flex;
+    align-items: center;
+}
+
+div.ThemeList div.theme-item-title > span:first-child {
+    flex: 1 1 auto;
+    padding: 0.125em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+div.ThemeList div.theme-item-title > span.icon {
+    flex: 0 0 auto;
+    padding: 0.125em;
+    font-size: large;
+}
+
+div.ThemeList div.theme-item-body {
+    background-color: white;
+    height: 7.5em;
+    width: 15em;
+}
+
+div.ThemeList li.theme-item-active div.theme-item-title > span:first-child {
+    color: var(--color-active);
+}
+
+div.ThemeList img.theme-item-thumbnail {
+    width: 100%;
+    height: auto;
+    max-width: 15em;
+    max-height: 7.5em;
+    vertical-align: top;
+}
+
+div.ThemeList div.theme-item-icons {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: 7.5em;
+}
+
+div.ThemeList div.theme-item-icons > span.icon {
+    flex: 0 1 1.5em;
+    padding: 0 0.25em;
+    font-size: large;
+    background-color: var(--button-bg-color);
+    color: var(--text-color);
+    z-index: 2;
+}
+
+div.ThemeList div.theme-item-icons > span.icon:hover {
+    color: var(--color-active);
+}
+
+div.ThemeList li.theme-item:hover {
+    border: 1px solid var(--color-active);
+}
+
+div.ThemeList div.theme-item-icons > span.icon-active {
+    color: var(--color-active);
+}
+
+div.ThemeList div.theme-item-keywords {
+    position: relative;
+    display: inline-block;
+    color: gray;
+    font-size: x-small;
+    font-weight: normal;
+    max-width: 80%;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+div.ThemeList li.theme-item-active {
+    border: 1px solid var(--color-active);
+}
+
+div.ThemeList div.theme-item-info-menu {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    position: relative;
+    color: var(--color-active);
+    padding: 0.25em;
+}
+
+div.ThemeList div.theme-item-info-menu-active {
+    background-color: var(--color-active);
+    color: white;
+}
+
+div.ThemeList div.theme-item-info-menu > span.icon-info {
+    margin-right: 0.25em;
+}
+
+div.ThemeList div.theme-item-info-menu > span.icon-triangle-down {
+    margin-left: 0.25em;
+    font-size: 80%;
+}
+
+div.ThemeList div.theme-item-info-links {
+    position: absolute;
+    top: 100%;
+    max-width: calc(15em + 2px);
+    left: -1px;
+    right: -1px;
+    background-color: rgba(255, 255, 255, 0.85);
+    border: 1px solid var(--color-active);
+}
+
+div.ThemeList div.theme-item-info-links > a {
+    display: block;
+    text-align: left;
+    padding: 0.25em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+div.ThemeList div.theme-item-filterinfo-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 2.29em;
+    font-size: 90%;
+    background-color: rgba(255, 255, 255, 0.85);
+    color: black;
+    font-weight: normal;
+    text-align: left;
+    padding: 0.25em;
+    border-top: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    z-index: 1;
+}
+
+div.ThemeList div.theme-item-filterinfo-overlay > div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+div.ThemeList div.theme-item-filterinfo-overlay > div:not(:last-child) {
+    padding-bottom: 0.25em;
+}
+
+div.ThemeList div.theme-item-restricted-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(127, 127, 127, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 400%;
+}

package/components/style/Toolbar.css

@@ -0,0 +1,20 @@
+div.Toolbar {
+    margin: 0.25em;
+    flex: 0 0 auto;
+    display: flex;
+}
+
+div.Toolbar > .icon {
+    width: 2.5em;
+    height: 2.5em;
+    margin-right: 0.25em;
+    padding: 0.25em;
+    border: 1px solid transparent;
+}
+
+div.Toolbar > .icon:hover,
+div.Toolbar > .toolbar-item-active {
+    border: 1px solid var(--border-color);
+    background-color: var(--button-bg-color-hover);
+    color: var(--button-text-color-hover);
+}

package/components/style/WindowManager.css

@@ -0,0 +1,50 @@
+iframe.windows-iframe-dialog-body {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+div.dock-window iframe.windows-iframe-dialog-body {
+    height: calc(100vh - var(--topbar-height) - var(--bottombar-height));
+    height: calc(var(--vh, 1vh) * 100 - var(--topbar-height) - var(--bottombar-height));
+}
+
+div.windows-notification-container {
+    position: absolute;
+    top: var(--topbar-height);
+    left: 50%;
+    transform: translateX(-50%);
+    display: inline-block;
+    max-width: calc(100% - 0.5em);
+    background-color: var(--container-bg-color);
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
+    border-top: 1px solid rgba(136, 136, 136, 0.5);
+    z-index: 3;
+}
+
+div.windows-notification-container > div {
+    padding: 0 1.25em 0 0.25em;
+    position: relative;
+    border-bottom: 1px solid var(--border-color);
+}
+
+div.windows-notification-container > div > div {
+    padding: 0.25em 0.5em 0.25em 0.25em;
+    display: inline-block;
+}
+
+div.windows-notification-container > div > span {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 0.125em 0.125em 0 0;
+}
+
+div.windows-notification-warn {
+    background-color: orange;
+}
+
+div.windows-notification-error {
+    background-color: red;
+}

package/components/timeline/FixedTimeline.js

@@ -0,0 +1,10 @@
+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 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("mouseup",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),onMouseDown:function onMouseDown(){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),onMouseDown:function onMouseDown(){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};

package/components/timeline/InfiniteTimeline.js

@@ -0,0 +1,13 @@
+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 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("mouseup",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",onMouseDown:function onMouseDown(){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",onMouseDown:function onMouseDown(){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};

package/components/timeline/TimelineFeaturesSlider.js

@@ -0,0 +1,10 @@
+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 ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}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{connect}from"react-redux";import dayjs from"dayjs";import PropTypes from"prop-types";import randomcolor from"randomcolor";import{addLayerFeatures,removeLayer,LayerRole}from"../../actions/layers";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Input from"../widgets/Input";import Spinner from"../widgets/Spinner";import"./style/TimelineFeaturesSlider.css";var TimelineFeaturesSlider=/*#__PURE__*/function(_React$Component){function TimelineFeaturesSlider(){var _this;_classCallCheck(this,TimelineFeaturesSlider);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,TimelineFeaturesSlider,[].concat(args));_defineProperty(_this,"state",{currentTimestampDrag:null,highlightFeatures:null,layerClassifications:{},layerAttrGroups:{}});_defineProperty(_this,"renderCursor",function(timestamp){if(_this.props.timeEnabled){var cursorPos=_this.state.currentTimestampDrag?_this.state.currentTimestampDrag.pos:_this.props.computePixelFromTime(timestamp);var cursorStyle={left:cursorPos-2+"px"};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-cursor",style:cursorStyle},/*#__PURE__*/React.createElement("div",{className:"timeline-slider-cursor-label"},_this.props.cursorFormat.includes("date")?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(Input,{onChange:_this.setCursorDate,required:true,type:"date",value:dayjs(timestamp).format("YYYY-MM-DD")})):null,_this.props.cursorFormat.includes("time")?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(Input,{onChange:_this.setCursorTime,required:true,type:"time",value:dayjs(timestamp).format("HH:mm:ss")})):null))}return null});_defineProperty(_this,"setCursorDate",function(date){if(date){var newdate=dayjs(date,"YYYY-MM-DD");_this.props.timestampChanged(+dayjs(_this.props.currentTimestamp).year(newdate.year()).month(newdate.month()).date(newdate.date()))}});_defineProperty(_this,"setCursorTime",function(time){if(time){var parts=time.split(":").map(function(x){return parseInt(x,10)});_this.props.timestampChanged(+dayjs(_this.props.currentTimestamp).hour(parts[0]).minute(parts[1]).second(parts[2]))}});_defineProperty(_this,"pickCurrentTimestamp",function(event){if(["INPUT","SELECT","OPTION"].includes(event.target.nodeName)){return}clearTimeout(_this.timestampChangeTimeout);var target=event.currentTarget;var rect=target.getBoundingClientRect();var computeTimestamp=function computeTimestamp(ev){if(!_this.props.timeEnabled){return}var pos=Math.max(0,Math.min(ev.clientX-rect.left,rect.right-rect.left));var newTimestamp=dayjs(_this.props.computeTimeFromPixel(pos));// Snap to configured step interval
+var add=null;if(_this.props.stepSizeUnit.endsWith("m")){add=newTimestamp.second()>30;newTimestamp=newTimestamp.second(0)}else if(_this.props.stepSizeUnit.endsWith("h")){add=newTimestamp.minute()>30;newTimestamp=newTimestamp.second(0).minute(0)}else if(_this.props.stepSizeUnit.endsWith("d")){add=newTimestamp.hour()>12;newTimestamp=newTimestamp.second(0).minute(0).hour(0)}else if(_this.props.stepSizeUnit.endsWith("M")){add=newTimestamp.date()>15;newTimestamp=newTimestamp.second(0).minute(0).hour(0).date(1)}else if(_this.props.stepSizeUnit.endsWith("y")){add=newTimestamp.month()>5;newTimestamp=newTimestamp.second(0).minute(0).hour(0).date(1).month(0)}if(add){var num=parseInt(_this.props.stepSizeUnit.slice(0,-1),10)||1;newTimestamp=newTimestamp.add(num,_this.props.stepSizeUnit.slice(-1))}_this.setState({currentTimestampDrag:{pos:pos,time:newTimestamp}})};document.addEventListener("mousemove",computeTimestamp);document.addEventListener("mouseup",function(){if(_this.state.currentTimestampDrag){_this.props.timestampChanged(+_this.state.currentTimestampDrag.time);_this.setState({currentTimestampDrag:null})}document.removeEventListener("mousemove",computeTimestamp)},{once:true,capture:true});computeTimestamp(event)});_defineProperty(_this,"renderTimeFeatures",function(sliderGeom){return Object.entries(_this.props.timeFeatures.features).map(function(_ref){var _ref2=_slicedToArray(_ref,2),layer=_ref2[0],features=_ref2[1];var layerTitleStyle={top:sliderGeom.top+"px",left:0,right:0};sliderGeom.top+=30;var classattr=(_this.state.layerClassifications[layer]||{}).attr||"";var groupattr=(_this.state.layerAttrGroups[layer]||{}).attr||"";var sliderFeatures=null;if(_this.state.layerAttrGroups[layer]){var layerAttrGroups=_this.state.layerAttrGroups[layer];sliderFeatures=Object.values(layerAttrGroups.groups).map(function(groupData){return _this.renderTimeFeature(sliderGeom,groupData.start,groupData.end,groupData.features,"",groupattr,groupData)})}else{var layerAttrClasses=_this.state.layerClassifications[layer];sliderFeatures=features.map(function(feature){var attrData=layerAttrClasses?layerAttrClasses.classes[feature.properties[layerAttrClasses.attr]]:null;var tstart=feature.properties.__startdate;var tend=feature.properties.__enddate;var label=feature.properties[feature.displayfield];return _this.renderTimeFeature(sliderGeom,tstart,tend,[feature],label,classattr,attrData)})}return[/*#__PURE__*/React.createElement("div",{className:"timeline-slider-layertitle",key:layer,style:layerTitleStyle},/*#__PURE__*/React.createElement("span",null,layer),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.group"),":\xA0"),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setGroupAttr(layer,ev.target.value)},value:groupattr},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("timemanager.groupnone")),_this.props.timeFeatures.attributes[layer].map(function(attr){return/*#__PURE__*/React.createElement("option",{key:attr,value:attr},attr)})),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.classify"),":\xA0"),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setClassification(layer,ev.target.value)},value:classattr},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("timemanager.classifynone")),_this.props.timeFeatures.attributes[layer].map(function(attr){return/*#__PURE__*/React.createElement("option",{key:attr,value:attr},attr)}))),sliderFeatures]})});_defineProperty(_this,"renderTimeLayers",function(sliderGeom){return Object.entries(_this.props.timeFeatures.features).reduce(function(res,_ref3){var _ref4=_slicedToArray(_ref3,2),layer=_ref4[0],features=_ref4[1];if(features.length>0){var tstart=features[0].properties.__startdate;var tend=features[0].properties.__enddate;for(var i=1;i<features.length;++i){if(features[i].properties.__startdate<tstart){tstart=features[i].properties.__startdate}if(features[i].properties.__enddate>tend){tend=features[i].properties.__enddate}}return[].concat(_toConsumableArray(res),[_this.renderTimeFeature(sliderGeom,tstart,tend,features,layer)])}return res},[])});_defineProperty(_this,"renderTimeFeature",function(sliderGeom,tstart,tend,features,label,attr,featClass){var left=tstart.isValid()?_this.props.computePixelFromTime(tstart):0;var right=tend.isValid()?_this.props.computePixelFromTime(tend):0;var style={top:sliderGeom.top+"px",left:left+"px"};if(tend.isValid()){style.width=right-left+"px"}else{style.right=0}var tooltip=LocaleUtils.tr("timemanager.starttime")+": "+(tstart.isValid()?tstart.format(_this.props.dateFormat):"-")+"\n"+LocaleUtils.tr("timemanager.endtime")+": "+(tend.isValid()?tend.format(_this.props.dateFormat):"-");if(featClass){style.backgroundColor=featClass.bg;style.color=featClass.fg;label+=(label?": ":"")+featClass.val;tooltip+="\n"+attr+": "+featClass.val}sliderGeom.top+=26;return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-feature",key:features[0].id,onMouseEnter:function onMouseEnter(){return _this.setState({highlightFeatures:features})},onMouseLeave:function onMouseLeave(){return _this.setState({highlightFeatures:null})},style:style,title:tooltip},/*#__PURE__*/React.createElement("span",null,label))});_defineProperty(_this,"renderGradient",function(sliderGeom){if(!_this.props.markersEnabled){return null}var left=_this.props.computePixelFromTime(_this.props.startTime);var right=_this.props.computePixelFromTime(_this.props.endTime);var style={left:left+"px",width:right-left+"px",height:sliderGeom.top+"px",background:"linear-gradient(90deg, "+_this.props.markerConfiguration.gradient.join(", ")+")"};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-gradient",style:style})});_defineProperty(_this,"setClassification",function(layer,attr){_this.setState(function(state){var newLayerClassifications=_objectSpread({},state.layerClassifications);if(attr){var classes={};_this.props.timeFeatures.features[layer].forEach(function(feature){if(!classes[feature.properties[attr]]){var color=randomcolor();classes[feature.properties[attr]]={bg:color,fg:MiscUtils.isBrightColor(color)?"#000":"#FFF",val:feature.properties[attr]}}});newLayerClassifications[layer]={attr:attr,classes:classes}}else{delete newLayerClassifications[layer]}// Attr classification and grouping cannot be enabled at the same time
+var newLayerAttrGroups=_objectSpread({},state.layerAttrGroups);delete newLayerAttrGroups[layer];return{layerClassifications:newLayerClassifications,layerAttrGroups:newLayerAttrGroups}})});_defineProperty(_this,"setGroupAttr",function(layer,attr){_this.setState(function(state){var newLayerAttrGroups=_objectSpread({},state.layerAttrGroups);if(attr){var groups={};_this.props.timeFeatures.features[layer].forEach(function(feature){if(!groups[feature.properties[attr]]){var color=randomcolor();groups[feature.properties[attr]]={bg:color,fg:MiscUtils.isBrightColor(color)?"#000":"#FFF",val:feature.properties[attr],features:[feature],start:feature.properties.__startdate,end:feature.properties.__enddate}}else{if(feature.properties.__startdate<groups[feature.properties[attr]].start){groups[feature.properties[attr]].start=feature.properties.__startdate}if(feature.properties.__enddate>groups[feature.properties[attr]].end){groups[feature.properties[attr]].end=feature.properties.__enddate}groups[feature.properties[attr]].features.push(feature)}});newLayerAttrGroups[layer]={attr:attr,groups:groups}}else{delete newLayerAttrGroups[layer]}// Attr classification and grouping cannot be enabled at the same time
+var newLayerClassifications=_objectSpread({},state.layerClassifications);delete newLayerClassifications[layer];return{layerClassifications:newLayerClassifications,layerAttrGroups:newLayerAttrGroups}})});return _this}_inherits(TimelineFeaturesSlider,_React$Component);return _createClass(TimelineFeaturesSlider,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.state.highlightFeatures!==prevState.highlightFeatures){if(!this.state.highlightFeatures){this.props.removeLayer("timelinefeathighlight")}else{var layer={id:"timelinefeathighlight",role:LayerRole.MARKER,rev:+new Date};this.props.addLayerFeatures(layer,this.state.highlightFeatures,true)}}if(this.props.timeFeatures!==prevProps.timeFeatures){var newLayerClassifications=_objectSpread({},this.state.layerClassifications);Object.keys(this.state.layerClassifications).forEach(function(layername){if(!_this2.props.timeFeatures.attributes[layername]||_this2.props.timeFeatures.attributes[layername]!==prevProps.timeFeatures.attributes[layername]){delete newLayerClassifications.layername}});this.setState(function(state){var newLayerAttrGroups=_objectSpread({},state.layerAttrGroups);Object.keys(state.layerAttrGroups).forEach(function(layername){if(!_this2.props.timeFeatures.attributes[layername]||_this2.props.timeFeatures.attributes[layername]!==prevProps.timeFeatures.attributes[layername]){delete newLayerAttrGroups.layername}});return{layerAttrGroups:newLayerAttrGroups}})}}},{key:"render",value:function render(){var timestamp=this.state.currentTimestampDrag?this.state.currentTimestampDrag.time:this.props.currentTimestamp;var sliderGeom={top:5};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-container"},/*#__PURE__*/React.createElement("div",{className:"timeline-slider",onMouseDown:this.pickCurrentTimestamp},this.props.displayMode==="features"?this.renderTimeFeatures(sliderGeom):null,this.props.displayMode==="layers"?this.renderTimeLayers(sliderGeom):null,this.renderGradient(sliderGeom)),this.renderCursor(timestamp),this.props.timeFeatures.pendingRequests>0?/*#__PURE__*/React.createElement("div",{className:"timeline-slider-loading"},/*#__PURE__*/React.createElement(Spinner,null),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.loading"))):null)}}])}(React.Component);_defineProperty(TimelineFeaturesSlider,"propTypes",{addLayerFeatures:PropTypes.func,computePixelFromTime:PropTypes.func,computeTimeFromPixel:PropTypes.func,currentTimestamp:PropTypes.number,cursorFormat:PropTypes.string,dateFormat:PropTypes.string,displayMode:PropTypes.string,endTime:PropTypes.object,markerConfiguration:PropTypes.object,markersEnabled:PropTypes.bool,removeLayer:PropTypes.func,startTime:PropTypes.object,stepSizeUnit:PropTypes.string,timeEnabled:PropTypes.bool,timeFeatures:PropTypes.object,timestampChanged:PropTypes.func});export default connect(function(){return{}},{addLayerFeatures:addLayerFeatures,removeLayer:removeLayer})(TimelineFeaturesSlider);

package/components/timeline/style/FixedTimeline.css

@@ -0,0 +1,76 @@
+div.fixtimeline {
+    padding: 0.25em;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border-color);
+}
+
+div.fixtimeline-toolbar {
+    display: flex;
+    font-size: 70%;
+}
+
+div.fixtimeline-toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+div.fixtimeline-slider {
+    position: relative;
+}
+
+button.fixtimeline-pan-left,
+button.fixtimeline-pan-right {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    width: 1.5em;
+    height: initial;
+    z-index: 1;
+}
+
+button.fixtimeline-pan-left {
+    left: 0;
+}
+
+button.fixtimeline-pan-right {
+    right: 0;
+}
+
+div.fixtimeline-ticks {
+    margin-top: 2em;
+    position: relative;
+    height: 10px;
+}
+
+div.fixtimeline-ticks > span.fixtimeline-ltick {
+    position: absolute;
+    display: inline-block;
+    width: 2px;
+    height: 100%;
+    background-color: black;
+}
+
+div.fixtimeline-ticks > span.fixtimeline-ltick > span {
+    position: absolute;
+    width: 10em;
+    text-align: center;
+    white-space: pre;
+    font-size: 70%;
+    left: -5em;
+    top: -2.5em;
+}
+
+div.fixtimeline-ticks > span.fixtimeline-tick {
+    position: absolute;
+    display: inline-block;
+    width: 2px;
+    height: 50%;
+    bottom: 0;
+    background-color: gray;
+}
+
+div.fixtimeline-ticks > span.fixtimeline-ltick:first-child,
+div.fixtimeline-ticks > span.fixtimeline-ltick:last-child {
+    display: none;
+}

package/components/timeline/style/InfiniteTimeline.css

@@ -0,0 +1,94 @@
+div.inftimeline {
+    padding: 0 0.25em 0.25em 0.25em;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border-color);
+}
+
+div.inftimeline-toolbar {
+    display: flex;
+    font-size: 75%;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+div.inftimeline-toolbar-block {
+    margin-left: 1em;
+    display: flex;
+    align-items: center;
+}
+
+div.inftimeline-toolbar-block > input,
+div.inftimeline-toolbar-block > div.ToggleSwitch
+ {
+    width: 6em;
+}
+
+div.inftimeline-toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+div.inftimeline-clip {
+    overflow: hidden;
+    position: relative;
+    flex: 0 0 auto;
+}
+
+div.inftimeline-ticks {
+    margin: 2em 0.25em 0 0.25em;
+    position: relative;
+    height: 10px;
+}
+
+
+div.inftimeline-ticks > span.inftimeline-ltick {
+    position: absolute;
+    display: inline-block;
+    width: 2px;
+    height: 100%;
+    background-color: black;
+}
+
+div.inftimeline-ticks > span.inftimeline-ltick > span {
+    position: absolute;
+    width: 10em;
+    text-align: center;
+    white-space: pre;
+    font-size: 70%;
+    left: -5em;
+    top: -2.5em;
+}
+
+div.inftimeline-ticks > span.inftimeline-tick {
+    position: absolute;
+    display: inline-block;
+    width: 2px;
+    height: 50%;
+    bottom: 0;
+    background-color: gray;
+}
+
+button.inftimeline-pan-left,
+button.inftimeline-pan-right {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    width: 1.5em;
+    height: initial;
+    z-index: 1;
+}
+
+button.inftimeline-pan-left:disabled,
+button.inftimeline-pan-right:disabled {
+    color: var(--text-color-disabled);
+}
+
+
+button.inftimeline-pan-left {
+    left: 0;
+}
+
+button.inftimeline-pan-right {
+    right: 0;
+}