From d654eaeca6625440aa02e00e746c11c34ba05aae Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Sun, 11 Aug 2019 22:00:24 -0700 Subject: [PATCH 1/7] poc padding emitting changes --- app/features/padding.js | 14 +++++++++++--- app/utilities/index.js | 1 + app/utilities/side-effects.js | 6 ++++++ 3 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 app/utilities/side-effects.js diff --git a/app/features/padding.js b/app/features/padding.js index 2c5900b6..c43a425d 100644 --- a/app/features/padding.js +++ b/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) { diff --git a/app/utilities/index.js b/app/utilities/index.js index 7c0982ea..f88fe038 100644 --- a/app/utilities/index.js +++ b/app/utilities/index.js @@ -3,3 +3,4 @@ export * from './accessibility' export * from './common' export * from './strings' export * from './window' +export * from './side-effects' diff --git a/app/utilities/side-effects.js b/app/utilities/side-effects.js new file mode 100644 index 00000000..3f8b9a2d --- /dev/null +++ b/app/utilities/side-effects.js @@ -0,0 +1,6 @@ +export const applyStyle = payload => { + const {el, style, was, is} = payload + el.style[style] = is + + console.info(payload) +} \ No newline at end of file From f18a32e9b72cf2e1ae017e663969581c7621bc9a Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Sun, 11 Aug 2019 22:10:26 -0700 Subject: [PATCH 2/7] poc visbug taking external payloads as commands --- app/components/vis-bug/vis-bug.element.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/app/components/vis-bug/vis-bug.element.js b/app/components/vis-bug/vis-bug.element.js index e851c09e..9b58b0d3 100644 --- a/app/components/vis-bug/vis-bug.element.js +++ b/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', @@ -230,6 +233,15 @@ export default class VisBug extends HTMLElement { } } + applyStyles(visbugPayload) { + this.selectorEngine + .selection() + .map(el => showHideSelected(el)) + .forEach(el => + applyStyle({el, ...visbugPayload + })) + } + get activeTool() { return this.active_tool.dataset.tool } From 3688964860deaa5d9698bf1c334af569cd81ad11 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Tue, 27 Aug 2019 22:56:46 -0700 Subject: [PATCH 3/7] poc of serializing a nodelist, then deserializing it --- app/components/vis-bug/vis-bug.element.js | 24 +++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/app/components/vis-bug/vis-bug.element.js b/app/components/vis-bug/vis-bug.element.js index 9b58b0d3..8a640f66 100644 --- a/app/components/vis-bug/vis-bug.element.js +++ b/app/components/vis-bug/vis-bug.element.js @@ -46,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]) } @@ -242,6 +243,29 @@ export default class VisBug extends HTMLElement { })) } + 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: iterate over callbacks and invoke with payload + console.log(selection_payload) + this.consumeSelection(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 } From c4650cbf8a03de1772fed25656d1822bb937d3fb Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Tue, 27 Aug 2019 23:11:33 -0700 Subject: [PATCH 4/7] pull debug code --- app/components/vis-bug/vis-bug.element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/vis-bug/vis-bug.element.js b/app/components/vis-bug/vis-bug.element.js index 8a640f66..b5622cc0 100644 --- a/app/components/vis-bug/vis-bug.element.js +++ b/app/components/vis-bug/vis-bug.element.js @@ -253,9 +253,9 @@ export default class VisBug extends HTMLElement { .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) - this.consumeSelection(selection_payload) } consumeSelection(visbugSelectionPayload) { From 3cd946a7cef1d5bd344ae3875e1c162be8c076a2 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 13 Nov 2019 11:42:03 -0800 Subject: [PATCH 5/7] optimizations, 1st pass for emitter --- app/components/vis-bug/vis-bug.element.js | 15 +++++++++------ app/features/padding.js | 12 ++++++------ app/utilities/side-effects.js | 19 +++++++++++++++++-- 3 files changed, 32 insertions(+), 14 deletions(-) diff --git a/app/components/vis-bug/vis-bug.element.js b/app/components/vis-bug/vis-bug.element.js index b5622cc0..6f974b86 100644 --- a/app/components/vis-bug/vis-bug.element.js +++ b/app/components/vis-bug/vis-bug.element.js @@ -17,7 +17,7 @@ import { VisBugModel } from './model' import * as Icons from './vis-bug.icons' import { provideSelectorEngine } from '../../features/search' -import { +import { metaKey, applyStyle, showHideSelected } from '../../utilities/' @@ -69,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', }) @@ -238,9 +238,12 @@ export default class VisBug extends HTMLElement { this.selectorEngine .selection() .map(el => showHideSelected(el)) - .forEach(el => - applyStyle({el, ...visbugPayload - })) + .forEach(el => { + const tagged = Object.assign(visbugPayload, + { synthetic: true }, + ) + applyStyle({el, ...tagged}) + }) } broadcastSelection(nodes) { @@ -259,7 +262,7 @@ export default class VisBug extends HTMLElement { } consumeSelection(visbugSelectionPayload) { - const nodes = visbugSelectionPayload.flatMap(queryString => + const nodes = visbugSelectionPayload.flatMap(queryString => [...document.querySelectorAll(queryString)]) // this.selectorEngine.select(nodes) diff --git a/app/features/padding.js b/app/features/padding.js index c43a425d..55e30133 100644 --- a/app/features/padding.js +++ b/app/features/padding.js @@ -1,7 +1,7 @@ import hotkeys from 'hotkeys-js' -import { - metaKey, getStyle, getSide, - showHideSelected, applyStyle +import { + metaKey, getStyle, getSide, + showHideSelected, applyStyle, publishPayload } from '../utilities/' const key_events = 'up,down,left,right' @@ -54,7 +54,7 @@ export function padElement(els, direction) { : payload.current + payload.amount })) .map(({el, style, padding, current}) => ({ - el, + el, style, was: `${current}px`, is: `${padding < 0 ? 0 : padding}px` @@ -117,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, } } diff --git a/app/utilities/side-effects.js b/app/utilities/side-effects.js index 3f8b9a2d..ac9d774b 100644 --- a/app/utilities/side-effects.js +++ b/app/utilities/side-effects.js @@ -1,6 +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 - console.info(payload) -} \ No newline at end of file + if (!payload.synthetic) + pushPayload(payload) +} From 81a0ce272ca634fdf7bbae291fc62542f371a1a3 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 13 Nov 2019 11:45:26 -0800 Subject: [PATCH 6/7] removed unused import --- app/features/padding.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/features/padding.js b/app/features/padding.js index 55e30133..3df0070b 100644 --- a/app/features/padding.js +++ b/app/features/padding.js @@ -1,7 +1,7 @@ import hotkeys from 'hotkeys-js' import { metaKey, getStyle, getSide, - showHideSelected, applyStyle, publishPayload + showHideSelected, applyStyle } from '../utilities/' const key_events = 'up,down,left,right' From 13a0387ba49263e5508fec09b3cdb6242662d93f Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 13 Nov 2019 11:45:44 -0800 Subject: [PATCH 7/7] margin can pub/sub now --- app/features/margin.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/features/margin.js b/app/features/margin.js index d52b5e2d..55235b70 100644 --- a/app/features/margin.js +++ b/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) {