@jinntec/fore 2.6.0 → 2.7.1

package/src/modelitem.js

@@ -1,132 +1,267 @@
+import { evaluateXPath, evaluateXPathToBoolean, evaluateXPathToNodes } from './xpath-evaluation';
+import { XPathUtil } from './xpath-util';
+import getInScopeContext from './getInScopeContext';
+
 /**
  * Class for holding ModelItem facets.
  *
- * A ModelItem annotates nodes that are referred by a fx-bind element with facets for calculation and validation.
- *
+ * A ModelItem annotates nodes that are referred by an fx-bind element with facets for calculation and validation.
  * Each bound node in an instance has exactly one ModelItem associated with it.
+ *
+ * This refactored version includes observable mechanics and scoped XPath evaluation support.
  */
 export class ModelItem {
+  static READONLY_DEFAULT = false;
+  static REQUIRED_DEFAULT = false;
+  static RELEVANT_DEFAULT = true;
+  static CONSTRAINT_DEFAULT = true;
+  static TYPE_DEFAULT = 'xs:string';
+
+  /**
+   * @param {string} path - Calculated normalized path expression linking to data
+   * @param {string} ref - Relative binding expression
+   * @param {Node} node - The node the 'ref' expression is referring to
+   * @param {import('./fx-bind').FxBind} bind - The fx-bind element having created this ModelItem
+   * @param {string} instance - The fx-instance id having created this ModelItem
+   * @param {import('./fx-fore').FxFore} fore - The fx-fore element this ModelItem belongs to
+   */
+  constructor(path, ref, node, bind, instance, fore) {
+    this.path = path;
+    this.ref = ref;
+    this.readonly = ModelItem.READONLY_DEFAULT;
+    this.relevant = ModelItem.RELEVANT_DEFAULT;
+    this.required = ModelItem.REQUIRED_DEFAULT;
+    this.constraint = ModelItem.CONSTRAINT_DEFAULT;
+    this.type = ModelItem.TYPE_DEFAULT;
+    this.node = node;
+    this.bind = bind;
+    this.instanceId = instance;
+    this.fore = fore;
+    this.changed = false;
+
+    // console.log('[ModelItem] created:', this.path);
+
+    /** @type {import('./ui/fx-alert').FxAlert[]} */
+    this.alerts = [];
+
+    /** @type {import('./ui/abstract-control').default[]} */
+    // For backward compatibility
+    this.boundControls = [];
+
+    // Observable mechanics
     /**
-     *
-     * @param {string} path calculated normalized path expression linking to data
-     * @param {string} ref relative binding expression
-     * @param {boolean} readonly - boolean to signal readonly/readwrite state
-     * @param {boolean} relevant - boolean to signal relevant/non-relevant state
-     * @param {boolean} required - boolean to signal required/optional state
-     * @param {boolean} constraint - boolean boolean to signal valid/invalid state
-     * @param {string} type - string expression to set a datatype
-     * @param {Node} node - the node the 'ref' expression is referring to
-     * @param {import('./fx-bind').FxBind} bind - the fx-bind element having created this modelItem
-     * @param {string} instance - the fx-instance id having created this modelItem
+     * @type {Set<import('./ui/UIElement').UIElement>}
      */
-    constructor(
-        path,
-        ref,
-        readonly,
-        relevant,
-        required,
-        constraint,
-        type,
-        node,
-        bind,
-        instance,
+    this.observers = new Set();
+    this.dependencies = new Set();
+    this.stateExpressions = {}; // e.g. { required: { expr: '../x', type: 'boolean' } }
+    this.state = {}; // evaluated expression results
+  }
+
+  get value() {
+    if (!this.node) return null;
+    if (!this.node.nodeType) return this.node;
+    if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+      return this.node.nodeValue;
+    }
+    return this.node.textContent;
+  }
+
+  set value(newVal) {
+    if (!this.node) return;
+    const oldVal = this.value;
+
+    if (newVal?.nodeType === Node.DOCUMENT_NODE) {
+      this.node.replaceWith(newVal.firstElementChild);
+      this.node = newVal.firstElementChild;
+    } else if (newVal?.nodeType === Node.ELEMENT_NODE) {
+      this.node.replaceWith(newVal);
+      this.node = newVal;
+    } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+      this.node.nodeValue = newVal;
+    } else {
+      this.node.textContent = newVal;
+    }
+
+    if (this.value !== oldVal) {
+      this.notify();
+    }
+  }
+
+  /**
+   * Add an observer to this ModelItem
+   * @param {Object} observer - The observer to add
+   */
+  addObserver(observer) {
+    // console.log('[ModelItem] adding observer:', observer);
+    this.observers.add(observer);
+
+    // For backward compatibility with boundControls
+    if (
+      observer.nodeName &&
+      (observer.nodeName.startsWith('FX-') || observer.nodeName.startsWith('UI-')) &&
+      !this.boundControls.includes(observer)
     ) {
-        /**
-         * @type {string}
-         */
-        this.path = path;
-        /**
-         * @type {string}
-         */
-        this.ref = ref;
-        /**
-         * @type {boolean}
-         */
-        this.constraint = constraint;
-        /**
-         * @type {boolean}
-         */
-        this.readonly = readonly;
-        /**
-         * @type {boolean}
-         */
-        this.relevant = relevant;
-        /**
-         * @type {boolean}
-         */
-        this.required = required;
-        /**
-         * @type {string}
-         */
-        this.type = type;
-        /**
-         * @type {Node}
-         */
-        this.node = node;
-        /**
-         * @type {import('./fx-bind').FxBind}
-         */
-        this.bind = bind;
-        this.changed = false;
-        /**
-         * @type {import('./ui/fx-alert').FxAlert[]}
-         */
-        this.alerts = [];
-        /**
-         * @type {import('./ui/abstract-control').default[]}
-         */
-        this.boundControls = [];
-        // this.value = this._getValue();
-        this.instanceId = instance;
+      this.boundControls.push(observer);
     }
+  }
 
