simplyflow 0.8.2 → 0.9.0

package/src/edit.mjs

@@ -1,108 +1,193 @@
-/**
- * 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;
+import toolbars from './edit/toolbars.mjs'
+import '../src/flow.mjs'
 
-  const range = document.createRange();
-  range.setStart(selection.focusNode, selection.focusOffset);
-  range.collapse(true);
+const editSet = new Set()
 
-  // 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)
+export function edit(rootElement)
 {
   return simply.app({
-    container: element,
+    container: rootElement,
     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'
+      editAll: function(elements) {
+        for (let el of elements) {
+          this.actions.edit(el)
+        }
       },
-      hideToolbar: function() {
-        this.toolbar.style.display = 'none'
+      edit: function(el) {
+        el.setAttribute('contenteditable', true)
+        editSet.add(el, true)
       },
-      close: function() {
-        this.container.removeAttribute('contenteditable')
+      editClose: function(el) {
+        el.removeAttribute('contenteditable')
+        editSet.remove(el)
+      },
+      editQuit: function() {
+        for (let el of editSet.entries()) {
+          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)
+          if (this.state.anchor.visible) {
+            this.actions.showToolbar()
           } 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
+    state: {
+      toolbars: {
+        mainToolbar: {
+          buttons: [
+            {
+              label: 'Save',
+              command: 'save',
+              icon: '#save'
+            },
+            {
+              label: 'Undo',
+              command: 'undo',
+              icon: '#rotate-ccw'
+            },
+            {
+              label: 'Redo',
+              command: 'redo',
+              icon: '#rotate-cw'
+            },
+            {
+              label: 'Help',
+              command: 'help-main',
+              icon: '#help-circle'
+            },
+            {
+              label: 'Close',
+              command: 'close',
+              icon: ''
+            }
+          ]
+        },
+        floatToolbarText: {
+          buttons: [
+            {
+              label: 'Text',
+              icon: '#type',
+              value: 'styleToolbar',
+              command: 'expand'
+            },
+            {
+              label: 'Align',
+              icon: '#align-left',
+              command: 'expand',
+              value: 'alignToolbar'
+            }
+          ],
+          toolbars: {
+            styleToolbar,
+            alignToolbar
           }
-          if (!this.container.contains(selection.anchorNode)) {
-            console.log('selection outside container')
-            return
+        },
+        floatToolbarImg: {
+          buttons: [
+            {
+              label: 'Align',
+              icon: '#align-left',
+              command: 'expand',
+              value: 'alignToolbar'
+            }
+          ],
+          toolbars: {
+            alignToolbar
           }
-          const position = getCursorPosition(this.container)
-          console.log('position',position)
-          this.actions.showToolbar(position)
+        }
+      }
+    },
+    hooks: {
+      start: function() {
+        // make sure this.state is a signal before calling start hooks of components
+        // and simply.bind - move to default start() hook in app.mjs (when simplyflow is in simplyview)
+        this.state = simply.state.signal(this.state),
+        simply.bind({
+          root: this.state
         })
+        // move this code to default start() hook in app.mja, run it before
+        // the app.hooks.start function
+        for (let component in this.components) {
+          if (this.components[component].hooks?.start) {
+            this.components[component].hooks.start.apply(this)
+          }
+        }
       }
+    },
+    components: {
+      toolbars
     }
   })
-}
+}
+
+const alignToolbar = {
+  buttons: [
+    {
+      label: 'Left',
+      icon: '#align-left',
+      command: 'align',
+      value: 'left'
+    },
+    {
+      label: 'Center',
+      icon: '#align-center',
+      command: 'align',
+      value: 'center'
+    },
+    {
+      label: 'Right',
+      icon: '#align-right',
+      command: 'align',
+      value: 'right'
+    },
+    {
+      label: 'Justify',
+      icon: '#align-justify',
+      command: 'align',
+      value: 'justify'
+    },
+    {
+      label: 'None',
+      icon: '#x',
+      command: 'align',
+      value: 'none'
+    }
+  ]
+}
+
+const styleToolbar = {
+  buttons: [
+    {
+      label: 'Bold',
+      icon: '#bold',
+      command: 'toggle',
+      value: '<strong>'
+    },
+    {
+      label: 'Italic',
+      icon: '#italic',
+      command: 'toggle',
+      value: '<em>'
+    },
+    {
+      label: 'Underline',
+      icon: '#underline',
+      command: 'toggle',
+      value: '<u>'
+    },
+    {
+      label: 'Code',
+      icon: '#code',
+      command: 'toggle',
+      value: '<code>'
+    }
+  ]
+}

package/src/model.mjs

@@ -1,4 +1,5 @@
 import {signal, effect, throttledEffect, batch} from './state.mjs'
+import { DEP } from './symbols.mjs'
 
 /**
  * This class implements a pluggable data model, where you can
@@ -46,7 +47,7 @@ class SimplyFlowModel {
 		}
 		const dataSignal = this.effects[this.effects.length-1]
 		const connectedSignal = fn.call(this, dataSignal)
-		if (!connectedSignal || !connectedSignal[Symbol.Signal]) {
+		if (!connectedSignal || !connectedSignal[DEP.SIGNAL]) {
 			throw new Error('addEffect function parameter must return a Signal', { cause: fn })
 		}
 		this.view = connectedSignal