toolbar drag #541 (#544)

* #541: enable dragging li's and svg's within the toolbar too

(WIP: still need to prevent click event)

* #541: prevent tool change after drag. Still WIP: more testing required.

* more reliable response to clicks and dragging

* replace "?." optional chaining operator to pass tests

* got tests to pass: trigger mouseup instead of .click()

Author: hchiam

app/components/vis-bug/vis-bug.element.js

@@ -84,12 +84,28 @@ export default class VisBug extends HTMLElement {
       ? this.getAttribute('color-scheme')
       : this.setAttribute('color-scheme', 'auto')
 
-    $('li[data-tool]', this.$shadow).on('click', e =>
-      this.toolSelected(e.currentTarget) && e.stopPropagation())
+    const main_ol = this.$shadow.querySelector('ol:not([colors])')
+    const buttonPieces = $('li[data-tool], li[data-tool] *', main_ol)
+
+    const clickEvent = (e) => {
+      const target = e.currentTarget || e.target
+      const toolButton = target.closest('[data-tool]')
+      if (toolButton) this.toolSelected(toolButton) && e.stopPropagation();
+    }
+
+    Array.from(buttonPieces)
+    .forEach(toolButton => {
+      draggable({
+        el:this,
+        surface: toolButton,
+        cursor: 'pointer',
+        clickEvent: clickEvent
+      })
+    })
 
     draggable({
       el:this,
-      surface: this.$shadow.querySelector('ol:not([colors])'),
+      surface: main_ol,
       cursor: 'grab',
     })
 

app/features/font.test.js

@@ -30,7 +30,7 @@ test('Can Be Deactivated', async t => {
   const { page } = t.context
 
   t.is(await getActiveTool(page), tool)
-  await page.evaluate(`document.querySelector('vis-bug').$shadow.querySelector('li[data-tool="padding"]').click()`)
+  await changeMode({ tool: 'padding', page })
   t.is(await getActiveTool(page), 'padding')
 
   t.pass()

app/features/margin.test.js

@@ -29,7 +29,7 @@ test('Can Be Deactivated', async t => {
   const { page } = t.context
 
   t.is(await getActiveTool(page), tool)
-  await page.evaluate(`document.querySelector('vis-bug').$shadow.querySelector('li[data-tool="padding"]').click()`)
+  await changeMode({ tool: 'padding', page })
   t.is(await getActiveTool(page), 'padding')
 
   t.pass()

app/features/metatip.test.js

@@ -25,7 +25,7 @@ test('Can Be Deactivated', async t => {
   const { page } = t.context
 
   t.is(await getActiveTool(page), tool)
-  await page.evaluate(`document.querySelector('vis-bug').$shadow.querySelector('li[data-tool="padding"]').click()`)
+  await changeMode({ tool: 'padding', page })
   t.is(await getActiveTool(page), 'padding')
 
   t.pass()

app/features/move.test.js

@@ -29,7 +29,7 @@ test('Can Be Deactivated', async t => {
   const { page } = t.context
 
   t.is(await getActiveTool(page), tool)
-  await page.evaluate(`document.querySelector('vis-bug').$shadow.querySelector('li[data-tool="padding"]').click()`)
+  await changeMode({ tool: 'padding', page })
   t.is(await getActiveTool(page), 'padding')
 
   t.pass()

app/features/padding.test.js

@@ -29,7 +29,7 @@ test('Can Be Deactivated', async t => {
   const { page } = t.context
 
   t.is(await getActiveTool(page), tool)
-  await page.evaluate(`document.querySelector('vis-bug').$shadow.querySelector('li[data-tool="margin"]').click()`)
+  await changeMode({ tool: 'margin', page })
   t.is(await getActiveTool(page), 'margin')
 
   t.pass()

app/features/position.js

@@ -43,7 +43,7 @@ export function Position() {
   }
 }
 
-export function draggable({el, surface = el, cursor = 'move'}) {
+export function draggable({el, surface = el, cursor = 'move', clickEvent}) {
    const state = {
     target: el,
     surface,
@@ -55,7 +55,8 @@ export function draggable({el, surface = el, cursor = 'move'}) {
     element: {
       x: 0,
       y: 0,
-    }
+    },
+    travelDistance: 0
   }
 
   const setup = () => {
@@ -99,9 +100,10 @@ export function draggable({el, surface = el, cursor = 'move'}) {
       state.element.y  = parseInt(getStyle(el, 'top'))
     }
 
-    state.mouse.x      = e.clientX
-    state.mouse.y      = e.clientY
-    state.mouse.down   = true
+    state.mouse.x        = e.clientX
+    state.mouse.y        = e.clientY
+    state.mouse.down     = true
+    state.travelDistance = 0
   }
 
   const onMouseUp = e => {
@@ -127,6 +129,10 @@ export function draggable({el, surface = el, cursor = 'move'}) {
       state.element.x    = parseInt(el.style.left) || 0
       state.element.y    = parseInt(el.style.top) || 0
     }
+
+    const treatAsClick = !state.travelDistance || state.travelDistance < 5
+    if (clickEvent && treatAsClick) clickEvent(e);
+    state.travelDistance = 0 // reset after
   }
 
   const onMouseMove = e => {
@@ -146,6 +152,8 @@ export function draggable({el, surface = el, cursor = 'move'}) {
       el.style.left = state.element.x + e.clientX - state.mouse.x + 'px'
       el.style.top  = state.element.y + e.clientY - state.mouse.y + 'px'
     }
+
+    state.travelDistance += 1
   }
 
   setup()

tests/helpers.js

@@ -13,7 +13,11 @@ export const teardownPptrTab = async ({context:{ page, browser }}) => {
 }
 
 export const changeMode = async ({page, tool}) =>
-  await page.evaluateHandle(`document.querySelector('vis-bug').$shadow.querySelector('li[data-tool=${tool}]').click()`)
+  await page.evaluateHandle(`
+    var mouseUpEvent = document.createEvent("MouseEvents");
+    mouseUpEvent.initEvent("mouseup", true, true);
+    document.querySelector('vis-bug').$shadow.querySelector('li[data-tool=${tool}]').dispatchEvent(mouseUpEvent);
+  `)
 
 export const getActiveTool = async page =>
   await page.$eval('vis-bug', el =>