@pie-lib/graphing 2.6.2 → 2.8.0

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 && (