cx 25.11.1 → 26.0.1

package/src/widgets/drag-drop/ops.tsx

@@ -0,0 +1,422 @@
+/** @jsxImportSource react */
+import { getCursorPos, captureMouseOrTouch, CursorPosition } from "../overlay/captureMouse";
+import { startAppLoop } from "../../ui/app/startAppLoop";
+import { View } from "../../data/View";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+
+export interface DragEvent {
+   type: "dragstart" | "dragmove" | "dragdrop";
+   event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent;
+   cursor: CursorPosition;
+   source: {
+      width: number;
+      height: number;
+      margin: string[];
+      data?: any;
+      store: View;
+      [other: string]: any;
+   };
+   dataTransfer?: DataTransfer;
+   result?: any;
+}
+
+export interface DragDropOptions {
+   sourceEl?: Element | null;
+   clone?: any;
+   source?: any;
+}
+
+export interface DragDropOperationContext {
+   test: any;
+}
+
+export type DragEventHandler = (e: DragEvent) => void;
+
+export interface IDropZone {
+   onDropTest?: (e: DragEvent) => boolean;
+   onDragStart?: DragEventHandler;
+   onDragAway?: DragEventHandler;
+   onDragNear?: DragEventHandler;
+   onDragEnd?: DragEventHandler;
+   onDragMeasure?: (
+      e: DragEvent,
+      operation: DragDropOperationContext,
+   ) => { over: number | false; near: number | boolean } | false | undefined;
+   onDragLeave?: DragEventHandler;
+   onDragOver?: (e: DragEvent, operation: DragDropOperationContext) => void;
+   onDragEnter?: DragEventHandler;
+   onDrop?: DragEventHandler;
+   onGetVScrollParent?: (operation: DragDropOperationContext) => Element | null;
+   onGetHScrollParent?: (operation: DragDropOperationContext) => Element | null;
+}
+
+export type UnregisterFunction = () => void;
+
+import { getScrollerBoundingClientRect } from "../../util/getScrollerBoundingClientRect";
+import { isNumber } from "../../util/isNumber";
+import { isObject } from "../../util/isObject";
+import { isString } from "../../util/isString";
+import { ZIndexManager } from "../../ui/ZIndexManager";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { VDOM } from "../../ui/VDOM";
+import { Container } from "../../ui/Container";
+import { Console } from "../../util";
+import { WidgetConfig } from "../../ui";
+
+interface Puppet {
+   deltaX: number;
+   deltaY: number;
+   el: HTMLDivElement;
+   clone: any;
+   source: any;
+   onDragEnd?: (e?: DragEvent) => void;
+   stop?: () => void;
+}
+
+let dropZones: IDropZone[] = [];
+let dragStartedZones: WeakMap<IDropZone, boolean> | null = null;
+let activeZone: IDropZone | null = null;
+let nearZones: WeakMap<IDropZone, boolean> | null = null;
+let puppet: Puppet | null = null;
+let scrollTimer: number | null = null;
+let vscrollParent: Element | null = null;
+let hscrollParent: Element | null = null;
+
+export function registerDropZone(dropZone: IDropZone): UnregisterFunction {
+   dropZones.push(dropZone);
+   return () => {
+      let index = dropZones.indexOf(dropZone);
+      if (index !== -1) dropZones.splice(index, 1);
+   };
+}
+
+export function initiateDragDrop(
+   e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
+   options: DragDropOptions = {},
+   onDragEnd?: (e?: DragEvent) => void,
+): void {
+   if (puppet) {
+      //last operation didn't finish properly
+      notifyDragDrop(e);
+   }
+
+   let sourceEl = options.sourceEl || (e.currentTarget as Element);
+   let sourceBounds = getTopLevelBoundingClientRect(sourceEl);
+   let cursor = getCursorPos(e);
+
+   let clone = {
+      ...options.clone,
+   };
+
+   let cloneEl = document.createElement("div");
+   cloneEl.classList.add("cxb-dragclone");
+   if (isString(clone["class"])) cloneEl.classList.add(clone["class"]);
+   if (isObject(clone.style)) Object.assign(cloneEl.style, clone.style);
+   cloneEl.style.left = `-1000px`;
+   cloneEl.style.top = `-1000px`;
+
+   if (clone.matchSize || clone.matchWidth) cloneEl.style.width = `${Math.ceil(sourceBounds.width)}px`;
+
+   if (clone.matchSize || clone.matchHeight) cloneEl.style.height = `${Math.ceil(sourceBounds.height)}px`;
+
+   cloneEl.style.zIndex = String(ZIndexManager.next() + 1000);
+
+   if (clone.cloneContent) {
+      cloneEl.appendChild(sourceEl.cloneNode(true));
+   }
+
+   document.body.appendChild(cloneEl);
+
+   let styles = getComputedStyle(sourceEl);
+
+   let deltaX = clone.matchCursorOffset ? cursor.clientX - sourceBounds.left : -3;
+   let deltaY = clone.matchCursorOffset ? cursor.clientY - sourceBounds.top : -3;
+
+   let source = {
+      ...options.source,
+      width: sourceBounds.width,
+      height: sourceBounds.height,
+      deltaX,
+      deltaY,
+      margin: [
+         styles.getPropertyValue("margin-top"),
+         styles.getPropertyValue("margin-right"),
+         styles.getPropertyValue("margin-bottom"),
+         styles.getPropertyValue("margin-left"),
+      ],
+   };
+
+   puppet = {
+      deltaX,
+      deltaY,
+      el: cloneEl,
+      clone,
+      source,
+      onDragEnd,
+   };
+
+   if (clone.widget && clone.store && !clone.cloneContent) {
+      let content = { $type: ContextWrap, value: { disabled: true }, children: clone.widget } as WidgetConfig;
+      puppet.stop = startAppLoop(cloneEl, clone.store, content, {
+         removeParentDOMElement: true,
+      });
+   } else {
+      puppet.stop = () => {
+         document.body.removeChild(cloneEl);
+      };
+   }
+
+   let event = getDragEvent(e, "dragstart");
+
+   dragStartedZones = new WeakMap();
+
+   dropZones.forEach((zone) => {
+      if (zone.onDropTest)
+         try {
+            if (!zone.onDropTest(event)) return;
+         } catch (err) {
+            Console.warn("Drop zone onDropTest failed. Error: ", err, zone);
+            return;
+         }
+
+      if (zone.onDragStart) zone.onDragStart(event);
+
+      dragStartedZones!.set(zone, true);
+   });
+
+   notifyDragMove(e, null);
+
+   captureMouseOrTouch(e, notifyDragMove, notifyDragDrop);
+}
+
+function notifyDragMove(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent, _captureData: any): void {
+   let event = getDragEvent(e, "dragmove");
+   let over: IDropZone | null = null,
+      overTest: any = null,
+      best: number | null = null;
+
+   let near: IDropZone[] = [],
+      away: IDropZone[] = [];
+
+   for (let zone of dropZones) {
+      let test;
+      try {
+         test = zone.onDropTest && zone.onDropTest(event);
+         if (!test) continue;
+      } catch (err) {
+         //the problem is already reported, so here we just swallow the bug to avoid spammming the console too much
+         continue;
+      }
+
+      if (zone.onDragMeasure) {
+         let result = zone.onDragMeasure(event, { test });
+         if (!result) continue;
+
+         if (result.near) near.push(zone);
+         else away.push(zone);
+
+         if (isNumber(result.over) && (best == null || result.over < best)) {
+            over = zone;
+            overTest = test;
+            best = result.over;
+         }
+      }
+   }
+
+   let newNear = new WeakMap<IDropZone, boolean>();
+
+   if (nearZones != null) {
+      away.forEach((z) => {
+         if (z.onDragAway && nearZones!.has(z)) z.onDragAway(event);
+      });
+   }
+
+   near.forEach((z) => {
+      if (z.onDragNear && z != over && (nearZones == null || !nearZones.has(z))) {
+         z.onDragNear(event);
+         newNear.set(z, true);
+      }
+   });
+
+   nearZones = newNear;
+
+   if (over != activeZone) {
+      vscrollParent = null;
+      hscrollParent = null;
+   }
+
+   if (over != activeZone && activeZone && activeZone.onDragLeave) activeZone.onDragLeave(event);
+
+   if (over != activeZone && over) {
+      if (over.onDragEnter) over.onDragEnter(event);
+
+      vscrollParent = (over.onGetVScrollParent && over.onGetVScrollParent({ test: overTest })) || null;
+      hscrollParent = (over.onGetHScrollParent && over.onGetHScrollParent({ test: overTest })) || null;
+   }
+
+   activeZone = over;
+
+   if (over && over.onDragOver) {
+      over.onDragOver(event, { test: overTest });
+   }
+
+   //do it last to avoid forced redraw if nothing changed
+   let cursor = getCursorPos(e);
+   puppet!.el.style.left = `${cursor.clientX - puppet!.deltaX}px`;
+   puppet!.el.style.top = `${cursor.clientY - puppet!.deltaY}px`;
+
+   if (vscrollParent || hscrollParent) {
+      let scrollX = 0,
+         scrollY = 0;
+      let vscrollBounds = vscrollParent && getScrollerBoundingClientRect(vscrollParent, true);
+      let hscrollBounds =
+         hscrollParent == vscrollParent
+            ? vscrollBounds
+            : hscrollParent && getScrollerBoundingClientRect(hscrollParent, true);
+
+      if (vscrollBounds) {
+         if (cursor.clientY < vscrollBounds.top + 20) scrollY = -1;
+         else if (cursor.clientY >= vscrollBounds.bottom - 20) scrollY = 1;
+      }
+
+      if (hscrollBounds) {
+         if (cursor.clientX < hscrollBounds.left + 20) scrollX = -1;
+         else if (cursor.clientX >= hscrollBounds.right - 20) scrollX = 1;
+      }
+
+      if (scrollY || scrollX) {
+         if (!scrollTimer) {
+            let cb = () => {
+               if (scrollY) {
+                  let current = vscrollParent!.scrollTop;
+                  let next = Math.min(
+                     vscrollParent!.scrollHeight,
+                     Math.max(0, current + (scrollY * 5 * Math.min(200, Math.max(50, event.source.height))) / 60),
+                  ); //60 FPS
+                  vscrollParent!.scrollTop = next;
+               }
+               if (scrollX) {
+                  let current = hscrollParent!.scrollLeft;
+                  let next = Math.min(
+                     hscrollParent!.scrollWidth,
+                     Math.max(0, current + (scrollX * 5 * Math.min(200, Math.max(50, event.source.width))) / 60),
+                  ); //60 FPS
+                  hscrollParent!.scrollLeft = next;
+               }
+               scrollTimer = requestAnimationFrame(cb);
+            };
+            scrollTimer = requestAnimationFrame(cb);
+         }
+      } else {
+         clearScrollTimer();
+      }
+   } else clearScrollTimer();
+}
+
+function clearScrollTimer() {
+   if (scrollTimer) {
+      cancelAnimationFrame(scrollTimer);
+      scrollTimer = null;
+   }
+}
+
+function notifyDragDrop(e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent): void {
+   clearScrollTimer();
+
+   let event = getDragEvent(e, "dragdrop");
+
+   if (puppet!.stop) puppet!.stop();
+
+   if (activeZone && activeZone.onDrop) event.result = activeZone.onDrop(event);
+
+   dropZones.forEach((zone) => {
+      if (nearZones != null && zone.onDragAway && nearZones.has(zone)) zone.onDragAway(event);
+
+      if (!dragStartedZones!.has(zone)) return;
+
+      if (zone.onDragEnd) zone.onDragEnd(event);
+   });
+
+   if (puppet!.onDragEnd) puppet!.onDragEnd(event);
+
+   nearZones = null;
+   activeZone = null;
+   puppet = null;
+   dragStartedZones = null;
+}
+
+function getDragEvent(
+   event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
+   type: DragEvent["type"],
+): DragEvent {
+   return {
+      type: type,
+      event,
+      cursor: getCursorPos(event),
+      source: puppet!.source,
+   };
+}
+
+interface DragCandidate {
+   el?: EventTarget | null;
+   start?: CursorPosition;
+   timeStamp?: number;
+}
+
+let dragCandidate: DragCandidate = {};
+
+export function ddMouseDown(e: React.MouseEvent | React.TouchEvent): void {
+   //do not allow that the same event is processed by multiple drag sources
+   //the first (top-level) source should be a drag-candidate
+   if (dragCandidate.timeStamp != null && e.timeStamp <= dragCandidate.timeStamp) return;
+
+   dragCandidate = {
+      el: e.currentTarget,
+      start: { ...getCursorPos(e) },
+      timeStamp: e.timeStamp,
+   };
+}
+
+export function ddMouseUp(): void {
+   dragCandidate = {};
+}
+
+export function ddDetect(e: MouseEvent | TouchEvent | React.TouchEvent | React.MouseEvent): void | true {
+   let cursor = getCursorPos(e);
+   if (
+      dragCandidate.start &&
+      e.currentTarget == dragCandidate.el &&
+      Math.abs(cursor.clientX - dragCandidate.start.clientX) + Math.abs(cursor.clientY - dragCandidate.start.clientY) >=
+         2
+   ) {
+      dragCandidate = {};
+      return true;
+   }
+}
+
+let lastDragHandle: any;
+
+export function ddHandle(e: React.SyntheticEvent<any>): void {
+   lastDragHandle = e.currentTarget;
+}
+
+export function isDragHandleEvent(e: React.SyntheticEvent<any>): boolean {
+   return lastDragHandle && (e.target == lastDragHandle || lastDragHandle.contains(e.target));
+}
+
+export const DragDropContext = (
+   VDOM.createContext ? VDOM.createContext({ disabled: false }) : ({ children }: { children: any }) => children
+) as React.Context<{ disabled: boolean }>;
+
+class ContextWrap extends Container {
+   declare value: any;
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      return (
+         <DragDropContext.Provider value={this.value} key={key}>
+            {this.renderChildren(context, instance)}
+         </DragDropContext.Provider>
+      );
+   }
+}

