Source: view/MatchingView.js

  1. /**
  2.  * @file Class MatchingView
  3.  * @version March 26, 2017
  4.  *
  5.  * @author Olivier Pirson --- http://www.opimedia.be/
  6.  * @license GPLv3 --- Copyright (C) 2017 Olivier Pirson
  7.  */
  10. /**
  11.  * Returns a <span> with class "true" and true symbol if bool,
  12.  * else with class "false" and false symbol.
  13.  *
  14.  * @param {boolean} bool
  15.  *
  16.  * @returns {String}
  17.  */
  18. function classHtmlTrueFalse(bool) {
  19.     assert(typeof bool === "boolean", bool);
  21.     return (bool
  22.             ? '<span class="true">&#10004;</span>'
  23.             : '<span class="false">&#10007;</span>');
  24. }
  27. /**
  28.  * Returns a HTML entity for true or false.
  29.  *
  30.  * @param {boolean} bool
  31.  *
  32.  * @returns {String}
  33.  */
  34. function htmlTrueFalse(bool) {
  35.     assert(typeof bool === "boolean", bool);
  37.     return (bool
  38.             ? "&#10004;"
  39.             : "&#10007;");
  40. }
  44. /**
  45.  * View to draw Matching to HTML canvas.
  46.  */
  47. class MatchingView {
  48.     /**
  49.      * Construct a view with 2 superposed HTML canvas to draw a matching.
  50.      *
  51.      * If linkedMatchingView !== null
  52.      * then update method may also update linked views.
  53.      *
  54.      * If onlyPermanentCanvas
  55.      * then don't use of temporary canvas.
  56.      *
  57.      * @param {Matching} matching
  58.      * @param {HTMLElement} matchingHtmlElement that will contains HTML canvas
  59.      * @param {null|MatchingView} linkedMatchingView
  60.      * @param {boolean} onlyPermanentCanvas
  61.      */
  62.     constructor(matching, matchingHtmlElement, linkedMatchingView=null, onlyPermanentCanvas=false) {
  63.         assert(matching instanceof Matching, matching);
  64.         assert(matchingHtmlElement instanceof HTMLElement, matchingHtmlElement);
  65.         assert((linkedMatchingView===null) || (linkedMatchingView instanceof MatchingView),
  66.                linkedMatchingView);
  67.         assert(typeof onlyPermanentCanvas === "boolean", onlyPermanentCanvas);
  69.         // Constant to distinct drawing mode
  70.         this.DRAW_SEGMENTS_ONLY = 1;
  71.         this.DRAW_SEGMENTS_CONSECUTIVE = 2;
  72.         this.DRAW_SEGMENTS_ALL = 3;
  75.         // Attributes
  76.         this._matching = matching;
  78.         this._canvasContainer = matchingHtmlElement.children[0];  // container permanent and temporary canvas
  79.         this._infosContainer = (matchingHtmlElement.children[1]
  80.                                 ? matchingHtmlElement.children[1].children[1]
  81.                                 : null);  // container for matching information
  83.         if (linkedMatchingView === null) {
  84.             this._linkedMatchingViews = [this];  // ordonned sequence of MatchingView
  86.             this._drawSegments = this.DRAW_SEGMENTS_ONLY;  // draw segments only from this matching or also from linked matchings
  87.         }
  88.         else {
  89.             linkedMatchingView.linkedMatchingViews.push(this);
  90.             this._linkedMatchingViews = linkedMatchingView.linkedMatchingViews;
  92.             this._drawSegments = linkedMatchingView._drawSegments;
  93.         }
  96.         // Create permanent canvas
  97.         const width = 420;
  98.         const height = 300;
  99.         const permanentCanvas = document.createElement("canvas");
  101.         permanentCanvas.setAttribute("width", width);
  102.         permanentCanvas.setAttribute("height", height);
  104.         this._canvasContainer.appendChild(permanentCanvas);
  106.         this._permanentCanvas = permanentCanvas;
  108.         if (onlyPermanentCanvas) {
  109.             this._temporaryCanvas = null;
  110.         }
  111.         else {
  112.             // Create temporary canvas
  113.             const temporaryCanvas = document.createElement("canvas");
  115.             temporaryCanvas.setAttribute("width", width);
  116.             temporaryCanvas.setAttribute("height", height);
  118.             this._canvasContainer.appendChild(temporaryCanvas);
  120.             this._temporaryCanvas = temporaryCanvas;
  121.         }
  122.     }
  126.     /**
  127.      * Returns the container of canvas.
  128.      *
  129.      * @returns {HTMLElement}
  130.      */
  131.     get canvasContainer() { return this._canvasContainer; }
  134.     /**
  135.      * Returns the view.
  136.      *
  137.      * @returns {MatchingView}
  138.      */
  139.     get linkedMatchingViews() { return this._linkedMatchingViews; }
  142.     /**
  143.      * Returns the matching.
  144.      *
  145.      * @returns {Matching}
  146.      */
  147.     get matching() { return this._matching; }
  151.     /**
  152.      * Set drawSegment property from HTML element
  153.      * and update the view.
  154.      *
  155.      * @param {number} drawSegments DRAW_SEGMENTS_ONLY, DRAW_SEGMENTS_CONSECUTIVE or DRAW_SEGMENTS_ALL
  156.      */
  157.     setDrawSegments(drawSegments) {
  158.         assert((drawSegments === this.DRAW_SEGMENTS_ONLY)
  159.                || (drawSegments === this.DRAW_SEGMENTS_CONSECUTIVE)
  160.                || (drawSegments === this.DRAW_SEGMENTS_ALL), drawSegments);
  162.         this._drawSegments = drawSegments;
  164.         this.update();
  165.     }
  168.     /**
  169.      * Update the temporary canvas.
  170.      *
  171.      * If options.currentPoint !== null
  172.      * then draw also the moving current point (pointed by mouse).
  173.      *
  174.      * If options.nearestPoint !== null
  175.      * then draw also its nearest point in big.
  176.      *
  177.      * If options.temporarySegment !== null
  178.      * then draw also the segment being built.
  179.      *
  180.      *
  181.      * If options.updatePermanent
  182.      * then update also the permanent canvas.
  183.      *
  184.      *
  185.      * If options.updateLinkedMatchingViews
  186.      * then update also other linked matching views.
  187.      *
  188.      *
  189.      * If this._drawSegments !== DRAW_SEGMENTS_CONSECUTIVE or DRAW_SEGMENTS_ALL
  190.      * then draw also segments of consecutive or all linked matchings.
  191.      *
  192.      * @param {table} options
  193.      */
  194.     update(options={}) {
  195.         assert(options instanceof Object, options);
  197.         // Copy options
  198.         options = Object.assign({}, options);
  200.         // Set default options
  201.         if (options.currentPoint === undefined) {
  202.             options.currentPoint = null;
  203.         }
  204.         if (options.nearestPoint === undefined) {
  205.             options.nearestPoint = null;
  206.         }
  207.         if (options.temporarySegment === undefined) {
  208.             options.temporarySegment = null;
  209.         }
  210.         if (options.updateLinkedMatchingViews === undefined) {
  211.             options.updateLinkedMatchingViews = true;
  212.         }
  213.         if (options.updatePermanent === undefined) {
  214.             options.updatePermanent = true;
  215.         }
  217.         assert((options.currentPoint === null) || (options.currentPoint instanceof Point), options);
  218.         assert((options.nearestPoint === null) || (options.nearestPoint instanceof Point), options);
  219.         assert((options.temporarySegment === null) || (options.temporarySegment instanceof Segment), options);
  220.         assert(typeof options.updateLinkedMatchingViews === "boolean", options);
  221.         assert(typeof options.updatePermanent === "boolean", options);
  223.         if (options.updatePermanent) {
  224.             // Update the permanent canvas
  225.             this._updatePermanentCanvas();
  227.             const isCanonical = this.matching.isCanonical();
  229.             if (this._infosContainer) {  // isolated view of left or right matching
  230.                 cssSetClass(this._canvasContainer, "canonical", isCanonical);
  232.                 assert((this.matching === this.matching.linkedMatchings[0])
  233.                        || (this.matching === this.matching.linkedMatchings[this.matching.linkedMatchings.length - 1]));
  235.                 // Update infos
  236.                 const buttonSide = (this.matching === this.matching.linkedMatchings[0]
  237.                                     ? "left"
  238.                                     : "right");
  240.                 this._infosContainer.innerHTML
  241.                     = ("<div><span>" + this.matching.segments.length + " segment"
  242.                        + s(this.matching.segments.length)
  243.                        + '<span class="margin-left-2m">Even? ' + htmlTrueFalse(this.matching.segments.length % 2 === 0) + "</span></span></div>"
  244.                        + "<div><span>Perfect? " + classHtmlTrueFalse(this.matching.isPerfect()) + "</span>"
  245.                        + '<span class="' + (isCanonical
  246.                                             ? ""
  247.                                             : "not-") + 'canonical">Canonical? ' + htmlTrueFalse(isCanonical) + "</span>"
  248.                        + "<span>Vertical-horizontal? " + htmlTrueFalse(this.matching.isVerticalHorizontal()) + "</span></div>");
  249.             }
  250.             else {                       // view of list matchings
  251.                 cssSetClass(this._canvasContainer.parentNode.parentNode, "canonical", isCanonical);
  252.             }
  253.         }
  256.         if (this._temporaryCanvas !== null) {
  257.             // Update the temporary canvas
  258.             this._updateTemporaryCanvas(options.currentPoint, options.nearestPoint,
  259.                                         options.temporarySegment);
  262.             if (options.updateLinkedMatchingViews) {
  263.                 // Update other linked matching views
  264.                 options.updateLinkedMatchingViews = false;
  266.                 for (let linkedMatchingView of this._linkedMatchingViews) {
  267.                     if (linkedMatchingView !== this) {
  268.                         linkedMatchingView.update(options);
  269.                     }
  270.                 }
  271.             }
  272.         }
  273.     }
  277.     /**
  278.      * Clear canvas.
  279.      *
  280.      * @param {HTMLElement} canvas
  281.      */
  282.     _canvasClear(canvas) {
  283.         assert(canvas instanceof HTMLElement, canvas);
  285.         canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
  286.     }
  289.     /**
  290.      * Draw a point.
  291.      *
  292.      * @param {HTMLElement} canvas
  293.      * @param {Point} point
  294.      * @param {String} color
  295.      * @param {number} radius > 0
  296.      */
  297.     _drawPoint(canvas, point, color="black", radius=5) {
  298.         assert(canvas instanceof HTMLElement, canvas);
  299.         assert(point instanceof Point, point);
  300.         assert(typeof color === "string", color);
  302.         assert(typeof radius === "number", radius);
  303.         assert(radius > 0, radius);
  305.         const xY = this._pointToCanvasXY(canvas, point);
  307.         const canvasContext = canvas.getContext("2d");
  309.         canvasContext.fillStyle = color;
  310.         canvasContext.beginPath();
  311.         canvasContext.arc(xY[0], xY[1], radius, 0, Math.PI*2);
  312.         canvasContext.fill();
  313.     }
  316.     /**
  317.      * Draw a segment in color
  318.      * with its two endpoints in black (with default radius).
  319.      *
  320.      * @param {HTMLElement} canvas
  321.      * @param {Segment} segment
  322.      * @param {String} color
  323.      * @param {number} lineWidth > 0
  324.      */
  325.     _drawSegment(canvas, segment, color="black", lineWidth=2) {
  326.         assert(canvas instanceof HTMLElement, canvas);
  327.         assert(segment instanceof Segment, segment);
  328.         assert(typeof color === "string", color);
  330.         assert(typeof lineWidth === "number", lineWidth);
  331.         assert(lineWidth > 0, lineWidth);
  333.         const xYA = this._pointToCanvasXY(canvas, segment.a);
  334.         const xYB = this._pointToCanvasXY(canvas, segment.b);
  336.         const canvasContext = canvas.getContext("2d");
  338.         canvasContext.strokeStyle = color;
  339.         canvasContext.lineWidth = lineWidth;
  340.         canvasContext.beginPath();
  341.         canvasContext.moveTo(xYA[0], xYA[1]);
  342.         canvasContext.lineTo(xYB[0], xYB[1]);
  343.         canvasContext.stroke();
  345.         this._drawPoint(canvas, segment.a);
  346.         this._drawPoint(canvas, segment.b);
  347.     }
  350.     /**
  351.      * Returns (x, y) coordinates of point in the canvas.
  352.      *
  353.      * The vertical coordinate is reversed to have (*, 0) in the bottom.
  354.      *
  355.      * @param {HTMLElement} canvas
  356.      * @param {Point} point
  357.      *
  358.      * @returns {Array} [number, number]
  359.      */
  360.     _pointToCanvasXY(canvas, point) {
  361.         assert(canvas instanceof HTMLElement, canvas);
  362.         assert(point instanceof Point, point);
  364.         return [point.x, canvas.height - 1 - point.y];
  365.     }
  368.     /**
  369.      * Draw in the canvas all points and segments of this matching.
  370.      *
  371.      * If this._drawSegments === DRAW_SEGMENTS_CONSECUTIVE
  372.      * then draw also segments (in thin silver) of consecutive linked matchings.
  373.      *
  374.      * If this._drawSegments === DRAW_SEGMENTS_ALL
  375.      * then draw also segments (in thin silver) of all linked matchings.
  376.      *
  377.      * @param {number} drawSegments DRAW_SEGMENTS_ONLY, DRAW_SEGMENTS_CONSECUTIVE or DRAW_SEGMENTS_ALL
  378.      */
  379.     _updatePermanentCanvas() {
  380.         this._canvasClear(this._permanentCanvas);
  382.         if (this._drawSegments !== this.DRAW_SEGMENTS_ONLY) {
  383.             // Draw segments of other linked matchings
  384.             var segments = new Set();
  386.             if (this._drawSegments === this.DRAW_SEGMENTS_CONSECUTIVE) {
  387.                 // Only consecutive linked matchings
  388.                 const i = this.matching.linkedMatchingsIndex();
  390.                 if (i > 0) {
  391.                     segments = new Set(this.matching.linkedMatchings[i - 1].segments);
  392.                 }
  393.                 if (i < this.matching._linkedMatchings.length - 1) {
  394.                     for (let segment of this.matching.linkedMatchings[i + 1].segments) {
  395.                         segments.add(segment);
  396.                     }
  397.                 }
  398.             }
  399.             else {
  400.                 // All other linked matchings
  401.                 for (let matching of this.matching.linkedMatchings) {
  402.                     if (matching !== this.matching) {
  403.                         for (let segment of matching.segments) {
  404.                             segments.add(segment);
  405.                         }
  406.                     }
  407.                 }
  408.             }
  410.             for (let segment of segments) {
  411.                 this._drawSegment(this._permanentCanvas, segment, "#d0d0d0", 1);
  412.             }
  413.         }
  416.         // Draw all segments
  417.         const commonSegments = this.matching.commonSegmentsWithConsecutiveMatchings();
  418.         const intersectSegments = this.matching.properIntersectSegmentsWithConsecutiveMatchings();
  420.         for (let segment of this.matching.segments) {
  421.             const color = (intersectSegments.has(segment)
  422.                            ? "red"
  423.                            : (commonSegments.has(segment)
  424.                               ? "orange"
  425.                               : "black"))
  427.             this._drawSegment(this._permanentCanvas, segment, color);
  428.         }
  431.         // Draw isolated points in red
  432.         for (let point of this.matching.isolatedPoints()) {
  433.             this._drawPoint(this._permanentCanvas, point, "red");
  434.         }
  435.     }
  438.     /**
  439.      * Draw in the canvas
  440.      * the moving current point (pointed by mouse) (if not null),
  441.      * its nearest point in big (if not null)
  442.      * and the segment being built (if not null).
  443.      *
  444.      * @param {null|Point} currentPoint
  445.      * @param {null|Point} nearestPoint
  446.      * @param {null|Segment} temporarySegment
  447.      */
  448.     _updateTemporaryCanvas(currentPoint=null, nearestPoint=null, temporarySegment=null) {
  449.         assert((currentPoint === null) || (currentPoint instanceof Point), currentPoint);
  450.         assert((nearestPoint === null) || (nearestPoint instanceof Point), nearestPoint);
  451.         assert((temporarySegment === null)
  452.                || (temporarySegment instanceof Segment), temporarySegment);
  454.         this._canvasClear(this._temporaryCanvas);
  456.         if (temporarySegment) {
  457.             this._drawSegment(this._temporaryCanvas, temporarySegment, "silver");
  458.         }
  460.         if (currentPoint) {
  461.             this._drawPoint(this._temporaryCanvas, currentPoint, "silver", 3);
  462.         }
  464.         if (nearestPoint) {
  465.             this._drawPoint(this._temporaryCanvas, nearestPoint,
  466.                             (this.matching.isolatedPoints().has(nearestPoint)
  467.                              ? "red"
  468.                              : "black"), 10);
  469.         }
  470.     }
  471. }