@pie-lib/graphing 2.7.0 → 2.9.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.7.0",
+  "version": "2.9.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/plot": "^2.3.0",
+    "@pie-lib/render-ui": "^4.13.1",
     "@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": "5f0932d39d7f01be0f96665b8fbe45ee745c2868",
   "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,
@@ -66,6 +72,10 @@ export class GraphWithControls extends React.Component {
   static defaultProps = {
     collapsibleToolbar: false,
     collapsibleToolbarTitle: '',
+    disabledLabels: false,
+    disabledTitle: false,
+    showLabels: true,
+    showTitle: true,
     toolbarTools: []
   };
 
@@ -103,14 +113,22 @@ export class GraphWithControls extends React.Component {
       collapsibleToolbar,
       collapsibleToolbarTitle,
       disabled,
+      disabledLabels,
+      disabledTitle,
       domain,
+      draggableTools,
       labels,
+      onChangeLabels,
       onChangeMarks,
+      onChangeTitle,
+      onChangeTools,
       onUndo,
       onRedo,
       onReset,
       range,
       size,
+      showLabels,
+      showTitle,
       title
     } = this.props;
     let { backgroundMarks, marks, toolbarTools } = this.props;
@@ -136,10 +154,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} />}
@@ -165,13 +185,19 @@ export class GraphWithControls extends React.Component {
           backgroundMarks={backgroundMarks}
           coordinatesOnHover={coordinatesOnHover}
           currentTool={currentTool}
+          disabledLabels={disabledLabels}
+          disabledTitle={disabledTitle}
           domain={domain}
           labels={labels}
           labelModeEnabled={labelModeEnabled}
           marks={marks}
           onChangeMarks={!disabled ? onChangeMarks : undefined}
+          onChangeLabels={onChangeLabels}
+          onChangeTitle={onChangeTitle}
           range={range}
           size={size}
+          showLabels={showLabels}
+          showTitle={showTitle}
           title={title}
           tools={tools}
         />

package/src/graph.jsx

@@ -20,17 +20,23 @@ export const graphPropTypes = {
   className: PropTypes.string,
   collapsibleToolbar: PropTypes.bool,
   collapsibleToolbarTitle: PropTypes.string,
+  disabledLabels: PropTypes.bool,
+  disabledTitle: PropTypes.bool,
   domain: types.DomainType,
   labels: PropTypes.shape(LabelType),
   labelModeEnabled: PropTypes.bool,
   coordinatesOnHover: PropTypes.bool,
   marks: PropTypes.array,
+  onChangeLabels: PropTypes.func,
   onChangeMarks: PropTypes.func,
+  onChangeTitle: PropTypes.func,
   range: types.DomainType,
   size: PropTypes.shape({
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired
   }),
+  showLabels: PropTypes.bool,
+  showTitle: PropTypes.bool,
   title: PropTypes.string,
   tools: PropTypes.array
 };
@@ -64,7 +70,9 @@ export class Graph extends React.Component {
   };
 
   static defaultProps = {
-    onChangeMarks: () => {}
+    onChangeMarks: () => {},
+    disabledLabels: false,
+    disabledTitle: false
   };
 
   state = {};
@@ -151,12 +159,18 @@ export class Graph extends React.Component {
       currentTool,
       coordinatesOnHover,
       size,
+      disabledLabels,
+      disabledTitle,
       domain,
       backgroundMarks,
       range,
       title,
       labels,
-      labelModeEnabled
+      labelModeEnabled,
+      showLabels,
+      showTitle,
+      onChangeLabels,
+      onChangeTitle
     } = this.props;
     let { marks } = this.props;
 
@@ -167,8 +181,14 @@ export class Graph extends React.Component {
     marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });
 
     return (
-      <Root rootRef={r => (this.rootNode = r)} title={title} {...common}>
-        <Labels value={labels} {...common} />
+      <Root
+        rootRef={r => (this.rootNode = r)}
+        disabledTitle={disabledTitle}
+        showTitle={showTitle}
+        title={title}
+        onChangeTitle={onChangeTitle}
+        {...common}
+      >
         <g transform={`translate(${domain.padding}, ${range.padding})`}>
           <Grid {...common} />
           <Axes {...axesSettings} {...common} />
@@ -222,6 +242,14 @@ export class Graph extends React.Component {
             />
           </g>
         </g>
+        {showLabels && (
+          <Labels
+            disabledLabels={disabledLabels}
+            value={labels}
+            onChange={onChangeLabels}
+            {...common}
+          />
+        )}
       </Root>
     );
   }

