8000 put modebar configuration into seperate modebar_config file: · siqitech/plotly.js@f247698 · GitHub
[go: up one dir, main page]
Skip to content

Commit f247698

Browse files
etpinardetpinard
committed
put modebar configuration into seperate modebar_config file:
- 'click' keys are now linked to strings corresponding to the name of the Modebar prototype method instead of being linked to the prototype methods themselves. - 'val' can be a function of graphInfo (e.g. for 'hoverCompare2d')
1 parent 734f75f commit f247698

File tree

2 files changed

+223
-185
lines changed

2 files changed

+223
-185
lines changed

‎src/components/modebar/index.js

Lines changed: 14 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
var Plotly = require('../../plotly');
1313
var d3 = require('d3');
1414

15+
var modebarConfig = require('./modebar_config');
1516
/**
1617
* UI controller for interactive plots
1718
* @Class
@@ -44,7 +45,7 @@ function ModeBar (config) {
4445
var group = _this.createGroup();
4546

4647
buttonGroup.forEach( function (buttonName) {
47-
var buttonConfig = _this.config()[buttonName];
48+
var buttonConfig = modebarConfig[buttonName];
4849

4950
if (!buttonConfig) {
5051
throw new Error(buttonName + ' not specfied in modebar configuration');
@@ -83,11 +84,7 @@ proto.createGroup = function () {
8384

8485
/**
8586
* Create a new button div and set constant and configurable attributes
86-
* @Param {object} config
87-
* @Param {string} config.attr
88-
* @Param {string} config.val
89-
* @Param {string} config.title
90-
* @Param {function} config.click
87+
* @Param {object} config (see ./modebar_config,js for more info)
9188
* @Return {HTMLelement}
9289
*/
9390
proto.createButton = function (config) {
@@ -97,13 +94,20 @@ proto.createButton = function (config) {
9794
button.setAttribute('rel', 'tooltip');
9895
button.className = 'modebar-btn';
9996

100-
if (config.attr !== undefined) button.setAttribute('data-attr', config.attr);
101-
if (config.val !== undefined) button.setAttribute('data-val', config.val);
10297
button.setAttribute('data-title', config.title);
10398
button.setAttribute('data-gravity', config.gravity || 'n');
99+
100+
if(config.attr !== undefined) button.setAttribute('data-attr', config.attr);
101+
102+
var val = config.val;
103+
if(val !== undefined) {
104+
if(typeof val === 'function') val = val(this.graphInfo);
105+
button.setAttribute('data-val', val);
106+
}
107+
104108
button.addEventListener('click', function () {
105-
config.click.apply(_this, arguments);
106-
});
109+
_this[config.click].apply(_this, arguments);
110+
});
107111

108112
button.setAttribute('data-toggle', config.toggle);
109113
if(config.toggle) button.classList.add('active');
@@ -492,181 +496,6 @@ proto.sendDataToCloud = function() {
492496
Plotly.Plots.sendDataToCloud(gd)
493497
};
494498

