* Generate an integrated toolbar which is shown on mouse over * for this figure. *
()
| 1454 | * |
| 1455 | */ |
| 1456 | create_toolbar(): d3.Selection<HTMLDivElement, any, any, any> { |
| 1457 | const toolbar = d3 |
| 1458 | .select(document.createElement('div')) |
| 1459 | .attr('class', 'toolbar_div'); |
| 1460 | |
| 1461 | const panzoom = document.createElement('button'); |
| 1462 | panzoom.classList.add('jupyter-widgets'); // @jupyter-widgets/controls css |
| 1463 | panzoom.classList.add('jupyter-button'); // @jupyter-widgets/controls css |
| 1464 | panzoom.setAttribute('data-toggle', 'tooltip'); |
| 1465 | panzoom.setAttribute('title', 'PanZoom'); |
| 1466 | const panzoomicon = document.createElement('i'); |
| 1467 | panzoomicon.style.marginRight = '0px'; |
| 1468 | panzoomicon.className = 'fa fa-arrows'; |
| 1469 | panzoom.appendChild(panzoomicon); |
| 1470 | panzoom.onclick = (e) => { |
| 1471 | e.preventDefault(); |
| 1472 | (this.model as FigureModel).panzoom(); |
| 1473 | }; |
| 1474 | |
| 1475 | const reset = document.createElement('button'); |
| 1476 | reset.classList.add('jupyter-widgets'); // @jupyter-widgets/controls css |
| 1477 | reset.classList.add('jupyter-button'); // @jupyter-widgets/controls css |
| 1478 | reset.setAttribute('data-toggle', 'tooltip'); |
| 1479 | reset.setAttribute('title', 'Reset'); |
| 1480 | const refreshicon = document.createElement('i'); |
| 1481 | refreshicon.style.marginRight = '0px'; |
| 1482 | refreshicon.className = 'fa fa-refresh'; |
| 1483 | reset.appendChild(refreshicon); |
| 1484 | reset.onclick = (e) => { |
| 1485 | e.preventDefault(); |
| 1486 | (this.model as FigureModel).reset(); |
| 1487 | }; |
| 1488 | |
| 1489 | const save = document.createElement('button'); |
| 1490 | save.classList.add('jupyter-widgets'); // @jupyter-widgets/controls css |
| 1491 | save.classList.add('jupyter-button'); // @jupyter-widgets/controls css |
| 1492 | save.setAttribute('data-toggle', 'tooltip'); |
| 1493 | save.setAttribute('title', 'Save'); |
| 1494 | const saveicon = document.createElement('i'); |
| 1495 | saveicon.style.marginRight = '0px'; |
| 1496 | saveicon.className = 'fa fa-save'; |
| 1497 | save.appendChild(saveicon); |
| 1498 | save.onclick = (e) => { |
| 1499 | e.preventDefault(); |
| 1500 | this.save_png(undefined, undefined); |
| 1501 | }; |
| 1502 | |
| 1503 | toolbar.node().appendChild(panzoom); |
| 1504 | toolbar.node().appendChild(reset); |
| 1505 | toolbar.node().appendChild(save); |
| 1506 | |
| 1507 | this.el.appendChild(toolbar.node()); |
| 1508 | if (this.autoLayout) { |
| 1509 | toolbar.node().style.top = `${this.offsetY / 2.0}px`; |
| 1510 | toolbar.node().style.right = `${this.offsetX}px`; |
| 1511 | } else { |
| 1512 | toolbar.node().style.top = `${this.margin.top / 2.0}px`; |
| 1513 | toolbar.node().style.right = `${this.margin.right}px`; |
no test coverage detected