@odoo/o-spreadsheet 18.2.0-alpha.2 → 18.2.0-alpha.3

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.2.0-alpha.2
- * @date 2025-01-15T08:06:32.137Z
- * @hash 4f96c47
+ * @version 18.2.0-alpha.3
+ * @date 2025-01-27T10:07:28.716Z
+ * @hash 63a13e5
  */
 
 (function (exports, owl) {
@@ -4390,15 +4390,18 @@
       let currentIndex;
       let currentVal;
       let currentType;
+      const getValue = sortOrder === "desc"
+          ? (i) => normalizeValue(getValueInData(data, rangeLength - i - 1))
+          : (i) => normalizeValue(getValueInData(data, i));
       while (indexRight - indexLeft >= 0) {
           indexMedian = Math.floor((indexLeft + indexRight) / 2);
           currentIndex = indexMedian;
-          currentVal = normalizeValue(getValueInData(data, currentIndex));
+          currentVal = getValue(currentIndex);
           currentType = typeof currentVal;
           // 1 - linear search to find value with the same type
           while (indexLeft < currentIndex && targetType !== currentType) {
               currentIndex--;
-              currentVal = normalizeValue(getValueInData(data, currentIndex));
+              currentVal = getValue(currentIndex);
               currentType = typeof currentVal;
           }
           if (currentType !== targetType || currentVal === undefined || currentVal === null) {
@@ -4414,8 +4417,7 @@
               if (matchVal === undefined ||
                   matchVal === null ||
                   matchVal < currentVal ||
-                  (matchVal === currentVal && sortOrder === "asc" && matchValIndex < currentIndex) ||
-                  (matchVal === currentVal && sortOrder === "desc" && matchValIndex > currentIndex)) {
+                  (matchVal === currentVal && matchValIndex < currentIndex)) {
                   matchVal = currentVal;
                   matchValIndex = currentIndex;
               }
@@ -4423,15 +4425,13 @@
           else if (mode === "nextGreater" && currentVal >= _target) {
               if (matchVal === undefined ||
                   matchVal > currentVal ||
-                  (matchVal === currentVal && sortOrder === "asc" && matchValIndex < currentIndex) ||
-                  (matchVal === currentVal && sortOrder === "desc" && matchValIndex > currentIndex)) {
+                  (matchVal === currentVal && matchValIndex < currentIndex)) {
                   matchVal = currentVal;
                   matchValIndex = currentIndex;
               }
           }
           // 3 - give new indexes for the Binary search
-          if ((sortOrder === "asc" && currentVal > _target) ||
-              (sortOrder === "desc" && currentVal <= _target)) {
+          if (currentVal > _target || (mode === "strict" && currentVal === _target)) {
               indexRight = currentIndex - 1;
           }
           else {
@@ -4439,7 +4439,10 @@
           }
       }
       // note that valMinIndex could be 0
-      return matchValIndex !== undefined ? matchValIndex : -1;
+      if (matchValIndex === undefined) {
+          return -1;
+      }
+      return sortOrder === "desc" ? rangeLength - matchValIndex - 1 : matchValIndex;
   }
   /**
    * Perform a linear search and return the index of the match.
@@ -8004,6 +8007,7 @@
       integer: NUMBER_CHAR_AGGREGATORS,
       char: NUMBER_CHAR_AGGREGATORS,
       boolean: ["count_distinct", "count", "bool_and", "bool_or"],
+      datetime: ["max", "min", "count_distinct", "count"],
   };
   const AGGREGATORS = {};
   for (const type in AGGREGATORS_BY_FIELD_TYPE) {
@@ -9809,13 +9813,13 @@ stores.inject(MyMetaStore, storeInstance);
       else if (ds.labelCell) {
           label = {
               reference: getters.getRangeString(ds.labelCell, "forceSheetReference", {
-                  useFixedReference: true,
+                  useBoundedReference: true,
               }),
           };
       }
       return {
           label,
-          range: getters.getRangeString(dataRange, "forceSheetReference", { useFixedReference: true }),
+          range: getters.getRangeString(dataRange, "forceSheetReference", { useBoundedReference: true }),
           backgroundColor: ds.backgroundColor,
           rightYAxis: ds.rightYAxis,
       };
@@ -9830,7 +9834,7 @@ stores.inject(MyMetaStore, storeInstance);
           zone.top = zone.top + 1;
       }
       const range = labelRange.clone({ zone });
-      return getters.getRangeString(range, "forceSheetReference", { useFixedReference: true });
+      return getters.getRangeString(range, "forceSheetReference", { useBoundedReference: true });
   }
   /**
    * Transform a chart definition which supports dataSets (dataSets and LabelRange)
@@ -29580,11 +29584,14 @@ stores.inject(MyMetaStore, storeInstance);
   </t>
 </templates>
 `;
-  const app = new owl.App(owl.Component, { templates, translateFn: _t });
+  let app;
   function renderToString(templateName, context = {}) {
       return render(templateName, context).innerHTML;
   }
   function render(templateName, context = {}) {
+      if (!app) {
+          app = new owl.App(owl.Component, { templates, translateFn: _t });
+      }
       const templateFn = app.getTemplate(templateName);
       const bdom = templateFn(context, {});
       const div = document.createElement("div");
@@ -29813,6 +29820,7 @@ stores.inject(MyMetaStore, storeInstance);
     getBarChartLegend: getBarChartLegend,
     getBarChartScales: getBarChartScales,
     getBarChartTooltip: getBarChartTooltip,
+    getChartColorsGenerator: getChartColorsGenerator,
     getChartLabelFormat: getChartLabelFormat,
     getChartLayout: getChartLayout,
     getChartShowValues: getChartShowValues,
@@ -32345,6 +32353,10 @@ stores.inject(MyMetaStore, storeInstance);
               this.currentDisplayValue = newDisplay;
               if (!anchor)
                   return;
+              el.style.top = "";
+              el.style.left = "";
+              el.style["max-height"] = "";
+              el.style["max-width"] = "";
               const propsMaxSize = { width: this.props.maxWidth, height: this.props.maxHeight };
               let elDims = {
                   width: el.getBoundingClientRect().width,
@@ -36981,6 +36993,440 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
+  /**
+   * Start listening to pointer events and apply the given callbacks.
+   *
+   * @returns A function to remove the listeners.
+   */
+  function startDnd(onMouseMove, onMouseUp, onMouseDown = () => { }) {
+      const removeListeners = () => {
+          window.removeEventListener("pointerdown", onMouseDown);
+          window.removeEventListener("pointerup", _onMouseUp);
+          window.removeEventListener("dragstart", _onDragStart);
+          window.removeEventListener("pointermove", onMouseMove);
+          window.removeEventListener("wheel", onMouseMove);
+      };
+      const _onMouseUp = (ev) => {
+          onMouseUp(ev);
+          removeListeners();
+      };
+      function _onDragStart(ev) {
+          ev.preventDefault();
+      }
+      window.addEventListener("pointerdown", onMouseDown);
+      window.addEventListener("pointerup", _onMouseUp);
+      window.addEventListener("dragstart", _onDragStart);
+      window.addEventListener("pointermove", onMouseMove);
+      // mouse wheel on window is by default a passive event.
+      // preventDefault() is not allowed in passive event handler.
+      // https://chromestatus.com/feature/6662647093133312
+      window.addEventListener("wheel", onMouseMove, { passive: false });
+      return removeListeners;
+  }
+  /**
+   * Function to be used during a pointerdown event, this function allows to
+   * perform actions related to the pointermove and pointerup events and adjusts the viewport
+   * when the new position related to the pointermove event is outside of it.
+   * Among inputs are two callback functions. First intended for actions performed during
+   * the pointermove event, it receives as parameters the current position of the pointermove
+   * (occurrence of the current column and the current row). Second intended for actions
+   * performed during the pointerup event.
+   */
+  function dragAndDropBeyondTheViewport(env, cbMouseMove, cbMouseUp, only = false) {
+      let timeOutId = null;
+      let currentEv;
+      let previousEv;
+      let startingEv;
+      let startingX;
+      let startingY;
+      const getters = env.model.getters;
+      const sheetId = getters.getActiveSheetId();
+      const position = gridOverlayPosition();
+      let colIndex;
+      let rowIndex;
+      const onMouseDown = (ev) => {
+          previousEv = ev;
+          startingEv = ev;
+          startingX = startingEv.clientX - position.left;
+          startingY = startingEv.clientY - position.top;
+      };
+      const onMouseMove = (ev) => {
+          currentEv = ev;
+          if (timeOutId) {
+              return;
+          }
+          const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
+          let { top, left, bottom, right } = getters.getActiveMainViewport();
+          let { scrollX, scrollY } = getters.getActiveSheetDOMScrollInfo();
+          const { xSplit, ySplit } = getters.getPaneDivisions(sheetId);
+          let canEdgeScroll = false;
+          let timeoutDelay = MAX_DELAY;
+          const x = currentEv.clientX - position.left;
+          colIndex = getters.getColIndex(x);
+          if (only !== "vertical") {
+              const previousX = previousEv.clientX - position.left;
+              const edgeScrollInfoX = getters.getEdgeScrollCol(x, previousX, startingX);
+              if (edgeScrollInfoX.canEdgeScroll) {
+                  canEdgeScroll = true;
+                  timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoX.delay);
+                  let newTarget;
+                  switch (edgeScrollInfoX.direction) {
+                      case "reset":
+                          colIndex = xSplit;
+                          newTarget = xSplit;
+                          break;
+                      case 1:
+                          colIndex = right;
+                          newTarget = left + 1;
+                          break;
+                      case -1:
+                          colIndex = left - 1;
+                          while (env.model.getters.isColHidden(sheetId, colIndex)) {
+                              colIndex--;
+                          }
+                          newTarget = colIndex;
+                          break;
+                  }
+                  scrollX = getters.getColDimensions(sheetId, newTarget).start - offsetCorrectionX;
+              }
+          }
+          const y = currentEv.clientY - position.top;
+          rowIndex = getters.getRowIndex(y);
+          if (only !== "horizontal") {
+              const previousY = previousEv.clientY - position.top;
+              const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
+              if (edgeScrollInfoY.canEdgeScroll) {
+                  canEdgeScroll = true;
+                  timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoY.delay);
+                  let newTarget;
+                  switch (edgeScrollInfoY.direction) {
+                      case "reset":
+                          rowIndex = ySplit;
+                          newTarget = ySplit;
+                          break;
+                      case 1:
+                          rowIndex = bottom;
+                          newTarget = top + edgeScrollInfoY.direction;
+                          break;
+                      case -1:
+                          rowIndex = top - 1;
+                          while (env.model.getters.isRowHidden(sheetId, rowIndex)) {
+                              rowIndex--;
+                          }
+                          newTarget = rowIndex;
+                          break;
+                  }
+                  scrollY = env.model.getters.getRowDimensions(sheetId, newTarget).start - offsetCorrectionY;
+              }
+          }
+          if (!canEdgeScroll) {
+              if (rowIndex === -1) {
+                  rowIndex = y < 0 ? 0 : getters.getNumberRows(sheetId) - 1;
+              }
+              if (colIndex === -1 && x < 0) {
+                  colIndex = x < 0 ? 0 : getters.getNumberCols(sheetId) - 1;
+              }
+          }
+          cbMouseMove(colIndex, rowIndex, currentEv);
+          if (canEdgeScroll) {
+              env.model.dispatch("SET_VIEWPORT_OFFSET", { offsetX: scrollX, offsetY: scrollY });
+              timeOutId = setTimeout(() => {
+                  timeOutId = null;
+                  onMouseMove(currentEv);
+              }, Math.round(timeoutDelay));
+          }
+          previousEv = currentEv;
+      };
+      const onMouseUp = () => {
+          clearTimeout(timeOutId);
+          cbMouseUp();
+      };
+      startDnd(onMouseMove, onMouseUp, onMouseDown);
+  }
+
+  function useDragAndDropListItems() {
+      let dndHelper;
+      const previousCursor = document.body.style.cursor;
+      let cleanupFns = [];
+      const cleanUp = () => {
+          dndHelper = undefined;
+          document.body.style.cursor = previousCursor;
+          cleanupFns.forEach((fn) => fn());
+          cleanupFns = [];
+      };
+      const start = (direction, args) => {
+          const onChange = () => {
+              document.body.style.cursor = "move";
+              if (!dndHelper)
+                  return;
+              Object.assign(state.itemsStyle, dndHelper.getItemStyles());
+              args.onChange?.();
+          };
+          state.cancel = () => {
+              state.draggedItemId = undefined;
+              state.itemsStyle = {};
+              document.body.style.cursor = previousCursor;
+              args.onCancel?.();
+              cleanUp();
+          };
+          const onDragEnd = (itemId, indexAtEnd) => {
+              state.draggedItemId = undefined;
+              state.itemsStyle = {};
+              document.body.style.cursor = previousCursor;
+              args.onDragEnd?.(itemId, indexAtEnd);
+              cleanUp();
+          };
+          document.body.style.cursor = "move";
+          state.draggedItemId = args.draggedItemId;
+          const container = direction === "horizontal"
+              ? new HorizontalContainer(args.containerEl)
+              : new VerticalContainer(args.containerEl);
+          dndHelper = new DOMDndHelper({
+              ...args,
+              container,
+              onChange,
+              onDragEnd,
+              onCancel: state.cancel,
+          });
+          const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
+          cleanupFns.push(stopListening);
+          const onScroll = dndHelper.onScroll.bind(dndHelper);
+          args.containerEl.addEventListener("scroll", onScroll);
+          cleanupFns.push(() => args.containerEl.removeEventListener("scroll", onScroll));
+          cleanupFns.push(dndHelper.destroy.bind(dndHelper));
+      };
+      owl.onWillUnmount(() => {
+          cleanUp();
+      });
+      const state = owl.useState({
+          itemsStyle: {},
+          draggedItemId: undefined,
+          start,
+          cancel: () => { },
+      });
+      return state;
+  }
+  class DOMDndHelper {
+      draggedItemId;
+      items;
+      container;
+      initialMousePosition;
+      currentMousePosition;
+      initialScroll;
+      minPosition;
+      maxPosition;
+      edgeScrollIntervalId;
+      onChange;
+      onCancel;
+      onDragEnd;
+      /**
+       * The dead zone is an area in which the pointermove events are ignored.
+       *
+       * This is useful when swapping the dragged item with a larger item. After the swap,
+       * the mouse is still hovering on the item  we just swapped with. In this case, we don't want
+       * a mouse move to trigger another swap the other way around, so we create a dead zone. We will clear
+       * the dead zone when the mouse leaves the swapped item.
+       */
+      deadZone;
+      constructor(args) {
+          this.items = args.items.map((item) => ({ ...item, positionAtStart: item.position }));
+          this.draggedItemId = args.draggedItemId;
+          this.container = args.container;
+          this.onChange = args.onChange;
+          this.onCancel = args.onCancel;
+          this.onDragEnd = args.onDragEnd;
+          this.initialMousePosition = args.initialMousePosition;
+          this.currentMousePosition = args.initialMousePosition;
+          this.initialScroll = this.container.scroll;
+          this.minPosition = this.items[0].position;
+          this.maxPosition =
+              this.items[this.items.length - 1].position + this.items[this.items.length - 1].size;
+      }
+      getItemStyles() {
+          const styles = {};
+          for (let item of this.items) {
+              styles[item.id] = this.getItemStyle(item.id);
+          }
+          return styles;
+      }
+      getItemStyle(itemId) {
+          const position = this.container.cssPositionProperty;
+          const style = {};
+          style.position = "relative";
+          style[position] = (this.getItemsPositions()[itemId] || 0) + "px";
+          style.transition = `${position} 0.5s`;
+          style["pointer-events"] = "none";
+          if (this.draggedItemId === itemId) {
+              style.transition = `${position} 0s`;
+              style["z-index"] = "1000";
+          }
+          return cssPropertiesToCss(style);
+      }
+      onScroll() {
+          this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
+      }
+      onMouseMove(ev) {
+          if (ev.button > 1) {
+              this.onCancel();
+              return;
+          }
+          const mousePosition = this.container.getMousePosition(ev);
+          this.currentMousePosition = mousePosition;
+          if (mousePosition < this.container.start || mousePosition > this.container.end) {
+              this.startEdgeScroll(mousePosition < this.container.start ? -1 : 1);
+              return;
+          }
+          else {
+              this.stopEdgeScroll();
+          }
+          this.moveDraggedItemToPosition(mousePosition + this.scrollOffset);
+      }
+      moveDraggedItemToPosition(position) {
+          const hoveredItemIndex = this.getHoveredItemIndex(position, this.items);
+          const draggedItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
+          const draggedItem = this.items[draggedItemIndex];
+          if (this.deadZone && this.isInZone(position, this.deadZone)) {
+              this.onChange(this.getItemsPositions());
+              return;
+          }
+          else if (this.isInZone(position, {
+              start: draggedItem.position,
+              end: draggedItem.position + draggedItem.size,
+          })) {
+              this.deadZone = undefined;
+          }
+          if (draggedItemIndex === hoveredItemIndex) {
+              this.onChange(this.getItemsPositions());
+              return;
+          }
+          const startIndex = Math.min(draggedItemIndex, hoveredItemIndex);
+          const endIndex = Math.max(draggedItemIndex, hoveredItemIndex);
+          const direction = Math.sign(hoveredItemIndex - draggedItemIndex);
+          let draggedItemMoveSize = 0;
+          for (let i = startIndex; i <= endIndex; i++) {
+              if (i === draggedItemIndex) {
+                  continue;
+              }
+              this.items[i].position -= direction * draggedItem.size;
+              draggedItemMoveSize += this.items[i].size;
+          }
+          draggedItem.position += direction * draggedItemMoveSize;
+          this.items.sort((item1, item2) => item1.position - item2.position);
+          this.deadZone =
+              direction > 0
+                  ? { start: position, end: draggedItem.position }
+                  : { start: draggedItem.position + draggedItem.size, end: position };
+          this.onChange(this.getItemsPositions());
+      }
+      onMouseUp(ev) {
+          if (ev.button !== 0) {
+              this.onCancel();
+          }
+          ev.stopPropagation();
+          ev.preventDefault();
+          const targetItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
+          this.onDragEnd(this.draggedItemId, targetItemIndex);
+          this.stopEdgeScroll();
+          return false;
+      }
+      startEdgeScroll(direction) {
+          if (this.edgeScrollIntervalId)
+              return;
+          this.edgeScrollIntervalId = window.setInterval(() => {
+              const offset = direction * 3;
+              this.container.scroll += offset;
+          }, 5);
+      }
+      stopEdgeScroll() {
+          window.clearInterval(this.edgeScrollIntervalId);
+          this.edgeScrollIntervalId = undefined;
+      }
+      /**
+       * Get the index of the item the given mouse position is inside.
+       * If the mouse is outside the container, return the first or last item index.
+       */
+      getHoveredItemIndex(mousePosition, items) {
+          if (mousePosition <= this.minPosition)
+              return 0;
+          if (mousePosition >= this.maxPosition)
+              return items.length - 1;
+          return items.findIndex((item) => item.position + item.size >= mousePosition);
+      }
+      getItemsPositions() {
+          const positions = {};
+          for (let item of this.items) {
+              if (item.id !== this.draggedItemId) {
+                  positions[item.id] = item.position - item.positionAtStart;
+                  continue;
+              }
+              const mouseOffset = this.currentMousePosition - this.initialMousePosition;
+              let start = mouseOffset + this.scrollOffset;
+              start = Math.max(this.minPosition - item.positionAtStart, start);
+              start = Math.min(this.maxPosition - item.positionAtStart - item.size, start);
+              positions[item.id] = start;
+          }
+          return positions;
+      }
+      isInZone(position, zone) {
+          return position >= zone.start && position <= zone.end;
+      }
+      get scrollOffset() {
+          return this.container.scroll - this.initialScroll;
+      }
+      destroy() {
+          this.stopEdgeScroll();
+      }
+  }
+  class ContainerWrapper {
+      el;
+      constructor(el) {
+          this.el = el;
+      }
+      get containerRect() {
+          return this.el.getBoundingClientRect();
+      }
+  }
+  class VerticalContainer extends ContainerWrapper {
+      get start() {
+          return this.containerRect.top;
+      }
+      get end() {
+          return this.containerRect.bottom;
+      }
+      get cssPositionProperty() {
+          return "top";
+      }
+      get scroll() {
+          return this.el.scrollTop;
+      }
+      set scroll(scroll) {
+          this.el.scrollTop = scroll;
+      }
+      getMousePosition(ev) {
+          return ev.clientY;
+      }
+  }
+  class HorizontalContainer extends ContainerWrapper {
+      get start() {
+          return this.containerRect.left;
+      }
+      get end() {
+          return this.containerRect.right;
+      }
+      get cssPositionProperty() {
+          return "left";
+      }
+      get scroll() {
+          return this.el.scrollLeft;
+      }
+      set scroll(scroll) {
+          this.el.scrollLeft = scroll;
+      }
+      getMousePosition(ev) {
+          return ev.clientX;
+      }
+  }
+
   const arrowMap = {
       ArrowDown: "down",
       ArrowLeft: "left",
@@ -37031,6 +37477,7 @@ stores.inject(MyMetaStore, storeInstance);
           "changeRange",
           "reset",
           "confirm",
+          "updateColors",
       ];
       ranges = [];
       focusedRangeIndex = null;
@@ -37150,6 +37597,9 @@ stores.inject(MyMetaStore, storeInstance);
               this.removeRangeByIndex(index);
           }
       }