495-
/**
496-
*
497-
* @Property config specification hash of button parameters
498-
*/
499-
proto.config = function config() {
500-
return {
501-
zoom2d: {
502-
title: 'Zoom',
503-
attr: 'dragmode',
504-
val: 'zoom',
505-
icon: 'zoombox',
506-
click: this.handleCartesian
507-
},
508-
pan2d: {
509-
title: 'Pan',
510-
attr: 'dragmode',
511-
val: 'pan',
512-
icon: 'pan',
513-
click: this.handleCartesian
514-
},
515-
zoomIn2d: {
516-
title: 'Zoom in',
517-
attr: 'zoom',
518-
val: 'in',
519-
icon: 'zoom_plus',
520-
click: this.handleCartesian
521-
},
522-
zoomOut2d: {
523-
title: 'Zoom out',
524-
attr: 'zoom',
525-
val: 'out',
526-
icon: 'zoom_minus',
527-
click: this.handleCartesian
528-
},
529-
autoScale2d: {
530-
title: 'Autoscale',
531-
attr: 'zoom',
532-
val: 'auto',
533-
icon: 'autoscale',
534-
click: this.handleCartesian
535-
},
536-
resetScale2d: {
537-
title: 'Reset axes',
538-
attr: 'zoom',
539-
val: 'reset',
540-
icon: 'home',
541-
click: this.handleCartesian
542-
},
543-
hoverClosest2d: {
544-
title: 'Show closest data on hover',
545-
attr: 'hovermode',
546-
val: 'closest',
547-
icon: 'tooltip_basic',
548-
gravity: 'ne',
549-
click: this.handleCartesian
550-
},
551-
hoverCompare2d: {
552-
title: 'Compare data on hover',
553-
attr: 'hovermode',
554-
val: this.graphInfo._fullLayout._isHoriz ? 'y' : 'x',
555-
icon: 'tooltip_compare',
556-
gravity: 'ne',
557-
click: this.handleCartesian
558-
},
559-
toImage: {
560-
title: 'download plot as a png',
561-
icon: 'camera',
562-
click: this.toImage
563-
},
564-
sendDataToCloud: {
565-
title: 'save and edit plot in cloud',
566-
icon: 'disk',
567-
click: this.sendDataToCloud
568-
},
569-
// gl3d
570-
zoom3d: {
571-
title: 'Zoom',
572-
attr: 'dragmode',
573-
val: 'zoom',
574-
icon: 'zoombox',
575-
click: this.handleDrag3d
576-
},
577-
pan3d: {
578-
title: 'Pan',
579-
attr: 'dragmode',
580-
val: 'pan',
581-
icon: 'pan',
582-
click: this.handleDrag3d
583-
},
584-
orbitRotation: {
585-
title: 'orbital rotation',
586-
attr: 'dragmode',
587-
val: 'orbit',
588-
icon: '3d_rotate',
589-
click: this.handleDrag3d
590-
},
591-
tableRotation: {
592-
title: 'turntable rotation',
593-
attr: 'dragmode',
594-
val: 'turntable',
595-
icon: 'z-axis',
596-
click: this.handleDrag3d
597-
},
598-
resetCameraDefault3d: {
599-
title: 'Reset camera to default',
600-
attr: 'resetDefault',
601-
icon: 'home',
602-
click: this.handleCamera3d
603-
},
604-
resetCameraLastSave3d: {
605-
title: 'Reset camera to last save',
606-
attr: 'resetLastSave',
607-
icon: 'movie',
608-
click: this.handleCamera3d
609-
},
610-
hoverClosest3d: {
611-
title: 'Toggle show closest data on hover',
612-
attr: 'hovermode',
613-
val: null,
614-
toggle: true,
615-
icon: 'tooltip_basic',
616-
gravity: 'ne',
617-
click: this.handleHover3d
618-
},
619-
// geo
620-
zoomInGeo: {
621-
title: 'Zoom in',
622-
attr: 'zoom',
623-
val: 'in',
624-
icon: 'zoom_plus',
625-
click: this.handleGeo
626-
},
627-
zoomOutGeo: {
628-
title: 'Zoom out',
629-
attr: 'zoom',
630-
val: 'out',
631-
icon: 'zoom_minus',
632-
click: this.handleGeo
633-
},
634-
resetGeo: {
635-
title: 'Reset',
636-
attr: 'reset',
637-
val: null,
638-
icon: 'autoscale',
639-
click: this.handleGeo
640-
},
641-
hoverClosestGeo: {
642-
title: 'Toggle show closest data on hover',
643-
attr: 'hovermode',
644-
val: null,
645-
toggle: true,
646-
icon: 'tooltip_basic',
647-
gravity: 'ne',
648-
click: this.handleGeo
649-
},
650-
// pie
651-
hoverClosestPie: {
652-
title: 'Toggle show closest data on hover',
653-
attr: 'hovermode',
654-
val: 'closest',
655-
icon: 'tooltip_basic',
656-
gravity: 'ne',
657-
click: this.handleHoverPie
658-
},
659-
// gl2d
660-
hoverClosestGl2d: {
661-
title: 'Toggle show closest data on hover',
662-
attr: 'hovermode',
663-
val: null,
664-
toggle: true,
665-
icon: 'tooltip_basic',
666-
gravity: 'ne',
667-
click: this.handleHoverGl2d
668-
}
669-
};
670499
};
671500

672501
module.exports = ModeBar;

0 commit comments

Comments
 (0)
0