Fossil

Check-in [2189edcd]
Login

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

Overview
Comment:Simplifications to the javascript for tooltip handling.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: 2189edcd572747a938247973bfcacaa4adb4ab12db4c41fe790a81665eddc54f
User & Date: drh 2019-05-22 11:37:38
Wiki:tooltip-experiments
Context
2019-05-22
14:34
Additional simplification of the tooltip javascript. check-in: c0f8f578 user: drh tags: tooltip-experiments
11:37
Simplifications to the javascript for tooltip handling. check-in: 2189edcd user: drh tags: tooltip-experiments
2019-05-21
19:07
Merge graph layout enhancements from trunk. check-in: 980adfa6 user: drh tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

85
86
87
88
89
90
91

92
93
94
95
96
97
98
99
100
101
102
103
104


105
106
107
108
109

110
111
112
113
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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
  stopCloseTimer();
};
/* Init the close timer if the mouse is no longer over the tooltip. */
tooltipObj.onmouseleave = function(e) {
  if (tooltipInfo.ixActive != -1)
    resumeCloseTimer();
};

/* This object must be in the global scope, so that (non-shadowed) access is
** possible from within a setTimeout() closure. */
window.tooltipInfo = {
  dwellTimeout: 250,  /* The tooltip dwell timeout. */
  closeTimeout: 3000, /* The tooltip close timeout. */
  idTimer: 0,         /* The tooltip dwell timer id. */
  idTimerClose: 0,    /* The tooltip close timer id. */
  ixHover: -1,        /* The id of the element with the mouse. */
  ixActive: -1,       /* The id of the element with the tooltip. */
  posX: 0, posY: 0    /* The last mouse position. */
};
/* These functions must be in the global scope, so that access is possible from
** within (non-local) event handlers. */


var hideGraphTooltip = function() {
  stopCloseTimer();
  tooltipObj.style.display = "none";
  this.tooltipInfo.ixActive = -1;
}.bind(window);

var stopDwellTimer = function() {
  if (this.tooltipInfo.idTimer != 0) {
    clearTimeout(this.tooltipInfo.idTimer);
    this.tooltipInfo.idTimer = 0;
  }
}.bind(window);

var resumeCloseTimer = function() {
  /* This timer must be stopped explicitly to reset the elapsed timeout. */
  if (this.tooltipInfo.idTimerClose == 0 && 
        this.tooltipInfo.closeTimeout>0) {
    this.tooltipInfo.idTimerClose = setTimeout(function() {
      this.tooltipInfo.idTimerClose = 0;
      hideGraphTooltip();
    }.bind(window),this.tooltipInfo.closeTimeout);
  }
}.bind(window);

var stopCloseTimer = function() {
  if (this.tooltipInfo.idTimerClose != 0) {
    clearTimeout(this.tooltipInfo.idTimerClose);
    this.tooltipInfo.idTimerClose = 0;
  }
}.bind(window);


/* Construct that graph corresponding to the timeline-data-N object */
function TimelineGraph(tx){
  var topObj = document.getElementById("timelineTable"+tx.iTableId);
  amendCss(tx.circleNodes, tx.showArrowheads);
  tooltipInfo.dwellTimeout = tx.dwellTimeout
  tooltipInfo.closeTimeout = tx.closeTimeout
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
    document.getElementsByTagName('body')[0].style.cursor = cursor;
    /* Keep the already visible tooltip at a constant position, as long as the
    ** mouse is over the same element. */
    var isReentry = false;  // Detect mouse move back to same element.
    if (tooltipObj.style.display != "none") {
      if (ix == tooltipInfo.ixHover)
        return;
      if (-1 == tooltipInfo.ixHover && ix == tooltipInfo.ixActive)
        isReentry = true;
    }
    /* 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) {
      /* Close the tooltip only if the mouse is over another element, and init
      ** the dwell timer again. */
      if (!isReentry)
        hideGraphTooltip();
      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;
      /* Clear the close timer, if not already cleared by hideGraphTooltip(). */
      stopCloseTimer();
      if (!isReentry && tooltipInfo.dwellTimeout>0) {
        tooltipInfo.idTimer = setTimeout(function() {
          this.tooltipInfo.idTimer = 0;
          /* Clear the timer to hide the tooltip. */
          stopCloseTimer();
          showGraphTooltip(
            this.tooltipInfo.ixHover,
            this.tooltipInfo.posX,
            this.tooltipInfo.posY);
          this.tooltipInfo.ixActive = this.tooltipInfo.ixHover;
        }.bind(window),tooltipInfo.dwellTimeout);
      }
    }
    else {
      tooltipInfo.ixHover = -1;
      /* The mouse is not over an element with a tooltip, init the hide
      ** timer. */
      resumeCloseTimer();
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if (tooltipObj.style.display != "none" &&
          e.relatedTarget &&
          e.relatedTarget != tooltipObj) {
      tooltipInfo.ixHover = -1;
      hideGraphTooltip();
      /* Clear the dwell timer. */
      stopDwellTimer();
      /* Clear the close timer. */
      stopCloseTimer();
    }
  };
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;







