@jinntec/fore 2.6.0 → 2.7.1

package/src/ui/fx-repeat.js

@@ -7,6 +7,9 @@ import getInScopeContext from '../getInScopeContext.js';
 import { XPathUtil } from '../xpath-util.js';
 import { withDraggability } from '../withDraggability.js';
 import { UIElement } from './UIElement.js';
+import { getPath } from '../xpath-path.js';
+import { FxModel } from '../fx-model.js';
+import { FxBind } from '../fx-bind.js';
 
 // import {DependencyNotifyingDomFacade} from '../DependencyNotifyingDomFacade';
 
@@ -65,46 +68,13 @@ export class FxRepeat extends withDraggability(UIElement, false) {
     this.index = 1;
     this.repeatSize = 0;
     this.attachShadow({ mode: 'open', delegatesFocus: true });
-  }
-
-  get repeatSize() {
-    return this.querySelectorAll(':scope > fx-repeatitem').length;
-  }
-
-  set repeatSize(size) {
-    this.size = size;
-  }
-
-  setIndex(index) {
-    // console.log('new repeat index ', index);
-    this.index = index;
-    const rItems = this.querySelectorAll(':scope > fx-repeatitem');
-    this.applyIndex(rItems[this.index - 1]);
-
-    this.getOwnerForm().refresh({ reason: 'index-function', elementLocalnamesWithChanges: [] });
-  }
-
-  applyIndex(repeatItem) {
-    this._removeIndexMarker();
-    if (repeatItem) {
-      repeatItem.setAttribute('repeat-index', '');
-    }
-  }
-
-  get index() {
-    return parseInt(this.getAttribute('index'), 10);
-  }
-
-  set index(idx) {
-    this.setAttribute('index', idx);
-  }
-
-  _getRef() {
-    return this.getAttribute('ref');
+    this.opNum = 0; // global number of operations
   }
 
   connectedCallback() {
     super.connectedCallback();
+    this.template = this.querySelector('template');
+
     // console.log('connectedCallback',this);
     // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
     this.ref = this.getAttribute('ref');
@@ -113,49 +83,134 @@ export class FxRepeat extends withDraggability(UIElement, false) {
     // console.log('### fx-repeat connected ', this.id);
     this.addEventListener('item-changed', e => {
       const { item } = e.detail;
-      const idx = Array.from(this.children).indexOf(item);
-      // Warning: index is one-based
-      this.setIndex(idx + 1);
+      this.setIndex(item.index);
     });
-    // todo: review - this is just used by append action - event consolidation ?
-    document.addEventListener('index-changed', e => {
-      e.stopPropagation();
-      if (!e.target === this) return;
-      // const { item } = e.detail;
-      // const idx = Array.from(this.children).indexOf(item);
-      const { index } = e.detail;
-      this.index = parseInt(index, 10);
-      this.applyIndex(this.children[index - 1]);
-    });
-    /*
-        document.addEventListener('insert', e => {
-          const nodes = e.detail.insertedNodes;
-          this.index = e.detail.position;
-          console.log('insert catched', nodes, this.index);
-        });
-    */
+
+    // Listen for insertion events
+    this.handleInsertHandler = event => {
+      const { detail } = event;
+      const myForeId = this.getOwnerForm().id;
+      if (myForeId !== detail.foreId) {
+        return;
+      }
+      // todo: early out if this.ref does not match the ref of the inserted node. Avoid re-evaluating the nodeset
+      // if (this.ref !== detail.ref) return;
+
+      console.log('insert catched', detail);
+
+      // Step 1: Refresh/re-evaluate the nodeset
+      const oldNodesetLength = this.nodeset.length;
+      this._evalNodeset();
+      const newNodesetLength = this.nodeset.length;
+      if (oldNodesetLength === newNodesetLength) {
+        return;
+      }
+
+      /**
+       * @type {number}
+       */
+      //      const insertionIndex = detail.index;
+      /**
+       * The newly inserted node. TODO: handle multiple?
+       * @type {Node}
+       */
+      const insertedNode = detail.insertedNodes;
+      const insertionIndex = this.nodeset.indexOf(insertedNode) + 1;
+      // Step 2: Get current repeat items and create a new item
+      /**
+       * @type {import('./fx-repeatitem.js').FxRepeatitem[]}
+       */
+      const repeatItems = Array.from(
+        this.querySelectorAll(
+          ':scope > fx-repeat-item, :scope > fx-repeatitem, :scope > .repeat-item',
+        ),
+      );
+
+      // todo: search fx-bind elements with same nodeset as this repeat - if present update modelItem instead of creating one
+      const newRepeatItem = this._createNewRepeatItem();
+
+      // Step 3: Insert the new repeatItem at the correct position
+      const beforeNode = repeatItems[insertionIndex - 1] ?? null; // Null appends by default
+      this.insertBefore(newRepeatItem, beforeNode);
+      newRepeatItem.index = insertionIndex;
+      this._initVariables(newRepeatItem);
+
+      // Step 4: Assign the inserted nodeset to the new `repeatItem`
+      newRepeatItem.nodeset = detail.insertedNodes;
+
+      // Update all the indices following here
+      for (let i = insertionIndex - 1; i < repeatItems.length; ++i) {
+        const sibling = repeatItems[i];
+        // TODO: handle the next ones
+        sibling.index += 1;
+      }
+
+      this.setIndex(insertionIndex); // sets attribute + applies repeat-index + refresh
+
+      // Generate the parent `modelItem` for the new repeat item
+      this.opNum++;
+      const parentModelItem = FxBind.createModelItem(
+        this.ref,
+        detail.insertedNodes,
+        newRepeatItem,
+        this.opNum,
+      );
+      newRepeatItem.modelItem = parentModelItem;
+
+      this.getModel().registerModelItem(parentModelItem);
+
+      // Step 5: Create modelItems recursively for child elements
+      this._createModelItemsRecursively(newRepeatItem, parentModelItem);
+      // Step 6: Notify and refresh the UI
+      this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
+      this.getOwnerForm().addToBatchedNotifications(newRepeatItem);
+    };
+    this.handleDeleteHandler = event => {
+      console.log('delete catched', event);
+      const { detail } = event;
+      if (!detail || !detail.deletedNodes) {
+        return;
+      }
+
+      // Remove corresponding repeat items for deleted nodes
+      detail.deletedNodes.forEach(node => {
+        this.handleDelete(node);
+        //        this.removeRepeatItemForNode(node);
+      });
+      this.getOwnerForm().addToBatchedNotifications(this);
+    };
+    // inside connectedCallback()
+    document.addEventListener('insert', this.handleInsertHandler, true);
+    document.addEventListener('deleted', this.handleDeleteHandler, true);
 
     // if (this.getOwnerForm().lazyRefresh) {
+    /**
+     * @type {MutationRecord[]}
+     */
+    let bufferedMutationRecords = [];
+    let debouncedOnMutations = null;
     this.mutationObserver = new MutationObserver(mutations => {
-      // console.log('mutations', mutations);
-
-      if (mutations[0].type === 'childList') {
-        const added = mutations[0].addedNodes[0];
-        if (added) {
-          const instance = XPathUtil.resolveInstance(this, this.ref);
-          const path = XPathUtil.getPath(added, instance);
-          // console.log('path mutated', path);
-          // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
-          // this.index = index;
-          // const prev = mutations[0].previousSibling.previousElementSibling;
-          // const index = prev.index();
-          // this.applyIndex(this.index -1);
-
-          Fore.dispatch(this, 'path-mutated', { path, index: this.index });
-        }
+      bufferedMutationRecords.push(...mutations);
+      if (!debouncedOnMutations) {
+        debouncedOnMutations = new Promise(() => {
+          debouncedOnMutations = null;
+          const records = bufferedMutationRecords;
+          bufferedMutationRecords = [];
+          const shouldRefresh = false;
+          for (const mutation of records) {
+            if (mutation.type === 'childList') {
+              const added = mutation.addedNodes[0];
+              if (added) {
+                const instance = XPathUtil.resolveInstance(this, this.ref);
+                const path = getPath(added, instance);
+                Fore.dispatch(this, 'path-mutated', { path, index: this.index });
+              }
+            }
+          }
+        });
       }
     });
-    // }
+
     this.getOwnerForm().registerLazyElement(this);
 
     const style = `
@@ -185,6 +240,180 @@ export class FxRepeat extends withDraggability(UIElement, false) {
     // this.init();
   }
 
+  disconnectedCallback() {
+    document.removeEventListener('deleted', this.handleDeleteHandler, true);
+    document.removeEventListener('insert', this.handleInsertHandler, true);
+  }
+
+  get repeatSize() {
+    return this.querySelectorAll(':scope > fx-repeatitem').length;
+  }
+
+  set repeatSize(size) {
+    this.size = size;
+  }
+
+  setIndex(index) {
+    // console.log('new repeat index ', index);
+    this.index = index;
+    const rItems = this.querySelectorAll(':scope > fx-repeatitem');
+    this.applyIndex(rItems[this.index - 1]);
+
+    // trying to do without
+    // this.getOwnerForm().refresh({ reason: 'index-function', elementLocalnamesWithChanges: [] });
+  }
+
+  applyIndex(repeatItem) {
+    this._removeIndexMarker();
+    if (repeatItem) {
+      repeatItem.setAttribute('repeat-index', '');
+    }
+  }
+
+  get index() {
+    return parseInt(this.getAttribute('index'), 10);
+  }
+
+  set index(idx) {
+    this.setAttribute('index', idx);
+  }
+
+  _getRef() {
+    return this.getAttribute('ref');
+  }
+
+  _createModelItemsRecursively(parentNode, parentModelItem) {
+    const parentWithDewey = parentModelItem?.path || null; // e.g. $default/AllowanceCharge[2]_1
+    const parentBase = parentWithDewey ? parentWithDewey.replace(/_\d+$/, '') : null; // e.g. $default/AllowanceCharge[2]
+
+    // Robust Dewey rewrite that tolerates $inst vs instance('inst') forms
+    const __applyDeweyRewrite = mi => {
+      if (!mi || typeof mi.path !== 'string' || !parentModelItem?.path) return;
+
+      const pWith = parentModelItem.path; // e.g. $default/AllowanceCharge[2]_1  or  instance('default')/AllowanceCharge[2]_1
+      const opMatch = pWith.match(/_(\d+)$/);
+      if (!opMatch) return;
+      const op = opMatch[1];
+
+      // Normalize to $name/ and strip _n on parent; normalize child for prefix test only
+      const toDollar = s => s.replace(/^instance\('([^']+)'\)\//, (_m, g1) => `$${g1}/`);
+      const parentBaseNorm = toDollar(pWith).replace(/_\d+$/, ''); // $default/AllowanceCharge[2]
+      const childNorm = toDollar(mi.path);
+
+      if (!childNorm.startsWith(parentBaseNorm)) return; // unrelated subtree
+
+      // Preserve original style of child's instance prefix
+      const childUsesInstanceFn = /^instance\('/.test(mi.path);
+      const parentBaseInChildStyle = childUsesInstanceFn
+        ? parentBaseNorm.replace(/^\$([A-Za-z0-9_-]+)\//, `instance('$1')/`)
+        : parentBaseNorm;
+
+      // If already suffixed for this parent, nothing to do
+      if (mi.path.startsWith(`${parentBaseInChildStyle}_`)) return;
+
+      // Inject _op immediately after the parent base segment
+      mi.path = `${parentBaseInChildStyle}_${op}${mi.path.slice(parentBaseInChildStyle.length)}`;
+    };
+
+    Array.from(parentNode.children).forEach(child => {
+      const nextParentMI = parentModelItem;
+
+      // Skip native/embedded widgets that may carry a 'ref' but are UI only
+      const isWidgetEl =
+        child &&
+        ((child.classList && child.classList.contains('widget')) ||
+          (typeof Fore !== 'undefined' && Fore.isWidget && Fore.isWidget(child)) ||
+          (child.tagName &&
+            ['INPUT', 'SELECT', 'TEXTAREA', 'OPTION', 'DATALIST'].includes(child.tagName)));
+
+      if (!isWidgetEl && child.hasAttribute('ref')) {
+        const ref = child.getAttribute('ref').trim();
+        if (ref && ref !== '.') {
+          // Evaluate the FULL ref once — this yields the terminal (last) node(s)
+          let node = evaluateXPath(ref, parentModelItem.node, this);
+          if (Array.isArray(node)) node = node[0];
+
+          if (node) {
+            let modelItem = this.getModel().getModelItem(node);
+            if (!modelItem) {
+              // Create a ModelItem only for the final node; children never get their own opNum
+              modelItem = FxBind.createModelItem(ref, node, child, null);
+              modelItem.parentModelItem = parentModelItem;
+              this.getModel().registerModelItem(modelItem);
+            }
+
+            // Always apply Dewey rewrite (handles both $inst and instance('inst') forms)
+            __applyDeweyRewrite(modelItem);
+
+            child.nodeset = node;
+            if (child.attachObserver) child.attachObserver();
+          }
+        }
+      }
+
+      // Recurse into non-widget subtrees
+      if (!isWidgetEl) this._createModelItemsRecursively(child, nextParentMI);
+    });
+  }
+
+  /**
+   * Removes the repeat item corresponding to a deleted node.
+   * Cleans up its observers and notifies the parent form.
+   * @param {Node} node - The deleted node
+   */
+  removeRepeatItemForNode(node) {
+    const index = this.nodeset.indexOf(node);
+    if (index === -1) return;
+
+    const repeatItem = this.querySelector(`fx-repeatitem:nth-of-type(${index + 1})`);
+    if (repeatItem) {
+      this.removeChild(repeatItem);
+      this.getOwnerForm().addToBatchedNotifications(this);
+    }
+
+    // Remove the node from the nodeset
+    this.nodeset.splice(index, 1);
+  }
+
+  handleDelete(deleted) {
+    console.log('handleDelete', deleted);
+    // grab the current repeat items (tweak selector if yours differs)
+    /**
+     * @type {import('./fx-repeatitem.js').FxRepeatitem[]}
+     */
+    const items = Array.from(
+      this.querySelectorAll(
+        ':scope > fx-repeat-item, :scope > fx-repeatitem, :scope > .repeat-item',
+      ),
+    );
+
+    this._evalNodeset();
+
+    const indexToRemove = items.findIndex(item => item.nodeset === deleted);
+    if (indexToRemove === -1) {
+      return;
+    }
+    const itemToRemove = items[indexToRemove];
+    itemToRemove.remove();
+
+    // If the list is now empty, clear selection (0). Adjust if you prefer 1-based only.
+    const newLength = this.querySelectorAll(
+      ':scope > fx-repeat-item, :scope > fx-repeatitem, :scope > .repeat-item',
+    ).length;
+
+    let nextIndex = indexToRemove + 1; // 1-based index at the deleted slot
+    if (newLength === 0) {
+      nextIndex = 0; // nothing left; clear selection
+    } else if (nextIndex > newLength) {
+      nextIndex = newLength; // deleted the last one; move to new last
+    }
+
+    this.setIndex(nextIndex);
+  }
+
+  /**
+   * @returns {import('./fx-repeatitem.js').FxRepeatitem}
+   */
   _createNewRepeatItem() {
     const newItem = document.createElement('fx-repeatitem');
 
@@ -223,7 +452,7 @@ export class FxRepeat extends withDraggability(UIElement, false) {
     // console.log('##### inscope ', inscope);
     // console.log('##### ref ', this.ref);
     // now we got a nodeset and attach MutationObserver to it
-
+    if (!inscope) return;
     if (this.mutationObserver && inscope.nodeName) {
       this.mutationObserver.observe(inscope, {
         childList: true,
@@ -251,19 +480,12 @@ export class FxRepeat extends withDraggability(UIElement, false) {
   }
 
   async refresh(force) {
-    // console.group('fx-repeat.refresh on', this.id);
+    console.log('🔄 fx-repeat.refresh on', this.id);
 
     if (!this.inited) this.init();
     // console.time('repeat-refresh', this);
     this._evalNodeset();
 
-    // ### register ourselves as boundControl
-    /*
-            const modelItem = this.getModelItem();
-            if (!modelItem.boundControls.includes(this)) {
-              modelItem.boundControls.push(this);
-            }
-        */
     // console.log('repeat refresh nodeset ', this.nodeset);
     // console.log('repeatCount', this.repeatCount);
 
@@ -297,6 +519,7 @@ export class FxRepeat extends withDraggability(UIElement, false) {
         const newItem = this._createNewRepeatItem();
 
         this.appendChild(newItem);
+
         this._initVariables(newItem);
 
         newItem.nodeset = this.nodeset[position - 1];
@@ -308,6 +531,8 @@ export class FxRepeat extends withDraggability(UIElement, false) {
 
         // Tell the owner form we might have new template expressions here
         this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
+
+        newItem.refresh(true);
       }
     }
 
@@ -318,11 +543,15 @@ export class FxRepeat extends withDraggability(UIElement, false) {
 
       if (item.nodeset !== this.nodeset[position]) {
         item.nodeset = this.nodeset[position];
+        if (this.getOwnerForm().createNodes) {
+          this.getOwnerForm().initData(item);
+        }
       }
     }
 
-    // Fore.refreshChildren(clone,true);
+    // Fore.refreshChildren(clone, true);
     const fore = this.getOwnerForm();
+    // if (!fore.lazyRefresh || force) {
     if (!fore.lazyRefresh || force) {
       // Turn the possibly conditional force refresh into a forced one: we changed our children
       Fore.refreshChildren(this, force);
@@ -372,7 +601,6 @@ export class FxRepeat extends withDraggability(UIElement, false) {
   }
 
   _initTemplate() {
-    this.template = this.querySelector('template');
     // console.log('### init template for repeat ', this.id, this.template);
     // todo: this.dropTarget not needed?
     this.dropTarget = this.template.getAttribute('drop-target');
@@ -415,11 +643,12 @@ export class FxRepeat extends withDraggability(UIElement, false) {
       if (repeatItem.index === 1) {
         this.applyIndex(repeatItem);
       }
-      // console.log('*********repeat item created', repeatItem.nodeset)
+      // console.log('*********repeat item created', repeatItem.nodeset);
       Fore.dispatch(this, 'item-created', { nodeset: repeatItem.nodeset, pos: index + 1 });
       this._initVariables(repeatItem);
     });
   }
+
   clearTextValues(node) {
     if (!node) return;
 
@@ -454,12 +683,30 @@ export class FxRepeat extends withDraggability(UIElement, false) {
     })(newRepeatItem);
   }
 
+  /*
   _clone() {
     // const content = this.template.content.cloneNode(true);
     this.template = this.shadowRoot.querySelector('template');
     const content = this.template.content.cloneNode(true);
     return document.importNode(content, true);
   }
+*/
+
+  _clone() {
+    // Prefer the cached template set in _initTemplate; fall back to either DOM.
+    const tpl =
+      this.template ||
+      (this.shadowRoot && this.shadowRoot.querySelector('template')) ||
+      this.querySelector('template');
+
+    if (!tpl) {
+      console.error(`[fx-repeat] ${this.id || ''}: no <template> found when cloning`);
+      return document.createDocumentFragment();
+    }
+
+    const content = tpl.content.cloneNode(true);
+    return document.importNode(content, true);
+  }
 
   _removeIndexMarker() {
     Array.from(this.children).forEach(item => {

package/src/ui/fx-repeatitem.js

@@ -1,6 +1,7 @@
 import { Fore } from '../fore.js';
-import ForeElementMixin from '../ForeElementMixin.js';
+// import ForeElementMixin from '../ForeElementMixin.js';
 import { withDraggability } from '../withDraggability.js';
+import { UIElement } from './UIElement.js';
 
 /**
  * `fx-repeat`
@@ -9,9 +10,9 @@ import { withDraggability } from '../withDraggability.js';
  * @customElement
  * @demo demo/index.html
  *
- * @extends {ForeElementMixin}
+ * @extends {UIElement}
  */
-export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
+export class FxRepeatitem extends withDraggability(UIElement, true) {
   static get properties() {
     return {
       ...super.properties,
@@ -32,6 +33,8 @@ export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
     this.attachShadow({ mode: 'open', delegatesFocus: true });
 
     this.dropTarget = null;
+    // TODO: rename to position?
+    this.index = -1;
   }
 
   connectedCallback() {
@@ -72,7 +75,7 @@ export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
       }
     */
 
-  _dispatchIndexChange() {
+  async _dispatchIndexChange() {
     /**
      * @type {import('./fx-repeat.js').FxRepeat}
      */
@@ -81,31 +84,31 @@ export class FxRepeatitem extends withDraggability(ForeElementMixin, true) {
       // The index did not really change if it did not change :wink:
       return;
     }
-    this.dispatchEvent(
+    await this.dispatchEvent(
       new CustomEvent('item-changed', {
         composed: false,
         bubbles: true,
         detail: { item: this, index: this.index },
       }),
     );
+
+    // Refresh after all of the listeners for that item-changed have had their turn to update!
+    this.getOwnerForm().refresh();
   }
 
-  refresh(force) {
-    this.modelItem = this.getModelItem();
-    // ### register ourselves as boundControl
-    if (!this.modelItem.boundControls.includes(this)) {
-      this.modelItem.boundControls.push(this);
-
-      if (this.modelItem && !this.modelItem.relevant) {
-        this.removeAttribute('relevant');
-        this.setAttribute('nonrelevant', '');
-      } else {
-        this.removeAttribute('nonrelevant');
-        this.setAttribute('relevant', '');
-      }
+  async refresh(force = false) {
+    // this.modelItem = this.getModelItem();
+    this.attachObserver();
+    // console.log('🔄 repeatitem modelitem', this.getModelItem());
+
+    if (this.modelItem && !this.modelItem.relevant) {
+      this.removeAttribute('relevant');
+      this.setAttribute('nonrelevant', '');
+    } else {
+      this.removeAttribute('nonrelevant');
+      this.setAttribute('relevant', '');
     }
-    // Always recurse for these refreshes, especially when forced
-    Fore.refreshChildren(this, force);
+    await Fore.refreshChildren(this, force);
   }
 }
 

package/src/ui/fx-switch.js

@@ -48,7 +48,7 @@ class FxSwitch extends FxContainer {
 
   async refresh(force) {
     super.refresh(force);
-    // console.log('refresh on switch ');
+    console.log('🔄 fx-switch refresh', force);
     if (this.cases.length === 0) {
       this.cases = Array.from(this.querySelectorAll(':scope > fx-case'));
     }
@@ -65,7 +65,7 @@ class FxSwitch extends FxContainer {
   }
 
   _dispatchEvents() {
-    if(this.selectedCase === this.formerCase) return;
+    if (this.selectedCase === this.formerCase) return;
     if (this.formerCase && this.formerCase !== this.selectedCase) {
       Fore.dispatch(this.formerCase, 'deselect', {});
     }
@@ -75,7 +75,7 @@ class FxSwitch extends FxContainer {
   }
 
   _resetVisited() {
-    if(this.visitedResetted) return;
+    if (this.visitedResetted) return;
 
     const visited = this.selectedCase.querySelectorAll('.visited');
     Array.from(visited).forEach(v => {
@@ -95,6 +95,8 @@ class FxSwitch extends FxContainer {
         this.toggle(caseElem);
       }
     });
+
+    this.attachObserver();
   }
 
   /**