simplyflow 0.7.9 → 0.8.2

package/src/bind.render.mjs

@@ -2,8 +2,9 @@
  * Default renderers for data binding
  * Will be used unless overriden in the SimplyBind options parameter
  */
-import { signal as domSignal } from './dom.mjs'
-
+import { signal as domSignal, trackDomField, trackDomList } from './dom.mjs'
+import { throttledEffect, effect, untracked, batch } from './state.mjs'
+import { getValueByPath } from './bind.mjs'
 /**
  * This function is used by default to render dom elements with the `data-flow-field` attribute.
  * It will switch to only switching in template content if the context has any templates.
@@ -23,16 +24,6 @@ export function field(context)
         }
     } else if (this.options.renderers['*']) {
         this.options.renderers['*'].call(this, context)
-        // FIXME: should call a setter (defined in field type) to set the value back into root data
-        if (this.options.twoway) { 
-            // TODO: make content-editable if editmode is toggled on
-            // how do you toggle editmode? global signal?
-            // make uneditable if editmode is toggled off
-            const s = domSignal(context.element)
-            effect(() => {
-                setValueByPath(this.options.root, context.path, s.innerHTML)
-            })
-        }
     }
     return context
 }
@@ -46,6 +37,8 @@ export function list(context)
     if (!Array.isArray(context.value)) {
         context.value = [context.value]
     }
+    // make sure this effect is triggered if the length of the array changes
+    const length = context.value.length
     if (!context.templates?.length) {
         console.error('No templates found in', context.element)
     } else {
@@ -70,37 +63,78 @@ export function map(context)
     return context
 }
 
+function isInt(s) {
+    if (parseInt(s)==s) {
+        return true
+    }
+}
+
+/**
+ * This function sets a given value on the given path, starting at the given root.
+ * It will automatically create objects if a path part does not yet exist.
+ * @param root the root object
+ * @param path a JSON path
+ * @param value the value to set
+ */
 export function setValueByPath(root, path, value)
 {
-    let parts = path.split('.')
-    let curr = root
-    let part
-    part = parts.shift()
-    let prev = null
-    let prevPart = null
-    while (part && curr) {
-        part = decodeURIComponent(part)
-        if (part=='0' && !Array.isArray(curr)) {
-            // ignore so that data-flow-list="nonarray" will work
-        } else if (part==':key') {
-            // FIXME: should change the key, not the value... not supported yet?
-            throw new Error('setting key not yet supported')
-            curr = prevPart
-        } else if (part==':value') {
-            // do nothing
-        } else if (Array.isArray(curr) && typeof curr[part]=='undefined') {
-            prev = curr[0]
-            curr = curr[0][part] // so that data-flow-field="array.foo" works
-        } else {
-            prev = curr
-            curr = curr[part]
-        }
-        prevPart = part
+    batch(() => {
+        let parts = path.split('.')
+        let curr = root
+        let part
         part = parts.shift()
-    }
-    if (prev && prevPart && prev[prevPart]!==value) {
-        prev[prevPart] = value
-    }
+        let prev = null
+        let prevPart = null
+        let prevCurr = curr
+        while (part && curr) {
+            prevCurr = curr
+            part = decodeURIComponent(part)
+            if (part=='0' && !Array.isArray(curr)) {
+                // ignore so that data-flow-list="nonarray" will work
+            } else if (part==':key') {
+                // FIXME: should change the key, not the value... not supported yet?
+                throw new Error('setting key not yet supported')
+                curr = prevPart
+            } else if (part==':value') {
+                // do nothing
+            } else if (Array.isArray(curr) && !isInt(part) && typeof curr[part]=='undefined') {
+                prev = curr[0]
+                curr = curr[0][part] // so that data-flow-field="array.foo" works
+            } else {
+                prev = curr
+                curr = curr[part]
+            }
+            prevPart = part
+            part = parts.shift()
+            if (part && !curr) {
+                // path in html does not exist yet, so create it
+                const intKey = parseInt(part)
+                if (intKey>=0 && part===''+intKey) {
+                    prevCurr[prevPart] = []
+                } else {
+                    prevCurr[prevPart] = {}
+                }
+                curr = prevCurr[prevPart]
+            }
+        }
+        if (prev && prevPart && prev[prevPart]!==value) {
+            if (value && typeof value=='object') {
+                curr = prev[prevPart]
+                if (!curr) {
+                    // last part of path in html does not exist yet, create it
+                    prev[prevPart] = {}
+                    curr = prev[prevPart]
+                }
+                for (const prop in value) {
+                    if (curr[prop]!==value[prop]) {
+                        curr[prop] = value[prop]
+                    }
+                }
+            } else {
+                prev[prevPart] = value
+            }
+        }
+    })
 }
 
 /**
@@ -176,6 +210,9 @@ export function arrayByTemplates(context)
             length++
         }
     }
+    if (this.options.twoway) {
+        trackDomList.call(this, context.element)
+    }
 }
 
 /**
@@ -271,7 +308,7 @@ export function input(context)
     const el  = context.element
     let value = context.value
 
-    element(context)
+    element.call(this, context)
     if (typeof value == 'undefined') {
         value = ''
     }
@@ -291,8 +328,7 @@ export function input(context)
  */
 export function button(context)
 {
-    element(context)
-    setProperties(context.element, context.value, 'value')
+    element.call(this, context, 'value')
 }
 
 /**
@@ -377,8 +413,12 @@ export function setSelectOptions(select,options)
  */
 export function anchor(context)
 {
-    element(context)
-    setProperties(context.element, context.value, 'target', 'href', 'name', 'newwindow', 'nofollow')
+    element.call(this, context, 'target', 'href', 'name', 'newwindow', 'nofollow')
+    if (this.options.twoway) {
+        batch(() => {
+            updateProperties.call(this, context, ['target', 'href', 'name', 'newwindow', 'nofollow'])
+        })
+    }
 }
 
 /**
@@ -387,6 +427,11 @@ export function anchor(context)
 export function image(context)
 {
     setProperties(context.element, context.value, 'title', 'alt', 'src', 'id')
+    if (this.options.twoway) {
+        batch(() => {
+            updateProperties.call(this, context, ['title', 'alt', 'src', 'id'])
+        })
+    }
 }
 
 /**
@@ -395,6 +440,11 @@ export function image(context)
 export function iframe(context)
 {
     setProperties(context.element, context.value, 'title', 'src', 'id')
+    if (this.options.twoway) {
+        batch(() => {
+            updateProperties.call(this, context, ['title','src','id'])
+        })
+    }
 }
 
 /**
@@ -402,25 +452,34 @@ export function iframe(context)
  */
 export function meta(context)
 {
-    setProperties(context.element, context.value, 'content', 'id')    
+    setProperties(context.element, context.value, 'content', 'id')
+    if (this.options.twoway) {
+        batch(() => {
+            updateProperties.call(this, context, ['content','id'])
+        })
+    }
 }
 
 /**
  * sets the innerHTML and title and id properties of any HTML element
  */