>











<
<
>
>
|


|
<
>
|
|
|
|

<
>
|

|
<
|
|

|

<
>
|
|
|
|

<
>











|
<



|
|
<
|
<





|


<
|







|


<
|
|
<
|
|












<
|
<


<

<







85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103


104
105
106
107
108
109

110
111
112
113
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
146
147
148

149

150
151
152
153
154
155
156
157

158
159
160
161
162
163
164
165
166
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
  stopCloseTimer();
};
/* Init the close timer if the mouse is no longer over the tooltip. */
tooltipObj.onmouseleave = function(e) {
  if (tooltipInfo.ixActive != -1)
    resumeCloseTimer();
};

/* This object must be in the global scope, so that (non-shadowed) access is
** possible from within a setTimeout() closure. */
window.tooltipInfo = {
  dwellTimeout: 250,  /* The tooltip dwell timeout. */
  closeTimeout: 3000, /* The tooltip close timeout. */
  idTimer: 0,         /* The tooltip dwell timer id. */
  idTimerClose: 0,    /* The tooltip close timer id. */
  ixHover: -1,        /* The id of the element with the mouse. */
  ixActive: -1,       /* The id of the element with the tooltip. */
  posX: 0, posY: 0    /* The last mouse position. */
};




function hideGraphTooltip(){
  stopCloseTimer();
  tooltipObj.style.display = "none";
  tooltipInfo.ixActive = -1;

}
function stopDwellTimer(){
  if (tooltipInfo.idTimer != 0) {
    clearTimeout(tooltipInfo.idTimer);
    tooltipInfo.idTimer = 0;
  }

}
function resumeCloseTimer(){
  /* This timer must be stopped explicitly to reset the elapsed timeout. */
  if(tooltipInfo.idTimerClose == 0 && tooltipInfo.closeTimeout>0) {

    tooltipInfo.idTimerClose = setTimeout(function(){
      tooltipInfo.idTimerClose = 0;
      hideGraphTooltip();
    },tooltipInfo.closeTimeout);
  }

}
function stopCloseTimer(){
  if (tooltipInfo.idTimerClose != 0) {
    clearTimeout(tooltipInfo.idTimerClose);
    tooltipInfo.idTimerClose = 0;
  }

}

/* Construct that graph corresponding to the timeline-data-N object */
function TimelineGraph(tx){
  var topObj = document.getElementById("timelineTable"+tx.iTableId);
  amendCss(tx.circleNodes, tx.showArrowheads);
  tooltipInfo.dwellTimeout = tx.dwellTimeout
  tooltipInfo.closeTimeout = tx.closeTimeout
  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. */
    var isReentry = false;  // Detect mouse move back to same element.
    if(tooltipObj.style.display != "none"){
      if(ix == tooltipInfo.ixHover) return;

      if(-1==tooltipInfo.ixHover && ix==tooltipInfo.ixActive) isReentry = true;

    }
    /* 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){
      /* Close the tooltip only if the mouse is over another element, and init
      ** the dwell timer again. */

      if(!isReentry) hideGraphTooltip();
      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;
      /* Clear the close timer, if not already cleared by hideGraphTooltip(). */
      stopCloseTimer();
      if (!isReentry && tooltipInfo.dwellTimeout>0) {
        tooltipInfo.idTimer = setTimeout(function() {
          tooltipInfo.idTimer = 0;
          /* Clear the timer to hide the tooltip. */
          stopCloseTimer();

          showGraphTooltip(tooltipInfo.ixHover,
                           tooltipInfo.posX,tooltipInfo.posY);

          tooltipInfo.ixActive = tooltipInfo.ixHover;
        },tooltipInfo.dwellTimeout);
      }
    }
    else {
      tooltipInfo.ixHover = -1;
      /* The mouse is not over an element with a tooltip, init the hide
      ** timer. */
      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();
    }
  };
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;