Skip to content

Commit 10a2fa9

Browse files
etpinardetpinard
committed
add selected.marker.size support
1 parent 67cefad commit 10a2fa9

File tree

7 files changed

+118
-35
lines changed

7 files changed

+118
-35
lines changed

‎src/components/drawing/index.js

+79-32
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,11 @@ drawing.symbolNumber = function(v) {
248248
return Math.floor(Math.max(v, 0));
249249
};
250250

251+
function makePointPath(symbolNumber, r) {
252+
var base = symbolNumber % 100;
253+
return drawing.symbolFuncs[base](r) + (symbolNumber >= 200 ? DOTPATH : '');
254+
}
255+
251256
function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine, gd) {
252257
if(Registry.traceIs(trace, 'symbols')) {
253258
var sizeFn = makeBubbleSizeFn(trace);
@@ -256,8 +261,9 @@ function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerL
256261
var r;
257262

258263
// handle multi-trace graph edit case
259-
if(d.ms === 'various' || marker.size === 'various') r = 3;
260-
else {
264+
if(d.ms === 'various' || marker.size === 'various') {
265+
r = 3;
266+
} else {
261267
r = subTypes.isBubble(trace) ?
262268
sizeFn(d.ms) : (marker.size || 6) / 2;
263269
}
@@ -266,15 +272,13 @@ function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerL
266272
d.mrc = r;
267273

268274
// turn the symbol into a sanitized number
269-
var x = drawing.symbolNumber(d.mx || marker.symbol) || 0,
270-
xBase = x % 100;
275+
var x = drawing.symbolNumber(d.mx || marker.symbol) || 0;
271276

272277
// save if this marker is open
273278
// because that impacts how to handle colors
274279
d.om = x % 200 >= 100;
275280

276-
return drawing.symbolFuncs[xBase](r) +
277-
(x >= 200 ? DOTPATH : '');
281+
return makePointPath(x, r);
278282
});
279283
}
280284

@@ -443,14 +447,42 @@ drawing.selectedPointStyle = function(s, trace) {
443447

444448
s.each(function(d) {
445449
var pt = d3.select(this);
446-
var smc = (selectedAttrs.marker || {}).color;
447-
var usmc = (unselectedAttrs.marker || {}).color;
450+
var marker = trace.marker || {};
451+
var selectedMarker = selectedAttrs.marker || {};
452+
var unselectedMarker = unselectedAttrs.marker || {};
453+
454+
var smc = selectedMarker.color;
455+
var usmc = unselectedMarker.color;
448456

449457
if(d.selected) {
450458
if(smc) Color.fill(pt, smc);
451459
} else {
452460
if(usmc) Color.fill(pt, usmc);
453461
}
462+
463+
if(Registry.traceIs(trace, 'symbols')) {
464+
var sms = selectedMarker.size;
465+
var smx = selectedMarker.symbol;
466+
var usms = unselectedMarker.size;
467+
var usmx = unselectedMarker.symbol;
468+
var mrc = d.mrc;
469+
var mx = d.mx || marker.symbol || 0;
470+
var mrc2;
471+
var mx2;
472+
473+
if(d.selected) {
474+
mrc2 = (sms + 1) ? sms / 2 : mrc;
475+
mx2 = smx || mx;
476+
} else {
477+
mrc2 = (usms + 1) ? usms / 2 : mrc;
478+
mx2 = usmx || mx;
479+
}
480+
481+
// save for selectedTextStyle
482+
d.mrc2 = mrc2;
483+
484+
pt.attr('d', makePointPath(drawing.symbolNumber(mx2), mrc2));
485+
}
454486
});
455487
};
456488

@@ -467,8 +499,39 @@ drawing.tryColorscale = function(marker, prefix) {
467499
else return Lib.identity;
468500
};
469501

