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

remembers ascii and panel positions in state

This commit is contained in:
Hugh Bord 2021-04-02 09:01:36 +10:00
parent 4b7be30e64
commit d497cce809
5 changed files with 81 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/Dashboard.vue
View File

@ -45,7 +45,7 @@
<div>
<t-button @click="createClick()" class="ml-1">New ASCII</t-button>
<t-button @click="clearCache()" v-if="this.$store.getters.asciibirdMeta.length" class="ml-1"
<t-button @click="clearCache()" class="ml-1"
>Clear and Refresh</t-button
>
<t-button @click="startImport('mirc')" class="ml-1">Import mIRC</t-button>
@ -106,7 +106,7 @@ import Editor from './views/Editor.vue';
// import * as Anser from "anser";
import CharPicker from './components/parts/CharPicker.vue';
import ColourPicker from './components/parts/ColourPicker.vue';
import pako from 'pako';
// import pako from 'pako';
export default {
async created() {
@ -160,11 +160,6 @@ export default {
case 'mirc':
this.mircAsciiImport(fileReader.result, filename);
break;
// default:
// this.importAsciibirdState(fileReader.result, filename)
// console.log("Nah")
// break;
}
});
@ -284,6 +279,8 @@ export default {
blockWidth: 8 * this.$store.getters.blockSizeMultiplier,
blockHeight: 13 * this.$store.getters.blockSizeMultiplier,
blocks: this.create2DArray(asciiImport.split('\n').length),
x: 50, // the dragable ascii canvas x
y: 100, // the dragable ascii canvas y
};
// Turn the entire ascii string into an array
@ -435,16 +432,23 @@ export default {
// let input;
// try {
// // Make a gzipped JSON of the asciibird app state
// // const charData = strData.split('').map(function(x){return x.charCodeAt(0); });
// // convert the incoming base64 -> binary
// const strData = fileContents;
// input = pako.inflate(fileContents, {level:"9"});
// // split it into an array rather than a "string"
// const charData = strData.split('').map(function(x){return x.charCodeAt(0); });
// // var strData = String.fromCharCode.apply(null, pako.inflate(String.fromCharCode.apply(null, input).split("").map(function(x){return x.charCodeAt(0);})));
// input = pako.inflate(charData, { to: 'string' });
// console.log(input);
// } catch (err) {
// console.log(err);
// }
console.log(JSON.parse(fileContents))
// console.log(fileContents)
// No gz for now unless can get the above working
this.$store.commit("changeState", Object.assign({},JSON.parse(fileContents)));
},
exportAsciibirdState() {
@ -453,10 +457,20 @@ export default {
try {
// Make a gzipped JSON of the asciibird app state
// NOT working
// While making a gzip bellow works, had some trouble gunzipping in importAsciibirdState(fileContents, fileName)
// output = pako.gzip(JSON.stringify(this.$store.getters.getState), {level:"9"});
output = JSON.stringify(this.$store.getters.getState);
this.downloadToFile(output, 'asciibird.asb', 'application/gzip');
// Default timestamp for filename
let today = new Date();
let y = today.getFullYear();
let m = today.getMonth() + 1; // JavaScript months are 0-based.
let d = today.getDate();
let h = today.getHours();
let mi = today.getMinutes();
let s = today.getSeconds();
this.downloadToFile(output, `asciibird-${y}-${m}-${d}-${h}-${mi}-${s}.asb`, 'application/json');
} catch (err) {
console.log(err);
}
@ -476,7 +490,7 @@ export default {
if (curBlock.bg !== prevBlock.bg || curBlock.fg !== prevBlock.fg) {
Object.assign(curBlock, currentAscii.blocks[y][x]);
const zeroPad = (num, places) => String(num).padStart(places, '0');
output.push(`\u0003${zeroPad(curBlock.fg ?? 0, 2)},${zeroPad(curBlock.bg ?? 1, 2)}`);
output.push(`\u0003${zeroPad(curBlock.fg ?? this.$store.getstate.options.defaultFg, 2)},${zeroPad(curBlock.bg ?? this.$store.getstate.options.defaultBg, 2)}`);
}
// null .chars will end up as space
@ -534,6 +548,8 @@ export default {
height: this.forms.createAscii.height,
blockWidth: 8,
blockHeight: 13,
x: 50, // the dragable ascii canvas x
y: 100, // the dragable ascii canvas y
blocks: this.create2DArray(this.forms.createAscii.height),
};

23
src/components/DebugPanel.vue
View File

@ -1,17 +1,17 @@
<template>
<div>
<vue-draggable-resizable
@dragging="onDrag"
style="z-index: 5; min-height: 300px"
@dragstop="onDragStop"
style="z-index: 5;"
:min-width="200"
:max-width="500"
:min-height="100"
:max-height="200"
:x="0"
:y="350"
:min-height="200"
:max-height="500"
:x="$store.getters.getDebugPanelState.x"
:y="$store.getters.getDebugPanelState.y"
>
<div style="height: 100%; min-height: 300px; max-height: 400px">
<t-card header="Debug Info" style="height: 100%;">
<t-card style="height: 100%;">
<p v-html="`Tool: ${$store.getters.getCurrentTool}`"></p>
<p v-html="`FgColour: ${$store.getters.getFgColour}`"></p>
<p v-html="`BgColor: ${$store.getters.getBgColour}`"></p>
@ -20,7 +20,7 @@
<p v-html="`canvasX: ${canvasX}`"></p>
<p v-html="`canvasY: ${canvasY}`"></p>
</t-card>
</div>
</vue-draggable-resizable>
</div>
</template>
@ -36,6 +36,7 @@ export default {
x: 100,
y: 100,
},
throttle: true,
}),
computed: {},
watch: {},
@ -46,9 +47,11 @@ export default {
this.floating.width = width;
this.floating.height = height;
},
onDrag(x, y) {
onDragStop(x, y) {
this.floating.x = x;
this.floating.y = y;
this.$store.commit("changeDebugPanelState", {x: x, y: y})
},
},
};

