@sme.up/ketchup 4.0.0 → 4.1.0

package/dist/collection/utils/kup-interact/kup-interact.js

@@ -0,0 +1,362 @@
+import interact from 'interactjs';
+import { kupDialogAttribute, kupDialogResizableClass, KupDragEffect, kupDraggableAttr, kupDraggableCellAttr, kupDraggableColumnAttr, kupDraggableRowAttr, kupDragOverAttr, kupDropEvent, } from './kup-interact-declarations';
+const dom = document.documentElement;
+/**
+ * This class handles elements as dialogs, making them resizable and movable.
+ * @module KupInteract
+ */
+export class KupInteract {
+  /**
+   * Initializes KupInteract.
+   * @param {number} zIndex - The starting z-index assigned to dialogs.
+   * @param {RectResolvable<[number, number, Interaction<keyof ActionMap>]>} restrictContainer - The container setting the restriction's boundary.
+   */
+  constructor(zIndex, restrictContainer) {
+    interact.dynamicDrop(true);
+    this.container = document.createElement('div');
+    this.container.setAttribute('kup-interact', '');
+    document.body.appendChild(this.container);
+    this.managedElements = new Set();
+    this.zIndex = zIndex ? zIndex : 200;
+    this.restrictContainer = restrictContainer ? restrictContainer : null;
+  }
+  /**
+   * Sets up a new draggable element.
+   * @param {HTMLElement} el - The draggable element.
+   * @param {Partial<DraggableOptions>} options - Options of the draggable element.
+   * @param {KupDragEventData} eventData - Property used to transfer data for the drop event. The callback is used to return information of the starting item - such as cell, column and row info.
+   * @param {KupDragEffect} effect - Visual effect of the drag action.
+   * @param {KupDragCallbacks} callbacks - Additional callbacks to invoke.
+   * @see https://interactjs.io/docs/action-options/ For more options
+   */
+  draggable(el, options, eventData, effect, callbacks) {
+    el.style.touchAction = 'none';
+    el.style.userSelect = 'none';
+    if (!options) {
+      options = {};
+    }
+    if (!effect) {
+      effect = KupDragEffect.MOVE;
+    }
+    options.listeners = {
+      move(e) {
+        if (callbacks && callbacks.move) {
+          callbacks.move(e);
+        }
+        if (effect.toLowerCase() !== KupDragEffect.NONE) {
+          const draggable = e.target;
+          const ghostImage = draggable.kupDragDrop &&
+            draggable.kupDragDrop.ghostImage
+            ? draggable.kupDragDrop.ghostImage
+            : e.target;
+          const oldTransform = ghostImage.style.transform;
+          let x = parseFloat(ghostImage.getAttribute('data-x')) || 0;
+          let y = parseFloat(ghostImage.getAttribute('data-y')) || 0;
+          x = x + e.dx;
+          y = y + e.dy;
+          ghostImage.style.transform = `translate(${x}px, ${y}px)`;
+          if (dom.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
+            ghostImage.setAttribute('data-x', x.toString());
+            ghostImage.setAttribute('data-y', y.toString());
+          }
+        }
+      },
+      start(e) {
+        if (callbacks && callbacks.start) {
+          callbacks.start(e);
+        }
+        const draggable = e.target;
+        const draggableDetails = eventData && eventData.callback
+          ? eventData.callback(e)
+          : {};
+        draggable.kupDragDrop = draggableDetails;
+        draggable.setAttribute(kupDraggableAttr, '');
+        if (draggableDetails.cell) {
+          draggable.setAttribute(kupDraggableCellAttr, '');
+        }
+        if (draggableDetails.column) {
+          draggable.setAttribute(kupDraggableColumnAttr, '');
+        }
+        if (draggableDetails.row) {
+          draggable.setAttribute(kupDraggableRowAttr, '');
+        }
+        let ghostImage = null;
+        switch (effect) {
+          case KupDragEffect.BADGE:
+            ghostImage = document.createElement('kup-badge');
+            if (draggable.kupDragDrop.multiple) {
+              ghostImage.text = draggable.kupDragDrop.selectedRows
+                ? draggable.kupDragDrop.selectedRows.length.toString()
+                : '0';
+            }
+            else {
+              ghostImage.text = '1';
+            }
+            ghostImage.style.left =
+              e.clientX - ghostImage.clientWidth / 2 + 'px';
+            ghostImage.style.pointerEvents = 'none';
+            ghostImage.style.position = 'fixed';
+            ghostImage.style.top =
+              e.clientY - ghostImage.clientHeight / 2 + 'px';
+            ghostImage.style.transition = 'none';
+            ghostImage.style.zIndex =
+              'calc(var(--kup-navbar-zindex) + 1)';
+            dom.ketchup.interact.container.appendChild(ghostImage);
+            draggable.kupDragDrop.ghostImage = ghostImage;
+            break;
+          case KupDragEffect.CLONE:
+            ghostImage = draggable.cloneNode(true);
+            ghostImage.style.cursor = 'grabbing';
+            ghostImage.style.height = draggable.clientHeight + 'px';
+            ghostImage.style.left =
+              e.clientX - draggable.clientWidth / 2 + 'px';
+            ghostImage.style.opacity = '0.75';
+            ghostImage.style.position = 'fixed';
+            ghostImage.style.top =
+              e.clientY - draggable.clientHeight / 2 + 'px';
+            ghostImage.style.width = draggable.clientWidth + 'px';
+            ghostImage.style.zIndex =
+              'calc(var(--kup-navbar-zindex) + 1)';
+            if (draggable.parentElement) {
+              draggable.parentElement.appendChild(ghostImage);
+            }
+            else {
+              dom.ketchup.interact.container.appendChild(ghostImage);
+            }
+            draggable.kupDragDrop.ghostImage = ghostImage;
+            break;
+        }
+      },
+      end(e) {
+        if (callbacks && callbacks.end) {
+          callbacks.end(e);
+        }
+        const draggable = e.target;
+        const ghostImage = draggable.kupDragDrop
+          ? draggable.kupDragDrop.ghostImage
+          : null;
+        if (ghostImage) {
+          ghostImage.remove();
+        }
+        draggable.removeAttribute(kupDraggableAttr);
+        draggable.removeAttribute(kupDraggableCellAttr);
+        draggable.removeAttribute(kupDraggableColumnAttr);
+        draggable.removeAttribute(kupDraggableRowAttr);
+      },
+    };
+    interact(el).draggable(options);
+    this.managedElements.add(el);
+  }
+  /**
+   * Sets up a new dropzone.
+   * @param {HTMLElement} el - The dropzone element.
+   * @param {DropzoneOptions} options - Options of the dropzone.
+   * @param {KupDropEventData} eventData - Argument used to transfer data for the drop event. The callback is used to return information of the receiving item - such as cell, column and row info.
+   * @param {KupDropCallbacks} callbacks - Additional callbacks to invoke.
+   * @see https://interactjs.io/docs/action-options/ For more options
+   */
+  dropzone(el, options, eventData, callbacks) {
+    if (!options) {
+      options = {};
+    }
+    options.listeners = {
+      drop(e) {
+        if (callbacks && callbacks.drop) {
+          callbacks.drop(e);
+        }
+        if (eventData) {
+          const draggableDetails = e.relatedTarget.kupDragDrop ||
+            {};
+          const dropzoneDetails = eventData.callback
+            ? eventData.callback()
+            : {};
+          const ketchupDropEvent = new CustomEvent(kupDropEvent, {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              dataType: eventData.type,
+              sourceElement: {
+                id: draggableDetails.id
+                  ? draggableDetails.id
+                  : '',
+                row: draggableDetails.row
+                  ? draggableDetails.row
+                  : null,
+                selectedRows: draggableDetails.selectedRows
+                  ? draggableDetails.selectedRows
+                  : null,
+                cell: draggableDetails.cell
+                  ? draggableDetails.cell
+                  : null,
+                column: draggableDetails.column
+                  ? draggableDetails.column
+                  : null,
+              },
+              targetElement: {
+                id: dropzoneDetails.id
+                  ? dropzoneDetails.id
+                  : '',
+                row: dropzoneDetails.row
+                  ? dropzoneDetails.row
+                  : null,
+                cell: dropzoneDetails.cell
+                  ? dropzoneDetails.cell
+                  : null,
+                column: dropzoneDetails.column
+                  ? dropzoneDetails.column
+                  : null,
+              },
+            },
+          });
+          e.currentTarget.removeAttribute(kupDragOverAttr);
+          eventData.dispatcher.dispatchEvent(ketchupDropEvent);
+        }
+        e.currentTarget.removeAttribute(kupDragOverAttr);
+      },
+      enter(e) {
+        if (callbacks && callbacks.enter) {
+          callbacks.enter(e);
+        }
+        e.currentTarget.setAttribute(kupDragOverAttr, '');
+      },
+      leave(e) {
+        if (callbacks && callbacks.leave) {
+          callbacks.leave(e);
+        }
+        e.currentTarget.removeAttribute(kupDragOverAttr);
+      },
+    };
+    interact(el).dropzone(options);
+    this.managedElements.add(el);
+  }
+  /**
+   * Sets up a new resizable element.
+   * @param {HTMLElement} el - The resizable element.
+   * @param {Partial<ResizableOptions>} options - Options of the resize action.
+   * @param {KupResizeCallbacks} callbacks - Additional callbacks to invoke.
+   * @param {boolean} moveOnResize - When true, the element will be moved when resizing in order to keep its position.
+   * @see https://interactjs.io/docs/action-options/ For more options
+   */
+  resizable(el, options, callbacks, moveOnResize) {
+    if (!options) {
+      options = {};
+    }
+    options.listeners = {
+      move(e) {
+        if (callbacks && callbacks.move) {
+          callbacks.move(e);
+        }
+        if (moveOnResize) {
+          const el = e.target;
+          const oldTransform = e.target.style.transform;
+          let x = parseFloat(el.getAttribute('data-x')) || 0;
+          let y = parseFloat(el.getAttribute('data-y')) || 0;
+          el.style.width = e.rect.width + 'px';
+          el.style.height = e.rect.height + 'px';
+          x += e.deltaRect.left;
+          y += e.deltaRect.top;
+          el.style.transform = 'translate(' + x + 'px,' + y + 'px)';
+          if (dom.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
+            el.setAttribute('data-x', x.toString());
+            el.setAttribute('data-y', y.toString());
+          }
+        }
+      },
+    };
+    interact(el).resizable(options);
+    this.managedElements.add(el);
+  }
+  /**
+   * Adds a new interact.js event listener to the given argument.
+   * @param {HTMLElement} el - The element on which the event listener will be added.
+   * @param {KupPointerEventTypes} event - Supported events.
+   * @param {KupResizeCallbacks} callback - Callback to invoke when the event fires.
+   */
+  on(el, event, callback) {
+    interact(el).on(event, callback);
+    this.managedElements.add(el);
+  }
+  /**
+   * This method checks whether the element is breaking the viewport boundaries.
+   * @param {HTMLElement} el - Element to check.
+   * @param {string} oldTransform - Previously set transform, used to rollback in case element breaks viewport boundaries.
+   * @param {Point} delta - X and Y delta values of the last movement.
+   */
+  isInViewport(el, oldTransform, delta) {
+    const style = window.getComputedStyle(el);
+    const isFixed = !!(style.position === 'fixed');
+    const rect = el.getBoundingClientRect();
+    if (rect.left < 0 ||
+      rect.top < 0 ||
+      (isFixed && rect.right > window.innerWidth && delta.x >= 0) ||
+      (isFixed && rect.bottom > window.innerHeight && delta.y >= 0)) {
+      el.style.transform = oldTransform;
+      return false;
+    }
+    return true;
+  }
+  /**
+   * This method treats the given element as a dialog, by activating moving-on-drag and, optionally, its resize.
+   * @param {HTMLElement} el - Dialog element.
+   * @param {HTMLElement} handleEl - Element that must be dragged in order to trigger movement. When not provided, dragging anywhere on "el" will move it.
+   * @param {boolean} unresizable - When true, the dialog can't be resized.
+   * @param {RectResolvable<[number, number, Interaction<keyof ActionMap>]>} restrictContainer - When present, it will set the constraint of "el": it can't be moved outside this container.
+   */
+  dialogify(el, handleEl, unresizable, restrictContainer) {
+    el.setAttribute(kupDialogAttribute, '');
+    el.style.zIndex = (this.zIndex++).toString();
+    const callbacks = {
+      start(e) {
+        const el = e.currentTarget;
+        el.style.zIndex = (dom.ketchup.interact.zIndex++).toString();
+      },
+    };
+    this.draggable(el, {
+      allowFrom: handleEl ? handleEl : null,
+      modifiers: [
+        interact.modifiers.restrictRect({
+          restriction: restrictContainer
+            ? restrictContainer
+            : dom.ketchup.interact.restrictContainer,
+          endOnly: true,
+        }),
+      ],
+    }, null, KupDragEffect.MOVE, callbacks);
+    if (!unresizable) {
+      el.classList.add(kupDialogResizableClass);
+      this.resizable(el, {
+        edges: {
+          left: true,
+          right: true,
+          bottom: true,
+          top: false,
+        },
+        modifiers: [
+          interact.modifiers.restrictSize({
+            min: { width: 100, height: 100 },
+          }),
+        ],
+      }, null, true);
+    }
+  }
+  /**
+   * Removes the elements from the MoveOnDrag class watchlist.
+   * @param {HTMLElement[]} elements - Elements to remove.
+   */
+  unregister(elements) {
+    if (this.managedElements) {
+      for (let index = 0; index < elements.length; index++) {
+        this.managedElements.delete(elements[index]);
+        interact(elements[index]).unset();
+      }
+    }
+  }
+  /**
+   * Returns whether an element was previously registered or not.
+   * @param {HTMLElement} el - Element to test.
+   * @returns {boolean} True if the element was registered.
+   */
+  isRegistered(el) {
+    return !this.managedElements ? false : this.managedElements.has(el);
+  }
+}