+      updateColors(colors) {
+          this.colors = colors;
+      }
       confirm() {
           for (const range of this.selectionInputs) {
               if (range.xc === "") {
@@ -37360,6 +37810,9 @@ stores.inject(MyMetaStore, storeInstance);
         right: 7px;
         top: 4px;
       }
+      .o-drag-handle {
+        cursor: move;
+      }
     }
     .o-button {
       height: 28px;
@@ -37391,13 +37844,17 @@ stores.inject(MyMetaStore, storeInstance);
           class: { type: String, optional: true },
           onSelectionChanged: { type: Function, optional: true },
           onSelectionConfirmed: { type: Function, optional: true },
+          onSelectionReordered: { type: Function, optional: true },
+          onSelectionRemoved: { type: Function, optional: true },
           colors: { type: Array, optional: true, default: [] },
       };
       state = owl.useState({
           isMissing: false,
           mode: "select-range",
       });
+      dragAndDrop = useDragAndDropListItems();
       focusedInput = owl.useRef("focusedInput");
+      selectionRef = owl.useRef("o-selection");
       store;
       get ranges() {
           return this.store.selectionInputs;
@@ -37425,8 +37882,45 @@ stores.inject(MyMetaStore, storeInstance);
                   nextProps.ranges.join() !== this.store.selectionInputValues.join()) {
                   this.store.resetWithRanges(nextProps.ranges);
               }
+              if (nextProps.colors?.join() !== this.props.colors?.join() &&
+                  nextProps.colors?.join() !== this.store.colors.join()) {
+                  this.store.updateColors(nextProps.colors || []);
+              }
+          });
+      }
+      startDragAndDrop(rangeId, event) {
+          if (event.button !== 0 || event.target.tagName === "SELECT") {
+              return;
+          }
+          const rects = this.getRangeElementsRects();
+          const draggableIds = this.ranges.map((range) => range.id);
+          const draggableItems = draggableIds.map((id, index) => ({
+              id: id.toString(),
+              size: rects[index].height,
+              position: rects[index].y,
+          }));
+          this.dragAndDrop.start("vertical", {
+              draggedItemId: rangeId.toString(),
+              initialMousePosition: event.clientY,
+              items: draggableItems,
+              containerEl: this.selectionRef.el,
+              onDragEnd: (dimensionName, finalIndex) => {
+                  const originalIndex = draggableIds.findIndex((id) => id === rangeId);
+                  if (originalIndex === finalIndex) {
+                      return;
+                  }
+                  const draggedItems = [...draggableIds];
+                  draggedItems.splice(originalIndex, 1);
+                  draggedItems.splice(finalIndex, 0, rangeId);
+                  this.props.onSelectionReordered?.(this.store.selectionInputs.map((range) => draggedItems.indexOf(range.id)));
+                  this.props.onSelectionConfirmed?.();
+                  this.store.confirm();
+              },
           });
       }
