@jinntec/fore 0.25.0 → 1.0.0-2

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,45 @@ 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');
-
+    console.time('rebuild');
     this.mainGraph = new DepGraph(false);
     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();
   }
 
@@ -172,36 +197,66 @@ export class FxModel extends HTMLElement {
     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 computed`, modelItem.required);
-            }
+    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);
+        }
+      });
+      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 +264,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 +363,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,9 +371,9 @@ 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) {
@@ -257,6 +393,7 @@ export class FxModel extends HTMLElement {
         }
       }
     });
+    console.timeEnd('revalidate');
     console.log('modelItems after revalidate: ', this.modelItems);
     console.groupEnd();
     return valid;