@pie-lib/graphing-module 1.4.4 → 1.4.5

package/module/index.js

@@ -1,6 +1,7 @@
-import {_dll_prop_types, _dll_react, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_pie_lib__render_ui, _dll_react_dom, _dll_lodash, _dll_debug, _dll_classnames, _dll_material_ui__core_styles_color_manipulator, _dll_material_ui__icons} from "../../shared-module@^1.4.28/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../config-module@^2.0.4/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../editable-html-module@^2.1.3/module/index.js";
+import {_dll_prop_types, _dll_react, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_pie_lib__render_ui, _dll_react_dom, _dll_lodash, _dll_debug, _dll_classnames, _dll_material_ui__core_styles_color_manipulator, _dll_material_ui__icons} from "../../shared-module@^1.4.29/module/index.js";
+import {_dll_pie_lib__drag} from "../../drag-module@^1.0.52/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../config-module@^2.0.5/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../editable-html-module@^2.1.4/module/index.js";
 const PropTypes$D = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$D.number.isRequired,
@@ -14268,7 +14269,31 @@ const {withStyles: withStyles$3} = _dll_material_ui__core_styles;
 const cn = _dll_classnames;
 const {Button: Button$1} = _dll_material_ui__core;
 const {color: color$3} = _dll_pie_lib__render_ui;
