cx 24.3.0 → 24.3.2

package/src/widgets/grid/Grid.js

@@ -524,7 +524,7 @@ export class Grid extends Container {
 
                let headerCell = findFirstChild(
                   headerTBody,
-                  (el) => el.tagName == "TH" && el.dataset?.uniqueColId == uniqueColId,
+                  (el) => el.tagName == "TH" && el.dataset && el.dataset.uniqueColId == uniqueColId,
                );
                let scrollAreaEl = headerTBody.parentElement.parentElement;
                let gridEl = scrollAreaEl.parentElement;
@@ -608,15 +608,16 @@ export class Grid extends Container {
       if (!header) return null;
 
       let skip = {};
+      let lineIndex = 0;
 
-      header.children.forEach((line, lineIndex) => {
+      header.children.forEach((line) => {
          let empty = [true, true, true];
          let result = [[], [], []];
 
          line.children.forEach((hdinst, colIndex) => {
             let hdwidget = hdinst.widget;
             for (let l = 0; l < 3; l++) {
-               let colKey = `${lineIndex}-${colIndex}-${l}`;
+               let colKey = `${lineIndex + l}-${colIndex}`;
 
                if (skip[colKey]) continue;
 
@@ -689,7 +690,7 @@ export class Grid extends Container {
 
                      for (let r = 0; r < header.data.rowSpan; r++)
                         for (let c = 0; c < header.data.colSpan; c++)
-                           skip[`${lineIndex}-${colIndex + c}-${l + r}`] = true;
+                           skip[`${lineIndex + l + r}-${colIndex + c}`] = true;
                   }
 
                   if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
@@ -744,6 +745,7 @@ export class Grid extends Container {
          });
 
          result = result.filter((_, i) => !empty[i]);
+         lineIndex += result.length;
 
          if (result[0]) {
             if (fixed && !fixedColumns) {
@@ -752,19 +754,17 @@ export class Grid extends Container {
                );
             }
 
-            headerRows.push(
-               <tbody key={"h" + key + lineIndex} className={CSS.element(baseClass, "header")}>
-                  {result.map((h, i) => (
-                     <tr key={i}>{h}</tr>
-                  ))}
-               </tbody>,
-            );
+            headerRows.push(...result.map((h, i) => <tr key={`${lineIndex}-${i}`}>{h}</tr>));
          }
       });
 
       if (headerRows.length == 0) return null;
 
-      return headerRows;
+      return (
+         <tbody key={"h" + key} className={CSS.element(baseClass, "header")}>
+            {headerRows}
+         </tbody>
+      );
    }
 
    onHeaderMouseMove(e, column, columnInstance, gridInstance, headerLine) {
@@ -1333,68 +1333,79 @@ class GridComponent extends VDOM.Component {
          mod["draggable"] = draggable;
          mod["non-draggable"] = !draggable;
 
-         let wrap = (children) => (
-            <GridRowComponent
-               key={key}
-               className={CSS.state(mod)}
-               store={store}
-               dragSource={dragSource}
-               instance={row}
-               grid={instance}
-               record={record}
-               parent={this}
-               cursorIndex={index}
-               selected={row.selected}
-               isBeingDragged={dragged}
-               isDraggedOver={mod.over}
-               cursor={mod.cursor}
-               cursorCellIndex={index == cursor && cursorCellIndex}
-               cellEdit={index == cursor && cursorCellIndex != null && cellEdit}
-               shouldUpdate={row.shouldUpdate}
-               dimensionsVersion={dimensionsVersion}
-               fixed={fixed}
-            >
-               {children.content.map(({ key, data, content }, line) => (
-                  <tr key={key} className={data.classNames} style={data.style}>
-                     {content.map(({ key, data, content, uniqueColumnId }, cellIndex) => {
-                        if (Boolean(data.fixed) !== fixed) return null;
-                        let cellected =
-                           index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
-                        let className = cellected
-                           ? CSS.expand(data.classNames, CSS.state("cellected"))
-                           : data.classNames;
-                        if (cellected && cellEdit) {
-                           let column = visibleColumns[cursorCellIndex];
-                           if (column && column.editor && data.editable)
-                              return this.renderCellEditor(key, CSS, baseClass, row, column);
-                        }
-                        let width = colWidth[uniqueColumnId];
-                        let style = data.style;
-                        if (width) {
-                           style = {
-                              ...style,
-                              maxWidth: `${width}px`,
-                           };
-                        }
-
-                        if (cellWrap) content = cellWrap(content);
-
-                        return (
-                           <td
-                              key={key}
-                              className={className}
-                              style={style}
-                              colSpan={data.colSpan}
-                              rowSpan={data.rowSpan}
-                           >
-                              {content}
-                           </td>
-                        );
-                     })}
-                  </tr>
-               ))}
-            </GridRowComponent>
-         );
+         let wrap = (children) => {
+            let skipCells = {};
+            return (
+               <GridRowComponent
+                  key={key}
+                  className={CSS.state(mod)}
+                  store={store}
+                  dragSource={dragSource}
+                  instance={row}
+                  grid={instance}
+                  record={record}
+                  parent={this}
+                  cursorIndex={index}
+                  selected={row.selected}
+                  isBeingDragged={dragged}
+                  isDraggedOver={mod.over}
+                  cursor={mod.cursor}
+                  cursorCellIndex={index == cursor && cursorCellIndex}
+                  cellEdit={index == cursor && cursorCellIndex != null && cellEdit}
+                  shouldUpdate={row.shouldUpdate}
+                  dimensionsVersion={dimensionsVersion}
+                  fixed={fixed}
+               >
+                  {children.content.map(({ key, data, content }, line) => (
+                     <tr key={key} className={data.classNames} style={data.style}>
+                        {content.map(({ key, data, content, uniqueColumnId }, cellIndex) => {
+                           if (Boolean(data.fixed) !== fixed) return null;
+                           let cellected =
+                              index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
+                           let className = cellected
+                              ? CSS.expand(data.classNames, CSS.state("cellected"))
+                              : data.classNames;
+                           if (cellected && cellEdit) {
+                              let column = visibleColumns[cursorCellIndex];
+                              if (column && column.editor && data.editable)
+                                 return this.renderCellEditor(key, CSS, baseClass, row, column);
+                           }
+                           let width = colWidth[uniqueColumnId];
+                           let style = data.style;
+                           if (width) {
+                              style = {
+                                 ...style,
+                                 maxWidth: `${width}px`,
+                              };
+                           }
+
+                           if (skipCells[`${line}-${cellIndex}`]) return null;
+
+                           if (data.colSpan > 1 || data.rowSpan > 1) {
+                              for (let r = line; r < line + (data.rowSpan ?? 1); r++)
+                                 for (let c = cellIndex; c < cellIndex + (data.colSpan ?? 1); c++)
+                                    skipCells[`${r}-${c}`] = true;
+                           }
+
+                           if (cellWrap) content = cellWrap(content);
+
+                           return (
+                              <td
+                                 key={key}
+                                 className={className}
+                                 style={style}
+                                 colSpan={data.colSpan}
+                                 rowSpan={data.rowSpan}
+                              >
+                                 {content}
+                              </td>
+                           );
+                        })}
+                     </tr>
+                  ))}
+               </GridRowComponent>
+            );
+         };
 
          if (!standalone) return wrap(record.vdom);
 

package/src/widgets/overlay/captureMouse.js

@@ -1,26 +1,28 @@
-import { batchUpdates } from '../../ui/batchUpdates';
-import { getParentFrameBoundingClientRect } from '../../util/getParentFrameBoundingClientRect';
+import { batchUpdates } from "../../ui/batchUpdates";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
 
 export function captureMouse2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
-
-   let surface = document.createElement('div');
-   surface.className = 'cxb-mousecapture';
+   let surface = document.createElement("div");
+   surface.className = "cxb-mousecapture";
    surface.style.cursor = cursor || getComputedStyle(e.currentTarget).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.ownerDocument;
+   let options = { capture: true };
+
    let active = true;
-   surface.addEventListener('mousemove', move);
-   surface.addEventListener('mouseup', end);
-   if (onDblClick)
-      surface.addEventListener('dblclick', doubleClick);
+   parentDocument.addEventListener("mousemove", move, options);
+   parentDocument.addEventListener("mouseup", end, options);
+   if (onDblClick) parentDocument.addEventListener("dblclick", doubleClick), options;
 
    function tear() {
       if (surface == null) return;
-      surface.removeEventListener('mousemove', move);
-      surface.removeEventListener('mouseup', end);
-      if (onDblClick)
-         surface.removeEventListener('dblclick', onDblClick);
+      parentDocument.removeEventListener("mousemove", move, options);
+      parentDocument.removeEventListener("mouseup", end, options);
+      if (onDblClick) parentDocument.removeEventListener("dblclick", onDblClick, options);
       document.body.removeChild(surface);
       surface = null;
    }
@@ -45,8 +47,7 @@ export function captureMouse2(e, { onMouseMove, onMouseUp, onDblClick, captureDa
       onDblClick = null;
 
       batchUpdates(() => {
-         if (onMouseMove)
-            onMouseMove(e, captureData);
+         if (onMouseMove) onMouseMove(e, captureData);
          e.stopPropagation();
          e.preventDefault(); //disable text selection
       });
@@ -58,69 +59,59 @@ export function captureMouse2(e, { onMouseMove, onMouseUp, onDblClick, captureDa
          // if (surface.releaseCapture)
          //    surface.releaseCapture();
 
-         if (!onDblClick)
-            surface.style.display = "none";
+         if (!onDblClick) surface.style.display = "none";
          try {
-            if (onMouseUp)
-               onMouseUp(e, captureData);
+            if (onMouseUp) onMouseUp(e, captureData);
          } finally {
             if (onDblClick) {
                //keep the surface a little longer to detect double clicks
                setTimeout(tear, 1500);
-            } else
-               tear();
+            } else tear();
          }
       });
    }
 }
 
 export function captureMouseOrTouch2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
-
-   if (e.type.indexOf('touch') == 0) {
-
+   if (e.type.indexOf("touch") == 0) {
       let el = e.currentTarget;
 
-      let move = e => {
+      let move = (e) => {
          batchUpdates(() => {
-            if (onMouseMove)
-               onMouseMove(e, captureData);
+            if (onMouseMove) onMouseMove(e, captureData);
             e.preventDefault();
-         })
+         });
       };
 
-      let end = e=> {
+      let end = (e) => {
          batchUpdates(() => {
-            el.removeEventListener('touchmove', move);
-            el.removeEventListener('touchend', end);
+            el.removeEventListener("touchmove", move);
+            el.removeEventListener("touchend", end);
 
-            if (onMouseUp)
-               onMouseUp(e);
+            if (onMouseUp) onMouseUp(e);
 
             e.preventDefault();
-         })
+         });
       };
 
-      el.addEventListener('touchmove', move);
-      el.addEventListener('touchend', end);
+      el.addEventListener("touchmove", move);
+      el.addEventListener("touchend", end);
 
       e.stopPropagation();
-   }
-   else
-      captureMouse2(e, { onMouseMove, onMouseUp, captureData, onDblClick, cursor });
+   } else captureMouse2(e, { onMouseMove, onMouseUp, captureData, onDblClick, cursor });
 }
 
 export function captureMouse(e, onMouseMove, onMouseUp, captureData, cursor) {
-
    captureMouse2(e, {
       onMouseMove,
       onMouseUp,
       captureData,
-      cursor
-   })
+      cursor,
+   });
 }
 
 export function captureMouseOrTouch(e, onMouseMove, onMouseUp, captureData, cursor) {
-   captureMouseOrTouch2(e, {onMouseMove, onMouseUp, captureData, cursor});
+   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
 }
 
 export function getCursorPos(e) {
@@ -128,6 +119,6 @@ export function getCursorPos(e) {
    let offset = getParentFrameBoundingClientRect(e.target);
    return {
       clientX: p.clientX + offset.left,
-      clientY: p.clientY + offset.top
-   }
-}
+      clientY: p.clientY + offset.top,
+   };
+}