radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP towards fixing performance with helper layer 

Fun accidental behavior: draw weird bit patterns by zooming in and out with the grid.
main
Isaiah Odhner 2019-09-30 20:34:02 -04:00
parent 83db679de0
commit 62f3d18438
4 changed files with 32 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/OnCanvasHelperLayer.js
View File

@ -1,4 +1,4 @@
function OnCanvasHelperLayer(x, y, width, height, hideMainCanvasHandles, hiDPI){
function OnCanvasHelperLayer(x, y, width, height, hideMainCanvasHandles, pixelRatio=1){
OnCanvasObject.call(this, x, y, width, height, hideMainCanvasHandles);
this.$el.addClass("helper-layer");
@ -7,8 +7,7 @@ function OnCanvasHelperLayer(x, y, width, height, hideMainCanvasHandles, hiDPI){
});
this.position();
var scale = hiDPI ? Math.floor(magnification * window.devicePixelRatio) : 1; // same as in update_grid
this.canvas = new Canvas(this.width * scale, this.height * scale);
this.canvas = new Canvas(this.width * pixelRatio, this.height * pixelRatio);
this.$el.append(this.canvas);
}

4
src/app.js
View File

@ -159,7 +159,7 @@ storage.get({
});
$G.on("resize", function(){ // for browser zoom, and in-app zoom of the canvas
update_grid();
update_helper_layer();
update_disable_aa();
});
@ -531,7 +531,7 @@ $canvas.on("pointermove", function(e){
pointer = e2c(e);
$status_position.text(pointer.x + "," + pointer.y);
redraw_helper_layer();
update_helper_layer();
});
$canvas.on("pointerleave", function(e){
$status_position.text("");

44
src/functions.js
View File

@ -3,25 +3,37 @@ function update_magnified_canvas_size(){
$canvas.css("width", canvas.width * magnification);
$canvas.css("height", canvas.height * magnification);
}
function update_grid() {
if (helper_layer) {
helper_layer.destroy();
}
var hiDPI = true;
helper_layer = new OnCanvasHelperLayer(0, 0, canvas.width, canvas.height, false, hiDPI);
var scale = hiDPI ? Math.floor(magnification * window.devicePixelRatio) : 1; // same as in OnCanvasHelperLayer
draw_grid_and_tool_previews(helper_layer.canvas.ctx, scale, scale);
}
function redraw_helper_layer() {
var hiDPI = true;
function update_helper_layer() {
var scale = Math.floor(magnification * window.devicePixelRatio);
if (helper_layer) {
helper_layer.canvas.ctx.clearRect(0, 0, helper_layer.canvas.width, helper_layer.canvas.height);
} else {
helper_layer = new OnCanvasHelperLayer(0, 0, canvas.width, canvas.height, false, hiDPI);
helper_layer = new OnCanvasHelperLayer(0, 0, canvas.width, canvas.height, false, scale);
}
var scale = hiDPI ? Math.floor(magnification * window.devicePixelRatio) : 1; // same as in OnCanvasHelperLayer
draw_grid_and_tool_previews(helper_layer.canvas.ctx, scale, scale);
ctx.save();
ctx.scale(scale, scale);
// ctx.translate();
selected_tools.forEach((selected_tool)=> {
if(selected_tool.drawPreviewUnderGrid){
selected_tool.drawPreviewUnderGrid(ctx, pointer.x, pointer.y, scale);
}
});
ctx.restore();
if (magnification >= 4 && show_grid) {
draw_grid(ctx, scale);
}
ctx.save();
// ctx.translate();
ctx.scale(scale, scale);
selected_tools.forEach((selected_tool)=> {
if(selected_tool.drawPreviewAboveGrid){
selected_tool.drawPreviewAboveGrid(ctx, pointer.x, pointer.y, scale);
}
});
ctx.restore();
}
function update_disable_aa() {
var dots_per_canvas_px = window.devicePixelRatio * magnification;
@ -42,7 +54,7 @@ function reset_magnification(){
function toggle_grid() {
show_grid = !show_grid;
// $G.trigger("option-changed");
update_grid();
update_helper_layer();
}
function reset_colors(){

26
src/image-manipulation.js
View File

@ -605,32 +605,6 @@ function draw_grid(ctx, wanted_size) {
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function draw_grid_and_tool_previews(ctx, scale) {
ctx.save();
// ctx.translate();
ctx.scale(scale, scale);
selected_tools.forEach((selected_tool)=> {
if(selected_tool.drawPreviewUnderGrid){
selected_tool.drawPreviewUnderGrid(ctx, pointer.x, pointer.y, scale);
}
});
ctx.restore();
if (magnification >= 4 && show_grid) {
draw_grid(ctx, scale);
}
ctx.save();
// ctx.translate();
ctx.scale(scale, scale);
selected_tools.forEach((selected_tool)=> {
if(selected_tool.drawPreviewAboveGrid){
selected_tool.drawPreviewAboveGrid(ctx, pointer.x, pointer.y, scale);
}
});
ctx.restore();
}
(function(){
var tessy = (function initTesselator() {