easy-layout 5.0.104 → 5.1.1

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() {
@@ -62,7 +56,6 @@ 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"));
@@ -78,4 +71,4 @@ function _interopRequireDefault(obj) {
     };
 }
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCc7XG5cbmV4cG9ydCB7IGRlZmF1bHQgYXMgb3B0aW9ucyB9IGZyb20gXCIuL29wdGlvbnNcIjtcblxuZXhwb3J0IHsgZGVmYXVsdCBhcyBSb3dEaXYgfSBmcm9tIFwiLi9kaXYvcm93XCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIFJvd3NEaXYgfSBmcm9tIFwiLi9kaXYvcm93c1wiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBDb2x1bW5EaXYgfSBmcm9tIFwiLi9kaXYvY29sdW1uXCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIENvbHVtbnNEaXYgfSBmcm9tIFwiLi9kaXYvY29sdW1uc1wiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBTcGxpdHRlckRpdiB9IGZyb20gXCIuL2Rpdi9zcGxpdHRlclwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBTaXplYWJsZURpdiB9IGZyb20gXCIuL2Rpdi9zaXplYWJsZVwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBTaXplYWJsZVNlY3Rpb24gfSBmcm9tIFwiLi9zZWN0aW9uL3NpemVhYmxlXCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIFZlcnRpY2FsU3BsaXR0ZXJEaXYgfSBmcm9tIFwiLi9kaXYvc3BsaXR0ZXIvdmVydGljYWxcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgSG9yaXpvbnRhbFNwbGl0dGVyRGl2IH0gZnJvbSBcIi4vZGl2L3NwbGl0dGVyL2hvcml6b250YWxcIjtcbiJdLCJuYW1lcyI6WyJvcHRpb25zIiwiZGVmYXVsdCIsIlJvd0RpdiIsIlJvd3NEaXYiLCJDb2x1bW5EaXYiLCJDb2x1bW5zRGl2IiwiU3BsaXR0ZXJEaXYiLCJTaXplYWJsZURpdiIsIlNpemVhYmxlU2VjdGlvbiIsIlZlcnRpY2FsU3BsaXR0ZXJEaXYiLCJIb3Jpem9udGFsU3BsaXR0ZXJEaXYiXSwibWFwcGluZ3MiOiJBQUFBLFlBQVksQ0FBQzs7OzsrQkFFT0EsU0FBTzs7O3dCQUFsQkMsT0FBTzs7OytCQUVJQyxRQUFNOzs7b0JBQWpCRCxPQUFPOzs7K0JBQ0lFLFNBQU87OztxQkFBbEJGLE9BQU87OzsrQkFDSUcsV0FBUzs7O3VCQUFwQkgsT0FBTzs7OytCQUNJSSxZQUFVOzs7d0JBQXJCSixPQUFPOzs7K0JBQ0lLLGFBQVc7Ozt5QkFBdEJMLE9BQU87OzsrQkFDSU0sYUFBVzs7O3lCQUF0Qk4sT0FBTzs7OytCQUNJTyxpQkFBZTs7OzBCQUExQlAsT0FBTzs7OytCQUNJUSxxQkFBbUI7Ozt5QkFBOUJSLE9BQU87OzsrQkFDSVMsdUJBQXFCOzs7MkJBQWhDVCxPQUFPOzs7OENBVm1CLFdBQVc7MENBRVosV0FBVzsyQ0FDVixZQUFZOzZDQUNWLGNBQWM7OENBQ2IsZUFBZTsrQ0FDZCxnQkFBZ0I7K0NBQ2hCLGdCQUFnQjtnREFDWixvQkFBb0I7K0NBQ2hCLHlCQUF5QjtpREFDdkIsMkJBQTJCIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCc7XG5cbmV4cG9ydCB7IGRlZmF1bHQgYXMgUm93RGl2IH0gZnJvbSBcIi4vZGl2L3Jvd1wiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBSb3dzRGl2IH0gZnJvbSBcIi4vZGl2L3Jvd3NcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgQ29sdW1uRGl2IH0gZnJvbSBcIi4vZGl2L2NvbHVtblwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBDb2x1bW5zRGl2IH0gZnJvbSBcIi4vZGl2L2NvbHVtbnNcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgU3BsaXR0ZXJEaXYgfSBmcm9tIFwiLi9kaXYvc3BsaXR0ZXJcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgU2l6ZWFibGVEaXYgfSBmcm9tIFwiLi9kaXYvc2l6ZWFibGVcIjtcbmV4cG9ydCB7IGRlZmF1bHQgYXMgU2l6ZWFibGVTZWN0aW9uIH0gZnJvbSBcIi4vc2VjdGlvbi9zaXplYWJsZVwiO1xuZXhwb3J0IHsgZGVmYXVsdCBhcyBWZXJ0aWNhbFNwbGl0dGVyRGl2IH0gZnJvbSBcIi4vZGl2L3NwbGl0dGVyL3ZlcnRpY2FsXCI7XG5leHBvcnQgeyBkZWZhdWx0IGFzIEhvcml6b250YWxTcGxpdHRlckRpdiB9IGZyb20gXCIuL2Rpdi9zcGxpdHRlci9ob3Jpem9udGFsXCI7XG4iXSwibmFtZXMiOlsiUm93RGl2IiwiZGVmYXVsdCIsIlJvd3NEaXYiLCJDb2x1bW5EaXYiLCJDb2x1bW5zRGl2IiwiU3BsaXR0ZXJEaXYiLCJTaXplYWJsZURpdiIsIlNpemVhYmxlU2VjdGlvbiIsIlZlcnRpY2FsU3BsaXR0ZXJEaXYiLCJIb3Jpem9udGFsU3BsaXR0ZXJEaXYiXSwibWFwcGluZ3MiOiJBQUFBLFlBQVksQ0FBQzs7OzsrQkFFT0EsUUFBTTs7O29CQUFqQkMsT0FBTzs7OytCQUNJQyxTQUFPOzs7cUJBQWxCRCxPQUFPOzs7K0JBQ0lFLFdBQVM7Ozt1QkFBcEJGLE9BQU87OzsrQkFDSUcsWUFBVTs7O3dCQUFyQkgsT0FBTzs7OytCQUNJSSxhQUFXOzs7eUJBQXRCSixPQUFPOzs7K0JBQ0lLLGFBQVc7Ozt5QkFBdEJMLE9BQU87OzsrQkFDSU0saUJBQWU7OzswQkFBMUJOLE9BQU87OzsrQkFDSU8scUJBQW1COzs7eUJBQTlCUCxPQUFPOzs7K0JBQ0lRLHVCQUFxQjs7OzJCQUFoQ1IsT0FBTzs7OzBDQVJrQixXQUFXOzJDQUNWLFlBQVk7NkNBQ1YsY0FBYzs4Q0FDYixlQUFlOytDQUNkLGdCQUFnQjsrQ0FDaEIsZ0JBQWdCO2dEQUNaLG9CQUFvQjsrQ0FDaEIseUJBQXlCO2lEQUN2QiwyQkFBMkIifQ==

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "easy-layout",
   "author": "James Smith",
