@jinntec/fore 2.1.1 → 2.3.0

package/src/tools/fx-minimap.js

@@ -1,194 +1,203 @@
 class FxMinimap extends HTMLElement {
-    constructor() {
-        super();
-        this.canvas = document.createElement('canvas');
-        this.options = this.getAttribute('options') ? JSON.parse(this.getAttribute('options')) : {};
-        this.attachShadow({mode: 'open'});
-        this.shadowRoot.appendChild(this.canvas);
-        this.WIN = window;
-        this.DOC = this.WIN.document;
-        this.DOC_EL = this.DOC.documentElement;
-        this.BODY = this.DOC.querySelector('body');
-
-    }
-
-    connectedCallback() {
-        this.ctx = this.canvas.getContext('2d');
-        this.black = pc => `rgba(0,0,0,${pc / 100})`;
-        this.viewport = this.querySelector(this.getAttribute('selector'));
-        this.settings = Object.assign(
-            {
-                viewport: this.viewport,
-                styles: {
-                    'header,footer,section,article': this.black(8),
-                    'h1,a': this.black(10),
-                    'h2,h3,h4': this.black(8),
-                },
-                back: this.black(2),
-                view: this.black(5),
-                drag: this.black(10),
-                interval: null,
-            },
-            this.options
-        );
-
-        const _listener = (el, method, types, fn) => types.split(/\s+/).forEach(type => el[method](type, fn));
-        this.on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
-        this.off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
-
-        this.Rect = (x, y, w, h) => {
-            return {x, y, w, h};
-        };
-
-        this.rect_rel_to = (rect, pos = {x: 0, y: 0}) => {
-            return this.Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
-        };
-
-        this.rect_of_doc = () => {
-            return this.Rect(0, 0, document.documentElement.scrollWidth, document.documentElement.scrollHeight);
-        };
-
-        this.rect_of_win = () => {
-            return this.Rect(window.pageXOffset, window.pageYOffset, document.documentElement.clientWidth, document.documentElement.clientHeight);
-        };
-
-        this.el_get_offset = el => {
-            const br = el.getBoundingClientRect();
-            return {x: br.left + window.pageXOffset, y: br.top + window.pageYOffset};
-        };
-
-        this.rect_of_el = el => {
-            const {x, y} = this.el_get_offset(el);
-            return this.Rect(x, y, el.offsetWidth, el.offsetHeight);
-        };
-
-        this.rect_of_viewport = el => {
-            const {x, y} = this.el_get_offset(el);
-            return this.Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
-        };
-
-        this.rect_of_content = el => {
-            const {x, y} = this.el_get_offset(el);
-            return this.Rect(x + el.clientLeft - el.scrollLeft, y + el.clientTop - el.scrollTop, el.scrollWidth, el.scrollHeight);
-        };
-
-        this.calc_scale = (() => {
-            const width = this.canvas.clientWidth;
-            const height = this.canvas.clientHeight;
-            return (w, h) => Math.min(width / w, height / h);
-        })();
-
-        this.resize_canvas = (w, h) => {
-            this.canvas.width = w;
-            this.canvas.height = h;
-            this.canvas.style.width = `${w}px`;
-            this.canvas.style.height = `${h}px`;
-        };
-
-        this.viewport = this.settings.viewport;
-        this.find = sel => Array.from((this.viewport || document).querySelectorAll(sel));
-
-        this.drag = false;
-        this.root_rect = null;
-        this.view_rect = null;
-        this.scale = null;
-        this.drag_rx = null
-        this. drag_ry = null;
-    }
-
-    draw_rect(rect, col){
-        if (col) {
-            this.ctx.beginPath();
-            this.ctx.rect(rect.x, rect.y, rect.w, rect.h);
-            this.ctx.fillStyle = col;
-            this.ctx.fill();
-        }
+  constructor() {
+    super();
+    this.canvas = document.createElement('canvas');
+    this.options = this.getAttribute('options') ? JSON.parse(this.getAttribute('options')) : {};
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(this.canvas);
+    this.WIN = window;
+    this.DOC = this.WIN.document;
+    this.DOC_EL = this.DOC.documentElement;
+    this.BODY = this.DOC.querySelector('body');
+  }
+
+  connectedCallback() {
+    this.ctx = this.canvas.getContext('2d');
+    this.black = pc => `rgba(0,0,0,${pc / 100})`;
+    this.viewport = this.querySelector(this.getAttribute('selector'));
+    this.settings = {
+      viewport: this.viewport,
+      styles: {
+        'header,footer,section,article': this.black(8),
+        'h1,a': this.black(10),
+        'h2,h3,h4': this.black(8),
+      },
+      back: this.black(2),
+      view: this.black(5),
+      drag: this.black(10),
+      interval: null,
+      ...this.options,
     };
 
-    find(sel) {
-        return Array.from((this.viewport || this.DOC).querySelectorAll(sel));
-    }
-
-    apply_styles(styles) {
-        Object.keys(styles).forEach(sel => {
-            const col = styles[sel];
-            this.find(sel).forEach(el => {
-                this.draw_rect(this.rect_rel_to(this.rect_of_el(el), this.root_rect), col);
-            });
-        });
+    const _listener = (el, method, types, fn) =>
+      types.split(/\s+/).forEach(type => el[method](type, fn));
+    this.on = (el, types, fn) => _listener(el, 'addEventListener', types, fn);
+    this.off = (el, types, fn) => _listener(el, 'removeEventListener', types, fn);
+
+    this.Rect = (x, y, w, h) => ({
+      x,
+      y,
+      w,
+      h,
+    });
+
+    this.rect_rel_to = (rect, pos = { x: 0, y: 0 }) =>
+      this.Rect(rect.x - pos.x, rect.y - pos.y, rect.w, rect.h);
+
+    this.rect_of_doc = () =>
+      this.Rect(0, 0, document.documentElement.scrollWidth, document.documentElement.scrollHeight);
+
+    this.rect_of_win = () =>
+      this.Rect(
+        window.pageXOffset,
+        window.pageYOffset,
+        document.documentElement.clientWidth,
+        document.documentElement.clientHeight,
+      );
+
+    this.el_get_offset = el => {
+      const br = el.getBoundingClientRect();
+      return { x: br.left + window.pageXOffset, y: br.top + window.pageYOffset };
     };
 
-
-    draw () {
-        this.root_rect = this.viewport ? this.rect_of_content(this.viewport) : this.rect_of_doc();
-        this.view_rect = this.viewport ? this.rect_of_viewport(this.viewport) : this.rect_of_win();
-        this.scale = this.calc_scale(this.root_rect.w, this.root_rect.h);
-
-        this.resize_canvas(this.root_rect.w * this.scale, this.root_rect.h * this.scale);
-
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.ctx.scale(this.scale, this.scale);
-
-        this.draw_rect(this.rect_rel_to(this.root_rect, this.root_rect), this.settings.back);
-        this.apply_styles(this.settings.styles);
-        this.draw_rect(this.rect_rel_to(this.view_rect, this.root_rect), this.drag ? this.settings.drag : this.settings.view);
+    this.rect_of_el = el => {
+      const { x, y } = this.el_get_offset(el);
+      return this.Rect(x, y, el.offsetWidth, el.offsetHeight);
     };
 
-    on_drag(ev) {
-        ev.preventDefault();
-        const cr = this.rect_of_viewport(this.canvas);
-        const x = (ev.pageX - cr.x) / this.scale - this.view_rect.w * this.drag_rx;
-        const y = (ev.pageY - cr.y) / this.scale - this.view_rect.h * this.drag_ry;
-
-        if (this.viewport) {
-            this.viewport.scrollLeft = x;
-            this.viewport.scrollTop = y;
-        } else {
-            this.WIN.scrollTo(x, y);
-        }
-        this.draw();
+    this.rect_of_viewport = el => {
+      const { x, y } = this.el_get_offset(el);
+      return this.Rect(x + el.clientLeft, y + el.clientTop, el.clientWidth, el.clientHeight);
     };
 
-    on_drag_end (ev) {
-        this.drag = false;
-        this.canvas.style.cursor = 'pointer';
-        this.BODY.style.cursor = 'auto';
-        this.off(this.WIN, 'mousemove', this.on_drag);
-        this.off(this.WIN, 'mouseup', this.on_drag_end);
-        this.on_drag(ev);
+    this.rect_of_content = el => {
+      const { x, y } = this.el_get_offset(el);
+      return this.Rect(
+        x + el.clientLeft - el.scrollLeft,
+        y + el.clientTop - el.scrollTop,
+        el.scrollWidth,
+        el.scrollHeight,
+      );
     };
 
-    on_drag_start (ev) {
-        this.drag = true;
-
-        const cr = this.rect_of_viewport(this.canvas);
-        const vr = this.rect_rel_to(this.view_rect, this.root_rect);
-        this.drag_rx = ((ev.pageX - cr.x) / this.scale - vr.x) / vr.w;
-        this.drag_ry = ((ev.pageY - cr.y) / this.scale - vr.y) / vr.h;
-        if (this.drag_rx < 0 || this.drag_rx > 1 || this.drag_ry < 0 || this.drag_ry > 1) {
-            this.drag_rx = 0.5;
-            this.drag_ry = 0.5;
-        }
-
-        this.canvas.style.cursor = 'crosshair';
-        this.BODY.style.cursor = 'crosshair';
-        this.on(this.WIN, 'mousemove', this.on_drag);
-        this.on(this.WIN, 'mouseup', this.on_drag_end);
-        this.on_drag(ev);
+    this.calc_scale = (() => {
+      const width = this.canvas.clientWidth;
+      const height = this.canvas.clientHeight;
+      return (w, h) => Math.min(width / w, height / h);
+    })();
+
+    this.resize_canvas = (w, h) => {
+      this.canvas.width = w;
+      this.canvas.height = h;
+      this.canvas.style.width = `${w}px`;
+      this.canvas.style.height = `${h}px`;
     };
 
-    init () {
-        this.canvas.style.cursor = 'pointer';
-        this.on(this.canvas, 'mousedown', this.on_drag_start);
-        this.on(this.viewport || this.WIN, 'load resize scroll', this.draw());
-        if (this.settings.interval > 0) {
-            setInterval(() => this.draw(), this.settings.interval);
-        }
-        this.draw();
-    };
+    this.viewport = this.settings.viewport;
+    this.find = sel => Array.from((this.viewport || document).querySelectorAll(sel));
+
+    this.drag = false;
+    this.root_rect = null;
+    this.view_rect = null;
+    this.scale = null;
+    this.drag_rx = null;
+    this.drag_ry = null;
+  }
+
+  draw_rect(rect, col) {
+    if (col) {
+      this.ctx.beginPath();
+      this.ctx.rect(rect.x, rect.y, rect.w, rect.h);
+      this.ctx.fillStyle = col;
+      this.ctx.fill();
+    }
+  }
+
+  find(sel) {
+    return Array.from((this.viewport || this.DOC).querySelectorAll(sel));
+  }
+
+  apply_styles(styles) {
+    Object.keys(styles).forEach(sel => {
+      const col = styles[sel];
+      this.find(sel).forEach(el => {
+        this.draw_rect(this.rect_rel_to(this.rect_of_el(el), this.root_rect), col);
+      });
+    });
+  }
+
+  draw() {
+    this.root_rect = this.viewport ? this.rect_of_content(this.viewport) : this.rect_of_doc();
+    this.view_rect = this.viewport ? this.rect_of_viewport(this.viewport) : this.rect_of_win();
+    this.scale = this.calc_scale(this.root_rect.w, this.root_rect.h);
+
+    this.resize_canvas(this.root_rect.w * this.scale, this.root_rect.h * this.scale);
+
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.scale(this.scale, this.scale);
+
+    this.draw_rect(this.rect_rel_to(this.root_rect, this.root_rect), this.settings.back);
+    this.apply_styles(this.settings.styles);
+    this.draw_rect(
+      this.rect_rel_to(this.view_rect, this.root_rect),
+      this.drag ? this.settings.drag : this.settings.view,
+    );
+  }
+
+  on_drag(ev) {
+    ev.preventDefault();
+    const cr = this.rect_of_viewport(this.canvas);
+    const x = (ev.pageX - cr.x) / this.scale - this.view_rect.w * this.drag_rx;
+    const y = (ev.pageY - cr.y) / this.scale - this.view_rect.h * this.drag_ry;
+
+    if (this.viewport) {
+      this.viewport.scrollLeft = x;
+      this.viewport.scrollTop = y;
+    } else {
+      this.WIN.scrollTo(x, y);
+    }
+    this.draw();
+  }
+
+  on_drag_end(ev) {
+    this.drag = false;
+    this.canvas.style.cursor = 'pointer';
+    this.BODY.style.cursor = 'auto';
+    this.off(this.WIN, 'mousemove', this.on_drag);
+    this.off(this.WIN, 'mouseup', this.on_drag_end);
+    this.on_drag(ev);
+  }
+
+  on_drag_start(ev) {
+    this.drag = true;
+
+    const cr = this.rect_of_viewport(this.canvas);
+    const vr = this.rect_rel_to(this.view_rect, this.root_rect);
+    this.drag_rx = ((ev.pageX - cr.x) / this.scale - vr.x) / vr.w;
+    this.drag_ry = ((ev.pageY - cr.y) / this.scale - vr.y) / vr.h;
+    if (this.drag_rx < 0 || this.drag_rx > 1 || this.drag_ry < 0 || this.drag_ry > 1) {
+      this.drag_rx = 0.5;
+      this.drag_ry = 0.5;
+    }
 
+    this.canvas.style.cursor = 'crosshair';
+    this.BODY.style.cursor = 'crosshair';
+    this.on(this.WIN, 'mousemove', this.on_drag);
+    this.on(this.WIN, 'mouseup', this.on_drag_end);
+    this.on_drag(ev);
+  }
+
+  init() {
+    this.canvas.style.cursor = 'pointer';
+    this.on(this.canvas, 'mousedown', this.on_drag_start);
+    this.on(this.viewport || this.WIN, 'load resize scroll', this.draw());
+    if (this.settings.interval > 0) {
+      setInterval(() => this.draw(), this.settings.interval);
+    }
+    this.draw();
+  }
 }
 if (!customElements.get('fx-minimap')) {
-    customElements.define('fx-minimap', FxMinimap);
+  customElements.define('fx-minimap', FxMinimap);
 }

package/src/tools/helpers.js

@@ -66,7 +66,7 @@ export function newElement(elem, attrs) {
   return el;
 }
 
- // Helper function for options view
+// Helper function for options view
 export function drawOptionRow(optionCode, optionText) {
   const row = newElement('span', { class: 'adi-opt' });
   row.innerHTML = `<label><input type="checkbox" data-opt="${optionCode}">${optionText}</label>`;

package/src/ui/abstract-control.js

@@ -1,18 +1,32 @@
 import '../fx-model.js';
-import { foreElementMixin } from '../ForeElementMixin.js';
+import ForeElementMixin from '../ForeElementMixin.js';
 import { ModelItem } from '../modelitem.js';
 import { Fore } from '../fore.js';
-import { XPathUtil } from '../xpath-util.js';
 import getInScopeContext from '../getInScopeContext.js';
-import { evaluateXPathToFirstNode} from '../xpath-evaluation.js';
-import {Relevance} from "../relevance.js";
+import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+
+function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
+  if (oldNodeValue === null) {
+    return false;
+  }
+
+  if (newControlValue && oldControlValue && newControlValue.nodeType && oldControlValue.nodeType) {
+    return newControlValue.outerHTML !== oldControlValue.outerHTML;
+  }
+
+  if (oldControlValue === newControlValue) {
+    return false;
+  }
+
+  return true;
+}
 
 /**
  * `AbstractControl` -
  * is a general base class for control elements.
  *
  */
-export default class AbstractControl extends foreElementMixin(HTMLElement) {
+export default class AbstractControl extends ForeElementMixin {
   constructor() {
     super();
     this.value = null;
@@ -34,10 +48,11 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
    * (re)apply all modelItem state properties to this control. model -> UI
    */
   async refresh(force) {
-    if(force) this.force=true;
+    if (force) this.force = true;
     // console.log('### AbstractControl.refresh on : ', this);
 
-    const currentVal = this.value;
+    // Save the old value of this control. this may be the stringified version, contrast to the node in `nodeset`
+    const oldValue = this.value;
 
     // if(this.repeated) return
     if (this.isNotBound()) return;
@@ -53,42 +68,45 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     if (this.isBound()) {
       // this.control = this.querySelector('#control');
 
-      if(!this.nodeset){
-
+      if (!this.nodeset) {
         const create = this.closest('[create]');
-        if(create){
+        if (create) {
           // ### check if parent element exists
-          let attrName; let parentPath; let parentNode;
+          let attrName;
+          let parentPath;
+          let parentNode;
 
-          if(this.ref.includes('/')){
+          if (this.ref.includes('/')) {
             parentPath = this.ref.substring(0, this.ref.indexOf('/'));
             const inscope = getInScopeContext(this.parentNode, this.ref);
-            parentNode = evaluateXPathToFirstNode(parentPath,inscope,this);
-
-            if(parentNode && parentNode.nodeType === Node.ELEMENT_NODE){
-              if(this.ref.includes('@')){
-                attrName = this.ref.substring(this.ref.indexOf('/')+2);
-                parentNode.setAttribute(attrName,'');
-              }else{
-                Fore.dispatch(this,'warn',{message:'"create" is not implemented for elements'})
+            parentNode = evaluateXPathToFirstNode(parentPath, inscope, this);
+
+            if (parentNode && parentNode.nodeType === Node.ELEMENT_NODE) {
+              if (this.ref.includes('@')) {
+                attrName = this.ref.substring(this.ref.indexOf('/') + 2);
+                parentNode.setAttribute(attrName, '');
+              } else {
+                Fore.dispatch(this, 'warn', {
+                  message: '"create" is not implemented for elements',
+                });
               }
             }
-          }else{
+          } else {
             const inscope = getInScopeContext(this, this.ref);
 
-            if(this.ref.includes('@')) {
+            if (this.ref.includes('@')) {
               attrName = this.ref.substring(this.ref.indexOf('@') + 1);
               inscope.setAttribute(attrName, '');
-            }else{
-              Fore.dispatch(this,'warn',{message:'"create" is not implemented for elements'})
+            } else {
+              Fore.dispatch(this, 'warn', { message: '"create" is not implemented for elements' });
               // inscope = getInScopeContext(this.parentNode, this.ref);
             }
           }
-        }else{
+        } else {
           // ### this actually makes the control nonrelevant
           // todo: we should call a template function here to allow detachment of event-listeners and resetting eventual state
           // this.style.display = 'none';
-          this.setAttribute('nonrelevant','');
+          this.setAttribute('nonrelevant', '');
         }
         return;
       }
@@ -140,21 +158,25 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         this.handleModelItemProperties();
 
         // if(!this.closest('fx-fore').ready) return; // state change event do not fire during init phase (initial refresh)
-        if(this.getOwnerForm().initialRun){
-          Fore.dispatch(this,'init',{});
+        if (this.getOwnerForm().initialRun) {
+          Fore.dispatch(this, 'init', {});
         }
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
         // if oldVal is null we haven't received a concrete value yet
-        if (this.oldVal !== null && currentVal !== this.value) {
-          Fore.dispatch(this, 'value-changed', { path: this.modelItem.path , value:this.modelItem.value});
+
+        if (this.localName !== 'fx-control') return;
+        if (isDifferent(this.oldVal, this.value, oldValue)) {
+          Fore.dispatch(this, 'value-changed', {
+            path: this.modelItem.path,
+            value: this.modelItem.value,
+            oldvalue: this.oldVal,
+          });
         }
       }
     }
   }
 
-  refreshFromModelItem(modelItem){
-
-  }
+  refreshFromModelItem(modelItem) {}
 
   /**
    *
@@ -190,13 +212,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   // eslint-disable-next-line class-methods-use-this
   handleRequired() {
     // console.log('mip required', this.modelItem.required);
-      this.widget = this.getWidget();
-	  const wasRequired = this.isRequired();
+    this.widget = this.getWidget();
+    const wasRequired = this.isRequired();
 
-    if(!this.modelItem.required){
+    if (!this.modelItem.required) {
       this.widget.removeAttribute('required');
       this.removeAttribute('required');
-      if (wasRequired !== this.modelItem.required){
+      if (wasRequired !== this.modelItem.required) {
         this._dispatchEvent('optional');
       }
       return;
@@ -218,20 +240,19 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       this._dispatchEvent('required');
     }
 
-/*
+    /*
     if (this.isRequired() !== this.modelItem.required) {
       this._updateRequired();
     }
 */
   }
 
-
   _updateRequired() {
     if (this.modelItem.required) {
       // if (this.getOwnerForm().ready){
       if (this.visited || this.force) {
-      // if (this.visited ) {
-      //   if (this.widget.value === '') {
+        // if (this.visited ) {
+        //   if (this.widget.value === '') {
         if (this.modelItem.value === '') {
           this.classList.add('isEmpty');
           this._toggleValid(false);
@@ -250,13 +271,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     }
   }
 
-  _toggleValid(valid){
-    if(valid){
+  _toggleValid(valid) {
+    if (valid) {
       this.removeAttribute('invalid');
-      this.setAttribute('valid','');
-    }else{
+      this.setAttribute('valid', '');
+    } else {
       this.removeAttribute('valid');
-      this.setAttribute('invalid','');
+      this.setAttribute('invalid', '');
     }
   }
 
@@ -285,19 +306,18 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       if (this.modelItem.constraint) {
         // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
-        this.setAttribute('valid','');
+        this.setAttribute('valid', '');
         this.removeAttribute('invalid');
       } else {
         this.setAttribute('invalid', '');
         this.removeAttribute('valid');
         // ### constraint is invalid - handle alerts
-/*
+        /*
         if (alert) {
           alert.style.display = 'block';
         }
 */
         if (this.modelItem.alerts.length !== 0) {
-
           const controlAlert = this.querySelector('fx-alert');
           if (!controlAlert) {
             const { alerts } = this.modelItem;
@@ -325,7 +345,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     this.removeAttribute('nonrelevant');
     if (Array.isArray(item) && item.length === 0) {
       this._dispatchEvent('nonrelevant');
-      this.setAttribute('nonrelevant','');
+      this.setAttribute('nonrelevant', '');
       // this.style.display = 'none';
       return;
     }
@@ -333,12 +353,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       if (this.modelItem.relevant) {
         this._dispatchEvent('relevant');
         // this._fadeIn(this, this.display);
-        this.setAttribute('relevant','');
+        this.setAttribute('relevant', '');
         // this.style.display = this.display;
       } else {
         this._dispatchEvent('nonrelevant');
         // this._fadeOut(this);
-        this.setAttribute('nonrelevant','');
+        this.setAttribute('nonrelevant', '');
         // this.style.display = 'none';
       }
     }
@@ -349,7 +369,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   isValid() {
-    return this.hasAttribute('invalid') ? false : true;
+    return !this.hasAttribute('invalid');
   }
 
   isReadonly() {