jewbird
/
asciibird
3
3
Fork 0
程式碼 問題 合併請求 版本發布 動態

flip and rotate brush with E and Q when in brush mode

This commit is contained in:
Hugh Bord 2021-08-08 13:24:06 +10:00
父節點 8a87b8f9b2
當前提交 99f8678bc0
共有 5 個檔案被更改，包括 89 行新增 和 44 行删除
顯示統計資料 下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案

1
README.md
查看文件

@ -22,7 +22,6 @@
# FOCUSING ON NOW
* Cut / copy then paste with ctrl v
* drawBrush preview flip / rotate
* Type letter when choosing char, leave char panel open after
* Modals

2
src/Dashboard.vue
查看文件

@ -320,7 +320,7 @@ export default {
closeTab(key) {
this.$dialog
.confirm({
title: `Close ${this.currentAscii.name}?`,
title: `Close ${this.currentAscii.title}?`,
text: "This action cannot be undone and the ASCII will be gone.",
icon: "info",
})

7
src/ascii.js
查看文件

@ -142,43 +142,36 @@ export const toolbarIcons = [{
name: 'default',
icon: 'mouse-pointer',
fa: 'fas',
svgPath: 'assets/mouse-pointer-solid.svg',
},
{
name: 'select',
icon: 'square',
fa: 'far',
svgPath: 'assets/square-regular.svg',
},
{
name: 'text',
icon: 'font',
fa: 'fas',
svgPath: 'assets/font-solid.svg',
},
{
name: 'fill',
icon: 'fill-drip',
fa: 'fas',
svgPath: 'assets/fill-drip-solid.svg',
},
{
name: 'brush',
icon: 'paint-brush',
fa: 'fas',
svgPath: 'assets/paint-brush-solid.svg',
},
{
name: 'dropper',
icon: 'eye-dropper',
fa: 'fas',
svgPath: 'assets/eye-dropper-solid.svg',
},
{
name: 'eraser',
icon: 'eraser',
fa: 'fas',
svgPath: 'assets/eraser-solid.svg',
},
];

43
src/store/index.js
查看文件

@ -5,7 +5,8 @@ import LZString from 'lz-string';
import {
blockWidth,
blockHeight,
cyrb53
cyrb53,
getBlocksWidth
} from "../ascii";
Vue.use(Vuex);
@ -201,6 +202,44 @@ export default new Vuex.Store({
toggleGridView(state, payload) {
state.gridView = payload;
},
//
// Brush stuff
//
flipRotateBlocks(state, payload) {
let tempBlocks = JSON.parse(LZString.decompressFromUTF16(state.brushBlocks))
let parsedBlocks = [];
let x = 0;
let y = 0;
switch(payload.type) {
case 'flip':
tempBlocks = tempBlocks.reverse()
for(y = 0; y < tempBlocks.length; y++) {
parsedBlocks[y] = tempBlocks[y];
for (x = 0; x < getBlocksWidth(tempBlocks); x++) {
parsedBlocks[y][x] = tempBlocks[y][x];
}
}
break;
case 'rotate':
for (y = 0; y < tempBlocks.length; y++) {
parsedBlocks[y] = tempBlocks[y].reverse();
for (x = 0; x < getBlocksWidth(tempBlocks); x++) {
parsedBlocks[y][x] = tempBlocks[y][x];
}
}
break;
}
state.brushBlocks = LZString.compressToUTF16(JSON.stringify(parsedBlocks));
},
// Brush Library
pushBrushHistory(state, payload) {
// Check and remove duplicate brushes based on hash value
let hashValue = cyrb53(JSON.stringify(payload))
@ -235,6 +274,8 @@ export default new Vuex.Store({
return item.hash !== hashValue
});
},
// Modals / Tabs
openModal(state, type) {
switch (type) {
case 'new-ascii':

80
src/views/Editor.vue
查看文件

@ -81,10 +81,8 @@ export default {
this.ctx = this.$refs.canvas.getContext("2d");
this.toolCtx = this.$refs.canvastools.getContext("2d");
this.canvas.width =
this.currentAscii.width * blockWidth;
this.canvas.height =
this.currentAscii.height * blockHeight;
this.canvas.width = this.currentAscii.width * blockWidth;
this.canvas.height = this.currentAscii.height * blockHeight;
this.delayRedrawCanvas();
this.$store.commit("changeTool", 0);
@ -98,14 +96,14 @@ export default {
e.preventDefault();
const ctrlKey = e.ctrlKey || e.metaKey;
const shiftKey = e.shiftKey;
if (this.isTextEditing) {
thisIs.canvasKeyDown(e.key);
return;
}
const ctrlKey = e.ctrlKey || e.metaKey;
const shiftKey = e.shiftKey;
// Ctrl Z here
// skg - thanks for mac key suggestion, bro
if (e.key === "z" && ctrlKey) {
@ -220,7 +218,22 @@ export default {
});
}
this.canKey = false
// Hopefully we can still pick up the previous inputs
// while in brush mode
if (this.isBrushing) {
if (e.key === "e") {
this.$store.commit("flipRotateBlocks", {
type: "flip",
});
}
if (e.key === "q") {
this.$store.commit("flipRotateBlocks", {
type: "rotate",
});
}
return;
}
};
// this.keyListenerUp = function (e) {
@ -302,6 +315,9 @@ export default {
isSelecting() {
return this.currentTool.name === "select";
},
isBrushing() {
return this.currentTool.name === "brush";
},
isSelected() {
return (
this.selecting.startX &&
@ -347,8 +363,8 @@ export default {
return this.$store.getters.brushLibraryState;
},
gridView() {
return this.$store.getters.gridView
}
return this.$store.getters.gridView;
},
},
watch: {
currentAscii(val, old) {
@ -360,10 +376,8 @@ export default {
this.currentAscii.height * blockHeight
);
this.canvas.width =
this.currentAscii.width * blockWidth;
this.canvas.height =
this.currentAscii.height * blockHeight;
this.canvas.width = this.currentAscii.width * blockWidth;
this.canvas.height = this.currentAscii.height * blockHeight;
this.delayRedrawCanvas();
@ -395,11 +409,17 @@ export default {
this.canTool = false;
}
},
gridView(val,old) {
gridView(val, old) {
if (val !== old) {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
}
}
},
brushBlocks() {
this.clearToolCanvas();
if (this.isMouseOnCanvas) {
this.drawBrush();
}
},
},
methods: {
undo() {
@ -465,11 +485,13 @@ export default {
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.strokeStyle = "rgba(0, 0, 0, 0.2)";
this.ctx.strokeRect(
canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT
canvasX,
canvasY,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
}
@ -495,9 +517,7 @@ export default {
onCanvasResize(left, top, width, height) {
const blocks = this.currentAsciiBlocks;
const canvasBlockHeight = Math.floor(
height / blockHeight
);
const canvasBlockHeight = Math.floor(height / blockHeight);
const canvasBlockWidth = Math.floor(width / blockWidth);
// Previously we had an if statement to check if we needed new blocks
@ -844,9 +864,7 @@ export default {
for (y = 0; y < this.currentAscii.height; y++) {
if (
y >
Math.floor(this.selecting.startY / blockHeight) -
1 &&
y > Math.floor(this.selecting.startY / blockHeight) - 1 &&
y < Math.floor(this.selecting.endY / blockHeight)
) {
if (!this.selectedBlocks[y]) {
@ -855,14 +873,8 @@ export default {
for (x = 0; x < this.currentAscii.width; x++) {
if (
x >
Math.ceil(
this.selecting.startX / blockWidth
) -
1 &&
x <=
Math.ceil(this.selecting.endX / blockWidth) -
1
x > Math.ceil(this.selecting.startX / blockWidth) - 1 &&
x <= Math.ceil(this.selecting.endX / blockWidth) - 1
) {
if (this.currentAsciiBlocks[y] && this.currentAsciiBlocks[y][x]) {
curBlock = { ...this.currentAsciiBlocks[y][x] };