@pie-lib/graphing 2.6.3 → 2.8.1

package/lib/toggle-bar.js

@@ -1,50 +1,46 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 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 _react = _interopRequireDefault(require("react"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _styles = require("@material-ui/core/styles");
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _renderUi = require("@pie-lib/render-ui");
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _index = require("./tools/index");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _react = _interopRequireDefault(require("react"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _styles = require("@material-ui/core/styles");
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var _renderUi = require("@pie-lib/render-ui");
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+var _index = require("./tools/index");
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+var _drag = require("@pie-lib/drag");
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var buttonStyles = function buttonStyles() {
   return {
     root: {
@@ -95,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,
@@ -103,86 +100,221 @@ MiniButton.propTypes = {
 };
 
 var ToggleBar = /*#__PURE__*/function (_React$Component) {
-  _inherits(ToggleBar, _React$Component);
+  (0, _inherits2["default"])(ToggleBar, _React$Component);
 
   var _super = _createSuper(ToggleBar);
 
   function ToggleBar() {
     var _this;
 
-    _classCallCheck(this, ToggleBar);
+    (0, _classCallCheck2["default"])(this, ToggleBar);
 
     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));
-
-    _defineProperty(_assertThisInitialized(_this), "select", function (e) {
+    (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;
   }
 
-  _createClass(ToggleBar, [{
+  (0, _createClass2["default"])(ToggleBar, [{
     key: "render",
     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
-          });
+          }));
         }
       }));
     }
   }]);
-
   return ToggleBar;
 }(_react["default"].Component);
 
 exports.ToggleBar = ToggleBar;
-
-_defineProperty(ToggleBar, "propTypes", {
+(0, _defineProperty2["default"])(ToggleBar, "propTypes", {
   classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   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
 });
-
-_defineProperty(ToggleBar, "defaultProps", {});
+(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,"sources":["../src/toggle-bar.jsx"],"names":["buttonStyles","root","color","text","backgroundColor","primary","selected","background","border","secondary","notSelected","disabled","MiniButton","props","classes","className","value","onClick","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"],"mappings":"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","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"],"file":"toggle-bar.js"}
+{"version":3,"sources":["../src/toggle-bar.jsx"],"names":["buttonStyles","root","color","text","backgroundColor","primary","selected","background","border","secondary","notSelected","disabled","MiniButton","props","classes","className","value","onClick","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","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"],"mappings":"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","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"],"file":"toggle-bar.js"}

package/lib/tool-menu.js

@@ -1,66 +1,81 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ToolMenu = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _toggleBar = _interopRequireWildcard(require("./toggle-bar"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _react = _interopRequireDefault(require("react"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var _toggleBar = _interopRequireWildcard(require("./toggle-bar"));
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var ToolMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(ToolMenu, _React$Component);
+  (0, _inherits2["default"])(ToolMenu, _React$Component);
 
   var _super = _createSuper(ToolMenu);
 
   function ToolMenu() {
-    _classCallCheck(this, ToolMenu);
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ToolMenu);
+
+    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;
 
-    return _super.apply(this, arguments);
+      if (showLabel) {
+        tools.push('label');
+      }
+
+      onChangeTools(tools);
+    });
+    return _this;
   }
 
-  _createClass(ToolMenu, [{
+  (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;
@@ -75,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',
@@ -86,26 +105,24 @@ var ToolMenu = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return ToolMenu;
 }(_react["default"].Component);
 
 exports.ToolMenu = ToolMenu;
-
-_defineProperty(ToolMenu, "propTypes", {
+(0, _defineProperty2["default"])(ToolMenu, "propTypes", {
   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)
 });
-
-_defineProperty(ToolMenu, "defaultProps", {
+(0, _defineProperty2["default"])(ToolMenu, "defaultProps", {
   toolbarTools: []
 });
-
 var _default = ToolMenu;
 exports["default"] = _default;
 //# sourceMappingURL=tool-menu.js.map

package/lib/tool-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tool-menu.jsx"],"names":["ToolMenu","props","className","currentToolType","disabled","labelModeEnabled","onToggleLabelMode","onChange","toolbarTools","showLabel","some","t","filter","tT","React","Component","PropTypes","string","bool","func","arrayOf"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEaA,Q;;;;;;;;;;;;;WAeX,kBAAS;AACP,wBAOI,KAAKC,KAPT;AAAA,UACEC,SADF,eACEA,SADF;AAAA,UAEEC,eAFF,eAEEA,eAFF;AAAA,UAGEC,QAHF,eAGEA,QAHF;AAAA,UAIEC,gBAJF,eAIEA,gBAJF;AAAA,UAKEC,iBALF,eAKEA,iBALF;AAAA,UAMEC,QANF,eAMEA,QANF;AAQA,UAAMC,YAAN,GAAuB,KAAKP,KAA5B,CAAMO,YAAN;AAEA,UAAMC,SAAS,GAAGD,YAAY,IAAIA,YAAY,CAACE,IAAb,CAAkB,UAAAC,CAAC;AAAA,eAAIA,CAAC,KAAK,OAAV;AAAA,OAAnB,CAAlC;AAEAH,MAAAA,YAAY,GAAG,CAACA,YAAY,IAAI,EAAjB,EAAqBI,MAArB,CAA4B,UAAAC,EAAE;AAAA,eAAIA,EAAE,KAAK,OAAX;AAAA,OAA9B,CAAf;AAEA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWX,SAAX;AAAhB,sBACE,gCAAC,qBAAD;AACE,QAAA,QAAQ,EAAEE,QADZ;AAEE,QAAA,OAAO,EAAEI,YAFX;AAGE,QAAA,gBAAgB,EAAEL,eAHpB;AAIE,QAAA,QAAQ,EAAEI;AAJZ,QADF,EAQGE,SAAS,iBACR,gCAAC,qBAAD;AACE,QAAA,QAAQ,EAAEL,QADZ;AAEE,QAAA,KAAK,EAAE,OAFT;AAGE,QAAA,OAAO,EAAEE,iBAHX;AAIE,QAAA,QAAQ,EAAED;AAJZ,QATJ,CADF;AAmBD;;;;EAjD2BS,kBAAMC,S;;;;gBAAvBf,Q,eACQ;AACjBE,EAAAA,SAAS,EAAEc,sBAAUC,MADJ;AAEjBd,EAAAA,eAAe,EAAEa,sBAAUC,MAFV;AAGjBb,EAAAA,QAAQ,EAAEY,sBAAUE,IAHH;AAIjBb,EAAAA,gBAAgB,EAAEW,sBAAUE,IAJX;AAKjBX,EAAAA,QAAQ,EAAES,sBAAUG,IALH;AAMjBb,EAAAA,iBAAiB,EAAEU,sBAAUG,IANZ;AAOjBX,EAAAA,YAAY,EAAEQ,sBAAUI,OAAV,CAAkBJ,sBAAUC,MAA5B;AAPG,C;;gBADRjB,Q,kBAWW;AACpBQ,EAAAA,YAAY,EAAE;AADM,C;;eAyCTR,Q","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"],"file":"tool-menu.js"}
+{"version":3,"sources":["../src/tool-menu.jsx"],"names":["ToolMenu","tools","showLabel","onChangeTools","props","push","className","currentToolType","disabled","draggableTools","labelModeEnabled","onToggleLabelMode","onChange","toolbarTools","some","t","filter","tT","updateToolsOrder","React","Component","PropTypes","string","bool","func","arrayOf"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;IAEaA,Q;;;;;;;;;;;;;;;yGAiBQ,UAACC,KAAD,EAAQC,SAAR,EAAsB;AACvC,UAAQC,aAAR,GAA0B,MAAKC,KAA/B,CAAQD,aAAR;;AAEA,UAAID,SAAJ,EAAe;AACbD,QAAAA,KAAK,CAACI,IAAN,CAAW,OAAX;AACD;;AAEDF,MAAAA,aAAa,CAACF,KAAD,CAAb;AACD,K;;;;;;WAED,kBAAS;AAAA;;AACP,wBAQI,KAAKG,KART;AAAA,UACEE,SADF,eACEA,SADF;AAAA,UAEEC,eAFF,eAEEA,eAFF;AAAA,UAGEC,QAHF,eAGEA,QAHF;AAAA,UAIEC,cAJF,eAIEA,cAJF;AAAA,UAKEC,gBALF,eAKEA,gBALF;AAAA,UAMEC,iBANF,eAMEA,iBANF;AAAA,UAOEC,QAPF,eAOEA,QAPF;AASA,UAAMC,YAAN,GAAuB,KAAKT,KAA5B,CAAMS,YAAN;AAEA,UAAMX,SAAS,GAAGW,YAAY,IAAIA,YAAY,CAACC,IAAb,CAAkB,UAAAC,CAAC;AAAA,eAAIA,CAAC,KAAK,OAAV;AAAA,OAAnB,CAAlC;AAEAF,MAAAA,YAAY,GAAG,CAACA,YAAY,IAAI,EAAjB,EAAqBG,MAArB,CAA4B,UAAAC,EAAE;AAAA,eAAIA,EAAE,KAAK,OAAX;AAAA,OAA9B,CAAf;AAEA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWX,SAAX;AAAhB,sBACE,gCAAC,qBAAD;AACE,QAAA,QAAQ,EAAEE,QADZ;AAEE,QAAA,cAAc,EAAEC,cAFlB;AAGE,QAAA,OAAO,EAAEI,YAHX;AAIE,QAAA,gBAAgB,EAAEN,eAJpB;AAKE,QAAA,QAAQ,EAAEK,QALZ;AAME,QAAA,kBAAkB,EAAE,4BAAAX,KAAK;AAAA,iBAAI,MAAI,CAACiB,gBAAL,CAAsBjB,KAAtB,EAA6BC,SAA7B,CAAJ;AAAA;AAN3B,QADF,EAUGA,SAAS,iBACR,gCAAC,qBAAD;AACE,QAAA,QAAQ,EAAEM,QADZ;AAEE,QAAA,KAAK,EAAE,OAFT;AAGE,QAAA,OAAO,EAAEG,iBAHX;AAIE,QAAA,QAAQ,EAAED;AAJZ,QAXJ,CADF;AAqBD;;;EAhE2BS,kBAAMC,S;;;iCAAvBpB,Q,eACQ;AACjBM,EAAAA,SAAS,EAAEe,sBAAUC,MADJ;AAEjBf,EAAAA,eAAe,EAAEc,sBAAUC,MAFV;AAGjBd,EAAAA,QAAQ,EAAEa,sBAAUE,IAHH;AAIjBd,EAAAA,cAAc,EAAEY,sBAAUE,IAJT;AAKjBb,EAAAA,gBAAgB,EAAEW,sBAAUE,IALX;AAMjBX,EAAAA,QAAQ,EAAES,sBAAUG,IANH;AAOjBb,EAAAA,iBAAiB,EAAEU,sBAAUG,IAPZ;AAQjBrB,EAAAA,aAAa,EAAEkB,sBAAUG,IARR;AASjBX,EAAAA,YAAY,EAAEQ,sBAAUI,OAAV,CAAkBJ,sBAAUC,MAA5B;AATG,C;iCADRtB,Q,kBAaW;AACpBa,EAAAA,YAAY,EAAE;AADM,C;eAsDTb,Q","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"],"file":"tool-menu.js"}