2021-02-13 01:51:01 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2021-03-29 01:50:33 +00:00
|
|
|
<vue-draggable-resizable
|
2021-04-01 23:01:36 +00:00
|
|
|
@dragstop="onDragStop"
|
2021-08-14 06:41:42 +00:00
|
|
|
:grid="[blockWidth, blockHeight]"
|
2021-08-05 00:54:40 +00:00
|
|
|
:min-width="blockWidth * 40"
|
|
|
|
:max-width="blockWidth * 40"
|
|
|
|
:min-height="blockHeight * 20"
|
|
|
|
:max-height="blockHeight * 20"
|
2021-04-01 23:01:36 +00:00
|
|
|
style="z-index: 5;"
|
2021-04-24 00:20:11 +00:00
|
|
|
:w="debugPanelState.w"
|
|
|
|
:h="debugPanelState.h"
|
|
|
|
:x="debugPanelState.x"
|
|
|
|
:y="debugPanelState.y"
|
2021-02-13 01:51:01 +00:00
|
|
|
>
|
2021-08-06 04:00:21 +00:00
|
|
|
<t-card class="h-full">
|
2021-08-04 03:21:06 +00:00
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`Tool: ${getToolName}`"
|
|
|
|
/> <br>
|
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`FgColour: ${currentFg}`"
|
|
|
|
/> <br>
|
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`BgColor: ${currentBg}`"
|
|
|
|
/> <br>
|
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`Char: ${currentChar}`"
|
|
|
|
/> <br>
|
2021-03-29 05:10:31 +00:00
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`canvasX: ${canvasX}`"
|
|
|
|
/> <br>
|
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`canvasY: ${canvasY}`"
|
|
|
|
/> <br>
|
2021-08-03 03:00:32 +00:00
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`mirrorX: ${mirrorX}`"
|
|
|
|
/> <br>
|
|
|
|
<span
|
|
|
|
class="ml-5"
|
|
|
|
v-html="`mirrorY: ${mirrorY}`"
|
|
|
|
/> <br>
|
2021-08-03 03:00:32 +00:00
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
<span class="ml-5"> Size: {{ asciiStats.sizeCompressed }} ({{ asciiStats.sizeUncompressed }} / {{ asciiStats.sizePercentage }}%) </span> <br>
|
2021-08-03 03:00:32 +00:00
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
<span class="ml-5"> State Size: {{ asciiStats.stateSize }}</span> <br>
|
|
|
|
</t-card>
|
2021-02-13 01:51:01 +00:00
|
|
|
</vue-draggable-resizable>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
2021-08-05 00:54:40 +00:00
|
|
|
import { toolbarIcons, mircColours99, blockWidth, blockHeight } from '../ascii';
|
2021-04-24 00:20:11 +00:00
|
|
|
|
2021-02-13 01:51:01 +00:00
|
|
|
export default {
|
2021-04-24 00:20:11 +00:00
|
|
|
created() {
|
2021-08-04 03:21:06 +00:00
|
|
|
this.panel.x = this.debugPanelState.x;
|
|
|
|
this.panel.y = this.debugPanelState.y;
|
|
|
|
this.panel.w = this.debugPanelState.w;
|
|
|
|
this.panel.h = this.debugPanelState.h;
|
2021-04-24 00:20:11 +00:00
|
|
|
},
|
2021-08-04 03:21:06 +00:00
|
|
|
name: 'DebugPanel',
|
|
|
|
props: ['canvasX', 'canvasY'],
|
2021-02-13 01:51:01 +00:00
|
|
|
data: () => ({
|
2021-04-24 00:20:11 +00:00
|
|
|
panel: {
|
|
|
|
w: 0,
|
|
|
|
h: 0,
|
2021-02-13 01:51:01 +00:00
|
|
|
x: 100,
|
|
|
|
y: 100,
|
2021-08-03 03:00:32 +00:00
|
|
|
visible: true,
|
2021-02-13 01:51:01 +00:00
|
|
|
},
|
2021-04-01 23:01:36 +00:00
|
|
|
throttle: true,
|
2021-02-13 01:51:01 +00:00
|
|
|
}),
|
2021-04-02 02:07:49 +00:00
|
|
|
computed: {
|
2021-08-05 00:54:40 +00:00
|
|
|
blockWidth() {
|
2021-08-14 06:41:42 +00:00
|
|
|
return blockWidth * this.blockSizeMultiplier;
|
2021-08-05 00:54:40 +00:00
|
|
|
},
|
|
|
|
blockHeight() {
|
2021-08-14 06:41:42 +00:00
|
|
|
return blockHeight * this.blockSizeMultiplier;
|
|
|
|
},
|
|
|
|
blockSizeMultiplier() {
|
|
|
|
return this.$store.getters.blockSizeMultiplier
|
2021-08-05 00:54:40 +00:00
|
|
|
},
|
2021-04-02 02:07:49 +00:00
|
|
|
getToolName() {
|
2021-08-04 03:21:06 +00:00
|
|
|
return toolbarIcons[this.$store.getters.currentTool] ? toolbarIcons[this.$store.getters.currentTool].name : 'none';
|
2021-04-24 00:20:11 +00:00
|
|
|
},
|
|
|
|
debugPanelState() {
|
2021-08-04 03:21:06 +00:00
|
|
|
return this.$store.getters.debugPanel;
|
2021-04-24 00:20:11 +00:00
|
|
|
},
|
|
|
|
currentAscii() {
|
|
|
|
return this.$store.getters.currentAscii;
|
|
|
|
},
|
2021-08-03 03:00:32 +00:00
|
|
|
currentAsciiBlocks() {
|
2021-08-04 03:21:06 +00:00
|
|
|
return this.$store.getters.currentAsciiBlocks;
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
|
|
|
asciiStats() {
|
2021-08-04 03:21:06 +00:00
|
|
|
const compressed = (this.currentAscii.blocks.length / 1024).toFixed(2);
|
|
|
|
const uncompressed = (JSON.stringify(this.currentAsciiBlocks).length / 1024).toFixed(2);
|
2021-08-03 03:00:32 +00:00
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
const stateSize = (JSON.stringify(this.state).length / 1024).toFixed(2);
|
|
|
|
return {
|
|
|
|
sizeCompressed: `${compressed}kb`,
|
|
|
|
sizeUncompressed: `${uncompressed}kb`,
|
|
|
|
stateSize: `${stateSize}kb`,
|
|
|
|
sizePercentage: (100 - (uncompressed / compressed)).toFixed(2),
|
|
|
|
};
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
|
|
|
currentTool() {
|
2021-08-03 07:33:25 +00:00
|
|
|
return toolbarIcons[
|
2021-08-03 03:00:32 +00:00
|
|
|
this.$store.getters.currentTool
|
|
|
|
];
|
|
|
|
},
|
|
|
|
mircColours() {
|
2021-08-03 07:33:25 +00:00
|
|
|
return mircColours99;
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
|
|
|
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() {
|
2021-08-06 01:51:58 +00:00
|
|
|
return this.$store.getters.currentChar;
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
|
|
|
isTextEditing() {
|
2021-08-04 03:21:06 +00:00
|
|
|
return this.currentTool.name === 'text';
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
|
|
|
isSelecting() {
|
2021-08-04 03:21:06 +00:00
|
|
|
return this.currentTool.name === 'select';
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
|
|
|
isSelected() {
|
|
|
|
return (
|
2021-08-04 03:21:06 +00:00
|
|
|
this.selecting.startX
|
|
|
|
&& this.selecting.startY
|
|
|
|
&& this.selecting.endX
|
|
|
|
&& this.selecting.endY
|
2021-08-03 03:00:32 +00:00
|
|
|
);
|
|
|
|
},
|
|
|
|
brushBlocks() {
|
|
|
|
return this.$store.getters.brushBlocks;
|
|
|
|
},
|
|
|
|
// canvasX() {
|
2021-08-14 06:41:42 +00:00
|
|
|
// return this.x * this.blockWidth;
|
2021-08-03 03:00:32 +00:00
|
|
|
// },
|
|
|
|
// canvasY() {
|
2021-08-14 06:41:42 +00:00
|
|
|
// return this.y * this.blockHeight;
|
2021-08-03 03:00:32 +00:00
|
|
|
// },
|
|
|
|
toolbarState() {
|
|
|
|
return this.$store.getters.toolbarState;
|
|
|
|
},
|
|
|
|
mirrorX() {
|
|
|
|
return this.toolbarState.mirrorX;
|
|
|
|
},
|
|
|
|
mirrorY() {
|
|
|
|
return this.toolbarState.mirrorY;
|
|
|
|
},
|
|
|
|
state() {
|
|
|
|
return this.$store.getters.state;
|
2021-08-04 03:21:06 +00:00
|
|
|
},
|
2021-04-02 02:07:49 +00:00
|
|
|
},
|
2021-03-29 01:50:33 +00:00
|
|
|
watch: {},
|
2021-02-13 01:51:01 +00:00
|
|
|
methods: {
|
2021-04-24 00:20:11 +00:00
|
|
|
onResize(x, y, w, h) {
|
|
|
|
this.panel.x = x;
|
|
|
|
this.panel.y = y;
|
|
|
|
this.panel.w = w;
|
|
|
|
this.panel.h = h;
|
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
this.$store.commit('changeDebugPanelState', this.panel);
|
2021-02-13 01:51:01 +00:00
|
|
|
},
|
2021-04-01 23:01:36 +00:00
|
|
|
onDragStop(x, y) {
|
2021-04-24 00:20:11 +00:00
|
|
|
this.panel.x = x;
|
|
|
|
this.panel.y = y;
|
2021-04-01 23:01:36 +00:00
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
this.$store.commit('changeDebugPanelState', this.panel);
|
2021-02-13 01:51:01 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|