Skip to content

Commit 762b54a

Browse files
rpaskowitzrpaskowitz
committed
Move dashStyle to Drawing
Make single attr calls Add crisp style Fix edge case when leaving and returning to closest hovermode
1 parent 162068e commit 762b54a

File tree

4 files changed

+96
-78
lines changed

4 files changed

+96
-78
lines changed

‎src/components/drawing/index.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,14 +114,33 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
114114
drawing.dashLine = function(s, dash, lineWidth) {
115115
lineWidth = +lineWidth || 0;
116116

117-
dash = Lib.dash(dash, lineWidth);
117+
dash = drawing.dashStyle(dash, lineWidth);
118118

119119
s.style({
120120
'stroke-dasharray': dash,
121121
'stroke-width': lineWidth + 'px'
122122
});
123123
};
124124

125+
drawing.dashStyle = function(dash, lineWidth) {
126+
lineWidth = +lineWidth || 1;
127+
var dlw = Math.max(lineWidth, 3);
128+
129+
if(dash === 'solid') dash = '';
130+
else if(dash === 'dot') dash = dlw + 'px,' + dlw + 'px';
131+
else if(dash === 'dash') dash = (3 * dlw) + 'px,' + (3 * dlw) + 'px';
132+
else if(dash === 'longdash') dash = (5 * dlw) + 'px,' + (5 * dlw) + 'px';
133+
else if(dash === 'dashdot') {
134+
dash = (3 * dlw) + 'px,' + dlw + 'px,' + dlw + 'px,' + dlw + 'px';
135+
}
136+
else if(dash === 'longdashdot') {
137+
dash = (5 * dlw) + 'px,' + (2 * dlw) + 'px,' + dlw + 'px,' + (2 * dlw) + 'px';
138+
}
139+
// otherwise user wrote the dasharray themselves - leave it be
140+
141+
return dash;
142+
};
143+
125144
drawing.fillGroupStyle = function(s) {
126145
s.style('stroke-width', 0)
127146
.each(function(d) {

‎src/components/modebar/buttons.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -177,18 +177,20 @@ function handleCartesian(gd, ev) {
177177
astr = button.getAttribute('data-attr'),
178178
val = button.getAttribute('data-val') || true,
179179
fullLayout = gd._fullLayout,
180-
aobj = {};
180+
aobj = {},
181+
axList = Axes.list(gd, null, true),
182+
ax,
183+
allEnabled = 'on',
184+
i;
181185

182186
if(astr === 'zoom') {
183187
var mag = (val === 'in') ? 0.5 : 2,
184188
r0 = (1 + mag) / 2,
185-
r1 = (1 - mag) / 2,
186-
axList = Axes.list(gd, null, true),
187-
allEnabled = 'on';
189+
r1 = (1 - mag) / 2;
188190

189-
var ax, axName;
191+
var axName;
190192

191-
for(var i = 0; i < axList.length; i++) {
193+
for(i = 0; i < axList.length; i++) {
192194
ax = axList[i];
193195

194196
if(!ax.fixedrange) {
@@ -235,8 +237,15 @@ function handleCartesian(gd, ev) {
235237
button.setAttribute('data-val', val);
236238
if(val !== 'closest') {
237239
fullLayout._cartesianSpikesEnabled = 'off';
238-
aobj = setSpikelineVisibility(gd);
239240
}
241+
} else if(astr === 'hovermode' && val === 'closest') {
242+
for(i = 0; i < axList.length; i++) {
243+
ax = axList[i];
244+
if(allEnabled === 'on' && !ax.showspike) {
245+
allEnabled = 'off';
246+
}
247+
}
248+
fullLayout._cartesianSpikesEnabled = allEnabled;
240249
}
241250

242251
aobj[astr] = val;

‎src/lib/index.js‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -636,31 +636,3 @@ lib.numSeparate = function(value, separators, separatethousands) {
636636

637637
return x1 + x2;
638638
};
639-
640-
/**
641-
* Accepts a named dash style or stroke-dasharray string
642-
* and returns a dasharray representing the named type.
643-
*
644-
* @param {string} dash named dash format, or dasharray
645-
* @param {number} lineWidth width of the line, used to scale the dashes
646-
*
647-
* @returns {string} SVG stroke-dasharray formatted string
648-
*/
649-
lib.dash = function(dash, lineWidth) {
650-
lineWidth = +lineWidth || 1;
651-
var dlw = Math.max(lineWidth, 3);
652-
653-
if(dash === 'solid') dash = '';
654-
else if(dash === 'dot') dash = dlw + 'px,' + dlw + 'px';
655-
else if(dash === 'dash') dash = (3 * dlw) + 'px,' + (3 * dlw) + 'px';
656-
else if(dash === 'longdash') dash = (5 * dlw) + 'px,' + (5 * dlw) + 'px';
657-
else if(dash === 'dashdot') {
658-
dash = (3 * dlw) + 'px,' + dlw + 'px,' + dlw + 'px,' + dlw + 'px';
659-
}
660-
else if(dash === 'longdashdot') {
661-
dash = (5 * dlw) + 'px,' + (2 * dlw) + 'px,' + dlw + 'px,' + (2 * dlw) + 'px';
662-
}
663-
// otherwise user wrote the dasharray themselves - leave it be
664-
665-
return dash;
666-
};

‎src/plots/cartesian/graph_interact.js‎

Lines changed: 60 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -868,8 +868,8 @@ function createDroplines(hoverData, opts) {
868868
'#000' : Color.background,
869869
xThickness = c0.xa.spikethickness,
870870
yThickness = c0.ya.spikethickness,
871-
xDash = Lib.dash(c0.xa.spikedash, xThickness),
872-
yDash = Lib.dash(c0.xa.spikedash, yThickness),
871+
xDash = Drawing.dashStyle(c0.xa.spikedash, xThickness),
872+
yDash = Drawing.dashStyle(c0.xa.spikedash, yThickness),
873873
xMarker = c0.xa.spikemode.indexOf('marker') !== -1,
874874
yMarker = c0.ya.spikemode.indexOf('marker') !== -1,
875875
xSpikeLine = c0.xa.spikemode.indexOf('toaxis') !== -1 || c0.xa.spikemode.indexOf('across') !== -1,
@@ -886,68 +886,86 @@ function createDroplines(hoverData, opts) {
886886
if(ySpikeLine) {
887887
// Background horizontal Line (to y-axis)
888888
container.append('line')
889-
.attr('x1', xBase)
890-
.attr('x2', xEndSpike)
891-
.attr('y1', yPoint)
892-
.attr('y2', yPoint)
893-
.attr('stroke-width', yThickness + 2)
894-
.attr('stroke', yContrastColor)
895-
.attr('class', 'dropline');
889+
.attr({
890+
'x1': xBase,
891+
'x2': xEndSpike,
892+
'y1': yPoint,
893+
'y2': yPoint,
894+
'stroke-width': yThickness + 2,
895+
'stroke': yContrastColor
896+
})
897+
.classed('dropline', true)
898+
.classed('crisp', true);
896899

897900
// Foreground horizontal line (to y-axis)
898901
container.append('line')
899-
.attr('x1', xBase)
900-
.attr('x2', xEndSpike)
901-
.attr('y1', yPoint)
902-
.attr('y2', yPoint)
903-
.attr('stroke-width', yThickness)
904-
.attr('stroke', yColor)
905-
.attr('stroke-dasharray', yDash)
906-
.attr('class', 'dropline');
902+
.attr({
903+
'x1': xBase,
904+
'x2': xEndSpike,
905+
'y1': yPoint,
906+
'y2': yPoint,
907+
'stroke-width': yThickness,
908+
'stroke': yColor,
909+
'stroke-dasharray': yDash
910+
})
911+
.classed('dropline', true)
912+
.classed('crisp', true);
907913
}
908914
// Y axis marker
909915
if(yMarker) {
910916
container.append('circle')
911-
.attr('cx', xAnchoredBase)
912-
.attr('cy', yPoint)
913-
.attr('r', yThickness)
914-
.attr('fill', yColor)
915-
.attr('class', 'dropline');
917+
.attr({
918+
'cx': xAnchoredBase,
919+
'cy': yPoint,
920+
'r': yThickness,
921+
'fill': yColor
922+
})
923+
.classed('dropline', true)
924+
.classed('crisp', true);
916925
}
917926
}
918927

919928
if(c0.xa.showspike) {
920929
if(xSpikeLine) {
921930
// Background vertical line (to x-axis)
922931
container.append('line')
923-
.attr('x1', xPoint)
924-
.attr('x2', xPoint)
925-
.attr('y1', yEndSpike)
926-
.attr('y2', yBase)
927-
.attr('stroke-width', xThickness + 2)
928-
.attr('stroke', xContrastColor)
929-
.attr('class', 'dropline');
932+
.attr({
933+
'x1': xPoint,
934+
'x2': xPoint,
935+
'y1': yEndSpike,
936+
'y2': yBase,
937+
'stroke-width': xThickness + 2,
938+
'stroke': xContrastColor
939+
})
940+
.classed('dropline', true)
941+
.classed('crisp', true);
930942

931943
// Foreground vertical line (to x-axis)
932944
container.append('line')
933-
.attr('x1', xPoint)
934-
.attr('x2', xPoint)
935-
.attr('y1', yEndSpike)
936-
.attr('y2', yBase)
937-
.attr('stroke-width', xThickness)
938-
.attr('stroke', xColor)
939-
.attr('stroke-dasharray', xDash)
940-
.attr('class', 'dropline');
945+
.attr({
946+
'x1': xPoint,
947+
'x2': xPoint,
948+
'y1': yEndSpike,
949+
'y2': yBase,
950+
'stroke-width': xThickness,
951+
'stroke': xColor,
952+
'stroke-dasharray': xDash
953+
})
954+
.classed('dropline', true)
955+
.classed('crisp', true);
941956
}
942957

943958
// X axis marker
944959
if(xMarker) {
945960
container.append('circle')
946-
.attr('cx', xPoint)
947-
.attr('cy', yAnchoredBase)
948-
.attr('r', xThickness)
949-
.attr('fill', xColor)
950-
.attr('class', 'dropline');
961+
.attr({
962+
'cx': xPoint,
963+
'cy': yAnchoredBase,
964+
'r': xThickness,
965+
'fill': xColor
966+
})
967+
.classed('dropline', true)
968+
.classed('crisp', true);
951969
}
952970
}
953971
}

0 commit comments

Comments
 (0)