feat(ui5-tabcontainer, ui5-list): add events for reordering items by mouse (#8265)

BGSOFUIRODOPI-3189

Author: dimovpetar

packages/base/src/types/MovePlacement.ts

@@ -0,0 +1,23 @@
+/**
+ * Placements of a moved element relative to a target element.
+ *
+ * @public
+ */
+enum MovePlacement {
+/**
+ * @public
+ */
+On = "On",
+
+/**
+ * @public
+ */
+Before = "Before",
+
+/**
+ * @public
+ */
+After = "After",
+}
+
+export default MovePlacement;

packages/base/src/types/Orientation.ts

@@ -0,0 +1,18 @@
+/**
+ * Determines the orientation of an operation.
+ *
+ * @private
+ */
+enum Orientation {
+/**
+ * @private
+ */
+Vertical = "Vertical",
+
+/**
+ * @private
+ */
+Horizontal = "Horizontal",
+}
+
+export default Orientation;

packages/base/src/util/dragAndDrop/DragRegistry.ts

@@ -0,0 +1,92 @@
+import type UI5Element from "../../UI5Element";
+
+let draggedElement: HTMLElement | null = null;
+let globalHandlersAttached = false;
+const subscribers = new Set<UI5Element>();
+const selfManagedDragAreas = new Set<HTMLElement | ShadowRoot>();
+
+const ondragstart = (e: DragEvent) => {
+if (!e.dataTransfer || !(e.target instanceof HTMLElement)) {
+return;
+}
+
+e.dataTransfer.dropEffect = "move";
+e.dataTransfer.effectAllowed = "move";
+
+if (!selfManagedDragAreas.has(e.target)) {
+draggedElement = e.target;
+}
+};
+
+const ondragend = () => {
+draggedElement = null;
+};
+
+const ondrop = () => {
+draggedElement = null;
+};
+
+const setDraggedElement = (element: HTMLElement | null) => {
+draggedElement = element;
+};
+type SetDraggedElementFunction = typeof setDraggedElement;
+
+const getDraggedElement = () => {
+return draggedElement;
+};
+
+const attachGlobalHandlers = () => {
+if (globalHandlersAttached) {
+return;
+}
+
+document.body.addEventListener("dragstart", ondragstart);
+document.body.addEventListener("dragend", ondragend);
+document.body.addEventListener("drop", ondrop);
+};
+
+const detachGlobalHandlers = () => {
+document.body.removeEventListener("dragstart", ondragstart);
+document.body.removeEventListener("dragend", ondragend);
+document.body.removeEventListener("drop", ondrop);
+globalHandlersAttached = false;
+};
+
+const subscribe = (subscriber: UI5Element) => {
+subscribers.add(subscriber);
+
+if (!globalHandlersAttached) {
+attachGlobalHandlers();
+}
+};
+
+const unsubscribe = (subscriber: UI5Element) => {
+subscribers.delete(subscriber);
+
+if (subscribers.size === 0 && globalHandlersAttached) {
+detachGlobalHandlers();
+}
+};
+
+const addSelfManagedArea = (area: HTMLElement | ShadowRoot) => {
+selfManagedDragAreas.add(area);
+
+return setDraggedElement;
+};
+
+const removeSelfManagedArea = (area: HTMLElement | ShadowRoot) => {
+selfManagedDragAreas.delete(area);
+};
+
+const DragRegistry = {
+subscribe,
+unsubscribe,
+addSelfManagedArea,
+removeSelfManagedArea,
+getDraggedElement,
+};
+
+export default DragRegistry;
+export type {
+SetDraggedElementFunction,
+};

packages/base/src/util/dragAndDrop/findClosestPosition.ts

@@ -0,0 +1,77 @@
+import MovePlacement from "../../types/MovePlacement.js";
+import Orientation from "../../types/Orientation.js";
+
+const closestPlacement = (point: number, beforePoint: number, centerPoint: number, afterPoint: number) => {
+const distToBeforePoint = Math.abs(point - beforePoint);
+const distToCenterPoint = Math.abs(point - centerPoint);
+const distToAfterPoint = Math.abs(point - afterPoint);
+const closestPoint = Math.min(
+distToBeforePoint,
+distToCenterPoint,
+distToAfterPoint,
+);
+let placements: Array<MovePlacement> = [];
+
+switch (closestPoint) {
+case distToBeforePoint:
+placements = [MovePlacement.Before];
+break;
+case distToCenterPoint:
+placements = [MovePlacement.On, distToBeforePoint < distToAfterPoint ? MovePlacement.Before : MovePlacement.After];
+break;
+case distToAfterPoint:
+placements = [MovePlacement.After];
+break;
+}
+
+return placements;
+};
+
+const findClosestPosition = (elements: Array<HTMLElement>, point: number, layoutOrientation: Orientation) => {
+let shortestDist = Number.POSITIVE_INFINITY;
+let closestElement: HTMLElement | null = null;
+
+// determine which element is most closest to the point
+for (let i = 0; i < elements.length; i++) {
+const el = elements[i];
+const {
+left, width, top, height,
+} = el.getBoundingClientRect();
+
+let elemCenter;
+if (layoutOrientation === Orientation.Vertical) {
+elemCenter = top + height / 2;
+} else { // Horizontal
+elemCenter = left + width / 2;
+}
+
+const distanceToCenter = Math.abs(point - elemCenter);
+
+if (distanceToCenter < shortestDist) {
+shortestDist = distanceToCenter;
+closestElement = el;
+}
+}
+
+if (!closestElement) {
+return null;
+}
+
+const {
+width, height, left, right, top, bottom,
+} = closestElement.getBoundingClientRect();
+let placements;
+
+if (layoutOrientation === Orientation.Vertical) {
+placements = closestPlacement(point, top, top + height / 2, bottom);
+} else { // Horizontal
+placements = closestPlacement(point, left, left + width / 2, right);
+}
+
+return {
+element: closestElement,
+placements,
+};
+};
+
+export default findClosestPosition;

packages/base/src/util/dragAndDrop/longDragOverHandler.ts

@@ -0,0 +1,30 @@
+let lastTarget: HTMLElement | null = null;
+let lastTargetDragOverStart = Date.now();
+const LONG_DRAG_OVER_THRESHOLD = 300;
+
+const longDragOverHandler = (targetsSelector: string) => {
+return (target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<(arg0: DragEvent, arg1: boolean) => any>) => {
+const origHandler = descriptor.value!;
+
+descriptor.value = function handleDragOver(e: DragEvent) {
+let isLongDragOver = false;
+
+if (e.target instanceof HTMLElement) {
+const currentTarget = e.target.closest<HTMLElement>(targetsSelector);
+
+if (currentTarget === lastTarget && Date.now() - lastTargetDragOverStart >= LONG_DRAG_OVER_THRESHOLD) {
+isLongDragOver = true;
+} else if (currentTarget !== lastTarget) {
+lastTarget = currentTarget;
+lastTargetDragOverStart = Date.now();
+}
+}
+
+origHandler.apply(this, [e, isLongDragOver]);
+};
+
+return descriptor;
+};
+};
+
+export default longDragOverHandler;

packages/main/src/DropIndicator.hbs

@@ -0,0 +1 @@
+<div class="{{classes.root}}"></div>