Merge pull request #3850 from plotly/local-gd-for-toolpanel

alexander-daniel · alexander-daniel · commit 95cd7ac29634 · 2015-09-16T16:12:41.000-04:00
Local `gd` for toolpanel
diff --git a/shelly/plotlyjs/static/plotlyjs/src/graph_obj.js b/shelly/plotlyjs/static/plotlyjs/src/graph_obj.js
@@ -194,7 +194,11 @@ plots.getSubplotData = function getSubplotData(data, type, subplotId) {
 
 // new workspace tab. Perhaps this goes elsewhere, a workspace-only file???
 plots.newTab = function(divid, layout) {
-    Plotly.ToolPanel.makeMenu(document.getElementById(divid));
+    var gd = document.getElementById(divid);
+    var toolPanel = new Plotly.ToolPanel(Plotly, gd);
+
+    toolPanel.makeMenu();
+
     var config = {
         workspace: true,
         editable: true,
@@ -524,7 +528,7 @@ Plotly.plot = function(gd, data, layout, config) {
     // Polar plots
     if(data && data[0] && data[0].r) return plotPolar(gd, data, layout);
 
-    if(gd._context.editable) Plotly.ToolPanel.tweakMenu(gd);
+    if(gd._context.editable) gd.toolPanel.tweakMenu();
 
     // so we don't try to re-call Plotly.plot from inside
     // legend and colorbar, if margins changed
@@ -938,7 +942,7 @@ function plotPolar(gd, data, layout) {
         };
         title.call(setContenteditable);
 
-        Plotly.ToolPanel.tweakMenu(gd);
+        gd.toolPanel.tweakMenu();
     }
 
     gd._context.setBackground(gd, gd._fullLayout.paper_bgcolor);
diff --git a/test-dashboard/toolpanel-dashboard/index.html b/test-dashboard/toolpanel-dashboard/index.html
@@ -6,16 +6,19 @@
     <link type="text/css" rel="stylesheet" href="./../../shelly/shelly/static/css/jquery-ui.css"/>
     <link type="text/css" rel="stylesheet" href="./../../shelly/shelly/static/css/spectrum.css"/>
     <link type="text/css" rel="stylesheet" href="./../../shelly/shelly/static/css/bootstrap-select.min.css" />
+    <link type="text/css" rel="stylesheet" href="./../../shelly/shelly/static/css/tipsy.css" />
 
     <!-- ToolPanel Required Plotly CSS -->
-    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <link rel="stylesheet" type="text/css" href="workspace-style.css"/>
     <link rel="stylesheet" type="text/css" href="./../../shelly/shelly/static/css/plotly.css"/>
     <link rel="stylesheet" type="text/css" href="./../../shelly/shelly/static/plotlycss/fonts/unified/icons.css" />
 
 </head>
 
 <body>
 
+    <div id="main"></div>
+
     <!-- Dashboard Mock Stuff -->
     <script type"text/javascript" src="mocks.js"></script>
 
@@ -26,6 +29,7 @@
 
     <!-- ToolPanel Required Plugins' JS -->
     <script type="text/javascript" src="./../../shelly/shelly/static/js/plugins/jquery-ui-1.8.23.custom.min.js"></script>
+    <script type="text/javascript" src="./../../shelly/shelly/static/js/plugins/jquery.tipsy.js"></script>
     <script type="text/javascript" src="./../../shelly/shelly/static/js/plugins/spectrum.js"></script>
     <script type="text/javascript" src="./../../shelly/shelly/static/js/plugins/bootstrap.min.js"></script>
     <script type="text/javascript" src="./../../shelly/shelly/static/js/plugins/bootstrap-select.min.js"></script>
diff --git a/test-dashboard/toolpanel-dashboard/mocks.js b/test-dashboard/toolpanel-dashboard/mocks.js
@@ -2,7 +2,7 @@
 
 var Tabs = {
     get: function() {
-        return document.getElementById('yo').children[0];
+        return document.getElementById('main').children[0];
     },
     fresh: function() {
         var anchor = document.getElementById('embedded-graph'),
diff --git a/test-dashboard/toolpanel-dashboard/ui.js b/test-dashboard/toolpanel-dashboard/ui.js
@@ -1,12 +1,18 @@
 'use strict';
 
-Plotly = window.Plotly;
-
-(function createPlot (divId) {
+var Plotly = window.Plotly;
+var ToolPanel = window.ToolPanel;
+var divs = [];
 
+function createPlot (divId) {
+    var containerDiv = document.getElementById('main');
     var graphDiv = document.createElement('div');
     graphDiv.id = divId;
-    document.body.appendChild(graphDiv);
+    graphDiv.style.width = '45%';
+    graphDiv.style.display = 'inline-block';
+    graphDiv.style.margin = '10px';
+    graphDiv.style.position = 'relative';
+    containerDiv.appendChild(graphDiv);
 
     var trace1 = {
         x: [1, 2, 3, 4],
@@ -24,7 +30,15 @@ Plotly = window.Plotly;
 
     Plotly.newPlot(divId, data);
 
-    var toolPanel = new ToolPanel({Plotly: Plotly});
-    toolPanel.makeMenu(graphDiv);
+    graphDiv.toolPanel = new ToolPanel(Plotly, graphDiv, {
+        standalone: true
+    });
+    graphDiv.toolPanel.makeMenu(graphDiv);
+
+    divs.push(graphDiv);
+
+}
 
-})('yo');
+['one', 'two'].forEach(function (index) {
+    createPlot(index);
+});
