Skip to content

Commit 94e1a2e

Browse files
mdamienmdamien
committed
add support for HDPI screens 😎
- canvas renderer use pixelratio - webgl label renderer too - events have the good coordinates (+little refactoring) all of this because we use ctx.scale() each time we resize and then we can draw like before
1 parent f22da0c commit 94e1a2e

File tree

6 files changed

+141
-158
lines changed

6 files changed

+141
-158
lines changed

‎src/captors/sigma.captors.mouse.js

Lines changed: 53 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -94,58 +94,51 @@
9494
pos;
9595

9696
// Dispatch event:
97-
if (_settings('mouseEnabled'))
98-
_self.dispatchEvent('mousemove', {
99-
x: sigma.utils.getX(e) - sigma.utils.getWidth(e) / 2,
100-
y: sigma.utils.getY(e) - sigma.utils.getHeight(e) / 2,
101-
clientX: e.clientX,
102-
clientY: e.clientY,
103-
ctrlKey: e.ctrlKey,
104-
metaKey: e.metaKey,
105-
altKey: e.altKey,
106-
shiftKey: e.shiftKey
107-
});
97+
if (_settings('mouseEnabled')) {
98+
_self.dispatchEvent('mousemove',
99+
sigma.utils.mouseCoords(e));
108100

109-
if (_settings('mouseEnabled') && _isMouseDown) {
110-
_isMoving = true;
111-
_hasDragged = true;
101+
if (_isMouseDown) {
102+
_isMoving = true;
103+
_hasDragged = true;
112104

113-
if (_movingTimeoutId)
114-
clearTimeout(_movingTimeoutId);
105+
if (_movingTimeoutId)
106+
clearTimeout(_movingTimeoutId);
115107

116-
_movingTimeoutId = setTimeout(function() {
117-
_isMoving = false;
118-
}, _settings('dragTimeout'));
108+
_movingTimeoutId = setTimeout(function() {
109+
_isMoving = false;
110+
}, _settings('dragTimeout'));
119111

120-
sigma.misc.animation.killAll(_camera);
112+
sigma.misc.animation.killAll(_camera);
121113

122-
_camera.isMoving = true;
123-
pos = _camera.cameraPosition(
124-
sigma.utils.getX(e) - _startMouseX,
125-
sigma.utils.getY(e) - _startMouseY,
126-
true
127-
);
114+
_camera.isMoving = true;
115+
pos = _camera.cameraPosition(
116+
sigma.utils.getX(e) - _startMouseX,
117+
sigma.utils.getY(e) - _startMouseY,
118+
true
119+
);
128120

129-
x = _startCameraX - pos.x;
130-
y = _startCameraY - pos.y;
121+
x = _startCameraX - pos.x;
122+
y = _startCameraY - pos.y;
131123

132-
if (x !== _camera.x || y !== _camera.y) {
133-
_lastCameraX = _camera.x;
134-
_lastCameraY = _camera.y;
124+
if (x !== _camera.x || y !== _camera.y) {
125+
_lastCameraX = _camera.x;
126+
_lastCameraY = _camera.y;
135127

136-
_camera.goTo({
137-
x: x,
138-
y: y
139-
});
140-
}
128+
_camera.goTo({
129+
x: x,
130+
y: y
131+
});
132+
}
141133

142-
if (e.preventDefault)
143-
e.preventDefault();
144-
else
145-
e.returnValue = false;
134+
if (e.preventDefault)
135+
e.preventDefault();
136+
else
137+
e.returnValue = false;
146138

147-
e.stopPropagation();
148-
return false;
139+
e.stopPropagation();
140+
return false;
141+
}
149142
}
150143
}
151144

@@ -190,16 +183,8 @@
190183
y: _camera.y
191184
});
192185

193-
_self.dispatchEvent('mouseup', {
194-
x: x - sigma.utils.getWidth(e) / 2,
195-
y: y - sigma.utils.getHeight(e) / 2,
196-
clientX: e.clientX,
197-
clientY: e.clientY,
198-
ctrlKey: e.ctrlKey,
199-
metaKey: e.metaKey,
200-
altKey: e.altKey,
201-
shiftKey: e.shiftKey
202-
});
186+
_self.dispatchEvent('mouseup',
187+
sigma.utils.mouseCoords(e));
203188

204189
// Update _isMoving flag:
205190
_isMoving = false;
@@ -233,32 +218,16 @@
233218
break;
234219
case 3:
235220
// Right mouse button pressed
236-
_self.dispatchEvent('rightclick', {
237-
x: _startMouseX - sigma.utils.getWidth(e) / 2,
238-
y: _startMouseY - sigma.utils.getHeight(e) / 2,
239-
clientX: e.clientX,
240-
clientY: e.clientY,
241-
ctrlKey: e.ctrlKey,
242-
metaKey: e.metaKey,
243-
altKey: e.altKey,
244-
shiftKey: e.shiftKey
245-
});
221+
_self.dispatchEvent('rightclick',
222+
sigma.utils.mouseCoords(e, _startMouseX, _startMouseY));
246223
break;
247224
// case 1:
248225
default:
249226
// Left mouse button pressed
250227
_isMouseDown = true;
251228

