cx 26.1.1 → 26.1.3

package/src/widgets/overlay/Window.variables.scss

@@ -1,62 +1,62 @@
-$cx-default-window-background-color: transparent !default;
-$cx-default-window-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.29) !default;
-$cx-default-window-border-radius: $cx-default-border-radius !default;
-
-//header
-$cx-default-window-header-color: null !default;
-$cx-default-window-header-background-color: rgba(246, 246, 246, 0.9) !default;
-$cx-default-window-header-padding: 10px 15px !default;
-$cx-default-window-header-font-size: 16px !default;
-
-//body
-$cx-default-window-body-padding: $cx-default-window-header-padding !default;
-$cx-default-window-body-background-color: white !default;
-
-//footer
-$cx-default-window-footer-color: null !default;
-$cx-default-window-footer-background-color: rgba(246, 246, 246, 0.9) !default;
-$cx-default-window-footer-padding: $cx-default-window-header-padding !default;
-$cx-default-window-footer-font-size: 16px !default;
-
-$cx-window-state-style-map: (
-   default: (
-      box-shadow: $cx-default-window-box-shadow,
-      background-color: $cx-default-window-background-color,
-      border-radius: $cx-default-window-border-radius,
-   ),
-   resizable: (
-      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.29),
-   ),
-) !default;
-
-$cx-window-header-state-style-map: (
-   default: (
-      color: $cx-default-window-header-color,
-      background: $cx-default-window-header-background-color,
-      padding: $cx-default-window-header-padding,
-      font-size: $cx-default-window-header-font-size,
-   ),
-   active: (),
-) !default;
-
-$cx-window-footer-state-style-map: (
-   default: (
-      background: $cx-default-window-footer-background-color,
-      padding: $cx-default-window-footer-padding,
-   ),
-) !default;
-
-$cx-window-body-state-style-map: (
-   default: (
-      background: $cx-default-window-body-background-color,
-      padding: $cx-default-window-body-padding,
-   ),
-) !default;
-
-$cx-window-mods: (
-   alert: (
-      frame: (),
-      body: (),
-      footer: (),
-   ),
-);
+$cx-default-window-background-color: transparent !default;
+$cx-default-window-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.29) !default;
+$cx-default-window-border-radius: $cx-default-border-radius !default;
+
+//header
+$cx-default-window-header-color: null !default;
+$cx-default-window-header-background-color: rgba(246, 246, 246, 0.9) !default;
+$cx-default-window-header-padding: 10px 15px !default;
+$cx-default-window-header-font-size: 16px !default;
+
+//body
+$cx-default-window-body-padding: $cx-default-window-header-padding !default;
+$cx-default-window-body-background-color: white !default;
+
+//footer
+$cx-default-window-footer-color: null !default;
+$cx-default-window-footer-background-color: rgba(246, 246, 246, 0.9) !default;
+$cx-default-window-footer-padding: $cx-default-window-header-padding !default;
+$cx-default-window-footer-font-size: 16px !default;
+
+$cx-window-state-style-map: (
+   default: (
+      box-shadow: $cx-default-window-box-shadow,
+      background-color: $cx-default-window-background-color,
+      border-radius: $cx-default-window-border-radius,
+   ),
+   resizable: (
+      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.29),
+   ),
+) !default;
+
+$cx-window-header-state-style-map: (
+   default: (
+      color: $cx-default-window-header-color,
+      background: $cx-default-window-header-background-color,
+      padding: $cx-default-window-header-padding,
+      font-size: $cx-default-window-header-font-size,
+   ),
+   active: (),
+) !default;
+
+$cx-window-footer-state-style-map: (
+   default: (
+      background: $cx-default-window-footer-background-color,
+      padding: $cx-default-window-footer-padding,
+   ),
+) !default;
+
+$cx-window-body-state-style-map: (
+   default: (
+      background: $cx-default-window-body-background-color,
+      padding: $cx-default-window-body-padding,
+   ),
+) !default;
+
+$cx-window-mods: (
+   alert: (
+      frame: (),
+      body: (),
+      footer: (),
+   ),
+);

