@eeacms/react-chart-editor/lib/DataSourcesEditor.js

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _isNil=_interopRequireDefault(require("lodash/isNil"));var _isEqual=_interopRequireDefault(require("lodash/isEqual"));var _cloneDeep=_interopRequireDefault(require("lodash/cloneDeep"));var _debounce=_interopRequireDefault(require("lodash/debounce"));var _handsontable=_interopRequireDefault(require("handsontable"));var _handsontable2=require("./lib/handsontable");var _lib=require("./lib");var _dereference=require("./lib/dereference");var _constants=require("./lib/constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();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 _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)}var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};_handsontable.default.cellTypes.numeric.validator=_handsontable2.numericValidator;_handsontable.default.cellTypes.checkbox.renderer=_handsontable2.checkboxRenderer;_handsontable.default.cellTypes.checkbox.editor=_handsontable2.CheckboxEditor;_handsontable.default.cellTypes.date.validator=_handsontable2.dateValidator;_handsontable.default.cellTypes.date.renderer=_handsontable2.dateRenderer;_handsontable.default.cellTypes.date.editor=_handsontable2.DateEditor;const MIN_ROWS=20;const MIN_COLS=26;const TIMEOUT=150;const TIMEOUT_SCROLL=40;let isScrolling=false;function getContextMenuItemTrigger(hot,name,trigger){var _hot$getPlugin$itemsF;return(_hot$getPlugin$itemsF=hot.getPlugin("ContextMenu").itemsFactory.predefinedItems[name])===null||_hot$getPlugin$itemsF===void 0||(_hot$getPlugin$itemsF=_hot$getPlugin$itemsF[trigger])===null||_hot$getPlugin$itemsF===void 0?void 0:_hot$getPlugin$itemsF.bind(hot)}function isSingleColumnSelected(hot){const ranges=hot.getSelectedRange()||[];let start=Infinity;let end=-Infinity;ranges.forEach(cellRange=>{if(cellRange.from.col<start){start=cellRange.from.col}if(cellRange.to.col>end){end=cellRange.to.col}});return ranges.length&&start-end===0}class DataSourcesEditor extends _react.Component{constructor(){super();this.hot=null;this.changes=[];this.update={};this.scroll={};this.tableEl=_react.default.createRef();this.previewEl=_react.default.createRef();this.getColumns=this.getColumns.bind(this);this.deserialize=this.deserialize.bind(this);this.serialize=this.serialize.bind(this);this.loadDataSources=this.loadDataSources.bind(this);this.beforeUpdate=(0,_debounce.default)(this.beforeUpdate.bind(this),TIMEOUT);this.onUpdate=this.onUpdate.bind(this);this.handleScroll=this.handleScroll.bind(this);this.updateScrollBars=(0,_debounce.default)(this.updateScrollBars.bind(this),TIMEOUT_SCROLL);this.handleVerticalDragStart=this.handleVerticalDragStart.bind(this);this.handleVerticalDrag=this.handleVerticalDrag.bind(this);this.handleVerticalDragEnd=this.handleVerticalDragEnd.bind(this);this.handleHorizontalDragStart=this.handleHorizontalDragStart.bind(this);this.handleHorizontalDrag=this.handleHorizontalDrag.bind(this);this.handleHorizontalDragEnd=this.handleHorizontalDragEnd.bind(this)}componentDidMount(){const self=this;const columns=self.getColumns(this.props.dataSources,this.props.columns);const data=self.deserialize(self.props.dataSources,columns);const contextMenu={items:{row_above:{name:"Insert row(s) above",hidden(){const range=this.getSelectedRangeLast();if(range.from.row===0||range.to.row===0){return true}return getContextMenuItemTrigger(this,"row_above","disabled")()},callback(){const rows=Number(prompt("Enter number of rows:",1))||1;const latestSelection=this.getSelectedRangeLast().getTopRightCorner();this.alter("insert_row_above",latestSelection.row,rows,"ContextMenu.rowAbove")}},row_below:{name:"Insert row(s) below",hidden(){return getContextMenuItemTrigger(this,"row_below","disabled")()},callback(){const rows=Number(prompt("Enter number of rows:",1))||1;const latestSelection=this.getSelectedRangeLast().getBottomRightCorner();this.alter("insert_row_below",latestSelection.row,rows,"ContextMenu.rowBelow")}},col_left:{name:"Insert cols(s) to the left",disabled(){const range=this.getSelectedRangeLast();if(!range||this.selection.isSelectedByRowHeader()||range.isSingleHeader()&&range.highlight.col<0||this.countSourceCols()>=this.getSettings().maxCols){return true}if(this.selection.isSelectedByCorner()){return this.countCols()===0}return false},hidden(){return getContextMenuItemTrigger(this,"col_left","disabled")()},callback(){const length=Number(prompt("Enter number of columns:",1))||1;const data=this.getData();const columns=(0,_cloneDeep.default)(this.getSettings().columns);const latestSelection=this.getSelectedRangeLast().getTopLeftCorner();const alterAction=this.isRtl()?"insert_col_end":"insert_col_start";data.forEach(row=>{row.splice(latestSelection.col+(alterAction==="insert_col_end"?1:0),0,...Array.from({length},()=>null))});columns.splice(latestSelection.col+(alterAction==="insert_col_end"?1:0),0,...Array.from({length},()=>({})));this.updateSettings({columns});this.updateData(data);this.getPlugin("UndoRedo").clear()}},col_right:{name:"Insert cols(s) to the right",disabled(){const range=this.getSelectedRangeLast();if(!range||this.selection.isSelectedByRowHeader()||range.isSingleHeader()&&range.highlight.col<0||this.countSourceCols()>=this.getSettings().maxCols){return true}return false},hidden(){return getContextMenuItemTrigger(this,"col_right","disabled")()},callback(){const length=Number(prompt("Enter number of columns:",1))||1;const data=this.getData();const columns=(0,_cloneDeep.default)(this.getSettings().columns);const latestSelection=this.getSelectedRangeLast().getTopLeftCorner();const alterAction=this.isRtl()?"insert_col_start":"insert_col_end";data.forEach(row=>{row.splice(latestSelection.col+(alterAction==="insert_col_end"?1:0),0,...Array.from({length},()=>null))});columns.splice(latestSelection.col+(alterAction==="insert_col_end"?1:0),0,...Array.from({length},()=>({})));this.updateSettings({columns});this.updateData(data);this.getPlugin("UndoRedo").clear()}},sp1:"---------",remove_row:{hidden(){return getContextMenuItemTrigger(this,"remove_row","disabled")()}},remove_col:{disabled(){const range=this.getSelectedRangeLast();if(!range){return true}if(range.isSingleHeader()&&range.highlight.col<0){return true}const totalColumns=this.countCols();if(this.selection.isSelectedByCorner()){return totalColumns<=1||range.to.col-range.from.col===totalColumns}return this.selection.isSelectedByRowHeader()||totalColumns<=1||range.to.col-range.from.col+1===totalColumns},hidden(){return getContextMenuItemTrigger(this,"remove_col","disabled")()},callback(key,selection){const data=this.getData();const columns=(0,_cloneDeep.default)(this.getSettings().columns);const startColumn=selection[0].start.col;const endColumn=selection[0].end.col;const amount=Math.abs(endColumn-startColumn)+1;const removedColumns=data[0].slice(startColumn,endColumn+1);data.forEach(row=>{row.splice(startColumn,amount)});columns.splice(startColumn,amount);this.updateSettings({columns});this.updateData(data);this.getPlugin("UndoRedo").clear();this.runHooks("_afterRemoveCol",removedColumns)}},clear_column:{hidden(){return getContextMenuItemTrigger(this,"clear_column","disabled")()||!isSingleColumnSelected(this)},callback(key,selection){const startColumn=selection[0].start.col;const endColumn=selection[0].end.col;if(this.countRows()){this.populateFromArray(1,startColumn,[[null]],Math.max(selection[0].start.row,selection[0].end.row),endColumn,"ContextMenu.clearColumn")}}},sp2:"---------",type:{name:"Type",disabled(){return false},submenu:{items:[{key:"type:text",name:"Text",callback(key,selection){const startColumn=selection[0].start.col;const endColumn=selection[0].end.col;const columns=(0,_cloneDeep.default)(this.getSettings().columns);columns.forEach((col,i)=>{if(i>=startColumn&&i<=endColumn){col.type="text"}});this.updateSettings({columns});this.validateCells();self.beforeUpdate()}},{key:"type:number",name:"Number",callback(key,selection){const startColumn=selection[0].start.col;const endColumn=selection[0].end.col;const columns=(0,_cloneDeep.default)(this.getSettings().columns);columns.forEach((col,i)=>{if(i>=startColumn&&i<=endColumn){col.type="numeric"}});this.updateSettings({columns});this.validateCells();self.beforeUpdate()}},{key:"type:date",name:"Date",callback(key,selection){const startColumn=selection[0].start.col;const endColumn=selection[0].end.col;const columns=(0,_cloneDeep.default)(this.getSettings().columns);columns.forEach((col,i)=>{if(i>=startColumn&&i<=endColumn){col.type="date"}});this.updateSettings({columns});this.validateCells();self.beforeUpdate()}}]}},sp3:"---------",undo:"undo",redo:"redo"}};const previewEl=document.querySelector(".grid_panel__resize-bar");const plotEl=document.querySelector(".plot_panel");const height=window.innerHeight-(previewEl.clientHeight+plotEl.clientHeight)-32;self.hot=new _handsontable.default(self.tableEl.current,{data,contextMenu,columns,cells(row,col){const cellProperties={};if(row>0){const value=this.instance.getDataAtCell(row,col);if(!(0,_isNil.default)(value)){cellProperties.className="highlight-cell"}else{cellProperties.className=""}}return cellProperties},width:"100%",height,rowHeaders:true,colHeaders:true,fixedRowsTop:1,minRows:MIN_ROWS,autoWrapRow:true,autoWrapCol:true,fillHandle:"vertical",licenseKey:"non-commercial-and-evaluation",autoColumnSize:true,bindRowsWithHeaders:true,copyPaste:true,manualColumnMove:true,manualColumnResize:true,afterChange(changes,source){if(["loadData","updateData"].includes(source)){this.validateCells()}if(changes){self.changes.push(...changes);self.beforeUpdate()}if(source==="updateData"){const data=this.getData();self.onUpdate({editedColumns:new Set(data[0])})}},afterCreateRow(row,amount,source){if(source==="auto"){return}const data=this.getData();self.onUpdate({editedColumns:new Set(data[0])})},afterRemoveRow(){const data=this.getData();self.onUpdate({editedColumns:new Set(data[0])})},beforeColumnMove(column,finalIndex){let min=Infinity,max=-Infinity;const data=this.getData();const columns=(0,_cloneDeep.default)(this.getSettings().columns);const movedColumns=column.map(col=>columns[col]);column.forEach(col=>{if(col<min){min=col}if(col>max){max=col}});columns.splice(min,max-min+1);columns.splice(finalIndex,0,...movedColumns);data.forEach(row=>{const movedCells=row.splice(min,max-min+1);row.splice(finalIndex,0,...movedCells)});this.updateSettings({columns});this.updateData(data);this.getPlugin("UndoRedo").clear();return false},afterUndo(){this.render()},afterRedo(){this.render()},init(){var _self$tableEl$current,_self$tableEl$current2,_self$tableEl$current3;window.requestAnimationFrame(()=>{const dataSources=self.serialize();const columns=this.getSettings().columns.filter(col=>Boolean(col.key)&&col.key in dataSources);if(!(0,_isEqual.default)(self.props.columns,columns)){self.onUpdate({})}});window.dispatchEvent(new Event("resize"));const container=(_self$tableEl$current=self.tableEl.current)===null||_self$tableEl$current===void 0?void 0:_self$tableEl$current.querySelector(".ht_master .wtHolder");if(container){container.addEventListener("scroll",self.handleScroll);container.dispatchEvent(new Event("scroll",{bubbles:true}))}const verticalThumb=(_self$tableEl$current2=self.tableEl.current)===null||_self$tableEl$current2===void 0?void 0:_self$tableEl$current2.querySelector(".scrollbar-v__thumb");const horizontalThumb=(_self$tableEl$current3=self.tableEl.current)===null||_self$tableEl$current3===void 0?void 0:_self$tableEl$current3.querySelector(".scrollbar-h__thumb");if(verticalThumb){verticalThumb.addEventListener("mousedown",self.handleVerticalDragStart)}if(horizontalThumb){horizontalThumb.addEventListener("mousedown",self.handleHorizontalDragStart)}}});self.hot.addHook("_afterRemoveCol",function(removedColumns){self.onUpdate({removedColumns})})}componentWillUnmount(){var _this$tableEl$current,_this$hot;const container=(_this$tableEl$current=this.tableEl.current)===null||_this$tableEl$current===void 0?void 0:_this$tableEl$current.querySelector(".ht_master .wtHolder");if(container){container.removeEventListener("scroll",this.handleScroll);const verticalThumb=container.querySelector(".scrollbar-v__thumb");const horizontalThumb=container.querySelector(".scrollbar-h__thumb");if(verticalThumb){verticalThumb.removeEventListener("mousedown",this.handleVerticalDragStart)}if(horizontalThumb){horizontalThumb.removeEventListener("mousedown",this.handleHorizontalDragStart)}document.removeEventListener("mousemove",this.handleVerticalDrag);document.removeEventListener("mouseup",this.handleVerticalDragEnd);document.removeEventListener("mousemove",this.handleHorizontalDrag);document.removeEventListener("mouseup",this.handleHorizontalDragEnd);this.updateScrollBars.cancel()}(_this$hot=this.hot)===null||_this$hot===void 0||_this$hot.destroy()}getColumns(dataSources){let columns=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];const keys=[...Object.keys(dataSources||{})];const colsInfo=columns.concat(Array.from({length:Math.max(0,MIN_COLS-columns.length,keys.length-columns.length)},()=>({}))).map((col,i)=>{const colInfo=_objectSpread(_objectSpread({},col),col.key?{}:{key:keys[i]||null});if(!col.key){delete keys[i]}else{const index=keys.indexOf(col.key);if(index!==-1){delete keys[index]}}return colInfo});keys.forEach(key=>{colsInfo.push({key})});return colsInfo}deserialize(dataSources,columns){let col=0;return columns.reduce((acc,opts)=>{if(!opts.key){return acc}const value=[opts.key,...(dataSources[opts.key]||[]).flat()];value.forEach((_,i)=>{if(!acc[i]){acc[i]=[]}acc[i][col]=value[i]});++col;return acc},[[]])}serialize(){var _this$hot2;const dataSources={};const columnsInfo=[];const data=((_this$hot2=this.hot)===null||_this$hot2===void 0?void 0:_this$hot2.getData())||[];data.forEach((row,i)=>{row.forEach((cell,j)=>{if(!columnsInfo[j]){columnsInfo[j]={data:[],emptyIndex:0,empty:0,length:0}}if(i===0){columnsInfo[j].data.push(cell);return}if((0,_isNil.default)(cell)){columnsInfo[j].empty+=1}else{columnsInfo[j].emptyIndex=i+1}columnsInfo[j].length+=1;columnsInfo[j].data.push(cell)})});columnsInfo.forEach(info=>{if(info.empty!==info.length&&info.data[0]){dataSources[info.data[0]]=info.data.slice(1,info.emptyIndex)}});return dataSources}loadDataSources(dataSources){let feedColumns=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];let update=arguments.length>2?arguments[2]:undefined;const columns=this.getColumns(dataSources,feedColumns);const data=this.deserialize(dataSources,columns);this.hot.updateSettings({columns});this.hot.updateData(data);if(update){this.update=update}}beforeUpdate(){requestAnimationFrame(()=>{let updateColumns=false;const editedColumns=[];const renamedColumns=[];const data=this.hot.getData();const columns=(0,_cloneDeep.default)(this.hot.getSettings().columns);this.changes.forEach(change=>{const[row,col,oldValue,newValue]=change;if(oldValue===newValue){return}if(row!==0){editedColumns.push(data[0][col])}else{renamedColumns.push([oldValue,newValue]);columns[col].key=newValue;updateColumns=true}});if(updateColumns){this.hot.updateSettings({columns});this.hot.render()}this.onUpdate({editedColumns:new Set(editedColumns),renamedColumns});this.changes=[]})}onUpdate(changes){requestAnimationFrame(()=>{var _this$update,_this$update2;const update={layout:_objectSpread({},((_this$update=this.update)===null||_this$update===void 0?void 0:_this$update.layout)||{}),traces:[...(((_this$update2=this.update)===null||_this$update2===void 0?void 0:_this$update2.traces)||[])]};const dataSources=this.serialize();const dataSourceOptions=Object.keys(dataSources).map(name=>({value:name,label:name}));const columns=this.hot.getSettings().columns.filter(col=>Boolean(col.key)&&col.key in dataSources);const{editedColumns=[],renamedColumns=[],removedColumns=[]}=changes;const attrs=[...this.props.data.reduce((acc,trace,index)=>{Object.entries((0,_lib.getAttrsPath)(trace,_constants.TRACE_SRC_ATTRIBUTES)).forEach(_ref=>{let[attr]=_ref;acc.push({attr,index,trace:true})});return acc},[]),...Object.entries((0,_lib.getAttrsPath)(this.props.layout,_constants.LAYOUT_SRC_ATTRIBUTES)).reduce((acc,_ref2)=>{let[attr]=_ref2;acc.push({attr,layout:true});return acc},[])];attrs.forEach(_ref3=>{let{attr,trace,layout,index}=_ref3;function updateAttr(attr,value){if(layout&&attr.includes("meta.columnNames")){return}if(trace&&!update.traces[index]){update.traces[index]={}}if(trace){update.traces[index][attr]=update.traces[index][attr]||value}if(layout){update.layout[attr]=update.layout[attr]||value}}const container=trace?this.props.data[index]:this.props.layout;const srcAttr=(0,_lib.getSrcAttr)(container,attr,this.props.srcConverters);editedColumns.forEach(col=>{if(!col||!(0,_lib.inSrcAttr)(srcAttr,col)){return}if(Array.isArray(srcAttr.value)){srcAttr.value=srcAttr.value.reduce((acc,value)=>{if((0,_lib.getData)(container,_objectSpread(_objectSpread({},srcAttr),{},{value}),dataSources)){acc.push(value)}return acc},[])}const data=(0,_lib.getData)(container,srcAttr,dataSources);if(!data){srcAttr.value=null}else{srcAttr.value=(0,_lib.getAdjustedSrcAttr)(srcAttr).value}updateAttr(attr,data);if(!(0,_isEqual.default)(srcAttr.value,srcAttr.originalValue)){updateAttr(srcAttr.key,srcAttr.value);updateAttr("meta.columnNames.".concat(attr),srcAttr.value?(0,_dereference.getColumnNames)(typeof srcAttr.value==="string"?[srcAttr.value]:srcAttr.value,dataSourceOptions):null)}});renamedColumns.forEach(change=>{const[oldCol,newCol]=change;if(!(0,_lib.inSrcAttr)(srcAttr,oldCol)){return}if(Array.isArray(srcAttr.value)){srcAttr.value=srcAttr.value.reduce((acc,value)=>{if(value===oldCol){acc.push(newCol)}else{acc.push(value)}return acc},[]);updateAttr(srcAttr.key,srcAttr.value);updateAttr("meta.columnNames.".concat(attr),(0,_dereference.getColumnNames)(srcAttr.value,dataSourceOptions))}if(typeof srcAttr.value==="string"&&srcAttr.value===oldCol){srcAttr.value=newCol;updateAttr(srcAttr.key,newCol);updateAttr("meta.columnNames.".concat(attr),(0,_dereference.getColumnNames)([srcAttr.value],dataSourceOptions))}});removedColumns.forEach(col=>{if(!col||!(0,_lib.inSrcAttr)(srcAttr,col)){return}let data;if(Array.isArray(srcAttr.value)){srcAttr.value=srcAttr.value.filter(value=>value!==col);data=(0,_lib.getData)(container,srcAttr,dataSources)}if(typeof srcAttr.value==="string"&&srcAttr.value===col){srcAttr.value=null;data=null}updateAttr(srcAttr.key,srcAttr.value);updateAttr(attr,data)})});update.traces.forEach((update,i)=>{if(!Object.keys(update).length){return}this.props.onUpdate({type:_constants.EDITOR_ACTIONS.UPDATE_TRACES,payload:{update,traceIndexes:[i]}})});if(Object.keys(update.layout).length){this.props.onUpdate({type:_constants.EDITOR_ACTIONS.UPDATE_LAYOUT,payload:{update:update.layout}})}if(!(0,_isEqual.default)(this.props.dataSources,dataSources)||!(0,_isEqual.default)(this.props.columns,columns)){this.props.onUpdate({type:_constants.EDITOR_ACTIONS.UPDATE_DATA_SOURCES,payload:{dataSources,columns}})}this.update={}})}handleScroll(){var _this$tableEl$current2,_this$tableEl$current3;const verticalThumb=(_this$tableEl$current2=this.tableEl.current)===null||_this$tableEl$current2===void 0?void 0:_this$tableEl$current2.querySelector(".scrollbar-v__thumb");const horizontalThumb=(_this$tableEl$current3=this.tableEl.current)===null||_this$tableEl$current3===void 0?void 0:_this$tableEl$current3.querySelector(".scrollbar-h__thumb");if(!verticalThumb||!horizontalThumb){return}verticalThumb.classList.add("active");horizontalThumb.classList.add("active");clearTimeout(isScrolling);isScrolling=setTimeout(()=>{verticalThumb.classList.remove("active");horizontalThumb.classList.remove("active")},200);this.updateScrollBars()}updateScrollBars(){var _this$tableEl$current4,_this$tableEl$current5,_this$tableEl$current6;const wtHolder=(_this$tableEl$current4=this.tableEl.current)===null||_this$tableEl$current4===void 0?void 0:_this$tableEl$current4.querySelector(".ht_master .wtHolder");const verticalThumb=(_this$tableEl$current5=this.tableEl.current)===null||_this$tableEl$current5===void 0?void 0:_this$tableEl$current5.querySelector(".scrollbar-v__thumb");const horizontalThumb=(_this$tableEl$current6=this.tableEl.current)===null||_this$tableEl$current6===void 0?void 0:_this$tableEl$current6.querySelector(".scrollbar-h__thumb");if(!wtHolder||!verticalThumb||!horizontalThumb){return}const containerHeight=wtHolder.clientHeight;const scrollHeight=wtHolder.scrollHeight;const scrollTop=wtHolder.scrollTop;const verticalThumbHeight=containerHeight*containerHeight/scrollHeight;verticalThumb.style.height=verticalThumbHeight+"px";const maxVerticalThumbTop=containerHeight-verticalThumbHeight;const verticalThumbTop=scrollTop/(scrollHeight-containerHeight)*maxVerticalThumbTop;verticalThumb.style.transform="translateY(".concat(verticalThumbTop,"px)");const containerWidth=wtHolder.clientWidth;const scrollWidth=wtHolder.scrollWidth;const scrollLeft=wtHolder.scrollLeft;const horizontalThumbWidth=containerWidth*containerWidth/scrollWidth;horizontalThumb.style.width=horizontalThumbWidth+"px";const maxHorizontalThumbLeft=containerWidth-horizontalThumbWidth;const horizontalThumbLeft=scrollLeft/(scrollWidth-containerWidth)*maxHorizontalThumbLeft;horizontalThumb.style.transform="translateX(".concat(horizontalThumbLeft,"px)")}handleVerticalDragStart(e){e.preventDefault();const container=this.tableEl.current.querySelector(".ht_master .wtHolder");const verticalThumb=this.tableEl.current.querySelector(".scrollbar-v__thumb");this.scroll.dragStartY=e.pageY;this.scroll.initialScrollTop=container.scrollTop;this.scroll.draggingVertical=true;verticalThumb.classList.add("active");document.addEventListener("mousemove",this.handleVerticalDrag);document.addEventListener("mouseup",this.handleVerticalDragEnd)}handleVerticalDrag(e){if(!this.scroll.draggingVertical){return}const container=this.tableEl.current.querySelector(".ht_master .wtHolder");const containerHeight=container.clientHeight;const scrollHeight=container.scrollHeight;const verticalThumb=this.tableEl.current.querySelector(".scrollbar-v__thumb");const verticalThumbHeight=verticalThumb.offsetHeight;const maxScrollTop=scrollHeight-containerHeight;const maxVerticalThumbTop=containerHeight-verticalThumbHeight;const deltaY=e.pageY-this.scroll.dragStartY;const thumbMovementRatio=deltaY/maxVerticalThumbTop;const newScrollTop=this.scroll.initialScrollTop+thumbMovementRatio*maxScrollTop;container.scrollTop=newScrollTop}handleVerticalDragEnd(){const verticalThumb=this.tableEl.current.querySelector(".scrollbar-v__thumb");this.scroll.draggingHorizontal=false;verticalThumb.classList.remove("active");document.removeEventListener("mousemove",this.handleVerticalDrag);document.removeEventListener("mouseup",this.handleVerticalDragEnd)}handleHorizontalDragStart(e){e.preventDefault();const container=this.tableEl.current.querySelector(".ht_master .wtHolder");const horizontalThumb=this.tableEl.current.querySelector(".scrollbar-h__thumb");this.scroll.dragStartX=e.pageX;this.scroll.initialScrollLeft=container.scrollLeft;this.scroll.draggingHorizontal=true;horizontalThumb.classList.add("active");document.addEventListener("mousemove",this.handleHorizontalDrag);document.addEventListener("mouseup",this.handleHorizontalDragEnd)}handleHorizontalDrag(e){if(!this.scroll.draggingHorizontal){return}const container=this.tableEl.current.querySelector(".ht_master .wtHolder");const containerWidth=container.clientWidth;const scrollWidth=container.scrollWidth;const horizontalThumb=this.tableEl.current.querySelector(".scrollbar-h__thumb");const horizontalThumbWidth=horizontalThumb.offsetWidth;const maxScrollLeft=scrollWidth-containerWidth;const maxHorizontalThumbLeft=containerWidth-horizontalThumbWidth;const deltaX=e.pageX-this.scroll.dragStartX;const thumbMovementRatio=deltaX/maxHorizontalThumbLeft;const newScrollLeft=this.scroll.initialScrollLeft+thumbMovementRatio*maxScrollLeft;container.scrollLeft=newScrollLeft}handleHorizontalDragEnd(){const horizontalThumb=this.tableEl.current.querySelector(".scrollbar-h__thumb");this.scroll.draggingHorizontal=false;horizontalThumb.classList.remove("active");document.removeEventListener("mousemove",this.handleHorizontalDrag);document.removeEventListener("mouseup",this.handleHorizontalDragEnd)}render(){return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("div",{className:"grid_panel"},_react.default.createElement("div",{className:"ht-theme-main",ref:this.tableEl},_react.default.createElement("div",{className:"scrollbar-v"},_react.default.createElement("div",{className:"scrollbar-v__thumb"})),_react.default.createElement("div",{className:"scrollbar-h"},_react.default.createElement("div",{className:"scrollbar-h__thumb"})))),_react.default.createElement("div",{className:"grid_panel__resize-bar",onMouseDown:e=>{e.preventDefault();const startY=e.clientY;const startHeight=this.hot.getSettings().height;let height=startHeight;const handleMouseMove=e=>{e.preventDefault();const deltaY=e.clientY-startY;this.previewEl.current.style.top=deltaY+"px";height=Math.max(_constants.MIN_GRID_HEIGHT,startHeight+deltaY)};const handleMouseUp=()=>{document.removeEventListener("mousemove",handleMouseMove);document.removeEventListener("mouseup",handleMouseUp);this.previewEl.current.style.top="0px";this.hot.updateSettings({height})};document.addEventListener("mousemove",handleMouseMove);document.addEventListener("mouseup",handleMouseUp)}},_react.default.createElement("div",{className:"grid_panel__resize-divider"}),_react.default.createElement("div",{className:"grid_panel__resize-preview",ref:this.previewEl})))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}DataSourcesEditor.propTypes={data:_propTypes.default.array,layout:_propTypes.default.object,dataSources:_propTypes.default.object,columns:_propTypes.default.arrayOf(_propTypes.default.shape({key:_propTypes.default.string,type:_propTypes.default.string})),srcConverters:_propTypes.default.shape({toSrc:_propTypes.default.func.isRequired,fromSrc:_propTypes.default.func.isRequired}),onUpdate:_propTypes.default.func};const _default=DataSourcesEditor;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(MIN_ROWS,"MIN_ROWS","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(MIN_COLS,"MIN_COLS","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(TIMEOUT,"TIMEOUT","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(TIMEOUT_SCROLL,"TIMEOUT_SCROLL","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(isScrolling,"isScrolling","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(getContextMenuItemTrigger,"getContextMenuItemTrigger","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(isSingleColumnSelected,"isSingleColumnSelected","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(DataSourcesEditor,"DataSourcesEditor","/react-chart-editor/src/DataSourcesEditor.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/DataSourcesEditor.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=DataSourcesEditor.js.map