package/dist/collection/utils/kup-manager/kup-manager.js

@@ -1,6 +1,6 @@
 import { KupDebug } from '../kup-debug/kup-debug';
-import { KupDialog } from '../kup-dialog/kup-dialog';
 import { KupDynamicPosition } from '../kup-dynamic-position/kup-dynamic-position';
+import { KupInteract } from '../kup-interact/kup-interact';
 import { KupLanguage } from '../kup-language/kup-language';
 import { KupObjects } from '../kup-objects/kup-objects';
 import { KupScrollOnHover } from '../kup-scroll-on-hover/kup-scroll-on-hover';
@@ -21,11 +21,11 @@ export class KupManager {
    * Initializes KupManager.
    */
   constructor(overrides) {
-    let datesLocale = null, debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null;
+    let datesLocale = null, debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogRestrictContainer = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null;
     if (overrides) {
       const dates = overrides.dates;
       const debug = overrides.debug;
-      const dialog = overrides.dialog;
+      const interact = overrides.interact;
       const language = overrides.language;
       const objects = overrides.objects;
       const scrollOnHover = overrides.scrollOnHover;
@@ -38,8 +38,11 @@ export class KupManager {
         debugAutoprint = debug.autoPrint ? debug.autoPrint : null;
         debugLogLimit = debug.logLimit ? debug.logLimit : null;
       }
-      if (dialog) {
-        dialogZIndex = dialog.zIndex ? dialog.zIndex : null;
+      if (interact) {
+        dialogRestrictContainer = interact.restrictContainer
+          ? dialogRestrictContainer
+          : null;
+        dialogZIndex = interact.zIndex ? interact.zIndex : null;
       }
       if (language) {
         languageList = language.list ? language.list : null;
@@ -63,8 +66,8 @@ export class KupManager {
     }
     this.dates = new KupDates(datesLocale);
     this.debug = new KupDebug(debugActive, debugAutoprint, debugLogLimit);
-    this.dialog = new KupDialog(dialogZIndex);
     this.dynamicPosition = new KupDynamicPosition();
+    this.interact = new KupInteract(dialogZIndex, dialogRestrictContainer);
     this.language = new KupLanguage(languageList, languageName);
     this.magicBox = null;
     this.overrides = overrides ? overrides : null;
@@ -89,6 +92,7 @@ export class KupManager {
     this.utilities = {
       lastPointerDownPath: null,
       lastPointerDownString: null,
+      pointerDownCallbacks: new Set(),
     };
     this.theme = new KupTheme(themeList, themeName);
     this.toolbar = new KupToolbar();
@@ -97,6 +101,14 @@ export class KupManager {
       const lastString = paths[0].innerText || paths[0].value;
       this.utilities.lastPointerDownPath = paths;
       this.utilities.lastPointerDownString = lastString;
+      this.utilities.pointerDownCallbacks.forEach((obj) => {
+        if (obj.el.isConnected && !paths.includes(obj.el)) {
+          obj.cb();
+          if (obj.onlyOnce) {
+            this.utilities.pointerDownCallbacks.delete(obj);
+          }
+        }
+      });
       if (lastString) {
         document.dispatchEvent(new CustomEvent('kup-manager-stringfinder', {
           bubbles: true,

package/dist/collection/utils/kup-objects/kup-objects.js

@@ -48,42 +48,18 @@ export class KupObjects {
    * @returns {boolean} True when the object has extra columns.
    */
   canObjHaveExtraColumns(obj) {
-    if (!obj)
-      return false;
-    if (!obj.t ||
-      obj.t.trim() == '' ||
-      obj.t.trim() == '**') {
+    if (this.isEmptyKupObj(obj)) {
       return false;
     }
-    return (!this.isBar(obj) &&
-      !this.isButton(obj) &&
-      !this.isCheckbox(obj) &&
-      !this.isIcon(obj) &&
-      !this.isImage(obj) &&
-      !this.isLink(obj) &&
-      !this.isProgressBar(obj) &&
-      !this.isRadio(obj) &&
-      !this.isVoCodver(obj) &&
-      !this.isChart(obj));
-  }
-  /**
-   * Checks whether the object can have a related tooltip or not.
-   * @param {KupObj} obj - Object to check.
-   * @returns {boolean} True when the object can have a related tooltip.
-   */
-  hasTooltip(obj) {
-    if (!obj)
-      return false;
-    if (obj.t == null || obj.t.trim() == '')
+    if (obj.t.trim() == '**') {
       return false;
+    }
     return (!this.isBar(obj) &&
       !this.isButton(obj) &&
       !this.isCheckbox(obj) &&
       !this.isIcon(obj) &&
       !this.isImage(obj) &&
       !this.isLink(obj) &&
-      !this.isNumber(obj) &&
-      !this.isPercentage(obj) &&
       !this.isProgressBar(obj) &&
       !this.isRadio(obj) &&
       !this.isVoCodver(obj) &&
@@ -310,10 +286,12 @@ export class KupObjects {
    * @param {KupObj} obj - Object to check.
    * @returns {boolean} True when the object is null or empty.
    */
-  isEmptySmeupObject(obj) {
+  isEmptyKupObj(obj) {
     if (!obj)
       return true;
-    return obj.t.trim() == '' && obj.p.trim() == '' && obj.k.trim() == '';
+    return ((!obj.t || obj.t.trim() == '') &&
+      (!obj.p || obj.p.trim() == '') &&
+      (!obj.k || obj.k.trim() == ''));
   }
   /**
    * Parses a date depending on the object's type.