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

less redraw on cavas, options modal start

This commit is contained in:
Hugh Bord 2021-10-02 10:55:39 +10:00
parent 980d62d892
commit b771c9a759
4 changed files with 187 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Dashboard.vue
View File

@ -1,6 +1,7 @@
<template>
<div id="app">
<NewAscii />
<Options />
<EditAscii v-if="asciibirdMeta.length" />
<PasteAscii />
@ -49,6 +50,13 @@
>
Close Ascii
</li>
<li
@click="$store.commit('openModal', 'options')"
class="ml-1 border-b"
>
Options
</li>
<li @click="startImport('mirc')" class="ml-1">Import mIRC from File</li>
<li
@click="startExport('file')"
@ -82,7 +90,6 @@
Save Asciibird State
</li>
<li @click="startImport('asb')" class="ml-1">Load Asciibird State</li>
<li @click="clearCache()" class="ml-1">Reset State</li>
</ul>
</context-menu>
@ -204,6 +211,7 @@ import ColourPicker from "./components/parts/ColourPicker.vue";
import ContextMenu from "./components/parts/ContextMenu.vue";
import NewAscii from "./components/modals/NewAscii.vue";
import Options from "./components/modals/Options.vue";
import EditAscii from "./components/modals/EditAscii.vue";
import PasteAscii from "./components/modals/PasteAscii.vue";
@ -249,6 +257,7 @@ export default {
BrushPreview,
KeyboardShortcuts,
LayersLibrary,
Options
},
name: "Dashboard",
data: () => ({
@ -281,9 +290,9 @@ export default {
this.currentTool.icon ?? "mouse-pointer",
];
},
options() {
return this.$store.getters.options;
},
// options() {
// return this.$store.getters.options;
// },
canFg() {
return this.$store.getters.isTargettingFg;
},
@ -486,10 +495,6 @@ export default {
}
});
},
clearCache() {
localStorage.clear();
window.location.href = "/";
},
captureMouse(event) {
this.dashboardX = event.pageX;
this.dashboardY = event.pageY;

109
src/components/modals/Options.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<t-modal
name="options-modal"
header="ASCIIBIRD Options"
:click-to-close="false"
:esc-to-close="true"
@closed="$store.commit('closeModal', 'options')"
>
<template v-slot:default>
<div>
<ul>
<li> Redraw canvas speed? </li>
<li>Render blocks off screen</li>
<li>Undo history?</li>
<div class="mt-3 p-2 bg-red-300 rounded-md cursor-pointer" @click="clearCache()">Clear and Reset ASCIIBIRD</div>
</ul>
</div>
</template>
<template v-slot:footer>
<div
class="flex justify-between"
@click="$store.commit('closeModal', 'options')"
>
<t-button
type="button"
class="p-2"
>
Cancel
</t-button>
<t-button
type="button"
class="p-2"
@click="initiateNewAscii()"
>
Ok
</t-button>
</div>
</template>
</t-modal>
</template>
<script>
export default {
name: "Options",
created() {},
mounted() {
if (this.showOptionsModal) {
this.open()
} else {
this.close()
}
},
data: () => ({
forms: {
createAscii: {
width: 80,
height: 30,
title: "ascii",
},
},
}),
computed: {
showOptionsModal() {
return this.$store.getters.modalState.options;
},
},
watch: {
showOptionsModal(val) {
if (val === true) {
this.open();
}
if (val === false) {
this.close();
}
},
},
methods: {
open() {
this.$modal.show("options-modal");
this.forms.createAscii.title = `New ASCII ${
this.$store.getters.asciibirdMeta.length + 1
}`;
},
close() {
this.$modal.hide("options-modal");
this.forms.createAscii.width = 80;
this.forms.createAscii.height = 30;
this.forms.createAscii.title = "New ASCII";
},
clearCache() {
localStorage.clear();
window.location.reload()
},
},
};
</script>

15
src/store/index.js
View File

@ -26,6 +26,7 @@ export default new Vuex.Store({
newAscii: false,
editAscii: false,
pasteAscii: false,
options: false,
},
isKeyboardDisabled: false,
// The various options of ASCIIBIRD will eventually
@ -33,6 +34,10 @@ export default new Vuex.Store({
options: {
defaultBg: 1,
defaultFg: 0,
renderOffScreen: true,
undoLimit: 50,
tabLimit: 12,
},
// Current tab user is viewing
tab: 0,
@ -476,6 +481,11 @@ export default new Vuex.Store({
state.modalState.pasteAscii = true;
state.isKeyboardDisabled = true;
break;
case 'options':
state.modalState.options = true;
state.isKeyboardDisabled = true;
break;
}
},
closeModal(state, type) {
@ -494,6 +504,11 @@ export default new Vuex.Store({
state.modalState.pasteAscii = false;
state.isKeyboardDisabled = false;
break;
case 'options':
state.modalState.options = false;
state.isKeyboardDisabled = false;
break;
}
},
closeTab(state, tab) {

68
src/views/Editor.vue
View File

@ -104,6 +104,11 @@ export default {
},
isMouseOnCanvas: false,
selectedBlocks: [],
tempBlocks: {
new: [],
old: [],
},
}),
props: ["updateCanvas", "yOffset"],
computed: {
@ -241,20 +246,13 @@ export default {
this.canvas.width = this.currentAsciiWidth * blockWidth;
this.canvas.height = this.currentAsciiHeight * blockHeight;
this.delayRedrawCanvas();
document.title = `asciibird - ${this.currentAscii.title}`;
// this.delayRedrawCanvas();
}
},
currentAsciiLayerBlocks() {
this.delayRedrawCanvas();
},
currentAsciiLayers() {
this.delayRedrawCanvas();
},
currentSelectedLayer(val, old) {
this.delayRedrawCanvas();
if (old.visible) {
this.warnInvisibleLayer();
}
@ -294,7 +292,7 @@ export default {
}
},
blockSizeMultiplier() {
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
},
// Save text to store when finished
isTextEditing(val, old) {
@ -312,14 +310,42 @@ export default {
this.drawTextIndicator();
this.drawIndicator();
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
}
},
selecting(val) {
this.$emit("selecting", val);
},
yOffset() {
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
},
asciiBlockAtXy(val, old) {
// Keep track of what blocks have changed
// if (this.canTool) {
// this.tempBlocks.new = this.tempBlocks.new.filter(obj => obj.x !== this.x);
// this.tempBlocks.new = this.tempBlocks.new.filter(obj => obj.y !== this.y);
// this.tempBlocks.new.push({
// x: this.x,
// y: this.y,
// block: {... val } })
// this.tempBlocks.old = this.tempBlocks.old.filter(obj => obj.x !== this.x);
// this.tempBlocks.old = this.tempBlocks.old.filter(obj => obj.y !== this.y);
// this.tempBlocks.old.push({
// x: this.x,
// y: this.y,
// block: {... old } })
// }
},
},
methods: {
@ -337,11 +363,11 @@ export default {
},
undo() {
this.$store.commit("undoBlocks");
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
},
redo() {
this.$store.commit("redoBlocks");
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
},
resetSelect() {
this.selecting = {
@ -457,17 +483,17 @@ export default {
this.$refs.canvasdrag.width = width;
this.$refs.canvasdrag.height = height;
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
},
onCavasDragStop(x, y) {
// Update left and top in panel
this.top = y;
this.$store.commit("changeAsciiCanvasState", { x, y });
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
},
onCanvasDrag(x, y) {
this.top = y;
this.delayRedrawCanvas();
// this.delayRedrawCanvas();
},
// Mouse Up, Down and Move
canvasMouseUp() {
@ -502,7 +528,13 @@ export default {
break;
}
this.delayRedrawCanvas();
// this.tempBlocks = {
// new: [],
// old: [],
// }
},
canvasMouseDown() {
if (this.isDefault) return;
@ -651,8 +683,8 @@ export default {
if (this.redraw) {
this.redraw = false;
requestAnimationFrame(() => {
this.redraw = true;
this.redrawCanvas();
this.redraw = true;
});
}
},