package/src/widgets/drag-drop/variables.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+
+
 $cx-default-dragclone-background-color: rgba(white, 0.9) !default;
 $cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
 
@@ -7,6 +10,6 @@ $cx-dragclone-style: (
    opacity: 0.9
 ) !default;
 
-$cx-dependencies: map-merge($cx-dependencies, (
+$cx-dependencies: map.merge($cx-dependencies, (
    'cx/widgets/DragSource': 'cx/widgets/DragClone'
 ))

package/src/widgets/enableAllInternalDependencies.ts

@@ -0,0 +1,11 @@
+import {enableTooltips} from './overlay/Tooltip';
+import {enableMsgBoxAlerts} from './overlay/MsgBox';
+import {enableCultureSensitiveFormatting} from '../ui/Format';
+import {enableFatArrowExpansion} from '../data/enableFatArrowExpansion';
+
+export function enableAllInternalDependencies(): void {
+   enableTooltips();
+   enableMsgBoxAlerts();
+   enableCultureSensitiveFormatting();
+   enableFatArrowExpansion();
+}

package/src/widgets/form/Calendar.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:color";
+
 @mixin cx-calendar(
    $name: "calendar",
    $state-style-map: $cx-calendar-state-style-map,
@@ -5,10 +8,10 @@
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}calendar {
       display: inline-block;
@@ -116,7 +119,7 @@
       &.#{$state}disabled {
          background-color: transparent;
          border-color: transparent;
-         color: darken(#fff, 18);
+         color: color.adjust(#fff, $lightness: -18%);
          pointer-events: none;
          opacity: 0.9;
       }