Fossil

Check-in [1fc61638]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:This check-in started as a follow-up to [55f56e91ba] to make the tooltip less hasty, and prevent it from being instantly reshown (and slightly moved) when the mouse pointer goes back from the tooltip to the owning node. The final result is a combined and simplified "mousemove" handler for both nodes and rails, with consistent tooltip lifetime: the tooltip is only closed if the mouse pointer is at a fixed point over another element for the (full) duration of the dwell timeout, or away from the owning element (and the tooltip) for the (full) duration of the close timeout. This check-in also improves positioning of the tooltip for longer dwell timeouts.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-tweaks
Files: files | file ages | folders
SHA3-256: 1fc616382820b859e680cfcc5f56b51686ddfa52a4109d323963cd041e177446
User & Date: florian 2019-06-10 16:02:00
Context
2019-06-10
16:08
Fix a minor coding typo from [2196555351] (property name). check-in: af2ca388 user: florian tags: tooltip-tweaks
16:02
This check-in started as a follow-up to [55f56e91ba] to make the tooltip less hasty, and prevent it from being instantly reshown (and slightly moved) when the mouse pointer goes back from the tooltip to the owning node. The final result is a combined and simplified "mousemove" handler for both nodes and rails, with consistent tooltip lifetime: the tooltip is only closed if the mouse pointer is at a fixed point over another element for the (full) duration of the dwell timeout, or away from the owning element (and the tooltip) for the (full) duration of the close timeout. This check-in also improves positioning of the tooltip for longer dwell timeouts. check-in: 1fc61638 user: florian tags: tooltip-tweaks
2019-06-08
14:48
Improvements to tooltip behavior in an effort to make it easier to move the mouse over to the "copy button" or to the hyperlink without the tooltip changing out from under the user. check-in: 55f56e91 user: drh tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

114
115
116
117
118
119
120

121
122
123
124
125
126
127
...
130
131
132
133
134
135
136

137
138
139
140
141
142
143
...
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212







213


214

215
216
217
218
219
220
221
222
223
224
225
226
227
...
603
604
605
606
607
608
609


610
611
612
613
614
615
616
...
622
623
624
625
626
627
628

629
630
631
632
633
634
635
636
637
638
639

640
641
642
643
644
645
646
  ixHover: -1,        /* The mouse is over a thick riser arrow for
                      ** tx.rowinfo[ixHover].  Or -2 when the mouse is
                      ** over a graph node.  Or -1 when the mouse is not
                      ** over anything. */
  ixActive: -1,       /* The item shown in the tooltip is tx.rowinfo[ixActive].
                      ** ixActive is -1 if the tooltip is not visible */
  nodeHover: null,    /* Graph node under mouse when ixHover==-2 */

  posX: 0, posY: 0    /* The last mouse position. */
};