252-
_self.dispatchEvent('mousedown', {
253-
x: _startMouseX - sigma.utils.getWidth(e) / 2,
254-
y: _startMouseY - sigma.utils.getHeight(e) / 2,
255-
clientX: e.clientX,
256-
clientY: e.clientY,
257-
ctrlKey: e.ctrlKey,
258-
metaKey: e.metaKey,
259-
altKey: e.altKey,
260-
shiftKey: e.shiftKey
261-
});
229+
_self.dispatchEvent('mousedown',
230+
sigma.utils.mouseCoords(e, _startMouseX, _startMouseY));
262231
}
263232
}
264233
}
@@ -281,20 +250,12 @@
281250
* @param {event} e A mouse event.
282251
*/
283252
function _clickHandler(e) {
284-
if (_settings('mouseEnabled'))
285-
_self.dispatchEvent('click', {
286-
x: sigma.utils.getX(e) - sigma.utils.getWidth(e) / 2,
287-
y: sigma.utils.getY(e) - sigma.utils.getHeight(e) / 2,
288-
clientX: e.clientX,
289-
clientY: e.clientY,
290-
ctrlKey: e.ctrlKey,
291-
metaKey: e.metaKey,
292-
altKey: e.altKey,
293-
shiftKey: e.shiftKey,
294-
isDragging:
295-
(((new Date()).getTime() - _downStartTime) > 100) &&
296-
_hasDragged
297-
});
253+
if (_settings('mouseEnabled')) {
254+
var event = sigma.utils.mouseCoords(e);
255+
event.isDragging =
256+
(((new Date()).getTime() - _downStartTime) > 100) && _hasDragged;
257+
_self.dispatchEvent('click', event);
258+
}
298259

299260
if (e.preventDefault)
300261
e.preventDefault();
@@ -319,21 +280,13 @@
319280
if (_settings('mouseEnabled')) {
320281
ratio = 1 / _settings('doubleClickZoomingRatio');
321282

322-
_self.dispatchEvent('doubleclick', {
323-
x: _startMouseX - sigma.utils.getWidth(e) / 2,
324-
y: _startMouseY - sigma.utils.getHeight(e) / 2,
325-
clientX: e.clientX,
326-
clientY: e.clientY,
327-
ctrlKey: e.ctrlKey,
328-
metaKey: e.metaKey,
329-
altKey: e.altKey,
330-
shiftKey: e.shiftKey
331-
});
283+
_self.dispatchEvent('doubleclick',
284+
sigma.utils.mouseCoords(e, _startMouseX, _startMouseY));
332285

333286
if (_settings('doubleClickEnabled')) {
334287
pos = _camera.cameraPosition(
335-
sigma.utils.getX(e) - sigma.utils.getWidth(e) / 2,
336-
sigma.utils.getY(e) - sigma.utils.getHeight(e) / 2,
288+
sigma.utils.getX(e) - sigma.utils.getCenter(e).x,
289+
sigma.utils.getY(e) - sigma.utils.getCenter(e).y,
337290
true
338291
);
339292

@@ -371,8 +324,8 @@
371324
_settings('zoomingRatio');
372325

373326
pos = _camera.cameraPosition(
374-
sigma.utils.getX(e) - sigma.utils.getWidth(e) / 2,
375-
sigma.utils.getY(e) - sigma.utils.getHeight(e) / 2,
327+
sigma.utils.getX(e) - sigma.utils.getCenter(e).x,
328+
sigma.utils.getY(e) - sigma.utils.getCenter(e).y,
376329
true
377330
);
378331

‎src/captors/sigma.captors.touch.js

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,6 @@
7373
};
7474
}
7575

76-
77-
78-
7976
/**
8077
* This method unbinds every handlers that makes the captor work.
8178
*/
@@ -88,9 +85,6 @@
8885
_target.addEventListener('touchmove', _handleMove);
8986
};
9087

