reflex_behaviors 0.0.5 → 0.0.7

data/app/javascript/devtools/dependencies.js

@@ -0,0 +1,53 @@
+const added = []
+
+const dependencies = {
+  LeaderLine: {
+    src:
+      'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js',
+    integrity:
+      'sha512-0dNdzMjpT6pJdFGF1DwybFCfm3K/lzHhxaMXC/92J9/DZujHlqYFqmhTOAoD0o+LkeEsVK2ar/ESs7/Q2B6wJg==',
+    global: 'LeaderLine'
+  },
+
+  PlainDraggable: {
+    src:
+      'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js',
+    global: 'PlainDraggable'
+  }
+}
+
+function exists (dependency) {
+  if (dependency.global && self[dependency.global]) return true
+  if (document.querySelector(`[src='${dependency.src}']`)) return true
+  return added.includes(dependency)
+}
+
+function add (dependency) {
+  if (exists(dependency)) return
+  added.push(dependency)
+
+  const { src, integrity } = dependency
+  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 remove (dependency) {
+  if (!added.includes(dependency)) return
+  added.splice(added.indexOf(dependency), 1)
+
+  const { src } = dependency
+  const el = document.querySelector(`script[src='${src}']`)
+  if (el) el.remove()
+  if (dependency.global && self[dependency.global])
+    self[dependency.global] = null
+}
+
+function removeAll () {
+  ;[...added].forEach(dependency => remove(dependency))
+}
+
+export default { ...dependencies, add, remove, removeAll }

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 () {
@@ -6,9 +6,13 @@ export default class SupervisorElement extends HTMLElement {
     this.enabledDevtools = {}
     this.attachShadow({ mode: 'open' })
     this.shadowRoot.innerHTML = this.html
-    this.shadowRoot
-      .querySelector('button')
-      .addEventListener('click', () => this.close())
+    this.shadowRoot.querySelector('button').addEventListener('click', () =>
+      this.dispatchEvent(
+        new CustomEvent('reflex-behaviors:devtools-close', {
+          bubbles: true
+        })
+      )
+    )
 
     this.addEventListener('change', event => {
       const devtoolElement = event.target
@@ -60,7 +64,7 @@ export default class SupervisorElement extends HTMLElement {
       <div>
         <label>ReflexBehaviors</label>
         <slot name="devtool"></slot>
-        <button>X</button>
+        <button>✕</button>
       </div>
     `
   }
@@ -79,22 +83,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 +120,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,8 @@
-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 dependencies from './dependencies'
 
 customElements.define('reflex-behaviors-devtool', DevtoolElement)
 customElements.define('reflex-behaviors-devtool-supervisor', SupervisorElement)
@@ -9,6 +10,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 +28,17 @@ function stop () {
     })
   )
   supervisorElement = null
+  dependencies.removeAll()
 }
 
 function start () {
   if (started()) return
-  appendHTML(
+  dependencies.add(dependencies.LeaderLine)
+  dependencies.add(dependencies.PlainDraggable)
+  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
@@ -70,6 +81,7 @@ addEventListener('turbo:load', autoRestart)
 addEventListener('turbo-frame:load', autoRestart)
 addEventListener('turbo-reflex:success', autoRestart)
 addEventListener('turbo-reflex:finish', autoRestart)
+addEventListener('reflex-behaviors:devtools-close', stop)
 
 function register (name, label) {
   if (!supervisorElement) return

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 => {
@@ -40,10 +46,15 @@ export default class ToggleDevtool {
       if (name === this.name) removeHighlight(this.trigger)
     })
 
-    document.addEventListener('click', event => {
+    addEventListener('click', event => {
       if (event.target.closest('reflex-behaviors-devools-tooltip')) return
-      this.hide()
+      this.hide(true)
     })
+
+    addEventListener('turbo:load', () => this.hide(true))
+    addEventListener('turbo-frame:load', () => this.hide(true))
+    addEventListener('turbo-reflex:success', () => this.hide(true))
+    addEventListener('turbo-reflex:finish', () => this.hide(true))
   }
 
   get enabled () {
@@ -52,33 +63,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 }
@@ -91,19 +105,8 @@ export default class ToggleDevtool {
     console.table(data)
   }
 
-  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 () {
+  hide (clearActiveToggle) {
+    document.querySelectorAll('.leader-line').forEach(el => el.remove())
     document
       .querySelectorAll('reflex-behaviors-devools-tooltip')
       .forEach(el => el.remove())
@@ -113,35 +116,34 @@ export default class ToggleDevtool {
       .forEach(el => {
         if (!el.tagName.match(/toggle-trigger/i)) removeHighlight(el)
       })
-  }
 
-  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('')
+    if (clearActiveToggle) activeToggle = null
+  }
 
-    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`
+
+    tooltip.line = new LeaderLine(tooltip, this.renderingElement, {
+      ...this.leaderLineOptions,
+      color: 'chocolate'
+    })
 
-  destroyTriggerTooltip () {
-    if (!this.triggerTooltip) return
-    this.triggerTooltip.remove()
-    delete this.triggerTooltip
+    tooltip.drag = new PlainDraggable(tooltip)
+    return tooltip
   }
 
   createTargetTooltip () {
@@ -150,29 +152,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
   }
 
-  destroyTargetTooltip () {
-    if (!this.targetTooltip) return
-    this.targetTooltip.remove()
-    delete this.targetTooltip
+  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
+  }
+
+  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/index.js

@@ -1,6 +1,3 @@
-import TurboReady from 'turbo_ready'
-TurboReady.initialize(Turbo.StreamActions)
-
 import 'turbo_reflex'
 import './elements'
 import devtools from './devtools'