@pie-lib/graphing 2.4.3-next.362 → 2.4.3-next.427

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,"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

@@ -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,"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;;;;gBAAvBhB,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;;gBADRlB,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"}