Revert "fix blocks' dnd and tests"

This reverts commit 36335106b4.

e2e-tests/dnd.spec.ts

@@ -5,12 +5,35 @@ import { createRandomPage, enterNextBlock } from './utils'
 /**
  * Drag and Drop tests.
  *
- * When we drag and drop a block, it should always be moved under the target element,
- * unless the targer is the first element of its container. In thas case, if we drop
- * it at the top half of the target, it should be moved on top of it.
+ * NOTE: x = 30 is an estimation of left position of the drop target.
  */
 
-test('drop "block b" to the upper left area of "block a", which is the first element of a container', async ({ page, block }) => {
+test('drop to left center', async ({ page }) => {
+  await createRandomPage(page)
+
+  await page.fill('textarea >> nth=0', 'block a')
+  await enterNextBlock(page)
+
+  await page.fill('textarea >> nth=0', 'block b')
+  await page.press('textarea >> nth=0', 'Escape')
+
+  const bullet = page.locator('span.bullet-container >> nth=-1')
+  const where = page.locator('.ls-block >> nth=0')
+  await bullet.dragTo(where, {
+    targetPosition: {
+      x: 30,
+      y: (await where.boundingBox()).height * 0.5
+    }
+  })
+
+  await page.keyboard.press('Escape')
+
+  const pageElem = page.locator('.page-blocks-inner')
+  await expect(pageElem).toHaveText('block b\nblock a', {useInnerText: true})
+})
+
+
+test('drop to upper left', async ({ page, block }) => {
   await createRandomPage(page)
 
   await block.mustFill('block a')
@@ -34,7 +57,7 @@ test('drop "block b" to the upper left area of "block a", which is the first ele
   await expect(pageElem).toHaveText('block b\nblock a', {useInnerText: true})
 })
 
-test('drop "block b" to the bottom left area of "block a", which is the first element of a container', async ({ page, block }) => {
+test('drop to bottom left', async ({ page }) => {
   await createRandomPage(page)
 
   await page.fill('textarea >> nth=0', 'block a')
@@ -47,8 +70,8 @@ test('drop "block b" to the bottom left area of "block a", which is the first el
   const where = page.locator('.ls-block >> nth=0')
   await bullet.dragTo(where, {
     targetPosition: {
-      x: 0,
-      y: (await where.boundingBox())!.height * 0.75
+      x: 30,
+      y: (await where.boundingBox()).height * 0.75
     }
   })
 
@@ -57,57 +80,3 @@ test('drop "block b" to the bottom left area of "block a", which is the first el
   const pageElem = page.locator('.page-blocks-inner')
   await expect(pageElem).toHaveText('block a\nblock b', {useInnerText: true})
 })
-
-test('drop "block c" to the upper left area of "block b", which is the second element of a container', async ({ page, block }) => {
-  await createRandomPage(page)
-
-  await block.mustFill('block a')
-  await block.enterNext()
-
-  await block.mustFill('block b')
-  await block.enterNext()
-
-  await block.mustFill('block c')
-  await block.escapeEditing()
-
-  const bullet = page.locator('span.bullet-container >> nth=-1')
-  const where = page.locator('.ls-block >> nth=1')
-  await bullet.dragTo(where, {
-    targetPosition: {
-      x: 0,
-      y: 0
-    }
-  })
-
-  await page.keyboard.press('Escape')
-
-  const pageElem = page.locator('.page-blocks-inner')
-  await expect(pageElem).toHaveText('block a\nblock b\nblock c', {useInnerText: true})
-})
-
-test('drop "block c" to the bottom left area of "block a", which is the first element of a container', async ({ page, block }) => {
-  await createRandomPage(page)
-
-  await block.mustFill('block a')
-  await block.enterNext()
-
-  await block.mustFill('block b')
-  await block.enterNext()
-
-  await block.mustFill('block c')
-  await block.escapeEditing()
-
-  const bullet = page.locator('span.bullet-container >> nth=-1')
-  const where = page.locator('.ls-block >> nth=0')
-  await bullet.dragTo(where, {
-    targetPosition: {
-      x: 0,
-      y: 0
-    }
-  })
-
-  await page.keyboard.press('Escape')
-
-  const pageElem = page.locator('.page-blocks-inner')
-  await expect(pageElem).toHaveText('block c\nblock a\nblock b', {useInnerText: true})
-})

src/main/frontend/components/block.cljs

@@ -2596,15 +2596,13 @@
   (util/stop event)
   (when-not (dnd-same-block? uuid)
     (let [over-block (gdom/getElement block-id)
-          rect (.getBoundingClientRect over-block)
+          rect (utils/getOffsetRect over-block)
           element-top (gobj/get rect "top")
           element-left (gobj/get rect "left")
-          element-bottom (gobj/get rect "bottom")
-          element-height (- element-bottom element-top)
           x-offset (- (.. event -pageX) element-left)
-          y-offset (- (.. event -pageY) element-top)
+          cursor-top (gobj/get event "clientY")
           move-to-value (cond
-                          (and top? (<= y-offset (/ element-height 2)))
+                          (and top? (<= (js/Math.abs (- cursor-top element-top)) 16))
                           :top
 
                           (> x-offset 50)

src/main/frontend/utils.js

@@ -19,6 +19,29 @@ export const closest = (target, selector) => {
   return null
 }
 
+export const getOffsetRect = (elem) => {
+  // (1)
+  const box = elem.getBoundingClientRect(),
+    body = document.body,
+    docElem = document.documentElement,
+    // (2)
+    scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
+    scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft,
+
+    // (3)
+    clientTop = docElem.clientTop || body.clientTop || 0,
+    clientLeft = docElem.clientLeft || body.clientLeft || 0,
+
+    // (4)
+    top = box.top + scrollTop - clientTop,
+    left = box.left + scrollLeft - clientLeft;
+
+  return {
+    top: Math.round(top),
+    left: Math.round(left)
+  }
+}
+
 // jquery focus
 export const focus = (elem) => {
   return elem === document.activeElement &&