Source: view/GlobalView.js

  1. /**
  2.  * @file Class GlobalView
  3.  * @version April 21, 2017
  4.  *
  5.  * @author Olivier Pirson --- http://www.opimedia.be/
  6.  * @license GPLv3 --- Copyright (C) 2017 Olivier Pirson
  7.  */
  9. /**
  10.  * View for two matchings
  11.  * and global informations.
  12.  */
  13. class GlobalView {
  14.     /**
  15.      * Construct a view for draw two matchings
  16.      * and print global informations.
  17.      *
  18.      * @param {Matching} leftMatchingView
  19.      * @param {Matching} rightMatchingView
  20.      * @param {HTMLElement} infosHtmlElement that wil contains global informations
  21.      * @param {HTMLElement} listMatchingsHtmlElement that wil contains list of matchings
  22.      */
  23.     constructor(leftMatchingView, rightMatchingView, infosHtmlElement, listMatchingsHtmlElement, infosListMatchingsHtmlElement) {
  24.         assert(leftMatchingView instanceof MatchingView, leftMatchingView);
  25.         assert(rightMatchingView instanceof MatchingView, rightMatchingView);
  26.         assert(infosHtmlElement instanceof HTMLElement, infosHtmlElement);
  27.         assert(listMatchingsHtmlElement instanceof HTMLElement, listMatchingsHtmlElement);
  28.         assert(infosListMatchingsHtmlElement instanceof HTMLElement, infosListMatchingsHtmlElement);
  30.         this._leftView = leftMatchingView;
  31.         this._rightView = rightMatchingView;
  32.         this._infosHtmlElement = infosHtmlElement;
  33.         this._listMatchingsHtmlElement = listMatchingsHtmlElement;
  34.         this._infosListMatchingsHtmlElement = infosListMatchingsHtmlElement;
  36.         infosHtmlElement.innerHTML = "<div></div><div></div>";
  38.         this.update();
  39.     }
  43.     /**
  44.      * Resize the container of list matchings.
  45.      */
  46.     resizeListMatchings() {
  47.         const width = (420*2/5 + 2 + 6)*this._leftView.matching.linkedMatchings.length - 6;
  48.         const parent = this._listMatchingsHtmlElement.parentNode;
  50.         if (width >= parent.offsetWidth) {
  51.             const margin = (6 - parent.offsetLeft) + "px";
  53.             this._listMatchingsHtmlElement.style.marginLeft = margin;
  54.             this._listMatchingsHtmlElement.style.marginRight = margin;
  55.         }
  56.         else {
  57.             this._listMatchingsHtmlElement.style.marginLeft = "0px";
  58.             this._listMatchingsHtmlElement.style.marginRight = "0px";
  59.         }
  60.     }
  63.     /**
  64.      * Update the two matching views
  65.      * and the global informations.
  66.      *
  67.      * If updateMatchings
  68.      * then update also matchings.
  69.      *
  70.      * @param {currentPoint} Point
  71.      * @param {boolean} updateMatchings
  72.      */
  73.     update(currentPoint=null, updateMatchings=true) {
  74.         assert((currentPoint === null) || (currentPoint instanceof Point), currentPoint);
  75.         assert(typeof updateMatchings === "boolean", updateMatchings);
  77.         const different = !this._leftView.matching.isEquals(this._rightView.matching);
  78.         const disjoint = this._leftView.matching.isDisjoint(this._rightView.matching);
  79.         const compatible = this._leftView.matching.isCompatible(this._rightView.matching);
  82.         // Enable or disable some buttons
  83.         var onOffButton = function (buttonItem, bool) {
  84.             if (bool) {
  85.                 buttonItem.removeAttribute("disabled");
  86.             }
  87.             else {
  88.                 buttonItem.setAttribute("disabled", "disabled");
  89.             }
  90.         };
  92.         onOffButton(document.getElementById("button-build-list-perfect-matchings"),
  93.                     (this._leftView.matching.points.length % 2 === 0)
  94.                     && (this._leftView.matching.points.length >= 2));
  96.         onOffButton(document.getElementById("button-build-list-disjoint-perfect-matchings"),
  97.                     (this._leftView.matching.points.length % 2 === 0)
  98.                     && (this._leftView.matching.points.length >= 2)
  99.                     && this._leftView.matching.isPerfect());
  101.         onOffButton(document.getElementById("button-build-list-compatible-perfect-matchings"),
  102.                     (this._leftView.matching.points.length % 2 === 0)
  103.                     && (this._leftView.matching.points.length >= 2)
  104.                     && this._leftView.matching.isPerfect());
  106.         onOffButton(document.getElementById("button-build-list-disjoint-compatible-perfect-matchings"),
  107.                     (this._leftView.matching.points.length % 2 === 0)
  108.                     && (this._leftView.matching.points.length >= 2)
  109.                     && this._leftView.matching.isPerfect());
  112.         onOffButton(document.getElementById("button-build-list-transformation"),
  113.                     (this._leftView.matching.points.length % 2 === 0)
  114.                     && (this._leftView.matching.points.length >= 4)
  115.                     && different
  116.                     && !compatible
  117.                     && this._leftView.matching.isPerfect()
  118.                     && this._rightView.matching.isPerfect());
  120.         onOffButton(document.getElementById("button-build-list-disjoint-transformation"),
  121.                     (this._leftView.matching.points.length % 2 === 0)
  122.                     && (this._leftView.matching.points.length >= 4)
  123.                     && different
  124.                     && (!disjoint || !compatible)
  125.                     && this._leftView.matching.isPerfect()
  126.                     && this._rightView.matching.isPerfect());
  129.         onOffButton(document.getElementById("button-canonical-left"),
  130.                     (this._leftView.matching.points.length % 2 === 0)
  131.                     && (this._leftView.matching.points.length >= 2));
  133.         onOffButton(document.getElementById("button-canonical-right"),
  134.                     (this._rightView.matching.points.length % 2 === 0)
  135.                     && (this._rightView.matching.points.length >= 2));
  138.         onOffButton(document.getElementById("button-shuffle-left"),
  139.                     (this._leftView.matching.segments.length >= 2));
  141.         onOffButton(document.getElementById("button-shuffle-right"),
  142.                     (this._rightView.matching.segments.length >= 2));
  145.         onOffButton(document.getElementById("button-clear"),
  146.                     this._leftView.matching.points.length > 0);
  148.         onOffButton(document.getElementById("button-clear-list-matchings"),
  149.                     this._leftView.matching.linkedMatchings.length > 2);
  151.         onOffButton(document.getElementById("button-save"),
  152.                     this._leftView.matching.points.length > 0);
  154.         onOffButton(document.getElementById("button-swap"), different);
  157.         // Update infos
  158.         this.updateInfosCurrentPoint(currentPoint);
  160.         this._infosHtmlElement.children[1].innerHTML
  161.             = ("<span><span>Different? " + classHtmlTrueFalse(different) + "</span>"
  162.                + '<span class="margin-left-2m">Disjoint? ' + htmlTrueFalse(disjoint) + '<span class="margin-left-m '
  163.                + (disjoint
  164.                   ? "hidden"
  165.                   : "color-not-disjoint") + '">(common segments)</span></span></span>'
  166.                + '<span>Compatible? ' + htmlTrueFalse(compatible)
  167.                + '<span class="margin-left-m '
  168.                + (compatible
  169.                   ? "hidden"
  170.                   : "color-not-compatible") + '">(intersect segments)</span></span>');
  173.         if (updateMatchings) {
  174.             // Update left and right matchings
  175.             this._leftView.update();
  176.             this._rightView.update();
  177.         }
  180.         // Update list of linked matchings
  181.         const number = ((this._leftView.matching.linkedMatchings.length == 2)
  182.                         && (this._leftView.matching.isEquals(this._leftView.matching.linkedMatchings[1]))
  183.                         ? 1
  184.                         : this._leftView.matching.linkedMatchings.length);
  186.         this._infosListMatchingsHtmlElement.innerHTML = number + " matching" + s(number) + ":";
  188.         this._listMatchingsHtmlElement.innerHTML = null;
  190.         var skipped = false;
  192.         for (let i = 0; i < number; ++i) {
  193.             const matching = this._leftView.matching.linkedMatchings[i];
  194.             const divZoom = document.createElement("div");
  196.             divZoom.className = "zoom";
  198.             const divMatching = document.createElement("div");
  200.             divMatching.className = "matching";
  201.             divZoom.appendChild(divMatching);
  203.             const canvas_container = document.createElement("div");
  205.             canvas_container.className = "canvas-container";
  206.             divMatching.appendChild(canvas_container);
  208.             this._listMatchingsHtmlElement.appendChild(divZoom);
  210.             const view = new MatchingView(matching, divMatching, null, true);
  212.             view._drawSegments = this._leftView._drawSegments;
  214.             view.update();
  216.             if (!skipped && (i > 50)) {
  217.                 // Skip linked matchings except the two lasts
  218.                 skipped = true;
  219.                 i = number - 3;
  221.                 const div = document.createElement("div");
  223.                 div.innerHTML = "&hellip;";
  224.                 this._listMatchingsHtmlElement.appendChild(div);
  225.             }
  227.             if ((number > 1)
  228.                 && ((i === 0) || (i === number - 2))) {
  229.                 // Add a separator after the first and before the last matchings
  230.                 const divSep = document.createElement("div");
  232.                 divSep.className = "sep";
  233.                 divSep.innerHTML = "&nbsp;";
  234.                 this._listMatchingsHtmlElement.appendChild(divSep);
  235.             }
  236.         }
  238.         this.resizeListMatchings();
  239.     }
  242.     /**
  243.      * Update the coordinates of the current point
  244.      * or remove it,
  245.      * and update the number of points.
  246.      *
  247.      * @param {Point} currentPoint
  248.      */
  249.     updateInfosCurrentPoint(currentPoint=null) {
  250.         assert((currentPoint === null) || (currentPoint instanceof Point), currentPoint);
  252.         const leftMatching = this._leftView.matching;
  253.         const numberPerfectMatchingsUppedBound = leftMatching.allPerfectMatchingsUppedBound();
  254.         const n = leftMatching.points.length;
  256.         this._infosHtmlElement.children[0].innerHTML
  257.             = ("<span>"
  258.                + (currentPoint === null
  259.                   ? ""
  260.                   : "(" + strPad(currentPoint.x, 3) + ", " + strPad(currentPoint.y, 3) + ")") + "</span><span>"
  261.                + n + " point" + s(n)
  262.                + " " + classHtmlTrueFalse(n % 2 === 0)
  263.                + '</span><span class="margin-left-2m">'
  264.                + (leftMatching.numberPerfectMatchingsIfCalculated === null
  265.                   ? '?'
  266.                   : leftMatching.numberPerfectMatchingsIfCalculated)
  267.                + ' possible perfect matching(s) <span title="Rough upper bound of the number of possible perfect matchings with these points.">&le; ' + numberPerfectMatchingsUppedBound
  268.                + '</span></span><span class="margin-left-2m">'
  269.                + ((n > 0) && (n%2 === 0)
  270.                   ? "Minimal length transformation &leq; " + Math.ceil(Math.log2(n))*2
  271.                   : '') + "</span>");
  272.     }
  273. }