@jinntec/fore 1.0.0-0 → 1.0.0-3

package/src/fx-model.js

@@ -16,11 +16,13 @@ export class FxModel extends HTMLElement {
     this.instances = [];
     this.modelItems = [];
     this.defaultContext = {};
+    this.changed = [];
 
     // this.mainGraph = new DepGraph(false);
     this.inited = false;
     this.modelConstructed = false;
     this.attachShadow({ mode: 'open' });
+    this.computes = 0;
   }
 
   get formElement() {
@@ -39,7 +41,7 @@ export class FxModel extends HTMLElement {
       console.log('model-construct-done fired ', e.detail.model.instances);
     });
 
-    // logging
+    this.skipUpdate = false;
   }
 
   static lazyCreateModelItem(model, ref, node) {
@@ -83,10 +85,20 @@ export class FxModel extends HTMLElement {
     return mi;
   }
 
+  /**
+   * modelConstruct starts actual processing of the model by
+   *
+   * 1. loading instances if present or constructing one
+   * 2. calling updateModel to run the model update cycle of rebuild, recalculate and revalidate
+   *
+   * @event model-construct-done is fired once all instances have be loaded or after generating instance
+   *
+   */
   modelConstruct() {
     console.log('### <<<<< dispatching model-construct >>>>>');
     this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
 
+    console.time('instance-loading');
     const instances = this.querySelectorAll('fx-instance');
     if (instances.length > 0) {
       console.group('init instances');
@@ -121,6 +133,7 @@ export class FxModel extends HTMLElement {
         }),
       );
     }
+    console.timeEnd('instance-loading');
     this.inited = true;
   }
 
