@zohodesk/library-platform 1.1.1 → 1.1.2

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeByMouseUsecase.js

@@ -0,0 +1,30 @@
+import { SCROLL_MOVE_DELTA } from "../../domain/entities/Constants";
+import AbstractUsecase from "./AbstractUsecase";
+export default class ResizeByMouseUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      mouseX
+    } = input;
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer || !resizer.isResizingHappening()) {
+      return;
+    }
+
+    resizer.updateMouseX(mouseX);
+    const elementResizeInfo = resizer.getResizerState();
+    const distanceAvailableToMove = resizer.calculateDistanceToAutoScroll();
+    presenter.autoScrollLeft(distanceAvailableToMove, SCROLL_MOVE_DELTA);
+    presenter.updateBehaviourState({
+      resizerState: elementResizeInfo,
+      restoreModel: resizer.toObject()
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeByScrollUsecase.js

@@ -0,0 +1,27 @@
+import AbstractUsecase from "./AbstractUsecase";
+export default class ResizeByScrollUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer || !resizer.isResizingHappening()) {
+      return;
+    }
+
+    const elementResizeInfo = resizer.getResizerState(); // const distanceAvailableToMove = resizer.calculateDistanceToAutoScroll();
+    // if (!distanceAvailableToMove) {
+    //   presenter.cancelAutoScroll();
+    // }
+
+    presenter.updateBehaviourState({
+      resizerState: elementResizeInfo,
+      restoreModel: resizer.toObject()
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeEndUsecase.js

@@ -0,0 +1,33 @@
+import AbstractUsecase from "./AbstractUsecase";
+import { RESIZE_FINISHED } from "../../../../../bc/table-column-resizer/Constants";
+export default class ResizeEndUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      dispatch
+    } = input;
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer || !resizer.isResizingHappening()) {
+      return;
+    }
+
+    const result = resizer.getResizerEndResult();
+    presenter.cancelAutoScroll();
+    presenter.clearBehaviourState();
+    dispatch({
+      type: RESIZE_FINISHED,
+      payload: {
+        columnName: result.columnName,
+        oldWidth: result.oldWidth,
+        newWidth: result.newWidth
+      }
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/applications/usecases/ResizeStartUsecase.js

@@ -0,0 +1,39 @@
+import AbstractUsecase from "./AbstractUsecase";
+export default class ResizeStartUsecase extends AbstractUsecase {
+  execute(input) {
+    const {
+      columnName,
+      minWidth,
+      maxWidth,
+      initialPosition,
+      columnWidth
+    } = input;
+    const {
+      tableService,
+      repository: repo,
+      presenter
+    } = this.dependencies;
+    const tableEntity = tableService.getTableEntity();
+    const resizer = repo.getColumnResizerEntity(tableEntity);
+
+    if (!resizer) {
+      return;
+    }
+
+    resizer.updateMouseX(initialPosition);
+    resizer.resizeStart({
+      columnName,
+      table: tableEntity,
+      minWidth,
+      maxWidth,
+      initialPosition,
+      columnWidth
+    });
+    const elementResizeInfo = resizer.getResizerState();
+    presenter.updateBehaviourState({
+      resizerState: elementResizeInfo,
+      restoreModel: resizer.toObject()
+    });
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/ColumnResizer.js

@@ -0,0 +1,125 @@
+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; }
+
+import { ResizingColumn } from "./ResizingColumn";
+import { ResizeColumnCalculator } from "./ResizeColumnCalculator";
+import { ResizerAutoScrollCalculator } from "./ResizerAutoScrollCalculator";
+export default class ColumnResizer {
+  constructor(table, mouse) {
+    _defineProperty(this, "calculator", void 0);
+
+    _defineProperty(this, "resizingColumn", void 0);
+
+    _defineProperty(this, "table", void 0);
+
+    _defineProperty(this, "mouse", void 0);
+
+    _defineProperty(this, "autoScrollCalculator", void 0);
+
+    this.calculator = new ResizeColumnCalculator(table, mouse);
+    this.resizingColumn = null;
+    this.table = table;
+    this.mouse = mouse;
+  }
+
+  updateMouseX(mouseX) {
+    this.mouse.updateMouseX(mouseX);
+  }
+
+  restore(restoreModel) {
+    const {
+      calculatorData,
+      resizingColumnData
+    } = restoreModel;
+    this.updateMouseX(calculatorData.mouseX);
+    this.calculator.setInitialData(calculatorData);
+
+    if (resizingColumnData) {
+      this.resizingColumn = new ResizingColumn(resizingColumnData);
+      this.calculator.setResizingColumn(this.resizingColumn);
+      this.autoScrollCalculator = new ResizerAutoScrollCalculator(this.resizingColumn, this.table);
+    }
+  }
+
+  toObject() {
+    return {
+      resizingColumnData: this.resizingColumn ? this.resizingColumn.toObject() : null,
+      calculatorData: this.calculator.toObject()
+    };
+  }
+
+  isResizingHappening() {
+    return this.resizingColumn !== null;
+  }
+
+  calculateDistanceToAutoScroll() {
+    return this.autoScrollCalculator.calculateDistanceToAutoScroll(this.mouse.getMouseX());
+  }
+
+  getResizerEndResult() {
+    if (!this.resizingColumn) {
+      // return null
+      return {
+        columnName: '',
+        newWidth: 0,
+        oldWidth: 0
+      };
+    }
+
+    return this.resizingColumn.getResizerEndResult();
+  }
+
+  resizeStart(_ref) {
+    let {
+      columnName,
+      columnWidth,
+      minWidth,
+      maxWidth,
+      table,
+      initialPosition
+    } = _ref;
+    this.resizingColumn = new ResizingColumn({
+      columnName,
+      columnWidth,
+      resizingWidth: columnWidth,
+      minWidth,
+      maxWidth
+    });
+    this.calculator.setInitialData({
+      initialScrollLeft: table.getScrollLeft(),
+      mouseX: initialPosition,
+      initialPosition
+    });
+    this.calculator.setResizingColumn(this.resizingColumn);
+    return this.getResizerState();
+  }
+
+  getResizerEmptyState() {
+    return {
+      isResizing: false,
+      columnName: '',
+      initialPosition: 0,
+      resizedPosition: 0,
+      allowedWidth: 0
+    };
+  }
+
+  getResizerState() {
+    const {
+      resizingColumn
+    } = this;
+
+    if (!resizingColumn) {
+      return this.getResizerEmptyState();
+    }
+
+    const elementResizeInfo = this.calculator.calculateElementResizeInfo();
+    return {
+      isResizing: this.isResizingHappening(),
+      columnName: resizingColumn.getColumnName(),
+      initialPosition: elementResizeInfo.initialPosition,
+      resizedPosition: elementResizeInfo.resizedPosition,
+      allowedWidth: elementResizeInfo.allowedWidth
+    };
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/Constants.js

@@ -0,0 +1,3 @@
+export const TABLE_COLUMN_MINIMUM_WIDTH = 100;
+export const TABLE_EDGE_DELTA = 20;
+export const SCROLL_MOVE_DELTA = 10;

package/es/library/behaviours/table-column-resizer/domain/entities/MinMaxLimiter.js

@@ -0,0 +1,11 @@
+export class MinMaxLimiter {
+  static limit(_ref) {
+    let {
+      min,
+      max,
+      value
+    } = _ref;
+    return Math.min(Math.max(min, value), max);
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/Mouse.js

@@ -0,0 +1,16 @@
+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; }
+
+export class Mouse {
+  constructor() {
+    _defineProperty(this, "mouseX", void 0);
+  }
+
+  updateMouseX(mouseX) {
+    this.mouseX = mouseX;
+  }
+
+  getMouseX() {
+    return this.mouseX;
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/ResizeColumnCalculator.js

@@ -0,0 +1,84 @@
+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; }
+
+export class ResizeColumnCalculator {
+  constructor(table, mouse) {
+    _defineProperty(this, "initialScrollLeft", void 0);
+
+    _defineProperty(this, "initialPosition", void 0);
+
+    _defineProperty(this, "resizingColumn", void 0);
+
+    _defineProperty(this, "table", void 0);
+
+    _defineProperty(this, "mouse", void 0);
+
+    this.table = table;
+    this.mouse = mouse;
+  }
+
+  toObject() {
+    return {
+      initialScrollLeft: this.initialScrollLeft,
+      mouseX: this.mouse.getMouseX(),
+      initialPosition: this.initialPosition
+    };
+  }
+
+  setInitialData(_ref) {
+    let {
+      initialScrollLeft,
+      mouseX,
+      initialPosition
+    } = _ref;
+    this.mouse.updateMouseX(mouseX);
+    this.initialScrollLeft = initialScrollLeft;
+    this.initialPosition = initialPosition;
+  }
+
+  setResizingColumn(resizingColumn) {
+    this.resizingColumn = resizingColumn;
+  }
+
+  calculateByMouseXChange() {
+    const {
+      initialPosition,
+      table,
+      mouse
+    } = this;
+    const mouseXWithinContainer = table.getMousePositionWithInTable(mouse.getMouseX());
+    const mouseMovedDistance = mouseXWithinContainer - initialPosition;
+    return mouseMovedDistance;
+  }
+
+  calculateByScrollLeftChange() {
+    const {
+      initialScrollLeft,
+      table
+    } = this;
+    const scrollMovedDistance = table.getScrollLeft() - initialScrollLeft;
+    return scrollMovedDistance;
+  }
+
+  calculateElementResizeInfo() {
+    // NOTE: only use Math.floor or Math.ceil logic here in this  method only more  other places
+    const {
+      table,
+      resizingColumn,
+      initialPosition
+    } = this;
+    const width = resizingColumn.getColumnWidth();
+    const scrollMovedDistance = this.calculateByScrollLeftChange();
+    const mouseMovedDistance = Math.floor(this.calculateByMouseXChange());
+    const rtlDelta = table.isRTL() ? -1 : 1;
+    const possibleWidth = width + mouseMovedDistance * rtlDelta + scrollMovedDistance * rtlDelta;
+    const allowedWidth = Math.round(resizingColumn.calculateConstrainedWidth(possibleWidth));
+    const mouseDelta = resizingColumn.getWidthDiff(allowedWidth) * rtlDelta;
+    resizingColumn.setResizedWidth(allowedWidth);
+    return {
+      allowedWidth,
+      initialPosition: table.getPositionWithInTable(initialPosition - scrollMovedDistance),
+      resizedPosition: table.getPositionWithInTable(initialPosition + mouseDelta - scrollMovedDistance)
+    };
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/ResizerAutoScrollCalculator.js

@@ -0,0 +1,44 @@
+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; }
+
+export class ResizerAutoScrollCalculator {
+  constructor(resizingColumn, table) {
+    _defineProperty(this, "resizingColumn", void 0);
+
+    _defineProperty(this, "table", void 0);
+
+    this.resizingColumn = resizingColumn;
+    this.table = table;
+  }
+
+  calculateDistanceToLeftWithinLimits() {
+    const {
+      table,
+      resizingColumn
+    } = this;
+    return table.isRTL() ? resizingColumn.distanceToReachMaxWidth() : resizingColumn.distanceToReachMinWidth();
+  }
+
+  calculateDistanceToRightWithinLimits() {
+    const {
+      table,
+      resizingColumn
+    } = this;
+    return table.isRTL() ? resizingColumn.distanceToReachMinWidth() : resizingColumn.distanceToReachMaxWidth();
+  }
+
+  calculateDistanceToAutoScroll(mouseX) {
+    const {
+      table
+    } = this;
+
+    if (table.isLeftEdgeReached(mouseX)) {
+      // Note to move reverse we multiplied by -1
+      return -1 * this.calculateDistanceToLeftWithinLimits();
+    } else if (table.isRightEdgeReached(mouseX)) {
+      return this.calculateDistanceToRightWithinLimits();
+    }
+
+    return 0;
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/ResizingColumn.js

@@ -0,0 +1,83 @@
+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; }
+
+import { TABLE_COLUMN_MINIMUM_WIDTH } from "./Constants";
+import { MinMaxLimiter } from "./MinMaxLimiter";
+export class ResizingColumn {
+  constructor(_ref) {
+    let {
+      columnName,
+      columnWidth,
+      resizingWidth,
+      minWidth,
+      maxWidth
+    } = _ref;
+
+    _defineProperty(this, "columnName", void 0);
+
+    _defineProperty(this, "columnWidth", void 0);
+
+    _defineProperty(this, "resizingWidth", void 0);
+
+    _defineProperty(this, "minWidth", void 0);
+
+    _defineProperty(this, "maxWidth", void 0);
+
+    this.columnName = columnName;
+    this.columnWidth = columnWidth;
+    this.resizingWidth = resizingWidth;
+    this.minWidth = minWidth;
+    this.maxWidth = maxWidth;
+  }
+
+  getColumnName() {
+    return this.columnName;
+  }
+
+  distanceToReachMinWidth() {
+    return this.resizingWidth - this.minWidth;
+  }
+
+  distanceToReachMaxWidth() {
+    return this.maxWidth - this.resizingWidth;
+  }
+
+  setResizedWidth(resizingWidth) {
+    this.resizingWidth = resizingWidth;
+  }
+
+  calculateConstrainedWidth(possibleWidth) {
+    const allowedWidth = MinMaxLimiter.limit({
+      min: Math.max(this.minWidth, TABLE_COLUMN_MINIMUM_WIDTH),
+      max: this.maxWidth,
+      value: possibleWidth
+    });
+    return allowedWidth;
+  }
+
+  getResizerEndResult() {
+    return {
+      columnName: this.columnName,
+      newWidth: this.resizingWidth,
+      oldWidth: this.columnWidth
+    };
+  }
+
+  getWidthDiff(allowedWidth) {
+    return allowedWidth - this.columnWidth;
+  }
+
+  getColumnWidth() {
+    return this.columnWidth;
+  }
+
+  toObject() {
+    return {
+      columnName: this.columnName,
+      columnWidth: this.columnWidth,
+      resizingWidth: this.resizingWidth,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth
+    };
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/Table.js

@@ -0,0 +1,68 @@
+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; }
+
+import { TABLE_EDGE_DELTA } from "./Constants";
+import { MinMaxLimiter } from "./MinMaxLimiter";
+const SCROLL_MOVE_DELTA = 10;
+export class Table {
+  // private
+  // private
+  constructor(_ref) {
+    let {
+      isRTL,
+      scrollLeft,
+      containerLeft,
+      containerWidth
+    } = _ref;
+
+    _defineProperty(this, "_isRTL", void 0);
+
+    _defineProperty(this, "scrollLeft", void 0);
+
+    _defineProperty(this, "containerLeft", void 0);
+
+    _defineProperty(this, "containerWidth", void 0);
+
+    this._isRTL = isRTL;
+    this.scrollLeft = scrollLeft;
+    this.containerLeft = containerLeft;
+    this.containerWidth = containerWidth;
+  }
+
+  isRTL() {
+    return this._isRTL;
+  }
+
+  getScrollLeft() {
+    return this.scrollLeft;
+  }
+
+  isLeftEdgeReached(mouseX) {
+    return this.containerLeft + SCROLL_MOVE_DELTA >= mouseX;
+  }
+
+  isRightEdgeReached(mouseX) {
+    return this.containerLeft + this.containerWidth - SCROLL_MOVE_DELTA <= mouseX;
+  }
+
+  getPositionWithInTable(pos) {
+    return MinMaxLimiter.limit({
+      min: 0,
+      max: this.containerWidth,
+      value: pos - this.containerLeft
+    });
+  }
+
+  getMousePositionWithInTable(mouseX) {
+    const {
+      containerLeft,
+      containerWidth
+    } = this;
+    const mouseXWithinContainer = MinMaxLimiter.limit({
+      min: containerLeft + TABLE_EDGE_DELTA,
+      max: containerLeft + containerWidth - TABLE_EDGE_DELTA,
+      value: mouseX
+    });
+    return mouseXWithinContainer;
+  }
+
+}

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ColumnResizerRestoreModel.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ElementResizeInfo.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/IColumnResizer.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ResizeColumnCalculatorRestoreModel.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ResizerEndResult.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/domain/entities/interfaces/ResizingColumnRestoreModel.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/table-column-resizer/frameworks/TableColumnResizerBehaviorFactory.js

@@ -0,0 +1,38 @@
+import { RESIZE_ENDED, RESIZE_MOUSE, RESIZE_SCROLL, RESIZE_STARTED } from "../../../../bc/table-column-resizer/Constants";
+import Properties from "../../../../bc/table-column-resizer/Properties";
+import ResizeByMouseController from "../adapters/controllers/ResizeByMouseController";
+import ResizeByScrollController from "../adapters/controllers/ResizeByScrollController";
+import ResizeEndController from "../adapters/controllers/ResizeEndController";
+import ResizeStartController from "../adapters/controllers/ResizeStartController";
+import Repository from "../adapters/gateways/Repository";
+import Service from "../adapters/gateways/Service";
+import { TableElementService } from "../adapters/gateways/TableElementService";
+import Presenter from "../adapters/presenters/Presenter";
+export default class TableColumnResizerBehaviorFactory {
+  static create() {
+    const repo = new Repository();
+    const presenter = new Presenter();
+    const tableService = new TableElementService();
+    const service = new Service({
+      repository: repo,
+      presenter,
+      tableService
+    });
+    return {
+      name: 'columnResizer',
+
+      setInitialState() {
+        return null;
+      },
+
+      properties: Properties,
+      eventHandlers: {
+        [RESIZE_STARTED]: new ResizeStartController(service).handle,
+        [RESIZE_SCROLL]: new ResizeByScrollController(service).handle,
+        [RESIZE_MOUSE]: new ResizeByMouseController(service).handle,
+        [RESIZE_ENDED]: new ResizeEndController(service).handle
+      }
+    };
+  }
+
+}

package/es/library/custom-component/applications/entities-factory/BehavioursFactory.js

@@ -30,7 +30,8 @@ class BehavioursFactory {
         name: behaviour.name,
         eventHandlers: EventHandlersFactory(newEventHandlers),
         properties: PropertiesFactory({
-          properties: behaviour.properties
+          properties: behaviour.properties,
+          componentName: ` Component "${input.name}" => behaviour "${behaviour.name}"`
         }),
         setIntialState: behaviour.setInitialState
       });

package/es/library/custom-component/applications/entities-factory/PropertiesFactory.js

@@ -18,4 +18,5 @@ export default function PropertiesFactory(_ref) {
   });
   let propertiesObject = new Properties(propertyMap, componentName);
   return propertiesObject;
+  ``;
 }

package/es/library/custom-component/applications/usecases/UpdatePropertyUseCase.js

@@ -15,12 +15,12 @@ class UpdatePropertyUseCase extends AbstractUseCase {
     if (isUpdated) {
       let updatedProperties = component.getProperties();
       let state = component.getState();
+      presenter.render(state);
       let updatePropertyAction = component.getPropertyUpdateAction({
         currentProperties: updatedProperties,
         previousProperties: properties
       });
       eventManager.dispatch(updatePropertyAction);
-      presenter.render(state);
     }
   }
 

package/es/library/custom-component/applications/usecases/UpdateStateUseCase.js

@@ -6,9 +6,12 @@ class UpdateStateUseCase extends AbstractUseCase {
       repository,
       presenter
     } = this.dependencies;
-    let component = repository.getComponent();
+    let component = repository.getComponent(); // let preState=component.getState();
+    // console.log(`preState ${component.getName()}`,preState)
+
     component.updateState(newState);
-    let state = component.getState();
+    let state = component.getState(); // console.log(`newState ${component.getName()}`,state)
+
     presenter.render(state);
   }