-export function element(context)
+export function element(context, ...extraprops)
 {
     const el  = context.element
     let value = context.value
-
-    if (typeof value=='undefined' || value==null) {
-        value = ''
+    let valueIsString = false
+    if (typeof value!='undefined' && value!==null) {
+        let strValue = ''+value
+        if (typeof value!='object' || strValue.substring(0,8)!='[object ') {
+            value = { innerHTML: value }
+            valueIsString = true
+        }
     }
-    let strValue = ''+value
-    if (typeof value!='object' || strValue.substring(0,8)!='[object ') {
-        value = { innerHTML: value }
+    const props = ['innerHTML','title','id','className'].concat(extraprops)
+    setProperties(el, value, ...props)
+    if (this.options.twoway) {
+        trackDomField.call(this, context.element, props, valueIsString)
     }
-    setProperties(el, value, 'innerHTML', 'title', 'id', 'className')
 }
 
 /**
@@ -447,6 +506,18 @@ export function setProperties(el, data, ...properties) {
     }
 }
 
+export function getProperties(el, ...properties) {
+    const result = {}
+    for (const property of properties) {
+        switch(property) {
+            default: 
+                result[property] = el[property]
+            break
+        }
+    }
+    return result
+}
+
 /**
  * Returns true if a matches b, either by having the
  * same string value, or matching string :empty against a falsy value

package/src/dom.mjs

@@ -1,4 +1,9 @@
-import { signals, signal as stateSignal, notifyGet, notifySet, makeContext } from './state.mjs'
+import { signals, signal as stateSignal, notifyGet, notifySet, makeContext,
+         throttledEffect, effect, untracked, batch } from './state.mjs'
+import { getValueByPath } from './bind.mjs'
+import { setValueByPath, getProperties } from './bind.render.mjs'
+
+const domSignals = new WeakMap()
 
 const domSignalHandler = {
     get: (target, property, receiver) => {
@@ -34,20 +39,29 @@ const domSignalHandler = {
     }
 }
 
-export function signal(el) {
+export function signal(el, options) {
     if (el[Symbol.xRay]) {
         return el
     }
     if (!signals.has(el)) {
         signals.set(el, new Proxy(el, domSignalHandler))
-        domListen(el, signals.get(el))
+        domListen(el, signals.get(el), options)
     }
     return signals.get(el)
 }
 
 const observers = new WeakMap()
 
-function domListen(el, signal) {
+function domListen(el, signal, options) {
+    const defaultOptions = {
+        characterData: true,
+        subtree: true,
+        attributes: true,
+        attributesOldValue: true
+    }
+    if (!options) {
+        options = defaultOptions
+    }
     let oldContentHTML = el.innerHTML
     let oldContentText = el.innerText
     if (!observers.has(el)) {
@@ -68,18 +82,20 @@ function domListen(el, signal) {
                         changes.innerText = oldContentText
                         oldContentText = el.innerText
                     }
+                } else if (mutation.type==='childList') {
+                    changes.children = { //FIXME: overwrites changes in this list path if list is rendered multiple times
+                        was: Array.from(el.children) //FIXME; fill in 'now'
+                    }
+                    changes.length = -1 //FIXME: don't do this :)
+                } else {
+                    console.log('nothing to do for',el,mutation.type)
                 }
             }
             for (const prop in changes) {
                 notifySet(signal, makeContext(prop, { was: changes[prop], now: el[prop] }))
             }
         })
-        observer.observe(el, {
-            characterData: true,
-            subtree: true,
-            attributes: true,
-            attributesOldValue: true
-        })
+        observer.observe(el, options)
         observers.set(el, observer)
         //@TODO: unregister the observer when el is removed from the dom (after a timeout)
         if (el.matches('input, textarea, select')) {
@@ -97,3 +113,65 @@ function domListen(el, signal) {
         }
     }
 }
+
+export function trackDomList(element)
+{
+    const path = this.getBindingPath(element)
+    if (!path) {
+        throw new Error('Could not find binding path for element', { cause: element })
+    }
+    const s = signal(element, {
+        childList: true
+    })
+    throttledEffect(() => {
+        const children = Array.from(s.children)
+        untracked(() => { // don't track access to the data, only track dom changes
+            batch(() => { // apply all changes in the list as one change
+                let key=0
+                const currentList = getValueByPath(this.options.root, path)
+                const source = currentList.slice() // make sure changes in currentList don't affect the original source
+                for (const item of children) {
+                    if (item.tagName==='TEMPLATE') {
+                        continue
+                    }
+                    if (item.dataset.flowKey) { //FIXME: could be other attribute name
+                        if (item.dataset.flowKey!=key) {
+                            setValueByPath(this.options.root, path+'.'+key,
+                                source[item.dataset.flowKey])
+                        }
+                        key++
+                    }
+                }
+                if (currentList.length>key) {
+                    // remove extra values
+                    currentList.length = key
+                }
+            })
+        })
+    })
+}
+
+export function trackDomField(element, props, valueIsString) {
+    if (domSignals.has(element)) {
+        return
+    }
+    const path = this.getBindingPath(element)
+    if (!path) {
+        throw new Error('Could not find binding path for element', { cause: element })
+    }
+    const s = signal(element)
+    domSignals.set(element, s)
+    //TODO: run reverse transformers (extract)
+    batch(() => { // avoids cyclical dependencies - check why
+        throttledEffect(() => {
+            let updateValue = s.innerHTML //FIXME: incorrect: in an anchor this could be s.href - use extract here
+            if (!valueIsString) {
+                updateValue = getProperties(s, ...props)
+            }
+            untracked(() => { // don't track changes in data, only in the dom
+                // don't trigger this effect when the data changes (root.path)
+                setValueByPath(this.options.root, path, updateValue)
+            })
+        })
+    })
+}

package/src/edit.mjs

@@ -0,0 +1,108 @@
+/**
+ * This function returns the cursor position and height, if the cursor is in
+ * the given element. The x and y position are calculated relative to the top
+ * left of the given element. This function does not alter the DOM in any way.
+ */
+function getCursorPosition(element) {
+  const selection = window.getSelection();
+  if (!selection.rangeCount) return null;
+
+  const range = document.createRange();
+  range.setStart(selection.focusNode, selection.focusOffset);
+  range.collapse(true);
+
+  // Try getClientRects() first — often non-empty even on empty lines
+  const elementRect = element.getBoundingClientRect();
+
+  const cursorNode = selection.focusNode;
+  const cursorElement = cursorNode.nodeType === Node.TEXT_NODE
+    ? cursorNode.parentElement
+    : cursorNode;
+
+  let x,y,height;
+  const rects = range.getClientRects();
+  if (rects.length > 0) {
+  	x = rects[0].left - elementRect.left
+  	y = rects[0].top - elementRect.top
+    height = rects[0].height
+  } else {
+	  // Fallback for truly empty element: use padding from CSS
+    const style = window.getComputedStyle(cursorElement);
+    const lineHeight = parseFloat(style.lineHeight);
+    height = isNaN(lineHeight) ? parseFloat(style.fontSize) : lineHeight
+    const cursorElementRect = cursorElement.getBoundingClientRect();
+  	x = cursorElementRect.left - elementRect.left + parseFloat(style.paddingLeft)
+    y = cursorElementRect.top  - elementRect.top  + parseFloat(style.paddingTop)
+  }
+  return {
+  	x,
+  	y,
+  	height,
+  	element: cursorElement
+  }
+}
+
+export function edit(element)
+{
+  return simply.app({
+    container: element,
+    actions: {
+      showToolbar: function(position) {
+        const containerRect = this.container.getBoundingClientRect()
+        this.toolbar.style.top = containerRect.top + position.y + position.height + 'px'
+        this.toolbar.style.left = containerRect.left + position.x + 'px'
+        this.toolbar.style.display = 'block'
+      },
+      hideToolbar: function() {
+        this.toolbar.style.display = 'none'
+      },
+      close: function() {
+        this.container.removeAttribute('contenteditable')
+        document.removeEventListener(this.selectionListener)
+      }
+    },
+    keyboard: {
+      default: {
+        'Control+ ': function() {
+          if (this.toolbar.style.display == 'none') {
+            const position = getCursorPosition(this.container)
+            this.actions.showToolbar(position)
+          } else {
+            this.actions.hideToolbar()
+          }
+        }
+      }
+    },
+    hooks: {
+      start: function() {
+        this.container.setAttribute('contenteditable', true)
+        this.toolbar = document.querySelector('simply-edit-focus-toolbar')
+        if (!this.toolbar) {
+          this.toolbar = document.createElement('div')
+          this.toolbar.id = 'simply-edit-focus-toolbar'
+          this.toolbar.style.position ='absolute'
+          this.toolbar.style['z-index'] = 10000
+          this.toolbar.style.border = '1px solid blue'
+          this.toolbar.innerHTML = 'toolbar'
+          document.body.appendChild(this.toolbar)
+        }
+        this.selectionListener = document.addEventListener('selectionchange', () => {
+          console.log('selectionchange')
+          const selection = window.getSelection()
+          if (!selection.rangeCount || selection.isCollapsed) {
+            this.actions.hideToolbar()
+            console.log('no selection')
+            return
+          }
+          if (!this.container.contains(selection.anchorNode)) {
+            console.log('selection outside container')
+            return
+          }
+          const position = getCursorPosition(this.container)
+          console.log('position',position)
+          this.actions.showToolbar(position)
+        })
+      }
+    }
+  })
+}

package/src/state.mjs

@@ -1,4 +1,6 @@
-const iterate = Symbol('iterate')
+if (!Symbol.iterate) {
+    Symbol.iterate = Symbol('iterate')
+}
 if (!Symbol.xRay) {
     Symbol.xRay = Symbol('xRay')
 }
@@ -72,7 +74,8 @@ const signalHandler = {
             notifySet(receiver, makeContext(property, { was: current, now: value } ) )
         }
         if (typeof current === 'undefined') {
-            notifySet(receiver, makeContext(iterate, {}))
+            notifySet(receiver, makeContext(Symbol.iterate, {}))
+            notifySet(receiver, makeContext('length', {}))
         }
         return true
     },
@@ -95,13 +98,13 @@ const signalHandler = {
     defineProperty: (target, property, descriptor) => {
         if (typeof target[property] === 'undefined') {
             let receiver = signals.get(target) // receiver is not part of the trap arguments, so retrieve it here
-            notifySet(receiver, makeContext(iterate, {}))
+            notifySet(receiver, makeContext(Symbol.iterate, {}))
         }
         return Object.defineProperty(target, property, descriptor)
     },
     ownKeys: (target) => {
         let receiver = signals.get(target) // receiver is not part of the trap arguments, so retrieve it here
-        notifyGet(receiver, iterate)
+        notifyGet(receiver, Symbol.iterate)
         return Reflect.ownKeys(target)
     }
 
@@ -120,6 +123,9 @@ export const signals = new WeakMap()
  * to allow reactive functions to be triggered when signal values change.
  */
 export function signal(v) {
+    if (!v) {
+        v = {}
+    }
     if (v[Symbol.Signal]) { // there can be only one signal for any value
         return v
     }