feat: auto-scroll iframes

src/state/auto-scroller/fluid-scroller/get-iframe-scroll.ts

@@ -0,0 +1,67 @@
+import { BoxModel, getBox } from 'css-box-model';
+import { DraggableDimension, DraggingState } from '../../../types';
+import querySelectorAllIframe from '../../../view/iframe/query-selector-all-iframe';
+import getScroll from './get-scroll';
+import { AutoScrollerOptions } from './auto-scroller-options-types';
+
+const resetToOrigin = (box: BoxModel) => ({
+  width: box.marginBox.width,
+  height: box.marginBox.height,
+  top: 0,
+  left: 0,
+  right: box.marginBox.width,
+  bottom: box.marginBox.height,
+  center: {
+    x: box.marginBox.width / 2,
+    y: box.marginBox.height / 2,
+  },
+  x: 0,
+  y: 0,
+});
+
+/**
+ * Get the scroll for a draggable inside an iframe
+ *
+ * - Since iframes are not fully managed by the state, we have to access the elements directly.
+ * - This will not work with multiple draggable contexts
+ */
+export default ({
+  draggable,
+  dragStartTime,
+  getAutoScrollerOptions,
+  shouldUseTimeDampening,
+  state,
+}: {
+  state: DraggingState;
+  draggable: DraggableDimension;
+  dragStartTime: number;
+  shouldUseTimeDampening: boolean;
+  getAutoScrollerOptions: () => AutoScrollerOptions;
+}) => {
+  const el = querySelectorAllIframe(
+    `[data-rfd-draggable-id="${state.critical.draggable.id}"]`,
+  )[0];
+
+  const win = el?.ownerDocument.defaultView || window;
+
+  const isInIframe = win !== window;
+
+  if (isInIframe) {
+    const iframe = win.frameElement as HTMLIFrameElement;
+    const viewportBox = getBox(iframe);
+    const box = getBox(el);
+
+    const change = getScroll({
+      dragStartTime,
+      container: resetToOrigin(viewportBox), // Reset to origin because we don't care about position of the iframe
+      subject: draggable.client.marginBox,
+      center: box.borderBox.center,
+      shouldUseTimeDampening,
+      getAutoScrollerOptions,
+    });
+
+    return { change, window: win };
+  }
+
+  return null;
+};

src/state/auto-scroller/fluid-scroller/index.ts

@@ -8,7 +8,7 @@ import { AutoScrollerOptions } from './auto-scroller-options-types';
 import { defaultAutoScrollerOptions } from './config';
 
 export interface PublicArgs {
-  scrollWindow: (change: Position) => void;
+  scrollWindow: (change: Position, win?: Window) => void;
   scrollDroppable: (id: DroppableId, change: Position) => void;
   getAutoScrollerOptions?: () => AutoScrollerOptions;
 }

src/state/auto-scroller/fluid-scroller/scroll.ts

@@ -11,12 +11,13 @@ import whatIsDraggedOver from '../../droppable/what-is-dragged-over';
 import getWindowScrollChange from './get-window-scroll-change';
 import getDroppableScrollChange from './get-droppable-scroll-change';
 import { AutoScrollerOptions } from './auto-scroller-options-types';
+import getIframeScroll from './get-iframe-scroll';
 
 interface Args {
   state: DraggingState;
   dragStartTime: number;
   shouldUseTimeDampening: boolean;
-  scrollWindow: (scroll: Position) => void;
+  scrollWindow: (scroll: Position, win?: Window) => void;
   scrollDroppable: (id: DroppableId, scroll: Position) => void;
   getAutoScrollerOptions: () => AutoScrollerOptions;
 }
@@ -51,6 +52,20 @@ export default ({
     }
   }
 
+  const iframeScroll = getIframeScroll({
+    state,
+    dragStartTime,
+    shouldUseTimeDampening,
+    getAutoScrollerOptions,
+    draggable,
+  });
+
+  if (iframeScroll?.change) {
+    scrollWindow(iframeScroll.change, iframeScroll.window);
+
+    return;
+  }
+
   const droppable: DroppableDimension | null = getBestScrollableDroppable({
     center,
     destination: whatIsDraggedOver(state.impact),

src/view/window/scroll-window.ts

@@ -1,6 +1,6 @@
 import type { Position } from 'css-box-model';
 
-// Not guarenteed to scroll by the entire amount
-export default (change: Position): void => {
-  window.scrollBy(change.x, change.y);
+// Not guaranteed to scroll by the entire amount
+export default (change: Position, win: Window = window): void => {
+  win.scrollBy(change.x, change.y);
 };