@measured/dnd - npm Package Compare versions

Comparing version 16.6.0-canary.5317537 to 16.6.0-canary.6943d1e

package.json

 {
   "name": "@measured/dnd",
-  "version": "16.6.0-canary.5317537",
+  "version": "16.6.0-canary.6943d1e",
   "private": false,
-  "description": "Beautiful and accessible drag and drop for lists with React",
-  "author": "Alex Reardon <[e-mail]>",
+  "description": "Beautiful and accessible drag and drop for lists with React, with iframe and CSS transform support",
+  "author": "Measured Corporation Ltd <[e-mail]>",
   "maintainers": [
-    "Gabriel Santerre <[e-mail]>",
-    "Reece Carolan <[e-mail]>"
+    "Measured Corporation Ltd <[e-mail]>"
   ],
@@ -25,6 +24,6 @@ "keywords": [
     "type": "git",
-    "url": "https://github.com/hello-pangea/dnd.git"
+    "url": "https://github.com/measuredco/dnd.git"
   },
   "bugs": {
-    "url": "https://github.com/hello-pangea/dnd/issues"
+    "url": "https://github.com/measuredco/dnd/issues"
   },
@@ -31,0 +30,0 @@ "main": "dist/dnd.cjs.js",

src/state/dimension-marshal/get-initial-publish.ts

@@ -34,3 +34,3 @@ import type { Position } from 'css-box-model';
   timings.start(timingKey);
-  const viewport: Viewport = getViewport(critical);
+  const viewport: Viewport = getViewport();
   const windowScroll: Position = viewport.scroll.current;
@@ -37,0 +37,0 @@

src/types.ts

 import type { BoxModel, Rect, Position } from 'css-box-model';
-import { Transform } from './view/iframe/transform';
+import { Transform } from './view/transform';
 
@@ -4,0 +4,0 @@ export type Id = string;

src/view/draggable/get-style.ts

@@ -14,8 +14,3 @@ import type { BoxModel } from 'css-box-model';
 } from './draggable-types';
-import {
-  applyTransformPoint,
-  applyTransformRect,
-  removeTransformPoint,
-  removeTransformRect,
-} from '../iframe/transform';
+import { applyTransformPoint } from '../transform';
 
