Rooba
/
pyodide
mirror of https://github.com/pyodide/pyodide.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

HiDPI (retina) support

This commit is contained in:
Michael Droettboom 2018-05-22 09:55:06 -04:00
parent 5ad7eeb1a2
commit 360bd1d687
1 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/wasm_backend.py
View File

@ -84,6 +84,7 @@ class FigureCanvasWasm(backend_agg.FigureCanvasAgg):
self._idle_scheduled = False self._idle_scheduled = False
self._id = "matplotlib_" + hex(id(self))[2:] self._id = "matplotlib_" + hex(id(self))[2:]
self._title = '' self._title = ''
self._ratio = 1
def get_element(self, name): def get_element(self, name):
# TODO: Should we store a reference here instead of always looking it # TODO: Should we store a reference here instead of always looking it
@ -91,16 +92,34 @@ class FigureCanvasWasm(backend_agg.FigureCanvasAgg):
# cross-memory-management issues... # cross-memory-management issues...
return document.getElementById(self._id + name) return document.getElementById(self._id + name)
def get_dpi_ratio(self, context):
backing_store = (
context.backingStorePixelRatio or
context.webkitBackingStorePixel or
context.mozBackingStorePixelRatio or
context.msBackingStorePixelRatio or
context.oBackingStorePixelRatio or
context.backendStorePixelRatio or
1
)
return (window.devicePixelRatio or 1) / backing_store
def show(self): def show(self):
def ignore(event): def ignore(event):
event.preventDefault() event.preventDefault()
return False return False
window.addEventListener('contextmenu', ignore) window.addEventListener('contextmenu', ignore)
canvas = document.createElement('canvas')
context = canvas.getContext('2d')
self._ratio = self.get_dpi_ratio(context)
if self._ratio != 1:
self.figure.dpi *= self._ratio
renderer = self.get_renderer() renderer = self.get_renderer()
width, height = self.get_width_height() width, height = self.get_width_height()
div = iodide.output.element('div') div = iodide.output.element('div')
div.setAttribute('style', 'width: {}px'.format(width)) div.setAttribute('style', 'width: {}px'.format(width / self._ratio))
div.id = self._id div.id = self._id
top = document.createElement('div') top = document.createElement('div')
@ -112,18 +131,25 @@ class FigureCanvasWasm(backend_agg.FigureCanvasAgg):
canvas_div = document.createElement('div') canvas_div = document.createElement('div')
canvas_div.setAttribute('style', 'position: relative') canvas_div.setAttribute('style', 'position: relative')
canvas = document.createElement('canvas')
canvas.id = self._id + 'canvas' canvas.id = self._id + 'canvas'
canvas.setAttribute('width', width) canvas.setAttribute('width', width)
canvas.setAttribute('height', height) canvas.setAttribute('height', height)
canvas.setAttribute('style', 'left: 0; top: 0; z-index: 0; outline: 0') canvas.setAttribute(
'style', 'left: 0; top: 0; z-index: 0; outline: 0;' +
'width: {}px; height: {}px'.format(
width / self._ratio, height / self._ratio)
)
canvas_div.appendChild(canvas) canvas_div.appendChild(canvas)
rubberband = document.createElement('canvas') rubberband = document.createElement('canvas')
rubberband.id = self._id + 'rubberband' rubberband.id = self._id + 'rubberband'
rubberband.setAttribute('width', width) rubberband.setAttribute('width', width)
rubberband.setAttribute('height', height) rubberband.setAttribute('height', height)
rubberband.setAttribute('style', 'position: absolute; left: 0; top: 0; z-index: 1;') rubberband.setAttribute(
'style', 'position: absolute; left: 0; top: 0; z-index: 0; outline: 0;' +
'width: {}px; height: {}px'.format(
width / self._ratio, height / self._ratio)
)
rubberband.addEventListener('click', self.onclick) rubberband.addEventListener('click', self.onclick)
rubberband.addEventListener('mousemove', self.onmousemove) rubberband.addEventListener('mousemove', self.onmousemove)
rubberband.addEventListener('mouseup', self.onmouseup) rubberband.addEventListener('mouseup', self.onmouseup)
@ -173,8 +199,8 @@ class FigureCanvasWasm(backend_agg.FigureCanvasAgg):
def _convert_mouse_event(self, event): def _convert_mouse_event(self, event):
width, height = self.get_width_height() width, height = self.get_width_height()
x = event.offsetX x = (event.offsetX * self._ratio)
y = height - event.offsetY y = ((height / self._ratio) - event.offsetY) * self._ratio
button = event.button + 1 button = event.button + 1
if button == 3: if button == 3:
event.preventDefault() event.preventDefault()