jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

better brush preview for same colour blocks, better select view, grid view and keyboard shortcut ctrl g

This commit is contained in:
Hugh Bord 2021-08-08 10:36:17 +10:00
parent ca8b9eeabf
commit 1520d3d9b0
3 changed files with 104 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/BrushLibrary.vue
View File

@ -130,36 +130,6 @@ export default {
currentAscii() {
return this.$store.getters.currentAscii;
},
toolbarState() {
return this.$store.getters.toolbarState;
},
isTargettingBg() {
return this.$store.getters.isTargettingBg;
},
isTargettingFg() {
return this.$store.getters.isTargettingFg;
},
isTargettingChar() {
return this.$store.getters.isTargettingChar;
},
currentFg() {
return this.$store.getters.currentFg;
},
currentBg() {
return this.$store.getters.currentBg;
},
currentChar() {
return this.$store.getters.currentChar;
},
brushSizeHeight() {
return this.$store.getters.brushSizeHeight;
},
brushSizeWidth() {
return this.$store.getters.brushSizeWidth;
},
brushSizeType() {
return this.$store.getters.brushSizeType;
},
brushHistory() {
return this.$store.getters.brushHistory.slice(0, 100);
},
@ -169,9 +139,6 @@ export default {
mircColours() {
return mircColours99;
},
options() {
return this.$store.getters.options;
},
brushBlocks() {
return this.$store.getters.brushBlocks;
},

5
src/store/index.js
View File

@ -30,6 +30,7 @@ export default new Vuex.Store({
},
// Current tab user is viewing
tab: 0,
gridView: false,
// asciibirdMeta holds all of the ASCII information for all the tabs
asciibirdMeta: [],
toolbarState: {
@ -197,6 +198,9 @@ export default new Vuex.Store({
selectBlocks(state, payload) {
state.selectBlocks = LZString.compressToUTF16(JSON.stringify(payload));
},
toggleGridView(state, payload) {
state.gridView = payload;
},
pushBrushHistory(state, payload) {
// Check and remove duplicate brushes based on hash value
let hashValue = cyrb53(JSON.stringify(payload))
@ -280,6 +284,7 @@ export default new Vuex.Store({
blockSizeMultiplier: (state) => state.blockSizeMultiplier,
brushHistory: (state) => state.brushHistory,
brushLibrary: (state) => state.brushLibrary,
gridView: (state) => state.gridView,
brushLibraryState: (state) => state.brushLibraryState,
brushBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.brushBlocks)) || [],
selectBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.selectBlocks)) || [],

132
src/views/Editor.vue
View File

@ -50,7 +50,7 @@ body {
.canvastools {
position: absolute;
z-index: 100;
opacity: 0.5;
opacity: 0.6;
cursor: crosshair;
}
@ -82,9 +82,9 @@ export default {
this.toolCtx = this.$refs.canvastools.getContext("2d");
this.canvas.width =
this.currentAscii.width * this.currentAscii.blockWidth;
this.currentAscii.width * blockWidth;
this.canvas.height =
this.currentAscii.height * this.currentAscii.blockHeight;
this.currentAscii.height * blockHeight;
this.delayRedrawCanvas();
this.$store.commit("changeTool", 0);
@ -142,6 +142,11 @@ export default {
this.$store.commit("toggleDebugPanel", !this.debugPanelState.visible);
}
// Show / hide grid view
if (e.key === "g" && ctrlKey) {
this.$store.commit("toggleGridView", !this.gridView);
}
// Show / hide brush library
if (e.key === "b" && ctrlKey) {
this.$store.commit(
@ -214,9 +219,16 @@ export default {
brushSizeType: this.brushSizeType,
});
}
this.canKey = false
};
// this.keyListenerUp = function (e) {
// this.canKey = true
// };
document.addEventListener("keydown", this.keyListener.bind(this));
// document.addEventListener("keyup", this.keyListenerUp.bind(this));
}
},
data: () => ({
@ -302,10 +314,10 @@ export default {
return this.$store.getters.brushBlocks;
},
canvasX() {
return this.x * this.currentAscii.blockWidth;
return this.x * blockWidth;
},
canvasY() {
return this.y * this.currentAscii.blockHeight;
return this.y * blockHeight;
},
toolbarState() {
return this.$store.getters.toolbarState;
@ -334,6 +346,9 @@ export default {
brushLibraryState() {
return this.$store.getters.brushLibraryState;
},
gridView() {
return this.$store.getters.gridView
}
},
watch: {
currentAscii(val, old) {
@ -341,14 +356,14 @@ export default {
this.onCanvasResize(
100,
100,
this.currentAscii.width * this.currentAscii.blockWidth,
this.currentAscii.height * this.currentAscii.blockHeight
this.currentAscii.width * blockWidth,
this.currentAscii.height * blockHeight
);
this.canvas.width =
this.currentAscii.width * this.currentAscii.blockWidth;
this.currentAscii.width * blockWidth;
this.canvas.height =
this.currentAscii.height * this.currentAscii.blockHeight;
this.currentAscii.height * blockHeight;
this.delayRedrawCanvas();
@ -380,6 +395,11 @@ export default {
this.canTool = false;
}
},
gridView(val,old) {
if (val !== old) {
this.delayRedrawCanvas()
}
}
},
methods: {
undo() {
@ -401,14 +421,22 @@ export default {
this.selecting.endX - this.selecting.startX,
this.selecting.endY - this.selecting.startY
);
this.toolCtx.setLineDash([6]);
this.toolCtx.strokeRect(
this.selecting.startX,
this.selecting.startY,
this.selecting.endX - this.selecting.startX,
this.selecting.endY - this.selecting.startY
);
}
},
redrawCanvas() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (this.currentAsciiBlocks.length) {
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
const BLOCK_WIDTH = blockWidth;
const BLOCK_HEIGHT = blockHeight;
// Position of the meta array
let x = 0;
@ -435,6 +463,14 @@ export default {
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
if (this.gridView) {
this.ctx.setLineDash([1]);
this.ctx.strokeStyle = "rgba(0, 0, 0, 0.2)"
this.ctx.strokeRect(
canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT
);
}
}
if (curBlock.char) {
@ -459,9 +495,9 @@ export default {
const blocks = this.currentAsciiBlocks;
const canvasBlockHeight = Math.floor(
height / this.currentAscii.blockHeight
height / blockHeight
);
const canvasBlockWidth = Math.floor(width / this.currentAscii.blockWidth);
const canvasBlockWidth = Math.floor(width / blockWidth);
// Previously we had an if statement to check if we needed new blocks
// removed it so we can get all blocks always
@ -613,9 +649,7 @@ export default {
break;
case "fill":
// this.canTool = false;
// this.$store.commit('updateAsciiBlocks', this.currentAsciiBlocks);
this.canTool = false;
break;
case "select":
@ -700,10 +734,10 @@ export default {
this.y = e.offsetY;
}
this.x = Math.floor(this.x / this.currentAscii.blockWidth);
this.y = Math.floor(this.y / this.currentAscii.blockHeight);
this.x = Math.floor(this.x / blockWidth);
this.y = Math.floor(this.y / blockHeight);
if(this.x === lastX && this.y === lastY) {
if (this.x === lastX && this.y === lastY) {
return;
}
this.$emit("coordsupdate", { x: this.x, y: this.y });
@ -810,9 +844,9 @@ export default {
for (y = 0; y < this.currentAscii.height; y++) {
if (
y >
Math.floor(this.selecting.startY / this.currentAscii.blockHeight) -
Math.floor(this.selecting.startY / blockHeight) -
1 &&
y < Math.floor(this.selecting.endY / this.currentAscii.blockHeight)
y < Math.floor(this.selecting.endY / blockHeight)
) {
if (!this.selectedBlocks[y]) {
this.selectedBlocks[y] = [];
@ -822,11 +856,11 @@ export default {
if (
x >
Math.ceil(
this.selecting.startX / this.currentAscii.blockWidth
this.selecting.startX / blockWidth
) -
1 &&
x <=
Math.ceil(this.selecting.endX / this.currentAscii.blockWidth) -
Math.ceil(this.selecting.endX / blockWidth) -
1
) {
if (this.currentAsciiBlocks[y] && this.currentAsciiBlocks[y][x]) {
@ -853,8 +887,8 @@ export default {
}
this.toolCtx.fillStyle = this.mircColours[indicatorColour];
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
const BLOCK_WIDTH = blockWidth;
const BLOCK_HEIGHT = blockHeight;
this.toolCtx.fillRect(
this.x * BLOCK_WIDTH,
@ -907,8 +941,8 @@ export default {
}
this.toolCtx.fillStyle = this.mircColours[indicatorColour];
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
const BLOCK_WIDTH = blockWidth;
const BLOCK_HEIGHT = blockHeight;
this.toolCtx.fillRect(
this.textEditing.startX * BLOCK_WIDTH,
@ -951,8 +985,8 @@ export default {
// - also works with the copy / paste
drawBrush(plain = false) {
this.clearToolCanvas();
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
const BLOCK_WIDTH = blockWidth;
const BLOCK_HEIGHT = blockHeight;
let targetBlock = this.currentAsciiBlocks[this.y][this.x];
let brushDiffX = 0;
@ -1005,6 +1039,14 @@ export default {
? this.mircColours[brushBlock.bg]
: "rgba(255,255,255,0.4)";
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(
brushX,
brushY,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
this.toolCtx.fillRect(
brushX,
brushY,
@ -1019,6 +1061,14 @@ export default {
BLOCK_WIDTH,
BLOCK_HEIGHT
);
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(
(asciiWidth - arrayX) * BLOCK_WIDTH,
brushY,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (this.mirrorY) {
@ -1028,6 +1078,14 @@ export default {
BLOCK_WIDTH,
BLOCK_HEIGHT
);
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(
brushX,
(asciiHeight - arrayY) * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (this.mirrorY && this.mirrorX) {
@ -1037,6 +1095,14 @@ export default {
BLOCK_WIDTH,
BLOCK_HEIGHT
);
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(
(asciiWidth - arrayX) * BLOCK_WIDTH,
(asciiHeight - arrayY) * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (this.canTool && brushBlock.bg !== null) {
@ -1230,8 +1296,8 @@ export default {
},
eraser() {
if (this.canTool) {
const BLOCK_WIDTH = this.currentAscii.blockWidth;
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
const BLOCK_WIDTH = blockWidth;
const BLOCK_HEIGHT = blockHeight;
let targetBlock = this.currentAsciiBlocks[this.y][this.x];