keyboard shortcuts in own component start, cut blocks, delete blocks in select
This commit is contained in:
parent
84606a455b
commit
5c64bb8d28
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
|
||||
<NewAscii />
|
||||
<EditAscii />
|
||||
<PasteAscii />
|
||||
|
|
@ -130,6 +131,7 @@ import EditAscii from "./components/modals/EditAscii.vue";
|
|||
import PasteAscii from "./components/modals/PasteAscii.vue";
|
||||
|
||||
import BrushCanvas from "./components/parts/BrushCanvas.vue";
|
||||
// import KeyboardShortcuts from "./components/parts/KeyboardShortcuts.vue";
|
||||
|
||||
import {
|
||||
parseMircAscii,
|
||||
|
|
@ -157,6 +159,7 @@ export default {
|
|||
PasteAscii,
|
||||
BrushLibrary,
|
||||
BrushCanvas,
|
||||
// KeyboardShortcuts
|
||||
},
|
||||
name: "Dashboard",
|
||||
data: () => ({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mircColours99, toolbarIcons, maxBrushSize } from '../../ascii';
|
||||
|
||||
export default {
|
||||
name: 'KeyboardShortcuts',
|
||||
mounted() {
|
||||
const thisIs = this;
|
||||
this.keyListener = function (e) {
|
||||
// Stop blocking input when modals are open
|
||||
if (this.isModalOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const ctrlKey = e.ctrlKey || e.metaKey;
|
||||
const shiftKey = e.shiftKey;
|
||||
|
||||
if (this.isTextEditing) {
|
||||
thisIs.canvasKeyDown(e.key);
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl Z here
|
||||
// skg - thanks for mac key suggestion, bro
|
||||
if (e.key === "z" && ctrlKey) {
|
||||
this.undo();
|
||||
}
|
||||
|
||||
// Ctrl Y here
|
||||
if (e.key === "y" && ctrlKey) {
|
||||
this.redo();
|
||||
}
|
||||
|
||||
// Ctrl C - copy blocks
|
||||
if (e.key === "c" && ctrlKey && !shiftKey) {
|
||||
if (this.selectedBlocks.length) {
|
||||
this.$store.commit(
|
||||
"selectBlocks",
|
||||
this.filterNullBlocks(this.selectedBlocks)
|
||||
);
|
||||
|
||||
this.$toasted.show("Copied blocks!", {
|
||||
type: "success",
|
||||
icon: "fa-check-circle",
|
||||
});
|
||||
|
||||
this.selectedBlocks = [];
|
||||
}
|
||||
}
|
||||
|
||||
// Ctrl V - paste blocks
|
||||
if (e.key === "v" && ctrlKey) {
|
||||
if (this.haveSelectBlocks) {
|
||||
this.$store.commit("pushBrushHistory", this.brushBlocks);
|
||||
this.$store.commit("brushBlocks", this.selectBlocks);
|
||||
this.$store.commit("changeTool", 4);
|
||||
}
|
||||
}
|
||||
|
||||
// Show / hide debug panel
|
||||
if (e.key === "d" && ctrlKey) {
|
||||
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(
|
||||
"toggleBrushLibrary",
|
||||
!this.brushLibraryState.visible
|
||||
);
|
||||
}
|
||||
|
||||
// New ASCII
|
||||
// Ctrl N doesn't seem to work in chrome? https://github.com/liftoff/GateOne/issues/290
|
||||
if (e.key === "m" && ctrlKey) {
|
||||
this.$store.commit("openModal", "new-ascii");
|
||||
}
|
||||
|
||||
// Edit ASCII
|
||||
if (e.key === "e" && ctrlKey) {
|
||||
this.$store.commit("openModal", "edit-ascii");
|
||||
}
|
||||
|
||||
// Paste ASCII
|
||||
if (e.key === "p" && ctrlKey) {
|
||||
this.$store.commit("openModal", "paste-ascii");
|
||||
}
|
||||
|
||||
// Export to clipboard
|
||||
if (e.key === "C" && ctrlKey && shiftKey) {
|
||||
let ascii = exportMirc();
|
||||
this.$copyText(ascii.output.join("")).then(
|
||||
(e) => {
|
||||
this.$toasted.show("Copied mIRC to clipboard!", {
|
||||
type: "success",
|
||||
});
|
||||
},
|
||||
(e) => {
|
||||
this.$toasted.show("Error when copying mIRC to clipboard!", {
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Export to txt
|
||||
if (e.key === "F" && ctrlKey && shiftKey) {
|
||||
let ascii = exportMirc();
|
||||
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
|
||||
}
|
||||
|
||||
if (
|
||||
e.key === "]" &&
|
||||
ctrlKey &&
|
||||
this.brushSizeHeight < this.maxBrushSize &&
|
||||
this.brushSizeHeight >= 1 &&
|
||||
this.brushSizeWidth < this.maxBrushSize &&
|
||||
this.brushSizeWidth >= 1
|
||||
) {
|
||||
this.$store.commit("updateBrushSize", {
|
||||
brushSizeHeight: parseInt(this.brushSizeHeight) + 1,
|
||||
brushSizeWidth: parseInt(this.brushSizeWidth) + 1,
|
||||
brushSizeType: this.brushSizeType,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
e.key === "[" &&
|
||||
ctrlKey &&
|
||||
this.brushSizeHeight <= this.maxBrushSize &&
|
||||
this.brushSizeHeight > 1 &&
|
||||
this.brushSizeWidth <= this.maxBrushSize &&
|
||||
this.brushSizeWidth > 1
|
||||
) {
|
||||
this.$store.commit("updateBrushSize", {
|
||||
brushSizeHeight: parseInt(this.brushSizeHeight) - 1,
|
||||
brushSizeWidth: parseInt(this.brushSizeWidth) - 1,
|
||||
brushSizeType: this.brushSizeType,
|
||||
});
|
||||
}
|
||||
|
||||
// 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) {
|
||||
// this.canKey = true
|
||||
// };
|
||||
|
||||
document.addEventListener("keydown", this.keyListener.bind(this));
|
||||
// document.addEventListener("keyup", this.keyListenerUp.bind(this));
|
||||
},
|
||||
computed: {
|
||||
isModalOpen() {
|
||||
return this.$store.getters.isModalOpen;
|
||||
},
|
||||
brushSizeHeight() {
|
||||
return this.$store.getters.brushSizeHeight;
|
||||
},
|
||||
brushSizeWidth() {
|
||||
return this.$store.getters.brushSizeWidth;
|
||||
},
|
||||
brushSizeType() {
|
||||
return this.$store.getters.brushSizeType;
|
||||
},
|
||||
currentAscii() {
|
||||
return this.$store.getters.currentAscii;
|
||||
},
|
||||
currentAsciiBlocks() {
|
||||
return this.$store.getters.currentAsciiBlocks;
|
||||
},
|
||||
currentTool() {
|
||||
return toolbarIcons[this.$store.getters.currentTool];
|
||||
},
|
||||
canFg() {
|
||||
return this.$store.getters.isTargettingFg;
|
||||
},
|
||||
canBg() {
|
||||
return this.$store.getters.isTargettingBg;
|
||||
},
|
||||
canText() {
|
||||
return this.$store.getters.isTargettingChar;
|
||||
},
|
||||
currentFg() {
|
||||
return this.$store.getters.currentFg;
|
||||
},
|
||||
currentBg() {
|
||||
return this.$store.getters.currentBg;
|
||||
},
|
||||
currentChar() {
|
||||
return this.$store.getters.currentChar;
|
||||
},
|
||||
isTextEditing() {
|
||||
return this.currentTool.name === "text";
|
||||
},
|
||||
isSelecting() {
|
||||
return this.currentTool.name === "select";
|
||||
},
|
||||
isDefault() {
|
||||
return this.currentTool.name === "default";
|
||||
},
|
||||
isBrushing() {
|
||||
return this.currentTool.name === "brush";
|
||||
},
|
||||
isSelected() {
|
||||
return (
|
||||
this.selecting.startX &&
|
||||
this.selecting.startY &&
|
||||
this.selecting.endX &&
|
||||
this.selecting.endY
|
||||
);
|
||||
},
|
||||
brushBlocks() {
|
||||
return this.$store.getters.brushBlocks;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
mirrorX() {
|
||||
return this.toolbarState.mirrorX;
|
||||
},
|
||||
mirrorY() {
|
||||
return this.toolbarState.mirrorY;
|
||||
},
|
||||
debugPanelState() {
|
||||
return this.$store.getters.debugPanel;
|
||||
},
|
||||
selectBlocks() {
|
||||
return this.$store.getters.selectBlocks;
|
||||
},
|
||||
haveSelectBlocks() {
|
||||
return !!this.selectBlocks.length;
|
||||
},
|
||||
mircColours() {
|
||||
return mircColours99;
|
||||
},
|
||||
brushLibraryState() {
|
||||
return this.$store.getters.brushLibraryState;
|
||||
},
|
||||
gridView() {
|
||||
return this.$store.getters.gridView;
|
||||
},
|
||||
maxBrushSize() {
|
||||
return maxBrushSize;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
undo() {
|
||||
this.$store.commit("undoBlocks");
|
||||
},
|
||||
redo() {
|
||||
this.$store.commit("redoBlocks");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
|
||||
:w="canvas.width"
|
||||
:h="canvas.height"
|
||||
:draggable="$store.getters.currentTool === 0"
|
||||
:draggable="isDefault"
|
||||
@resizestop="onCanvasResize"
|
||||
@dragstop="onCavasDragStop"
|
||||
:x="currentAscii.x"
|
||||
|
|
@ -71,6 +71,8 @@ import {
|
|||
blockHeight,
|
||||
maxBrushSize,
|
||||
fillNullBlocks,
|
||||
emptyBlock,
|
||||
getBlocksWidth,
|
||||
} from "../ascii";
|
||||
|
||||
export default {
|
||||
|
|
@ -116,7 +118,7 @@ export default {
|
|||
}
|
||||
|
||||
// Ctrl C - copy blocks
|
||||
if (e.key === "c" && ctrlKey && !shiftKey) {
|
||||
if (e.key === "c" && ctrlKey && !shiftKey && this.isSelected) {
|
||||
if (this.selectedBlocks.length) {
|
||||
this.$store.commit(
|
||||
"selectBlocks",
|
||||
|
|
@ -129,6 +131,64 @@ export default {
|
|||
});
|
||||
|
||||
this.selectedBlocks = [];
|
||||
|
||||
// Reset and hide the select after successful copy
|
||||
this.resetSelect()
|
||||
this.processSelect()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Delte blocks but do not save them when pressing Delete when selected
|
||||
if (e.key === "Delete" && this.isSelected) {
|
||||
if (this.selectedBlocks.length) {
|
||||
|
||||
for (let y = 0; y < this.selectedBlocks.length + 1; y++) {
|
||||
for (let x = 0; x < getBlocksWidth(this.selectedBlocks) + 1; x++) {
|
||||
if (this.selectedBlocks[y] && this.selectedBlocks[y][x]) {
|
||||
this.currentAsciiBlocks[y][x] = { ... emptyBlock }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset and hide the select after successful copy
|
||||
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
this.delayRedrawCanvas()
|
||||
|
||||
this.$toasted.show("Deleted blocks!", {
|
||||
type: "success",
|
||||
icon: "fa-check-circle",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Ctrl X - cut blocks
|
||||
if (e.key === "x" && ctrlKey && !shiftKey && this.isSelected) {
|
||||
if (this.selectedBlocks.length) {
|
||||
for (let y = 0; y < this.selectedBlocks.length + 1; y++) {
|
||||
for (let x = 0; x < getBlocksWidth(this.selectedBlocks) + 1; x++) {
|
||||
if (this.selectedBlocks[y] && this.selectedBlocks[y][x]) {
|
||||
this.currentAsciiBlocks[y][x] = { ... emptyBlock }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$store.commit(
|
||||
"selectBlocks",
|
||||
this.filterNullBlocks(this.selectedBlocks)
|
||||
);
|
||||
|
||||
this.selectedBlocks = [];
|
||||
|
||||
// Reset and hide the select after successful copy
|
||||
|
||||
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
// this.delayRedrawCanvas()
|
||||
|
||||
this.$toasted.show("Cut blocks!", {
|
||||
type: "success",
|
||||
icon: "fa-check-circle",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -246,12 +306,7 @@ export default {
|
|||
}
|
||||
};
|
||||
|
||||
// this.keyListenerUp = function (e) {
|
||||
// this.canKey = true
|
||||
// };
|
||||
|
||||
document.addEventListener("keydown", this.keyListener.bind(this));
|
||||
// document.addEventListener("keyup", this.keyListenerUp.bind(this));
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
|
|
@ -323,7 +378,9 @@ export default {
|
|||
return this.currentTool.name === "text";
|
||||
},
|
||||
isTextEditingValues() {
|
||||
return this.textEditing.startX !== null && this.textEditing.startY !== null;
|
||||
return (
|
||||
this.textEditing.startX !== null && this.textEditing.startY !== null
|
||||
);
|
||||
},
|
||||
isSelecting() {
|
||||
return this.currentTool.name === "select";
|
||||
|
|
@ -405,6 +462,8 @@ export default {
|
|||
this.canvas.height = this.currentAscii.height * blockHeight;
|
||||
|
||||
this.delayRedrawCanvas();
|
||||
|
||||
document.title = `asciibird - ${this.currentAscii.title}`;
|
||||
}
|
||||
},
|
||||
currentTool() {
|
||||
|
|
@ -416,13 +475,7 @@ export default {
|
|||
startY: null,
|
||||
};
|
||||
|
||||
this.selecting = {
|
||||
startX: null,
|
||||
startY: null,
|
||||
endX: null,
|
||||
endY: null,
|
||||
canSelect: false,
|
||||
};
|
||||
this.resetSelect()
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
@ -455,6 +508,15 @@ export default {
|
|||
this.$store.commit("redoBlocks");
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
resetSelect() {
|
||||
this.selecting = {
|
||||
startX: null,
|
||||
startY: null,
|
||||
endX: null,
|
||||
endY: null,
|
||||
canSelect: false,
|
||||
};
|
||||
},
|
||||
redrawSelect() {
|
||||
if (this.currentAsciiBlocks.length) {
|
||||
this.clearToolCanvas();
|
||||
|
|
@ -774,13 +836,13 @@ export default {
|
|||
|
||||
case "eraser":
|
||||
this.canTool = false;
|
||||
|
||||
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
break;
|
||||
|
||||
case "fill-eraser":
|
||||
case "fill":
|
||||
this.canTool = false;
|
||||
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
break;
|
||||
|
||||
case "select":
|
||||
|
|
@ -813,13 +875,11 @@ export default {
|
|||
case "fill":
|
||||
this.fill();
|
||||
this.canTool = false;
|
||||
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
break;
|
||||
|
||||
case "fill-eraser":
|
||||
this.fill(true);
|
||||
this.canTool = false;
|
||||
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
break;
|
||||
|
||||
case "brush":
|
||||
|
|
@ -1031,7 +1091,7 @@ export default {
|
|||
// if (clear) {
|
||||
// this.clearToolCanvas();
|
||||
// }
|
||||
|
||||
|
||||
this.drawRectangleBlock(this.x, this.y);
|
||||
|
||||
if (this.isTextEditing) {
|
||||
|
|
@ -1062,7 +1122,6 @@ export default {
|
|||
}
|
||||
},
|
||||
drawTextIndicator() {
|
||||
|
||||
this.drawRectangleBlock(this.textEditing.startX, this.textEditing.startY);
|
||||
|
||||
if (this.mirrorX) {
|
||||
|
|
@ -1407,8 +1466,7 @@ export default {
|
|||
for (let y = 0; y < this.brushBlocks.length; y++) {
|
||||
for (let x = 0; x < this.brushBlocks[0].length; x++) {
|
||||
const brushX = this.x * blockWidth + x * blockWidth - brushDiffX;
|
||||
const brushY =
|
||||
this.y * blockHeight + y * blockHeight - brushDiffY;
|
||||
const brushY = this.y * blockHeight + y * blockHeight - brushDiffY;
|
||||
|
||||
const arrayY = brushY / blockHeight;
|
||||
const arrayX = brushX / blockWidth;
|
||||
|
|
|
|||
Loading…
Reference in New Issue