+      getRangeElementsRects() {
+          return Array.from(this.selectionRef.el.children).map((el) => el.getBoundingClientRect());
+      }
       getColor(range) {
           if (!range.color) {
               return "";
@@ -37468,8 +37962,8 @@ stores.inject(MyMetaStore, storeInstance);
           this.store.addEmptyRange();
       }
       removeInput(rangeId) {
-          this.store.removeRange(rangeId);
-          this.triggerChange();
+          const index = this.store.selectionInputs.findIndex((range) => range.id === rangeId);
+          this.props.onSelectionRemoved?.(index);
           this.props.onSelectionConfirmed?.();
       }
       onInputChanged(rangeId, ev) {
@@ -37500,6 +37994,8 @@ stores.inject(MyMetaStore, storeInstance);
           ranges: Array,
           hasSingleRange: { type: Boolean, optional: true },
           onSelectionChanged: Function,
+          onSelectionReordered: { type: Function, optional: true },
+          onSelectionRemoved: { type: Function, optional: true },
           onSelectionConfirmed: Function,
       };
       get ranges() {
@@ -37608,11 +38104,11 @@ stores.inject(MyMetaStore, storeInstance);
           datasetDispatchResult: undefined,
           labelsDispatchResult: undefined,
       });
-      dataSeriesRanges = [];
+      dataSets = [];
       labelRange;
       chartTerms = ChartTerms;
       setup() {
-          this.dataSeriesRanges = this.props.definition.dataSets;
+          this.dataSets = this.props.definition.dataSets;
           this.labelRange = this.props.definition.labelRange;
       }
       get errorMessages() {
@@ -37657,22 +38153,46 @@ stores.inject(MyMetaStore, storeInstance);
        * button "confirm" is clicked
        */
       onDataSeriesRangesChanged(ranges) {
-          this.dataSeriesRanges = ranges.map((dataRange, i) => ({
-              ...this.dataSeriesRanges?.[i],
+          this.dataSets = ranges.map((dataRange, i) => ({
+              ...this.dataSets?.[i],
               dataRange,
           }));
           this.state.datasetDispatchResult = this.props.canUpdateChart(this.props.figureId, {
-              dataSets: this.dataSeriesRanges,
+              dataSets: this.dataSets,
+          });
+      }
+      onDataSeriesReordered(indexes) {
+          const colorGenerator = getChartColorsGenerator({ dataSets: this.dataSets }, this.dataSets.length);
+          const colors = this.dataSets.map((ds) => colorGenerator.next());
+          this.dataSets = indexes.map((i) => ({
+              backgroundColor: colors[i],
+              ...this.dataSets[i],
+          }));
+          this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+              dataSets: this.dataSets,
+          });
+      }
+      onDataSeriesRemoved(index) {
+          const colorGenerator = getChartColorsGenerator({ dataSets: this.dataSets }, this.dataSets.length);
+          const colors = this.dataSets.map((ds) => colorGenerator.next());
+          this.dataSets = this.dataSets
+              .map((ds, i) => ({
+              backgroundColor: colors[i],
+              ...ds,
+          }))
+              .filter((_, i) => i !== index);
+          this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+              dataSets: this.dataSets,
           });
       }
       onDataSeriesConfirmed() {
-          this.dataSeriesRanges = spreadRange(this.env.model.getters, this.dataSeriesRanges);
+          this.dataSets = spreadRange(this.env.model.getters, this.dataSets);
           this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
-              dataSets: this.dataSeriesRanges,
+              dataSets: this.dataSets,
           });
       }
       getDataSeriesRanges() {
-          return this.dataSeriesRanges;
+          return this.dataSets;
       }
       /**
        * Change the local labelRange. The model should be updated when the
@@ -37704,7 +38224,7 @@ stores.inject(MyMetaStore, storeInstance);
           const getters = this.env.model.getters;
           const sheetId = getters.getActiveSheetId();
           const labelRange = createValidRange(getters, sheetId, this.labelRange);
-          const dataSets = createDataSets(getters, this.dataSeriesRanges, sheetId, this.props.definition.dataSetsHaveTitle);
+          const dataSets = createDataSets(getters, this.dataSets, sheetId, this.props.definition.dataSetsHaveTitle);
           if (dataSets.length) {
               return dataSets[0].dataRange.zone.top + 1;
           }
@@ -37806,157 +38326,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  /**
-   * Start listening to pointer events and apply the given callbacks.
-   *
-   * @returns A function to remove the listeners.
-   */
-  function startDnd(onMouseMove, onMouseUp, onMouseDown = () => { }) {
-      const removeListeners = () => {
-          window.removeEventListener("pointerdown", onMouseDown);
-          window.removeEventListener("pointerup", _onMouseUp);
-          window.removeEventListener("dragstart", _onDragStart);
-          window.removeEventListener("pointermove", onMouseMove);
-          window.removeEventListener("wheel", onMouseMove);
-      };
-      const _onMouseUp = (ev) => {
-          onMouseUp(ev);
-          removeListeners();
-      };
-      function _onDragStart(ev) {
-          ev.preventDefault();
-      }
-      window.addEventListener("pointerdown", onMouseDown);
-      window.addEventListener("pointerup", _onMouseUp);
-      window.addEventListener("dragstart", _onDragStart);
-      window.addEventListener("pointermove", onMouseMove);
-      // mouse wheel on window is by default a passive event.
-      // preventDefault() is not allowed in passive event handler.
-      // https://chromestatus.com/feature/6662647093133312
-      window.addEventListener("wheel", onMouseMove, { passive: false });
-      return removeListeners;
-  }
-  /**
-   * Function to be used during a pointerdown event, this function allows to
-   * perform actions related to the pointermove and pointerup events and adjusts the viewport
-   * when the new position related to the pointermove event is outside of it.
-   * Among inputs are two callback functions. First intended for actions performed during
-   * the pointermove event, it receives as parameters the current position of the pointermove
-   * (occurrence of the current column and the current row). Second intended for actions
-   * performed during the pointerup event.
-   */
-  function dragAndDropBeyondTheViewport(env, cbMouseMove, cbMouseUp, only = false) {
-      let timeOutId = null;
-      let currentEv;
-      let previousEv;
-      let startingEv;
-      let startingX;
-      let startingY;
-      const getters = env.model.getters;
-      const sheetId = getters.getActiveSheetId();
-      const position = gridOverlayPosition();
-      let colIndex;
-      let rowIndex;
-      const onMouseDown = (ev) => {
-          previousEv = ev;
-          startingEv = ev;
-          startingX = startingEv.clientX - position.left;
-          startingY = startingEv.clientY - position.top;
-      };
-      const onMouseMove = (ev) => {
-          currentEv = ev;
-          if (timeOutId) {
-              return;
-          }
-          const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
-          let { top, left, bottom, right } = getters.getActiveMainViewport();
-          let { scrollX, scrollY } = getters.getActiveSheetDOMScrollInfo();
-          const { xSplit, ySplit } = getters.getPaneDivisions(sheetId);
-          let canEdgeScroll = false;
-          let timeoutDelay = MAX_DELAY;
-          const x = currentEv.clientX - position.left;
-          colIndex = getters.getColIndex(x);
-          if (only !== "vertical") {
-              const previousX = previousEv.clientX - position.left;
-              const edgeScrollInfoX = getters.getEdgeScrollCol(x, previousX, startingX);
-              if (edgeScrollInfoX.canEdgeScroll) {
-                  canEdgeScroll = true;
-                  timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoX.delay);
-                  let newTarget;
-                  switch (edgeScrollInfoX.direction) {
-                      case "reset":
-                          colIndex = xSplit;
-                          newTarget = xSplit;
-                          break;
-                      case 1:
-                          colIndex = right;
-                          newTarget = left + 1;
-                          break;
-                      case -1:
-                          colIndex = left - 1;
-                          while (env.model.getters.isColHidden(sheetId, colIndex)) {
-                              colIndex--;
-                          }
-                          newTarget = colIndex;
-                          break;
-                  }
-                  scrollX = getters.getColDimensions(sheetId, newTarget).start - offsetCorrectionX;
-              }
-          }
-          const y = currentEv.clientY - position.top;
-          rowIndex = getters.getRowIndex(y);
-          if (only !== "horizontal") {
-              const previousY = previousEv.clientY - position.top;
-              const edgeScrollInfoY = getters.getEdgeScrollRow(y, previousY, startingY);
-              if (edgeScrollInfoY.canEdgeScroll) {
-                  canEdgeScroll = true;
-                  timeoutDelay = Math.min(timeoutDelay, edgeScrollInfoY.delay);
-                  let newTarget;
-                  switch (edgeScrollInfoY.direction) {
-                      case "reset":
-                          rowIndex = ySplit;
-                          newTarget = ySplit;
-                          break;
-                      case 1:
-                          rowIndex = bottom;
-                          newTarget = top + edgeScrollInfoY.direction;
-                          break;
-                      case -1:
-                          rowIndex = top - 1;
-                          while (env.model.getters.isRowHidden(sheetId, rowIndex)) {
-                              rowIndex--;
-                          }
-                          newTarget = rowIndex;
-                          break;
-                  }
-                  scrollY = env.model.getters.getRowDimensions(sheetId, newTarget).start - offsetCorrectionY;
-              }
-          }
-          if (!canEdgeScroll) {
-              if (rowIndex === -1) {
-                  rowIndex = y < 0 ? 0 : getters.getNumberRows(sheetId) - 1;
-              }
-              if (colIndex === -1 && x < 0) {
-                  colIndex = x < 0 ? 0 : getters.getNumberCols(sheetId) - 1;
-              }
-          }
-          cbMouseMove(colIndex, rowIndex, currentEv);
-          if (canEdgeScroll) {
-              env.model.dispatch("SET_VIEWPORT_OFFSET", { offsetX: scrollX, offsetY: scrollY });
-              timeOutId = setTimeout(() => {
-                  timeOutId = null;
-                  onMouseMove(currentEv);
-              }, Math.round(timeoutDelay));
-          }
-          previousEv = currentEv;
-      };
-      const onMouseUp = () => {
-          clearTimeout(timeOutId);
-          cbMouseUp();
-      };
-      startDnd(onMouseMove, onMouseUp, onMouseDown);
-  }
-
   const LINE_VERTICAL_PADDING = 1;
   const PICKER_PADDING = 8;
   const ITEM_BORDER_WIDTH = 1;
