simplyflow 0.8.1 → 0.9.0

package/src/edit/toolbars.mjs

@@ -0,0 +1,315 @@
+import anchor from './anchor.mjs'
+import '../flow.mjs'
+
+
+const simplyToolbarCSS = css`
+:host {
+    --simply-button-font: arial, helvetica, sans-serif;
+    --simply-button-font-size: 11px;
+    --simply-button-width: 50px;
+    --simply-button-height: 50px;
+    --simply-button-color: #333;
+    --simply-button-primary: #ea5922;
+}
+.simply-button {
+    height: var(--simply-button-height);
+    border-top: 1px solid transparent;
+    border-bottom: 2px solid transparent;
+    transition: background 0.2s ease;
+    font-size: var(--simply-button-font-size);
+    letter-spacing: 0;
+    font-family: var(--simply-button-font);
+    white-space: nowrap;
+    user-select: none;
+    vertical-align: top;
+    min-width: var(--simply-button-width);
+    text-align: center;
+    cursor: pointer;
+    padding: 0 4px;
+    text-transform: none;
+    background: transparent;
+    outline: none;
+    box-shadow: none;
+    border-radius: 0;
+    color: var(--simply-button-color);
+    position: relative;
+}
+.simply-button:hover {
+    border-bottom: 2px solid var(--simply-button-primary);
+    box-shadow: none;
+}
+.simply-button .ds-icon {
+    height: 26px;
+    font-size: 26px;
+    padding: 0 4px;
+    display: block;
+    margin: -2px auto -2px;
+    position: relative;
+}
+.simply-button.ds-selected {
+    border-top-color: var(--ds-grey-40);
+    background-color: var(--ds-grey-light);
+    border-left: 1px solid var(--ds-grey-40);
+    border-right: 1px solid var(--ds-white);
+}
+.simply-button:active {
+	border-bottom: 2px solid var(--ds-primary);
+    box-shadow: none;
+}
+.simply-toolbar {
+    white-space: nowrap;
+    min-width: 100%;
+    min-height: 50px;
+    display: flex;
+    position: relative;
+}
+.simply-toolbar-main {
+    border-top: 2px solid var(--simply-button-primary);
+    background: linear-gradient(180deg, white 0, white 95%, #CCC 100%);
+}
+.simply-toolbar-inline {
+	min-width: 100px;
+}
+.simply-toolbar-inline .ds-button,
+.simply-toolbar .ds-button {
+    margin: 0;
+}
+.simply-toolbar-sub .simply-toolbar {
+	background: #EEE;
+	min-height: 40px;
+}
+.simply-toolbar-sub .simply-button {
+	height: 40px;
+	min-width: 40px;
+}
+.simply-toolbar-sub .simply-button .ds-icon {
+    height: 20px;
+    font-size: 20px;
+}
+.simply-toolbar-highlight {
+    background: var(--ds-primary-gradient-bump);
+    color: var(--ds-primary-contrast);
+}
+.simply-toolbar  .simply-toolbar-title {
+    margin-top: 0;
+}
+.simply-toolbar-spacer {
+    border-left: 1px solid #ccc;
+    height: 60px;
+    position: absolute;
+    display: inline-block;
+}
+.simply-button-expands:not(.ds-selected)::after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    margin-left: -3px;
+    width: 0;
+    border-top: 3px solid #888;
+    border-bottom: 0;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+}
+.simply-button-expanded {
+	background: #EEE;
+}
+.simply-button.simply-button-expanded::after {
+	display: none;
+}
+.simply-toolbar .simply-push-right {
+    margin-left: auto;
+}
+.simply-toolbar input[type="text"] {
+    margin-right:0;
+    margin-bottom: 0;
+    margin-top: 10px;
+    font-size: small;
+    line-height: 1.2em;
+    height: 35px;
+}
+.simply-toolbar-header {
+    border-top-width: 5px;
+}
+.ds-nightmode .simply-toolbar {
+    background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
+    color: var(--ds-white);
+}
+.ds-nightmode .simply-button {
+    color: var(--ds-white);
+}
+.ds-nightmode .simply-button.ds-selected {
+    background-color: var(--ds-grey-80);
+    border-left-color: var(--ds-black);
+    border-top-color: var(--ds-black);
+    border-right-color: var(--ds-grey-60);
+}
+.ds-nightmode .simply-button[disabled] {
+    background-color: transparent;
+    color: var(--ds-grey-60);
+}
+.simply-toolbar.ds-hidden {
+	height: 0px;
+	overflow: hidden;
+	min-height: 0px;
+}`
+
+
+//TODO: allow app to specify which toolbar to show instead of fixed toolbars.floatToolbarText.buttons
+const simplyToolbarContents = html`
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@muze-nl/theds@0.2.7/dist/theds.css">
+	<style>
+		${simplyToolbarCSS}
+	</style>
+	<nav class="simply-toolbar simply-toolbar-main simply-toolbar-inline" data-flow-list="toolbars.floatToolbarText.buttons">
+		<template rel="simply-toolbar"></template>
+	</nav>
+	<div class="simply-toolbar-sub" data-flow-map="toolbars.floatToolbarText.toolbars">
+		<template>
+			<nav class="simply-toolbar ds-hidden" data-flow-field=":key" data-flow-transform="simplyToolbar">
+				<div data-flow-list="buttons">
+					<template rel="simply-toolbar"></template>
+				</div>
+			</nav>
+		</template>
+	</div>`
+
+export default {
+	css: {
+		simplyToolbarFloat: css`
+:root {
+	--ds-shadow-light: rgba(0,0,0,0.07);
+	--ds-shadow-middle: rgba(0,0,0,0.09);
+	--ds-shadow-dark: rgba(0,0,0,0.11);
+	--ds-shadow-small: 
+	    0 1px 1px var(--ds-shadow-dark),
+	    0 2px 2px var(--ds-shadow-middle),
+	    0 4px 4px var(--ds-shadow-light)
+	;
+}
+.simply-toolbar-float {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	width: auto;
+	position-anchor: --cursor-anchor;
+	position-area: end span-all;
+	position: absolute;
+	min-width:100px;
+	min-height: 50px;
+	background: white;
+	z-index: 10000;
+	margin-top: -4px;
+	box-shadow: var(--ds-shadow-small);
+}`
+	},
+	html: {
+	'simply-toolbar': 
+html`<button class="ds-button simply-button" data-flow-field=":value" data-flow-transform="simplyToolbarButton">
+	<svg class="ds-icon ds-icon-feather">
+        <use xlink:href="feather-sprite.svg#x" data-flow-transform="simplyIcon" data-flow-field="icon">
+    </use></svg>
+    <span data-flow-field="label"></span>
+</button>`,
+	'simply-toolbar-float': 
+html`<div class="simply-toolbar simply-toolbar-float simply-toolbar-inline" popover="manual"></div>`
+	},
+	transformers: {
+		simplyToolbar: function(context, next) {
+			context.element.id = context.value
+		},
+		simplyToolbarButton: function(context, next) {
+			const el = context.element
+			el.value = context.value.command
+			if (context.value.command=="expand") {
+				el.classList.add('simply-button-expands')
+			}
+			if (context.value.command) {
+				el.dataset.simplyCommand = context.value.command
+			}
+			if (context.value.value) {
+				el.value = context.value.value
+			}
+			// skip next()
+		},
+		simplyIcon: function(context, next) {
+			const url = new URL(context.element.getAttribute('xlink:href'), document.location)
+			url.hash = context.value
+			context.element.setAttribute('xlink:href', url.href)
+			// skip next()
+		}
+	},
+	commands: {
+		toggle: function(el, value) {
+
+		},
+		align: function(el, value) {
+
+		},
+		expand: function(el, value) {
+			const toolbar = el.closest('.simply-toolbar')
+			const subToolbars = toolbar.nextElementSibling;
+			if (!subToolbars) {
+				console.error('no subtoolbars')
+				return
+			}
+			const current = Array.from(subToolbars.querySelectorAll('.simply-toolbar:not(.ds-hidden)'))
+			for( let t of current) {
+				t.classList.add('ds-hidden')
+			}
+			const selectedToolbar = subToolbars.querySelector('#'+value)
+			if (selectedToolbar) {
+				selectedToolbar.classList.remove('ds-hidden')
+				const buttons = Array.from(toolbar.querySelectorAll('.simply-button-expanded'))
+				for (let button of buttons) {
+					button.classList.remove('simply-button-expanded')
+				}
+				el.classList.add('simply-button-expanded')
+			} else {
+				console.error('toolbar '+value+' not found')
+			}
+		}
+	},
+	actions: {
+		showToolbar: function(position) {
+			this.state.toolbar.showPopover()
+		},
+		hideToolbar: function() {
+			this.state.toolbar.hidePopover()
+		}
+	},
+	hooks: {
+		start: function() {
+	        this.state.toolbar = this.container.querySelector('simply-edit-focus-toolbar')
+	        if (!this.state.toolbar) {
+				this.container.insertAdjacentHTML('beforeend','<simply-render rel="simply-toolbar-float"></simply-render>')
+				setTimeout(() => {
+					const toolbar = document.querySelector('.simply-toolbar-float')
+					const shadow = toolbar.attachShadow({ mode: "open"})
+					shadow.innerHTML = simplyToolbarContents
+					this.state.toolbar = toolbar
+				    simply.state.effect(() => {
+						let visible = this.state.anchor.visible
+						if (visible) {
+							this.actions.showToolbar()
+						} else {
+							this.actions.hideToolbar()
+						}
+					})
+					// databinding doesn't reach into shadowRoot by default, so set it up here
+					simply.bind({
+						root: this.state,
+						container: toolbar.shadowRoot,
+						transformers: this.transformers
+					})
+					// same for commands, set container explicitly to the shadowRoot
+					simply.command({ app: this, container: toolbar.shadowRoot, commands: this.commands})
+				}, 100)
+	        }
+		}
+	},
+	components: {
+		anchor
+	}
+}

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