mirror of https://github.com/logseq/logseq
parent
bc58b95040
commit
8a668ef04b
|
@ -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})
|
||||
})
|
|
@ -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)
|
||||
|
|
|
@ -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 &&
|
||||
|
|
Loading…
Reference in New Issue