easy-layout 5.0.102 → 5.0.107

package/lib/index.js

@@ -2,12 +2,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "options", {
-    enumerable: true,
-    get: function() {
-        return _options.default;
-    }
-});
 Object.defineProperty(exports, "RowDiv", {
     enumerable: true,
     get: function() {
@@ -44,6 +38,12 @@ Object.defineProperty(exports, "SizeableDiv", {
         return _sizeable.default;
     }
 });
+Object.defineProperty(exports, "SizeableSection", {
+    enumerable: true,
+    get: function() {
+        return _sizeable1.default;
+    }
+});
 Object.defineProperty(exports, "VerticalSplitterDiv", {
     enumerable: true,
     get: function() {
@@ -56,13 +56,13 @@ Object.defineProperty(exports, "HorizontalSplitterDiv", {
         return _horizontal.default;
     }
 });
-var _options = _interopRequireDefault(require("./options"));
 var _row = _interopRequireDefault(require("./div/row"));
 var _rows = _interopRequireDefault(require("./div/rows"));
 var _column = _interopRequireDefault(require("./div/column"));
 var _columns = _interopRequireDefault(require("./div/columns"));
 var _splitter = _interopRequireDefault(require("./div/splitter"));
 var _sizeable = _interopRequireDefault(require("./div/sizeable"));
+var _sizeable1 = _interopRequireDefault(require("./section/sizeable"));
 var _vertical = _interopRequireDefault(require("./div/splitter/vertical"));
 var _horizontal = _interopRequireDefault(require("./div/splitter/horizontal"));
 function _interopRequireDefault(obj) {
@@ -71,4 +71,4 @@ function _interopRequireDefault(obj) {
     };
 }
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCc7XG5cbmV4cG9ydCB7IGRlZmF1bHQgYXMgb3B0aW9ucyB9IGZyb20gXCIuL29wdGlvbnNcIjtcblxuZXhwb3J0IHsgZGVmYXVsdCBhcyBSb3dEaXYgfSBmcm9tIFwiLi9kaXYvcm93XCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIFJvd3NEaXYgfSBmcm9tIFwiLi9kaXYvcm93c1wiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBDb2x1bW5EaXYgfSBmcm9tIFwiLi9kaXYvY29sdW1uXCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIENvbHVtbnNEaXYgfSBmcm9tIFwiLi9kaXYvY29sdW1uc1wiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBTcGxpdHRlckRpdiB9IGZyb20gXCIuL2Rpdi9zcGxpdHRlclwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBTaXplYWJsZURpdiB9IGZyb20gXCIuL2Rpdi9zaXplYWJsZVwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBWZXJ0aWNhbFNwbGl0dGVyRGl2IH0gZnJvbSBcIi4vZGl2L3NwbGl0dGVyL3ZlcnRpY2FsXCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIEhvcml6b250YWxTcGxpdHRlckRpdiB9IGZyb20gXCIuL2Rpdi9zcGxpdHRlci9ob3Jpem9udGFsXCI7XG4iXSwibmFtZXMiOlsib3B0aW9ucyIsImRlZmF1bHQiLCJSb3dEaXYiLCJSb3dzRGl2IiwiQ29sdW1uRGl2IiwiQ29sdW1uc0RpdiIsIlNwbGl0dGVyRGl2IiwiU2l6ZWFibGVEaXYiLCJWZXJ0aWNhbFNwbGl0dGVyRGl2IiwiSG9yaXpvbnRhbFNwbGl0dGVyRGl2Il0sIm1hcHBpbmdzIjoiQUFBQSxZQUFZLENBQUM7Ozs7K0JBRU9BLFNBQU87Ozt3QkFBbEJDLE9BQU87OzsrQkFFSUMsUUFBTTs7O29CQUFqQkQsT0FBTzs7OytCQUNJRSxTQUFPOzs7cUJBQWxCRixPQUFPOzs7K0JBQ0lHLFdBQVM7Ozt1QkFBcEJILE9BQU87OzsrQkFDSUksWUFBVTs7O3dCQUFyQkosT0FBTzs7OytCQUNJSyxhQUFXOzs7eUJBQXRCTCxPQUFPOzs7K0JBQ0lNLGFBQVc7Ozt5QkFBdEJOLE9BQU87OzsrQkFDSU8scUJBQW1COzs7eUJBQTlCUCxPQUFPOzs7K0JBQ0lRLHVCQUFxQjs7OzJCQUFoQ1IsT0FBTzs7OzhDQVRtQixXQUFXOzBDQUVaLFdBQVc7MkNBQ1YsWUFBWTs2Q0FDVixjQUFjOzhDQUNiLGVBQWU7K0NBQ2QsZ0JBQWdCOytDQUNoQixnQkFBZ0I7K0NBQ1IseUJBQXlCO2lEQUN2QiwyQkFBMkIifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCc7XG5cbmV4cG9ydCB7IGRlZmF1bHQgYXMgUm93RGl2IH0gZnJvbSBcIi4vZGl2L3Jvd1wiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBSb3dzRGl2IH0gZnJvbSBcIi4vZGl2L3Jvd3NcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgQ29sdW1uRGl2IH0gZnJvbSBcIi4vZGl2L2NvbHVtblwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBDb2x1bW5zRGl2IH0gZnJvbSBcIi4vZGl2L2NvbHVtbnNcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgU3BsaXR0ZXJEaXYgfSBmcm9tIFwiLi9kaXYvc3BsaXR0ZXJcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgU2l6ZWFibGVEaXYgfSBmcm9tIFwiLi9kaXYvc2l6ZWFibGVcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgU2l6ZWFibGVTZWN0aW9uIH0gZnJvbSBcIi4vc2VjdGlvbi9zaXplYWJsZVwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBWZXJ0aWNhbFNwbGl0dGVyRGl2IH0gZnJvbSBcIi4vZGl2L3NwbGl0dGVyL3ZlcnRpY2FsXCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIEhvcml6b250YWxTcGxpdHRlckRpdiB9IGZyb20gXCIuL2Rpdi9zcGxpdHRlci9ob3Jpem9udGFsXCI7XG4iXSwibmFtZXMiOlsiUm93RGl2IiwiZGVmYXVsdCIsIlJvd3NEaXYiLCJDb2x1bW5EaXYiLCJDb2x1bW5zRGl2IiwiU3BsaXR0ZXJEaXYiLCJTaXplYWJsZURpdiIsIlNpemVhYmxlU2VjdGlvbiIsIlZlcnRpY2FsU3BsaXR0ZXJEaXYiLCJIb3Jpem9udGFsU3BsaXR0ZXJEaXYiXSwibWFwcGluZ3MiOiJBQUFBLFlBQVksQ0FBQzs7OzsrQkFFT0EsUUFBTTs7O29CQUFqQkMsT0FBTzs7OytCQUNJQyxTQUFPOzs7cUJBQWxCRCxPQUFPOzs7K0JBQ0lFLFdBQVM7Ozt1QkFBcEJGLE9BQU87OzsrQkFDSUcsWUFBVTs7O3dCQUFyQkgsT0FBTzs7OytCQUNJSSxhQUFXOzs7eUJBQXRCSixPQUFPOzs7K0JBQ0lLLGFBQVc7Ozt5QkFBdEJMLE9BQU87OzsrQkFDSU0saUJBQWU7OzswQkFBMUJOLE9BQU87OzsrQkFDSU8scUJBQW1COzs7eUJBQTlCUCxPQUFPOzs7K0JBQ0lRLHVCQUFxQjs7OzJCQUFoQ1IsT0FBTzs7OzBDQVJrQixXQUFXOzJDQUNWLFlBQVk7NkNBQ1YsY0FBYzs4Q0FDYixlQUFlOytDQUNkLGdCQUFnQjsrQ0FDaEIsZ0JBQWdCO2dEQUNaLG9CQUFvQjsrQ0FDaEIseUJBQXlCO2lEQUN2QiwyQkFBMkIifQ==

package/lib/section/sizeable.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _easyWithStyle = _interopRequireDefault(require("easy-with-style"));
+var _easy = require("easy");
+function _assertThisInitialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+        Date.prototype.toString.call(Reflect.construct(Date, [], function() {}));
+        return true;
+    } catch (e) {
+        return false;
+    }
+}
+function _construct(Parent, args, Class) {
+    if (isNativeReflectConstruct()) {
+        _construct = Reflect.construct;
+    } else {
+        _construct = function _construct(Parent, args, Class) {
+            var a = [
+                null
+            ];
+            a.push.apply(a, args);
+            var Constructor = Function.bind.apply(Parent, a);
+            var instance = new Constructor();
+            if (Class) _setPrototypeOf(instance, Class.prototype);
+            return instance;
+        };
+    }
+    return _construct.apply(null, arguments);
+}
+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;
+}
+function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+}
+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
+        }
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+}
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _isNativeFunction(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+function _possibleConstructorReturn(self, call) {
+    if (call && (_typeof(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assertThisInitialized(self);
+}
+function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _setPrototypeOf(o, p);
+}
+function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+var _typeof = function(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+};
+function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+    _wrapNativeSuper = function _wrapNativeSuper(Class) {
+        if (Class === null || !_isNativeFunction(Class)) return Class;
+        if (typeof Class !== "function") {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        if (typeof _cache !== "undefined") {
+            if (_cache.has(Class)) return _cache.get(Class);
+            _cache.set(Class, Wrapper);
+        }
+        function Wrapper() {
+            return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+        }
+        Wrapper.prototype = Object.create(Class.prototype, {
+            constructor: {
+                value: Wrapper,
+                enumerable: false,
+                writable: true,
+                configurable: true
+            }
+        });
+        return _setPrototypeOf(Wrapper, Class);
+    };
+    return _wrapNativeSuper(Class);
+}
+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 _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 _templateObject() {
+    var data = _taggedTemplateLiteral([
+        "\n\n  display: flex;\n  \n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var SizeableSection = /*#__PURE__*/ function(Element) {
+    _inherits(SizeableSection, Element);
+    var _super = _createSuper(SizeableSection);
+    function SizeableSection() {
+        _classCallCheck(this, SizeableSection);
+        return _super.apply(this, arguments);
+    }
+    return SizeableSection;
+}(_wrapNativeSuper(_easy.Element));
+_defineProperty(SizeableSection, "tagName", "section");
+_defineProperty(SizeableSection, "defaultProperties", {
+    className: "sizeable"
+});
+var _default = (0, _easyWithStyle).default(SizeableSection)(_templateObject());
+exports.default = _default;
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zZWN0aW9uL3NpemVhYmxlLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5pbXBvcnQgd2l0aFN0eWxlIGZyb20gXCJlYXN5LXdpdGgtc3R5bGVcIjsgIC8vL1xuXG5pbXBvcnQgeyBFbGVtZW50IH0gZnJvbSBcImVhc3lcIjtcblxuY2xhc3MgU2l6ZWFibGVTZWN0aW9uIGV4dGVuZHMgRWxlbWVudCB7XG4gIHN0YXRpYyB0YWdOYW1lID0gXCJzZWN0aW9uXCI7XG5cbiAgc3RhdGljIGRlZmF1bHRQcm9wZXJ0aWVzID0ge1xuICAgIGNsYXNzTmFtZTogXCJzaXplYWJsZVwiXG4gIH07XG59XG5cbmV4cG9ydCBkZWZhdWx0IHdpdGhTdHlsZShTaXplYWJsZVNlY3Rpb24pYFxuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIFxuYDtcbiJdLCJuYW1lcyI6WyJTaXplYWJsZVNlY3Rpb24iLCJFbGVtZW50IiwidGFnTmFtZSIsImRlZmF1bHRQcm9wZXJ0aWVzIiwiY2xhc3NOYW1lIiwid2l0aFN0eWxlIl0sIm1hcHBpbmdzIjoiQUFBQSxZQUFZLENBQUM7Ozs7O0FBRVMsSUFBQSxjQUFpQixrQ0FBakIsaUJBQWlCLEVBQUE7QUFFZixJQUFBLEtBQU0sV0FBTixNQUFNLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFOUIsSUFBQSxBQUFNQSxlQUFlLGlCQVFsQixBQVJIOzs7YUFBTUEsZUFBZTs7Ozs7Q0FNcEIsa0JBTjZCQyxLQUFPLFFBQUEsRUFNcEM7QUFMQyxnQkFESUQsZUFBZSxFQUNaRSxTQUFPLEVBQUcsU0FBUyxDQUFDO0FBRTNCLGdCQUhJRixlQUFlLEVBR1pHLG1CQUFpQixFQUFHO0lBQ3pCQyxTQUFTLEVBQUUsVUFBVTtDQUN0QixDQUFDO2VBR1dDLENBQUFBLEdBQUFBLGNBQVMsQUFBaUIsQ0FBQSxRQUFqQixDQUFDTCxlQUFlLENBQUMifQ==

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "easy-layout",
   "author": "James Smith",
-  "version": "5.0.102",
+  "version": "5.0.107",
   "license": "MIT, Anti-996",
   "homepage": "https://github.com/djalbat/easy-layout",
   "description": "Layout elements that work with CSS flexbox.",
@@ -10,8 +10,9 @@
     "url": "https://github.com/djalbat/easy-layout"
   },
   "dependencies": {
-    "easy": "^13.0.33",
-    "easy-with-style": "^3.0.126"
+    "easy": "^13.0.41",
+    "easy-drag-and-drop": "^1.2.52",
+    "easy-with-style": "^3.0.128"
   },
   "devDependencies": {
     "@swc/core": "^1.2.50",

package/src/constants.js

@@ -4,4 +4,3 @@ export const AUTO = "auto";
 export const CURSOR = "cursor";
 export const COL_RESIZE = "col-resize";
 export const ROW_RESIZE = "row-resize";
-export const ESCAPE_KEY_CODE = 27;

package/src/div/splitter/horizontal.js

@@ -2,14 +2,10 @@
 
 import withStyle from "easy-with-style";  ///
 
-import { eventTypes } from "easy";
-
 import Splitter from "../splitter";
 
 import { rowResizeCursor } from "../../cursor";
 
-const { DRAG_EVENT_TYPE } = eventTypes;
-
 class HorizontalSplitter extends Splitter {
   mouseOverHandler(event, element) {
     const disabled = this.isDisabled();
@@ -19,93 +15,52 @@ class HorizontalSplitter extends Splitter {
     }
   }
 
-  mouseMoveHandler(event, element) {
-    const { pageY } = event,
-          mouseTop = pageY,  ///
-          disabled = this.isDisabled();
+  startDragHandler(element) {
+    const disabled = this.isDisabled();
 
     if (!disabled) {
-      const dragging = this.isDragging();
-
-      if (dragging) {
-        const direction = this.getDirection(),
-              sizeableDiv = this.getSizeableDiv();
-
-        const previousMouseTop = this.getPreviousMouseTop(),
-              previousSizeableDivHeight = this.getPreviousSizeableDivHeight(),
-              relativeMouseTop = mouseTop - previousMouseTop;
-
-        let sizeableDivHeight = previousSizeableDivHeight - direction * relativeMouseTop;
+      const sizeableElement = this.getSizeableElement(),
+            sizeableElementHeight = sizeableElement.getHeight(),
+            previousSizeableElementHeight = sizeableElementHeight;  ///
 
-        const height = sizeableDivHeight, ///
-              eventType = DRAG_EVENT_TYPE;
+      this.setPreviousSizeableElementHeight(previousSizeableElementHeight);
 
-        sizeableDiv.setHeight(height);
-
-        sizeableDivHeight = sizeableDiv.getHeight();  ///
-
-        this.callHandlers(eventType, sizeableDivHeight);
-      }
+      rowResizeCursor();
     }
   }
 
-  mouseDownHandler(event, element) {
-    const { pageY } = event,
-          mouseTop = pageY,  ///
-          disabled = this.isDisabled();
+  dragHandler(relativeMouseTop, relativeMouseLeft) {
+    const disabled = this.isDisabled();
 
     if (!disabled) {
-      const dragging = this.isDragging(),
-            sizeableDiv = this.getSizeableDiv(),
-            previousMouseTop = mouseTop,  ///
-            sizeableDivHeight = sizeableDiv.getHeight(),
-            previousSizeableDivHeight = sizeableDivHeight;  ///
-
-      this.setPreviousMouseTop(previousMouseTop);
+      const direction = this.getDirection(),
+            sizeableElement = this.getSizeableElement(),
+            previousSizeableElementHeight = this.getPreviousSizeableElementHeight(),
+            sizeableElementHeight = previousSizeableElementHeight - direction * relativeMouseTop,
+            height = sizeableElementHeight; ///
 
-      this.setPreviousSizeableDivHeight(previousSizeableDivHeight);
-
-      rowResizeCursor();
-
-      if (!dragging) {
-        this.startDrag();
-      }
+      sizeableElement.setHeight(height);
     }
   }
 
-  getPreviousMouseTop() {
+  getPreviousSizeableElementHeight() {
     const state = this.getState(),
-          { previousMouseTop } = state;
+          { previousSizeableElementHeight } = state;
 
-    return previousMouseTop;
-  }
-
-  getPreviousSizeableDivHeight() {
-    const state = this.getState(),
-          { previousSizeableDivHeight } = state;
-
-    return previousSizeableDivHeight;
-  }
-
-  setPreviousMouseTop(previousMouseTop) {
-    this.updateState({
-      previousMouseTop
-    });
+    return previousSizeableElementHeight;
   }
 
-  setPreviousSizeableDivHeight(previousSizeableDivHeight) {
+  setPreviousSizeableElementHeight(previousSizeableElementHeight) {
     this.updateState({
-      previousSizeableDivHeight
+      previousSizeableElementHeight
     });
   }
 
   setInitialState() {
-    const previousMouseTop = null,
-          previousSizeableDivHeight = null;
+    const previousSizeableElementHeight = null;
 
     this.setState({
-      previousMouseTop,
-      previousSizeableDivHeight
+      previousSizeableElementHeight
     });
   }
 

package/src/div/splitter/vertical.js

@@ -2,14 +2,10 @@
 
 import withStyle from "easy-with-style";  ///
 
-import { eventTypes } from "easy";
-
 import Splitter from "../splitter";
 
 import { columnResizeCursor } from "../../cursor";
 
-const { DRAG_EVENT_TYPE } = eventTypes;
-
 class VerticalSplitter extends Splitter {
   mouseOverHandler(event, element) {
     const disabled = this.isDisabled();
@@ -19,93 +15,52 @@ class VerticalSplitter extends Splitter {
     }
   }
 
-  mouseMoveHandler(event, element) {
-    const { pageX } = event,
-          mouseLeft = pageX,  ///
-          disabled = this.isDisabled();
+  startDragHandler(element) {
+    const disabled = this.isDisabled();
 
     if (!disabled) {
-      const dragging = this.isDragging();
-
-      if (dragging) {
-        const direction = this.getDirection(),
-              sizeableDiv = this.getSizeableDiv();
-
-        const previousMouseLeft = this.getPreviousMouseLeft(),
-              previousSizeableDivWidth = this.getPreviousSizeableDivWidth(),
-              relativeMouseLeft = mouseLeft - previousMouseLeft;
-
-        let sizeableDivWidth = previousSizeableDivWidth - direction * relativeMouseLeft;
+      const sizeableElement = this.getSizeableElement(),
+            sizeableElementWidth = sizeableElement.getWidth(),
+            previousSizeableElementWidth = sizeableElementWidth;  ///
 
-        const width = sizeableDivWidth, ///
-              eventType = DRAG_EVENT_TYPE;
+      this.setPreviousSizeableElementWidth(previousSizeableElementWidth);
 
-        sizeableDiv.setWidth(width);
-
-        sizeableDivWidth = sizeableDiv.getWidth();  ///
-
-        this.callHandlers(eventType, sizeableDivWidth);
-      }
+      columnResizeCursor();
     }
   }
 
-  mouseDownHandler(event, element) {
-    const { pageX } = event,
-          mouseLeft = pageX,  ///
-          disabled = this.isDisabled();
+  dragHandler(relativeMouseTop, relativeMouseLeft) {
+    const disabled = this.isDisabled();
 
     if (!disabled) {
-      const dragging = this.isDragging(),
-            sizeableDiv = this.getSizeableDiv(),
-            previousMouseLeft = mouseLeft,  ///
-            sizeableDivWidth = sizeableDiv.getWidth(),
-            previousSizeableDivWidth = sizeableDivWidth;  ///
-
-      this.setPreviousMouseLeft(previousMouseLeft);
+      const direction = this.getDirection(),
+            sizeableElement = this.getSizeableElement(),
+            previousSizeableElementWidth = this.getPreviousSizeableElementWidth(),
+            sizeableElementWidth = previousSizeableElementWidth - direction * relativeMouseLeft,
+            width = sizeableElementWidth; ///
 
-      this.setPreviousSizeableDivWidth(previousSizeableDivWidth);
-
-      columnResizeCursor();
-
-      if (!dragging) {
-        this.startDrag();
-      }
+      sizeableElement.setWidth(width);
     }
   }
 
-  getPreviousMouseLeft() {
+  getPreviousSizeableElementWidth() {
     const state = this.getState(),
-          { previousMouseLeft } = state;
+          { previousSizeableElementWidth } = state;
 
-    return previousMouseLeft;
-  }
-
-  getPreviousSizeableDivWidth() {
-    const state = this.getState(),
-          { previousSizeableDivWidth } = state;
-
-    return previousSizeableDivWidth;
-  }
-
-  setPreviousMouseLeft(previousMouseLeft) {
-    this.updateState({
-      previousMouseLeft
-    });
+    return previousSizeableElementWidth;
   }
 
-  setPreviousSizeableDivWidth(previousSizeableDivWidth) {
+  setPreviousSizeableElementWidth(previousSizeableElementWidth) {
     this.updateState({
-      previousSizeableDivWidth
+      previousSizeableElementWidth
     });
   }
 
   setInitialState() {
-    const previousMouseLeft = null,
-          previousSizeableDivWidth = null;
+    const previousSizeableElementWidth = null;
 
     this.setState({
-      previousMouseLeft,
-      previousSizeableDivWidth
+      previousSizeableElementWidth
     });
   }