@@ -119,8 +114,4 @@ export const zIndexOptions: ZIndexOptions = {
     transform: transforms.moveTo({
-      x:
-        secondary.offset.x /
-        (secondary.dimension?.transform?.matrix.scaleX || 1),
-      y:
-        secondary.offset.y /
-        (secondary.dimension?.transform?.matrix.scaleY || 1),
+      x: secondary.offset.x,
+      y: secondary.offset.y,
     }),
@@ -127,0 +118,0 @@ // transition style is applied in the head

src/view/use-draggable-publisher/get-dimension.ts

 import { calculateBox, withScroll } from 'css-box-model';
-import type { BoxModel, Position } from 'css-box-model';
+import type { Position } from 'css-box-model';
 import type {
@@ -10,27 +10,5 @@ DraggableDescriptor,
 import getIframeOffset from '../iframe/get-iframe-offset';
-import getIframe from '../iframe/get-iframe';
-import { applyTransformBox, getTransform } from '../iframe/transform';
+import { applyTransformBox, getTransform } from '../transform';
 import { applyOffsetBox } from '../iframe/apply-offset';
 
-/**
- * If the draggable is within an iframe, offset it against the iframe position and transform it based on any CSS transforms applied to the iframe.
- */
-const handleIframes = (el: HTMLElement, client: BoxModel, page: BoxModel) => {
-  const offset = getIframeOffset(el);
-  const iframe = getIframe(el);
-  const transform = iframe ? getTransform(iframe, { x: 0, y: 0 }) : null;
-
-  let clientCopy = { ...client };
-  let pageCopy = { ...page };
-
-  if (transform) {
-    clientCopy = applyTransformBox(clientCopy, transform);
-    pageCopy = applyTransformBox(pageCopy, transform);
-  }
-
-  pageCopy = applyOffsetBox(pageCopy, offset);
-
-  return { client: clientCopy, page: pageCopy, transform };
-};
-
 export default function getDimension(
@@ -43,4 +21,8 @@ descriptor: DraggableDescriptor,
 
-  const client = calculateBox(el.getBoundingClientRect(), computedStyles);
-  const page = withScroll(
+  const originalClient = calculateBox(
+    el.getBoundingClientRect(),
+    computedStyles,
+  );
+  let client = { ...originalClient };
+  let page = withScroll(
     calculateBox(el.getBoundingClientRect(), computedStyles),
@@ -50,10 +32,17 @@ windowScroll,
 
-  const {
-    client: modifiedClient,
-    page: modifiedPage,
-    transform,
-  } = handleIframes(el, client, page);
+  const transform = getTransform(el, { x: 0, y: 0 });
 
+  if (transform) {
+    client = applyTransformBox(client, transform);
+    page = applyTransformBox(page, transform);
+  }
+
+  const iframeOffset = getIframeOffset(el);
+
+  if (iframeOffset) {
+    page = applyOffsetBox(page, iframeOffset);
+  }
+
   const placeholder: Placeholder = {
-    client,
+    client: originalClient,
     tagName: el.tagName.toLowerCase(),
@@ -63,4 +52,4 @@ display: computedStyles.display,
   const displaceBy: Position = {
-    x: modifiedClient.marginBox.width,
-    y: modifiedClient.marginBox.height,
+    x: originalClient.marginBox.width,
+    y: originalClient.marginBox.height,
   };
@@ -72,4 +61,4 @@
     displaceBy,
-    client: modifiedClient,
-    page: modifiedPage,
+    client,
+    page,
     transform,
@@ -76,0 +65,0 @@ };

src/view/use-droppable-publisher/get-dimension.ts

@@ -13,3 +13,5 @@ import { getBox, withScroll, createBox, expand } from 'css-box-model';
 import getScroll from './get-scroll';
-import getOffsettedBox from '../iframe/get-offsetted-box';
+import getIframeOffset from '../iframe/get-iframe-offset';
+import { applyOffsetBox } from '../iframe/apply-offset';
+import { applyTransformBox, getTransform } from '../transform';
 
@@ -20,4 +22,14 @@ const getClient = (
 ): BoxModel => {
-  const base: BoxModel = getOffsettedBox(targetRef);
+  let base: BoxModel = getBox(targetRef);
 
+  const transform = getTransform(targetRef, { x: 0, y: 0 });
+
+  if (transform) {
+    base = applyTransformBox(base, transform);
+  }
+
+  const offset = getIframeOffset(targetRef);
+
+  base = applyOffsetBox(base, offset);
+
   // Droppable has no scroll parent
@@ -24,0 +36,0 @@ if (!closestScrollable) {

src/view/use-droppable-publisher/get-scroll.ts

 import type { Position } from 'css-box-model';
+import { getTransform } from '../transform';
 
@@ -7,5 +8,10 @@ export default (el: Element): Position => {
   if (isIframe) {
-    const targetEl = (el as HTMLIFrameElement).contentWindow!;
+    const win = (el as HTMLIFrameElement).contentWindow!;
 
-    return { x: targetEl.scrollX, y: targetEl.scrollY };
+    const transform = getTransform(el as HTMLElement);
+
+    return {
+      x: win.scrollX * (transform?.matrix.scaleX || 1),
+      y: win.scrollY * (transform?.matrix.scaleY || 1),
+    };
   }
@@ -12,0 +18,0 @@

src/view/use-droppable-publisher/use-droppable-publisher.ts

@@ -7,3 +7,3 @@ import { useRef } from 'react';
 import { invariant } from '../../invariant';
-import checkForNestedScrollContainers from './check-for-nested-scroll-container';
+// import checkForNestedScrollContainers from './check-for-nested-scroll-container';
 import * as dataAttr from '../data-attributes';
@@ -173,5 +173,5 @@ import { origin } from '../../state/position';
         // print a debug warning if using an unsupported nested scroll container setup
-        if (process.env.NODE_ENV !== 'production') {
-          checkForNestedScrollContainers(scrollable);
-        }
+        // if (process.env.NODE_ENV !== 'production') {
+        //   checkForNestedScrollContainers(scrollable);
+        // }
       }
@@ -178,0 +178,0 @@

src/view/use-sensor-marshal/sensors/util/offset-point.ts

 import { Position } from 'css-box-model';
-import {
-  applyTransformPoint,
-  getMatrix,
-  getOrigin,
-} from '../../../iframe/transform';
+import { applyTransformPoint, getTransform } from '../../../transform';
 
@@ -20,7 +16,4 @@ export default function offsetPoint(
 
-    const iframeStyles = window.getComputedStyle(iframe);
+    const transform = getTransform(iframe);
 
-    const transform = getMatrix(iframeStyles.transform);
-    const origin = getOrigin(iframeStyles.transformOrigin) || { x: 0, y: 0 };
-
     offsetX = rect.left;
@@ -33,4 +26,4 @@ offsetY = rect.top;
         y,
-        transform,
-        origin,
+        transform.matrix,
+        transform.origin,
       );
@@ -37,0 +30,0 @@

No alert changes

Improved metrics

Number of low supply chain risk alerts

274

decreased by-1.44%

Worsened metrics

Total package byte prevSize

1332592

decreased by-0.77%

Number of package files

251

decreased by-0.79%

Lines of code

39373

decreased by-0.72%

No dependency changes