canvas hashing to avoid redrawing old data

This commit is contained in:
Hugh Bord 2021-12-26 17:44:02 +10:00
parent c2b7c720e2
commit 124375bc6c
2 changed files with 22 additions and 17 deletions

View File

@ -489,7 +489,7 @@ export default {
click: () => this.$store.commit("openModal", "new-ascii"),
icon: "fiber_new",
disabled: !this.isDefault,
hotkey: "n",
hotkey: "ctrl+m",
},
],
});
@ -845,7 +845,7 @@ export default {
{
text: "Increase Brush Size",
hotkey: "ctrl+]",
disabled: !this.isBrushing && this.brushSizeHeight < maxBrushSize && this.brushSizeHeight >= 1 && this.brushSizeWidth < maxBrushSize && this.brushSizeWidth >= 1,
disabled: (!this.isBrushing && !this.isErasing) && (this.brushSizeHeight < maxBrushSize && this.brushSizeHeight >= 1 && this.brushSizeWidth < maxBrushSize && this.brushSizeWidth >= 1),
icon: "add",
click: (e) => {
this.$store.commit("updateBrushSize", {
@ -858,7 +858,7 @@ export default {
{
text: "Decrease Brush Size",
hotkey: "ctrl+[",
disabled: !this.isBrushing && this.brushSizeHeight <= maxBrushSize && this.brushSizeHeight > 1 && this.brushSizeWidth <= maxBrushSize && this.brushSizeWidth > 1,
disabled: (!this.isBrushing && !this.isErasing) && (this.brushSizeHeight <= maxBrushSize && this.brushSizeHeight > 1 && this.brushSizeWidth <= maxBrushSize && this.brushSizeWidth > 1),
icon: "remove",
click: (e) => {
this.$store.commit("updateBrushSize", {

View File

@ -81,7 +81,8 @@ import {
mergeLayers,
canvasToPng,
exportMirc,
downloadFile
downloadFile,
cyrb53
} from "../ascii";
export default {
@ -194,6 +195,7 @@ export default {
},
isUsingKeyboard: false,
canvasHash: null,
}),
props: ["updateCanvas", "yOffset", "canvasxy", "brush", "updateascii"],
computed: {
@ -402,6 +404,8 @@ export default {
};
this.resetSelect();
this.clearToolCanvas();
break;
case "text":
@ -895,13 +899,8 @@ export default {
if (
this.diffBlocks.new.length &&
!this.canTool &&
!this.isTextEditing &&
!this.isErasing &&
!this.isEraserFill &&
!this.isFill
// Ignore redrawing from diffBlocks the above until they are refactored to work better
!this.isTextEditing
) {
// console.log("redrawing canvas from cache");
// If we have a difference stored, just render the difference only instead
// of the entire ascii again
@ -909,11 +908,8 @@ export default {
let entry = this.diffBlocks.new[i];
canvasX = blockWidth * entry.x;
canvasY = blockHeight * entry.y;
curBlock = { ...entry.b };
// this.ctx.clearRect(canvasX,canvasY,blockWidth, blockHeight);
if (curBlock.bg !== undefined && curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(canvasX, canvasY, blockWidth, blockHeight);
@ -939,17 +935,26 @@ export default {
new: [],
old: [],
};
} else {
// console.log("redrawing canvas");
// Store canvas hash
this.canvasHash = cyrb53(JSON.stringify(this.mergeLayers()));
} else {
let mergeLayers = this.mergeLayers();
let tempHash = cyrb53(JSON.stringify(mergeLayers));
if (tempHash === this.canvasHash) {
// Avoid redrawing the entire canvas to same some CPU
// if we have no new changes
return;
}
this.canvasHash = tempHash
this.ctx.save();
this.canvasRef.width = this.canvasRef.width;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.font = "13px Hack";
let mergeLayers = this.mergeLayers();
for (y = 0; y < this.currentAsciiHeight + 1; y++) {
canvasY = blockHeight * y;