/* Functions used to control the tooltip popup and its timer */
function onKeyDown(event){  /* Hide the tooltip when ESC key pressed */
  var key = event.which || event.keyCode;
  if( key==27 ){
................................................................................
  }
}
function hideGraphTooltip(){ /* Hide the tooltip */
  document.removeEventListener('keydown',onKeyDown,/* useCapture == */true);
  stopCloseTimer();
  tooltipObj.style.display = "none";
  tooltipInfo.ixActive = -1;

}
document.body.onunload = hideGraphTooltip
function stopDwellTimer(){
  if(tooltipInfo.idTimer!=0){
    clearTimeout(tooltipInfo.idTimer);
    tooltipInfo.idTimer = 0;
  }
................................................................................
  tooltipInfo.closeTimeout = tx.closeTimeout
  tooltipInfo.hashDigits = tx.hashDigits
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    topObj.style.cursor = (ix<0) ? "" : "pointer"
    /* Keep the already visible tooltip at a constant position, as long as the
    ** mouse is over the same element. */
    if(tooltipObj.style.display != "none"){
      if(ix == tooltipInfo.ixHover) return;
    }
    /* The tooltip is either not visible, or the mouse is over a different
    ** element, so clear the dwell timer, and record the new element id and
    ** mouse position. */
    stopDwellTimer();
    if(ix >= 0){
      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.clientX;
      tooltipInfo.posY = e.clientY;
      stopCloseTimer();
      if(tooltipInfo.dwellTimeout>0){
        tooltipInfo.idTimer = setTimeout(function() {
          tooltipInfo.idTimer = 0;
          stopCloseTimer();
          showGraphTooltip();
        },tooltipInfo.dwellTimeout);
      }
    }else{
      /* The mouse is not over an element with a tooltip */
      tooltipInfo.ixHover = -1;
      resumeCloseTimer();
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if(e.relatedTarget && e.relatedTarget != tooltipObj){
      tooltipInfo.ixHover = -1;
      hideGraphTooltip();
      stopDwellTimer();
      stopCloseTimer();
    }
  };
  function mouseOverNode(e){ /* Invoked by mousemove events over a graph node */
    e.stopPropagation()







    if(tooltipInfo.ixHover==-2) return


    tooltipInfo.ixHover = -2

    tooltipInfo.posX = e.clientX
    tooltipInfo.posY = e.clientY
    tooltipInfo.nodeHover = this
    stopCloseTimer();
    if(tooltipInfo.dwellTimeout>0){
      tooltipInfo.idTimer = setTimeout(function() {
        tooltipInfo.idTimer = 0;
        stopCloseTimer();
        showGraphTooltip();
      },tooltipInfo.dwellTimeout);
    }
  }
  var canvasDiv;
................................................................................
    var br = tx.rowinfo[ix].br
    var dest = tx.baseUrl + "/timeline?r=" + encodeURIComponent(br)
    dest += tx.fileDiff ? "&m&cf=" : "&m&c="
    dest += encodeURIComponent(tx.rowinfo[ix].h)
    return dest
  }
  function clickOnGraph(e){


    tooltipInfo.ixHover = findTxIndex(e);
    tooltipInfo.posX = e.clientX;
    tooltipInfo.posY = e.clientY;
    showGraphTooltip();
  }
  function showGraphTooltip(){
    var html = null
................................................................................
      h = h.slice(0,tooltipInfo.hashDigits); // Assume single-byte characters.
      if( tx.fileDiff ){
        html = "artifact <a id=\"tooltip-link\" href=\""+dest+"\">"+h+"</a>"
      }else{
        html = "check-in <a id=\"tooltip-link\" href=\""+dest+"\">"+h+"</a>"
      }
      tooltipInfo.ixActive = -2;

    }else if( tooltipInfo.ixHover>=0 ){
      ix = tooltipInfo.ixHover
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
      html = "branch <a id=\"tooltip-link\" href=\""+dest+"\">"+hbr+"</a>"
      tooltipInfo.ixActive = ix;

    }
    if( html ){
      /* Setup while hidden, to ensure proper dimensions. */
      var s = getComputedStyle(document.body)
      if( tx.rowinfo[ix].bg.length ){
        tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
      }else{







>







 







>







 







|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<













>
>
>
>
>
>
>
|
>
>
|
>
|
|
<
<
|
|







 







>
>







 







>











>







114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
...
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
...
169
170
171
172
173
174
175
176

























177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203


204
205
206
207
208
209
210
211
212
...
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
...
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
  ixHover: -1,        /* The mouse is over a thick riser arrow for
                      ** tx.rowinfo[ixHover].  Or -2 when the mouse is
                      ** over a graph node.  Or -1 when the mouse is not
                      ** over anything. */
  ixActive: -1,       /* The item shown in the tooltip is tx.rowinfo[ixActive].
                      ** ixActive is -1 if the tooltip is not visible */
  nodeHover: null,    /* Graph node under mouse when ixHover==-2 */
  idNodeActive: 0,    /* Element ID of the graph node with the tooltip. */
  posX: 0, posY: 0    /* The last mouse position. */
};

/* Functions used to control the tooltip popup and its timer */
function onKeyDown(event){  /* Hide the tooltip when ESC key pressed */
  var key = event.which || event.keyCode;
  if( key==27 ){
................................................................................
  }
}
function hideGraphTooltip(){ /* Hide the tooltip */
  document.removeEventListener('keydown',onKeyDown,/* useCapture == */true);
  stopCloseTimer();
  tooltipObj.style.display = "none";
  tooltipInfo.ixActive = -1;
  tooltipInfo.idNodeActive = 0;
}
document.body.onunload = hideGraphTooltip
function stopDwellTimer(){
  if(tooltipInfo.idTimer!=0){
    clearTimeout(tooltipInfo.idTimer);
    tooltipInfo.idTimer = 0;
  }
................................................................................
  tooltipInfo.closeTimeout = tx.closeTimeout
  tooltipInfo.hashDigits = tx.hashDigits
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    topObj.style.cursor = (ix<0) ? "" : "pointer"
    mouseOverGraph(e,ix,null);

























  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if(e.relatedTarget && e.relatedTarget != tooltipObj){
      tooltipInfo.ixHover = -1;
      hideGraphTooltip();
      stopDwellTimer();
      stopCloseTimer();
    }
  };
  function mouseOverNode(e){ /* Invoked by mousemove events over a graph node */
    e.stopPropagation()
    mouseOverGraph(e,-2,this)
  }
  /* Combined mousemove handler for graph nodes and rails. */
  function mouseOverGraph(e,ix,node){
    stopDwellTimer();                 // Mouse movement: reset the dwell timer.
    var ownTooltip =   // Check if the hovered element already has the tooltip.
      (ix!=-2 && ix==tooltipInfo.ixHover && ix==tooltipInfo.ixActive) ||
      (ix==-2 && tooltipInfo.ixHover==-2 && tooltipInfo.idNodeActive==node.id);
    if(ownTooltip) stopCloseTimer();  // ownTooltip: clear the close timer.
    else resumeCloseTimer();          // !ownTooltip: resume the close timer.
    tooltipInfo.ixHover = ix;
    tooltipInfo.nodeHover = node;
    tooltipInfo.posX = e.clientX;
    tooltipInfo.posY = e.clientY;


    if(ix!=-1 && !ownTooltip && tooltipInfo.dwellTimeout>0){  // Go dwell timer.
      tooltipInfo.idTimer = setTimeout(function(){
        tooltipInfo.idTimer = 0;
        stopCloseTimer();
        showGraphTooltip();
      },tooltipInfo.dwellTimeout);
    }
  }
  var canvasDiv;
................................................................................
    var br = tx.rowinfo[ix].br
    var dest = tx.baseUrl + "/timeline?r=" + encodeURIComponent(br)
    dest += tx.fileDiff ? "&m&cf=" : "&m&c="
    dest += encodeURIComponent(tx.rowinfo[ix].h)
    return dest
  }
  function clickOnGraph(e){
    stopCloseTimer();
    stopDwellTimer();
    tooltipInfo.ixHover = findTxIndex(e);
    tooltipInfo.posX = e.clientX;
    tooltipInfo.posY = e.clientY;
    showGraphTooltip();
  }
  function showGraphTooltip(){
    var html = null
................................................................................
      h = h.slice(0,tooltipInfo.hashDigits); // Assume single-byte characters.
      if( tx.fileDiff ){
        html = "artifact <a id=\"tooltip-link\" href=\""+dest+"\">"+h+"</a>"
      }else{
        html = "check-in <a id=\"tooltip-link\" href=\""+dest+"\">"+h+"</a>"
      }
      tooltipInfo.ixActive = -2;
      tooltipInfo.idNodeActive = tooltipInfo.nodeHover.id;
    }else if( tooltipInfo.ixHover>=0 ){
      ix = tooltipInfo.ixHover
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
      html = "branch <a id=\"tooltip-link\" href=\""+dest+"\">"+hbr+"</a>"
      tooltipInfo.ixActive = ix;
      tooltipInfo.idNodeActive = 0;
    }
    if( html ){
      /* Setup while hidden, to ensure proper dimensions. */
      var s = getComputedStyle(document.body)
      if( tx.rowinfo[ix].bg.length ){
        tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
      }else{