Import / Export POC

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

@@ -16,7 +16,10 @@ import { VisBugStyles }           from '../styles.store'
 import { VisBugModel }            from './model'
 import * as Icons                 from './vis-bug.icons'
 import { provideSelectorEngine }  from '../../features/search'
-import { metaKey }                from '../../utilities/'
+
+import {
+  metaKey, applyStyle, showHideSelected
+}    from '../../utilities/'
 
 const modemap = {
   'hex':  'toHexString',
@@ -43,6 +46,7 @@ export default class VisBug extends HTMLElement {
     this.colorPicker    = ColorPicker(this.$shadow, this.selectorEngine)
 
     provideSelectorEngine(this.selectorEngine)
+    this.selectorEngine.onSelectedUpdate(selection => this.broadcastSelection(selection))
 
     this.toolSelected($('[data-tool="guides"]', this.$shadow)[0])
   }
@@ -65,7 +69,7 @@ export default class VisBug extends HTMLElement {
       this.toolSelected(e.currentTarget) && e.stopPropagation())
 
     draggable({
-      el:this, 
+      el:this,
       surface: this.$shadow.querySelector('ol:not([colors])'),
       cursor: 'grab',
     })
@@ -230,6 +234,41 @@ export default class VisBug extends HTMLElement {
     }
   }
 
+  applyStyles(visbugPayload) {
+    this.selectorEngine
+      .selection()
+      .map(el => showHideSelected(el))
+      .forEach(el => {
+        const tagged = Object.assign(visbugPayload,
+          { synthetic: true },
+        )
+        applyStyle({el, ...tagged})
+      })
+  }
+
+  broadcastSelection(nodes) {
+    const stringifyElement = node => {
+      const {nodeName, classList, id, index, parentNode } = node
+      return `${id?'#'+id:''}${nodeName.toLowerCase()}${classList.length?'.'+ classList.toString().split(' ').join('.'):''}:nth-child(${[...parentNode.children].indexOf(node)+1})`
+    }
+
+    const selection_payload = [...nodes]
+      .map(node =>
+        `${stringifyElement(node.parentNode)} > ${stringifyElement(node)}`)
+
+    // todo: create a callback system here to be iterated on
+    // todo: iterate over callbacks and invoke with payload
+    console.log(selection_payload)
+  }
+
+  consumeSelection(visbugSelectionPayload) {
+    const nodes = visbugSelectionPayload.flatMap(queryString =>
+      [...document.querySelectorAll(queryString)])
+
+    // this.selectorEngine.select(nodes)
+    console.log(nodes)
+  }
+
   get activeTool() {
     return this.active_tool.dataset.tool
   }

app/features/margin.js

@@ -1,5 +1,8 @@
 import hotkeys from 'hotkeys-js'
-import { metaKey, getStyle, getSide, showHideSelected } from '../utilities/'
+import {
+  metaKey, getStyle, getSide,
+  showHideSelected, applyStyle
+} from '../utilities/'
 
 const key_events = 'up,down,left,right'
   .split(',')
@@ -50,8 +53,7 @@ export function pushElement(els, direction) {
           ? payload.current - payload.amount
           : payload.current + payload.amount
       }))
-    .forEach(({el, style, margin}) =>
-      el.style[style] = `${margin < 0 ? 0 : margin}px`)
+    .forEach(applyStyle)
 }
 
 export function pushAllElementSides(els, keycommand) {

app/features/padding.js

@@ -1,5 +1,8 @@
 import hotkeys from 'hotkeys-js'
-import { metaKey, getStyle, getSide, showHideSelected } from '../utilities/'
+import {
+  metaKey, getStyle, getSide,
+  showHideSelected, applyStyle
+} from '../utilities/'
 
 const key_events = 'up,down,left,right'
   .split(',')
@@ -50,8 +53,13 @@ export function padElement(els, direction) {
           ? payload.current - payload.amount
           : payload.current + payload.amount
       }))
-    .forEach(({el, style, padding}) =>
-      el.style[style] = `${padding < 0 ? 0 : padding}px`)
+    .map(({el, style, padding, current}) => ({
+      el,
+      style,
+      was: `${current}px`,
+      is: `${padding < 0 ? 0 : padding}px`
+    }))
+    .forEach(applyStyle)
 }
 
 export function padAllElementSides(els, keycommand) {
@@ -109,10 +117,10 @@ export function createPaddingVisual(el, hover = false) {
       sides[side] = Math.round(val.toFixed(1) * 100) / 100
     })
 
-    boxdisplay.position = { 
+    boxdisplay.position = {
       mode: 'padding',
       color: hover ? 'purple' : 'pink',
-      bounds, 
+      bounds,
       sides,
     }
   }

app/utilities/index.js

@@ -3,3 +3,4 @@ export * from './accessibility'
 export * from './common'
 export * from './strings'
 export * from './window'
+export * from './side-effects'

app/utilities/side-effects.js

@@ -0,0 +1,21 @@
+const state = {
+  bundle: [],
+}
+
+setInterval(() => {
+  if (state.bundle.length) {
+    console.log(state.bundle)
+    state.bundle = []
+  }
+}, 0)
+
+const pushPayload = payload =>
+  state.bundle.push(payload)
+
+export const applyStyle = payload => {
+  const {el, style, was, is} = payload
+  el.style[style] = is
+
+  if (!payload.synthetic)
+    pushPayload(payload)
+}