@pie-lib/graphing 2.7.0 → 2.8.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -18,9 +18,10 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
+    "@pie-lib/drag": "^1.1.52",
     "@pie-lib/graphing-utils": "^1.1.20",
     "@pie-lib/plot": "^2.2.0",
-    "@pie-lib/render-ui": "^4.12.9",
+    "@pie-lib/render-ui": "^4.13.0",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
     "@vx/event": "^0.0.189",
@@ -43,6 +44,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "2f841d92dcda7472f18cbce517eb664dec2f6442",
+  "gitHead": "f766e0fdb9e51a9449324db51ccaa93904211710",
   "scripts": {}
 }

package/src/graph-with-controls.jsx

@@ -54,6 +54,12 @@ const Collapsible = ({ classes, children, title }) => (
   </ExpansionPanel>
 );
 
+Collapsible.propTypes = {
+  classes: PropTypes.object,
+  children: PropTypes.array,
+  title: PropTypes.string
+};
+
 export class GraphWithControls extends React.Component {
   static propTypes = {
     ...graphPropTypes,
@@ -104,8 +110,10 @@ export class GraphWithControls extends React.Component {
       collapsibleToolbarTitle,
       disabled,
       domain,
+      draggableTools,
       labels,
       onChangeMarks,
+      onChangeTools,
       onUndo,
       onRedo,
       onReset,
@@ -136,10 +144,12 @@ export class GraphWithControls extends React.Component {
         <ToolMenu
           currentToolType={currentTool && currentTool.type}
           disabled={!!disabled}
+          draggableTools={draggableTools}
           labelModeEnabled={labelModeEnabled}
           onChange={tool => this.changeCurrentTool(tool, tools)}
           onToggleLabelMode={this.toggleLabelMode}
           toolbarTools={toolbarTools}
+          onChangeTools={onChangeTools}
         />
 
         {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} />}

package/src/toggle-bar.jsx

@@ -5,6 +5,7 @@ import cn from 'classnames';
 import Button from '@material-ui/core/Button';
 import { color } from '@pie-lib/render-ui';
 import { allTools } from './tools/index';
+import { withDragContext, DragSource, DropTarget } from '@pie-lib/drag';
 
 const buttonStyles = () => ({
   root: {
@@ -52,6 +53,7 @@ export const MiniButton = withStyles(buttonStyles)(props => {
 
 MiniButton.propTypes = {
   disabled: PropTypes.bool,
+  classes: PropTypes.object,
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   selected: PropTypes.bool,
@@ -66,31 +68,53 @@ export class ToggleBar extends React.Component {
     options: PropTypes.arrayOf(PropTypes.string),
     selectedToolType: PropTypes.string,
     disabled: PropTypes.bool,
-    onChange: PropTypes.func
+    draggableTools: PropTypes.bool,
+    onChange: PropTypes.func,
+    onChangeToolsOrder: PropTypes.func
   };
 
   static defaultProps = {};
 
   select = e => this.props.onChange(e.target.textContent);
 
+  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 (
-      <div className={cn(className)}>
-        {(options || []).map(option => {
+      <div className={cn(className, classes.toolsContainer)}>
+        {(options || []).map((option, index) => {
           if ((allTools || []).includes(option)) {
             const isSelected = option === selectedToolType;
+            const toolRef = React.createRef();
 
             return (
-              <MiniButton
+              <DragTool
                 key={option}
-                className={cn(classes.button, isSelected && classes.selected)}
-                disabled={disabled}
-                disableRipple={true}
-                onClick={this.select}
-                value={option}
-                selected={isSelected}
-              />
+                index={index}
+                draggable={draggableTools}
+                moveTool={this.moveTool}
+                classes={classes}
+                toolRef={toolRef}
+              >
+                <MiniButton
+                  className={cn(classes.button, isSelected && classes.selected)}
+                  disabled={disabled}
+                  disableRipple={true}
+                  onClick={this.select}
+                  value={option}
+                  selected={isSelected}
+                />
+              </DragTool>
             );
           }
         })}
@@ -100,12 +124,118 @@ export class ToggleBar extends React.Component {
 }
 
 const styles = theme => ({
+  toolsContainer: {
+    display: 'flex',
+    flexWrap: 'wrap'
+  },
   button: {
     marginRight: theme.spacing.unit / 2,
     marginBottom: theme.spacing.unit / 2,
     color: color.text(),
     backgroundColor: color.background()
+  },
+  under: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: -1,
+    pointerEvents: 'none'
+  },
+  wrapper: {
+    position: 'relative'
+  },
+  hidden: {
+    opacity: 0
+  }
+});
+
+export default withDragContext(withStyles(styles)(ToggleBar));
+
+const DRAG_TYPE = 'tool';
+
+export class Item extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    connectDragSource: PropTypes.func.isRequired,
+    connectDragPreview: PropTypes.func.isRequired,
+    connectDropTarget: PropTypes.func.isRequired,
+    isDragging: PropTypes.bool
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const {
+      classes,
+      children,
+      connectDragSource,
+      connectDropTarget,
+      connectDragPreview,
+      isDragging,
+      toolRef
+    } = this.props;
+
+    return (
+      <div className={classes.wrapper} ref={toolRef}>
+        {connectDragSource(
+          connectDropTarget(<div className={isDragging && classes.hidden}>{children}</div>)
+        )}
+        {connectDragPreview(<div className={classes.under}>{children}</div>)}
+      </div>
+    );
+  }
+}
+
+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 = toolRef.current?.getBoundingClientRect();
+    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()
 });
 
-export default withStyles(styles)(ToggleBar);
+const DragTool = DropTarget(
+  DRAG_TYPE,
+  itemTarget,
+  collectTarget
+)(DragSource(DRAG_TYPE, itemSource, collectSource)(Item));

package/src/tool-menu.jsx

@@ -9,9 +9,11 @@ export class ToolMenu extends React.Component {
     className: PropTypes.string,
     currentToolType: PropTypes.string,
     disabled: PropTypes.bool,
+    draggableTools: PropTypes.bool,
     labelModeEnabled: PropTypes.bool,
     onChange: PropTypes.func,
     onToggleLabelMode: PropTypes.func,
+    onChangeTools: PropTypes.func,
     toolbarTools: PropTypes.arrayOf(PropTypes.string)
   };
 
@@ -19,11 +21,22 @@ export class ToolMenu extends React.Component {
     toolbarTools: []
   };
 
+  updateToolsOrder = (tools, showLabel) => {
+    const { onChangeTools } = this.props;
+
+    if (showLabel) {
+      tools.push('label');
+    }
+
+    onChangeTools(tools);
+  };
+
   render() {
     const {
       className,
       currentToolType,
       disabled,
+      draggableTools,
       labelModeEnabled,
       onToggleLabelMode,
       onChange
@@ -38,9 +51,11 @@ export class ToolMenu extends React.Component {
       <div className={classNames(className)}>
         <ToggleBar
           disabled={disabled}
+          draggableTools={draggableTools}
           options={toolbarTools}
           selectedToolType={currentToolType}
           onChange={onChange}
+          onChangeToolsOrder={tools => this.updateToolsOrder(tools, showLabel)}
         />
 
         {showLabel && (