8000 update example · markchipman/phosphorjs.github.io@f57afce · GitHub
[go: up one dir, main page]
Skip to content

Commit f57afce

Browse files
sccolbertsccolbert
committed
update example
1 parent 32ccdd5 commit f57afce

File tree

1 file changed

+118
-35
lines changed

1 file changed

+118
-35
lines changed

‎examples/datagrid/build/bundle.example.js

Lines changed: 118 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20765,6 +20765,7 @@ var DataGrid = (function (_super) {
2076520765
_this._inPaint = false;
2076620766
_this._paintPending = false; // TODO: would like to get rid of this flag
2076720767
_this._pressData = null;
20768+
_this._dpiRatio = Math.ceil(window.devicePixelRatio);
2076820769
_this._scrollX = 0;
2076920770
_this._scrollY = 0;
2077020771
_this._viewportWidth = 0;
@@ -21510,7 +21511,7 @@ var DataGrid = (function (_super) {
2151021511
var y_1 = dy < 0 ? contentY : contentY + dy;
2151121512
var w = width;
2151221513
var h = contentHeight - Math.abs(dy);
21513-
this._canvasGC.drawImage(this._canvas, x_1, y_1, w, h, x_1, y_1 - dy, w, h);
21514+
this._blit(this._canvas, x_1, y_1, w, h, x_1, y_1 - dy);
2151421515
this._paint(0, dy < 0 ? contentY : height - dy, width, Math.abs(dy));
2151521516
}
2151621517
}
@@ -21528,7 +21529,7 @@ var DataGrid = (function (_super) {
2152821529
var y_2 = 0;
2152921530
var w = contentWidth - Math.abs(dx);
2153021531
var h = height;
21531-
this._canvasGC.drawImage(this._canvas, x_2, y_2, w, h, x_2 - dx, y_2, w, h);
21532+
this._blit(this._canvas, x_2, y_2, w, h, x_2 - dx, y_2);
2153221533
this._paint(dx < 0 ? contentX : width - dx, 0, Math.abs(dx), height);
2153321534
}
2153421535
}
@@ -21635,12 +21636,16 @@ var DataGrid = (function (_super) {
2163521636
event.preventDefault();
2163621637
event.stopPropagation();
2163721638
break;
21639+
case 'resize':
21640+
this._refreshDPI();
21641+
break;
2163821642
}
2163921643
};
2164021644
/**
2164121645
* A message handler invoked on a `'before-attach'` message.
2164221646
*/
2164321647
DataGrid.prototype.onBeforeAttach = function (msg) {
21648+
window.addEventListener('resize', this);
2164421649
this.node.addEventListener('wheel', this);
2164521650
this.node.addEventListener('mousedown', this);
2164621651
this._viewport.node.addEventListener('mousemove', this);
@@ -21650,6 +21655,7 @@ var DataGrid = (function (_super) {
2165021655
* A message handler invoked on an `'after-detach'` message.
2165121656
*/
2165221657
DataGrid.prototype.onAfterDetach = function (msg) {
21658+
window.removeEventListener('resize', this);
2165321659
this.node.removeEventListener('wheel', this);
2165421660
this.node.removeEventListener('mousedown', this);
2165521661
this._viewport.node.removeEventListener('mousemove', this);
@@ -21667,47 +21673,93 @@ var DataGrid = (function (_super) {
2166721673
DataGrid.prototype.onResize = function (msg) {
2166821674
this._syncScrollState();
2166921675
};
21676+
/**
21677+
* Refresh the internal dpi ratio.
21678+
*
21679+
* This will update the canvas size and schedule a repaint if needed.
21680+
*/
21681+
DataGrid.prototype._refreshDPI = function () {
21682+
// Get the best integral value for the dpi ratio.
21683+
var dpiRatio = Math.ceil(window.devicePixelRatio);
21684+
// Bail early if the computed dpi ratio has not changed.
21685+
if (this._dpiRatio === dpiRatio) {
21686+
return;
21687+
}
21688+
// Update the internal dpi ratio.
21689+
this._dpiRatio = dpiRatio;
21690+
// Schedule a full repaint of the grid.
21691+
this.repaint();
21692+
// Update the canvas size for the new dpi ratio.
21693+
this._resizeCanvasIfNeeded(this._viewportWidth, this._viewportHeight);
21694+
// Ensure the canvas style is scaled for the new ratio.
21695+
this._canvas.style.width = this._canvas.width / this._dpiRatio + "px";
21696+
this._canvas.style.height = this._canvas.height / this._dpiRatio + "px";
21697+
};
2167021698
/**
2167121699
* Ensure the canvas is at least the specified size.
2167221700
*
2167321701
* This method will retain the valid canvas content.
2167421702
*/
21675-
DataGrid.prototype._expandCanvasIfNeeded = function (width, height) {
21676-
// Bail if the canvas is larger than the specified size.
21677-
if (this._canvas.width > width && this._canvas.height > height) {
21703+
DataGrid.prototype._resizeCanvasIfNeeded = function (width, height) {
21704+
// Scale the size by the dpi ratio.
21705+
width = width * this._dpiRatio;
21706+
height = height * this._dpiRatio;
21707+
// Compute the maximum canvas size for the given width.
21708+
var maxW = (Math.ceil((width + 1) / 512) + 1) * 512;
21709+
var maxH = (Math.ceil((height + 1) / 512) + 1) * 512;
21710+
// Get the current size of the canvas.
21711+
var curW = this._canvas.width;
21712+
var curH = this._canvas.height;
21713+
// Bail early if the canvas size is within bounds.
21714+
if (curW >= width && curH >= height && curW <= maxW && curH <= maxH) {
2167821715
return;
2167921716
}
2168021717
// Compute the expanded canvas size.
21681-
var exWidth = Math.ceil((width + 1) / 512) * 512;
21682-
var exHeight = Math.ceil((height + 1) / 512) * 512;
21683-
// Expand the buffer width if needed.
21684-
if (this._buffer.width < width) {
21685-
this._buffer.width = exWidth;
21686-
}
21687-
// Expand the buffer height if needed.
21688-
if (this._buffer.height < height) {
21689-
this._buffer.height = exHeight;
21690-
}
21691-
// Test whether there is valid content to blit.
21692-
var needBlit = this._canvas.width > 0 && this._canvas.height > 0;
21718+
var expW = maxW - 512;
21719+
var expH = maxH - 512;
21720+
// Set the transforms to the identity matrix.
21721+
this._canvasGC.setTransform(1, 0, 0, 1, 0, 0);
21722+
this._bufferGC.setTransform(1, 0, 0, 1, 0, 0);
21723+
// Resize the buffer width if needed.
21724+
if (curW < width) {
21725+
this._buffer.width = expW;
21726+
}
21727+
else if (curW > maxW) {
21728+
this._buffer.width = maxW;
21729+
}
21730+
// Resize the buffer height if needed.
21731+
if (curH < height) {
21732+
this._buffer.height = expH;
21733+
}
21734+
else if (curH > maxH) {
21735+
this._buffer.height = maxH;
21736+
}
21737+
// Test whether there is content to blit.
21738+
var needBlit = curH > 0 && curH > 0 && width > 0 && height > 0;
2169321739
// Copy the valid content into the buffer if needed.
2169421740
if (needBlit) {
21695-
this._bufferGC.clearRect(0, 0, width, height);
2169621741
this._bufferGC.drawImage(this._canvas, 0, 0);
2169721742
}
21698-
// Expand the canvas width if needed.
21699-
if (this._canvas.width < width) {
21700-
this._canvas.width = exWidth;
21701-
this._canvas.style.width = exWidth + "px";
21743+
// Resize the canvas width if needed.
21744+
if (curW < width) {
21745+
this._canvas.width = expW;
21746+
this._canvas.style.width = expW / this._dpiRatio + "px";
21747+
}
21748+
else if (curW > maxW) {
21749+
this._canvas.width = maxW;
21750+
this._canvas.style.width = maxW / this._dpiRatio + "px";
2170221751
}
21703-
// Expand the canvas height of needed.
21704-
if (this._canvas.height < height) {
21705-
this._canvas.height = exHeight;
21706-
this._canvas.style.height = exHeight + "px";
21752+
// Resize the canvas height if needed.
21753+
if (curH < height) {
21754+
this._canvas.height = expH;
21755+
this._canvas.style.height = expH / this._dpiRatio + "px";
21756+
}
21757+
else if (curH > maxH) {
21758+
this._canvas.height = maxH;
21759+
this._canvas.style.height = maxH / this._dpiRatio + "px";
2170721760
}
2170821761
// Copy the valid content from the buffer if needed.
2170921762
if (needBlit) {
21710-
this._canvasGC.clearRect(0, 0, width, height);
2171121763
this._canvasGC.drawImage(this._buffer, 0, 0);
2171221764
}
2171321765
};
@@ -21892,7 +21944,7 @@ var DataGrid = (function (_super) {
2189221944
dy = sy + delta;
2189321945
}
2189421946
// Blit the valid content to the destination.
21895-
this._canvasGC.drawImage(this._canvas, sx, sy, sw, sh, dx, dy, sw, sh);
21947+
this._blit(this._canvas, sx, sy, sw, sh, dx, dy);
2189621948
// Repaint the section if needed.
2189721949
if (newSize > 0 && offset + newSize > hh) {
2189821950
this._paint(0, pos, vpWidth, offset + newSize - pos);
@@ -21945,7 +21997,7 @@ var DataGrid = (function (_super) {
2194521997
dx = sx + delta;
2194621998
}
2194721999
// Blit the valid content to the destination.
21948-
this._canvasGC.drawImage(this._canvas, sx, sy, sw, sh, dx, dy, sw, sh);
22000+
this._blit(this._canvas, sx, sy, sw, sh, dx, dy);
2194922001
// Repaint the section if needed.
2195022002
if (newSize > 0 && offset + newSize > hw) {
2195122003
this._paint(pos, 0, offset + newSize - pos, vpHeight);
@@ -21978,7 +22030,7 @@ var DataGrid = (function (_super) {
2197822030
var dx = sx + delta;
2197922031
var dy = 0;
2198022032
// Blit the valid contents to the destination.
21981-
this._canvasGC.drawImage(this._canvas, sx, sy, sw, sh, dx, dy, sw, sh);
22033+
this._blit(this._canvas, sx, sy, sw, sh, dx, dy);
2198222034
// Repaint the header section if needed.
2198322035
if (newSize > 0) {
2198422036
this._paint(offset, 0, newSize, vpHeight);
@@ -22011,7 +22063,7 @@ var DataGrid = (function (_super) {
2201122063
var dx = 0;
2201222064
var dy = sy + delta;
2201322065
// Blit the valid contents to the destination.
22014-
this._canvasGC.drawImage(this._canvas, sx, sy, sw, sh, dx, dy, sw, sh);
22066+
this._blit(this._canvas, sx, sy, sw, sh, dx, dy);
2201522067
// Repaint the header section if needed.
2201622068
if (newSize > 0) {
2201722069
this._paint(0, offset, vpWidth, newSize);
@@ -22184,6 +22236,10 @@ var DataGrid = (function (_super) {
2218422236
if (this._pressData) {
2218522237
return;
2218622238
}
22239+
// Do nothing if the `Ctrl` key is held.
22240+
if (event.ctrlKey) {
22241+
return;
22242+
}
2218722243
// Extract the delta X and Y movement.
2218822244
var dx = event.deltaX;
2218922245
var dy = event.deltaY;
@@ -22342,8 +22398,8 @@ var DataGrid = (function (_super) {
2234222398
// Updated internal viewport size.
2234322399
this._viewportWidth = width;
2234422400
this._viewportHeight = height;
22345-
// Expand the canvas if needed.
22346-
this._expandCanvasIfNeeded(width, height);
22401+
// Resize the canvas if needed.
22402+
this._resizeCanvasIfNeeded(width, height);
2234722403
// Compute the sizes of the dirty regions.
2234822404
var right = width - oldWidth;
2234922405
var bottom = height - oldHeight;
@@ -22848,6 +22904,30 @@ var DataGrid = (function (_super) {
2284822904
DataGrid.prototype._onRenderersChanged = function () {
2284922905
this.repaint();
2285022906
};
22907+
/**
22908+
* Blit content into the on-screen canvas.
22909+
*
22910+
* The rect should be expressed in viewport coordinates.
22911+
*
22912+
* This automatically accounts for the dpi ratio.
22913+
*/
22914+
DataGrid.prototype._blit = function (source, x, y, w, h, dx, dy) {
22915+
// Scale the blit coordinates by the dpi ratio.
22916+
x *= this._dpiRatio;
22917+
y *= this._dpiRatio;
22918+
w *= this._dpiRatio;
22919+
h *= this._dpiRatio;
22920+
dx *= this._dpiRatio;
22921+
dy *= this._dpiRatio;
22922+
// Save the current gc state.
22923+
this._canvasGC.save();
22924+
// Set the transform to the identity matrix.
22925+
this._canvasGC.setTransform(1, 0, 0, 1, 0, 0);
22926+
// Draw the specified content.
22927+
this._canvasGC.drawImage(source, x, y, w, h, dx, dy, w, h);
22928+
// Restore the gc state.
22929+
this._canvasGC.restore();
22930+
};
2285122931
/**
2285222932
* Paint the grid content for the given dirty rect.
2285322933
*
@@ -22878,6 +22958,9 @@ var DataGrid = (function (_super) {
2287822958
* This method dispatches to the relevant `_draw*` methods.
2287922959
*/
2288022960
DataGrid.prototype._draw = function (rx, ry, rw, rh) {
22961+
// Scale the canvas and buffer GC for the dpi ratio.
22962+
this._canvasGC.setTransform(this._dpiRatio, 0, 0, this._dpiRatio, 0, 0);
22963+
this._bufferGC.setTransform(this._dpiRatio, 0, 0, this._dpiRatio, 0, 0);
2288122964
// Clear the dirty rect of all content.
2288222965
this._canvasGC.clearRect(rx, ry, rw, rh);
2288322966
// Draw the void region.
@@ -23428,13 +23511,13 @@ var DataGrid = (function (_super) {
2342823511
// Compute the actual X bounds for the column.
2342923512
var x1 = Math.max(rgn.xMin, x);
2343023513
var x2 = Math.min(x + width - 1, rgn.xMax);
23431-
// Copy the off-screen buffer column into the on-screen canvas.
23514+
// Blit the off-screen buffer column into the on-screen canvas.
2343223515
//
2343323516
// This is *much* faster than drawing directly into the on-screen
2343423517
// canvas with a clip rect on the column. Managed column clipping
2343523518
// is required to prevent cell renderers from needing to set up a
2343623519
// clip rect for handling horizontal overflow text (slow!).
23437-
this._canvasGC.drawImage(this._buffer, x1, y1, x2 - x1 + 1, y2 - y1 + 1, x1, y1, x2 - x1 + 1, y2 - y1 + 1);
23520+
this._blit(this._buffer, x1, y1, x2 - x1 + 1, y2 - y1 + 1, x1, y1);
2343823521
// Increment the running X coordinate.
2343923522
x += width;
2344023523
}

0 commit comments

Comments
 (0)
0