| 159 | |
| 160 | export class Toolbar extends widgets.DOMWidgetView { |
| 161 | render() { |
| 162 | this.el.classList.add('jupyter-widget'); // @jupyter-widgets/controls css |
| 163 | this.el.classList.add('widget-hbox'); // @jupyter-widgets/controls css |
| 164 | |
| 165 | // We use @jupyter-widgets/controls css classes (ipywidget and widget-*-*) to |
| 166 | // benefit from default width, shadows. |
| 167 | // We do not use btn-group to not break alignment with jupyter |
| 168 | // buttons. |
| 169 | |
| 170 | // Create the buttons |
| 171 | const _panzoom = document.createElement('button'); |
| 172 | _panzoom.classList.add('jupyter-widgets'); // @jupyter-widgets/controls css |
| 173 | _panzoom.classList.add('jupyter-button'); // @jupyter-widgets/controls css |
| 174 | _panzoom.classList.add('widget-toggle-button'); // @jupyter-widgets/controls css |
| 175 | _panzoom.setAttribute('data-toggle', 'tooltip'); |
| 176 | _panzoom.setAttribute('title', 'PanZoom'); |
| 177 | _panzoom.onclick = (e) => { |
| 178 | e.preventDefault(); |
| 179 | this.model.panzoom(); |
| 180 | }; |
| 181 | const panzoomicon = document.createElement('i'); |
| 182 | panzoomicon.className = 'fa fa-arrows'; |
| 183 | _panzoom.appendChild(panzoomicon); |
| 184 | |
| 185 | const _reset = document.createElement('button'); |
| 186 | _reset.classList.add('jupyter-widgets'); // @jupyter-widgets/controls css |
| 187 | _reset.classList.add('jupyter-button'); // @jupyter-widgets/controls css |
| 188 | _reset.classList.add('widget-button'); // @jupyter-widgets/controls css |
| 189 | _reset.setAttribute('data-toggle', 'tooltip'); |
| 190 | _reset.setAttribute('title', 'Reset'); |
| 191 | _reset.onclick = (e) => { |
| 192 | e.preventDefault(); |
| 193 | this.model.reset(); |
| 194 | }; |
| 195 | const refreshicon = document.createElement('i'); |
| 196 | refreshicon.className = 'fa fa-refresh'; |
| 197 | _reset.appendChild(refreshicon); |
| 198 | |
| 199 | const _save = document.createElement('button'); |
| 200 | _save.classList.add('jupyter-widgets'); // @jupyter-widgets/controls css |
| 201 | _save.classList.add('jupyter-button'); // @jupyter-widgets/controls css |
| 202 | _save.classList.add('widget-button'); // @jupyter-widgets/controls css |
| 203 | _save.setAttribute('data-toggle', 'tooltip'); |
| 204 | _save.setAttribute('title', 'Save'); |
| 205 | _save.onclick = (e) => { |
| 206 | e.preventDefault(); |
| 207 | this.model.save_png(); |
| 208 | }; |
| 209 | const saveicon = document.createElement('i'); |
| 210 | saveicon.className = 'fa fa-save'; |
| 211 | _save.appendChild(saveicon); |
| 212 | |
| 213 | this.el.appendChild(_panzoom); |
| 214 | this.el.appendChild(_reset); |
| 215 | this.el.appendChild(_save); |
| 216 | |
| 217 | // Handle initial state |
| 218 | this._panzoom = _panzoom; |