@pie-lib/graphing 2.4.3-next.414 → 2.4.3-next.462

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.8.0...@pie-lib/graphing@2.8.1) (2022-07-18)
+
+**Note:** Version bump only for package @pie-lib/graphing
+
+
+
+
+
+# [2.8.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.7.0...@pie-lib/graphing@2.8.0) (2022-07-18)
+
+
+### Features
+
+* **graphing:** added drag and drop sorting for toolbar tools PD-1607 ([2463c86](https://github.com/pie-framework/pie-lib/commit/2463c86bf6ff42222e98e4344fc6c9fd040d9774))
+
+
+
+
+
+# [2.7.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.6.3...@pie-lib/graphing@2.7.0) (2022-06-27)
+
+
+### Features
+
+* **graphing:** added collapsible panel for graph toolbar PD-1693 ([4268bb0](https://github.com/pie-framework/pie-lib/commit/4268bb06093d1fabf82d9f5c2d8fd81f9788a4fe))
+* **graphing:** Added default value for current drawing tool PD-1689 ([bc9b1b0](https://github.com/pie-framework/pie-lib/commit/bc9b1b00d64d50d138f3ab0991957d9fecaed17b))
+* **graphing:** Added the ability to control the fields displayed into Grid Setup PD-1688 ([1f0f3eb](https://github.com/pie-framework/pie-lib/commit/1f0f3eb58c5dcd923e2452a0071bf1de40535bb2))
+* added support for graph configuration constraints PD-1683 PD-1684 PD-1686 ([8da7426](https://github.com/pie-framework/pie-lib/commit/8da74260b28332b976fa1c50796e74679fd46a13))
+* created setup panel and added basic functionalities PD-1679 ([183eda1](https://github.com/pie-framework/pie-lib/commit/183eda10b2f4128cd831c5b27f14ebccb6b3e7b2))
+
+
+
+
+
+## [2.6.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.6.2...@pie-lib/graphing@2.6.3) (2022-06-13)
+
+**Note:** Version bump only for package @pie-lib/graphing
+
+
+
+
+
 ## [2.6.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.6.1...@pie-lib/graphing@2.6.2) (2022-05-30)
 
 

package/lib/graph-with-controls.js

@@ -137,6 +137,12 @@ var Collapsible = function Collapsible(_ref) {
   }, children));
 };
 
+Collapsible.propTypes = {
+  classes: _propTypes["default"].object,
+  children: _propTypes["default"].array,
+  title: _propTypes["default"].string
+};
+
 var GraphWithControls = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(GraphWithControls, _React$Component);
 
@@ -197,8 +203,10 @@ var GraphWithControls = /*#__PURE__*/function (_React$Component) {
           collapsibleToolbarTitle = _this$props.collapsibleToolbarTitle,
           disabled = _this$props.disabled,
           domain = _this$props.domain,
+          draggableTools = _this$props.draggableTools,
           labels = _this$props.labels,
           onChangeMarks = _this$props.onChangeMarks,
+          onChangeTools = _this$props.onChangeTools,
           onUndo = _this$props.onUndo,
           onRedo = _this$props.onRedo,
           onReset = _this$props.onReset,
@@ -226,12 +234,14 @@ var GraphWithControls = /*#__PURE__*/function (_React$Component) {
       var graphActions = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_toolMenu["default"], {
         currentToolType: currentTool && currentTool.type,
         disabled: !!disabled,
+        draggableTools: draggableTools,
         labelModeEnabled: labelModeEnabled,
         onChange: function onChange(tool) {
           return _this2.changeCurrentTool(tool, tools);
         },
         onToggleLabelMode: this.toggleLabelMode,
-        toolbarTools: toolbarTools
+        toolbarTools: toolbarTools,
+        onChangeTools: onChangeTools
       }), !disabled && /*#__PURE__*/_react["default"].createElement(_undoRedo["default"], {
         onUndo: onUndo,
         onRedo: onRedo,

package/lib/graph-with-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-with-controls.js","names":["setToolbarAvailability","toolbarTools","toolsArr","map","tA","toolbar","find","t","type","toolIsAvailable","tools","currentTool","tool","getAvailableTool","filterByValidToolTypes","backgroundMarks","filter","bM","allTools","filterByVisibleToolTypes","marks","getDefaultCurrentTool","toolType","Collapsible","classes","children","title","expansionPanel","root","summaryRoot","content","summaryContent","details","GraphWithControls","props","setState","state","labelModeEnabled","defaultTool","prevProps","axesSettings","className","coordinatesOnHover","collapsibleToolbar","collapsibleToolbarTitle","disabled","domain","labels","onChangeMarks","onUndo","onRedo","onReset","range","size","uniq","tT","isString","graphActions","changeCurrentTool","toggleLabelMode","classNames","graphWithControls","controls","r","labelNode","undefined","React","Component","graphPropTypes","PropTypes","func","arrayOf","string","styles","theme","width","display","justifyContent","padding","spacing","unit","color","text","backgroundColor","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","fontSize","typography","minHeight","margin","marginTop","withStyles"],"sources":["../src/graph-with-controls.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport uniq from 'lodash/uniq';\nimport isString from 'lodash/isString';\nimport { color } from '@pie-lib/render-ui';\n\nimport ToolMenu from './tool-menu';\nimport Graph, { graphPropTypes } from './graph';\nimport UndoRedo from './undo-redo';\nimport { allTools, toolsArr } from './tools';\nimport {\n  ExpansionPanel,\n  ExpansionPanelDetails,\n  ExpansionPanelSummary,\n  Typography\n} from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nexport const setToolbarAvailability = toolbarTools =>\n  toolsArr.map(tA => ({ ...tA, toolbar: !!toolbarTools.find(t => t === tA.type) })) || [];\n\nexport const toolIsAvailable = (tools, currentTool) =>\n  currentTool && tools && (tools.find(tool => tool.type === currentTool.type) || {}).toolbar;\n\nexport const getAvailableTool = tools => tools.find(tool => tool.toolbar);\n\nexport const filterByValidToolTypes = backgroundMarks =>\n  backgroundMarks.filter(bM => !!allTools.find(tool => tool === bM.type));\n\nexport const filterByVisibleToolTypes = (toolbarTools, marks) =>\n  marks.filter(bM => !!toolbarTools.find(tool => tool === bM.type));\n\nconst getDefaultCurrentTool = toolType => toolsArr.find(tool => tool.type === toolType) || null;\n\nconst Collapsible = ({ classes, children, title }) => (\n  <ExpansionPanel\n    elevation={0}\n    className={classes.expansionPanel}\n    disabledGutters={true}\n    square={true}\n  >\n    <ExpansionPanelSummary\n      classes={{\n        root: classes.summaryRoot,\n        content: classes.summaryContent\n      }}\n      expandIcon={<ExpandMoreIcon />}\n    >\n      <Typography variant=\"subheading\">{title}</Typography>\n    </ExpansionPanelSummary>\n    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>\n  </ExpansionPanel>\n);\n\nexport class GraphWithControls extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    onUndo: PropTypes.func,\n    onRedo: PropTypes.func,\n    onReset: PropTypes.func,\n    toolbarTools: PropTypes.arrayOf(PropTypes.string) // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'\n  };\n\n  static defaultProps = {\n    collapsibleToolbar: false,\n    collapsibleToolbarTitle: '',\n    toolbarTools: []\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      currentTool: getDefaultCurrentTool(props.defaultTool),\n      labelModeEnabled: false\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    const { defaultTool } = this.props;\n\n    if (prevProps.defaultTool !== defaultTool) {\n      const currentTool = getDefaultCurrentTool(defaultTool);\n\n      this.setState({ currentTool });\n    }\n  }\n\n  changeCurrentTool = (tool, tools) =>\n    this.setState({ currentTool: tools.find(t => t.type === tool) });\n\n  toggleLabelMode = () => this.setState(state => ({ labelModeEnabled: !state.labelModeEnabled }));\n\n  render() {\n    let { currentTool, labelModeEnabled } = this.state;\n    const {\n      axesSettings,\n      classes,\n      className,\n      coordinatesOnHover,\n      collapsibleToolbar,\n      collapsibleToolbarTitle,\n      disabled,\n      domain,\n      labels,\n      onChangeMarks,\n      onUndo,\n      onRedo,\n      onReset,\n      range,\n      size,\n      title\n    } = this.props;\n    let { backgroundMarks, marks, toolbarTools } = this.props;\n\n    // make sure only valid tool types are kept (string) and without duplicates\n    toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];\n\n    // keep only the backgroundMarks that have valid types\n    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);\n\n    // keep only the marks that have types which appear in toolbar\n    marks = filterByVisibleToolTypes(toolbarTools, marks || []);\n\n    const tools = setToolbarAvailability(toolbarTools);\n\n    // set current tool if there's no current tool or if the existing one is no longer available\n    if (!currentTool || !toolIsAvailable(tools, currentTool)) {\n      currentTool = getAvailableTool(tools);\n    }\n\n    const graphActions = (\n      <React.Fragment>\n        <ToolMenu\n          currentToolType={currentTool && currentTool.type}\n          disabled={!!disabled}\n          labelModeEnabled={labelModeEnabled}\n          onChange={tool => this.changeCurrentTool(tool, tools)}\n          onToggleLabelMode={this.toggleLabelMode}\n          toolbarTools={toolbarTools}\n        />\n\n        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} />}\n      </React.Fragment>\n    );\n\n    return (\n      <div className={classNames(classes.graphWithControls, className)}>\n        <div className={classes.controls}>\n          {collapsibleToolbar ? (\n            <Collapsible classes={classes} title={collapsibleToolbarTitle}>\n              {graphActions}\n            </Collapsible>\n          ) : (\n            graphActions\n          )}\n        </div>\n\n        <div ref={r => (this.labelNode = r)} />\n\n        <Graph\n          axesSettings={axesSettings}\n          backgroundMarks={backgroundMarks}\n          coordinatesOnHover={coordinatesOnHover}\n          currentTool={currentTool}\n          domain={domain}\n          labels={labels}\n          labelModeEnabled={labelModeEnabled}\n          marks={marks}\n          onChangeMarks={!disabled ? onChangeMarks : undefined}\n          range={range}\n          size={size}\n          title={title}\n          tools={tools}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphWithControls: {},\n  controls: {\n    width: 'inherit',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`,\n    '& button': {\n      fontSize: theme.typography.fontSize\n    }\n  },\n  expansionPanel: {\n    backgroundColor: color.primaryLight()\n  },\n  summaryRoot: {\n    padding: `0 ${theme.spacing.unit}px`,\n    minHeight: '32px !important'\n  },\n  summaryContent: {\n    margin: '4px 0 !important'\n  },\n  details: {\n    padding: 0,\n    marginTop: theme.spacing.unit\n  }\n});\n\nexport default withStyles(styles)(GraphWithControls);\n"],"mappings":"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"}
+{"version":3,"file":"graph-with-controls.js","names":["setToolbarAvailability","toolbarTools","toolsArr","map","tA","toolbar","find","t","type","toolIsAvailable","tools","currentTool","tool","getAvailableTool","filterByValidToolTypes","backgroundMarks","filter","bM","allTools","filterByVisibleToolTypes","marks","getDefaultCurrentTool","toolType","Collapsible","classes","children","title","expansionPanel","root","summaryRoot","content","summaryContent","details","propTypes","PropTypes","object","array","string","GraphWithControls","props","setState","state","labelModeEnabled","defaultTool","prevProps","axesSettings","className","coordinatesOnHover","collapsibleToolbar","collapsibleToolbarTitle","disabled","domain","draggableTools","labels","onChangeMarks","onChangeTools","onUndo","onRedo","onReset","range","size","uniq","tT","isString","graphActions","changeCurrentTool","toggleLabelMode","classNames","graphWithControls","controls","r","labelNode","undefined","React","Component","graphPropTypes","func","arrayOf","styles","theme","width","display","justifyContent","padding","spacing","unit","color","text","backgroundColor","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","fontSize","typography","minHeight","margin","marginTop","withStyles"],"sources":["../src/graph-with-controls.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport uniq from 'lodash/uniq';\nimport isString from 'lodash/isString';\nimport { color } from '@pie-lib/render-ui';\n\nimport ToolMenu from './tool-menu';\nimport Graph, { graphPropTypes } from './graph';\nimport UndoRedo from './undo-redo';\nimport { allTools, toolsArr } from './tools';\nimport {\n  ExpansionPanel,\n  ExpansionPanelDetails,\n  ExpansionPanelSummary,\n  Typography\n} from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nexport const setToolbarAvailability = toolbarTools =>\n  toolsArr.map(tA => ({ ...tA, toolbar: !!toolbarTools.find(t => t === tA.type) })) || [];\n\nexport const toolIsAvailable = (tools, currentTool) =>\n  currentTool && tools && (tools.find(tool => tool.type === currentTool.type) || {}).toolbar;\n\nexport const getAvailableTool = tools => tools.find(tool => tool.toolbar);\n\nexport const filterByValidToolTypes = backgroundMarks =>\n  backgroundMarks.filter(bM => !!allTools.find(tool => tool === bM.type));\n\nexport const filterByVisibleToolTypes = (toolbarTools, marks) =>\n  marks.filter(bM => !!toolbarTools.find(tool => tool === bM.type));\n\nconst getDefaultCurrentTool = toolType => toolsArr.find(tool => tool.type === toolType) || null;\n\nconst Collapsible = ({ classes, children, title }) => (\n  <ExpansionPanel\n    elevation={0}\n    className={classes.expansionPanel}\n    disabledGutters={true}\n    square={true}\n  >\n    <ExpansionPanelSummary\n      classes={{\n        root: classes.summaryRoot,\n        content: classes.summaryContent\n      }}\n      expandIcon={<ExpandMoreIcon />}\n    >\n      <Typography variant=\"subheading\">{title}</Typography>\n    </ExpansionPanelSummary>\n    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>\n  </ExpansionPanel>\n);\n\nCollapsible.propTypes = {\n  classes: PropTypes.object,\n  children: PropTypes.array,\n  title: PropTypes.string\n};\n\nexport class GraphWithControls extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    onUndo: PropTypes.func,\n    onRedo: PropTypes.func,\n    onReset: PropTypes.func,\n    toolbarTools: PropTypes.arrayOf(PropTypes.string) // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'\n  };\n\n  static defaultProps = {\n    collapsibleToolbar: false,\n    collapsibleToolbarTitle: '',\n    toolbarTools: []\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      currentTool: getDefaultCurrentTool(props.defaultTool),\n      labelModeEnabled: false\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    const { defaultTool } = this.props;\n\n    if (prevProps.defaultTool !== defaultTool) {\n      const currentTool = getDefaultCurrentTool(defaultTool);\n\n      this.setState({ currentTool });\n    }\n  }\n\n  changeCurrentTool = (tool, tools) =>\n    this.setState({ currentTool: tools.find(t => t.type === tool) });\n\n  toggleLabelMode = () => this.setState(state => ({ labelModeEnabled: !state.labelModeEnabled }));\n\n  render() {\n    let { currentTool, labelModeEnabled } = this.state;\n    const {\n      axesSettings,\n      classes,\n      className,\n      coordinatesOnHover,\n      collapsibleToolbar,\n      collapsibleToolbarTitle,\n      disabled,\n      domain,\n      draggableTools,\n      labels,\n      onChangeMarks,\n      onChangeTools,\n      onUndo,\n      onRedo,\n      onReset,\n      range,\n      size,\n      title\n    } = this.props;\n    let { backgroundMarks, marks, toolbarTools } = this.props;\n\n    // make sure only valid tool types are kept (string) and without duplicates\n    toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || [];\n\n    // keep only the backgroundMarks that have valid types\n    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);\n\n    // keep only the marks that have types which appear in toolbar\n    marks = filterByVisibleToolTypes(toolbarTools, marks || []);\n\n    const tools = setToolbarAvailability(toolbarTools);\n\n    // set current tool if there's no current tool or if the existing one is no longer available\n    if (!currentTool || !toolIsAvailable(tools, currentTool)) {\n      currentTool = getAvailableTool(tools);\n    }\n\n    const graphActions = (\n      <React.Fragment>\n        <ToolMenu\n          currentToolType={currentTool && currentTool.type}\n          disabled={!!disabled}\n          draggableTools={draggableTools}\n          labelModeEnabled={labelModeEnabled}\n          onChange={tool => this.changeCurrentTool(tool, tools)}\n          onToggleLabelMode={this.toggleLabelMode}\n          toolbarTools={toolbarTools}\n          onChangeTools={onChangeTools}\n        />\n\n        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} />}\n      </React.Fragment>\n    );\n\n    return (\n      <div className={classNames(classes.graphWithControls, className)}>\n        <div className={classes.controls}>\n          {collapsibleToolbar ? (\n            <Collapsible classes={classes} title={collapsibleToolbarTitle}>\n              {graphActions}\n            </Collapsible>\n          ) : (\n            graphActions\n          )}\n        </div>\n\n        <div ref={r => (this.labelNode = r)} />\n\n        <Graph\n          axesSettings={axesSettings}\n          backgroundMarks={backgroundMarks}\n          coordinatesOnHover={coordinatesOnHover}\n          currentTool={currentTool}\n          domain={domain}\n          labels={labels}\n          labelModeEnabled={labelModeEnabled}\n          marks={marks}\n          onChangeMarks={!disabled ? onChangeMarks : undefined}\n          range={range}\n          size={size}\n          title={title}\n          tools={tools}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphWithControls: {},\n  controls: {\n    width: 'inherit',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`,\n    '& button': {\n      fontSize: theme.typography.fontSize\n    }\n  },\n  expansionPanel: {\n    backgroundColor: color.primaryLight()\n  },\n  summaryRoot: {\n    padding: `0 ${theme.spacing.unit}px`,\n    minHeight: '32px !important'\n  },\n  summaryContent: {\n    margin: '4px 0 !important'\n  },\n  details: {\n    padding: 0,\n    marginTop: theme.spacing.unit\n  }\n});\n\nexport default withStyles(styles)(GraphWithControls);\n"],"mappings":"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"}

package/lib/toggle-bar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ToggleBar = exports.MiniButton = void 0;
+exports["default"] = exports.ToggleBar = exports.MiniButton = exports.Item = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -35,6 +35,8 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _index = require("./tools/index");
 
+var _drag = require("@pie-lib/drag");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -89,6 +91,7 @@ var MiniButton = (0, _styles.withStyles)(buttonStyles)(function (props) {
 exports.MiniButton = MiniButton;
 MiniButton.propTypes = {
   disabled: _propTypes["default"].bool,
+  classes: _propTypes["default"].object,
   className: _propTypes["default"].string,
   disabledClassName: _propTypes["default"].string,
   selected: _propTypes["default"].bool,
@@ -114,6 +117,15 @@ var ToggleBar = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "select", function (e) {
       return _this.props.onChange(e.target.textContent);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveTool", function (dragIndex, hoverIndex) {
+      var _this$props = _this.props,
+          options = _this$props.options,
+          onChangeToolsOrder = _this$props.onChangeToolsOrder;
+      var dragged = options[dragIndex];
+      options.splice(dragIndex, 1);
+      options.splice(hoverIndex, 0, dragged);
+      onChangeToolsOrder(options);
+    });
     return _this;
   }
 
@@ -122,26 +134,36 @@ var ToggleBar = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          className = _this$props.className,
-          disabled = _this$props.disabled,
-          options = _this$props.options,
-          selectedToolType = _this$props.selectedToolType;
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          className = _this$props2.className,
+          disabled = _this$props2.disabled,
+          options = _this$props2.options,
+          selectedToolType = _this$props2.selectedToolType,
+          draggableTools = _this$props2.draggableTools;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(className)
-      }, (options || []).map(function (option) {
+        className: (0, _classnames["default"])(className, classes.toolsContainer)
+      }, (options || []).map(function (option, index) {
         if ((_index.allTools || []).includes(option)) {
           var isSelected = option === selectedToolType;
-          return /*#__PURE__*/_react["default"].createElement(MiniButton, {
+
+          var toolRef = /*#__PURE__*/_react["default"].createRef();
+
+          return /*#__PURE__*/_react["default"].createElement(DragTool, {
             key: option,
+            index: index,
+            draggable: draggableTools,
+            moveTool: _this2.moveTool,
+            classes: classes,
+            toolRef: toolRef
+          }, /*#__PURE__*/_react["default"].createElement(MiniButton, {
             className: (0, _classnames["default"])(classes.button, isSelected && classes.selected),
             disabled: disabled,
             disableRipple: true,
             onClick: _this2.select,
             value: option,
             selected: isSelected
-          });
+          }));
         }
       }));
     }
@@ -156,22 +178,143 @@ exports.ToggleBar = ToggleBar;
   options: _propTypes["default"].arrayOf(_propTypes["default"].string),
   selectedToolType: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func
+  draggableTools: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  onChangeToolsOrder: _propTypes["default"].func
 });
 (0, _defineProperty2["default"])(ToggleBar, "defaultProps", {});
 
 var styles = function styles(theme) {
   return {
+    toolsContainer: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    },
     button: {
       marginRight: theme.spacing.unit / 2,
       marginBottom: theme.spacing.unit / 2,
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background()
+    },
+    under: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: -1,
+      pointerEvents: 'none'
+    },
+    wrapper: {
+      position: 'relative'
+    },
+    hidden: {
+      opacity: 0
     }
   };
 };
 
-var _default = (0, _styles.withStyles)(styles)(ToggleBar);
+var _default = (0, _drag.withDragContext)((0, _styles.withStyles)(styles)(ToggleBar));
 
 exports["default"] = _default;
+var DRAG_TYPE = 'tool';
+
+var Item = /*#__PURE__*/function (_React$Component2) {
+  (0, _inherits2["default"])(Item, _React$Component2);
+
+  var _super2 = _createSuper(Item);
+
+  function Item() {
+    (0, _classCallCheck2["default"])(this, Item);
+    return _super2.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Item, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          classes = _this$props3.classes,
+          children = _this$props3.children,
+          connectDragSource = _this$props3.connectDragSource,
+          connectDropTarget = _this$props3.connectDropTarget,
+          connectDragPreview = _this$props3.connectDragPreview,
+          isDragging = _this$props3.isDragging,
+          toolRef = _this$props3.toolRef;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.wrapper,
+        ref: toolRef
+      }, connectDragSource(connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
+        className: isDragging && classes.hidden
+      }, children))), connectDragPreview( /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.under
+      }, children)));
+    }
+  }]);
+  return Item;
+}(_react["default"].Component);
+
+exports.Item = Item;
+(0, _defineProperty2["default"])(Item, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  connectDragSource: _propTypes["default"].func.isRequired,
+  connectDragPreview: _propTypes["default"].func.isRequired,
+  connectDropTarget: _propTypes["default"].func.isRequired,
+  isDragging: _propTypes["default"].bool
+});
+(0, _defineProperty2["default"])(Item, "defaultProps", {});
+var itemSource = {
+  canDrag: function canDrag(props) {
+    return props.draggable;
+  },
+  beginDrag: function beginDrag(props) {
+    return {
+      index: props.index
+    };
+  }
+};
+var itemTarget = {
+  hover: function hover(props, monitor) {
+    var _toolRef$current;
+
+    var dragIndex = monitor.getItem().index;
+    var toolRef = props.toolRef,
+        hoverIndex = props.index;
+
+    if (dragIndex === hoverIndex || !toolRef.current) {
+      return;
+    }
+
+    var hoverBoundingRect = (_toolRef$current = toolRef.current) === null || _toolRef$current === void 0 ? void 0 : _toolRef$current.getBoundingClientRect();
+    var hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+    var clientOffset = monitor.getClientOffset();
+    var 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;
+  }
+};
+
+var collectTarget = function collectTarget(connect) {
+  return {
+    connectDropTarget: connect.dropTarget()
+  };
+};
+
+var collectSource = function collectSource(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+};
+
+var DragTool = (0, _drag.DropTarget)(DRAG_TYPE, itemTarget, collectTarget)((0, _drag.DragSource)(DRAG_TYPE, itemSource, collectSource)(Item));
 //# sourceMappingURL=toggle-bar.js.map

