@cmssy/react 0.1.4 → 0.1.5

package/dist/client.cjs

@@ -304,18 +304,41 @@ function blockElements() {
     )
   ).filter(visible);
 }
-function computeDropTarget(clientY) {
-  const els = blockElements();
-  for (let i = 0; i < els.length; i++) {
-    const r = els[i].getBoundingClientRect();
-    if (clientY < r.top + r.height / 2) {
-      return { index: i, y: r.top };
-    }
-  }
-  const last = els[els.length - 1];
+function createDropTargetResolver() {
+  let cache = null;
+  const build = () => {
+    const els = blockElements();
+    const scrollY = window.scrollY;
+    let absLastBottom = scrollY;
+    const blocks = els.map((el, index) => {
+      const r = el.getBoundingClientRect();
+      absLastBottom = r.bottom + scrollY;
+      return {
+        index,
+        absTop: r.top + scrollY,
+        absMid: r.top + scrollY + r.height / 2
+      };
+    });
+    cache = { blocks, absLastBottom };
+  };
   return {
-    index: els.length,
-    y: last ? last.getBoundingClientRect().bottom : 0
+    resolve(clientY) {
+      if (!cache) build();
+      const scrollY = window.scrollY;
+      const pageY = clientY + scrollY;
+      for (const block of cache.blocks) {
+        if (pageY < block.absMid) {
+          return { index: block.index, y: block.absTop - scrollY };
+        }
+      }
+      return {
+        index: cache.blocks.length,
+        y: cache.absLastBottom - scrollY
+      };
+    },
+    invalidate() {
+      cache = null;
+    }
   };
 }
 function useDragAgent(config) {
@@ -330,6 +353,7 @@ function useDragAgent(config) {
     }
     let movingId = null;
     let lastDropY = null;
+    const resolver = createDropTargetResolver();
     const updateDropY = (y) => {
       if (y === lastDropY) return;
       lastDropY = y;
@@ -340,21 +364,23 @@ function useDragAgent(config) {
       const id = blockEl?.getAttribute("data-block-id");
       if (!id || !event.dataTransfer) return;
       movingId = id;
+      resolver.invalidate();
       event.dataTransfer.setData(MOVE_MIME, id);
       event.dataTransfer.effectAllowed = "move";
     };
     const onDragOver = (event) => {
       if (!movingId) return;
       event.preventDefault();
-      updateDropY(computeDropTarget(event.clientY).y);
+      updateDropY(resolver.resolve(event.clientY).y);
     };
     const onDrop = (event) => {
       if (!movingId) return;
       event.preventDefault();
-      const { index } = computeDropTarget(event.clientY);
+      const { index } = resolver.resolve(event.clientY);
       const blockId = movingId;
       movingId = null;
       updateDropY(null);
+      resolver.invalidate();
       try {
         postToEditor(window.parent, editorOrigin, {
           type: "cmssy:move",
@@ -368,6 +394,7 @@ function useDragAgent(config) {
     const onDragEnd = () => {
       movingId = null;
       updateDropY(null);
+      resolver.invalidate();
     };
     const onMessage = (event) => {
       if (event.source && event.source !== window.parent) return;
@@ -385,7 +412,7 @@ function useDragAgent(config) {
         } else if (message.y > window.innerHeight - edge) {
           window.scrollBy(0, step);
         }
-        const { index, y } = computeDropTarget(message.y);
+        const { index, y } = resolver.resolve(message.y);
         updateDropY(y);
         try {
           postToEditor(window.parent, editorOrigin, {
@@ -397,6 +424,7 @@ function useDragAgent(config) {
         }
       } else if (message.type === "cmssy:drag-end") {
         updateDropY(null);
+        resolver.invalidate();
       }
     };
     document.addEventListener("dragstart", onDragStart);

package/dist/client.js

@@ -302,18 +302,41 @@ function blockElements() {
     )
   ).filter(visible);
 }
-function computeDropTarget(clientY) {
-  const els = blockElements();
-  for (let i = 0; i < els.length; i++) {
-    const r = els[i].getBoundingClientRect();
-    if (clientY < r.top + r.height / 2) {
-      return { index: i, y: r.top };
-    }
-  }
-  const last = els[els.length - 1];
+function createDropTargetResolver() {
+  let cache = null;
+  const build = () => {
+    const els = blockElements();
+    const scrollY = window.scrollY;
+    let absLastBottom = scrollY;
+    const blocks = els.map((el, index) => {
+      const r = el.getBoundingClientRect();
+      absLastBottom = r.bottom + scrollY;
+      return {
+        index,
+        absTop: r.top + scrollY,
+        absMid: r.top + scrollY + r.height / 2
+      };
+    });
+    cache = { blocks, absLastBottom };
+  };
   return {
-    index: els.length,
-    y: last ? last.getBoundingClientRect().bottom : 0
+    resolve(clientY) {
+      if (!cache) build();
+      const scrollY = window.scrollY;
+      const pageY = clientY + scrollY;
+      for (const block of cache.blocks) {
+        if (pageY < block.absMid) {
+          return { index: block.index, y: block.absTop - scrollY };
+        }
+      }
+      return {
+        index: cache.blocks.length,
+        y: cache.absLastBottom - scrollY
+      };
+    },
+    invalidate() {
+      cache = null;
+    }
   };
 }
 function useDragAgent(config) {
@@ -328,6 +351,7 @@ function useDragAgent(config) {
     }
     let movingId = null;
     let lastDropY = null;
+    const resolver = createDropTargetResolver();
     const updateDropY = (y) => {
       if (y === lastDropY) return;
       lastDropY = y;
@@ -338,21 +362,23 @@ function useDragAgent(config) {
       const id = blockEl?.getAttribute("data-block-id");
       if (!id || !event.dataTransfer) return;
       movingId = id;
+      resolver.invalidate();
       event.dataTransfer.setData(MOVE_MIME, id);
       event.dataTransfer.effectAllowed = "move";
     };
     const onDragOver = (event) => {
       if (!movingId) return;
       event.preventDefault();
-      updateDropY(computeDropTarget(event.clientY).y);
+      updateDropY(resolver.resolve(event.clientY).y);
     };
     const onDrop = (event) => {
       if (!movingId) return;
       event.preventDefault();
-      const { index } = computeDropTarget(event.clientY);
+      const { index } = resolver.resolve(event.clientY);
       const blockId = movingId;
       movingId = null;
       updateDropY(null);
+      resolver.invalidate();
       try {
         postToEditor(window.parent, editorOrigin, {
           type: "cmssy:move",
@@ -366,6 +392,7 @@ function useDragAgent(config) {
     const onDragEnd = () => {
       movingId = null;
       updateDropY(null);
+      resolver.invalidate();
     };
     const onMessage = (event) => {
       if (event.source && event.source !== window.parent) return;
@@ -383,7 +410,7 @@ function useDragAgent(config) {
         } else if (message.y > window.innerHeight - edge) {
           window.scrollBy(0, step);
         }
-        const { index, y } = computeDropTarget(message.y);
+        const { index, y } = resolver.resolve(message.y);
         updateDropY(y);
         try {
           postToEditor(window.parent, editorOrigin, {
@@ -395,6 +422,7 @@ function useDragAgent(config) {
         }
       } else if (message.type === "cmssy:drag-end") {
         updateDropY(null);
+        resolver.invalidate();
       }
     };
     document.addEventListener("dragstart", onDragStart);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",