+const {withDragContext: withDragContext} = _dll_pie_lib__drag;
+const {DragSource: DragSource} = _dll_pie_lib__drag;
+const {DropTarget: DropTarget} = _dll_pie_lib__drag;
 const _jsxFileName$5 = "/home/circleci/repo/packages/graphing/src/toggle-bar.jsx";
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
 const buttonStyles = () => ({
   root: {
     color: color$3.text(),
@@ -14309,12 +14334,13 @@ const MiniButton = withStyles$3(buttonStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$5,
-      lineNumber: 38
+      lineNumber: 39
     }
   }, value);
 });
 MiniButton.propTypes = {
   disabled: PropTypes$5.bool,
+  classes: PropTypes$5.object,
   className: PropTypes$5.string,
   disabledClassName: PropTypes$5.string,
   selected: PropTypes$5.bool,
@@ -14325,6 +14351,7 @@ class ToggleBar extends React$5.Component {
   constructor(...args) {
     super(...args);
     ToggleBar.prototype.__init.call(this);
+    ToggleBar.prototype.__init2.call(this);
   }
   static __initStatic() {
     this.propTypes = {
@@ -14333,7 +14360,9 @@ class ToggleBar extends React$5.Component {
       options: PropTypes$5.arrayOf(PropTypes$5.string),
       selectedToolType: PropTypes$5.string,
       disabled: PropTypes$5.bool,
-      onChange: PropTypes$5.func
+      draggableTools: PropTypes$5.bool,
+      onChange: PropTypes$5.func,
+      onChangeToolsOrder: PropTypes$5.func
     };
   }
   static __initStatic2() {
@@ -14342,20 +14371,41 @@ class ToggleBar extends React$5.Component {
   __init() {
     this.select = e => this.props.onChange(e.target.textContent);
   }
+  __init2() {
+    this.moveTool = (dragIndex, hoverIndex) => {
+      const {options, onChangeToolsOrder} = this.props;
+      const dragged = options[dragIndex];
+      options.splice(dragIndex, 1);
+      options.splice(hoverIndex, 0, dragged);
+      onChangeToolsOrder(options);
+    };
+  }
   render() {
-    const {classes, className, disabled, options, selectedToolType} = this.props;
+    const {classes, className, disabled, options, selectedToolType, draggableTools} = this.props;
     return React$5.createElement('div', {
-      className: cn(className),
+      className: cn(className, classes.toolsContainer),
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 79
+        lineNumber: 94
       }
-    }, (options || []).map(option => {
+    }, (options || []).map((option, index) => {
       if ((allTools || []).includes(option)) {
         const isSelected = option === selectedToolType;
-        return React$5.createElement(MiniButton, {
+        const toolRef = React$5.createRef();
+        return React$5.createElement(DragTool, {
           key: option,
+          index: index,
+          draggable: draggableTools,
+          moveTool: this.moveTool,
+          classes: classes,
+          toolRef: toolRef,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$5,
+            lineNumber: 101
+          }
+        }, React$5.createElement(MiniButton, {
           className: cn(classes.button, isSelected && classes.selected),
           disabled: disabled,
           disableRipple: true,
@@ -14365,9 +14415,9 @@ class ToggleBar extends React$5.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName$5,
-            lineNumber: 85
+            lineNumber: 109
           }
-        });
+        }));
       }
     }));
   }
@@ -14375,27 +14425,135 @@ class ToggleBar extends React$5.Component {
 ToggleBar.__initStatic();
 ToggleBar.__initStatic2();
 const styles$3 = theme => ({
+  toolsContainer: {
+    display: 'flex',
+    flexWrap: 'wrap'
+  },
   button: {
     marginRight: theme.spacing.unit / 2,
     marginBottom: theme.spacing.unit / 2,
     color: color$3.text(),
     backgroundColor: color$3.background()
+  },
+  under: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: -1,
+    pointerEvents: 'none'
+  },
+  wrapper: {
+    position: 'relative'
+  },
+  hidden: {
+    opacity: 0
   }
 });
-var ToggleBar$1 = withStyles$3(styles$3)(ToggleBar);
+var ToggleBar$1 = withDragContext(withStyles$3(styles$3)(ToggleBar));
+const DRAG_TYPE = 'tool';
+class Item extends React$5.Component {
+  static __initStatic3() {
+    this.propTypes = {
+      classes: PropTypes$5.object.isRequired,
+      className: PropTypes$5.string,
+      children: PropTypes$5.oneOfType([PropTypes$5.arrayOf(PropTypes$5.node), PropTypes$5.node]),
+      connectDragSource: PropTypes$5.func.isRequired,
+      connectDragPreview: PropTypes$5.func.isRequired,
+      connectDropTarget: PropTypes$5.func.isRequired,
+      isDragging: PropTypes$5.bool
+    };
+  }
+  static __initStatic4() {
+    this.defaultProps = {};
+  }
+  render() {
+    const {classes, children, connectDragSource, connectDropTarget, connectDragPreview, isDragging, toolRef} = this.props;
+    return React$5.createElement('div', {
+      className: classes.wrapper,
+      ref: toolRef,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 181
+      }
+    }, connectDragSource(connectDropTarget(React$5.createElement('div', {
+      className: isDragging && classes.hidden,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 183
+      }
+    }, children))), connectDragPreview(React$5.createElement('div', {
+      className: classes.under,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 185
+      }
+    }, children)));
+  }
+}
+Item.__initStatic3();
+Item.__initStatic4();
+const itemSource = {
+  canDrag(props) {
+    return props.draggable;
+  },
+  beginDrag(props) {
+    return {
+      index: props.index
+    };
+  }
+};
+const itemTarget = {
+  hover(props, monitor) {
+    const dragIndex = monitor.getItem().index;
+    const {toolRef, index: hoverIndex} = props;
+    if (dragIndex === hoverIndex || !toolRef.current) {
+      return;
+    }
+    const hoverBoundingRect = _optionalChain([toolRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.getBoundingClientRect, 'call', _3 => _3()]);
+    const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+    const clientOffset = monitor.getClientOffset();
+    const hoverClientX = clientOffset.x - hoverBoundingRect.left;
+    if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
+      return;
+    }
+    if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
+      return;
+    }
+    props.moveTool(dragIndex, hoverIndex);
+    monitor.getItem().index = hoverIndex;
+  }
+};
+const collectTarget = connect => ({
+  connectDropTarget: connect.dropTarget()
+});
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  connectDragPreview: connect.dragPreview(),
+  isDragging: monitor.isDragging()
+});
+const DragTool = DropTarget(DRAG_TYPE, itemTarget, collectTarget)(DragSource(DRAG_TYPE, itemSource, collectSource)(Item));
 const React$4 = _dll_react;
 const PropTypes$4 = _dll_prop_types;
 const classNames$2 = _dll_classnames;
 const _jsxFileName$4 = "/home/circleci/repo/packages/graphing/src/tool-menu.jsx";
 class ToolMenu extends React$4.Component {
+  constructor(...args) {
+    super(...args);
+    ToolMenu.prototype.__init.call(this);
+  }
   static __initStatic() {
     this.propTypes = {
       className: PropTypes$4.string,
       currentToolType: PropTypes$4.string,
       disabled: PropTypes$4.bool,
+      draggableTools: PropTypes$4.bool,
       labelModeEnabled: PropTypes$4.bool,
       onChange: PropTypes$4.func,
       onToggleLabelMode: PropTypes$4.func,
+      onChangeTools: PropTypes$4.func,
       toolbarTools: PropTypes$4.arrayOf(PropTypes$4.string)
     };
   }
@@ -14404,8 +14562,17 @@ class ToolMenu extends React$4.Component {
       toolbarTools: []
     };
   }