10
src/components/Toolbar.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<vue-draggable-resizable
@dragging="onDrag"
@dragstop="onDragStop"
:grid="[
$store.getters.currentAscii.blockHeight,
$store.getters.currentAscii.blockWidth,
@ -11,8 +11,8 @@
:max-width="500"
:min-height="500"
:max-height="700"
:x="0"
:y="50"
:x="$store.getters.getToolbarState.x"
:y="$store.getters.getToolbarState.y"
>
<t-card header="Tools and Stuff" style="height: 100%">
<label class="flex ml-1">
@ -92,9 +92,11 @@ export default {
this.floating.width = width;
this.floating.height = height;
},
onDrag(x, y) {
onDragStop(x, y) {
this.floating.x = x;
this.floating.y = y;
this.$store.commit("changeToolBarState", {x: x, y: y})
},
},
};

22
src/store/index.js
View File

@ -14,6 +14,9 @@ export default new Vuex.Store({
// end up in its own modal I guess
options: {
canvasRedrawSpeed: 2,
draggableUpdateSpeed: 200, // How long between updating the vuex store when dragging any of the panels
defaultBg: 1,
defaultFg: 0,
},
// 0 => 'white',
@ -108,6 +111,12 @@ export default new Vuex.Store({
targetingFg: true,
targetingBg: true,
targetingChar: true,
x: 50,
y: 100,
},
debugPanelState: {
x: 50,
y: 100,
},
blockSizeMultiplier: 1,
},
@ -118,6 +127,17 @@ export default new Vuex.Store({
changeTab(state, payload) {
state.tab = payload;
},
changeDebugPanelState(state, payload) {
state.debugPanelState = payload
},
changeToolBarState(state, payload) {
state.toolbarState.x = payload.x
state.toolbarState.y = payload.y
},
changeAsciiCanvasState(state, payload) {
state.asciibirdMeta[state.tab].x = payload.x
state.asciibirdMeta[state.tab].y = payload.y
},
changeColourFg(state, payload) {
state.toolbarState.currentColourFg = payload;
state.toolbarState.isUpdating = false;
@ -163,8 +183,10 @@ export default new Vuex.Store({
},
getters: {
getState: (state) => state,
getOptions: (state) => state.options,
getToolbarIcons: (state) => state.toolbarIcons,
getToolbarState: (state) => state.toolbarState,
getDebugPanelState: (state) => state.debugPanelState,
getCurrentTool: (state) => state.toolbarState.currentTool,
getTargetingBg: (state) => state.toolbarState.targetingBg,
getTargetingFg: (state) => state.toolbarState.targetingFg,

13
src/views/Editor.vue
View File

@ -2,7 +2,7 @@
<div>
<div id="canvas-area">
<vue-draggable-resizable
style="z-index: 5; left: 220px"
style="z-index: 5;"
:grid="[
$store.getters.currentAscii.blockHeight,
$store.getters.currentAscii.blockWidth,
@ -11,7 +11,9 @@
:h="canvas.height + $store.getters.currentAscii.blockHeight"
:draggable="$store.getters.getCurrentTool === 'default'"
@resizing="onCanvasResize"
@dragging="onCanvasDrag"
@dragstop="onCavasDragStop"
:x="$store.getters.currentAscii.x"
:y="$store.getters.currentAscii.y"
>
<canvas
ref="canvastools"
@ -80,6 +82,7 @@ export default {
y: 0, // Ascii X and Y
redraw: true, // Used to limit canvas redraw
canTool: false,
throttle: true,
}),
computed: {
canvasStyle() {
@ -176,10 +179,14 @@ export default {
onCanvasResize(left, top, width, height) {
this.canvas.width = width;
this.canvas.height = height;
// Restructure blocks code here
this.delayRedrawCanvas();
},
onCanvasDrag(left, top) {
onCavasDragStop(x, y) {
// Update left and top in panel
this.$store.commit("changeAsciiCanvasState", {x: x, y: y})
},
// Mouse Up, Down and Move