@jinntec/fore 2.6.0 → 2.7.0

package/src/actions/fx-append.js

@@ -1,12 +1,11 @@
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
 import { resolveId } from '../xpath-evaluation.js';
+import { XPathUtil } from '../xpath-util.js';
 
 /**
  * `fx-append` appends an entry to a repeat.
  *
- *
- *
  * @deprecated - will be replaced with `fx-insert`
  * @fires index-changed - fired after new item is appended
  * @customElement
@@ -76,6 +75,8 @@ class FxAppend extends AbstractAction {
 
   actionPerformed() {
     super.actionPerformed();
+    const mi = this.getModelItem();
+    mi.notify();
     // const repeat = document.getElementById(this.repeat);
     // repeat.setIndex(repeat.nodeset.length);
     this._dispatch();
@@ -103,6 +104,9 @@ class FxAppend extends AbstractAction {
 
     // const rootNode = document.createElement(repeat.ref);
     // const rootNode = inscope.ownerDocument.createElement(repeat.ref);
+    /**
+     * @type {Element}
+     */
     const rootNode = inscope.ownerDocument.createElement(repeat.ref);
 
     // const data = this._dataFromRefs(rootNode, templ.content)
@@ -111,6 +115,23 @@ class FxAppend extends AbstractAction {
     inscope.appendChild(data);
     parentForm.signalChangeToElement(inscope.localName);
     parentForm.signalChangeToElement(data.localName);
+
+    const instanceId = XPathUtil.resolveInstance(this, this.ref);
+    const inst = this.getModel().getInstance(instanceId);
+
+    const fore = this.getOwnerForm();
+
+    Fore.dispatch(inst, 'insert', {
+      insertedNodes: data,
+      insertedParent: inscope,
+      ref: this.ref,
+      location: data.previousSibling,
+      position: 'after',
+      instanceId: inst.id,
+      foreId: fore.id,
+      index: Array.from(inscope.children).indexOf(data),
+    });
+
     // console.log('appended new item ', data);
     // return data;
   }

package/src/actions/fx-call.js

@@ -3,7 +3,7 @@ import { AbstractAction } from './abstract-action.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import { Fore } from '../fore.js';
 import getInScopeContext from '../getInScopeContext.js';
-import { XPathUtil } from '../xpath-util.js';
+import { getDocPath } from '../xpath-path.js';
 
 /**
  * `fx-call`
@@ -67,7 +67,7 @@ export default class FxCall extends AbstractAction {
       Fore.dispatch(this, 'error', {
         origin: this,
         message: `Action '${this.action}' not found`,
-        expr: XPathUtil.getDocPath(this),
+        expr: getDocPath(this),
         level: 'Error',
       });
     }

package/src/actions/fx-delete.js

@@ -1,7 +1,6 @@
-import * as fx from 'fontoxpath';
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
-import { evaluateXPathToNodes, evaluateXPathToString } from '../xpath-evaluation.js';
+import { evaluateXPathToNodes } from '../xpath-evaluation.js';
 import { XPathUtil } from '../xpath-util.js';
 import getInScopeContext from '../getInScopeContext.js';
 
@@ -55,49 +54,75 @@ class FxDelete extends AbstractAction {
     const fore = this.getOwnerForm();
 
     let parent;
+
+    const removedNodes = [];
     if (Array.isArray(nodesToDelete)) {
-      if (nodesToDelete.length === 0) return;
+      if (nodesToDelete.length === 0) {
+        return;
+      }
       parent = nodesToDelete[0].parentNode;
-      fore.signalChangeToElement(parent.localName);
+
       nodesToDelete.forEach(item => {
-        this._deleteNode(parent, item);
-        fore.signalChangeToElement(item.localName);
+        if (this._deleteNode(parent, item)) {
+          fore.signalChangeToElement(item.localName);
+          removedNodes.push(item);
+        }
       });
+      if (removedNodes.length) {
+        fore.signalChangeToElement(parent.localName);
+      }
     } else {
       parent = nodesToDelete.parentNode;
-      fore.signalChangeToElement(parent.localName);
+      if (this._deleteNode(parent, nodesToDelete)) {
+        fore.signalChangeToElement(parent.localName);
 
-      this._deleteNode(parent, nodesToDelete);
-      fore.signalChangeToElement(nodesToDelete.localName);
+        fore.signalChangeToElement(nodesToDelete.localName);
+        removedNodes.push(nodesToDelete);
+      }
     }
 
-    await Fore.dispatch(instance, 'deleted', {
-      ref: path,
-      deletedNodes: nodesToDelete,
-      instanceId,
-      foreId: fore.id,
-    });
-    this.needsUpdate = true;
+    if (removedNodes.length) {
+      await Fore.dispatch(instance, 'deleted', {
+        ref: path,
+        deletedNodes: removedNodes,
+        instanceId,
+        parent,
+        foreId: fore.id,
+      });
+      this.needsUpdate = true;
+    }
   }
 
+  /**
+   * Delete a node (if allowed). Does not hold for JSON
+   *
+   * @param {ParentNode}  parent - The parent of the node to remove
+   * @param {ChildNode}   node   - The child to remove
+   *
+   * @returns {boolean} Whether the delete is allowed and succeeded
+   */
   _deleteNode(parent, node) {
-    if (parent.nodeType === Node.DOCUMENT_NODE) return;
-    if (node.nodeType === Node.DOCUMENT_NODE) return;
-    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) return;
-    if (node.parentNode === null) return;
+    if (
+      parent.nodeType === Node.DOCUMENT_NODE ||
+      node.nodeType === Node.DOCUMENT_NODE ||
+      node.nodeType === Node.DOCUMENT_FRAGMENT_NODE ||
+      node.parentNode === null
+    ) {
+      return false;
+    }
 
