better layers
This commit is contained in:
parent
590b43a378
commit
59a87b661b
|
|
@ -11,29 +11,133 @@ export default {
|
|||
const thisIs = this;
|
||||
this.keyListener = function (e) {
|
||||
// Stop blocking input when modals are open
|
||||
if (this.isModalOpen) {
|
||||
// Whatever this char "'\0'" is it'd occur even without pressing any keys
|
||||
// This fixes it
|
||||
if (this.isModalOpen || e.key === "\0") {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// When press escape go back to default took
|
||||
if (e.key === "Escape" && !this.isDefault) {
|
||||
this.clearToolCanvas();
|
||||
this.$store.commit("changeTool", 0);
|
||||
return;
|
||||
}
|
||||
|
||||
// Change char when car picker is open
|
||||
if (this.toolbarState.isChoosingChar && e.key.length === 1) {
|
||||
this.$store.commit("changeChar", e.key);
|
||||
return;
|
||||
}
|
||||
|
||||
// Keys without any ctrl, shift or alt are also integrated
|
||||
// and are available only in their toolbar context
|
||||
// for example pressing E in default mode will toggle edit ascii
|
||||
// E in text mode will type the character E
|
||||
// E in brush mode will flip the brush
|
||||
|
||||
// Copy and paste,
|
||||
const ctrlKey = e.ctrlKey || e.metaKey;
|
||||
|
||||
// Files / system related
|
||||
const shiftKey = e.shiftKey;
|
||||
|
||||
// Alt key functions are toolbar related
|
||||
const altKey = e.altKey;
|
||||
|
||||
// Used for text typing
|
||||
if (this.isTextEditing) {
|
||||
thisIs.canvasKeyDown(e.key);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show / hide grid view
|
||||
if (e.key === "g" && altKey) {
|
||||
this.$store.commit("toggleGridView", !this.gridView);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl Z here
|
||||
// skg - thanks for mac key suggestion, bro
|
||||
if (e.key === "z" && ctrlKey) {
|
||||
this.undo();
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl Y here
|
||||
if (e.key === "y" && ctrlKey) {
|
||||
this.redo();
|
||||
return;
|
||||
}
|
||||
|
||||
// Change toolbar icon
|
||||
if (
|
||||
Number.parseInt(e.key) >= 1 &&
|
||||
Number.parseInt(e.key) <= 8 &&
|
||||
!this.toolbarState.isChoosingFg &&
|
||||
!this.toolbarState.isChoosingBg &&
|
||||
altKey
|
||||
) {
|
||||
this.$store.commit("changeTool", Number.parseInt(e.key - 1));
|
||||
this.clearToolCanvas();
|
||||
return;
|
||||
}
|
||||
|
||||
// Swap colours
|
||||
if (e.key === "r" && altKey) {
|
||||
let bg = this.currentBg;
|
||||
let fg = this.currentFg;
|
||||
|
||||
this.$store.commit("changeColourFg", bg);
|
||||
this.$store.commit("changeColourBg", fg);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show FG
|
||||
if (e.key === "f" && altKey && !ctrlKey) {
|
||||
this.$store.commit(
|
||||
"changeIsUpdatingFg",
|
||||
!this.toolbarState.isChoosingFg
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show BG
|
||||
if (e.key === "b" && altKey && !ctrlKey) {
|
||||
this.$store.commit(
|
||||
"changeIsUpdatingBg",
|
||||
!this.toolbarState.isChoosingBg
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show Character select
|
||||
if (e.key === "c" && altKey && !ctrlKey) {
|
||||
this.$store.commit(
|
||||
"changeIsUpdatingChar",
|
||||
!this.toolbarState.isChoosingChar
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Choose FG or BG with Keyboard
|
||||
if (
|
||||
Number.parseInt(e.key) >= 0 &&
|
||||
Number.parseInt(e.key) <= 9 &&
|
||||
(this.toolbarState.isChoosingFg || this.toolbarState.isChoosingBg)
|
||||
) {
|
||||
if (this.toolbarState.isChoosingFg) {
|
||||
this.$store.commit("changeColourFg", Number.parseInt(e.key));
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.toolbarState.isChoosingBg) {
|
||||
this.$store.commit("changeColourBg", Number.parseInt(e.key));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Ctrl C - copy blocks
|
||||
|
|
@ -50,7 +154,83 @@ export default {
|
|||
});
|
||||
|
||||
this.selectedBlocks = [];
|
||||
|
||||
// Reset and hide the select after successful copy
|
||||
this.resetSelect();
|
||||
this.processSelect();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// 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.currentAsciiLayerBlocks[y][x] = { ...emptyBlock };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset and hide the select after successful copy
|
||||
this.$store.commit(
|
||||
"updateAsciiBlocks",
|
||||
this.currentAsciiLayerBlocks
|
||||
);
|
||||
this.delayRedrawCanvas();
|
||||
|
||||
this.$toasted.show("Deleted blocks!", {
|
||||
type: "success",
|
||||
icon: "fa-check-circle",
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// 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.currentAsciiLayerBlocks[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.currentAsciiLayerBlocks
|
||||
);
|
||||
// this.delayRedrawCanvas()
|
||||
|
||||
this.$toasted.show("Cut blocks!", {
|
||||
type: "success",
|
||||
icon: "fa-check-circle",
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl V - paste blocks
|
||||
|
|
@ -60,40 +240,47 @@ export default {
|
|||
this.$store.commit("brushBlocks", this.selectBlocks);
|
||||
this.$store.commit("changeTool", 4);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Show / hide debug panel
|
||||
if (e.key === "d" && ctrlKey) {
|
||||
if (e.key === "d" && this.isDefault) {
|
||||
this.$store.commit("toggleDebugPanel", !this.debugPanelState.visible);
|
||||
}
|
||||
|
||||
// Show / hide grid view
|
||||
if (e.key === "g" && ctrlKey) {
|
||||
this.$store.commit("toggleGridView", !this.toolbarState.gridView);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show / hide brush library
|
||||
if (e.key === "b" && ctrlKey) {
|
||||
if (e.key === "l" && this.isDefault) {
|
||||
this.$store.commit(
|
||||
"toggleBrushLibrary",
|
||||
!this.brushLibraryState.visible
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// New ASCII
|
||||
// Ctrl N doesn't seem to work in chrome? https://github.com/liftoff/GateOne/issues/290
|
||||
if (e.key === "m" && ctrlKey) {
|
||||
if (e.key === "n" && this.isDefault && !this.isTextEditing) {
|
||||
this.$store.commit("openModal", "new-ascii");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Edit ASCII
|
||||
if (e.key === "e" && ctrlKey) {
|
||||
if (e.key === "e" && this.isDefault && !this.isTextEditing) {
|
||||
this.$store.commit("openModal", "edit-ascii");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Paste ASCII
|
||||
if (e.key === "p" && ctrlKey) {
|
||||
if (e.key === "p" && this.isDefault && !this.isTextEditing) {
|
||||
this.$store.commit("openModal", "paste-ascii");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Export to clipboard
|
||||
|
|
@ -111,12 +298,16 @@ export default {
|
|||
});
|
||||
}
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Export to txt
|
||||
if (e.key === "F" && ctrlKey && shiftKey) {
|
||||
let ascii = exportMirc();
|
||||
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
|
|
@ -132,6 +323,8 @@ export default {
|
|||
brushSizeWidth: parseInt(this.brushSizeWidth) + 1,
|
||||
brushSizeType: this.brushSizeType,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
|
|
@ -147,6 +340,8 @@ export default {
|
|||
brushSizeWidth: parseInt(this.brushSizeWidth) - 1,
|
||||
brushSizeType: this.brushSizeType,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Hopefully we can still pick up the previous inputs
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
Add Layer
|
||||
</t-button>
|
||||
|
||||
<hr>
|
||||
<hr />
|
||||
|
||||
<div class="w-full bg-white rounded-lg shadow">
|
||||
<ul class="divide-y-2 divide-gray-100 reverseorder">
|
||||
|
|
@ -24,15 +24,11 @@
|
|||
type="button"
|
||||
class="rounded-xl"
|
||||
@click="toggleLayer(key)"
|
||||
:disabled="!canToggleLayer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="[
|
||||
'fas',
|
||||
layer.visible ? 'eye' : 'eye-slash',
|
||||
]"
|
||||
/>
|
||||
</t-button><br>
|
||||
:icon="['fas', layer.visible ? 'eye' : 'eye-slash']"
|
||||
/> </t-button
|
||||
><br />
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
|
|
@ -40,16 +36,11 @@
|
|||
@click="removeLayer(key)"
|
||||
:disabled="!canToggleLayer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'trash']"
|
||||
/>
|
||||
<font-awesome-icon :icon="['fas', 'trash']" />
|
||||
</t-button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full"
|
||||
@click="changeLayer(key)"
|
||||
>
|
||||
<div class="w-full" @click="changeLayer(key)">
|
||||
<div class="flex text-right">
|
||||
<div class="w-full">
|
||||
<t-card class="w-full">
|
||||
|
|
@ -66,8 +57,8 @@
|
|||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'chevron-circle-up']"
|
||||
/>
|
||||
</t-button><br>
|
||||
/> </t-button
|
||||
><br />
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
|
|
@ -101,9 +92,7 @@
|
|||
export default {
|
||||
name: "Layers",
|
||||
created() {},
|
||||
data: () => ({
|
||||
dragging: false,
|
||||
}),
|
||||
data: () => ({}),
|
||||
computed: {
|
||||
currentAsciiLayers() {
|
||||
return this.$store.getters.currentAsciiLayers;
|
||||
|
|
@ -119,38 +108,30 @@ export default {
|
|||
toolbarState() {
|
||||
return this.$tore.getters.toolbarState;
|
||||
},
|
||||
lastVisible() {
|
||||
let visibleCount = 0;
|
||||
|
||||
for (let i = 0; i < this.currentAsciiLayers.length; i++) {
|
||||
if (this.currentAsciiLayers[i].visible) {
|
||||
visibleCount += 1;
|
||||
}
|
||||
}
|
||||
|
||||
return visibleCount === 1;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentAsciiLayers() {
|
||||
this.selectBestLayer()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectBestLayer() {
|
||||
let found = false;
|
||||
this.currentAsciiLayers.map((item, key) => {
|
||||
if (item.visible) {
|
||||
this.changeLayer(key);
|
||||
found = true
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// If there's no visible layers we'll target the first one always
|
||||
if (!found) {
|
||||
this.changeLayer(0)
|
||||
}
|
||||
},
|
||||
selectedLayerClass(key) {
|
||||
// Invisble layers are red
|
||||
if (
|
||||
this.currentAsciiLayers[key].visible === false &&
|
||||
key === this.selectedLayer
|
||||
) {
|
||||
// if (this.currentAsciiLayers[key + 1]) {
|
||||
// this.changeLayer(key + 1);
|
||||
// } else if (this.currentAsciiLayers[key - 1]) {
|
||||
// this.changeLayer(key - 1);
|
||||
// }
|
||||
|
||||
this.changeLayer(0)
|
||||
|
||||
// this.$toasted.show("Attempting to edit invisible layer!", {
|
||||
// type: "error",
|
||||
// });
|
||||
}
|
||||
|
||||
if (!this.currentAsciiLayers[key].visible) {
|
||||
return "bg-red-200";
|
||||
}
|
||||
|
|
@ -170,9 +151,7 @@ export default {
|
|||
this.$store.commit("changeLayer", key);
|
||||
},
|
||||
toggleLayer(key) {
|
||||
if (this.lastVisible || key !== this.selectedLayer) {
|
||||
this.$store.commit("toggleLayer", key);
|
||||
}
|
||||
this.$store.commit("toggleLayer", key);
|
||||
},
|
||||
upLayer(key) {
|
||||
this.$store.commit("upLayer", key);
|
||||
|
|
|
|||
|
|
@ -645,7 +645,13 @@ export default {
|
|||
currentAsciiLayers() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
currentSelectedLayer() {
|
||||
this.delayRedrawCanvas();
|
||||
this.warnInvisibleLayer();
|
||||
},
|
||||
currentTool() {
|
||||
this.warnInvisibleLayer();
|
||||
|
||||
switch (this.currentTool.name) {
|
||||
case "default":
|
||||
// Reset default values for tools
|
||||
|
|
@ -688,6 +694,17 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
warnInvisibleLayer() {
|
||||
if (!this.currentSelectedLayer.visible) {
|
||||
this.$toasted.show("You are trying to edit an invisible layer!!", {
|
||||
type: "error",
|
||||
icon: "fa-check-cross",
|
||||
singleton: true,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
},
|
||||
checkVisible(top) {
|
||||
return checkVisible(top, top - this.blockHeight);
|
||||
},
|
||||
|
|
@ -1393,13 +1410,7 @@ export default {
|
|||
//
|
||||
// Functions related to drawBrush function bellow
|
||||
//
|
||||
drawBrushBlocks(
|
||||
brushX,
|
||||
brushY,
|
||||
brushBlock,
|
||||
target = null,
|
||||
plain = false
|
||||
) {
|
||||
drawBrushBlocks(brushX, brushY, brushBlock, target = null, plain = false) {
|
||||
const arrayY = brushY / blockHeight;
|
||||
const arrayX = brushX / blockWidth;
|
||||
const asciiWidth = this.currentAsciiWidth;
|
||||
|
|
@ -1678,37 +1689,16 @@ export default {
|
|||
if (this.currentAsciiLayerBlocks[arrayY][arrayX]) {
|
||||
if (!plain) {
|
||||
if (this.canBg) {
|
||||
this.drawBrushBlocks(
|
||||
brushX,
|
||||
brushY,
|
||||
brushBlock,
|
||||
"bg"
|
||||
);
|
||||
this.drawBrushBlocks(brushX, brushY, brushBlock, "bg");
|
||||
}
|
||||
|
||||
if (this.canFg) {
|
||||
this.drawBrushBlocks(
|
||||
brushX,
|
||||
brushY,
|
||||
brushBlock,
|
||||
"fg"
|
||||
);
|
||||
this.drawBrushBlocks(brushX, brushY, brushBlock, "fg");
|
||||
}
|
||||
|
||||
this.drawBrushBlocks(
|
||||
brushX,
|
||||
brushY,
|
||||
brushBlock,
|
||||
null
|
||||
);
|
||||
this.drawBrushBlocks(brushX, brushY, brushBlock, null);
|
||||
} else {
|
||||
this.drawBrushBlocks(
|
||||
brushX,
|
||||
brushY,
|
||||
brushBlock,
|
||||
null,
|
||||
true
|
||||
);
|
||||
this.drawBrushBlocks(brushX, brushY, brushBlock, null, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue