reflex_behaviors 0.0.5 → 0.0.6

data/app/javascript/devtools/dependencies/index.js

@@ -0,0 +1,48 @@
+const addedDependencies = []
+
+function addScript (src, integrity) {
+  if (document.querySelector(`[src='${src}']`)) return
+
+  if (addedDependencies.includes(src)) return
+  addedDependencies.push(src)
+
+  const script = document.createElement('script')
+  script.setAttribute('src', src)
+  script.setAttribute('crossorigin', 'anonymous')
+  script.setAttribute('referrerpolicy', 'no-referrer')
+  if (integrity) script.setAttribute('integrity', integrity)
+  document.head.appendChild(script)
+}
+
+function removeScript (src) {
+  if (!addedDependencies.includes(src)) return
+  addedDependencies.splice(addedDependencies.indexOf(src), 1)
+
+  const el = document.querySelector(`script[src='${src}']`)
+  if (el) el.remove()
+}
+
+export function addLeaderLineDependency () {
+  addScript(
+    'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js',
+    'sha512-0dNdzMjpT6pJdFGF1DwybFCfm3K/lzHhxaMXC/92J9/DZujHlqYFqmhTOAoD0o+LkeEsVK2ar/ESs7/Q2B6wJg=='
+  )
+}
+
+export function removeLeaderLineDependency () {
+  removeScript(
+    'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js'
+  )
+}
+
+export function addPlainDraggableDependency () {
+  addScript(
+    'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js'
+  )
+}
+
+export function removePlainDraggableDependency () {
+  removeScript(
+    'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js'
+  )
+}

data/app/javascript/devtools/elements/supervisor_element.js

@@ -1,4 +1,4 @@
-import { appendHTML } from '../dom'
+import { appendHTML } from '../../utils/dom'
 
 export default class SupervisorElement extends HTMLElement {
   constructor () {
@@ -60,7 +60,7 @@ export default class SupervisorElement extends HTMLElement {
       <div>
         <label>ReflexBehaviors</label>
         <slot name="devtool"></slot>
-        <button>X</button>
+        <button>✕</button>
       </div>
     `
   }
@@ -79,22 +79,19 @@ export default class SupervisorElement extends HTMLElement {
         padding: 5px 10px;
         position: fixed;
         transform: translateX(-50%);
-        z-index: 100000;
+        z-index: 8999;
       }
 
-      :host, :host * {
+      * {
         -webkit-user-select: none;
         font-family: helvetica, sans-serif;
+        font-size: 1rem;
         user-select: none;
       }
 
-      :host:has( input) {
-        outline-color: red;
-        outline-width: 2px;
-      }
-
       label {
         color: indigo;
+        cursor: grab;
         opacity: 0.5;
       }
 
@@ -119,10 +116,11 @@ export default class SupervisorElement extends HTMLElement {
         position: relative;
         top: 1px;
         width: 18px;
+        opacity: 0.5;
       }
 
       button:hover {
-        outline-width: 2px;
+        opacity: 1;
       }
     `
   }

data/app/javascript/devtools/elements/tooltip_element.js

@@ -9,10 +9,6 @@ export default class TooltipElement extends HTMLElement {
     return this.getAttribute('color') || 'darkslategray'
   }
 
-  get emphasisColor () {
-    return this.getAttribute('emphasis-color') || 'black'
-  }
-
   get backgroundColor () {
     return this.getAttribute('background-color') || 'gainsboro'
   }
@@ -21,23 +17,14 @@ export default class TooltipElement extends HTMLElement {
     return this.getAttribute('position') || 'top'
   }
 
-  get cssArrow () {
-    switch (this.position) {
-      case 'bottom':
-        return `transparent transparent ${this.emphasisColor} transparent`
-      default:
-        return `${this.emphasisColor} transparent transparent transparent;`
-    }
-  }
-
   get html () {
     return `
       <style>${this.stylesheet}</style>
-      <div role="tooltip">
+      <div>
         <slot name="title"></slot>
-        <hr>
-        <slot name="normal"></slot>
-        <slot name="emphasis"></slot>
+        <slot name="content-top"></slot>
+        <slot name="content"></slot>
+        <slot name="content-bottom"></slot>
       </div>
     `
   }
@@ -47,56 +34,55 @@ export default class TooltipElement extends HTMLElement {
       :host {
         display: block;
         position: absolute;
-        z-index: 10000;
+        z-index: 8999;
       }
 
       * {
         color: ${this.color}
+        font-size: 1rem;
       }
 
-      [role="tooltip"] {
+      div {
         background-color: ${this.backgroundColor};
         border-radius: 15px;
         filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
         font-family: monospace;
-        left: 50px;
         min-height: 30px;
         min-width: 100px;
         opacity: 0.9;
         outline-offset: 1px;
-        outline: solid 3px ${this.emphasisColor};
+        outline: dashed 3px ${this.color};
         padding: 8px 12px 8px 12px;
+        position: relative;
         white-space: nowrap;
       }
 
-      [role="tooltip"]::after {
-        border-color: ${this.cssArrow};
-        border-style: solid;
-        border-width: 10px;
-        content: "";
-        margin-left: -7px;
-        position: absolute;
-        top: ${this.position === 'bottom' ? '-21px' : 'calc(100% + 1px)'};
-      }
-
       slot[name="title"] {
-        color: ${this.emphasisColor};
+        border-bottom: dotted 1px ${this.color};
+        color: ${this.color};
+        display: inline-block;
         font-weight: bold;
+        margin-bottom: 8px;
+        padding-bottom: 8px;
+        width: 100%;
       }
 
-      slot[name="emphasis"] {
-        color: ${this.emphasisColor};
+      slot[name="content-top"] {
+        color: ${this.color};
         font-weight: normal;
         opacity: 0.7;
       }
 
-      hr {
-        background-color: ${this.emphasisColor};
-        border: none;
-        height: 1px;
-        margin-bottom: 4px;
-        margin-top: 4px;
-        opacity: 0.3;
+      slot[name="content"] {
+        color: ${this.color};
+        font-weight: normal;
+        opacity: 0.7;
+      }
+
+      slot[name="content-bottom"] {
+        color: red;
+        font-weight: normal;
+        opacity: 0.7;
       }
     `
   }

data/app/javascript/devtools/supervisor.js

@@ -1,7 +1,13 @@
-import { appendHTML } from './dom'
+import { appendHTML } from '../utils/dom'
 import DevtoolElement from './elements/devtool_element'
 import SupervisorElement from './elements/supervisor_element'
 import TooltipElement from './elements/tooltip_element'
+import {
+  addLeaderLineDependency,
+  addPlainDraggableDependency,
+  removeLeaderLineDependency,
+  removePlainDraggableDependency
+} from './dependencies'
 
 customElements.define('reflex-behaviors-devtool', DevtoolElement)
 customElements.define('reflex-behaviors-devtool-supervisor', SupervisorElement)
@@ -9,6 +15,15 @@ customElements.define('reflex-behaviors-devools-tooltip', TooltipElement)
 
 let supervisorElement
 
+function makeDraggable () {
+  if (!supervisorElement) return
+  try {
+    new PlainDraggable(supervisorElement)
+  } catch {
+    setTimeout(makeDraggable, 200)
+  }
+}
+
 function stop () {
   if (stopped()) return
   supervisorElement.close()
@@ -18,16 +33,18 @@ function stop () {
     })
   )
   supervisorElement = null
+  removeLeaderLineDependency()
+  removePlainDraggableDependency()
 }
 
 function start () {
   if (started()) return
-  appendHTML(
+  addLeaderLineDependency()
+  addPlainDraggableDependency()
+  supervisorElement = appendHTML(
     '<reflex-behaviors-devtool-supervisor></reflex-behaviors-devtool-supervisor>'
   )
-  supervisorElement = document.body.querySelector(
-    'reflex-behaviors-devtool-supervisor'
-  )
+  setTimeout(makeDraggable, 200)
   supervisorElement.dispatchEvent(
     new CustomEvent('reflex-behaviors:devtools-start', {
       bubbles: true

data/app/javascript/devtools/toggle.js

@@ -1,25 +1,27 @@
-import { appendHTML, addHighlight, removeHighlight } from './dom'
+import {
+  appendHTML,
+  addHighlight,
+  coordinates,
+  removeHighlight
+} from '../utils/dom'
 import supervisor from './supervisor'
 
+let activeToggle
+
 document.addEventListener('reflex-behaviors:devtools-start', () =>
   supervisor.register('toggle', 'toggles<small>(trigger/target)</small>')
 )
 
-const triggerTooltipId = 'toggle-trigger-tooltip'
-const targetTooltipId = 'toggle-target-tooltip'
-
-function appendTooltip (id, title, content, options = {}) {
-  let { backgroundColor, color, emphaisColor, position } = options
+function appendTooltip (title, content, options = {}) {
+  let { backgroundColor, color, position } = options
   color = color || 'white'
   position = position || 'top'
-
-  appendHTML(`
-    <reflex-behaviors-devools-tooltip id="${id}" position="${position}" background-color="${backgroundColor}" color="${color}" emphasis-color="${emphaisColor}">
+  return appendHTML(`
+    <reflex-behaviors-devools-tooltip position="${position}" background-color="${backgroundColor}" color="${color}">
       <div slot='title'>${title}</div>
       ${content}
     </reflex-behaviors-devools-tooltip>
   `)
-  return document.getElementById(id)
 }
 
 export default class ToggleDevtool {
@@ -31,8 +33,12 @@ export default class ToggleDevtool {
 
     document.addEventListener('reflex-behaviors:devtool-enable', event => {
       const { name } = event.detail
-      if (name === this.name)
-        addHighlight(this.trigger, { color: 'red', offset: '2px' })
+      if (name === this.name) {
+        addHighlight(this.trigger, {
+          outline: '3px dashed blueviolet',
+          outlineOffset: '2px'
+        })
+      }
     })
 
     document.addEventListener('reflex-behaviors:devtool-disable', event => {
@@ -42,6 +48,7 @@ export default class ToggleDevtool {
 
     document.addEventListener('click', event => {
       if (event.target.closest('reflex-behaviors-devools-tooltip')) return
+      activeToggle = null
       this.hide()
     })
   }
@@ -52,33 +59,36 @@ export default class ToggleDevtool {
 
   show () {
     if (!this.enabled) return
+    if (activeToggle === this) return
+    activeToggle = this
     this.hide()
-    this.createTriggerTooltip()
-    this.createTargetTooltip()
-    addHighlight(this.target, { color: 'blue', offset: '-2px' })
-
-    let renderingPartial = this.trigger ? this.trigger.renderingPartial : null
-    renderingPartial =
-      renderingPartial || (this.target ? this.target.renderingPartial : null)
-
-    let renderingElement = this.trigger ? this.trigger.renderingElement : null
-    renderingElement =
-      renderingElement || (this.target ? this.target.renderingElement : null)
-
-    addHighlight(renderingElement, {
-      color: 'turquoise',
-      offset: '4px',
-      width: '4px'
+
+    addHighlight(this.target, {
+      outline: '3px dashed darkcyan',
+      outlineOffset: '-2px'
+    })
+
+    addHighlight(this.renderingElement, {
+      outline: '3px dashed chocolate',
+      outlineOffset: '3px'
     })
 
+    const renderingTooltip = this.createRenderingTooltip()
+    const targetTooltip = this.createTargetTooltip()
+    this.createTriggerTooltip(targetTooltip, renderingTooltip)
+
+    document
+      .querySelectorAll('.leader-line')
+      .forEach(el => (el.style.zIndex = 100000))
+
     const data = {
       rendering: { partial: null, id: null },
       trigger: { partial: null, id: null },
       target: { partial: null, id: null }
     }
 
-    if (renderingPartial) data.rendering.partial = renderingPartial
-    if (renderingElement) data.rendering.id = renderingElement.id
+    if (this.renderingPartial) data.rendering.partial = this.renderingPartial
+    if (this.renderingElement) data.rendering.id = this.renderingElement.id
 
     if (this.trigger)
       data.trigger = { partial: this.trigger.partial, id: this.trigger.id }
@@ -92,18 +102,7 @@ export default class ToggleDevtool {
   }
 
   hide () {
-    let renderingElement = this.trigger ? this.trigger.renderingElement : null
-    renderingElement =
-      renderingElement || (this.target ? this.target.renderingElement : null)
-
-    this.destroyTriggerTooltip()
-    this.destroyTargetTooltip()
-    removeHighlight(this.target)
-    removeHighlight(renderingElement)
-    this.cleanup()
-  }
-
-  cleanup () {
+    document.querySelectorAll('.leader-line').forEach(el => el.remove())
     document
       .querySelectorAll('reflex-behaviors-devools-tooltip')
       .forEach(el => el.remove())
@@ -115,33 +114,30 @@ export default class ToggleDevtool {
       })
   }
 
-  createTriggerTooltip () {
-    if (!this.trigger) return
-    const title = `TRIGGER (targets: ${this.trigger.controls})`
-    const content = this.trigger.viewStack
-      .map(view => {
-        return this.trigger.sharedViews.includes(view)
-          ? `<div slot="emphasis">${view}</div>`
-          : `<div slot="normal">${view}</div>`
-      }, this)
-      .join('')
-
-    this.triggerTooltip = appendTooltip(triggerTooltipId, title, content, {
-      backgroundColor: 'pink',
-      emphaisColor: 'darkred'
+  createRenderingTooltip () {
+    if (!this.renderingElement) return
+    const title = `RENDERING (id: ${this.renderingElement.id || 'unknown'})`
+    const content = `<div slot="content">partial: ${this.renderingPartial}</div>`
+    const tooltip = appendTooltip(title, content, {
+      backgroundColor: 'lightyellow',
+      color: 'chocolate'
     })
 
-    const coords = this.trigger.coordinates
-    const top = Math.ceil(coords.top - this.triggerTooltip.offsetHeight - 14)
-    const left = Math.ceil(coords.left - 15)
-    this.triggerTooltip.style.top = `${top}px`
-    this.triggerTooltip.style.left = `${left}px`
-  }
+    const coords = coordinates(this.renderingElement)
+    const top = Math.ceil(
+      coords.top + coords.height / 2 - tooltip.offsetHeight / 2
+    )
+    const left = Math.ceil(coords.left + coords.width + 100)
+    tooltip.style.top = `${top}px`
+    tooltip.style.left = `${left}px`
 
-  destroyTriggerTooltip () {
-    if (!this.triggerTooltip) return
-    this.triggerTooltip.remove()
-    delete this.triggerTooltip
+    tooltip.line = new LeaderLine(tooltip, this.renderingElement, {
+      ...this.leaderLineOptions,
+      color: 'chocolate'
+    })
+
+    tooltip.drag = new PlainDraggable(tooltip)
+    return tooltip
   }
 
   createTargetTooltip () {
@@ -150,29 +146,117 @@ export default class ToggleDevtool {
 
     const title = `TARGET (id: ${this.target.id})`
     const content = this.target.viewStack
-      .map(view => {
+      .reverse()
+      .map((view, index) => {
         return this.trigger.sharedViews.includes(view)
-          ? `<div slot="emphasis">${view}</div>`
-          : `<div slot="normal">${view}</div>`
+          ? `<div slot="content-top">${index + 1}. ${view}</div>`
+          : `<div slot="content-bottom">${index + 1}. ${view}</div>`
       }, this)
       .join('')
 
-    this.targetTooltip = appendTooltip(targetTooltipId, title, content, {
-      backgroundColor: 'lightskyblue',
-      emphaisColor: 'blue',
+    const tooltip = appendTooltip(title, content, {
+      backgroundColor: 'lightcyan',
+      color: 'darkcyan',
       position: 'bottom'
     })
 
-    const coords = this.target.coordinates
-    const top = Math.ceil(coords.top + coords.height + 12)
-    const left = Math.ceil(coords.left - 15)
-    this.targetTooltip.style.top = `${top}px`
-    this.targetTooltip.style.left = `${left}px`
+    const coords = coordinates(this.target)
+    const top = Math.ceil(coords.top + tooltip.offsetHeight)
+    const left = Math.ceil(coords.left + coords.width + tooltip.offsetWidth / 3)
+    tooltip.style.top = `${top}px`
+    tooltip.style.left = `${left}px`
+
+    tooltip.line = new LeaderLine(tooltip, this.target, {
+      ...this.leaderLineOptions,
+      color: 'darkcyan'
+    })
+
+    tooltip.drag = new PlainDraggable(tooltip)
+    return tooltip
+  }
+
+  createTriggerTooltip (targetTooltip, renderingTooltip) {
+    if (!this.trigger) return
+    const title = `TRIGGER (controls: ${this.trigger.controls})`
+    const content = this.trigger.viewStack
+      .reverse()
+      .map((view, index) => {
+        return this.trigger.sharedViews.includes(view)
+          ? `<div slot="content-top">${index + 1}. ${view}</div>`
+          : `<div slot="content-bottom">${index + 1}. ${view}</div>`
+      }, this)
+      .join('')
+
+    const tooltip = appendTooltip(title, content, {
+      backgroundColor: 'lavender',
+      color: 'blueviolet'
+    })
+
+    const coords = coordinates(this.trigger)
+    const top = Math.ceil(coords.top - tooltip.offsetHeight * 2)
+    const left = Math.ceil(coords.left + coords.width + tooltip.offsetWidth / 3)
+    tooltip.style.top = `${top}px`
+    tooltip.style.left = `${left}px`
+
+    tooltip.line = new LeaderLine(this.trigger, tooltip, {
+      ...this.leaderLineOptions,
+      color: 'blueviolet'
+    })
+
+    tooltip.lineToTarget = new LeaderLine(tooltip, targetTooltip, {
+      ...this.leaderLineOptions,
+      color: 'blueviolet',
+      middleLabel: 'toggles',
+      size: 2.1
+    })
+
+    tooltip.lineToRendering = new LeaderLine(tooltip, renderingTooltip, {
+      ...this.leaderLineOptions,
+      color: 'blueviolet',
+      middleLabel: 'renders',
+      size: 2.1
+    })
+
+    tooltip.drag = new PlainDraggable(tooltip)
+    tooltip.drag.onMove = () => {
+      tooltip.line.position()
+      tooltip.lineToTarget.position()
+      tooltip.lineToRendering.position()
+    }
+    targetTooltip.drag.onMove = () => {
+      targetTooltip.line.position()
+      tooltip.lineToTarget.position()
+      tooltip.lineToRendering.position()
+    }
+    renderingTooltip.drag.onMove = () => {
+      renderingTooltip.line.position()
+      tooltip.lineToTarget.position()
+      tooltip.lineToRendering.position()
+    }
+    return tooltip
+  }
+
+  get renderingPartial () {
+    let partial = this.trigger ? this.trigger.renderingPartial : null
+    partial = partial || (this.target ? this.target.renderingPartial : null)
+    return partial
   }
 
-  destroyTargetTooltip () {
-    if (!this.targetTooltip) return
-    this.targetTooltip.remove()
-    delete this.targetTooltip
+  get renderingElement () {
+    let element = this.trigger ? this.trigger.renderingElement : null
+    element = element || (this.target ? this.target.renderingElement : null)
+    return element
+  }
+
+  get leaderLineOptions () {
+    return {
+      dash: { animation: true },
+      dropShadow: { opacity: 0.3 },
+      endPlug: 'arrow3',
+      endPlugSize: 1.7,
+      size: 3,
+      startPlug: 'disc',
+      startPlugSize: 1
+    }
   }
 }

data/app/javascript/elements/reflex_element.js

@@ -34,14 +34,4 @@ export default class ReflexElement extends HTMLElement {
   get partial () {
     return this.viewStack[0]
   }
-
-  get coordinates () {
-    const rect = this.getBoundingClientRect()
-    return {
-      left: rect.left + window.scrollX,
-      top: rect.top + window.scrollY,
-      width: this.offsetWidth,
-      height: this.offsetHeight
-    }
-  }
 }

data/app/javascript/utils/dom.js

@@ -0,0 +1,62 @@
+export function template (html) {
+  let template = document.createElement('template')
+  template.innerHTML = html
+  return template
+}
+
+export function appendHTML (html, parent) {
+  parent = parent || document.body
+  const clone = template(html).content.cloneNode(true)
+  const child = clone.querySelector('*')
+  return parent.appendChild(child)
+}
+
+export function addHighlight (element, options = {}) {
+  if (!element) return
+  removeHighlight(element)
+  let { outline, outlineOffset } = options
+
+  outline = outline || 'dashed 3px red'
+  outlineOffset = outlineOffset || '0px'
+
+  element.originalStyles = element.originalStyles || {
+    display: element.style.display,
+    minHeight: element.style.minHeight,
+    minWidth: element.style.minWidth,
+    outline: element.style.outline,
+    outlineOffset: element.style.outlineOffset
+  }
+
+  if (
+    getComputedStyle(element).display.match(/^inline$/i) &&
+    element.offsetWidth === 0 &&
+    element.offsetHeight === 0
+  ) {
+    element.style.display = 'inline-block'
+    element.style.minHeight = '2px'
+    element.style.minWidth = '2px'
+  }
+  element.style.outline = outline
+  element.style.outlineOffset = outlineOffset
+  element.dataset.reflexBehaviorsHighlight = true
+}
+
+export function removeHighlight (element) {
+  if (!element) return
+  if (element.originalStyles) {
+    for (const [key, value] of Object.entries(element.originalStyles))
+      value ? (element.style[key] = value) : (element.style[key] = '')
+    delete element.originalStyles
+  }
+  delete element.dataset.reflexBehaviorsHighlight
+}
+
+export function coordinates (element) {
+  const rect = element.getBoundingClientRect()
+  return {
+    left: rect.left + window.scrollX,
+    top: rect.top + window.scrollY,
+    width: element.offsetWidth,
+    height: element.offsetHeight
+  }
+}

data/lib/reflex_behaviors/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReflexBehaviors
-  VERSION = "0.0.5"
+  VERSION = "0.0.6"
 end