91-
92-
93-
9488
// TOUCH EVENTS:
9589
// *************
9690
/**
@@ -156,8 +150,10 @@
156150
_startTouchX1 - _startTouchX0
157151
);
158152
_startTouchDistance = Math.sqrt(
159-
Math.pow(_startTouchY1 - _startTouchY0, 2) +
160-
Math.pow(_startTouchX1 - _startTouchX0, 2)
153+
(_startTouchY1 - _startTouchY0) *
154+
(_startTouchY1 - _startTouchY0) +
155+
(_startTouchX1 - _startTouchX0) *
156+
(_startTouchX1 - _startTouchX0)
161157
);
162158

163159
e.preventDefault();
@@ -281,16 +277,8 @@
281277
y: newStageY
282278
});
283279

284-
_self.dispatchEvent('mousemove', {
285-
x: pos0.x - sigma.utils.getWidth(e) / 2,
286-
y: pos0.y - sigma.utils.getHeight(e) / 2,
287-
clientX: e.clientX,
288-
clientY: e.clientY,
289-
ctrlKey: e.ctrlKey,
290-
metaKey: e.metaKey,
291-
altKey: e.altKey,
292-
shiftKey: e.shiftKey
293-
});
280+
_self.dispatchEvent('mousemove',
281+
sigma.utils.mouseCoords(e, pos0.x, pos0.y));
294282

295283
_self.dispatchEvent('drag');
296284
}
@@ -305,20 +293,20 @@
305293

306294
start = _camera.cameraPosition(
307295
(_startTouchX0 + _startTouchX1) / 2 -
308-
sigma.utils.getWidth(e) / 2,
296+
sigma.utils.getCenter(e).x,
309297
(_startTouchY0 + _startTouchY1) / 2 -
310-
sigma.utils.getHeight(e) / 2,
298+
sigma.utils.getCenter(e).y,
311299
true
312300
);
313301
end = _camera.cameraPosition(
314-
(x0 + x1) / 2 - sigma.utils.getWidth(e) / 2,
315-
(y0 + y1) / 2 - sigma.utils.getHeight(e) / 2,
302+
(x0 + x1) / 2 - sigma.utils.getCenter(e).x,
303+
(y0 + y1) / 2 - sigma.utils.getCenter(e).y,
316304
true
317305
);
318306

319307
dAngle = Math.atan2(y1 - y0, x1 - x0) - _startTouchAngle;
320308
dRatio = Math.sqrt(
321-
Math.pow(y1 - y0, 2) + Math.pow(x1 - x0, 2)
309+
(y1 - y0) * (y1 - y0) + (x1 - x0) * (x1 - x0)
322310
) / _startTouchDistance;
323311

324312
// Translation:
@@ -389,21 +377,13 @@
389377
ratio = 1 / _settings('doubleClickZoomingRatio');
390378

391379
pos = position(e.touches[0]);
392-
_self.dispatchEvent('doubleclick', {
393-
x: pos.x - sigma.utils.getWidth(e) / 2,
394-
y: pos.y - sigma.utils.getHeight(e) / 2,
395-
clientX: e.clientX,
396-
clientY: e.clientY,
397-
ctrlKey: e.ctrlKey,
398-
metaKey: e.metaKey,
399-
altKey: e.altKey,
400-
shiftKey: e.shiftKey
401-
});
380+
_self.dispatchEvent('doubleclick',
381+
sigma.utils.mouseCoords(e, pos.x, pos.y));
402382

403383
if (_settings('doubleClickEnabled')) {
404384
pos = _camera.cameraPosition(
405-
pos.x - sigma.utils.getWidth(e) / 2,
406-
pos.y - sigma.utils.getHeight(e) / 2,
385+
pos.x - sigma.utils.getCenter(e).x,
386+
pos.y - sigma.utils.getCenter(e).y,
407387
true
408388
);
409389

‎src/misc/sigma.misc.drawHovers.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,13 @@
5151
});
5252

5353
function draw() {
54-
// Clear self.contexts.hover:
55-
self.contexts.hover.canvas.width = self.contexts.hover.canvas.width;
5654

5755
var k,
5856
source,
5957
target,
6058
hoveredNode,
6159
hoveredEdge,
60+
c = self.contexts.hover.canvas,
6261
defaultNodeType = self.settings('defaultNodeType'),
6362
defaultEdgeType = self.settings('defaultEdgeType'),
6463
nodeRenderers = sigma.canvas.hovers,
@@ -68,6 +67,9 @@
6867
prefix: prefix
6968
});
7069

70+
// Clear self.contexts.hover:
71+
self.contexts.hover.clearRect(0, 0, c.width, c.height);
72+
7173
// Node render: single hover
7274
if (
7375
embedSettings('enableHovering') &&

‎src/renderers/sigma.renderers.canvas.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -359,13 +359,7 @@
359359
var k,
360360
oldWidth = this.width,
361361
oldHeight = this.height,
362-
pixelRatio = 1;
363-
// TODO:
364-
// *****
365-
// This pixelRatio is the solution to display with the good definition
366-
// on canvases on Retina displays (ie oversampling). Unfortunately, it
367-
// has a huge performance cost...
368-
// > pixelRatio = window.devicePixelRatio || 1;
362+
pixelRatio = sigma.utils.getPixelRatio();
369363

370364
if (w !== undefined && h !== undefined) {
371365
this.width = w;
@@ -402,11 +396,9 @@
402396
* @return {sigma.renderers.canvas} Returns the instance itself.
403397
*/
404398
sigma.renderers.canvas.prototype.clear = function() {
405-
var k;
406-
407-
for (k in this.domElements)
408-
if (this.domElements[k].tagName === 'CANVAS')
409-
this.domElements[k].width = this.domElements[k].width;
399+
for (var k in this.contexts) {
400+
this.contexts[k].clearRect(0, 0, this.width, this.height);
401+
}
410402

411403
return this;
412404
};

0 commit comments

Comments
 (0)