package/src/labels.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { types } from '@pie-lib/plot';
 import { color, Readable } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html';
+import cn from 'classnames';
 
 const rotations = {
   left: -90,
@@ -31,13 +33,13 @@ export const getTransform = (side, width, height) => {
 const getY = (side, height) => {
   switch (side) {
     case 'left':
-      return -height;
+      return -height + 6;
     case 'top':
-      return -height + 10;
+      return -height + 6;
     case 'right':
-      return -height + 10;
+      return -height;
     default:
-      return 0;
+      return -height - 15;
   }
 };
 
@@ -46,11 +48,12 @@ class RawLabel extends React.Component {
     text: PropTypes.string,
     side: PropTypes.string,
     classes: PropTypes.object,
+    disabledLabel: PropTypes.bool,
     graphProps: types.GraphPropsType.isRequired
   };
 
   render() {
-    const { text, side, graphProps, classes } = this.props;
+    const { disabledLabel, text, side, graphProps, classes, onChange } = this.props;
     const { size, domain, range } = graphProps;
     const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
     const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
@@ -60,17 +63,41 @@ class RawLabel extends React.Component {
     const height = 36;
     const y = getY(side, height);
 
+    const activePlugins = [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough'
+      // 'languageCharacters'
+    ];
+
     return (
       <foreignObject
         x={-(width / 2)}
         y={y}
         width={width}
-        height={height}
+        height={height * 2}
         transform={transform}
         textAnchor="middle"
       >
         <Readable false>
-          <div dangerouslySetInnerHTML={{ __html: text }} className={classes.axisLabel} />
+          <EditableHtml
+            className={cn(
+              {
+                [classes.bottomLabel]: side === 'bottom',
+                [classes.disabledAxisLabel]: disabledLabel
+              },
+              classes.axisLabel
+            )}
+            markup={text || ''}
+            onChange={onChange}
+            placeholder={!disabledLabel && `Click here to add a ${side} label`}
+            toolbarOpts={{
+              position: side === 'bottom' ? 'top' : 'bottom',
+              noBorder: true
+            }}
+            activePlugins={activePlugins}
+          />
         </Readable>
       </foreignObject>
     );
@@ -82,8 +109,14 @@ const Label = withStyles(theme => ({
     fill: color.secondary()
   },
   axisLabel: {
-    fontSize: theme.typography.fontSize,
+    fontSize: theme.typography.fontSize - 2,
     textAlign: 'center'
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none'
+  },
+  bottomLabel: {
+    marginTop: '44px'
   }
 }))(RawLabel);
 
@@ -98,29 +131,60 @@ export class Labels extends React.Component {
   static propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
+    disabledLabels: PropTypes.bool,
     value: PropTypes.shape(LabelType),
     graphProps: PropTypes.object
   };
 
   static defaultProps = {};
 
+  onChangeLabel = (newValue, side) => {
+    const { value, onChange } = this.props;
+    const labels = {
+      ...value,
+      [side]: newValue
+    };
+
+    onChange(labels);
+  };
+
   render() {
-    const { value, graphProps } = this.props;
+    const { disabledLabels, value = {}, graphProps } = this.props;
 
     return (
       <React.Fragment>
-        {value && value.left && (
-          <Label key="left" side="left" text={value.left} graphProps={graphProps} />
-        )}
-        {value && value.top && (
-          <Label key="top" side="top" text={value.top} graphProps={graphProps} />
-        )}
-        {value && value.bottom && (
-          <Label key="bottom" side="bottom" text={value.bottom} graphProps={graphProps} />
-        )}
-        {value && value.right && (
-          <Label key="right" side="right" text={value.right} graphProps={graphProps} />
-        )}
+        <Label
+          key="left"
+          side="left"
+          text={value.left}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'left')}
+        />
+        <Label
+          key="top"
+          side="top"
+          text={value.top}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'top')}
+        />
+        <Label
+          key="bottom"
+          side="bottom"
+          text={value.bottom}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'bottom')}
+        />
+        <Label
+          key="right"
+          side="right"
+          text={value.right}
+          disabledLabel={disabledLabels}
+          graphProps={graphProps}
+          onChange={value => this.onChangeLabel(value, 'right')}
+        />
       </React.Fragment>
     );
   }

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