-  "version": "5.0.104",
+  "version": "5.1.1",
   "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,65 +15,32 @@ class HorizontalSplitter extends Splitter {
     }
   }
 
-  mouseMoveHandler(event, element) {
-    const { pageY } = event,
-          mouseTop = pageY,  ///
-          disabled = this.isDisabled();
-
-    if (!disabled) {
-      const dragging = this.isDragging();
-
-      if (dragging) {
-        const direction = this.getDirection(),
-              sizeableElement = this.getSizeableElement();
-
-        const previousMouseTop = this.getPreviousMouseTop(),
-              previousSizeableElementHeight = this.getPreviousSizeableElementHeight(),
-              relativeMouseTop = mouseTop - previousMouseTop;
-
-        let sizeableElementHeight = previousSizeableElementHeight - direction * relativeMouseTop;
-
-        const height = sizeableElementHeight, ///
-              eventType = DRAG_EVENT_TYPE;
-
-        sizeableElement.setHeight(height);
-
-        sizeableElementHeight = sizeableElement.getHeight();  ///
-
-        this.callHandlers(eventType, sizeableElementHeight);
-      }
-    }
-  }
-
-  mouseDownHandler(event, element) {
-    const { pageY } = event,
-          mouseTop = pageY,  ///
-          disabled = this.isDisabled();
+  startDragHandler(element) {
+    const disabled = this.isDisabled();
 
     if (!disabled) {
-      const dragging = this.isDragging(),
-            sizeableElement = this.getSizeableElement(),
-            previousMouseTop = mouseTop,  ///
+      const sizeableElement = this.getSizeableElement(),
             sizeableElementHeight = sizeableElement.getHeight(),
             previousSizeableElementHeight = sizeableElementHeight;  ///
 
-      this.setPreviousMouseTop(previousMouseTop);
-
       this.setPreviousSizeableElementHeight(previousSizeableElementHeight);
 
       rowResizeCursor();
-
-      if (!dragging) {
-        this.startDrag();
-      }
     }
   }
 
-  getPreviousMouseTop() {
-    const state = this.getState(),
-          { previousMouseTop } = state;
+  dragHandler(relativeMouseTop, relativeMouseLeft) {
+    const disabled = this.isDisabled();
+
+    if (!disabled) {
+      const direction = this.getDirection(),
+            sizeableElement = this.getSizeableElement(),
+            previousSizeableElementHeight = this.getPreviousSizeableElementHeight(),
+            sizeableElementHeight = previousSizeableElementHeight - direction * relativeMouseTop,
+            height = sizeableElementHeight; ///
 
-    return previousMouseTop;
+      sizeableElement.setHeight(height);
+    }
   }
 
   getPreviousSizeableElementHeight() {
@@ -87,12 +50,6 @@ class HorizontalSplitter extends Splitter {
     return previousSizeableElementHeight;
   }
 
-  setPreviousMouseTop(previousMouseTop) {
-    this.updateState({
-      previousMouseTop
-    });
-  }
-
   setPreviousSizeableElementHeight(previousSizeableElementHeight) {
     this.updateState({
       previousSizeableElementHeight
@@ -100,11 +57,9 @@ class HorizontalSplitter extends Splitter {
   }
 
   setInitialState() {
-    const previousMouseTop = null,
-          previousSizeableElementHeight = null;
+    const previousSizeableElementHeight = null;
 
     this.setState({
-      previousMouseTop,
       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,65 +15,32 @@ class VerticalSplitter extends Splitter {
     }
   }
 
-  mouseMoveHandler(event, element) {
-    const { pageX } = event,
-          mouseLeft = pageX,  ///
-          disabled = this.isDisabled();
-
-    if (!disabled) {
-      const dragging = this.isDragging();
-
-      if (dragging) {
-        const direction = this.getDirection(),
-              sizeableElement = this.getSizeableElement();
-
-        const previousMouseLeft = this.getPreviousMouseLeft(),
-              previousSizeableElementWidth = this.getPreviousSizeableElementWidth(),
-              relativeMouseLeft = mouseLeft - previousMouseLeft;
-
-        let sizeableElementWidth = previousSizeableElementWidth - direction * relativeMouseLeft;
-
-        const width = sizeableElementWidth, ///
-              eventType = DRAG_EVENT_TYPE;
-
-        sizeableElement.setWidth(width);
-
-        sizeableElementWidth = sizeableElement.getWidth();  ///
-
-        this.callHandlers(eventType, sizeableElementWidth);
-      }
-    }
-  }
-
-  mouseDownHandler(event, element) {
-    const { pageX } = event,
-          mouseLeft = pageX,  ///
-          disabled = this.isDisabled();
+  startDragHandler(element) {
+    const disabled = this.isDisabled();
 
     if (!disabled) {
-      const dragging = this.isDragging(),
-            sizeableElement = this.getSizeableElement(),
-            previousMouseLeft = mouseLeft,  ///
+      const sizeableElement = this.getSizeableElement(),
             sizeableElementWidth = sizeableElement.getWidth(),
             previousSizeableElementWidth = sizeableElementWidth;  ///
 
-      this.setPreviousMouseLeft(previousMouseLeft);
-
       this.setPreviousSizeableElementWidth(previousSizeableElementWidth);
 
       columnResizeCursor();
-
-      if (!dragging) {
-        this.startDrag();
-      }
     }
   }
 
-  getPreviousMouseLeft() {
-    const state = this.getState(),
-          { previousMouseLeft } = state;
+  dragHandler(relativeMouseTop, relativeMouseLeft) {
+    const disabled = this.isDisabled();
+
+    if (!disabled) {
+      const direction = this.getDirection(),
+            sizeableElement = this.getSizeableElement(),
+            previousSizeableElementWidth = this.getPreviousSizeableElementWidth(),
+            sizeableElementWidth = previousSizeableElementWidth - direction * relativeMouseLeft,
+            width = sizeableElementWidth; ///
 
-    return previousMouseLeft;
+      sizeableElement.setWidth(width);
+    }
   }
 
   getPreviousSizeableElementWidth() {
@@ -87,12 +50,6 @@ class VerticalSplitter extends Splitter {
     return previousSizeableElementWidth;
   }
 
-  setPreviousMouseLeft(previousMouseLeft) {
-    this.updateState({
-      previousMouseLeft
-    });
-  }
-
   setPreviousSizeableElementWidth(previousSizeableElementWidth) {
     this.updateState({
       previousSizeableElementWidth
@@ -100,11 +57,9 @@ class VerticalSplitter extends Splitter {
   }
 
   setInitialState() {
-    const previousMouseLeft = null,
-          previousSizeableElementWidth = null;
+    const previousSizeableElementWidth = null;
 
     this.setState({
-      previousMouseLeft,
       previousSizeableElementWidth
     });
   }

package/src/div/splitter.js

@@ -2,117 +2,27 @@
 
 import withStyle from "easy-with-style";  ///
 
-import { window, Element, eventTypes } from "easy";
+import { Element } from "easy";
+import { dragMixins } from "easy-drag-and-drop";
 
 import SizeableDiv from "../div/sizeable";
 import SizeableSection from "../section/sizeable";
 
 import { resetCursor } from "../cursor";
-import { ESCAPE_KEY_CODE } from "../constants";
-import { ESCAPE_KEY_STOPS_DRAGGING_OPTION } from "../options";
-
-const { BLUR_EVENT_TYPE, DRAG_EVENT_TYPE, MOUSEUP_EVENT_TYPE, STOP_DRAG_EVENT_TYPE, START_DRAG_EVENT_TYPE } = eventTypes;
 
 class SplitterDiv extends Element {
-  constructor(selector, options) {
-    super(selector);
-
-    this.options = options;
-  }
-
-  isOptionPresent(option) {
-    const optionPresent = !!this.options[option];
-
-    return optionPresent;
-  }
-
-  setOptions(options) {
-    this.options = options;
-  }
-
-  setOption(option) {
-    this.options[option] = true;
-  }
-
-  unsetOption(option) {
-    delete(this.options[option]);
-  }
-
-  onDrag(dragHandler, element) {
-    const eventType = DRAG_EVENT_TYPE,
-          handler = dragHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
-
-  offDrag(dragHandler, element) {
-    const eventType = DRAG_EVENT_TYPE,
-          handler = dragHandler;  ///
-
-    this.removeEventListener(eventType, handler, element);
-  }
-
-  onStopDrag(stopDragHandler, element) {
-    const eventType = STOP_DRAG_EVENT_TYPE,
-          handler = stopDragHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
-
-  offStopDrag(stopDragHandler, element) {
-    const eventType = STOP_DRAG_EVENT_TYPE,
-          handler = stopDragHandler;  ///
-
-    this.removeEventListener(eventType, handler, element);
-  }
-
-  onStartDrag(stopDragHandler, element) {
-    const eventType = START_DRAG_EVENT_TYPE,
-          handler = stopDragHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
-
-  offStartDrag(stopDragHandler, element) {
-    const eventType = START_DRAG_EVENT_TYPE,
-          handler = stopDragHandler;  ///
-
-    this.removeEventListener(eventType, handler, element);
-  }
-
-  callHandlers(eventType, ...remainingArguments) {
-    const eventListeners = this.findEventListeners(eventType);
-
-    eventListeners.forEach((eventListener) => {
-      const { handler, element: handlerElement } = eventListener,
-            element = this; ///
-
-      handler.call(handlerElement, ...remainingArguments, element);
-    });
-  }
-
-  enable() {
-    this.removeClass("disabled");
+  mouseOutHandler(event, element) {
+    resetCursor();
   }
 
-  disable() {
-    this.addClass("disabled");
-  }
+  stopDragHandler(dropElement, aborted, element, done) {
+    resetCursor();
 
-  isDisabled() {
-    const disabled = this.hasClass("disabled");
-    
-    return disabled;
+    done();
   }
 
-  isDragging() {
-    const dragging = this.hasClass("dragging");
-    
-    return dragging;
-  }
-  
-  getDirection() {
-    let direction;
+  getSizeableElement() {
+    let sizeableElement;
 
     const nextSiblingElement = this.getNextSiblingElement(),
           previousSiblingElement = this.getPreviousSiblingElement(),
@@ -120,18 +30,18 @@ class SplitterDiv extends Element {
           previousSiblingElementSizeableElement = isElementSizeableElement(previousSiblingElement);
 
     if (nextSiblingElementSizeableElement) {
-      direction = +1;
+      sizeableElement = nextSiblingElement; ///
     }
 
     if (previousSiblingElementSizeableElement) {
-      direction = -1;
+      sizeableElement = previousSiblingElement; ///
     }
 
-    return direction;
+    return sizeableElement;
   }
 
-  getSizeableElement() {
-    let sizeableElement;
+  getDirection() {
+    let direction;
 
     const nextSiblingElement = this.getNextSiblingElement(),
           previousSiblingElement = this.getPreviousSiblingElement(),
@@ -139,122 +49,56 @@ class SplitterDiv extends Element {
           previousSiblingElementSizeableElement = isElementSizeableElement(previousSiblingElement);
 
     if (nextSiblingElementSizeableElement) {
-      sizeableElement = nextSiblingElement; ///
+      direction = +1;
     }
 
     if (previousSiblingElementSizeableElement) {
-      sizeableElement = previousSiblingElement; ///
-    }
-
-    return sizeableElement;
-  }
-
-  startDrag() {
-    const eventType = START_DRAG_EVENT_TYPE,
-          escapeKeyStopsDraggingOptionPresent = this.isOptionPresent(ESCAPE_KEY_STOPS_DRAGGING_OPTION);
-
-    if (escapeKeyStopsDraggingOptionPresent) {
-      window.onKeyDown(this.keyDownHandler, this);
-    }
-
-    this.addClass("dragging");
-
-    this.callHandlers(eventType)
-  }
-
-  stopDrag() {
-    const eventType = STOP_DRAG_EVENT_TYPE,
-          escapeKeyStopsDraggingOptionPresent = this.isOptionPresent(ESCAPE_KEY_STOPS_DRAGGING_OPTION);
-
-    if (escapeKeyStopsDraggingOptionPresent) {
-      window.offKeyDown(this.keyDownHandler, this);
+      direction = -1;
     }
 
-    this.removeClass("dragging");
-
-    this.callHandlers(eventType);
+    return direction;
   }
 
-  mouseUpHandler(event, element) {
-    const disabled = this.isDisabled();
-
-    if (!disabled) {
-      const dragging = this.isDragging();
-
-      if (dragging) {
-        this.stopDrag();
-      }
-
-      resetCursor();
-    }
+  enable() {
+    this.removeClass("disabled");
   }
 
-  mouseOutHandler(event, element) {
-    const disabled = this.isDisabled();
-
-    if (!disabled) {
-      const dragging = this.isDragging();
-
-      if (!dragging) {
-        resetCursor();
-      }
-    }
+  disable() {
+    this.addClass("disabled");
   }
 
-  keyDownHandler(event, element) {
-    const { keyCode } = event;
-
-    if (keyCode === ESCAPE_KEY_CODE) {
-      const dragging = this.isDragging();
-
-      if (dragging) {
-        this.stopDrag();
-      }
+  isDisabled() {
+    const disabled = this.hasClass("disabled");
 
-      resetCursor();
-    }
+    return disabled;
   }
 
   didMount() {
-    const { onDrag, onStopDrag, onStartDrag, disabled } = this.properties,
-          dragHandler = onDrag, ///
-          stopDragHandler = onStopDrag, ///
-          startDragHandler = onStartDrag; ///
+    this.enableDrag();
 
-    (disabled === true) ? ///
-      this.disable() :
-        this.enable();
+    this.onDrag(this.dragHandler, this);
 
-    dragHandler && this.onDrag(dragHandler);
-    stopDragHandler && this.onStopDrag(stopDragHandler);
-    startDragHandler && this.onStartDrag(startDragHandler);
+    this.onStopDrag(this.stopDragHandler, this);
 
-    window.on(`${BLUR_EVENT_TYPE} ${MOUSEUP_EVENT_TYPE}`, this.mouseUpHandler, this);  ///
+    this.onStartDrag(this.startDragHandler, this);
 
-    window.onMouseMove(this.mouseMoveHandler, this);
-
-    this.onMouseDown(this.mouseDownHandler, this);
     this.onMouseOver(this.mouseOverHandler, this);
+
     this.onMouseOut(this.mouseOutHandler, this);
   }
 
   willUnmount() {
-    const { onDrag, onStopDrag, onStartDrag } = this.properties,
-          dragHandler = onDrag, ///
-          stopDragHandler = onStopDrag, ///
-          startDragHandler = onStartDrag; ///
+    this.offMouseOut(this.mouseOutHandler, this);
 
-    dragHandler && this.offDrag(dragHandler);
-    stopDragHandler && this.offStopDrag(stopDragHandler);
-    startDragHandler && this.offStartDrag(startDragHandler);
+    this.offMouseOver(this.mouseOverHandler, this);
 
-    window.off(`${BLUR_EVENT_TYPE} ${MOUSEUP_EVENT_TYPE}`, this.mouseUpHandler, this);  ///
+    this.offStartDrag(this.startDragHandler, this);
 
-    window.offMouseMove(this.mouseMoveHandler, this);
+    this.offStopDrag(this.stopDragHandler, this);
 
-    this.offMouseDown(this.mouseDownHandler, this);
-    this.offMouseOver(this.mouseOverHandler, this);
-    this.offMouseOut(this.mouseOutHandler, this);
+    this.offDrag(this.dragHandler, this);
+
+    this.disableDrag();
   }
 
   initialise() {
@@ -263,26 +107,26 @@ class SplitterDiv extends Element {
 
   static tagName = "div";
 
-  static defaultProperties = {
-    className: "splitter"
-  };
-
   static ignoredProperties = [
     "onDrag",
-    "options",
     "disabled",
     "onStopDrag",
     "onStartDrag"
   ];
 
+  static defaultProperties = {
+    className: "splitter"
+  };
+
   static fromClass(Class, properties) {
-    const { options = {} } = properties,
-          splitterDiv = Element.fromClass(Class, properties, options);
+    const splitterDiv = Element.fromClass(Class, properties);
 
     return splitterDiv;
   }
 }
 
+Object.assign(SplitterDiv.prototype, dragMixins);
+
 export default withStyle(SplitterDiv)`
 
   flex-shrink: 0;

package/src/example/div/sizeable/bottom.js

@@ -13,6 +13,6 @@ class BottomSizeableDiv extends SizeableDiv {
 export default withStyle(BottomSizeableDiv)`
 
   height: 24rem;
-  max-height: 40rem;
+  min-height: 12rem;
 
 `;

package/src/example/div/sizeable/left.js

@@ -13,6 +13,7 @@ class LeftSizeableDiv extends SizeableDiv {
 export default withStyle(LeftSizeableDiv)`
 
   width: 24rem;
-  max-width: 48rem;
+  min-width: 12rem;
+  max-width: 36rem;
 
 `;

package/src/example/div/splitter/horizontal/main.js

@@ -5,25 +5,6 @@ import withStyle from "easy-with-style";  ///
 import { HorizontalSplitterDiv } from "../../../../index";  ///
 
 class MainHorizontalSplitterDiv extends HorizontalSplitterDiv {
-  dragHandler(sizeableDivHeight) {
-    const { bottomLeftDiv } = this.properties,
-          height = sizeableDivHeight; ///
-
-    bottomLeftDiv.setHeight(height);
-  }
-
-  didMount() {
-    super.didMount();
-
-    this.onDrag(this.dragHandler, this);
-  }
-
-  willUnmount() {
-    this.offDrag(this.dragHandler, this);
-
-    super.willUnmount();
-  }
-
   static defaultProperties = {
     className: "main"
   };