-    const mi = this.getModelItem();
-    if (mi.readonly) return;
+    const mi = this.getModel().getModelItem(node);
+    // Note that the model item can be absent, For elements that had no controls on them.
+    // In that case, allow removals
+    if (mi?.readonly) {
+      return false;
+    }
 
     parent.removeChild(node);
-  }
 
-  /**
-   * overwriting as we need to perform additional rebuild()
-   */
-  actionPerformed() {
-    this.getModel().rebuild();
-    super.actionPerformed();
+    this.getModel().removeModelItem(node);
+
+    return true;
   }
 }
 

package/src/actions/fx-insert.js

@@ -7,6 +7,7 @@ import {
 } from '../xpath-evaluation.js';
 import { XPathUtil } from '../xpath-util';
 import { Fore } from '../fore.js';
+import { getPath } from '../xpath-path.js';
 
 /**
  * `fx-insert`
@@ -60,7 +61,6 @@ export class FxInsert extends AbstractAction {
     this.keepValues = !!this.hasAttribute('keep-values');
   }
 
-
   _cloneOriginSequence(inscope, targetSequence) {
     let originSequenceClone;
     if (this.origin) {
@@ -76,13 +76,13 @@ export class FxInsert extends AbstractAction {
         if in 'create-nodes' mode and origin targets a repeat, the repeat
         we use the already during initData() created nodeset as a template for insertion
          */