package/src/widgets/overlay/alerts.ts

@@ -1,46 +1,46 @@
-import {debug, deprecatedFlag} from '../../util/Debug';
-import {isString} from '../../util/isString';
-
-export type AlertOptions = string | { message?: string; [key: string]: any };
-
-interface AlertImpl {
-   alert(options: AlertOptions): Promise<void>;
-   yesNo(options: AlertOptions): Promise<string>;
-}
-
-function getMessage(options: AlertOptions): string | null {
-   debug(deprecatedFlag, "Call enableMsgBoxes() on startup to use Cx based message boxes. Message boxes are not auto enabled anymore to reduce the bundle size for apps that do not use them. ");
-   if (!options)
-      return null;
-   if (isString(options))
-      return options;
-   if (options && typeof options === 'object' && options.message)
-      return options.message;
-   return null;
-}
-
-let impl: AlertImpl = {
-   yesNo: function (options: AlertOptions): Promise<string> {
-      let result = window.confirm(getMessage(options) || '');
-      return Promise.resolve(result ? 'yes' : 'no');
-   },
-
-   alert: function (options: AlertOptions): Promise<void> {
-      window.alert(getMessage(options) || '');
-      return Promise.resolve();
-   }
-};
-
-export function alert(options: AlertOptions): Promise<void> {
-   return impl.alert(options);
-}
-
-export function yesNo(options: AlertOptions): Promise<string> {
-   return impl.yesNo(options);
-}
-
-export function registerAlertImpl(x: AlertImpl): void {
-   impl = x;
-}
-
-
+import {debug, deprecatedFlag} from '../../util/Debug';
+import {isString} from '../../util/isString';
+
+export type AlertOptions = string | { message?: string; [key: string]: any };
+
+interface AlertImpl {
+   alert(options: AlertOptions): Promise<void>;
+   yesNo(options: AlertOptions): Promise<string>;
+}
+
+function getMessage(options: AlertOptions): string | null {
+   debug(deprecatedFlag, "Call enableMsgBoxes() on startup to use Cx based message boxes. Message boxes are not auto enabled anymore to reduce the bundle size for apps that do not use them. ");
+   if (!options)
+      return null;
+   if (isString(options))
+      return options;
+   if (options && typeof options === 'object' && options.message)
+      return options.message;
+   return null;
+}
+
+let impl: AlertImpl = {
+   yesNo: function (options: AlertOptions): Promise<string> {
+      let result = window.confirm(getMessage(options) || '');
+      return Promise.resolve(result ? 'yes' : 'no');
+   },
+
+   alert: function (options: AlertOptions): Promise<void> {
+      window.alert(getMessage(options) || '');
+      return Promise.resolve();
+   }
+};
+
+export function alert(options: AlertOptions): Promise<void> {
+   return impl.alert(options);
+}
+
+export function yesNo(options: AlertOptions): Promise<string> {
+   return impl.yesNo(options);
+}
+
+export function registerAlertImpl(x: AlertImpl): void {
+   impl = x;
+}
+
+

package/src/widgets/overlay/captureMouse.scss

@@ -1,13 +1,13 @@
-
-@if cx-call-once("cx/widgets/captureMouse") {
-
-   .cxb-mousecapture {
-      position: fixed;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      z-index: 1000000;
-   }
-
-}
+
+@if cx-call-once("cx/widgets/captureMouse") {
+
+   .cxb-mousecapture {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 1000000;
+   }
+
+}

package/src/widgets/overlay/captureMouse.ts

