feat: auto-scroll iframes

Author: chrisvxd

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

@@ -0,0 +1,76 @@
+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';
+import { Transform, getTransform } from '../../../view/transform';
+
+const resetToOrigin = (box: BoxModel, transform: Transform | null) => {
+  const { scaleX = 1, scaleY = 1 } = transform?.matrix || {};
+
+  const width = box.marginBox.width / scaleX;
+  const height = box.marginBox.height / scaleY;
+
+  return {
+    width,
+    height,
+    top: 0,
+    left: 0,
+    right: width,
+    bottom: height,
+    center: {
+      x: width / 2,
+      y: 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 transform = getTransform(iframe);
+
+    const change = getScroll({
+      dragStartTime,
+      container: resetToOrigin(viewportBox, transform), // 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);
 };