setup rotatable Rotation (to fix GoogleChromeLabs#613 - try number 2 after PR GoogleChromeLabs#657)

Author: hchiam

app/components/index.js

@@ -8,6 +8,7 @@ export { Overlay }    from './selection/overlay.element'
 export { BoxModel }   from './selection/box-model.element'
 export { Corners }    from './selection/corners.element'
 export { Grip }       from './selection/grip.element'
+export { Rotation }   from './selection/rotation.element'
 
 export { Metatip }    from './metatip/metatip.element'
 export { Ally }       from './metatip/ally.element'

app/components/selection/rotation.element.css

@@ -0,0 +1,33 @@
+@import "../_variables.css";
+
+:host {
+  position: var(--position);
+  top: var(--top);
+  left: var(--left);
+  pointer-events: none;
+}
+
+:host .rotation-handle {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: -30px;
+  left: calc(var(--width) / 2 - 12px);
+  cursor: grab;
+  pointer-events: all;
+  background: var(--theme-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host .rotation-handle:active {
+  cursor: grabbing;
+}
+
+:host .rotation-icon {
+  width: 16px;
+  height: 16px;
+  fill: white;
+}

app/components/selection/rotation.element.js

@@ -0,0 +1,95 @@
+import { HandlesStyles, RotationStyles } from '../styles.store'
+
+export class Rotation extends HTMLElement {
+  constructor() {
+    super()
+    this.$shadow = this.attachShadow({mode: 'closed'})
+    this.styles = [HandlesStyles, RotationStyles]
+    this.startAngle = 0
+    this.currentAngle = 0
+  }
+
+  connectedCallback() {
+    this.$shadow.adoptedStyleSheets = this.styles
+  }
+
+  set position({el}) {
+    this.targetElement = el
+    const {left, top, width, height} = el.getBoundingClientRect()
+    const isFixed = getComputedStyle(el).position === 'fixed'
+
+    this.style.setProperty('--top', `${top + (isFixed ? 0 : window.scrollY)}px`)
+    this.style.setProperty('--left', `${left}px`)
+    this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute')
+    this.style.setProperty('--width', `${width}px`)
+    
+    this.$shadow.innerHTML = this.render()
+    this.setupRotationHandlers()
+  }
+
+  setupRotationHandlers() {
+    const handle = this.$shadow.querySelector('.rotation-handle')
+    
+    const onMouseDown = e => {
+      e.preventDefault()
+      const {left, top, width, height} = this.targetElement.getBoundingClientRect()
+      const center = {
+        x: left + width / 2,
+        y: top + height / 2
+      }
+      this.startAngle = Math.atan2(
+        e.clientY - center.y,
+        e.clientX - center.x
+      )
+      
+      document.addEventListener('mousemove', onMouseMove)
+      document.addEventListener('mouseup', onMouseUp)
+    }
+
+    const onMouseMove = e => {
+      const {left, top, width, height} = this.targetElement.getBoundingClientRect()
+      const center = {
+        x: left + width / 2,
+        y: top + height / 2
+      }
+      
+      const angle = Math.atan2(
+        e.clientY - center.y,
+        e.clientX - center.x
+      )
+      
+      const rotation = angle - this.startAngle
+      this.currentAngle += rotation
+      this.startAngle = angle
+      
+      this.targetElement.style.transform = `rotate(${this.currentAngle * (180 / Math.PI)}deg)`
+    }
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+
+    handle.addEventListener('mousedown', onMouseDown)
+    
+    this.cleanup = () => {
+      handle.removeEventListener('mousedown', onMouseDown)
+    }
+  }
+
+  disconnectedCallback() {
+    this.cleanup && this.cleanup()
+  }
+
+  render() {
+    return `
+      <div class="rotation-handle">
+        <svg class="rotation-icon" viewBox="0 0 24 24">
+          <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+        </svg>
+      </div>
+    `
+  }
+}
+
+customElements.define('visbug-rotation', Rotation)

app/components/styles.store.js

@@ -14,6 +14,7 @@ import { default as boxmodel_css }   from './selection/box-model.element.css'
 import { default as metatip_css }    from './metatip/metatip.element.css'
 import { default as hotkeymap_css }  from './hotkey-map/base.element.css'
 import { default as grip_css }       from './selection/grip.element.css'
+import { default as rotation_css }   from './selection/rotation.element.css'
 
 import { default as light_css }            from './_variables_light.css'
 import { default as visbug_light_css }     from './vis-bug/vis-bug.element_light.css'
@@ -44,6 +45,7 @@ export const OverlayStyles        = constructStylesheet(overlay_css)
 export const BoxModelStyles       = constructStylesheet(boxmodel_css)
 export const HotkeymapStyles      = constructStylesheet(hotkeymap_css)
 export const GripStyles           = constructStylesheet(grip_css)
+export const RotationStyles       = constructStylesheet(rotation_css)
 
 export const LightTheme           = constructStylesheet(light_css)
 export const VisBugLightStyles    = constructStylesheet(visbug_light_css)

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

@@ -3,7 +3,7 @@ import hotkeys    from 'hotkeys-js'
 
 import {
   Handles, Handle, Label, Overlay, Gridlines, Corners,
-  Hotkeys, Metatip, Ally, Distance, BoxModel, Grip
+  Hotkeys, Metatip, Ally, Distance, BoxModel, Grip, Rotation
 } from '../'
 
 import {

app/features/position.js

@@ -27,8 +27,11 @@ export function Position() {
     state.elements.forEach(el =>
       el.teardown())
 
-    state.elements = els.map(el =>
-      draggable({el}))
+    state.elements = els.map(el => {
+      draggable({el})
+      rotatable({el})
+      return el
+    })
   }
 
   const disconnect = () => {
@@ -162,6 +165,16 @@ export function draggable({el, surface = el, cursor = 'move', clickEvent}) {
   return el
 }
 
+export function rotatable({el}) {
+  const rotation = document.createElement('visbug-rotation')
+  document.body.appendChild(rotation)
+  rotation.position = {el}
+
+  el.teardown = () => rotation.remove()
+
+  return el
+}
+
 export function positionElement(els, direction) {
   els
     .map(el => ensurePositionable(el))

app/utilities/common.js

@@ -89,6 +89,7 @@ export const isOffBounds = node =>
     || node.closest('visbug-corners')
     || node.closest('visbug-grip')
     || node.closest('visbug-gridlines')
+    || node.closest('visbug-rotation')
   )
 
 export const isSelectorValid = (qs => (

app/utilities/strings.js

@@ -44,4 +44,4 @@ export const altKey = window.navigator.platform.includes('Mac')
   ? 'opt'
   : 'alt'
 
-export const notList = ':not(vis-bug):not(script):not(hotkey-map):not(.visbug-metatip):not(visbug-label):not(visbug-handles):not(visbug-corners):not(visbug-grip):not(visbug-gridlines)'
+export const notList = ':not(vis-bug):not(script):not(hotkey-map):not(.visbug-metatip):not(visbug-label):not(visbug-handles):not(visbug-corners):not(visbug-grip):not(visbug-gridlines):not(visbug-rotation)'