easy-layout 5.0.101 → 5.0.106

package/src/div/splitter.js

@@ -2,254 +2,111 @@
 
 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;  ///
+  mouseOutHandler(event, element) {
+    const disabled = this.isDisabled();
 
-    this.removeEventListener(eventType, handler, element);
+    if (!disabled) {
+      resetCursor();
+    }
   }
 
-  onStartDrag(stopDragHandler, element) {
-    const eventType = START_DRAG_EVENT_TYPE,
-          handler = stopDragHandler;  ///
-
-    this.addEventListener(eventType, handler, element);
-  }
+  stopDragHandler(dropElement, aborted, element, done) {
+    const disabled = this.isDisabled();
 
-  offStartDrag(stopDragHandler, element) {
-    const eventType = START_DRAG_EVENT_TYPE,
-          handler = stopDragHandler;  ///
+    if (!disabled) {
+      resetCursor();
+    }
 
-    this.removeEventListener(eventType, handler, element);
+    done();
   }
 
-  callHandlers(eventType, ...remainingArguments) {
-    const eventListeners = this.findEventListeners(eventType);
-
-    eventListeners.forEach((eventListener) => {
-      const { handler, element: handlerElement } = eventListener,
-            element = this; ///
+  getSizeableElement() {
+    let sizeableElement;
 
-      handler.call(handlerElement, ...remainingArguments, element);
-    });
-  }
+    const nextSiblingElement = this.getNextSiblingElement(),
+          previousSiblingElement = this.getPreviousSiblingElement(),
+          nextSiblingElementSizeableElement = isElementSizeableElement(nextSiblingElement),
+          previousSiblingElementSizeableElement = isElementSizeableElement(previousSiblingElement);
 
-  enable() {
-    this.removeClass("disabled");
-  }
+    if (nextSiblingElementSizeableElement) {
+      sizeableElement = nextSiblingElement; ///
+    }
 
-  disable() {
-    this.addClass("disabled");
-  }
+    if (previousSiblingElementSizeableElement) {
+      sizeableElement = previousSiblingElement; ///
+    }
 
-  isDisabled() {
-    const disabled = this.hasClass("disabled");
-    
-    return disabled;
+    return sizeableElement;
   }
 
-  isDragging() {
-    const dragging = this.hasClass("dragging");
-    
-    return dragging;
-  }
-  
   getDirection() {
     let direction;
 
     const nextSiblingElement = this.getNextSiblingElement(),
-          previousSiblingElement = this.getPreviousSiblingElement();
+          previousSiblingElement = this.getPreviousSiblingElement(),
+          nextSiblingElementSizeableElement = isElementSizeableElement(nextSiblingElement),
+          previousSiblingElementSizeableElement = isElementSizeableElement(previousSiblingElement);
 
-    if (nextSiblingElement instanceof SizeableDiv) {
+    if (nextSiblingElementSizeableElement) {
       direction = +1;
     }
 
-    if (previousSiblingElement instanceof SizeableDiv) {
+    if (previousSiblingElementSizeableElement) {
       direction = -1;
     }
 
     return direction;
   }
 
-  getSizeableDiv() {
-    let sizeableDiv;
-
-    const nextSiblingElement = this.getNextSiblingElement(),
-          previousSiblingElement = this.getPreviousSiblingElement();
-
-    if (nextSiblingElement instanceof SizeableDiv) {
-      sizeableDiv = nextSiblingElement; ///
-    }
-
-    if (previousSiblingElement instanceof SizeableDiv) {
-      sizeableDiv = previousSiblingElement; ///
-    }
-
-    return sizeableDiv;
-  }
-
-  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);
-    }
-
-    this.removeClass("dragging");
-
-    this.callHandlers(eventType);
-  }
-
-  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() {
@@ -258,28 +115,34 @@ 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;
 
 `;
+
+function isElementSizeableElement(element) {
+  const elementSizeableElement = (element instanceof SizeableDiv) || (element instanceof SizeableSection);
+
+  return elementSizeableElement;
+}

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

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

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"
   };

package/src/example/view.js

@@ -2,7 +2,7 @@
 
 import withStyle from "easy-with-style";  ///
 
-import { RowDiv, RowsDiv, ColumnDiv, ColumnsDiv, options } from "../index"; ///
+import { RowDiv, RowsDiv, ColumnDiv, ColumnsDiv } from "../index"; ///
 
 import BlueRowDiv from "./div/row/blue";
 import YellowRowDiv from "./div/row/yellow";
@@ -15,8 +15,6 @@ import LeftVerticalSplitterDiv from "./div/splitter/vertical/left";
 import RightVerticalSplitterDiv from "./div/splitter/vertical/right";
 import MainHorizontalSplitterDiv from "./div/splitter/horizontal/main";
 
-const { ESCAPE_KEY_STOPS_DRAGGING_OPTION } = options;
-
 const View = (properties) => {
   const { className } = properties,
         bottomLeftDiv =
@@ -24,9 +22,13 @@ const View = (properties) => {
           <BottomLeftDiv/>
 
         ,
-        options = {
-          ESCAPE_KEY_STOPS_DRAGGING_OPTION
-        };
+        bottomSizeableDiv =
+
+          <BottomSizeableDiv/>
+
+        ;
+
+  let bottomSizeableDivHeight;
 
   return (
 
@@ -39,13 +41,13 @@ const View = (properties) => {
             {bottomLeftDiv}
           </RowsDiv>
         </LeftSizeableDiv>
-        <LeftVerticalSplitterDiv options={options} />
+        <LeftVerticalSplitterDiv/>
         <ColumnDiv>
           <RowsDiv>
             <RowDiv>
               <ColumnsDiv>
                 <ColumnDiv/>
-                <RightVerticalSplitterDiv options={options} />
+                <RightVerticalSplitterDiv/>
                 <RightSizeableDiv>
                   <RowsDiv>
                     <BlueRowDiv/>
@@ -53,8 +55,20 @@ const View = (properties) => {
                 </RightSizeableDiv>
               </ColumnsDiv>
             </RowDiv>
-            <MainHorizontalSplitterDiv bottomLeftDiv={bottomLeftDiv} options={options} />
-            <BottomSizeableDiv/>
+            <MainHorizontalSplitterDiv onStartDrag={(element) => {
+
+                                         bottomSizeableDivHeight = bottomSizeableDiv.getHeight();
+
+                                       }}
+                                       onDrag={(relativeMouseTop, relativeMouseLeft) => {
+
+                                         const height = bottomSizeableDivHeight - relativeMouseTop;
+
+                                         bottomLeftDiv.setHeight(height);
+
+                                       }}
+            />
+            {bottomSizeableDiv}
           </RowsDiv>
         </ColumnDiv>
       </ColumnsDiv>

package/src/index.js

@@ -1,12 +1,11 @@
 'use strict';
 
-export { default as options } from "./options";
-
 export { default as RowDiv } from "./div/row";
 export { default as RowsDiv } from "./div/rows";
 export { default as ColumnDiv } from "./div/column";
 export { default as ColumnsDiv } from "./div/columns";
 export { default as SplitterDiv } from "./div/splitter";
 export { default as SizeableDiv } from "./div/sizeable";
+export { default as SizeableSection } from "./section/sizeable";
 export { default as VerticalSplitterDiv } from "./div/splitter/vertical";
 export { default as HorizontalSplitterDiv } from "./div/splitter/horizontal";

package/src/section/sizeable.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Element } from "easy";
+
+class SizeableSection extends Element {
+  static tagName = "section";
+
+  static defaultProperties = {
+    className: "sizeable"
+  };
+}
+
+export default withStyle(SizeableSection)`
+
+  display: flex;
+  
+`;

package/lib/options.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = exports.ESCAPE_KEY_STOPS_DRAGGING_OPTION = void 0;
-var ESCAPE_KEY_STOPS_DRAGGING_OPTION = "ESCAPE_KEY_STOPS_DRAGGING";
-exports.ESCAPE_KEY_STOPS_DRAGGING_OPTION = ESCAPE_KEY_STOPS_DRAGGING_OPTION;
-var _default = {
-    ESCAPE_KEY_STOPS_DRAGGING_OPTION: ESCAPE_KEY_STOPS_DRAGGING_OPTION
-};
-exports.default = _default;
-
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9vcHRpb25zLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5leHBvcnQgY29uc3QgRVNDQVBFX0tFWV9TVE9QU19EUkFHR0lOR19PUFRJT04gPSBcIkVTQ0FQRV9LRVlfU1RPUFNfRFJBR0dJTkdcIjtcblxuZXhwb3J0IGRlZmF1bHQge1xuICBFU0NBUEVfS0VZX1NUT1BTX0RSQUdHSU5HX09QVElPTlxufTtcbiJdLCJuYW1lcyI6WyJFU0NBUEVfS0VZX1NUT1BTX0RSQUdHSU5HX09QVElPTiJdLCJtYXBwaW5ncyI6IkFBQUEsQ0FBWSxXQUFBLENBQUM7OztFQUFiO21FQUFBO0FBRU8sR0FBSyxDQUFDQSxnQ0FBZ0MsR0FBRyxDQUEyQjtRQUE5REEsZ0NBQWdDLEdBQWhDQSxnQ0FBZ0MsQUFGN0M7ZUFJZSxDQUFDO0lBQ2RBLGdDQUFnQyxFQUFoQ0EsZ0NBQWdDO0FBQ2xDLENBQUM7MEJBTkQifQ==

package/src/options.js

@@ -1,7 +0,0 @@
-"use strict";
-
-export const ESCAPE_KEY_STOPS_DRAGGING_OPTION = "ESCAPE_KEY_STOPS_DRAGGING";
-
-export default {
-  ESCAPE_KEY_STOPS_DRAGGING_OPTION
-};