-    /*
-    get ref(){
-        return this.bind.ref;
+  /**
+   * Remove an observer from this ModelItem
+   * @param {Object} observer - The observer to remove
+   */
+  removeObserver(observer) {
+    this.observers.delete(observer);
+
+    // For backward compatibility with boundControls
+    const index = this.boundControls.indexOf(observer);
+    if (index !== -1) {
+      this.boundControls.splice(index, 1);
     }
-*/
-
-    get value() {
-        if (!this.node) {
-            return null;
-        }
-        if (!this.node.nodeType) return this.node;
-
-        if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
-            return this.node.nodeValue;
-        }
-        return this.node.textContent;
+  }
+
+  /**
+   * Notify all observers that this ModelItem has changed
+   */
+  notify() {
+    // Only log in debug mode or reduce verbosity to prevent console flooding
+    // console.log('[ModelItem] notifying observers for path:', this);
+
+    // Add to batched notifications. TODO: is the else needed?
+    if (this.fore) {
+      this.fore.addToBatchedNotifications(this);
+    } else {
+      // Otherwise, notify observers immediately
+      if (this.observers) {
+        this.observers.forEach(observer => {
+          if (typeof observer.update === 'function') {
+            observer.update(this);
+          }
+        });
+      }
     }
+  }
 
-    /**
-     * @param  {Node} newVal
-     */
-    set value(newVal) {
-        // console.log('modelitem.setvalue oldVal', this.value);
-        // console.log('modelitem.setvalue newVal', newVal);
-
-        if (newVal.nodeType === Node.DOCUMENT_NODE) {
-            this.node.replaceWith(newVal.firstElementChild);
-            this.node = newVal.firstElementChild;
-            // this.node.appendChild(newVal.firstElementChild);
-        } else if (newVal.nodeType === Node.ELEMENT_NODE) {
-            this.node.replaceWith(newVal);
-            this.node = newVal;
-            // this.node.appendChild(newVal);
-        } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
-            this.node.nodeValue = newVal;
-        } else {
-            this.node.textContent = newVal;
-        }
+  update() {
+    console.log('[ModelItem] update:', this);
+    this.evaluateStateExpressions();
+  }
+
+  addAlert(alert) {
+    if (!this.alerts.includes(alert)) {
+      this.alerts.push(alert);
     }
+  }
+
+  cleanAlerts() {
+    this.alerts = [];
+  }
+
+  /**
+   * Attach dynamic expressions (fx-bind style) to this model item.
+   * @param {{ [key: string]: { expr: string, type: 'boolean' | 'value' } }} expressionMap
+   */
+  setStateExpressions(expressionMap) {
+    this.stateExpressions = expressionMap;
+    this.resolveDependencies();
+    this.evaluateStateExpressions();
+  }
 
