simplyflow 0.8.1 → 0.9.0

package/src/bind.mjs

@@ -1,10 +1,7 @@
 import { throttledEffect, destroy } from './state.mjs'
 import { escape_html, fixed_content } from './bind.transformers.mjs'
 import * as render from './bind.render.mjs'
-
-if (!Symbol.bindTemplate) {
-    Symbol.bindTemplate = Symbol('bindTemplate')
-}
+import { DEP } from './symbols.mjs'
 
 /**
  * Implements one way databinding, updating dom elements with matching attributes
@@ -48,6 +45,7 @@ class SimplyBind
             },
             renderers: {
                 'INPUT':render.input,
+                'TEXTAREA':render.input,
                 'BUTTON':render.button,
                 'SELECT':render.select,
                 'A':render.anchor,
@@ -255,7 +253,7 @@ class SimplyBind
             clone.children[0].setAttribute(attribute+'-key',index)
         }
         // keep track of the used template, so if that changes, the item can be updated
-        clone.children[0][Symbol.bindTemplate] = template
+        clone.children[0][DEP.TEMPLATE] = template
 
         // return clone, not the firstChild, so that all whitespace is cloned as well
         return clone

package/src/bind.render.mjs

@@ -2,9 +2,11 @@
  * 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'
+import { DEP } from './symbols.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.
@@ -147,7 +149,8 @@ export function setValueByPath(root, path, value)
 export function arrayByTemplates(context)
 {
     const attribute      = this.options.attribute
-
+    const attributes     = [attribute+'-field',attribute+'-list',attribute+'-map']
+    const attrQuery      = '['+attributes.join('],[')+']'
     let items = context.element.querySelectorAll(':scope > ['+attribute+'-key]')
     // do single merge strategy for now, in future calculate optimal merge strategy from a number
     // now just do a delete if a key <= last key, insert if a key >= last key
@@ -165,19 +168,24 @@ export function arrayByTemplates(context)
             item.remove()
         } else {
             // check that all data-bind params start with current json path or ':root', otherwise replaceChild
-            let bindings = Array.from(item.querySelectorAll(`[${attribute}]`))
-            if (item.matches(`[${attribute}]`)) {
+            let bindings = Array.from(item.querySelectorAll(attrQuery))
+            if (item.matches(attrQuery)) {
                 bindings.unshift(item)
             }
             let needsReplacement = bindings.find(b => {
-                let databind = b.getAttribute(attribute)
-                return (databind.substr(0,5)!==':root' 
-                    && databind.substr(0, context.path.length)!==context.path)
+                for (let attr of attributes) {
+                    let databind = b.getAttribute(attr)
+                    if (databind && databind.substr(0,5)!==':root' 
+                        && databind.substr(0, context.path.length)!==context.path) {
+                        return true
+                    }
+                }
+                return false
             })
             if (!needsReplacement) {
-                if (item[Symbol.bindTemplate]) {
+                if (item[DEP.TEMPLATE]) {
                     let newTemplate = this.findTemplate(context.templates, context.list[lastKey])
-                    if (newTemplate != item[Symbol.bindTemplate]){
+                    if (newTemplate != item[DEP.TEMPLATE]){
                         needsReplacement = true
                         if (!newTemplate) {
                             skipped++
@@ -211,35 +219,7 @@ export function arrayByTemplates(context)
         }
     }
     if (this.options.twoway) {
-        const s = domSignal(context.element, {
-            childList: true
-        })
-        throttledEffect(() => {
-            const children = Array.from(s.children)
-            batch(() => {
-                untracked(() => {
-                    let key=0
-                    const currentList = context.value.slice()
-                    for (const item of children) {
-                        if (item.tagName==='TEMPLATE') {
-                            continue
-                        }
-                        if (item.dataset.flowKey) {
-                            if (item.dataset.flowKey!=key) {
-                                setValueByPath(this.options.root, context.path+'.'+key,
-                                    currentList[item.dataset.flowKey])
-                            }
-                            key++
-                        }
-                    }
-                    if (context.value.length>key) {
-                        // remove extra values
-                        const source = getValueByPath(this.options.root, context.path)
-                        source.length = key
-                    }
-                })
-            })
-        })
+        trackDomList.call(this, context.element)
     }
 }
 
@@ -277,7 +257,7 @@ export function objectByTemplates(context)
             }
         }
         let newTemplate = this.findTemplate(context.templates, context.list[context.index])
-        if (newTemplate != item[Symbol.bindTemplate]){
+        if (newTemplate != item[DEP.TEMPLATE]){
             let clone = this.applyTemplate(context)
             context.element.replaceChild(clone, item)
         }
@@ -300,7 +280,7 @@ export function fieldByTemplates(context)
     context.parent = getParentPath(context.element)
     if (rendered) {
         if (template) {
-            if (rendered?.[Symbol.bindTemplate] != template) {
+            if (rendered?.[DEP.TEMPLATE] != template) {
                 const clone = this.applyTemplate(context)
                 context.element.replaceChild(clone, rendered)
             }
@@ -488,8 +468,6 @@ export function meta(context)
     }
 }
 
-const domSignals = new WeakMap()
-
 /**
  * sets the innerHTML and title and id properties of any HTML element
  */