@@ -39238,9 +39607,9 @@ stores.inject(MyMetaStore, storeInstance);
           return this.getDataSeriesRanges().slice(0, 1);
       }
       onDataSeriesConfirmed() {
-          this.dataSeriesRanges = spreadRange(this.env.model.getters, this.dataSeriesRanges).slice(0, 1);
+          this.dataSets = spreadRange(this.env.model.getters, this.dataSets).slice(0, 1);
           this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
-              dataSets: this.dataSeriesRanges,
+              dataSets: this.dataSets,
           });
       }
       getLabelRangeOptions() {
@@ -41098,289 +41467,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  function useDragAndDropListItems() {
-      let dndHelper;
-      const previousCursor = document.body.style.cursor;
-      let cleanupFns = [];
-      const cleanUp = () => {
-          dndHelper = undefined;
-          document.body.style.cursor = previousCursor;
-          cleanupFns.forEach((fn) => fn());
-          cleanupFns = [];
-      };
-      const start = (direction, args) => {
-          const onChange = () => {
-              document.body.style.cursor = "move";
-              if (!dndHelper)
-                  return;
-              Object.assign(state.itemsStyle, dndHelper.getItemStyles());
-              args.onChange?.();
-          };
-          state.cancel = () => {
-              state.draggedItemId = undefined;
-              state.itemsStyle = {};
-              document.body.style.cursor = previousCursor;
-              args.onCancel?.();
-              cleanUp();
-          };
-          const onDragEnd = (itemId, indexAtEnd) => {
-              state.draggedItemId = undefined;
-              state.itemsStyle = {};
-              document.body.style.cursor = previousCursor;
-              args.onDragEnd?.(itemId, indexAtEnd);
-              cleanUp();
-          };
-          document.body.style.cursor = "move";
-          state.draggedItemId = args.draggedItemId;
-          const container = direction === "horizontal"
-              ? new HorizontalContainer(args.containerEl)
-              : new VerticalContainer(args.containerEl);
-          dndHelper = new DOMDndHelper({
-              ...args,
-              container,
-              onChange,
-              onDragEnd,
-              onCancel: state.cancel,
-          });
-          const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
-          cleanupFns.push(stopListening);
-          const onScroll = dndHelper.onScroll.bind(dndHelper);
-          args.containerEl.addEventListener("scroll", onScroll);
-          cleanupFns.push(() => args.containerEl.removeEventListener("scroll", onScroll));
-          cleanupFns.push(dndHelper.destroy.bind(dndHelper));
-      };
-      owl.onWillUnmount(() => {
-          cleanUp();
-      });
-      const state = owl.useState({
-          itemsStyle: {},
-          draggedItemId: undefined,
-          start,
-          cancel: () => { },
-      });
-      return state;
-  }
-  class DOMDndHelper {
-      draggedItemId;
-      items;
-      container;
-      initialMousePosition;
-      currentMousePosition;
-      initialScroll;
-      minPosition;
-      maxPosition;
-      edgeScrollIntervalId;
-      onChange;
-      onCancel;
-      onDragEnd;
-      /**
-       * The dead zone is an area in which the pointermove events are ignored.
-       *
-       * This is useful when swapping the dragged item with a larger item. After the swap,
-       * the mouse is still hovering on the item  we just swapped with. In this case, we don't want
-       * a mouse move to trigger another swap the other way around, so we create a dead zone. We will clear
-       * the dead zone when the mouse leaves the swapped item.
-       */
-      deadZone;
-      constructor(args) {
-          this.items = args.items.map((item) => ({ ...item, positionAtStart: item.position }));
-          this.draggedItemId = args.draggedItemId;
-          this.container = args.container;
-          this.onChange = args.onChange;
-          this.onCancel = args.onCancel;
-          this.onDragEnd = args.onDragEnd;
-          this.initialMousePosition = args.initialMousePosition;
-          this.currentMousePosition = args.initialMousePosition;
-          this.initialScroll = this.container.scroll;
-          this.minPosition = this.items[0].position;
-          this.maxPosition =
-              this.items[this.items.length - 1].position + this.items[this.items.length - 1].size;
-      }
-      getItemStyles() {
-          const styles = {};
-          for (let item of this.items) {
-              styles[item.id] = this.getItemStyle(item.id);
-          }
-          return styles;
-      }
-      getItemStyle(itemId) {
-          const position = this.container.cssPositionProperty;
-          const style = {};
-          style.position = "relative";
-          style[position] = (this.getItemsPositions()[itemId] || 0) + "px";
-          style.transition = `${position} 0.5s`;
-          style["pointer-events"] = "none";
-          if (this.draggedItemId === itemId) {
-              style.transition = `${position} 0s`;
-              style["z-index"] = "1000";
-          }
-          return cssPropertiesToCss(style);
-      }
-      onScroll() {
-          this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
-      }
-      onMouseMove(ev) {
-          if (ev.button > 1) {
-              this.onCancel();
-              return;
-          }
-          const mousePosition = this.container.getMousePosition(ev);
-          this.currentMousePosition = mousePosition;
-          if (mousePosition < this.container.start || mousePosition > this.container.end) {
-              this.startEdgeScroll(mousePosition < this.container.start ? -1 : 1);
-              return;
-          }
-          else {
-              this.stopEdgeScroll();
-          }
-          this.moveDraggedItemToPosition(mousePosition + this.scrollOffset);
-      }
-      moveDraggedItemToPosition(position) {
-          const hoveredItemIndex = this.getHoveredItemIndex(position, this.items);
-          const draggedItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
-          const draggedItem = this.items[draggedItemIndex];
-          if (this.deadZone && this.isInZone(position, this.deadZone)) {
-              this.onChange(this.getItemsPositions());
-              return;
-          }
-          else if (this.isInZone(position, {
-              start: draggedItem.position,
-              end: draggedItem.position + draggedItem.size,
-          })) {
-              this.deadZone = undefined;
-          }
-          if (draggedItemIndex === hoveredItemIndex) {
-              this.onChange(this.getItemsPositions());
-              return;
-          }
-          const startIndex = Math.min(draggedItemIndex, hoveredItemIndex);
-          const endIndex = Math.max(draggedItemIndex, hoveredItemIndex);
-          const direction = Math.sign(hoveredItemIndex - draggedItemIndex);
-          let draggedItemMoveSize = 0;
-          for (let i = startIndex; i <= endIndex; i++) {
-              if (i === draggedItemIndex) {
-                  continue;
-              }
-              this.items[i].position -= direction * draggedItem.size;
-              draggedItemMoveSize += this.items[i].size;
-          }
-          draggedItem.position += direction * draggedItemMoveSize;
-          this.items.sort((item1, item2) => item1.position - item2.position);
-          this.deadZone =
-              direction > 0
-                  ? { start: position, end: draggedItem.position }
-                  : { start: draggedItem.position + draggedItem.size, end: position };
-          this.onChange(this.getItemsPositions());
-      }
-      onMouseUp(ev) {
-          if (ev.button !== 0) {
-              this.onCancel();
-          }
-          ev.stopPropagation();
-          ev.preventDefault();
-          const targetItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
-          this.onDragEnd(this.draggedItemId, targetItemIndex);
-          this.stopEdgeScroll();
-          return false;
-      }
-      startEdgeScroll(direction) {
-          if (this.edgeScrollIntervalId)
-              return;
-          this.edgeScrollIntervalId = window.setInterval(() => {
-              const offset = direction * 3;
-              this.container.scroll += offset;
-          }, 5);
-      }
-      stopEdgeScroll() {
-          window.clearInterval(this.edgeScrollIntervalId);
-          this.edgeScrollIntervalId = undefined;
-      }
-      /**
-       * Get the index of the item the given mouse position is inside.
-       * If the mouse is outside the container, return the first or last item index.
-       */
-      getHoveredItemIndex(mousePosition, items) {
-          if (mousePosition <= this.minPosition)
-              return 0;
-          if (mousePosition >= this.maxPosition)
-              return items.length - 1;
-          return items.findIndex((item) => item.position + item.size >= mousePosition);
-      }
-      getItemsPositions() {
-          const positions = {};
-          for (let item of this.items) {
-              if (item.id !== this.draggedItemId) {
-                  positions[item.id] = item.position - item.positionAtStart;
-                  continue;
-              }
-              const mouseOffset = this.currentMousePosition - this.initialMousePosition;
-              let start = mouseOffset + this.scrollOffset;
-              start = Math.max(this.minPosition - item.positionAtStart, start);
-              start = Math.min(this.maxPosition - item.positionAtStart - item.size, start);
-              positions[item.id] = start;
-          }
-          return positions;
-      }
-      isInZone(position, zone) {
-          return position >= zone.start && position <= zone.end;
-      }
-      get scrollOffset() {
-          return this.container.scroll - this.initialScroll;
-      }
-      destroy() {
-          this.stopEdgeScroll();
-      }
-  }
-  class ContainerWrapper {
-      el;
-      constructor(el) {
-          this.el = el;
-      }
-      get containerRect() {
-          return this.el.getBoundingClientRect();
-      }
-  }
-  class VerticalContainer extends ContainerWrapper {
-      get start() {
-          return this.containerRect.top;
-      }
-      get end() {
-          return this.containerRect.bottom;
-      }
-      get cssPositionProperty() {
-          return "top";
-      }
-      get scroll() {
-          return this.el.scrollTop;
-      }
-      set scroll(scroll) {
-          this.el.scrollTop = scroll;
-      }
-      getMousePosition(ev) {
-          return ev.clientY;
-      }
-  }
-  class HorizontalContainer extends ContainerWrapper {
-      get start() {
-          return this.containerRect.left;
-      }
-      get end() {
-          return this.containerRect.right;
-      }
-      get cssPositionProperty() {
-          return "left";
-      }
-      get scroll() {
-          return this.el.scrollLeft;
-      }
-      set scroll(scroll) {
-          this.el.scrollLeft = scroll;
-      }
-      getMousePosition(ev) {
-          return ev.clientX;
-      }
-  }
-
   /**
    * Manages an event listener on a ref. Useful for hooks that want to manage
    * event listeners, especially more than one. Prefer using t-on directly in
@@ -46284,7 +46370,7 @@ stores.inject(MyMetaStore, storeInstance);
       onIterationEndEvaluation: (pivot) => pivot.markAsDirtyForEvaluation(),
       dateGranularities: [...dateGranularities],
       datetimeGranularities: [...dateGranularities, "hour_number", "minute_number", "second_number"],
-      isMeasureCandidate: (field) => !["datetime", "boolean"].includes(field.type),
+      isMeasureCandidate: (field) => field.type !== "boolean",
       isGroupable: () => true,
   });
 
@@ -46502,8 +46588,11 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       getUnusedGranularities(fields, definition) {
-          const { columns, rows } = definition;
-          const dateFields = columns.concat(rows).filter((dimension) => {
+          const { columns, rows, measures } = definition;
+          const dateFields = columns
+              .concat(rows)
+              .concat(measures)
+              .filter((dimension) => {
               const fieldType = fields[dimension.fieldName]?.type;
               return fieldType === "date" || fieldType === "datetime";
           });
@@ -48775,7 +48864,7 @@ stores.inject(MyMetaStore, storeInstance);
               return;
           }
           const sheetId = this.env.model.getters.getActiveSheetId();
-          const zone = this.env.model.getters.getSelectedZone();
+          const zone = positionToZone(this.env.model.getters.getSelection().anchor.cell);
           const rect = this.env.model.getters.getVisibleRect(zone);
           if (!deepEquals(rect, this.rect) || sheetId !== this.composerStore.currentEditedCell.sheetId) {
               this.isCellReferenceVisible = true;
@@ -50611,13 +50700,23 @@ stores.inject(MyMetaStore, storeInstance);
       drawLayer(renderingContext, layer) {
           switch (layer) {
               case "Background":
-                  const boxes = this.getGridBoxes();
-                  this.drawBackground(renderingContext, boxes);
-                  this.drawOverflowingCellBackground(renderingContext, boxes);
-                  this.drawCellBackground(renderingContext, boxes);
-                  this.drawBorders(renderingContext, boxes);
-                  this.drawTexts(renderingContext, boxes);
-                  this.drawIcon(renderingContext, boxes);
+                  this.drawGlobalBackground(renderingContext);
+                  for (const zone of this.getters.getAllActiveViewportsZones()) {
+                      const { ctx } = renderingContext;
+                      ctx.save();
+                      ctx.beginPath();
+                      const rect = this.getters.getVisibleRect(zone);
+                      ctx.rect(rect.x, rect.y, rect.width, rect.height);
+                      ctx.clip();
+                      const boxes = this.getGridBoxes(zone);
+                      this.drawBackground(renderingContext, boxes);
+                      this.drawOverflowingCellBackground(renderingContext, boxes);
+                      this.drawCellBackground(renderingContext, boxes);
+                      this.drawBorders(renderingContext, boxes);
+                      this.drawTexts(renderingContext, boxes);
+                      this.drawIcon(renderingContext, boxes);
+                      ctx.restore();
+                  }
                   this.drawFrozenPanes(renderingContext);
                   break;
               case "Headers":
@@ -50628,12 +50727,15 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
           }
       }
-      drawBackground(renderingContext, boxes) {
-          const { ctx, thinLineWidth } = renderingContext;
+      drawGlobalBackground(renderingContext) {
+          const { ctx } = renderingContext;
           const { width, height } = this.getters.getSheetViewDimensionWithHeaders();
           // white background
           ctx.fillStyle = "#ffffff";
           ctx.fillRect(0, 0, width + CANVAS_SHIFT, height + CANVAS_SHIFT);
+      }
+      drawBackground(renderingContext, boxes) {
+          const { ctx, thinLineWidth } = renderingContext;
           const areGridLinesVisible = !this.getters.isDashboard() &&
               this.getters.getGridLinesVisibility(this.getters.getActiveSheetId());
           const inset = areGridLinesVisible ? 0.1 * thinLineWidth : 0;
@@ -51064,7 +51166,7 @@ stores.inject(MyMetaStore, storeInstance);
           const position = { sheetId, col, row };
           const cell = this.getters.getEvaluatedCell(position);
           const showFormula = this.getters.shouldShowFormulas();
-          const { x, y, width, height } = this.getters.getVisibleRect(zone);
+          const { x, y, width, height } = this.getters.getRect(zone);
           const { verticalAlign } = this.getters.getCellStyle(position);
           let style = this.getters.getCellComputedStyle(position);
           if (this.fingerprints.isEnabled) {
@@ -51189,12 +51291,16 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return box;
       }
-      getGridBoxes() {
+      getGridBoxes(zone) {
           const boxes = [];
-          const visibleCols = this.getters.getSheetViewVisibleCols();
+          const visibleCols = this.getters
+              .getSheetViewVisibleCols()
+              .filter((col) => col >= zone.left && col <= zone.right);
           const left = visibleCols[0];
           const right = visibleCols[visibleCols.length - 1];
-          const visibleRows = this.getters.getSheetViewVisibleRows();
+          const visibleRows = this.getters
+              .getSheetViewVisibleRows()
+              .filter((row) => row >= zone.top && row <= zone.bottom);
           const top = visibleRows[0];
           const bottom = visibleRows[visibleRows.length - 1];
           const viewport = { left, right, top, bottom };
@@ -53426,7 +53532,7 @@ stores.inject(MyMetaStore, storeInstance);
       /*
        * Reconstructs the original formula string based on new dependencies
        */
-      getFormulaString(sheetId, tokens, dependencies, useFixedReference = false) {
+      getFormulaString(sheetId, tokens, dependencies, useBoundedReference = false) {
           if (!dependencies.length) {
               return concat(tokens.map((token) => token.value));
           }
@@ -53434,7 +53540,7 @@ stores.inject(MyMetaStore, storeInstance);
           return concat(tokens.map((token) => {
               if (token.type === "REFERENCE") {
                   const range = dependencies[rangeIndex++];
-                  return this.getters.getRangeString(range, sheetId, { useFixedReference });
+                  return this.getters.getRangeString(range, sheetId, { useBoundedReference });
               }
               return token.value;
           }));
@@ -53714,7 +53820,7 @@ stores.inject(MyMetaStore, storeInstance);
               if (token.type === "REFERENCE") {
                   const index = rangeIndex++;
                   return this.getRangeString(this.compiledFormula.dependencies[index], this.sheetId, {
-                      useFixedReference: true,
+                      useBoundedReference: true,
                   });
               }
               return token.value;
@@ -54051,7 +54157,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (data.sheets) {
               for (let sheet of data.sheets) {
                   if (this.cfRules[sheet.id]) {
-                      sheet.conditionalFormats = this.cfRules[sheet.id].map((rule) => this.mapToConditionalFormat(sheet.id, rule, { useFixedReference: true }));
+                      sheet.conditionalFormats = this.cfRules[sheet.id].map((rule) => this.mapToConditionalFormat(sheet.id, rule, { useBoundedReference: true }));
                   }
               }
           }
@@ -54120,9 +54226,9 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // Private
       // ---------------------------------------------------------------------------
-      mapToConditionalFormat(sheetId, cf, { useFixedReference } = { useFixedReference: false }) {
+      mapToConditionalFormat(sheetId, cf, { useBoundedReference } = { useBoundedReference: false }) {
           const ranges = cf.ranges.map((range) => {
-              return this.getters.getRangeString(range, sheetId, { useFixedReference });
+              return this.getters.getRangeString(range, sheetId, { useBoundedReference });
           });
           if (cf.rule.type !== "DataBarRule") {
               return {
@@ -54137,7 +54243,7 @@ stores.inject(MyMetaStore, storeInstance);
                   ...cf.rule,
                   rangeValues: cf.rule.rangeValues &&
                       this.getters.getRangeString(cf.rule.rangeValues, sheetId, {
-                          useFixedReference,
+                          useBoundedReference,
                       }),
               },
               ranges,
@@ -54580,7 +54686,7 @@ stores.inject(MyMetaStore, storeInstance);
               for (const rule of this.rules[sheet.id]) {
                   sheet.dataValidationRules.push({
                       ...rule,
-                      ranges: rule.ranges.map((range) => this.getters.getRangeString(range, sheet.id, { useFixedReference: true })),
+                      ranges: rule.ranges.map((range) => this.getters.getRangeString(range, sheet.id, { useBoundedReference: true })),
                   });
               }
           }
@@ -56002,9 +56108,9 @@ stores.inject(MyMetaStore, storeInstance);
        * @param range the range (received from getRangeFromXC or getRangeFromZone)
        * @param forSheetId the id of the sheet where the range string is supposed to be used.
        * @param options
-       * @param options.useFixedReference if true, the range will be returned with fixed row and column
+       * @param options.useBoundedReference if true, the range will be returned with fixed row and column
        */
-      getRangeString(range, forSheetId, options = { useFixedReference: false }) {
+      getRangeString(range, forSheetId, options = { useBoundedReference: false }) {
           if (!range) {
               return CellErrorType.InvalidReference;
           }
@@ -56107,13 +56213,13 @@ stores.inject(MyMetaStore, storeInstance);
       /**
        * Get a Xc string that represent a part of a range
        */
-      getRangePartString(range, part, options = { useFixedReference: false }) {
+      getRangePartString(range, part, options = { useBoundedReference: false }) {
           const colFixed = range.parts && range.parts[part]?.colFixed ? "$" : "";
           const col = part === 0 ? numberToLetters(range.zone.left) : numberToLetters(range.zone.right);
           const rowFixed = range.parts && range.parts[part]?.rowFixed ? "$" : "";
           const row = part === 0 ? String(range.zone.top + 1) : String(range.zone.bottom + 1);
           let str = "";
-          if (range.isFullCol && !options.useFixedReference) {
+          if (range.isFullCol && !options.useBoundedReference) {
               if (part === 0 && range.unboundedZone.hasHeader) {
                   str = colFixed + col + rowFixed + row;
               }
@@ -56121,7 +56227,7 @@ stores.inject(MyMetaStore, storeInstance);
                   str = colFixed + col;
               }
           }
-          else if (range.isFullRow && !options.useFixedReference) {
+          else if (range.isFullRow && !options.useBoundedReference) {
               if (part === 0 && range.unboundedZone.hasHeader) {
                   str = colFixed + col + rowFixed + row;
               }
@@ -66847,8 +66953,12 @@ stores.inject(MyMetaStore, storeInstance);
               },
           ];
           handler.paste({ zones: pasteTarget, sheetId }, data, { isCutOperation: true });
+          const selection = pasteTarget[0];
+          const col = selection.left;
+          const row = selection.top;
+          this.setSelectionMixin({ zone: selection, cell: { col, row } }, [selection]);
           const toRemove = isBasedBefore ? cmd.elements.map((el) => el + thickness) : cmd.elements;
-          let currentIndex = cmd.base;
+          let currentIndex = isBasedBefore ? cmd.base : cmd.base + 1;
           const resizingGroups = {};
           for (const element of toRemove) {
               const size = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, element);
@@ -67139,22 +67249,33 @@ stores.inject(MyMetaStore, storeInstance);
       }
       /**
        *
-       * @param zone
-       * @returns Computes the absolute coordinate of a given zone inside the viewport
+       * Computes the visible coordinates & dimensions of a given zone inside the viewport
+       *
        */
-      getRect(zone) {
+      getVisibleRect(zone) {
           const targetZone = intersection(zone, this);
           if (targetZone) {
               const x = this.getters.getColRowOffset("COL", this.left, targetZone.left) + this.offsetCorrectionX;
               const y = this.getters.getColRowOffset("ROW", this.top, targetZone.top) + this.offsetCorrectionY;
               const width = Math.min(this.getters.getColRowOffset("COL", targetZone.left, targetZone.right + 1), this.viewportWidth);
               const height = Math.min(this.getters.getColRowOffset("ROW", targetZone.top, targetZone.bottom + 1), this.viewportHeight);
-              return {
-                  x,
-                  y,
-                  width,
-                  height,
-              };
+              return { x, y, width, height };
+          }
+          return undefined;
+      }
+      /**
+       *
+       * @returns Computes the absolute coordinates & dimensions of a given zone inside the viewport
+       *
+       */
+      getFullRect(zone) {
+          const targetZone = intersection(zone, this);
+          if (targetZone) {
+              const x = this.getters.getColRowOffset("COL", this.left, zone.left) + this.offsetCorrectionX;
+              const y = this.getters.getColRowOffset("ROW", this.top, zone.top) + this.offsetCorrectionY;
+              const width = this.getters.getColRowOffset("COL", zone.left, zone.right + 1);
+              const height = this.getters.getColRowOffset("ROW", zone.top, zone.bottom + 1);
+              return { x, y, width, height };
           }
           return undefined;
       }
@@ -67324,6 +67445,8 @@ stores.inject(MyMetaStore, storeInstance);
           "isPositionVisible",
           "getColDimensionsInViewport",
           "getRowDimensionsInViewport",
+          "getAllActiveViewportsZones",
+          "getRect",
       ];
       viewports = {};
       /**
@@ -67707,16 +67830,27 @@ stores.inject(MyMetaStore, storeInstance);
       getVisibleRectWithoutHeaders(zone) {
           const sheetId = this.getters.getActiveSheetId();
           const viewportRects = this.getSubViewports(sheetId)
-              .map((viewport) => viewport.getRect(zone))
+              .map((viewport) => viewport.getVisibleRect(zone))
               .filter(isDefined);
           if (viewportRects.length === 0) {
               return { x: 0, y: 0, width: 0, height: 0 };
           }
-          const x = Math.min(...viewportRects.map((rect) => rect.x));
-          const y = Math.min(...viewportRects.map((rect) => rect.y));
-          const width = Math.max(...viewportRects.map((rect) => rect.x + rect.width)) - x;
-          const height = Math.max(...viewportRects.map((rect) => rect.y + rect.height)) - y;
-          return { x, y, width, height };
+          return this.recomposeRect(viewportRects);
+      }
+      /**
+       * Computes the actual size and position (:Rect) of the zone on the canvas
+       * regardless of the viewport dimensions.
+       */
+      getRect(zone) {
+          const sheetId = this.getters.getActiveSheetId();
+          const viewportRects = this.getSubViewports(sheetId)
+              .map((viewport) => viewport.getFullRect(zone))
+              .filter(isDefined);
+          if (viewportRects.length === 0) {
+              return { x: 0, y: 0, width: 0, height: 0 };
+          }
+          const rect = this.recomposeRect(viewportRects);
+          return { ...rect, x: rect.x + this.gridOffsetX, y: rect.y + this.gridOffsetY };
       }
       /**
        * Returns the position of the MainViewport relatively to the start of the grid (without headers)
@@ -67760,6 +67894,10 @@ stores.inject(MyMetaStore, storeInstance);
               end: start + (isRowHidden ? 0 : size),
           };
       }
+      getAllActiveViewportsZones() {
+          const sheetId = this.getters.getActiveSheetId();
+          return this.getSubViewports(sheetId);
+      }
       // ---------------------------------------------------------------------------
       // Private
       // ---------------------------------------------------------------------------
@@ -67950,6 +68088,13 @@ stores.inject(MyMetaStore, storeInstance);
           const height = this.sheetViewHeight + this.gridOffsetY;
           return { xRatio: offsetCorrectionX / width, yRatio: offsetCorrectionY / height };
       }
+      recomposeRect(viewportRects) {
+          const x = Math.min(...viewportRects.map((rect) => rect.x));
+          const y = Math.min(...viewportRects.map((rect) => rect.y));
+          const width = Math.max(...viewportRects.map((rect) => rect.x + rect.width)) - x;
+          const height = Math.max(...viewportRects.map((rect) => rect.y + rect.height)) - y;
+          return { x, y, width, height };
+      }
   }
 
   class HeaderPositionsUIPlugin extends UIPlugin {
@@ -69791,6 +69936,13 @@ stores.inject(MyMetaStore, storeInstance);
           currentStyle: DEFAULT_BORDER_DESC.style,
           currentPosition: undefined,
       });
+      setup() {
+          owl.onWillUpdateProps((newProps) => {
+              if (!newProps.showBorderEditor) {
+                  this.state.currentPosition = undefined;
+              }
+          });
+      }
       get borderEditorAnchorRect() {
           const button = this.borderEditorButtonRef.el;
           const buttonRect = button.getBoundingClientRect();
@@ -75102,9 +75254,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.2.0-alpha.2";
-  __info__.date = "2025-01-15T08:06:32.137Z";
-  __info__.hash = "4f96c47";
+  __info__.version = "18.2.0-alpha.3";
+  __info__.date = "2025-01-27T10:07:28.716Z";
+  __info__.hash = "63a13e5";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);