-    addAlert(alert) {
-        if (!this.alerts.includes(alert)) {
-            this.alerts.push(alert);
-        }
+  /**
+   * Register dependencies based on expression references.
+   */
+  resolveDependencies() {
+    this.dependencies.forEach(dep => dep.removeObserver(this));
+    this.dependencies.clear();
+
+    const refs = Object.values(this.stateExpressions).flatMap(({ expr }) => this.extractRefs(expr));
+
+    for (const ref of refs) {
+      const dep = this.bind?.resolveModelItem?.(ref);
+      if (dep) {
+        dep.addObserver(this);
+        this.dependencies.add(dep);
+      }
     }
+  }
+
+  /**
+   * Extract ref strings like '../required' => 'required'
+   * @param {string} expr
+   * @returns {string[]}
+   */
+  extractRefs(expr) {
+    const matches = expr.match(/\.\.\/\w+/g);
+    return matches ? matches.map(s => s.replace('../', '')) : [];
+  }
+
+  /**
+   * Evaluate all state expressions attached to this model item.
+   */
+  evaluateStateExpressions() {
+    let changed = false;
+
+    for (const [key, { expr, type }] of Object.entries(this.stateExpressions)) {
+      const result = this.evaluateExpression(expr, type);
+      if (this.state[key] !== result) {
+        this.state[key] = result;
+        changed = true;
+      }
+    }
+
+    if (changed) this.notify();
+  }
+
+  /**
+   * Evaluate expression in in-scope context using XPath.
+   * @param {string} expr
+   * @param {'boolean' | 'value'} type
+   * @returns {*}
+   */
+  evaluateExpression(expr, type = 'boolean') {
+    const contextNodes = this._evalInContext();
 
-    cleanAlerts() {
-        this.alerts = [];
+    if (!contextNodes || contextNodes.length === 0) {
+      return type === 'boolean' ? false : null;
     }
+
+    try {
+      if (type === 'boolean') {
+        return contextNodes.some(node => evaluateXPathToBoolean(expr, node, this));
+      } else if (type === 'value') {
+        return evaluateXPath(expr, contextNodes[0], this);
+      }
+    } catch (e) {
+      console.warn(`Error evaluating XPath expression [${expr}] in context:`, e);
+      return type === 'boolean' ? false : null;
+    }
+  }
+
+  /**
+   * Resolves the in-scope context for this.ref using the bind and returns the nodeset.
+   * Does NOT mutate this.nodeset or this.node.
+   * @returns {Node[]}
+   */
+  _evalInContext() {
+    const refAttrNode = this.bind?.getAttributeNode?.('ref') || this.bind;
+    const inScopeContext = getInScopeContext(refAttrNode, this.ref);
+
+    if (this.ref === '' || this.ref === null) {
+      return Array.isArray(inScopeContext) ? inScopeContext : [inScopeContext];
+    }
+
+    if (Array.isArray(inScopeContext)) {
+      if (XPathUtil.isSelfReference(this.ref)) {
+        return inScopeContext;
+      }
+      return inScopeContext.flatMap(n => evaluateXPathToNodes(this.ref, n, this));
+    }
+
+    const instance = this.bind?.getInstance?.(this.instanceId);
+    if (instance?.type === 'xml') {
+      return evaluateXPathToNodes(this.ref, inScopeContext, this);
+    }
+
+    return [];
+  }
 }

package/src/tools/fx-action-log.js

@@ -1,6 +1,7 @@
 import { XPathUtil } from '../xpath-util';
 import './fx-log-item.js';
 import { FxLogSettings } from './fx-log-settings.js';
+import { getDocPath, getPath } from '../xpath-path.js';
 
 export class FxActionLog extends HTMLElement {
   constructor() {
@@ -30,7 +31,7 @@ export class FxActionLog extends HTMLElement {
       }
       a[alt]:hover::after {
         content:attr(alt);
-        position:absolute; 
+        position:absolute;
         left:0;
         bottom:-0.5em;
         border:thin solid;
@@ -56,9 +57,9 @@ export class FxActionLog extends HTMLElement {
       .value{
         display:inline-block;
         width:60%;
-        
+
       }
-      
+
       .buttons{
         position:absolute;
         top:0;
@@ -107,9 +108,9 @@ export class FxActionLog extends HTMLElement {
         margin:0;
         border-bottom:2px solid #ddd;
       }
-      
+
       .info:hover{
-        outline:3px solid lightblue;       
+        outline:3px solid lightblue;
         transition:height 0.4s;
       }
 
@@ -118,7 +119,7 @@ export class FxActionLog extends HTMLElement {
         padding: 0.5em 0 0 2em;
         border-left:3px solid red;
       }
-     
+
       .event-name{
         display:inline-block;
       }
@@ -171,7 +172,7 @@ export class FxActionLog extends HTMLElement {
       .nested .event-name{
         display:none;
       }
-      
+
       .setvalue .value{
         background:lightyellow;
       }
@@ -185,7 +186,7 @@ export class FxActionLog extends HTMLElement {
         margin-top:2rem;
         background:rgba(250, 250, 250, 0.9);
       }
-      
+
       .outer-details > header{
         position:absolute;
         top:-1px;
@@ -224,7 +225,7 @@ export class FxActionLog extends HTMLElement {
 
     const html = `
       <section open class="outer-details">
-        <header>Log 
+        <header>Log
             <span class="buttons">
                 <button id="del"" title="empty log - Ctrl+d">
                     <svg viewBox="0 0 24 24" style="width:24px;height:24px;" preserveAspectRatio="xMidYMid meet" focusable="true"><g><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"></path></g></svg></a>
@@ -520,7 +521,7 @@ export class FxActionLog extends HTMLElement {
    */
   _logDetails(e) {
     const eventType = e.type;
-    const path = XPathUtil.getDocPath(e.target);
+    const path = XPathUtil.getPath(e.target, '');
     // console.log('>>>> _logDetails', path);
     const cut = path.substring(path.indexOf('/fx-fore'), path.length);
     const xpath = `/${cut}`;
@@ -569,7 +570,7 @@ export class FxActionLog extends HTMLElement {
                 <fx-log-item event-name="${eventType}"
                              xpath="${xpath}"
                              short-name="${e.target.nodeName.toLowerCase()}">
-                             
+
                     <section class="details">
                       ${this._listEventDetails(e)}
                     </section>
@@ -596,7 +597,7 @@ export class FxActionLog extends HTMLElement {
                 <fx-log-item event-name="${eventName}"
                              xpath="${xpath}"
                              short-name="ACTION"
-                              data-path="${e.detail.path}" 
+                              data-path="${e.detail.path}"
                               class="action">
                     <section class="details">
                       <header>Attributes</header>
@@ -608,10 +609,10 @@ export class FxActionLog extends HTMLElement {
                         <span class="value">${item.nodeValue}</span>
                       `,
                         )
-                        .join('')}                 
+                        .join('')}
                       </section>
                     </section>
-                </fx-log-item>  
+                </fx-log-item>
             `;
       // break;
       case 'FX-MESSAGE':
@@ -646,14 +647,15 @@ export class FxActionLog extends HTMLElement {
                             <span class="value">${item.nodeValue}</span>
                           `,
                             )
-                            .join('')}                 
-                          </section>  
+                            .join('')}
+                          </section>
                         </section>
                </fx-log-item>
                 `;
       // break;
       case 'FX-SETVALUE':
-        const instPath = XPathUtil.getPath(e.target.nodeset);
+        const instanceId = XPathUtil.getInstanceId(xpath, actionElement);
+        const instPath = getPath(e.target.nodeset, instanceId);
         const listensOn =
           e.target.nodeName === 'FX-CONTROL'
             ? e.target.updateEvent
@@ -680,10 +682,10 @@ export class FxActionLog extends HTMLElement {
             ? e.detail.event
             : '';
         return `
-                    <fx-log-item event-name="${eventName}" 
+                    <fx-log-item event-name="${eventName}"
                                 short-name="${e.target.nodeName}"
                                 xpath="${xpath}"
-                                data-path="${e.detail.path}" 
+                                data-path="${e.detail.path}"
                                 class="action">
                           <section class="details">
                           </section>

package/src/tools/fx-log-settings.js

@@ -1,5 +1,6 @@
 import { XPathUtil } from '../xpath-util';
 import './fx-log-item.js';
+import { getPath } from '../xpath-path.js';
 
 export class FxLogSettings extends HTMLElement {
   constructor() {
@@ -330,7 +331,7 @@ export class FxLogSettings extends HTMLElement {
   _logDetails(e) {
     const eventType = e.type;
     // console.log('>>>> event type', type)
-    const path = XPathUtil.getPath(e.target);
+    const path = getPath(e.target);
     const cut = path.substring(path.indexOf('/fx-fore'), path.length);
 
     const xpath = `/${cut}`;
@@ -452,7 +453,8 @@ export class FxLogSettings extends HTMLElement {
                 `;
       // break;
       case 'FX-SETVALUE':
-        const instPath = XPathUtil.getPath(e.target.nodeset);
+        const instanceId = XPathUtil.getInstanceId(xpath, actionElement);
+        const instPath = getPath(e.target.nodeset, instanceId);
         const listensOn =
           e.target.nodeName === 'FX-CONTROL' ? e.target.updateEvent : e.detail.event;
         return `

package/src/ui/TemplateExpression.js

@@ -0,0 +1,12 @@
+export class TemplateExpression {
+  static get properties() {
+    return {
+      dataNode: {
+        type: Object,
+      },
+      expression: {
+        type: Object,
+      },
+    };
+  }
+}