@@ -508,29 +486,8 @@ export function element(context, ...extraprops)
     const props = ['innerHTML','title','id','className'].concat(extraprops)
     setProperties(el, value, ...props)
     if (this.options.twoway) {
-        batch(() => {
-            updateProperties.call(this, context, props, valueIsString)
-        })
-    }
-}
-
-export function updateProperties(context, props, valueIsString) {
-    if (domSignals.has(context.element)) {
-        return
+        trackDomField.call(this, context.element, props, valueIsString)
     }
-    const s = domSignal(context.element)
-    domSignals.set(context.element, s)
-    //TODO: run reverse transformers (extract)
-    throttledEffect(() => {
-        let updateValue = s.innerHTML //incorrect: in an anchor this could be s.href
-        if (!valueIsString) {
-            updateValue = getProperties(s, ...props)
-        }
-        untracked(() => {
-            // don't trigger this effect when the data changes (root.path)
-            setValueByPath(this.options.root, context.path, updateValue)
-        })
-    })
 }
 
 /**

package/src/dom.mjs

@@ -1,11 +1,28 @@
-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'
+import { DEP } from '../src/symbols.mjs'
 
+/**
+ * Tracks element => signal mapping so that each element only has one signal
+ */
+const domSignals = new WeakMap()
+
+/**
+ * Tracks element => mutationObservers
+ */
+const observers = new WeakMap()
+
+/**
+ * A dom signal is a Proxy, to track access to properties
+ */
 const domSignalHandler = {
     get: (target, property, receiver) => {
-        if (property===Symbol.xRay) {
+        if (property===DEP.XRAY) {
             return target // don't notifyGet here, this is only called by set
         }
-        if (property===Symbol.Signal) {
+        if (property===DEP.SIGNAL) {
             return true
         }
         const value = target?.[property]
@@ -34,8 +51,17 @@ const domSignalHandler = {
     }
 }
 
+/**
+ * This function returns a dom signal. Using this in an effect() function
+ * will automatically trigger the effect if a property of the dom signal 
+ * changes.
+ * Valid options are any of the mutationObserver options, like characterData, subtree, etc.
+ * @param HTMLElement el
+ * @param Object options
+ * @returns Proxy
+ */
 export function signal(el, options) {
-    if (el[Symbol.xRay]) {
+    if (el[DEP.XRAY]) {
         return el
     }
     if (!signals.has(el)) {
@@ -45,8 +71,9 @@ export function signal(el, options) {
     return signals.get(el)
 }
 
-const observers = new WeakMap()
-
+/**
+ * This sets up the mutationObserver that calls notifySet on changes in the DOM
+ */
 function domListen(el, signal, options) {
     const defaultOptions = {
         characterData: true,
@@ -108,3 +135,77 @@ function domListen(el, signal, options) {
         }
     }
 }
+
+/**
+ * This function sets up the dom signal on an element, provided it has a `data-flow-list` attribute
+ * @param HTMLElement element - the element to track
+ * @returns Proxy
+ */
+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
+                }
+            })
+        })
+    })
+    return s
+}
+
+/**
+ * This function sets up the dom signal on an element, provided it has a `data-flow-field` attribute
+ * @param HTMLElement element - the element to track
+ * @returns Proxy
+ */
+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)
+            })
+        })
+    })
+    return s
+}

package/src/edit/anchor.mjs

@@ -0,0 +1,130 @@
+import '../flow.mjs'
+
+export default {
+	html: {
+		anchor: html`<div class="anchor"></div>`
+	},
+	css: {
+		anchor: css`
+.anchor {
+	anchor-name: --cursor-anchor;
+	position: absolute;
+	z-index: 10000;
+	width: 10px;
+	height: 10px;
+	transform: rotate(45deg);
+	transform-origin: top left;
+	background: red;
+	display: none;
+}`
+	},
+	actions: {
+		anchorPosition: function(position) {
+			this.state.anchor.position = position
+		},
+		anchorShow: function() {
+			this.state.anchor.visible = true
+		},
+		anchorHide: function() {
+			this.state.anchor.visible = false
+		}
+	},
+	hooks: {
+		start: function() {
+			this.container.insertAdjacentHTML('beforeend','<simply-render rel="anchor"></simply-render>')
+			this.state.anchor = {
+				element: this.container.querySelector('.anchor'),
+				offset: this.container.getBoundingClientRect(),
+				visible: false,
+				position: {
+					x: 0,
+					y: 0
+				}
+			}
+			setTimeout(() => {
+				this.state.anchor.element = this.container.querySelector('.anchor')
+				this.state.anchor.offset = this.container.getBoundingClientRect()
+			},100)
+ 	        this.selectionListener = document.addEventListener('selectionchange', () => {
+				const selection = window.getSelection()
+				if (!selection.rangeCount || selection.isCollapsed) {
+					this.state.anchor.visible = false
+					return
+				}
+				if (!this.container.contains(selection.anchorNode)) {
+					this.state.anchor.visible = false
+					return
+				}
+				if (!selection.anchorNode.parentElement.closest('[contenteditable]')) {
+					this.state.anchor.visible = false
+					return
+				}
+				this.state.anchor.visible = true
+				const position = getCursorPosition(this.container)
+				this.state.anchor.position = position
+	        })
+			simply.state.effect(() => {
+				const pos = this.state.anchor.position
+				const offset = this.state.anchor.offset
+				simply.state.batch(() => {
+					this.state.anchor.element.style.top = (pos.y + pos.height + offset.top) + 'px'
+					this.state.anchor.element.style.left = (pos.x + offset.left) + 'px'
+				})
+			})
+			simply.state.effect(() => {
+				const visible = this.state.anchor.visible
+				console.log('anchor visible ', visible)
+				if (visible) {
+					this.state.anchor.element.style.display = 'block'
+				} else {
+					this.state.anchor.element.style.display = 'none'
+				}
+			})
+
+		}
+	}
+}
+
+/**
+ * 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
+	}
+}