Source: controller/GlobalController.js

  1. /**
  2.  * @file Class GlobalController
  3.  * @version March 26, 2017
  4.  *
  5.  * @author Olivier Pirson --- http://www.opimedia.be/
  6.  * @license GPLv3 --- Copyright (C) 2017 Olivier Pirson
  7.  */
  9. /**
  10.  * Controller for global controls of all matchings and views.
  11.  */
  12. class GlobalController {
  13.     /**
  14.      * Construct a controller for the global view
  15.      * and link to two controllers of matching.
  16.      *
  17.      * @param {GlobalView} globalView
  18.      * @param {MatchingController} leftMatchingController
  19.      * @param {MatchingController} rightMatchingController
  20.      */
  21.     constructor(globalView, leftMatchingController, rightMatchingController) {
  22.         assert(globalView instanceof GlobalView, globalView);
  23.         assert(leftMatchingController instanceof MatchingController, leftMatchingController);
  24.         assert(rightMatchingController instanceof MatchingController, rightMatchingController);
  26.         this._globalView = globalView;
  27.         this._leftController = leftMatchingController;
  28.         this._rightController = rightMatchingController;
  31.         // Set values from HTML elements
  32.         this._changeAction();
  33.         this._changeVerticalHorizontal();
  36.         this._setEventListeners();
  37.     }
  41.     /**
  42.      * Returns the global view.
  43.      */
  44.     get globalView() { return this._globalView; }
  47.     /**
  48.      * Returns the left controller.
  49.      */
  50.     get leftController() { return this._leftController; }
  53.     /**
  54.      * Returns the right controller.
  55.      */
  56.     get rightController() { return this._rightController; }
  60.     /**
  61.      * Fill the list of matchings with all possible perfect matchings
  62.      * with the set of points of the left matching.
  63.      *
  64.      * If disjointMatching
  65.      * then keep only perfect matching disjoint with this matching.
  66.      *
  67.      * If compatibleMatching
  68.      * then keep only perfect matching disjoint with this matching.
  69.      *
  70.      * @param {Boolean} disjointMatching
  71.      * @param {Boolean} compatibleMatching
  72.      */
  73.     _buildPerfectMatchings(disjointMatching, compatibleMatching) {
  74.         assert(typeof disjointMatching === "boolean", disjointMatching);
  75.         assert(typeof compatibleMatching === "boolean", compatibleMatching);
  77.         const thisGlobalController = this;
  79.         this._runWithWaitMessage(function () {
  80.             thisGlobalController._leftController.matching.setPerfectMatchings(disjointMatching, compatibleMatching);
  81.             thisGlobalController._globalView.update();
  82.         });
  83.     }
  86.     /**
  87.      * Fill the list of matchings with a shortest transformation
  88.      * between left and right matchings.
  89.      *
  90.      * @param {Boolean} disjointTransformation
  91.      */
  92.     _buildTransformation(disjointTransformation) {
  93.         assert(typeof disjointTransformation === "boolean", disjointTransformation);
  95.         const thisGlobalController = this;
  97.         this._runWithWaitMessage(function () {
  98.             const found = thisGlobalController._leftController.matching.setTransformation(disjointTransformation);
  99.             thisGlobalController._globalView.update();
  101.             if (!found) {
  102.                 thisGlobalController._warningMessage("Not found!");
  103.             }
  104.         });
  105.     }
  108.     /**
  109.      * Set action property for two controllers of matching.
  110.      */
  111.     _changeAction() {
  112.         this._leftController.changeAction();
  113.         this._rightController.changeAction();
  114.     }
  117.     /**
  118.      * Set drawSegment property for two controllers of matching.
  119.      */
  120.     _changeDrawSegments() {
  121.         this._leftController.changeDrawSegments();
  122.         this._rightController.changeDrawSegments();
  123.         this._globalView.update(null, false);
  124.     }
  127.     /**
  128.      * Set vertical-horizontal property for two controllers of matching.
  129.      */
  130.     _changeVerticalHorizontal() {
  131.         this._leftController.changeVerticalHorizontal();
  132.         this._rightController.changeVerticalHorizontal();
  133.     }
  136.     /**
  137.      * Reset the two controllers.
  138.      */
  139.     _clear() {
  140.         this._leftController.matching.clearIntermediaryLinkedMatchings();
  142.         this._leftController.clear();
  143.         this._rightController.clear();
  144.     }
  146.     /**
  147.      * Reset the list of matchings.
  148.      */
  149.     _clearTransformation() {
  150.         this._leftController.matching.clearIntermediaryLinkedMatchings();
  151.         this._globalView.update();
  152.     }
  155.     /**
  156.      * Load matchings from a text format
  157.      * (in the format such that returns by Matching.matchingsToString())
  158.      * and update the global view.
  159.      *
  160.      * @param {String} text
  161.      */
  162.     _load(text) {
  163.         assert(typeof text === "string", text);
  165.         this._clear();
  167.         const lines = text.split(/\D+/);  // split for each number (ignore other stuffs)
  170.         // Read points
  171.         const numberPoints = parseInt(lines.shift(), 10);
  173.         for (let i = 0; i < numberPoints; ++i) {
  174.             const x = parseInt(lines.shift(), 10);
  175.             const y = parseInt(lines.shift(), 10);
  177.             this._leftController.matching.pointAdd(new Point(x, y));
  178.         }
  181.         // Read matchings
  182.         const numberMatchings = parseInt(lines.shift(), 10);
  184.         const linkedMatchings = [this._leftController.matching];
  186.         for (let i = 1; i < numberMatchings - 1; ++i) {
  187.             linkedMatchings.push(new Matching());
  188.         }
  189.         linkedMatchings.push(this._rightController.matching);
  191.         for (let i = 0; i < numberMatchings; ++i) {
  192.             // Read segments
  193.             const numberSegments = parseInt(lines.shift(), 10);
  195.             for (let j = 0; j < numberSegments; ++j) {
  196.                 const indexA = parseInt(lines.shift(), 10);
  197.                 const indexB = parseInt(lines.shift(), 10);
  199.                 linkedMatchings[i].segmentAdd(new Segment(this._leftController.matching.points[indexA], this._leftController.matching.points[indexB]));
  200.             }
  201.         }
  203.         for (let linkedMatching of linkedMatchings) {
  204.             linkedMatching._linkedMatchings = linkedMatchings;
  205.         }
  207.         this._globalView.update();
  208.     }
  211.     /**
  212.      * Load matchings from a local text file
  213.      * (in the format such that returns by Matching.matchingsToString())
  214.      * and update the global view.
  215.      *
  216.      * @param {Event} event
  217.      */
  218.     _loadFile(event) {
  219.         assert(event instanceof Event, event);
  221.         const file = document.getElementById("button-load").files[0];
  222.         const fileReader = new FileReader();
  224.         const controller = this;
  226.         fileReader.onload = function(event) {
  227.             controller._load(event.target.result.trim());
  228.         };
  230.         fileReader.readAsText(file);
  231.     }
  234.     /**
  235.      * Load matchings from a text file
  236.      * (in the format such that returns by Matching.matchingsToString())
  237.      * and update the global view.
  238.      *
  239.      * @param {String} url
  240.      */
  241.     _loadUrl(url) {
  242.         assert(typeof url === "string", url);
  244.         var xhr = new XMLHttpRequest();
  246.         xhr.open("GET", url, true);
  247.         xhr.setRequestHeader("Content-Type", "plain/text");
  249.         const controller = this;
  251.         xhr.onload = function() {
  252.             if ((xhr.readyState !== 4) || (xhr.status !== 200)) {
  253.                 return;
  254.             }
  256.             controller._load(xhr.responseText);
  258.             location.hash = "3-Experiment-by-yourself-1-Interactive-application";
  259.         };
  261.         xhr.send(null);
  262.     }
  265.     /**
  266.      * Display a waiting message,
  267.      * run the function
  268.      * and then remove the waiting message.
  269.      *
  270.      * @param {function} func
  271.      */
  272.     _runWithWaitMessage(func) {
  273.         assert(typeof func === "function", func);
  275.         this._waitShow();
  277.         const thisGlobalController = this;
  279.         window.setTimeout(function () {
  280.             func();
  281.             window.setTimeout(thisGlobalController._waitHide, 100);
  282.         }, 100);
  283.     }
  286.     /**
  287.      * Save all matchings in a text file named "matchings.txt"
  288.      * (in the format returns by Matching.matchingsToString()).
  289.      *
  290.      * Warning! Only integers are valid.
  291.      */
  292.     _saveToFile() {
  293.         // Create content
  294.         const text = this._leftController.matching.matchingsToString();
  295.         const blob = new Blob([text], {type:"text/plain"});
  297.         // Create a link to content
  298.         const itemA = document.createElement("a");
  300.         itemA.download = "matchings.txt";
  301.         itemA.href = window.URL.createObjectURL(blob);
  302.         itemA.onclick = function (event) { document.body.removeChild(event.target); };
  303.         itemA.style.display = "none";
  305.         document.body.appendChild(itemA);
  307.         // Click to the link
  308.         itemA.click();
  309.     }
  312.     /**
  313.      * Swap segments between the left and right matchings.
  314.      */
  315.     _swap() {
  316.         this._leftController.matching.clearIntermediaryLinkedMatchings();
  318.         const tmp = this._leftController.matching._segments;
  320.         this._leftController.matching._segments = this._rightController.matching._segments;
  321.         this._rightController.matching._segments = tmp;
  323.         this._globalView.update();
  324.     }
  327.     /**
  328.      * Set listeners on the view.
  329.      */
  330.     _setEventListeners() {
  331.         const controller = this;
  334.         // Set canonical to left matching
  335.         const canonicalLeft = function (event) {
  336.             controller._leftController.matching.clearIntermediaryLinkedMatchings();
  337.             controller._leftController.matching.setCanonical();
  338.             controller._globalView.update();
  339.         };
  341.         document.getElementById("button-canonical-left").addEventListener("click", canonicalLeft, false);
  343.         // Set canonical to right matching
  344.         const canonicalRight = function (event) {
  345.             controller._leftController.matching.clearIntermediaryLinkedMatchings();
  346.             controller._rightController.matching.setCanonical();
  347.             controller._globalView.update();
  348.         };
  350.         document.getElementById("button-canonical-right").addEventListener("click", canonicalRight, false);
  353.         // Shuffle segments in left matching
  354.         const shuffleLeft = function (event) {
  355.             controller._leftController.matching.clearIntermediaryLinkedMatchings();
  356.             controller._leftController.matching.shuffleSegments();
  357.             controller._globalView.update();
  358.         };
  360.         document.getElementById("button-shuffle-left").addEventListener("click", shuffleLeft, false);
  362.         // Shuffle segments in right matching
  363.         const shuffleRight = function (event) {
  364.             controller._leftController.matching.clearIntermediaryLinkedMatchings();
  365.             controller._rightController.matching.shuffleSegments();
  366.             controller._globalView.update();
  367.         };
  369.         document.getElementById("button-shuffle-right").addEventListener("click", shuffleRight, false);
  372.         // Build list perfect matchings
  373.         document.getElementById("button-build-list-perfect-matchings").addEventListener("click",
  374.                                                                                         function () { controller._buildPerfectMatchings(false, false); },
  375.                                                                                         false);
  377.         // Build list disjoint perfect matchings
  378.         document.getElementById("button-build-list-disjoint-perfect-matchings").addEventListener("click",
  379.                                                                                                  function () { controller._buildPerfectMatchings(true, false); },
  380.                                                                                                  false);
  382.         // Build list compatible perfect matchings
  383.         document.getElementById("button-build-list-compatible-perfect-matchings").addEventListener("click",
  384.                                                                                                    function () { controller._buildPerfectMatchings(false, true); },
  385.                                                                                                    false);
  387.         // Build list disjoint compatible perfect matchings
  388.         document.getElementById("button-build-list-disjoint-compatible-perfect-matchings").addEventListener("click",
  389.                                                                                                             function () { controller._buildPerfectMatchings(true, true); },
  390.                                                                                                             false);
  393.         // Build list transformation
  394.         document.getElementById("button-build-list-transformation").addEventListener("click",
  395.                                                                                      function () { controller._buildTransformation(false); },
  396.                                                                                      false);
  398.         // Build list disjoint transformation
  399.         document.getElementById("button-build-list-disjoint-transformation").addEventListener("click",
  400.                                                                                               function () { controller._buildTransformation(true); },
  401.                                                                                               false);
  404.         // Clear list matchings
  405.         document.getElementById("button-clear-list-matchings").addEventListener("click",
  406.                                                                                 function () { controller._clearTransformation(); },
  407.                                                                                 false);
  410.         // Clear
  411.         document.getElementById("button-clear").addEventListener("click",
  412.                                                                  function () { controller._clear(); },
  413.                                                                  false);
  416.         // Load from file
  417.         document.getElementById("button-load").addEventListener("change",
  418.                                                                 function (event) { controller._loadFile(event); },
  419.                                                                 false);
  421.         this._setEventListenersLoadExample();
  423.         // Save to file
  424.         document.getElementById("button-save").addEventListener("click",
  425.                                                                 function () { controller._saveToFile(); },
  426.                                                                 false);
  428.         // Swap
  429.         document.getElementById("button-swap").addEventListener("click",
  430.                                                                 function () { controller._swap(); },
  431.                                                                 false);
  434.         // Change action mode
  435.         document.getElementById("radio-action-point").addEventListener("change",
  436.                                                                        function () { controller._changeAction(); },
  437.                                                                        false);
  438.         document.getElementById("radio-action-segment").addEventListener("change",
  439.                                                                          function () { controller._changeAction(); },
  440.                                                                          false);
  443.         // Change draw segments mode
  444.         document.getElementById("radio-draw-segments-only").addEventListener("change",
  445.                                                                              function () { controller._changeDrawSegments(); },
  446.                                                                              false);
  448.         document.getElementById("radio-draw-segments-consecutive").addEventListener("change",
  449.                                                                                     function () { controller._changeDrawSegments(); }, false);
  451.         document.getElementById("radio-draw-segments-all").addEventListener("change",
  452.                                                                             function () { controller._changeDrawSegments(); },
  453.                                                                             false);
  456.         // Change vertical-horizontal mode
  457.         document.getElementById("checkbox-vertical-horizontal").addEventListener("change",
  458.                                                                                  function () { controller._changeVerticalHorizontal(); },
  459.                                                                                  false);
  462.         // Resize the container of list matchings
  463.         window.addEventListener("resize",
  464.                                 function () { controller.globalView.resizeListMatchings(); },
  465.                                 false);
  466.     }
  469.     /**
  470.      * Set listeners on the view to load examples.
  471.      */
  472.     _setEventListenersLoadExample() {
  473.         const controller = this;
  474.         const imgs = document.getElementsByTagName('img');
  476.         for (let img of imgs) {
  477.             const id = img.id;
  479.             if (id) {
  480.                 const matches = /^(.+)-example$/.exec(id);
  481.                 const name = matches[1];
  483.                 if (name) {
  484.                     img.title = "Click to this picture to load it to the two interactive zones.";
  485.                     img.addEventListener("click",
  486.                                          function (event) { controller._loadUrl("public/examples/" + name + ".txt"); },
  487.                                          false);
  488.                 }
  489.             }
  490.         }
  491.     }
  494.     /**
  495.      * Hide the waiting message.
  496.      */
  497.     _waitHide() {
  498.         document.getElementById("wait-container").style.display = "none";
  499.     }
  502.     /**
  503.      * Show the waiting message.
  504.      */
  505.     _waitShow() {
  506.         document.getElementById("wait-container").style.display = "flex";
  507.     }
  510.     /**
  511.      * Show temporary the warning message.
  512.      */
  513.     _warningMessage(message) {
  514.         assert(typeof message === "string", message);
  516.         const container = document.getElementById("warning-container");
  518.         container.innerHTML = message;
  519.         container.style.display = "flex";
  521.         window.setTimeout(function () {
  522.             container.style.display = "none";
  523.         }, 2000);
  524.     }
  525. }