@@ -1,195 +1,195 @@
-import { batchUpdates } from "../../ui/batchUpdates";
-import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
-
-/** Cursor position with client coordinates */
-export interface CursorPosition {
-   clientX: number;
-   clientY: number;
-}
-
-/**
- * Configuration options for mouse capture
- */
-interface CaptureMouseOptions {
-   /** Callback function called on mouse move events */
-   onMouseMove?: (e: MouseEvent, captureData?: any) => void;
-   /** Callback function called on mouse up events */
-   onMouseUp?: (e: MouseEvent, captureData?: any) => void;
-   /** Callback function called on double click events */
-   onDblClick?: (e: MouseEvent) => void;
-   /** Additional data passed to callbacks */
-   captureData?: any;
-   /** CSS cursor style for the capture surface */
-   cursor?: string;
-}
-
-/**
- * Captures mouse events globally by creating a transparent overlay
- * @param e - The initial mouse event that triggered the capture
- * @param options - Configuration options for the capture behavior
- */
-export function captureMouse2(
-   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
-   options: CaptureMouseOptions,
-): void {
-   let surface = document.createElement("div");
-   surface.className = "cxb-mousecapture";
-   surface.style.cursor = options.cursor || getComputedStyle(e.currentTarget as Element).cursor;
-
-   document.body.appendChild(surface);
-
-   // In case when the event originates from an iframe,
-   // we use that document as events do not bubble up.
-   let parentDocument = (e.target as Element)?.ownerDocument;
-   let eventOptions = { capture: true };
-
-   let active = true;
-   parentDocument.addEventListener("mousemove", move, eventOptions);
-   parentDocument.addEventListener("mouseup", end, eventOptions);
-   if (options.onDblClick) parentDocument.addEventListener("dblclick", doubleClick, eventOptions);
-
-   function tear() {
-      if (surface == null) return;
-      parentDocument.removeEventListener("mousemove", move, eventOptions);
-      parentDocument.removeEventListener("mouseup", end, eventOptions);
-      if (options.onDblClick) parentDocument.removeEventListener("dblclick", doubleClick, eventOptions);
-      document.body.removeChild(surface);
-      surface = null as any;
-   }
-
-   function doubleClick(e: Event) {
-      try {
-         options.onDblClick && options.onDblClick(e as MouseEvent);
-      } finally {
-         tear();
-      }
-   }
-
-   e.stopPropagation();
-
-   function move(e: Event) {
-      if (!active) {
-         tear();
-         return;
-      }
-
-      //if mouse moves double clicking is off
-      options.onDblClick = undefined;
-
-      batchUpdates(() => {
-         if (options.onMouseMove) options.onMouseMove(e as MouseEvent, options.captureData);
-         e.stopPropagation();
-         e.preventDefault(); //disable text selection
-      });
-   }
-
-   function end(e: Event) {
-      active = false;
-      batchUpdates(() => {
-         // if (surface.releaseCapture)
-         //    surface.releaseCapture();
-
-         if (!options.onDblClick) surface.style.display = "none";
-         try {
-            if (options.onMouseUp) options.onMouseUp(e as MouseEvent, options.captureData);
-         } finally {
-            if (options.onDblClick) {
-               //keep the surface a little longer to detect double clicks
-               setTimeout(tear, 1500);
-            } else tear();
-         }
-      });
-   }
-}
-
-/**
- * Captures mouse or touch events, automatically detecting the event type
- * @param e - The initial mouse or touch event that triggered the capture
- * @param options - Configuration options for the capture behavior
- */
-export function captureMouseOrTouch2(
-   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
-   options: CaptureMouseOptions,
-): void {
-   if (e.type.indexOf("touch") == 0) {
-      let el = e.currentTarget as HTMLElement;
-
-      let move = (e: TouchEvent) => {
-         batchUpdates(() => {
-            if (options.onMouseMove) options.onMouseMove(e as any, options.captureData);
-            e.preventDefault();
-         });
-      };
-
-      let end = (e: TouchEvent) => {
-         batchUpdates(() => {
-            el.removeEventListener("touchmove", move);
-            el.removeEventListener("touchend", end);
-
-            if (options.onMouseUp) options.onMouseUp(e as any);
-
-            e.preventDefault();
-         });
-      };
-
-      el.addEventListener("touchmove", move);
-      el.addEventListener("touchend", end);
-
-      e.stopPropagation();
-   } else captureMouse2(e, options);
-}
-
-/**
- * Legacy function for capturing mouse events with individual parameters
- * @param e - The initial mouse event that triggered the capture
- * @param onMouseMove - Callback function called on mouse move events
- * @param onMouseUp - Callback function called on mouse up events
- * @param captureData - Additional data passed to callbacks
- * @param cursor - CSS cursor style for the capture surface
- */
-export function captureMouse(
-   e: React.MouseEvent,
-   onMouseMove?: (e: MouseEvent | TouchEvent, captureData?: any) => void,
-   onMouseUp?: (e: MouseEvent | TouchEvent, captureData?: any) => void,
-   captureData?: any,
-   cursor?: string,
-): void {
-   captureMouse2(e, {
-      onMouseMove,
-      onMouseUp,
-      captureData,
-      cursor,
-   });
-}
-
-/**
- * Legacy function for capturing mouse or touch events with individual parameters
- * @param e - The initial mouse or touch event that triggered the capture
- * @param onMouseMove - Callback function called on mouse/touch move events
- * @param onMouseUp - Callback function called on mouse/touch up events
- * @param captureData - Additional data passed to callbacks
- * @param cursor - CSS cursor style for the capture surface
- */
-export function captureMouseOrTouch(
-   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
-   onMouseMove?: (e: MouseEvent, captureData?: any) => void,
-   onMouseUp?: (e: MouseEvent, captureData?: any) => void,
-   captureData?: any,
-   cursor?: string,
-): void {
-   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
-}
-
-/**
- * Gets the cursor position relative to the parent frame
- * @param e - Mouse or touch event (React or native)
- * @returns Object with clientX and clientY coordinates adjusted for parent frame offset
- */
-export function getCursorPos(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent): CursorPosition {
-   let p = (e as TouchEvent).touches?.[0] || (e as MouseEvent);
-   let offset = getParentFrameBoundingClientRect(e.target as Element);
-   return {
-      clientX: p.clientX + offset.left,
-      clientY: p.clientY + offset.top,
-   };
-}
+import { batchUpdates } from "../../ui/batchUpdates";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
+
+/** Cursor position with client coordinates */
+export interface CursorPosition {
+   clientX: number;
+   clientY: number;
+}
+
+/**
+ * Configuration options for mouse capture
+ */
+interface CaptureMouseOptions {
+   /** Callback function called on mouse move events */
+   onMouseMove?: (e: MouseEvent, captureData?: any) => void;
+   /** Callback function called on mouse up events */
+   onMouseUp?: (e: MouseEvent, captureData?: any) => void;
+   /** Callback function called on double click events */
+   onDblClick?: (e: MouseEvent) => void;
+   /** Additional data passed to callbacks */
+   captureData?: any;
+   /** CSS cursor style for the capture surface */
+   cursor?: string;
+}
+
+/**
+ * Captures mouse events globally by creating a transparent overlay
+ * @param e - The initial mouse event that triggered the capture
+ * @param options - Configuration options for the capture behavior
+ */
+export function captureMouse2(
+   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+   options: CaptureMouseOptions,
+): void {
+   let surface = document.createElement("div");
+   surface.className = "cxb-mousecapture";
+   surface.style.cursor = options.cursor || getComputedStyle(e.currentTarget as Element).cursor;
+
+   document.body.appendChild(surface);
+
+   // In case when the event originates from an iframe,
+   // we use that document as events do not bubble up.
+   let parentDocument = (e.target as Element)?.ownerDocument;
+   let eventOptions = { capture: true };
+
+   let active = true;
+   parentDocument.addEventListener("mousemove", move, eventOptions);
+   parentDocument.addEventListener("mouseup", end, eventOptions);
+   if (options.onDblClick) parentDocument.addEventListener("dblclick", doubleClick, eventOptions);
+
+   function tear() {
+      if (surface == null) return;
+      parentDocument.removeEventListener("mousemove", move, eventOptions);
+      parentDocument.removeEventListener("mouseup", end, eventOptions);
+      if (options.onDblClick) parentDocument.removeEventListener("dblclick", doubleClick, eventOptions);
+      document.body.removeChild(surface);
+      surface = null as any;
+   }
+
+   function doubleClick(e: Event) {
+      try {
+         options.onDblClick && options.onDblClick(e as MouseEvent);
+      } finally {
+         tear();
+      }
+   }
+
+   e.stopPropagation();
+
+   function move(e: Event) {
+      if (!active) {
+         tear();
+         return;
+      }
+
+      //if mouse moves double clicking is off
+      options.onDblClick = undefined;
+
+      batchUpdates(() => {
+         if (options.onMouseMove) options.onMouseMove(e as MouseEvent, options.captureData);
+         e.stopPropagation();
+         e.preventDefault(); //disable text selection
+      });
+   }
+
+   function end(e: Event) {
+      active = false;
+      batchUpdates(() => {
+         // if (surface.releaseCapture)
+         //    surface.releaseCapture();
+
+         if (!options.onDblClick) surface.style.display = "none";
+         try {
+            if (options.onMouseUp) options.onMouseUp(e as MouseEvent, options.captureData);
+         } finally {
+            if (options.onDblClick) {
+               //keep the surface a little longer to detect double clicks
+               setTimeout(tear, 1500);
+            } else tear();
+         }
+      });
+   }
+}
+
+/**
+ * Captures mouse or touch events, automatically detecting the event type
+ * @param e - The initial mouse or touch event that triggered the capture
+ * @param options - Configuration options for the capture behavior
+ */
+export function captureMouseOrTouch2(
+   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+   options: CaptureMouseOptions,
+): void {
+   if (e.type.indexOf("touch") == 0) {
+      let el = e.currentTarget as HTMLElement;
+
+      let move = (e: TouchEvent) => {
+         batchUpdates(() => {
+            if (options.onMouseMove) options.onMouseMove(e as any, options.captureData);
+            e.preventDefault();
+         });
+      };
+
+      let end = (e: TouchEvent) => {
+         batchUpdates(() => {
+            el.removeEventListener("touchmove", move);
+            el.removeEventListener("touchend", end);
+
+            if (options.onMouseUp) options.onMouseUp(e as any);
+
+            e.preventDefault();
+         });
+      };
+
+      el.addEventListener("touchmove", move);
+      el.addEventListener("touchend", end);
+
+      e.stopPropagation();
+   } else captureMouse2(e, options);
+}
+
+/**
+ * Legacy function for capturing mouse events with individual parameters
+ * @param e - The initial mouse event that triggered the capture
+ * @param onMouseMove - Callback function called on mouse move events
+ * @param onMouseUp - Callback function called on mouse up events
+ * @param captureData - Additional data passed to callbacks
+ * @param cursor - CSS cursor style for the capture surface
+ */
+export function captureMouse(
+   e: React.MouseEvent,
+   onMouseMove?: (e: MouseEvent | TouchEvent, captureData?: any) => void,
+   onMouseUp?: (e: MouseEvent | TouchEvent, captureData?: any) => void,
+   captureData?: any,
+   cursor?: string,
+): void {
+   captureMouse2(e, {
+      onMouseMove,
+      onMouseUp,
+      captureData,
+      cursor,
+   });
+}
+
+/**
+ * Legacy function for capturing mouse or touch events with individual parameters
+ * @param e - The initial mouse or touch event that triggered the capture
+ * @param onMouseMove - Callback function called on mouse/touch move events
+ * @param onMouseUp - Callback function called on mouse/touch up events
+ * @param captureData - Additional data passed to callbacks
+ * @param cursor - CSS cursor style for the capture surface
+ */
+export function captureMouseOrTouch(
+   e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent,
+   onMouseMove?: (e: MouseEvent, captureData?: any) => void,
+   onMouseUp?: (e: MouseEvent, captureData?: any) => void,
+   captureData?: any,
+   cursor?: string,
+): void {
+   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
+}
+
+/**
+ * Gets the cursor position relative to the parent frame
+ * @param e - Mouse or touch event (React or native)
+ * @returns Object with clientX and clientY coordinates adjusted for parent frame offset
+ */
+export function getCursorPos(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent): CursorPosition {
+   let p = (e as TouchEvent).touches?.[0] || (e as MouseEvent);
+   let offset = getParentFrameBoundingClientRect(e.target as Element);
+   return {
+      clientX: p.clientX + offset.left,
+      clientY: p.clientY + offset.top,
+   };
+}