package/lib/toggle-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-bar.js","names":["buttonStyles","root","color","text","backgroundColor","primary","selected","background","border","secondary","notSelected","disabled","MiniButton","withStyles","props","classes","className","value","onClick","cn","propTypes","PropTypes","bool","string","disabledClassName","func","ToggleBar","e","onChange","target","textContent","options","selectedToolType","map","option","allTools","includes","isSelected","button","select","React","Component","object","isRequired","arrayOf","styles","theme","marginRight","spacing","unit","marginBottom"],"sources":["../src/toggle-bar.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport cn from 'classnames';\nimport Button from '@material-ui/core/Button';\nimport { color } from '@pie-lib/render-ui';\nimport { allTools } from './tools/index';\n\nconst buttonStyles = () => ({\n  root: {\n    color: color.text(),\n    '&:hover': {\n      backgroundColor: color.primary()\n    }\n  },\n  selected: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.secondary()}`\n  },\n  notSelected: {\n    '& span': {\n      color: color.primary()\n    },\n    backgroundColor: color.background()\n  },\n  disabled: {\n    '& span': {\n      color: color.primary()\n    },\n    backgroundColor: color.disabled()\n  }\n});\n\nexport const MiniButton = withStyles(buttonStyles)(props => {\n  const { disabled, classes, className, selected, value, onClick } = props;\n\n  return (\n    <Button\n      size=\"small\"\n      disabled={disabled}\n      className={cn(classes.root, selected && classes.selected, className)}\n      classes={{ disabled: cn(disabled && classes.disabled) }}\n      value={value}\n      key={value}\n      variant=\"outlined\"\n      onClick={onClick}\n    >\n      {value}\n    </Button>\n  );\n});\n\nMiniButton.propTypes = {\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  disabledClassName: PropTypes.string,\n  selected: PropTypes.bool,\n  value: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport class ToggleBar extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.string),\n    selectedToolType: PropTypes.string,\n    disabled: PropTypes.bool,\n    onChange: PropTypes.func\n  };\n\n  static defaultProps = {};\n\n  select = e => this.props.onChange(e.target.textContent);\n\n  render() {\n    const { classes, className, disabled, options, selectedToolType } = this.props;\n    return (\n      <div className={cn(className)}>\n        {(options || []).map(option => {\n          if ((allTools || []).includes(option)) {\n            const isSelected = option === selectedToolType;\n\n            return (\n              <MiniButton\n                key={option}\n                className={cn(classes.button, isSelected && classes.selected)}\n                disabled={disabled}\n                disableRipple={true}\n                onClick={this.select}\n                value={option}\n                selected={isSelected}\n              />\n            );\n          }\n        })}\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  button: {\n    marginRight: theme.spacing.unit / 2,\n    marginBottom: theme.spacing.unit / 2,\n    color: color.text(),\n    backgroundColor: color.background()\n  }\n});\n\nexport default withStyles(styles)(ToggleBar);\n"],"mappings":"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"}
+{"version":3,"file":"toggle-bar.js","names":["buttonStyles","root","color","text","backgroundColor","primary","selected","background","border","secondary","notSelected","disabled","MiniButton","withStyles","props","classes","className","value","onClick","cn","propTypes","PropTypes","bool","object","string","disabledClassName","func","ToggleBar","e","onChange","target","textContent","dragIndex","hoverIndex","options","onChangeToolsOrder","dragged","splice","selectedToolType","draggableTools","toolsContainer","map","option","index","allTools","includes","isSelected","toolRef","React","createRef","moveTool","button","select","Component","isRequired","arrayOf","styles","theme","display","flexWrap","marginRight","spacing","unit","marginBottom","under","position","top","left","zIndex","pointerEvents","wrapper","hidden","opacity","withDragContext","DRAG_TYPE","Item","children","connectDragSource","connectDropTarget","connectDragPreview","isDragging","oneOfType","node","itemSource","canDrag","draggable","beginDrag","itemTarget","hover","monitor","getItem","current","hoverBoundingRect","getBoundingClientRect","hoverMiddleX","right","clientOffset","getClientOffset","hoverClientX","x","collectTarget","connect","dropTarget","collectSource","dragSource","dragPreview","DragTool","DropTarget","DragSource"],"sources":["../src/toggle-bar.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport cn from 'classnames';\nimport Button from '@material-ui/core/Button';\nimport { color } from '@pie-lib/render-ui';\nimport { allTools } from './tools/index';\nimport { withDragContext, DragSource, DropTarget } from '@pie-lib/drag';\n\nconst buttonStyles = () => ({\n  root: {\n    color: color.text(),\n    '&:hover': {\n      backgroundColor: color.primary()\n    }\n  },\n  selected: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.secondary()}`\n  },\n  notSelected: {\n    '& span': {\n      color: color.primary()\n    },\n    backgroundColor: color.background()\n  },\n  disabled: {\n    '& span': {\n      color: color.primary()\n    },\n    backgroundColor: color.disabled()\n  }\n});\n\nexport const MiniButton = withStyles(buttonStyles)(props => {\n  const { disabled, classes, className, selected, value, onClick } = props;\n\n  return (\n    <Button\n      size=\"small\"\n      disabled={disabled}\n      className={cn(classes.root, selected && classes.selected, className)}\n      classes={{ disabled: cn(disabled && classes.disabled) }}\n      value={value}\n      key={value}\n      variant=\"outlined\"\n      onClick={onClick}\n    >\n      {value}\n    </Button>\n  );\n});\n\nMiniButton.propTypes = {\n  disabled: PropTypes.bool,\n  classes: PropTypes.object,\n  className: PropTypes.string,\n  disabledClassName: PropTypes.string,\n  selected: PropTypes.bool,\n  value: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport class ToggleBar extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.string),\n    selectedToolType: PropTypes.string,\n    disabled: PropTypes.bool,\n    draggableTools: PropTypes.bool,\n    onChange: PropTypes.func,\n    onChangeToolsOrder: PropTypes.func\n  };\n\n  static defaultProps = {};\n\n  select = e => this.props.onChange(e.target.textContent);\n\n  moveTool = (dragIndex, hoverIndex) => {\n    const { options, onChangeToolsOrder } = this.props;\n    const dragged = options[dragIndex];\n\n    options.splice(dragIndex, 1);\n    options.splice(hoverIndex, 0, dragged);\n\n    onChangeToolsOrder(options);\n  };\n\n  render() {\n    const { classes, className, disabled, options, selectedToolType, draggableTools } = this.props;\n\n    return (\n      <div className={cn(className, classes.toolsContainer)}>\n        {(options || []).map((option, index) => {\n          if ((allTools || []).includes(option)) {\n            const isSelected = option === selectedToolType;\n            const toolRef = React.createRef();\n\n            return (\n              <DragTool\n                key={option}\n                index={index}\n                draggable={draggableTools}\n                moveTool={this.moveTool}\n                classes={classes}\n                toolRef={toolRef}\n              >\n                <MiniButton\n                  className={cn(classes.button, isSelected && classes.selected)}\n                  disabled={disabled}\n                  disableRipple={true}\n                  onClick={this.select}\n                  value={option}\n                  selected={isSelected}\n                />\n              </DragTool>\n            );\n          }\n        })}\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  toolsContainer: {\n    display: 'flex',\n    flexWrap: 'wrap'\n  },\n  button: {\n    marginRight: theme.spacing.unit / 2,\n    marginBottom: theme.spacing.unit / 2,\n    color: color.text(),\n    backgroundColor: color.background()\n  },\n  under: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    zIndex: -1,\n    pointerEvents: 'none'\n  },\n  wrapper: {\n    position: 'relative'\n  },\n  hidden: {\n    opacity: 0\n  }\n});\n\nexport default withDragContext(withStyles(styles)(ToggleBar));\n\nconst DRAG_TYPE = 'tool';\n\nexport class Item extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    connectDragSource: PropTypes.func.isRequired,\n    connectDragPreview: PropTypes.func.isRequired,\n    connectDropTarget: PropTypes.func.isRequired,\n    isDragging: PropTypes.bool\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const {\n      classes,\n      children,\n      connectDragSource,\n      connectDropTarget,\n      connectDragPreview,\n      isDragging,\n      toolRef\n    } = this.props;\n\n    return (\n      <div className={classes.wrapper} ref={toolRef}>\n        {connectDragSource(\n          connectDropTarget(<div className={isDragging && classes.hidden}>{children}</div>)\n        )}\n        {connectDragPreview(<div className={classes.under}>{children}</div>)}\n      </div>\n    );\n  }\n}\n\nconst itemSource = {\n  canDrag(props) {\n    return props.draggable;\n  },\n  beginDrag(props) {\n    return {\n      index: props.index\n    };\n  }\n};\n\nconst itemTarget = {\n  hover(props, monitor) {\n    const dragIndex = monitor.getItem().index;\n    const { toolRef, index: hoverIndex } = props;\n\n    if (dragIndex === hoverIndex || !toolRef.current) {\n      return;\n    }\n\n    const hoverBoundingRect = toolRef.current?.getBoundingClientRect();\n    const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;\n    const clientOffset = monitor.getClientOffset();\n    const hoverClientX = clientOffset.x - hoverBoundingRect.left;\n\n    if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {\n      return;\n    }\n\n    if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {\n      return;\n    }\n\n    props.moveTool(dragIndex, hoverIndex);\n    monitor.getItem().index = hoverIndex;\n  }\n};\n\nconst collectTarget = connect => ({ connectDropTarget: connect.dropTarget() });\n\nconst collectSource = (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  connectDragPreview: connect.dragPreview(),\n  isDragging: monitor.isDragging()\n});\n\nconst DragTool = DropTarget(\n  DRAG_TYPE,\n  itemTarget,\n  collectTarget\n)(DragSource(DRAG_TYPE, itemSource, collectSource)(Item));\n"],"mappings":"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"}

package/lib/tool-menu.js

@@ -13,6 +13,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -43,17 +45,37 @@ var ToolMenu = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(ToolMenu);
 
   function ToolMenu() {
+    var _this;
+
     (0, _classCallCheck2["default"])(this, ToolMenu);
-    return _super.apply(this, arguments);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateToolsOrder", function (tools, showLabel) {
+      var onChangeTools = _this.props.onChangeTools;
+
+      if (showLabel) {
+        tools.push('label');
+      }
+
+      onChangeTools(tools);
+    });
+    return _this;
   }
 
   (0, _createClass2["default"])(ToolMenu, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           className = _this$props.className,
           currentToolType = _this$props.currentToolType,
           disabled = _this$props.disabled,
+          draggableTools = _this$props.draggableTools,
           labelModeEnabled = _this$props.labelModeEnabled,
           onToggleLabelMode = _this$props.onToggleLabelMode,
           onChange = _this$props.onChange;
@@ -68,9 +90,13 @@ var ToolMenu = /*#__PURE__*/function (_React$Component) {
         className: (0, _classnames["default"])(className)
       }, /*#__PURE__*/_react["default"].createElement(_toggleBar["default"], {
         disabled: disabled,
+        draggableTools: draggableTools,
         options: toolbarTools,
         selectedToolType: currentToolType,
-        onChange: onChange
+        onChange: onChange,
+        onChangeToolsOrder: function onChangeToolsOrder(tools) {
+          return _this2.updateToolsOrder(tools, showLabel);
+        }
       }), showLabel && /*#__PURE__*/_react["default"].createElement(_toggleBar.MiniButton, {
         disabled: disabled,
         value: 'Label',
@@ -87,9 +113,11 @@ exports.ToolMenu = ToolMenu;
   className: _propTypes["default"].string,
   currentToolType: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
+  draggableTools: _propTypes["default"].bool,
   labelModeEnabled: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   onToggleLabelMode: _propTypes["default"].func,
+  onChangeTools: _propTypes["default"].func,
   toolbarTools: _propTypes["default"].arrayOf(_propTypes["default"].string)
 });
 (0, _defineProperty2["default"])(ToolMenu, "defaultProps", {

package/lib/tool-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"tool-menu.js","names":["ToolMenu","props","className","currentToolType","disabled","labelModeEnabled","onToggleLabelMode","onChange","toolbarTools","showLabel","some","t","filter","tT","classNames","React","Component","PropTypes","string","bool","func","arrayOf"],"sources":["../src/tool-menu.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport ToggleBar, { MiniButton } from './toggle-bar';\n\nexport class ToolMenu extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    currentToolType: PropTypes.string,\n    disabled: PropTypes.bool,\n    labelModeEnabled: PropTypes.bool,\n    onChange: PropTypes.func,\n    onToggleLabelMode: PropTypes.func,\n    toolbarTools: PropTypes.arrayOf(PropTypes.string)\n  };\n\n  static defaultProps = {\n    toolbarTools: []\n  };\n\n  render() {\n    const {\n      className,\n      currentToolType,\n      disabled,\n      labelModeEnabled,\n      onToggleLabelMode,\n      onChange\n    } = this.props;\n    let { toolbarTools } = this.props;\n\n    const showLabel = toolbarTools && toolbarTools.some(t => t === 'label');\n\n    toolbarTools = (toolbarTools || []).filter(tT => tT !== 'label');\n\n    return (\n      <div className={classNames(className)}>\n        <ToggleBar\n          disabled={disabled}\n          options={toolbarTools}\n          selectedToolType={currentToolType}\n          onChange={onChange}\n        />\n\n        {showLabel && (\n          <MiniButton\n            disabled={disabled}\n            value={'Label'}\n            onClick={onToggleLabelMode}\n            selected={labelModeEnabled}\n          />\n        )}\n      </div>\n    );\n  }\n}\n\nexport default ToolMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;IAEaA,Q;;;;;;;;;;;;WAeX,kBAAS;MACP,kBAOI,KAAKC,KAPT;MAAA,IACEC,SADF,eACEA,SADF;MAAA,IAEEC,eAFF,eAEEA,eAFF;MAAA,IAGEC,QAHF,eAGEA,QAHF;MAAA,IAIEC,gBAJF,eAIEA,gBAJF;MAAA,IAKEC,iBALF,eAKEA,iBALF;MAAA,IAMEC,QANF,eAMEA,QANF;MAQA,IAAMC,YAAN,GAAuB,KAAKP,KAA5B,CAAMO,YAAN;MAEA,IAAMC,SAAS,GAAGD,YAAY,IAAIA,YAAY,CAACE,IAAb,CAAkB,UAAAC,CAAC;QAAA,OAAIA,CAAC,KAAK,OAAV;MAAA,CAAnB,CAAlC;MAEAH,YAAY,GAAG,CAACA,YAAY,IAAI,EAAjB,EAAqBI,MAArB,CAA4B,UAAAC,EAAE;QAAA,OAAIA,EAAE,KAAK,OAAX;MAAA,CAA9B,CAAf;MAEA,oBACE;QAAK,SAAS,EAAE,IAAAC,sBAAA,EAAWZ,SAAX;MAAhB,gBACE,gCAAC,qBAAD;QACE,QAAQ,EAAEE,QADZ;QAEE,OAAO,EAAEI,YAFX;QAGE,gBAAgB,EAAEL,eAHpB;QAIE,QAAQ,EAAEI;MAJZ,EADF,EAQGE,SAAS,iBACR,gCAAC,qBAAD;QACE,QAAQ,EAAEL,QADZ;QAEE,KAAK,EAAE,OAFT;QAGE,OAAO,EAAEE,iBAHX;QAIE,QAAQ,EAAED;MAJZ,EATJ,CADF;IAmBD;;;EAjD2BU,iBAAA,CAAMC,S;;;iCAAvBhB,Q,eACQ;EACjBE,SAAS,EAAEe,qBAAA,CAAUC,MADJ;EAEjBf,eAAe,EAAEc,qBAAA,CAAUC,MAFV;EAGjBd,QAAQ,EAAEa,qBAAA,CAAUE,IAHH;EAIjBd,gBAAgB,EAAEY,qBAAA,CAAUE,IAJX;EAKjBZ,QAAQ,EAAEU,qBAAA,CAAUG,IALH;EAMjBd,iBAAiB,EAAEW,qBAAA,CAAUG,IANZ;EAOjBZ,YAAY,EAAES,qBAAA,CAAUI,OAAV,CAAkBJ,qBAAA,CAAUC,MAA5B;AAPG,C;iCADRlB,Q,kBAWW;EACpBQ,YAAY,EAAE;AADM,C;eAyCTR,Q"}
+{"version":3,"file":"tool-menu.js","names":["ToolMenu","tools","showLabel","onChangeTools","props","push","className","currentToolType","disabled","draggableTools","labelModeEnabled","onToggleLabelMode","onChange","toolbarTools","some","t","filter","tT","classNames","updateToolsOrder","React","Component","PropTypes","string","bool","func","arrayOf"],"sources":["../src/tool-menu.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport ToggleBar, { MiniButton } from './toggle-bar';\n\nexport class ToolMenu extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    currentToolType: PropTypes.string,\n    disabled: PropTypes.bool,\n    draggableTools: PropTypes.bool,\n    labelModeEnabled: PropTypes.bool,\n    onChange: PropTypes.func,\n    onToggleLabelMode: PropTypes.func,\n    onChangeTools: PropTypes.func,\n    toolbarTools: PropTypes.arrayOf(PropTypes.string)\n  };\n\n  static defaultProps = {\n    toolbarTools: []\n  };\n\n  updateToolsOrder = (tools, showLabel) => {\n    const { onChangeTools } = this.props;\n\n    if (showLabel) {\n      tools.push('label');\n    }\n\n    onChangeTools(tools);\n  };\n\n  render() {\n    const {\n      className,\n      currentToolType,\n      disabled,\n      draggableTools,\n      labelModeEnabled,\n      onToggleLabelMode,\n      onChange\n    } = this.props;\n    let { toolbarTools } = this.props;\n\n    const showLabel = toolbarTools && toolbarTools.some(t => t === 'label');\n\n    toolbarTools = (toolbarTools || []).filter(tT => tT !== 'label');\n\n    return (\n      <div className={classNames(className)}>\n        <ToggleBar\n          disabled={disabled}\n          draggableTools={draggableTools}\n          options={toolbarTools}\n          selectedToolType={currentToolType}\n          onChange={onChange}\n          onChangeToolsOrder={tools => this.updateToolsOrder(tools, showLabel)}\n        />\n\n        {showLabel && (\n          <MiniButton\n            disabled={disabled}\n            value={'Label'}\n            onClick={onToggleLabelMode}\n            selected={labelModeEnabled}\n          />\n        )}\n      </div>\n    );\n  }\n}\n\nexport default ToolMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;IAEaA,Q;;;;;;;;;;;;;;;yGAiBQ,UAACC,KAAD,EAAQC,SAAR,EAAsB;MACvC,IAAQC,aAAR,GAA0B,MAAKC,KAA/B,CAAQD,aAAR;;MAEA,IAAID,SAAJ,EAAe;QACbD,KAAK,CAACI,IAAN,CAAW,OAAX;MACD;;MAEDF,aAAa,CAACF,KAAD,CAAb;IACD,C;;;;;;WAED,kBAAS;MAAA;;MACP,kBAQI,KAAKG,KART;MAAA,IACEE,SADF,eACEA,SADF;MAAA,IAEEC,eAFF,eAEEA,eAFF;MAAA,IAGEC,QAHF,eAGEA,QAHF;MAAA,IAIEC,cAJF,eAIEA,cAJF;MAAA,IAKEC,gBALF,eAKEA,gBALF;MAAA,IAMEC,iBANF,eAMEA,iBANF;MAAA,IAOEC,QAPF,eAOEA,QAPF;MASA,IAAMC,YAAN,GAAuB,KAAKT,KAA5B,CAAMS,YAAN;MAEA,IAAMX,SAAS,GAAGW,YAAY,IAAIA,YAAY,CAACC,IAAb,CAAkB,UAAAC,CAAC;QAAA,OAAIA,CAAC,KAAK,OAAV;MAAA,CAAnB,CAAlC;MAEAF,YAAY,GAAG,CAACA,YAAY,IAAI,EAAjB,EAAqBG,MAArB,CAA4B,UAAAC,EAAE;QAAA,OAAIA,EAAE,KAAK,OAAX;MAAA,CAA9B,CAAf;MAEA,oBACE;QAAK,SAAS,EAAE,IAAAC,sBAAA,EAAWZ,SAAX;MAAhB,gBACE,gCAAC,qBAAD;QACE,QAAQ,EAAEE,QADZ;QAEE,cAAc,EAAEC,cAFlB;QAGE,OAAO,EAAEI,YAHX;QAIE,gBAAgB,EAAEN,eAJpB;QAKE,QAAQ,EAAEK,QALZ;QAME,kBAAkB,EAAE,4BAAAX,KAAK;UAAA,OAAI,MAAI,CAACkB,gBAAL,CAAsBlB,KAAtB,EAA6BC,SAA7B,CAAJ;QAAA;MAN3B,EADF,EAUGA,SAAS,iBACR,gCAAC,qBAAD;QACE,QAAQ,EAAEM,QADZ;QAEE,KAAK,EAAE,OAFT;QAGE,OAAO,EAAEG,iBAHX;QAIE,QAAQ,EAAED;MAJZ,EAXJ,CADF;IAqBD;;;EAhE2BU,iBAAA,CAAMC,S;;;iCAAvBrB,Q,eACQ;EACjBM,SAAS,EAAEgB,qBAAA,CAAUC,MADJ;EAEjBhB,eAAe,EAAEe,qBAAA,CAAUC,MAFV;EAGjBf,QAAQ,EAAEc,qBAAA,CAAUE,IAHH;EAIjBf,cAAc,EAAEa,qBAAA,CAAUE,IAJT;EAKjBd,gBAAgB,EAAEY,qBAAA,CAAUE,IALX;EAMjBZ,QAAQ,EAAEU,qBAAA,CAAUG,IANH;EAOjBd,iBAAiB,EAAEW,qBAAA,CAAUG,IAPZ;EAQjBtB,aAAa,EAAEmB,qBAAA,CAAUG,IARR;EASjBZ,YAAY,EAAES,qBAAA,CAAUI,OAAV,CAAkBJ,qBAAA,CAAUC,MAA5B;AATG,C;iCADRvB,Q,kBAaW;EACpBa,YAAY,EAAE;AADM,C;eAsDTb,Q"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.4.3-next.414+e2932997",
+  "version": "2.4.3-next.462+88f0fb88",
   "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.1-next.414+e2932997",
+    "@pie-lib/render-ui": "^4.12.1-next.462+88f0fb88",
     "@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": "e2932997d4237f56981af5ca83cbc68447e2feb6",
+  "gitHead": "88f0fb88c7a98ceaa2336add0301b176c59355b7",
   "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 && (