Fossil

Check-in [3a8abf49]
Login

Check-in [3a8abf49]

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

Overview
Comment:Improvements to tooltip handling.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 3a8abf492ab21ab4e838377b0228635a677855418076e5e30be9a199d4f28394
User & Date: drh 2019-06-12 09:41:26
Context
2019-06-12
12:11
Avoid attaching a database file that already exists. ... (check-in: 052c5f24 user: drh tags: trunk)
09:41
Improvements to tooltip handling. ... (check-in: 3a8abf49 user: drh tags: trunk)
2019-06-11
06:59
Fix the test whether the currently hovered element is the owner of the tooltip. ... (Closed-Leaf check-in: 49bee969 user: florian tags: tooltip-tweaks)
2019-06-10
01:53
Simplifications to the copybtn.js script. ... (check-in: 5f0479d0 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
128
129
130
131
132
133
134
135
136

137
138
139
140
141
142
143
  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 ){
    event.stopPropagation();
    hideGraphTooltip();
  }
}
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;
  }







>
















>







114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
  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 ){
    event.stopPropagation();
    hideGraphTooltip();
  }
}
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;
  }
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
  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;







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













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







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
  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>=0 && ix==tooltipInfo.ixActive) ||
      (ix==-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;
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
636
637
638
639
640
641
642
643
644
645

646
647
648
649
650
651
652
    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
    var ix = -1
    if( tooltipInfo.ixHover==-2 ){
      ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
      var h = tx.rowinfo[ix].h
      var dest = tx.baseUrl + "/info/" + h
      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{







>
>



















>











>







594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
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
636
637
638
639
640
641
    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
    var ix = -1
    if( tooltipInfo.ixHover==-2 ){
      ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
      var h = tx.rowinfo[ix].h
      var dest = tx.baseUrl + "/info/" + h
      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{

Changes to src/timeline.c.

868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
    @   "omitDescenders": %d(omitDescenders),
    @   "fileDiff": %d(fileDiff),
    @   "scrollToSelect": %d(scrollToSelect),
    @   "nrail": %d(pGraph->mxRail+1),
    @   "baseUrl": "%R",
    @   "dwellTimeout": %d(dwellTimeout),
    @   "closeTimeout": %d(closeTimeout),
    @   "hashDigit": %d(hash_digits(1)),
    @   "bottomRowId": "btm-%d(iTableId)",
    if( pGraph->nRow==0 ){
      @   "rowinfo": null
    }else{
      @   "rowinfo": [
    }








|







868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
    @   "omitDescenders": %d(omitDescenders),
    @   "fileDiff": %d(fileDiff),
    @   "scrollToSelect": %d(scrollToSelect),
    @   "nrail": %d(pGraph->mxRail+1),
    @   "baseUrl": "%R",
    @   "dwellTimeout": %d(dwellTimeout),
    @   "closeTimeout": %d(closeTimeout),
    @   "hashDigits": %d(hash_digits(1)),
    @   "bottomRowId": "btm-%d(iTableId)",
    if( pGraph->nRow==0 ){
      @   "rowinfo": null
    }else{
      @   "rowinfo": [
    }