@@ -133,33 +146,46 @@ export class FxModel extends HTMLElement {
    * update action triggering the update cycle
    */
   updateModel() {
+    console.time('updateModel');
     this.rebuild();
+    if(this.skipUpdate) return;
     this.recalculate();
     this.revalidate();
+    console.timeEnd('updateModel');
   }
 
   rebuild() {
     console.group('### rebuild');
-
-    this.mainGraph = new DepGraph(false);
+    console.time('rebuild');
+    this.mainGraph = new DepGraph(false); //do: should be moved down below binds.length check but causes errors in tests.
     this.modelItems = [];
 
     // trigger recursive initialization of the fx-bind elements
     const binds = this.querySelectorAll('fx-model > fx-bind');
+    if(binds.length === 0 ) {
+      console.log('skipped model update');
+      this.skipUpdate = true;
+      return ;
+    }
+
     binds.forEach(bind => {
       bind.init(this);
     });
+    console.timeEnd('rebuild');
 
     // console.log(`dependencies of a `, this.mainGraph.dependenciesOf("/Q{}data[1]/Q{}a[1]:required"));
     // console.log(`dependencies of b `, this.mainGraph.dependenciesOf("/Q{}data[1]/Q{}b[1]:required"));
     console.log(`rebuild mainGraph`, this.mainGraph);
     console.log(`rebuild mainGraph calc order`, this.mainGraph.overallOrder());
+
+    this.dispatchEvent(new CustomEvent('rebuild-done', { detail: { maingraph: this.mainGraph } }));
+
     /*
-    console.log(
-      `rebuild finished with modelItems ${this.modelItems.length} item(s)`,
-      this.modelItems,
-    );
-*/
+        console.log(
+          `rebuild finished with modelItems ${this.modelItems.length} item(s)`,
+          this.modelItems,
+        );
+    */
     console.groupEnd();
   }
 
@@ -170,38 +196,70 @@ export class FxModel extends HTMLElement {
    */
   recalculate() {
     console.group('### recalculate');
-    console.log('recalculate instances ', this.instances);
-
-    const v = this.mainGraph.overallOrder();
-    v.forEach(path => {
-      console.log('recalculating path ', path);
-
-      const node = this.mainGraph.getNodeData(path);
-      // console.log('recalculating node ', node);
-      const modelItem = this.getModelItem(node);
-      // console.log('modelitem ', modelItem);
-
-      if (modelItem && path.includes(':')) {
-        const property = path.split(':')[1];
-        if (property) {
-          if (property === 'calculate') {
-            const expr = modelItem.bind[property];
-            const compute = evaluateXPath(expr, modelItem.node, this);
-            modelItem.value = compute;
-          } else if (property !== 'constraint' && property !== 'type') {
-            console.log('recalculating property ', property);
-
-            const expr = modelItem.bind[property];
-            if (expr) {
-              console.log('recalc expr: ', expr);
-              const compute = evaluateXPathToBoolean(expr, modelItem.node, this);
-              modelItem[property] = compute;
-              console.log(`modelItem '${property}'='${expr}' computed`, modelItem.required);
-            }
+    console.log('changed nodes ', this.changed);
+
+    console.time('recalculate');
+    this.computes = 0;
+
+    this.subgraph = new DepGraph(false);
+    if (this.changed.length !== 0) {
+      // ### build the subgraph
+      this.changed.forEach(modelItem => {
+        this.subgraph.addNode(modelItem.path, modelItem.node);
+        // const dependents = this.mainGraph.dependantsOf(modelItem.path, false);
+        // this._addSubgraphDependencies(modelItem.path);
+        if (this.mainGraph.hasNode(modelItem.path)) {
+          // const dependents = this.mainGraph.directDependantsOf(modelItem.path)
+
+          const all = this.mainGraph.dependantsOf(modelItem.path, false);
+          const dependents = all.reverse();
+          if (dependents.length !== 0) {
+            dependents.forEach(dep => {
+              // const subdep = this.mainGraph.dependentsOf(dep,false);
+              // subgraph.addDependency(dep, modelItem.path);
+              const val = this.mainGraph.getNodeData(dep);
+              this.subgraph.addNode(dep, val);
+              if (dep.includes(':')) {
+                const path = dep.substring(0, dep.indexOf(':'));
+                this.subgraph.addNode(path, val);
+
+                const deps = this.mainGraph.dependentsOf(modelItem.path, false);
+                // if we find the dep to be first in list of dependents we are dependent on ourselves not adding edge to modelItem.path
+                if (deps.indexOf(dep) !== 0) {
+                  this.subgraph.addDependency(dep, modelItem.path);
+                }
+              }
+              // subgraph.addDependency(dep,modelItem.path);
+            });
           }
         }
-      }
-    });
+      });
+
+      // ### compute the subgraph
+      const ordered = this.subgraph.overallOrder(false);
+      ordered.forEach(path => {
+        if (this.mainGraph.hasNode(path)) {
+          const node = this.mainGraph.getNodeData(path);
+          this.compute(node, path);
+        }
+      });
+      const toRefresh = [...this.changed];
+      this.formElement.toRefresh = toRefresh;
+      this.changed = [];
+      console.log('subgraph', this.subgraph);
+      this.dispatchEvent(
+        new CustomEvent('recalculate-done', { detail: { subgraph: this.subgraph } }),
+      );
+    } else {
+      const v = this.mainGraph.overallOrder(false);
+      v.forEach(path => {
+        const node = this.mainGraph.getNodeData(path);
+        this.compute(node, path);
+      });
+    }
+    console.log(`recalculated ${this.computes} modelItems`);
+
+    console.timeEnd('recalculate');
     console.log(
       `recalculate finished with modelItems ${this.modelItems.length} item(s)`,
       this.modelItems,
@@ -209,6 +267,86 @@ export class FxModel extends HTMLElement {
     console.groupEnd();
   }
 
+  /*
+    _addSubgraphDependencies(path){
+        const dependents = this.mainGraph.directDependantsOf(path)
+
+        const alreadyInGraph = this.subgraph.incomingEdges[path];
+        // const alreadyInGraph = path in this.subgraph;
+        if(dependents.length !== 0 && alreadyInGraph.length === 0){
+
+            dependents.forEach(dep => {
+                // const val= this.mainGraph.getNodeData(dep);
+                // this.subgraph.addNode(dep,val);
+                if(dep.includes(':')){
+                    const subpath = dep.substring(0, dep.indexOf(':'));
+                    // this.subgraph.addNode(subpath,val);
+                    this.subgraph.addDependency(subpath,dep);
+                    this.subgraph.addDependency(dep,path);
+                    /!*
+                                        const subdeps = this.mainGraph.directDependantsOf(path);
+                                        console.log('subdeps',path, subdeps);
+                                        subdeps.forEach(sdep => {
+                                            const sval= this.mainGraph.getNodeData(sdep);
+                                            this.subgraph.addNode(sdep,sval);
+                                            console.log('subdep',sdep);
+                                        });
+                    *!/
+                    if(this.subgraph.incomingEdges[dep] === 0){
+                        this._addSubgraphDependencies(subpath)
+                    }
+
+                }
+            });
+
+        }
+
+    }
+*/
+
+  /**
+   * (re-) computes a modelItem.
+   * @param node - the node the modelItem is attached to
+   * @param path - the canonical XPath of the node
+   */
+  compute(node, path) {
+    const modelItem = this.getModelItem(node);
+    if (modelItem && path.includes(':')) {
+      const property = path.split(':')[1];
+      if (property) {
+        /*
+                if (property === 'readonly') {
+                    // make sure that calculated items are always readonly
+                    if(modelItem.bind['calculate']){
+                        modelItem.readonly =  true;
+                    }else {
+                        const expr = modelItem.bind[property];
+                        const compute = evaluateXPathToBoolean(expr, modelItem.node, this);
+                        modelItem.readonly = compute;
+                    }
+                }
+*/
+        if (property === 'calculate') {
+          const expr = modelItem.bind[property];
+          const compute = evaluateXPath(expr, modelItem.node, this);
+          modelItem.value = compute;
+          modelItem.readonly = true; // calculated nodes are always readonly
+        } else if (property !== 'constraint' && property !== 'type') {
+          const expr = modelItem.bind[property];
+          if (expr) {
+            const compute = evaluateXPathToBoolean(expr, modelItem.node, this);
+            modelItem[property] = compute;
+            console.log(
+              `recalculating path ${path} - Expr:'${expr}' computed`,
+              modelItem[property],
+            );
+          }
+        }
+      }
+      this.computes += 1;
+    }
+  }
+
   /**
    * Iterates all modelItems to calculate the validation status.
    *
@@ -228,6 +366,7 @@ export class FxModel extends HTMLElement {
   revalidate() {
     console.group('### revalidate');
 
+    console.time('revalidate');
     let valid = true;
     this.modelItems.forEach(modelItem => {
       // console.log('validating node ', modelItem.node);
@@ -235,15 +374,16 @@ export class FxModel extends HTMLElement {
       const { bind } = modelItem;
       if (bind) {
         /*
-        todo: investigate why bind is an element when created in fx-bind.init() and an fx-bind object when
-          created lazily.
-        */
+                todo: investigate why bind is an element when created in fx-bind.init() and an fx-bind object when
+                  created lazily.
+                */
         if (typeof bind.hasAttribute === 'function' && bind.hasAttribute('constraint')) {
           const constraint = bind.getAttribute('constraint');
           if (constraint) {
             const compute = evaluateXPathToBoolean(constraint, modelItem.node, this);
             console.log('modelItem validity computed: ', compute);
             modelItem.constraint = compute;
+            this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
             if (!compute) valid = false;
             // ### alerts are added only once during model-construct. Otherwise they would add up in each run of revalidate()
             if (!this.modelConstructed) {
@@ -257,6 +397,7 @@ export class FxModel extends HTMLElement {
         }
       }
     });
+    console.timeEnd('revalidate');
     console.log('modelItems after revalidate: ', this.modelItems);
     console.groupEnd();
     return valid;

package/src/fx-submission.js

@@ -26,6 +26,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     /** if present should be a existing instance id */
     this.instance = this.hasAttribute('instance') ? this.getAttribute('instance') : null;
 
+    /** if present will determine XPath where to insert a response into when mode is 'replace' */
+    this.into = this.hasAttribute('into') ? this.getAttribute('into') : null;
+
     /** http method */
     this.method = this.hasAttribute('method') ? this.getAttribute('method') : 'get';
 
@@ -78,6 +81,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       const valid = model.revalidate();
       if (!valid) {
         console.log('validation failed. Bubmission stopped');
+        // ### allow alerts to pop up
+        this.dispatch('submit-error', {});
+        this.getModel().parentNode.refresh();
         return;
       }
     }
@@ -173,9 +179,17 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       body: serialized,
     });
 
-    const contentType = response.headers.get('content-type').toLowerCase();
+    if (!response.ok || response.status > 400) {
+      this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+      return;
+    }
 
-    if (contentType.startsWith('text/plain') || contentType.startsWith('text/html')) {
+    const contentType = response.headers.get('content-type').toLowerCase();
+    if (
+      contentType.startsWith('text/plain') ||
+      contentType.startsWith('text/html') ||
+      contentType.startsWith('text/markdown')
+    ) {
       const text = await response.text();
       this._handleResponse(text);
     } else if (contentType.startsWith('application/json')) {
@@ -190,10 +204,6 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       this._handleResponse(blob);
     }
 
-    if (!response.ok || response.status > 400) {
-      this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
-      return;
-    }
     this.dispatch('submit-done', {});
   }
 
@@ -265,12 +275,24 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       const targetInstance = this._getTargetInstance();
       if (targetInstance) {
         if (this.targetref) {
-          const theTarget = evaluateXPath(this.targetref, targetInstance, this.getOwnerForm());
+          const theTarget = evaluateXPath(
+            this.targetref,
+            targetInstance.instanceData.firstElementChild,
+            this,
+          );
           console.log('theTarget', theTarget);
           const clone = data.firstElementChild;
           const parent = theTarget.parentNode;
           parent.replaceChild(clone, theTarget);
           console.log('finally ', parent);
+        } else if (this.into) {
+          const theTarget = evaluateXPath(
+            this.into,
+            targetInstance.instanceData.firstElementChild,
+            this,
+          );
+          console.log('theTarget', theTarget);
+          theTarget.innerHTML = data;
         } else {
           const instanceData = data;
           targetInstance.instanceData = instanceData;

package/src/fx-var.js

@@ -0,0 +1,43 @@
+import './fx-instance.js';
+import { evaluateXPath } from './xpath-evaluation.js';
+import { foreElementMixin } from './ForeElementMixin.js';
+import getInScopeContext from './getInScopeContext.js';
+
+/**
+ * @ts-check
+ */
+export class FxVariable extends foreElementMixin(HTMLElement) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+    this.name = '';
+    this.valueQuery = '';
+    this.value = null;
+  }
+
+  connectedCallback() {
+    this.name = this.getAttribute('name');
+    this.valueQuery = this.getAttribute('value');
+  }
+
+  refresh() {
+    const inscope = getInScopeContext(this, this.valueQuery);
+
+    this.value = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+  }
+
+  setInScopeVariables(inScopeVariables) {
+    if (inScopeVariables.has(this.name)) {
+      console.error(`The variable ${this.name} is declared more than once`);
+      this.dispatch('xforms-binding-error');
+      return;
+    }
+    inScopeVariables.set(this.name, this);
+    // Clone the preceding variables to make sure we are not going to get access to variables we
+    // should not get access to
+    this.inScopeVariables = new Map(inScopeVariables);
+  }
+}
+
+customElements.define('fx-var', FxVariable);

package/src/getInScopeContext.js

@@ -2,10 +2,18 @@ import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 
 import { XPathUtil } from './xpath-util.js';
 
-function _getParentElement(node) {
+function _getElement(node) {
   if (node.nodeType === Node.ATTRIBUTE_NODE) {
+    // The context of an attribute is the ref of the element it's defined on
     return node.ownerElement;
   }
+
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    // The context of a query should be the element having a ref
+    return node;
+  }
+
+  // For text nodes, just start looking from the parent element
   return node.parentNode;
 }
 
@@ -31,14 +39,14 @@ function _getInitialContext(node, ref) {
     const instanceId = XPathUtil.getInstanceId(ref);
     return model.getInstance(instanceId).getDefaultContext();
   }
-  if (model.getDefaultInstance() !== null) {
+  if (model.getDefaultInstance() !== null && model.inited) {
     return model.getDefaultInstance().getDefaultContext();
   }
   return [];
 }
 
 export default function getInScopeContext(node, ref) {
-  const parentElement = _getParentElement(node);
+  const parentElement = _getElement(node);
   /*
   if(parentElement.nodeName.toUpperCase() === 'FX-REPEATITEM'){
     return parentElement.nodeset;
@@ -50,10 +58,23 @@ export default function getInScopeContext(node, ref) {
     return repeatItem.nodeset;
   }
 
-  if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
-    const initialContext = _getInitialContext(node.parentNode, ref);
-    const contextAttr = node.getAttribute('context');
-    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
+    // Note: do not consider the ref of the owner element since it should not be used to define the
+    // context
+    if (node.ownerElement.hasAttribute('context')) {
+      const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+      const contextAttr = node.ownerElement.getAttribute('context');
+      return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    }
+
+    // Never resolve the context from a ref itself!
+    return _getInitialContext(parentElement.parentNode, ref);
   }
+
+  // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
+  //   const initialContext = _getInitialContext(node.parentNode, ref);
+  //   const contextAttr = node.getAttribute('context');
+  //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  // }
   return _getInitialContext(parentElement, ref);
 }

package/src/modelitem.js

@@ -30,6 +30,7 @@ export class ModelItem {
     this.bind = bind;
     this.changed = false;
     this.alerts = [];
+    this.boundControls = [];
     // this.value = this._getValue();
   }
 

package/src/ui/abstract-control.js

@@ -26,12 +26,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   /**
    * (re)apply all modelItem state properties to this control. model -> UI
    */
-  async refresh() {
-    console.log('### AbstractControl.refresh on : ', this);
+  async refresh(force) {
+    // console.log('### AbstractControl.refresh on : ', this);
 
     const currentVal = this.value;
 
-    // if(this.repeated) return ;
+    // if(this.repeated) return
     if (this.isNotBound()) return;
 
     // await this.updateComplete;
@@ -52,6 +52,14 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
 
         this.value = this.modelItem.value;
+
+        /*
+        this is another case that highlights the fact that an init() function might make sense in general.
+         */
+        if(!this.modelItem.boundControls.includes(this)){
+          this.modelItem.boundControls.push(this);
+        }
+
         // console.log('>>>>>>>> abstract refresh ', this.control);
         // this.control[this.valueProp] = this.value;
         await this.updateWidgetValue();
@@ -67,16 +75,21 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         // this.requestUpdate();
       }
     }
+    // Fore.refreshChildren(this,force);
     // await this.updateComplete;
   }
 
+  /**
+   *
+   * @returns {Promise<void>}
+   */
   // eslint-disable-next-line class-methods-use-this
   async updateWidgetValue() {
     throw new Error('You have to implement the method updateWidgetValue!');
   }
 
   handleModelItemProperties() {
-    console.log('form ready', this.getOwnerForm().ready);
+    // console.log('form ready', this.getOwnerForm().ready);
     this.handleRequired();
     this.handleReadonly();
     if (this.getOwnerForm().ready) {
@@ -175,10 +188,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     if (this.isEnabled() !== this.modelItem.relevant) {
       if (this.modelItem.relevant) {
         this._dispatchEvent('relevant');
-        this._fadeIn(this, this.display);
+        // this._fadeIn(this, this.display);
+        this.style.display = this.display;
       } else {
         this._dispatchEvent('nonrelevant');
-        this._fadeOut(this);
+        // this._fadeOut(this);
+        this.style.display = 'none';
       }
     }
   }

package/src/ui/fx-alert.js

@@ -1,12 +1,14 @@
-import { html, css } from 'lit-element';
+import AbstractControl from './abstract-control.js';
 
-import XfAbstractControl from './abstract-control.js';
+export class FxAlert extends AbstractControl {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
 
-export class FxAlert extends XfAbstractControl {
-  static get styles() {
-    return css`
+  connectedCallback() {
+    const style = `
       :host {
-        display: block;
         height: auto;
         font-size: 0.8em;
         font-weight: 400;
@@ -14,23 +16,17 @@ export class FxAlert extends XfAbstractControl {
         display: none;
       }
     `;
-  }
-
-  constructor() {
-    super();
-    this.style.display = 'none';
-  }
-
-  static get properties() {
-    return {
-      ...super.properties,
-    };
-  }
 
-  render() {
-    return html`
+    const html = `
       <slot></slot>
     `;
+
+    this.shadowRoot.innerHTML = `
+        <style>
+            ${style}
+        </style>
+        ${html}
+    `;
   }
 
   async updateWidgetValue() {