+  __init() {
+    this.updateToolsOrder = (tools, showLabel) => {
+      const {onChangeTools} = this.props;
+      if (showLabel) {
+        tools.push('label');
+      }
+      onChangeTools(tools);
+    };
+  }
   render() {
-    const {className, currentToolType, disabled, labelModeEnabled, onToggleLabelMode, onChange} = this.props;
+    const {className, currentToolType, disabled, draggableTools, labelModeEnabled, onToggleLabelMode, onChange} = this.props;
     let {toolbarTools} = this.props;
     const showLabel = toolbarTools && toolbarTools.some(t => t === 'label');
     toolbarTools = (toolbarTools || []).filter(tT => tT !== 'label');
@@ -14414,17 +14581,19 @@ class ToolMenu extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 38
+        lineNumber: 51
       }
     }, React$4.createElement(ToggleBar$1, {
       disabled: disabled,
+      draggableTools: draggableTools,
       options: toolbarTools,
       selectedToolType: currentToolType,
       onChange: onChange,
+      onChangeToolsOrder: tools => this.updateToolsOrder(tools, showLabel),
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 39
+        lineNumber: 52
       }
     }), showLabel && React$4.createElement(MiniButton, {
       disabled: disabled,
@@ -14434,7 +14603,7 @@ class ToolMenu extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 47
+        lineNumber: 62
       }
     }));
   }
@@ -14583,6 +14752,11 @@ const Collapsible = ({classes, children, title}) => React$2.createElement(Expans
     lineNumber: 53
   }
 }, children));
+Collapsible.propTypes = {
+  classes: PropTypes$2.object,
+  children: PropTypes$2.array,
+  title: PropTypes$2.string
+};
 class GraphWithControls extends React$2.Component {
   static __initStatic() {
     this.propTypes = {
@@ -14630,7 +14804,7 @@ class GraphWithControls extends React$2.Component {
   }
   render() {
     let {currentTool, labelModeEnabled} = this.state;
-    const {axesSettings, classes, className, coordinatesOnHover, collapsibleToolbar, collapsibleToolbarTitle, disabled, domain, labels, onChangeMarks, onUndo, onRedo, onReset, range, size, title} = this.props;
+    const {axesSettings, classes, className, coordinatesOnHover, collapsibleToolbar, collapsibleToolbarTitle, disabled, domain, draggableTools, labels, onChangeMarks, onChangeTools, onUndo, onRedo, onReset, range, size, title} = this.props;
     let {backgroundMarks, marks, toolbarTools} = this.props;
     toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];
     backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
@@ -14643,19 +14817,21 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 135
+        lineNumber: 143
       }
     }, React$2.createElement(ToolMenu, {
       currentToolType: currentTool && currentTool.type,
       disabled: !!disabled,
+      draggableTools: draggableTools,
       labelModeEnabled: labelModeEnabled,
       onChange: tool => this.changeCurrentTool(tool, tools),
       onToggleLabelMode: this.toggleLabelMode,
       toolbarTools: toolbarTools,
+      onChangeTools: onChangeTools,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 136
+        lineNumber: 144
       }
     }), !disabled && React$2.createElement(UndoRedo$1, {
       onUndo: onUndo,
@@ -14664,7 +14840,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 145
+        lineNumber: 155
       }
     }));
     return React$2.createElement('div', {
@@ -14672,14 +14848,14 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 150
+        lineNumber: 160
       }
     }, React$2.createElement('div', {
       className: classes.controls,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 151
+        lineNumber: 161
       }
     }, collapsibleToolbar ? React$2.createElement(Collapsible, {
       classes: classes,
@@ -14687,14 +14863,14 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 153
+        lineNumber: 163
       }
     }, graphActions) : graphActions), React$2.createElement('div', {
       ref: r => this.labelNode = r,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 161
+        lineNumber: 171
       }
     }), React$2.createElement(Graph, {
       axesSettings: axesSettings,
@@ -14713,7 +14889,7 @@ class GraphWithControls extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 163
+        lineNumber: 173
       }
     }));
   }

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "mappings": {
     "@pie-lib/plot": "_dll_pie_lib__plot",
     "@pie-lib/graphing": "_dll_pie_lib__graphing",
@@ -27,15 +27,19 @@
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.4.28"
+      "version": "^1.4.29"
+    },
+    {
+      "name": "@pie-lib/drag-module",
+      "version": "^1.0.52"
     },
     {
       "name": "@pie-lib/config-module",
-      "version": "^2.0.4"
+      "version": "^2.0.5"
     },
     {
       "name": "@pie-lib/editable-html-module",
-      "version": "^2.1.3"
+      "version": "^2.1.4"
     }
   ],
   "isLocal": true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "module": "module/index.js",
   "repository": "pie-framework/pie-lib",
   "publishConfig": {