-        if(this.origin.startsWith('#') && this.getOwnerForm().createNodes){
+        if (this.origin.startsWith('#') && this.getOwnerForm().createNodes) {
           const repeat = this.getOwnerForm().querySelector(this.origin);
           originSequenceClone = repeat.createdNodeset.cloneNode(true);
-          if(!originSequenceClone){
+          if (!originSequenceClone) {
             console.error(`createdNodeset for repeat ${this.origin} does not exist`);
           }
-        }else{
+        } else {
           // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
           originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
           if (Array.isArray(originTarget) && originTarget.length === 0) {
@@ -128,7 +128,7 @@ export class FxInsert extends AbstractAction {
 
     // ### 'context' attribute takes precedence over 'ref'
     if (this.hasAttribute('context')) {
-      [context] = evaluateXPathToNodes(this.getAttribute('context'), inscopeContext, fore);
+      [context] = evaluateXPathToNodes(this.getAttribute('context'), inscopeContext, this);
       inscope = inscopeContext;
     }
 
@@ -145,7 +145,13 @@ export class FxInsert extends AbstractAction {
     const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
     if (!originSequenceClone) return; // if no origin back out without effect
 
+    /**
+     * @type {Node}
+     */
     let insertLocationNode;
+    /**
+     * @type {number}
+     */
     let index;
 
     // if the targetSequence is empty but we got an originSequence use inscope as context and ignore 'at' and 'position'
@@ -157,20 +163,18 @@ export class FxInsert extends AbstractAction {
         fore.signalChangeToElement(originSequenceClone.localName);
         index = 1;
       } else {
-
         // No context but creating nodes from UI
-        if(!inscope && this.getOwnerForm().createNodes){
+        if (!inscope && this.getOwnerForm().createNodes) {
           const repeat = this.getOwnerForm().querySelector(this.origin);
           inscope = getInScopeContext(repeat, repeat.ref);
           insertLocationNode = inscope;
           inscope.appendChild(originSequenceClone);
           index = inscope.length - 1;
-        }else{
+        } else {
           insertLocationNode = inscope;
           inscope.appendChild(originSequenceClone);
           index = 1;
         }
-
       }
     } else {
       /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
@@ -216,6 +220,8 @@ export class FxInsert extends AbstractAction {
         if (this.hasAttribute('context') && this.hasAttribute('ref')) {
           // index=1;
           inscope.append(originSequenceClone);
+          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(originSequenceClone.localName);
         } else if (this.hasAttribute('context')) {
           index = 1;
           insertLocationNode.prepend(originSequenceClone);
@@ -241,7 +247,7 @@ export class FxInsert extends AbstractAction {
     // console.log('<<<<<<< resolved instance', inst);
     // Note: the parent to insert under is always the parent of the inserted node. The 'context' is not always the parent if the sequence is empty, or the position is different
     // const xpath = XPathUtil.getPath(originSequenceClone.parentNode, instanceId);
-    const xpath = XPathUtil.getPath(insertLocationNode.parentNode, instanceId);
+    const xpath = getPath(insertLocationNode, instanceId);
 
     const path = Fore.getDomNodeIndexString(originSequenceClone);
     this.dispatchEvent(
@@ -252,13 +258,16 @@ export class FxInsert extends AbstractAction {
         detail: { action: this, event: this.event, path },
       }),
     );
-
     Fore.dispatch(inst, 'insert', {
-      'inserted-nodes': originSequenceClone,
-      'insert-location-node': insertLocationNode,
+      insertedNodes: originSequenceClone,
+      insertedParent: insertLocationNode.parentNode,
+      ref: this.ref,
+      location: insertLocationNode,
       position: this.position,
       instanceId,
       foreId: fore.id,
+      index,
+      xpath,
     });
 
     // todo: this actually should dispatch to respective instance
@@ -275,7 +284,6 @@ export class FxInsert extends AbstractAction {
     );
 
     this.needsUpdate = true;
-    console.log('Changed!', xpath);
     return [xpath];
   }
 
@@ -292,7 +300,7 @@ export class FxInsert extends AbstractAction {
 
   actionPerformed(changedPaths) {
     // ### make sure the necessary modelItems will get created
-    this.getModel().rebuild();
+    // this.getModel().rebuild();
     super.actionPerformed();
   }
 

package/src/actions/fx-refresh.js

@@ -22,23 +22,33 @@ class FxRefresh extends AbstractAction {
 
     if (this.hasAttribute('self')) {
       console.log(`### <<<<< refresh() self ${this} >>>>>`);
-      const control = XPathUtil.getClosest('fx-control', this);
+      const control = XPathUtil.getClosest('fx-control, fx-output, fx-upload', this);
       if (control) {
-        control.refresh();
+        control.refresh(true);
         return;
       }
     }
     if (this.hasAttribute('force')) {
       console.log(`### <<<<< refresh() force ${this} >>>>>`);
-      this.getOwnerForm().forceRefresh();
+      this.getOwnerForm().refresh(true);
+      return;
+    }
+    if(this.hasAttribute('selector')){
+      const target = document.querySelector(this.getAttribute('selector'));
+      if (target && Fore.isUiElement(target.nodeName) && typeof target.refresh === 'function') {
+        target.refresh(true);
+      }
       return;
     }
     if (this.hasAttribute('control')) {
       const targetId = this.getAttribute('control');
       console.log(`### <<<<< refresh() control '${targetId}' >>>>>`);
-      const ctrl = resolveId(targetId, this);
+      let ctrl = resolveId(targetId, this);
+      if(!ctrl){
+        ctrl = document.querySelector(`#${targetId}`);
+      }
       if (ctrl && Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
-        ctrl.refresh();
+        ctrl.refresh(true);
       }
       return;
     }

package/src/actions/fx-replace.js

@@ -2,6 +2,7 @@
 import '../fx-model.js';
 import { AbstractAction } from './abstract-action.js';
 import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+import { FxBind } from '../fx-bind.js';
 
 /**
  * `fx-replace` - replaces the node referred to with 'ref' with node referred to with 'with' attribute.
@@ -44,8 +45,9 @@ export default class FxReplace extends AbstractAction {
   }
 
   actionPerformed() {
-    this.getModel().rebuild();
-    super.actionPerformed();
+    this.getModel().updateModel();
+    this.getOwnerForm().refresh(true); //todo: optimize and update only the affected subtree
+    this.dispatchActionPerformed();
   }
 
   replace(toReplace, replaceWith) {
@@ -63,7 +65,20 @@ export default class FxReplace extends AbstractAction {
       const cloned = replaceWith.cloneNode(true);
       toReplace.replaceWith(cloned);
     }
-    // const modelitem = this.getModelItem();
+    // todo: add selective update and create and notify modelItem for toReplace and replaceWith
+    /*
+    let replaceWithModelItem = this.getModel().getModelItem(replaceWith);
+    if (!replaceWithModelItem) {
+      const replaceWithModelItem = FxBind.createModelItem(
+        this.getAttribute('with'),
+        replaceWith,
+        this,
+        null,
+      );
+      this.getModel().registerModelItem(replaceWithModelItem);
+      this.getOwnerForm().addToBatchedNotifications(replaceWithModelItem);
+    }
+*/
     // this.getModel().changed.push(modelitem);
     this.needsUpdate = true;
   }

package/src/actions/fx-reset.js

@@ -41,6 +41,12 @@ export class FxReset extends AbstractAction {
     data.reset();
     this.needsUpdate = true;
   }
+
+  actionPerformed() {
+    this.getModel().updateModel();
+    this.getOwnerForm().refresh(true);
+    this.dispatchActionPerformed();
+  }
 }
 
 if (!customElements.get('fx-reset')) {

package/src/actions/fx-send.js

@@ -1,7 +1,7 @@
 import '../fx-model.js';
 import '../fx-submission.js';
 import { AbstractAction } from './abstract-action.js';
-import { XPathUtil } from '../xpath-util.js';
+import { getDocPath } from '../xpath-path.js';
 
 /**
  * `fx-send` - finds and activates a `fx-submission` or a `fx-connection` element.
@@ -44,7 +44,7 @@ class FxSend extends AbstractAction {
               id: this.id,
               origin: this,
               message: `<fx-connection id="${this.connection}"> not found`,
-              expr: XPathUtil.getDocPath(this),
+              expr: getDocPath(this),
               level: 'Error',
             },
           }),
@@ -66,7 +66,7 @@ class FxSend extends AbstractAction {
             id: this.id,
             origin: this,
             message: `<fx-submission id="${this.submission}"> not found`,
-            expr: XPathUtil.getDocPath(this),
+            expr: getDocPath(this),
             level: 'Error',
           },
         }),
@@ -87,10 +87,13 @@ class FxSend extends AbstractAction {
     }
 
     await submission.submit();
-            if(submission.replace === 'instance'){
-              this.getModel().updateModel();
-              this.getOwnerForm().refresh();
-            }
+    if (submission.replace === 'instance') {
+      this.getModel().updateModel();
+      // todo: this bypasses observers...
+      this.getOwnerForm().refresh(true); //whole instance changes - full refresh necessary
+      // this.getOwnerForm().addToBatchedNotifications(this.getOwnerForm());
+      // this.needsUpdate = true;
+    }
     // if not of type fx-submission signal error
   }
 

package/src/actions/fx-setattribute.js

@@ -4,6 +4,7 @@ import { AbstractAction } from './abstract-action.js';
 import { evaluateXPathToString } from '../xpath-evaluation.js';
 import { Fore } from '../fore.js';
 import getInScopeContext from '../getInScopeContext';
+import { FxBind } from '../fx-bind';
 
 /**
  * `fx-setattribute` allows to create and set an attribute value in the data.
@@ -58,7 +59,18 @@ export default class FxSetattribute extends AbstractAction {
       return;
     }
     mi.node.setAttribute(this.attrName, this.attrValue);
+    const newModelItem = FxBind.createModelItem(
+      `${this.ref}/@${this.attrName}`,
+      mi.node.getAttributeNode(this.attrName),
+      this,
+      null,
+    );
+    this.getOwnerForm()
+      .getModel()
+      .registerModelItem(newModelItem);
+    this.getOwnerForm().addToBatchedNotifications(newModelItem);
     this.needsUpdate = true;
+    newModelItem.notify();
   }
 }
 

package/src/actions/fx-setfocus.js

@@ -39,14 +39,6 @@ export class FxSetfocus extends AbstractAction {
       return;
     }
 
-    // ### focus action is itself hosted within a repeat
-    const parentIItem = targetElement.closest('fx-repeatitem');
-    if (parentIItem) {
-      targetElement = parentIItem.querySelector(selector);
-      this._focus(targetElement);
-      // return;
-    }
-
     // ### the target element is hosted within a repeat
     const repeatitem = targetElement.closest('fx-repeatitem, .fx-repeatitem');
     if (repeatitem) {
@@ -54,7 +46,18 @@ export class FxSetfocus extends AbstractAction {
       // get the active repeatitem (only for fx-repeat for now - todo: support repeat attributes
       const repeat = repeatitem.parentNode;
       targetElement = repeat.querySelector(`[repeat-index] ${selector}`);
+      this._focus(targetElement);
+    }
+
+    // ### focus action is itself hosted within a repeat
+    /*
+    const parentIItem = targetElement.closest('fx-repeatitem');
+    if (parentIItem) {
+      targetElement = parentIItem.querySelector(selector);
+      this._focus(targetElement);
+      // return;
     }
+*/
 
     this._focus(targetElement);
     if (this.hasAttribute('select')) {