470-
// draw text at points
471502
var TEXTOFFSETSIGN = {start: 1, end: -1, middle: 0, bottom: 1, top: -1};
503+
504+
function textPointPosition(s, textPosition, fontSize, markerRadius) {
505+
var group = d3.select(s.node().parentNode);
506+
507+
var v = textPosition.indexOf('top') !== -1 ?
508+
'top' :
509+
textPosition.indexOf('bottom') !== -1 ? 'bottom' : 'middle';
510+
var h = textPosition.indexOf('left') !== -1 ?
511+
'end' :
512+
textPosition.indexOf('right') !== -1 ? 'start' : 'middle';
513+
514+
// if markers are shown, offset a little more than
515+
// the nominal marker size
516+
// ie 2/1.6 * nominal, bcs some markers are a bit bigger
517+
var r = markerRadius ? markerRadius / 0.8 + 1 : 0;
518+
519+
var numLines = (svgTextUtils.lineCount(s) - 1) * LINE_SPACING + 1;
520+
var dx = TEXTOFFSETSIGN[h] * r;
521+
var dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r +
522+
(TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;
523+
524+
// fix the overall text group position
525+
s.attr('text-anchor', h);
526+
group.attr('transform', 'translate(' + dx + ',' + dy + ')');
527+
}
528+
529+
function extracTextFontSize(d, trace) {
530+
var fontSize = d.ts || trace.textfont.size;
531+
return (isNumeric(fontSize) && fontSize > 0) ? fontSize : 0;
532+
}
533+
534+
// draw text at points
472535
drawing.textPointStyle = function(s, trace, gd) {
473536
s.each(function(d) {
474537
var p = d3.select(this);
@@ -479,35 +542,16 @@ drawing.textPointStyle = function(s, trace, gd) {
479542
return;
480543
}
481544

482-
var pos = d.tp || trace.textposition,
483-
v = pos.indexOf('top') !== -1 ? 'top' :
484-
pos.indexOf('bottom') !== -1 ? 'bottom' : 'middle',
485-
h = pos.indexOf('left') !== -1 ? 'end' :
486-
pos.indexOf('right') !== -1 ? 'start' : 'middle',
487-
fontSize = d.ts || trace.textfont.size,
488-
// if markers are shown, offset a little more than
489-
// the nominal marker size
490-
// ie 2/1.6 * nominal, bcs some markers are a bit bigger
491-
r = d.mrc ? (d.mrc / 0.8 + 1) : 0;
492-
493-
fontSize = (isNumeric(fontSize) && fontSize > 0) ? fontSize : 0;
545+
var pos = d.tp || trace.textposition;
546+
var fontSize = extracTextFontSize(d, trace);
494547

495548
p.call(drawing.font,
496549
d.tf || trace.textfont.family,
497550
fontSize,
498551
d.tc || trace.textfont.color)
499-
.attr('text-anchor', h)
500552
.text(text)
501-
.call(svgTextUtils.convertToTspans, gd);
502-
503-
var pgroup = d3.select(this.parentNode);
504-
var numLines = (svgTextUtils.lineCount(p) - 1) * LINE_SPACING + 1;
505-
var dx = TEXTOFFSETSIGN[h] * r;
506-
var dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r +
507-
(TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;
508-
509-
// fix the overall text group position
510-
pgroup.attr('transform', 'translate(' + dx + ',' + dy + ')');
553+
.call(svgTextUtils.convertToTspans, gd)
554+
.call(textPointPosition, pos, fontSize, d.mrc);
511555
});
512556
};
513557

@@ -520,6 +564,8 @@ drawing.selectedTextStyle = function(s, trace) {
520564
s.each(function(d) {
521565
var tx = d3.select(this);
522566
var tc = d.tc || trace.textfont.color;
567+
var tp = d.tp || trace.textposition;
568+
var fontSize = extracTextFontSize(d, trace);
523569
var stc = (selectedAttrs.textfont || {}).color;
524570
var utc = (unselectedAttrs.textfont || {}).color;
525571
var tc2;
@@ -533,6 +579,7 @@ drawing.selectedTextStyle = function(s, trace) {
533579
}
534580

535581
Color.fill(tx, tc2);
582+
textPointPosition(tx, tp, fontSize, d.mrc2 || d.mrc);
536583
});
537584
};
538585

‎src/traces/bar/attributes.js

+18-2
Original file line numberDiff line numberDiff line change
@@ -159,8 +159,24 @@ module.exports = {
159159

160160
marker: marker,
161161

162-
selected: scatterAttrs.selected,
163-
unselected: scatterAttrs.unselected,
162+
selected: {
163+
marker: {
164+
opacity: scatterAttrs.selected.marker.opacity,
165+
color: scatterAttrs.selected.marker.color,
166+
editType: 'style'
167+
},
168+
textfont: scatterAttrs.selected.textfont,
169+
editType: 'style'
170+
},
171+
unselected: {
172+
marker: {
173+
opacity: scatterAttrs.unselected.marker.opacity,
174+
color: scatterAttrs.unselected.marker.color,
175+
editType: 'style'
176+
},
177+
textfont: scatterAttrs.unselected.textfont,
178+
editType: 'style'
179+
},
164180

165181
r: scatterAttrs.r,
166182
t: scatterAttrs.t,

‎src/traces/box/defaults.js

+2
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ function handlePointsDefaults(traceIn, traceOut, coerce, opts) {
8787
coerce('unselected.marker.opacity', DESELECTDIM * mo);
8888
coerce('selected.marker.color');
8989
coerce('unselected.marker.color');
90+
coerce('selected.marker.size');
91+
coerce('unselected.marker.size');
9092

9193
coerce('text');
9294
} else {

‎src/traces/scatter/attributes.js

+14
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,13 @@ module.exports = {
393393
editType: 'style',
394394
description: 'Sets the marker color of selected points.'
395395
},
396+
size: {
397+
valType: 'number',
398+
min: 0,
399+
role: 'style',
400+
editType: 'style',
401+
description: 'Sets the marker size of selected points.'
402+
},
396403
editType: 'style'
397404
},
398405
textfont: {
@@ -422,6 +429,13 @@ module.exports = {
422429
editType: 'style',
423430
description: 'Sets the marker color of unselected points, applied only when a selection exists.'
424431
},
432+
size: {
433+
valType: 'number',
434+
min: 0,
435+
role: 'style',
436+
editType: 'style',
437+
description: 'Sets the marker size of unselected points, applied only when a selection exists.'
438+
},
425439
editType: 'style'
426440
},
427441
textfont: {

‎src/traces/scatter/marker_defaults.js

+3
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout
4848

4949
coerce('selected.marker.color');
5050
coerce('unselected.marker.color');
51+
52+
coerce('selected.marker.size');
53+
coerce('unselected.marker.size');
5154
}
5255

5356
if(!opts.noLine) {

‎test/image/baselines/point-selection.png

217 Bytes
Loading

‎test/image/mocks/point-selection.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"selectedpoints": [1, 2, 3],
1414
"selected": {
1515
"marker": {
16-
"color": "blue"
16+
"color": "blue",
17+
"size": 20
1718
}
1819
},
1920
"unselected": {

0 commit comments

Comments
 (0)