refactor first pass, fixed fill bug, new ctrl d for show/hide debug panel
This commit is contained in:
szülő
4a729be0c3
commit
c45bcb6f48
|
|
@ -23,6 +23,7 @@
|
|||
* Resizing the canvas a certain way wont make new blocks
|
||||
* No undo using text tool
|
||||
* Brush preview for mirror X and Y doesn't show chars/fg, but brushes fine
|
||||
* Brush cannot brush row 0 in mirror mode
|
||||
# FOCUSING ON NOW
|
||||
|
||||
* Cut / copy then paste with ctrl v
|
||||
|
|
@ -49,6 +50,12 @@
|
|||
|
||||
* LAYERS
|
||||
|
||||
# Keyboard Shortcuts
|
||||
|
||||
* Ctrl D - shows/hides debug panel
|
||||
* Ctrl Z - Undo (sometimes have to press twice)
|
||||
* Ctrl Y - Redo (sometimes have to press twice)
|
||||
|
||||
# FEATURES DONE
|
||||
|
||||
* Tabbed editing for asciis
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<li
|
||||
@click="exportMirc('file')"
|
||||
class="ml-1"
|
||||
v-if="this.$store.getters.asciibirdMeta.length"
|
||||
v-if="asciibirdMeta.length"
|
||||
>
|
||||
Export mIRC to File
|
||||
</li>
|
||||
|
|
@ -31,19 +31,19 @@
|
|||
<li
|
||||
class="ml-1"
|
||||
@click="exportMirc('clipboard')"
|
||||
v-if="this.$store.getters.asciibirdMeta.length"
|
||||
v-if="asciibirdMeta.length"
|
||||
>
|
||||
Export mIRC to Clipboard
|
||||
</li>
|
||||
<li
|
||||
@click="exportAsciibirdState()"
|
||||
class="ml-1"
|
||||
v-if="this.$store.getters.asciibirdMeta.length"
|
||||
v-if="asciibirdMeta.length"
|
||||
>
|
||||
Save Asciibird State
|
||||
</li>
|
||||
<li @click="startImport('asb')" class="ml-1">Load Asciibird State</li>
|
||||
<li @click="$store.commit('openModal', 'edit-ascii')" class="ml-1" v-if="this.$store.getters.asciibirdMeta.length">Edit Current Ascii</li>
|
||||
<li @click="$store.commit('openModal', 'edit-ascii')" class="ml-1" v-if="asciibirdMeta.length">Edit Current Ascii</li>
|
||||
</ul>
|
||||
</context-menu>
|
||||
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
@change="onImport()"
|
||||
/>
|
||||
|
||||
<template v-if="this.$store.getters.asciibirdMeta.length">
|
||||
<template v-if="asciibirdMeta.length">
|
||||
<t-button
|
||||
v-for="(value, key) in this.$store.getters.asciibirdMeta"
|
||||
v-for="(value, key) in asciibirdMeta"
|
||||
v-bind:key="key"
|
||||
class="ml-1"
|
||||
@click="changeTab(key, value)"
|
||||
|
|
@ -72,14 +72,14 @@
|
|||
</t-button>
|
||||
|
||||
<Toolbar :canvas-x="canvasX" :canvas-y="canvasY" />
|
||||
<DebugPanel :canvas-x="canvasX" :canvas-y="canvasY" />
|
||||
<DebugPanel :canvas-x="canvasX" :canvas-y="canvasY" v-if="debugPanelState.visible" />
|
||||
<Editor @coordsupdate="updateCoords" />
|
||||
|
||||
<CharPicker v-if="$store.getters.getToolbarState.isChoosingChar" />
|
||||
<CharPicker v-if="toolbarState.isChoosingChar" />
|
||||
<ColourPicker
|
||||
v-if="
|
||||
$store.getters.getToolbarState.isChoosingFg ||
|
||||
$store.getters.getToolbarState.isChoosingBg
|
||||
toolbarState.isChoosingFg ||
|
||||
toolbarState.isChoosingBg
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -94,12 +94,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* html {
|
||||
cursor: url('assets/mouse-pointer-solid.svg'), auto;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Toolbar from "./components/Toolbar.vue";
|
||||
import DebugPanel from "./components/DebugPanel.vue";
|
||||
|
|
@ -129,7 +123,6 @@ export default {
|
|||
});
|
||||
|
||||
const asciiData = await res.text();
|
||||
console.log({ asciiData, asciiUrlCdn });
|
||||
this.mircAsciiImport(asciiData, asciiUrlCdn);
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +136,6 @@ export default {
|
|||
});
|
||||
|
||||
const asciiData = await res.text();
|
||||
console.log({ asciiData, asciiUrl });
|
||||
this.mircAsciiImport(asciiData, asciiUrl);
|
||||
}
|
||||
|
||||
|
|
@ -156,9 +148,9 @@ export default {
|
|||
},
|
||||
});
|
||||
|
||||
// Considers paths
|
||||
const asciiName = haxAscii.split('/').pop();
|
||||
const asciiData = await res.text();
|
||||
console.log({ asciiData, asciiName });
|
||||
this.mircAsciiImport(asciiData, asciiName);
|
||||
}
|
||||
},
|
||||
|
|
@ -187,8 +179,8 @@ export default {
|
|||
computed: {
|
||||
currentTool() {
|
||||
return (
|
||||
this.$store.getters.getToolbarIcons[
|
||||
this.$store.getters.getCurrentTool
|
||||
this.$store.getters.toolbarIcons[
|
||||
this.$store.getters.currentTool
|
||||
] ?? null
|
||||
);
|
||||
},
|
||||
|
|
@ -198,6 +190,36 @@ export default {
|
|||
this.currentTool.icon ?? "mouse-pointer",
|
||||
];
|
||||
},
|
||||
options() {
|
||||
return this.$store.getters.options;
|
||||
},
|
||||
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.getChar;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
asciibirdMeta() {
|
||||
return this.$store.getters.asciibirdMeta;
|
||||
},
|
||||
debugPanelState() {
|
||||
return this.$store.getters.debugPanel
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openContextMenu(e) {
|
||||
|
|
@ -250,7 +272,7 @@ export default {
|
|||
|
||||
try {
|
||||
output = LZString.compressToEncodedURIComponent(
|
||||
JSON.stringify(this.$store.getters.getState)
|
||||
JSON.stringify(this.$store.getters.state)
|
||||
);
|
||||
|
||||
// Default timestamp for filename
|
||||
|
|
@ -299,10 +321,10 @@ export default {
|
|||
const zeroPad = (num, places) => String(num).padStart(places, "0");
|
||||
output.push(
|
||||
`\u0003${zeroPad(
|
||||
curBlock.fg ?? this.$store.getters.getOptions.defaultFg,
|
||||
curBlock.fg ?? this.options.defaultFg,
|
||||
2
|
||||
)},${zeroPad(
|
||||
curBlock.bg ?? this.$store.getters.getOptions.defaultBg,
|
||||
curBlock.bg ?? this.options.defaultBg,
|
||||
2
|
||||
)}`
|
||||
);
|
||||
|
|
|
|||
|
|
@ -230,6 +230,12 @@ export const parseMircAscii = (content, title) => {
|
|||
return arr;
|
||||
}
|
||||
|
||||
export const emptyBlock = {
|
||||
bg: null,
|
||||
fg: null,
|
||||
char: null,
|
||||
};
|
||||
|
||||
export const createNewAscii = (forms) => {
|
||||
let newAscii = {
|
||||
title: forms.createAscii.title,
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<div :id=blockId :style=blockClass>
|
||||
{{ this.data.char }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Block',
|
||||
props: ['data',
|
||||
'blockWidth',
|
||||
'blockHeight'],
|
||||
|
||||
created() {},
|
||||
data: () => ({
|
||||
|
||||
}),
|
||||
computed: {
|
||||
blockId() {
|
||||
return `block-${this.data.x}-${this.data.y}`;
|
||||
},
|
||||
blockClass() {
|
||||
return `max-width: ${this.blockWidth}px; min-width: ${this.blockWidth}px; max-height: ${this.blockHeight}px; min-height: ${this.blockHeight}px; Colour: '${this.data.fg}'; background-Colour: '${this.data.bg}';`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${this.$store.getters.mircColours[$store.getters.getFgColour]} !important;`"
|
||||
:style="`background-color: ${mircColours[currentFg]} !important;`"
|
||||
class="border-gray-200 p-1"
|
||||
id="currentColourFg"
|
||||
@click="$store.commit('changeIsUpdatingFg', true)"
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${this.$store.getters.mircColours[$store.getters.getBgColour]} !important;`"
|
||||
:style="`background-color: ${mircColours[currentBg]} !important;`"
|
||||
class="border-gray-200 p-1"
|
||||
id="currentColourBg"
|
||||
@click="$store.commit('changeIsUpdatingBg', true)"
|
||||
|
|
@ -32,14 +32,13 @@
|
|||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${this.$store.getters.mircColours[$store.getters.getBgColour]} !important;color: ${this.$store.getters.mircColours[$store.getters.getFgColour]};`"
|
||||
:style="`background-color: ${mircColours[currentBg]} !important;color: ${mircColours[currentFg]};`"
|
||||
class="border-gray-200 p-1"
|
||||
id="currentChar"
|
||||
@click="$store.commit('changeIsUpdatingChar', true)"
|
||||
>{{ `${$store.getters.getToolbarState.selectedChar}` }}</t-button
|
||||
>{{ `${toolbarState.selectedChar}` }}</t-button
|
||||
>
|
||||
|
||||
|
||||
</t-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -47,10 +46,24 @@
|
|||
export default {
|
||||
name: "Colours",
|
||||
data: () => ({}),
|
||||
computed: {
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
currentFg() {
|
||||
return this.$store.getters.currentFg;
|
||||
},
|
||||
currentBg() {
|
||||
return this.$store.getters.currentBg;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
swapColours() {
|
||||
let bg = this.$store.getters.getToolbarState.currentColourBg;
|
||||
let fg = this.$store.getters.getToolbarState.currentColourFg;
|
||||
let bg = this.currentBg;
|
||||
let fg = this.currentFg;
|
||||
|
||||
this.$store.commit("changeColourFg", bg);
|
||||
this.$store.commit("changeColourBg", fg);
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
<vue-draggable-resizable
|
||||
@dragstop="onDragStop"
|
||||
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
|
||||
:min-width="8 * 100"
|
||||
:max-width="8 * 150"
|
||||
:min-height="13 * 4"
|
||||
:max-height="13 * 4"
|
||||
:min-width="8 * 40"
|
||||
:max-width="8 * 40"
|
||||
:min-height="13 * 20"
|
||||
:max-height="13 * 20"
|
||||
style="z-index: 5;"
|
||||
:w="debugPanelState.w"
|
||||
:h="debugPanelState.h"
|
||||
|
|
@ -15,13 +15,20 @@
|
|||
>
|
||||
|
||||
<t-card style="height: 100%;">
|
||||
<span class="ml-5" v-html="`Tool: ${getToolName}`"></span>
|
||||
<span class="ml-5" v-html="`FgColour: ${$store.getters.getFgColour}`"></span>
|
||||
<span class="ml-5" v-html="`BgColor: ${$store.getters.getBgColour}`"></span>
|
||||
<span class="ml-5" v-html="`Char: ${$store.getters.getToolbarState.selectedChar}`"></span>
|
||||
<span class="ml-5" v-html="`Tool: ${getToolName}`"></span> <br>
|
||||
<span class="ml-5" v-html="`FgColour: ${currentFg}`"></span> <br>
|
||||
<span class="ml-5" v-html="`BgColor: ${currentBg}`"></span> <br>
|
||||
<span class="ml-5" v-html="`Char: ${currentChar}`"></span> <br>
|
||||
|
||||
<span class="ml-5" v-html="`canvasX: ${canvasX}`"></span>
|
||||
<span class="ml-5" v-html="`canvasY: ${canvasY}`"></span>
|
||||
<span class="ml-5" v-html="`canvasX: ${canvasX}`"></span> <br>
|
||||
<span class="ml-5" v-html="`canvasY: ${canvasY}`"></span> <br>
|
||||
|
||||
<span class="ml-5" v-html="`mirrorX: ${mirrorX}`"></span> <br>
|
||||
<span class="ml-5" v-html="`mirrorY: ${mirrorY}`"></span> <br>
|
||||
|
||||
<span class="ml-5"> Size: {{ asciiStats.sizeCompressed }} ({{ asciiStats.sizeUncompressed }} / {{ asciiStats.sizePercentage }}%) </span> <br>
|
||||
|
||||
<span class="ml-5"> State Size: {{ asciiStats.stateSize }}</span> <br>
|
||||
</t-card>
|
||||
|
||||
</vue-draggable-resizable>
|
||||
|
|
@ -44,19 +51,96 @@ export default {
|
|||
h: 0,
|
||||
x: 100,
|
||||
y: 100,
|
||||
visible: true,
|
||||
},
|
||||
throttle: true,
|
||||
}),
|
||||
computed: {
|
||||
getToolName() {
|
||||
return this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool] ? this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool].name : 'none'
|
||||
return this.$store.getters.toolbarIcons[this.$store.getters.currentTool] ? this.$store.getters.toolbarIcons[this.$store.getters.currentTool].name : 'none'
|
||||
},
|
||||
debugPanelState() {
|
||||
return this.$store.getters.getDebugPanelState
|
||||
return this.$store.getters.debugPanel
|
||||
},
|
||||
currentAscii() {
|
||||
return this.$store.getters.currentAscii;
|
||||
},
|
||||
currentAsciiBlocks() {
|
||||
return this.$store.getters.currentAsciiBlocks
|
||||
},
|
||||
asciiStats() {
|
||||
let compressed = (this.currentAscii.blocks.length / 1024).toFixed(2);
|
||||
let uncompressed = ( JSON.stringify(this.currentAsciiBlocks).length / 1024).toFixed(2)
|
||||
|
||||
let 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),
|
||||
}
|
||||
},
|
||||
currentTool() {
|
||||
return this.$store.getters.toolbarIcons[
|
||||
this.$store.getters.currentTool
|
||||
];
|
||||
},
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
},
|
||||
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.getChar;
|
||||
},
|
||||
isTextEditing() {
|
||||
return this.currentTool.name === "text"
|
||||
},
|
||||
isSelecting() {
|
||||
return this.currentTool.name === "select"
|
||||
},
|
||||
isSelected() {
|
||||
return (
|
||||
this.selecting.startX &&
|
||||
this.selecting.startY &&
|
||||
this.selecting.endX &&
|
||||
this.selecting.endY
|
||||
);
|
||||
},
|
||||
brushBlocks() {
|
||||
return this.$store.getters.brushBlocks;
|
||||
},
|
||||
// canvasX() {
|
||||
// return this.x * this.currentAscii.blockWidth;
|
||||
// },
|
||||
// canvasY() {
|
||||
// return this.y * this.currentAscii.blockHeight;
|
||||
// },
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
mirrorX() {
|
||||
return this.toolbarState.mirrorX;
|
||||
},
|
||||
mirrorY() {
|
||||
return this.toolbarState.mirrorY;
|
||||
},
|
||||
state() {
|
||||
return this.$store.getters.state;
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@
|
|||
<t-checkbox
|
||||
name="targetingFg"
|
||||
v-model="toolbarState.targetingFg"
|
||||
:disabled="
|
||||
!$store.getters.getTargetingBg && !$store.getters.getTargetingChar
|
||||
"
|
||||
:disabled="!canBg && !canText"
|
||||
/>
|
||||
<span class="text-sm">FG</span>
|
||||
</label>
|
||||
|
|
@ -28,9 +26,7 @@
|
|||
<t-checkbox
|
||||
name="targetingBg"
|
||||
v-model="toolbarState.targetingBg"
|
||||
:disabled="
|
||||
!$store.getters.getTargetingFg && !$store.getters.getTargetingChar
|
||||
"
|
||||
:disabled="!canFg && !canText"
|
||||
checked
|
||||
/>
|
||||
<span class="text-sm">BG</span>
|
||||
|
|
@ -39,9 +35,7 @@
|
|||
<t-checkbox
|
||||
name="targetingChar"
|
||||
v-model="toolbarState.targetingChar"
|
||||
:disabled="
|
||||
!$store.getters.getTargetingFg && !$store.getters.getTargetingBg
|
||||
"
|
||||
:disabled="!canFg && !canBg"
|
||||
/>
|
||||
<span class="text-sm">Text</span>
|
||||
</label>
|
||||
|
|
@ -73,9 +67,9 @@
|
|||
|
||||
<t-button
|
||||
type="button"
|
||||
v-for="(value, keyToolbar) in $store.getters.getToolbarIcons"
|
||||
v-for="(value, keyToolbar) in toolbarIcons"
|
||||
:key="keyToolbar + 50"
|
||||
:class="`max-h-7 max-w-5 w-7 ${($store.getters.getCurrentTool == keyToolbar ? 'border-gray-900' : 'border-gray-200')}`"
|
||||
:class="`max-h-7 max-w-5 w-7 ${(currentTool.name === value.name ? 'border-gray-900' : 'border-gray-200')}`"
|
||||
@click="$store.commit('changeTool', keyToolbar)"
|
||||
>
|
||||
<font-awesome-icon :icon="[value.fa, value.icon]" />
|
||||
|
|
@ -85,10 +79,6 @@
|
|||
|
||||
<BrushPreview />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</t-card>
|
||||
</vue-draggable-resizable>
|
||||
</div>
|
||||
|
|
@ -124,17 +114,42 @@ export default {
|
|||
}
|
||||
}),
|
||||
computed: {
|
||||
toolbarIcons() {
|
||||
return this.$store.getters.toolbarIcons
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.getToolbarState
|
||||
return this.$store.getters.toolbarState
|
||||
},
|
||||
currentAscii() {
|
||||
return this.$store.getters.currentAscii;
|
||||
},
|
||||
currentTool() {
|
||||
return this.$store.getters.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.getChar;
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
updateMirror() {
|
||||
console.log(this.mirror)
|
||||
this.$store.commit("updateMirror", this.mirror)
|
||||
},
|
||||
onResize(x, y, w, h) {
|
||||
|
|
|
|||
|
|
@ -31,12 +31,7 @@
|
|||
|
||||
<hr class="mt-5 mb-5">
|
||||
|
||||
<p>Block Size Compressed: {{ asciiStats.sizeCompressed }} </p>
|
||||
<p>Block Size Uncompressed: {{ asciiStats.sizeUncompressed }} </p>
|
||||
<p>Percent Compressed: {{ asciiStats.sizePercentage }}% </p>
|
||||
|
||||
<p>Undo: {{ asciiStats.redo }} </p>
|
||||
<p>Redo: {{ asciiStats.undo }} </p>
|
||||
|
||||
|
||||
<template v-slot:footer>
|
||||
<div
|
||||
|
|
@ -75,20 +70,6 @@ export default {
|
|||
currentAsciiEditingTitle() {
|
||||
return `Editing ASCII ${this.currentAscii.title}`;
|
||||
},
|
||||
currentAsciiBlocks() {
|
||||
return this.$store.getters.currentAsciiBlocks
|
||||
},
|
||||
asciiStats() {
|
||||
let compressed = (this.currentAscii.blocks.length / 1024).toFixed(2);
|
||||
let uncompressed = ( JSON.stringify(this.currentAsciiBlocks).length / 1024).toFixed(2)
|
||||
return {
|
||||
sizeCompressed: compressed + 'kb',
|
||||
sizeUncompressed: uncompressed + 'kb',
|
||||
sizePercentage: (100 - (uncompressed / compressed)).toFixed(2),
|
||||
redo: this.currentAscii.redo.length,
|
||||
history: this.currentAscii.history.length
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showEditAsciiModal(val, old) {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,6 @@ export default {
|
|||
this.$modal.show("create-ascii-modal");
|
||||
},
|
||||
initiateNewAscii() {
|
||||
console.log("all good")
|
||||
createNewASCII(this.forms);
|
||||
this.$modal.hide("create-ascii-modal");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
@click="$modal.hide('paste-ascii-modal')"
|
||||
>
|
||||
<t-button type="button"> Cancel </t-button>
|
||||
<t-button type="button" @click="importPasteAscii()">Import Clipboard</t-button>
|
||||
<t-button type="button" @click="importPasteAscii()" :disabled="checkPasteContent">Import Clipboard</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-modal>
|
||||
|
|
@ -36,13 +36,16 @@ export default {
|
|||
created() {
|
||||
},
|
||||
data: () => ({
|
||||
pasteContent: null,
|
||||
pasteContent: "",
|
||||
title: "clipboard.txt"
|
||||
}),
|
||||
computed: {
|
||||
showPasteModal() {
|
||||
return this.$store.getters.modalState.pasteModal;
|
||||
},
|
||||
checkPasteContent() {
|
||||
return !this.pasteContent.length ? true : false;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showPasteModal(val, old) {
|
||||
|
|
|
|||
|
|
@ -62,14 +62,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { emptyBlock } from "./../../ascii.js"
|
||||
|
||||
export default {
|
||||
name: "BrushPreview",
|
||||
mounted() {
|
||||
this.ctx = this.$refs.brushcanvas.getContext("2d");
|
||||
this.delayRedrawCanvas();
|
||||
this.brushSizeWidth = this.$store.getters.brushSizeWidth;
|
||||
this.brushSizeHeight = this.$store.getters.brushSizeHeight;
|
||||
this.brushSizeType = this.$store.getters.brushSizeType;
|
||||
this.brushSizeWidth = this.brushSizeWidthPreview;
|
||||
this.brushSizeHeight = this.brushSizeHeightPreview;
|
||||
this.brushSizeType = this.brushSizeTypePreview;
|
||||
},
|
||||
data: () => ({
|
||||
ctx: null,
|
||||
|
|
@ -84,25 +86,25 @@ export default {
|
|||
return this.$store.getters.currentAscii;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.getToolbarState;
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
getTargetingBg() {
|
||||
return this.$store.getters.getTargetingBg;
|
||||
isTargettingBg() {
|
||||
return this.$store.getters.isTargettingBg;
|
||||
},
|
||||
getTargetingFg() {
|
||||
return this.$store.getters.getTargetingFg;
|
||||
isTargettingFg() {
|
||||
return this.$store.getters.isTargettingFg;
|
||||
},
|
||||
getTargetingChar() {
|
||||
return this.$store.getters.getTargetingChar;
|
||||
isTargettingChar() {
|
||||
return this.$store.getters.isTargettingChar;
|
||||
},
|
||||
getFgColour() {
|
||||
return this.$store.getters.getFgColour;
|
||||
currentFg() {
|
||||
return this.$store.getters.currentFg;
|
||||
},
|
||||
getBgColour() {
|
||||
return this.$store.getters.getBgColour;
|
||||
currentBg() {
|
||||
return this.$store.getters.currentBg;
|
||||
},
|
||||
getSelectedChar() {
|
||||
return this.$store.getters.getSelectedChar;
|
||||
getChar() {
|
||||
return this.$store.getters.getChar;
|
||||
},
|
||||
brushSizeHeightPreview() {
|
||||
return this.$store.getters.brushSizeHeight;
|
||||
|
|
@ -113,6 +115,9 @@ export default {
|
|||
brushSizeTypePreview() {
|
||||
return this.$store.getters.brushSizeType;
|
||||
},
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
brushSizeWidth() {
|
||||
|
|
@ -121,22 +126,22 @@ export default {
|
|||
brushSizeHeight() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
getTargetingBg() {
|
||||
isTargettingBg() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
getTargetingFg() {
|
||||
isTargettingFg() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
getTargetingChar() {
|
||||
isTargettingChar() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
getFgColour() {
|
||||
currentFg() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
getBgColour() {
|
||||
currentBg() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
getSelectedChar() {
|
||||
getChar() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
},
|
||||
|
|
@ -159,13 +164,13 @@ export default {
|
|||
|
||||
this.blocks = [];
|
||||
|
||||
this.ctx.fillStyle = this.$store.getters.mircColours[1];
|
||||
this.ctx.fillStyle = this.mircColours[1];
|
||||
|
||||
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
||||
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
||||
|
||||
// hack font for ascii shout outs 2 beenz
|
||||
this.ctx.font = "12.5px Hack";
|
||||
this.ctx.font = "13px Hack";
|
||||
|
||||
let y = 0;
|
||||
let x = 0;
|
||||
|
|
@ -174,22 +179,15 @@ export default {
|
|||
let targetX = 0;
|
||||
|
||||
let block = {
|
||||
fg: this.getFgColour,
|
||||
bg: this.getBgColour,
|
||||
char: this.getSelectedChar,
|
||||
};
|
||||
|
||||
let emptyBlock = {
|
||||
fg: null,
|
||||
bg: null,
|
||||
char: null,
|
||||
fg: this.currentFg,
|
||||
bg: this.currentBg,
|
||||
char: this.getChar,
|
||||
};
|
||||
|
||||
let middleY = Math.floor(brushHeight / 2);
|
||||
let middleX = Math.floor(brushWidth / 2);
|
||||
let yModifier = 0;
|
||||
|
||||
|
||||
// Recreate 2d array for preview
|
||||
for (y = 0; y < brushHeight; y++) {
|
||||
this.blocks[y] = [];
|
||||
|
|
@ -261,8 +259,8 @@ export default {
|
|||
if (this.blocks[y] && this.blocks[y][x]) {
|
||||
let curBlock = this.blocks[y][x];
|
||||
|
||||
if (curBlock.bg && this.getTargetingBg) {
|
||||
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
|
||||
if (curBlock.bg && this.isTargettingBg) {
|
||||
this.ctx.fillStyle = this.mircColours[curBlock.bg];
|
||||
|
||||
this.ctx.fillRect(
|
||||
x * BLOCK_WIDTH,
|
||||
|
|
@ -272,12 +270,12 @@ export default {
|
|||
);
|
||||
}
|
||||
|
||||
if (curBlock.fg && this.getTargetingFg) {
|
||||
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
|
||||
if (curBlock.fg && this.isTargettingFg) {
|
||||
this.ctx.fillStyle = this.mircColours[curBlock.fg];
|
||||
}
|
||||
|
||||
if (curBlock.char && this.getTargetingChar) {
|
||||
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
|
||||
if (curBlock.char && this.isTargettingChar) {
|
||||
this.ctx.fillStyle = this.mircColours[curBlock.fg];
|
||||
this.ctx.fillText(
|
||||
curBlock.char,
|
||||
x * BLOCK_WIDTH - 1,
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
<t-card>
|
||||
<t-button
|
||||
type="button"
|
||||
v-for="(value, keyColours) in $store.getters.mircColours"
|
||||
v-for="(value, keyColours) in mircColours"
|
||||
:key="keyColours"
|
||||
:style="`background-color: ${$store.getters.mircColours[keyColours]} !important;`"
|
||||
:style="`background-color: ${mircColours[keyColours]} !important;`"
|
||||
class="border-gray-200 p-3"
|
||||
@click="onColourChange(keyColours)"
|
||||
></t-button>
|
||||
|
|
@ -23,14 +23,22 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "ColourPicker",
|
||||
async created() {},
|
||||
created() {},
|
||||
computed: {
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onColourChange(colour) {
|
||||
if (this.$store.getters.getToolbarState.isChoosingFg) {
|
||||
if (this.toolbarState.isChoosingFg) {
|
||||
this.$store.commit("changeColourFg", colour);
|
||||
}
|
||||
|
||||
if (this.$store.getters.getToolbarState.isChoosingBg) {
|
||||
if (this.toolbarState.isChoosingBg) {
|
||||
this.$store.commit("changeColourBg", colour);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@ import {
|
|||
import Dashboard from './Dashboard.vue';
|
||||
import store from './store';
|
||||
|
||||
import {
|
||||
parseMircAscii
|
||||
} from "./ascii"
|
||||
|
||||
// optionally import default styles
|
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -138,12 +138,14 @@ export default new Vuex.Store({
|
|||
debugPanelState: {
|
||||
x: 8 * 2,
|
||||
y: 13 * 60,
|
||||
h: 13 * 3,
|
||||
w: 8 * 150,
|
||||
h: 13 * 20,
|
||||
w: 8 * 40,
|
||||
visible: false,
|
||||
},
|
||||
blockSizeMultiplier: 1,
|
||||
brushBlocks: [],
|
||||
selectBlocks: [],
|
||||
libraryBlocks: [],
|
||||
},
|
||||
mutations: {
|
||||
changeState(state, payload) {
|
||||
|
|
@ -155,6 +157,9 @@ export default new Vuex.Store({
|
|||
changeDebugPanelState(state, payload) {
|
||||
state.debugPanelState = payload;
|
||||
},
|
||||
toggleDebugPanel(state, payload) {
|
||||
state.debugPanelState.visible = payload;
|
||||
},
|
||||
changeToolBarState(state, payload) {
|
||||
state.toolbarState.x = payload.x;
|
||||
state.toolbarState.y = payload.y;
|
||||
|
|
@ -217,9 +222,6 @@ export default new Vuex.Store({
|
|||
state.toolbarState.mirrorY = payload.y;
|
||||
},
|
||||
updateAsciiBlocks(state, payload, skipUndo = false) {
|
||||
// before - state.asciibirdMeta[state.tab].blocks
|
||||
// current - payload
|
||||
|
||||
if (!skipUndo) {
|
||||
state.asciibirdMeta[state.tab].history.push(state.asciibirdMeta[state.tab].blocks)
|
||||
}
|
||||
|
|
@ -236,8 +238,6 @@ export default new Vuex.Store({
|
|||
state.asciibirdMeta[state.tab].blocks = previous
|
||||
state.asciibirdMeta[state.tab].redo.push(previous)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
redoBlocks(state) {
|
||||
if (state.asciibirdMeta[state.tab].redo.length > 0) {
|
||||
|
|
@ -245,8 +245,6 @@ export default new Vuex.Store({
|
|||
state.asciibirdMeta[state.tab].blocks = next
|
||||
state.asciibirdMeta[state.tab].history.push(next)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
updateBrushSize(state, payload) {
|
||||
state.toolbarState.brushSizeHeight = payload.brushSizeHeight;
|
||||
|
|
@ -277,19 +275,19 @@ export default new Vuex.Store({
|
|||
}
|
||||
},
|
||||
getters: {
|
||||
getState: (state) => state,
|
||||
state: (state) => state,
|
||||
modalState: (state) => state.modalState,
|
||||
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,
|
||||
getTargetingChar: (state) => state.toolbarState.targetingChar,
|
||||
getFgColour: (state) => state.toolbarState.currentColourFg,
|
||||
getBgColour: (state) => state.toolbarState.currentColourBg,
|
||||
getSelectedChar: (state) => state.toolbarState.selectedChar,
|
||||
options: (state) => state.options,
|
||||
toolbarIcons: (state) => state.toolbarIcons,
|
||||
toolbarState: (state) => state.toolbarState,
|
||||
debugPanel: (state) => state.debugPanelState,
|
||||
currentTool: (state) => state.toolbarState.currentTool,
|
||||
isTargettingBg: (state) => state.toolbarState.targetingBg,
|
||||
isTargettingFg: (state) => state.toolbarState.targetingFg,
|
||||
isTargettingChar: (state) => state.toolbarState.targetingChar,
|
||||
currentFg: (state) => state.toolbarState.currentColourFg,
|
||||
currentBg: (state) => state.toolbarState.currentColourBg,
|
||||
getChar: (state) => state.toolbarState.selectedChar,
|
||||
currentTab: (state) => state.tab,
|
||||
charCodes: (state) => state.charCodes,
|
||||
mircColours: (state) => state.mircColours,
|
||||
|
|
@ -305,7 +303,6 @@ export default new Vuex.Store({
|
|||
blockSizeMultiplier: (state) => state.blockSizeMultiplier,
|
||||
brushBlocks: (state) => state.brushBlocks,
|
||||
selectBlocks: (state) => state.selectBlocks,
|
||||
undoIndex: (state) => state.asciibirdMeta[state.tab].history.length-1,
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
|
||||
:w="canvas.width"
|
||||
:h="canvas.height"
|
||||
:draggable="$store.getters.getCurrentTool === 0"
|
||||
:draggable="$store.getters.currentTool === 0"
|
||||
@resizestop="onCanvasResize"
|
||||
@dragstop="onCavasDragStop"
|
||||
:x="currentAscii.x"
|
||||
|
|
@ -63,43 +63,45 @@ body {
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import Block from "../components/Block.vue";
|
||||
import { emptyBlock } from "./../ascii.js"
|
||||
|
||||
export default {
|
||||
name: "Editor",
|
||||
components: { Block },
|
||||
mounted() {
|
||||
|
||||
if (this.currentAsciiBlocks) {
|
||||
this.ctx = this.$refs.canvas.getContext("2d");
|
||||
this.toolCtx = this.$refs.canvastools.getContext("2d");
|
||||
|
||||
this.canvas.width =
|
||||
this.$store.getters.currentAscii.width *
|
||||
this.$store.getters.currentAscii.blockWidth;
|
||||
this.currentAscii.width *
|
||||
this.currentAscii.blockWidth;
|
||||
this.canvas.height =
|
||||
this.$store.getters.currentAscii.height *
|
||||
this.$store.getters.currentAscii.blockHeight;
|
||||
this.currentAscii.height *
|
||||
this.currentAscii.blockHeight;
|
||||
|
||||
this.delayRedrawCanvas();
|
||||
this.$store.commit("changeTool", 0);
|
||||
|
||||
const _this = this;
|
||||
this._keyListener = function (e) {
|
||||
if (this.currentToolIsText) {
|
||||
if (this.isTextEditing) {
|
||||
e.preventDefault();
|
||||
_this.canvasKeyDown(e.key);
|
||||
return;
|
||||
}
|
||||
|
||||
let ctrlKey = (e.ctrlKey || e.metaKey);
|
||||
|
||||
// Ctrl Z here
|
||||
// skg - thanks for mac key suggestion, bro
|
||||
if (e.key === "z" && (e.ctrlKey || e.metaKey)) {
|
||||
if (e.key === "z" && ctrlKey) {
|
||||
e.preventDefault();
|
||||
this.undo();
|
||||
}
|
||||
|
||||
// Ctrl Y here
|
||||
if (e.key === "y" && (e.ctrlKey || e.metaKey)) {
|
||||
console.log("ctrl y");
|
||||
if (e.key === "y" && ctrlKey) {
|
||||
e.preventDefault();
|
||||
// Fk it works :\
|
||||
this.redo();
|
||||
|
|
@ -107,52 +109,28 @@ export default {
|
|||
}
|
||||
|
||||
// Ctrl C - copy blocks
|
||||
if (e.key === "c" && (e.ctrlKey || e.metaKey)) {
|
||||
if (e.key === "c" && ctrlKey) {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.selectBlocks.length) {
|
||||
this.$store.commit("selectBlocks", this.selectBlocks);
|
||||
this.$store.commit("brushBlocks", this.selectBlocks);
|
||||
|
||||
this.$store.commit("changeTool", 4);
|
||||
|
||||
console.log("ctrl c", this.selectBlocks);
|
||||
}
|
||||
}
|
||||
|
||||
// Ctrl V - paste blocks
|
||||
// Not working
|
||||
// if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
|
||||
// e.preventDefault();
|
||||
if (e.key === "v" && ctrlKey) {
|
||||
e.preventDefault();
|
||||
|
||||
// if (this.selectBlocks.length) {
|
||||
// let x = 0;
|
||||
// let y = 0;
|
||||
if (this.selectBlocks.length) {
|
||||
this.$store.commit("brushBlocks", this.selectBlocks);
|
||||
this.$store.commit("changeTool", 4);
|
||||
}
|
||||
}
|
||||
|
||||
// let blocksHeight = this.selectBlocks.length;
|
||||
// let blocksWidth = this.selectBlocks[0] ? this.selectBlocks[0].length : this.currentAscii.width;
|
||||
|
||||
// for (y = 0; y < blocksHeight; y++) {
|
||||
// for (x = 0; x < blocksWidth; x++) {
|
||||
// if (
|
||||
// this.currentAsciiBlocks[y] &&
|
||||
// this.currentAsciiBlocks[y][x]
|
||||
// ) {
|
||||
// if (this.selectBlocks[y] && this.selectBlocks[y][x]) {
|
||||
// this.currentAsciiBlocks[y][x] = {
|
||||
// ...this.selectBlocks[y][x],
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// console.log("ctrl v", this.selectBlocks);
|
||||
|
||||
// this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
// this.delayRedrawCanvas();
|
||||
// }
|
||||
// }
|
||||
if (e.key === "d" && ctrlKey) {
|
||||
e.preventDefault();
|
||||
this.$store.commit("toggleDebugPanel", !this.debugPanelState.visible)
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", this._keyListener.bind(this));
|
||||
|
|
@ -192,47 +170,36 @@ export default {
|
|||
return this.$store.getters.currentAsciiBlocks;
|
||||
},
|
||||
currentTool() {
|
||||
return this.$store.getters.getToolbarIcons[
|
||||
this.$store.getters.getCurrentTool
|
||||
return this.$store.getters.toolbarIcons[
|
||||
this.$store.getters.currentTool
|
||||
];
|
||||
},
|
||||
currentToolIsText() {
|
||||
return (
|
||||
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
||||
.name === "text"
|
||||
);
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
},
|
||||
canFg() {
|
||||
return this.$store.getters.getTargetingFg;
|
||||
return this.$store.getters.isTargettingFg;
|
||||
},
|
||||
canBg() {
|
||||
return this.$store.getters.getTargetingBg;
|
||||
return this.$store.getters.isTargettingBg;
|
||||
},
|
||||
canText() {
|
||||
return this.$store.getters.getTargetingChar;
|
||||
return this.$store.getters.isTargettingChar;
|
||||
},
|
||||
currentFg() {
|
||||
return this.$store.getters.getFgColour;
|
||||
return this.$store.getters.currentFg;
|
||||
},
|
||||
currentBg() {
|
||||
return this.$store.getters.getBgColour;
|
||||
return this.$store.getters.currentBg;
|
||||
},
|
||||
currentChar() {
|
||||
return this.$store.getters.getSelectedChar;
|
||||
return this.$store.getters.getChar;
|
||||
},
|
||||
isTextEditing() { {
|
||||
|
||||
}
|
||||
return (
|
||||
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
||||
.name === "text"
|
||||
);
|
||||
isTextEditing() {
|
||||
return this.currentTool.name === "text"
|
||||
},
|
||||
isSelecting() {
|
||||
return (
|
||||
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
||||
.name === "select"
|
||||
);
|
||||
return this.currentTool.name === "select"
|
||||
},
|
||||
dragboxStyle() {
|
||||
return `z-index: 5;width:${this.canvas.width + 4};height:${
|
||||
|
|
@ -260,7 +227,7 @@ export default {
|
|||
return this.$store.getters.nextTabValue;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.getToolbarState;
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
mirrorX() {
|
||||
return this.toolbarState.mirrorX;
|
||||
|
|
@ -268,6 +235,9 @@ export default {
|
|||
mirrorY() {
|
||||
return this.toolbarState.mirrorY;
|
||||
},
|
||||
debugPanelState() {
|
||||
return this.$store.getters.debugPanel
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentAscii(val, old) {
|
||||
|
|
@ -291,10 +261,10 @@ export default {
|
|||
},
|
||||
currentTool() {
|
||||
switch (
|
||||
this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]
|
||||
.name
|
||||
this.currentTool.name
|
||||
) {
|
||||
case "default":
|
||||
// Reset default values for tools
|
||||
Object.assign(this.textEditing, {
|
||||
startX: null,
|
||||
startY: null,
|
||||
|
|
@ -313,6 +283,7 @@ export default {
|
|||
isMouseOnCanvas() {
|
||||
if (!this.isSelecting) {
|
||||
this.clearToolCanvas();
|
||||
this.canTool = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -328,7 +299,7 @@ export default {
|
|||
redrawSelect() {
|
||||
if (this.currentAsciiBlocks.length) {
|
||||
this.clearToolCanvas();
|
||||
this.toolCtx.fillStyle = this.$store.getters.mircColours[0];
|
||||
this.toolCtx.fillStyle = this.mircColours[0];
|
||||
|
||||
this.toolCtx.fillRect(
|
||||
this.selecting.startX,
|
||||
|
|
@ -373,7 +344,7 @@ export default {
|
|||
// Background block
|
||||
if (curBlock.bg !== null) {
|
||||
this.ctx.fillStyle =
|
||||
this.$store.getters.mircColours[curBlock.bg];
|
||||
this.mircColours[curBlock.bg];
|
||||
this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
|
||||
} else {
|
||||
this.ctx.fillStyle = "rgba(0, 0, 200, 0)";
|
||||
|
|
@ -382,7 +353,7 @@ export default {
|
|||
if (curBlock.char) {
|
||||
if (curBlock.fg !== null) {
|
||||
this.ctx.fillStyle =
|
||||
this.$store.getters.mircColours[curBlock.fg];
|
||||
this.mircColours[curBlock.fg];
|
||||
} else {
|
||||
this.ctx.fillStyle = "#000000";
|
||||
}
|
||||
|
|
@ -401,13 +372,7 @@ export default {
|
|||
this.ctx.stroke();
|
||||
},
|
||||
onCanvasResize(left, top, width, height) {
|
||||
const emptyBlock = {
|
||||
bg: null,
|
||||
fg: null,
|
||||
char: null,
|
||||
};
|
||||
|
||||
const blocks = this.$store.getters.currentAsciiBlocks;
|
||||
const blocks = this.currentAsciiBlocks;
|
||||
|
||||
const oldWidth = blocks[0].length;
|
||||
const oldHeight = blocks.length;
|
||||
|
|
@ -580,56 +545,7 @@ export default {
|
|||
case "select":
|
||||
this.selecting.canSelect = false;
|
||||
this.clearToolCanvas();
|
||||
|
||||
//
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
|
||||
let curBlock = {};
|
||||
this.selectBlocks = [];
|
||||
|
||||
for (y = 0; y < this.currentAscii.height; y++) {
|
||||
if (
|
||||
y >=
|
||||
Math.floor(
|
||||
this.selecting.startY / this.currentAscii.blockHeight
|
||||
) &&
|
||||
y <=
|
||||
Math.floor(this.selecting.endY / this.currentAscii.blockHeight)
|
||||
) {
|
||||
if (!this.selectBlocks[y]) {
|
||||
this.selectBlocks[y] = [];
|
||||
}
|
||||
|
||||
for (x = 0; x < this.currentAscii.width; x++) {
|
||||
if (
|
||||
x >=
|
||||
Math.floor(
|
||||
this.selecting.startX / this.currentAscii.blockWidth
|
||||
) &&
|
||||
x <=
|
||||
Math.floor(
|
||||
this.selecting.endX / this.currentAscii.blockWidth
|
||||
)
|
||||
) {
|
||||
if (
|
||||
this.currentAsciiBlocks[y] &&
|
||||
this.currentAsciiBlocks[y][x]
|
||||
) {
|
||||
curBlock = Object.assign(
|
||||
curBlock,
|
||||
this.currentAsciiBlocks[y][x]
|
||||
);
|
||||
|
||||
if (!this.selectBlocks[y][x]) {
|
||||
this.selectBlocks[y][x] = { ...curBlock };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.processSelect();
|
||||
this.redrawSelect();
|
||||
break;
|
||||
|
||||
|
|
@ -712,8 +628,8 @@ export default {
|
|||
this.currentAsciiBlocks[this.y][this.x]
|
||||
) {
|
||||
switch (
|
||||
this.$store.getters.getToolbarIcons[
|
||||
this.$store.getters.getCurrentTool
|
||||
this.$store.getters.toolbarIcons[
|
||||
this.$store.getters.currentTool
|
||||
].name
|
||||
) {
|
||||
case "brush":
|
||||
|
|
@ -778,6 +694,56 @@ export default {
|
|||
//
|
||||
// TOOLS
|
||||
//
|
||||
processSelect() {
|
||||
//
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
|
||||
let curBlock = {};
|
||||
this.selectBlocks = [];
|
||||
|
||||
for (y = 0; y < this.currentAscii.height; y++) {
|
||||
if (
|
||||
y >=
|
||||
Math.floor(
|
||||
this.selecting.startY / this.currentAscii.blockHeight
|
||||
) &&
|
||||
y <=
|
||||
Math.floor(this.selecting.endY / this.currentAscii.blockHeight)
|
||||
) {
|
||||
if (!this.selectBlocks[y]) {
|
||||
this.selectBlocks[y] = [];
|
||||
}
|
||||
|
||||
for (x = 0; x < this.currentAscii.width; x++) {
|
||||
if (
|
||||
x >=
|
||||
Math.floor(
|
||||
this.selecting.startX / this.currentAscii.blockWidth
|
||||
) &&
|
||||
x <=
|
||||
Math.floor(
|
||||
this.selecting.endX / this.currentAscii.blockWidth
|
||||
)
|
||||
) {
|
||||
if (
|
||||
this.currentAsciiBlocks[y] &&
|
||||
this.currentAsciiBlocks[y][x]
|
||||
) {
|
||||
curBlock = Object.assign(
|
||||
curBlock,
|
||||
this.currentAsciiBlocks[y][x]
|
||||
);
|
||||
|
||||
if (!this.selectBlocks[y][x]) {
|
||||
this.selectBlocks[y][x] = { ...curBlock };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
drawIndicator() {
|
||||
this.clearToolCanvas();
|
||||
|
||||
|
|
@ -789,7 +755,7 @@ export default {
|
|||
indicatorColour = 1;
|
||||
}
|
||||
|
||||
this.toolCtx.fillStyle = this.$store.getters.mircColours[indicatorColour];
|
||||
this.toolCtx.fillStyle = this.mircColours[indicatorColour];
|
||||
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
||||
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
||||
|
||||
|
|
@ -845,7 +811,7 @@ export default {
|
|||
indicatorColour = 1;
|
||||
}
|
||||
|
||||
this.toolCtx.fillStyle = this.$store.getters.mircColours[indicatorColour];
|
||||
this.toolCtx.fillStyle = this.mircColours[indicatorColour];
|
||||
const BLOCK_WIDTH = this.currentAscii.blockWidth;
|
||||
const BLOCK_HEIGHT = this.currentAscii.blockHeight;
|
||||
|
||||
|
|
@ -943,7 +909,7 @@ export default {
|
|||
if (this.canBg) {
|
||||
this.toolCtx.fillStyle =
|
||||
brushBlock.bg !== null
|
||||
? this.$store.getters.mircColours[brushBlock.bg]
|
||||
? this.mircColours[brushBlock.bg]
|
||||
: "#FFFFFF";
|
||||
|
||||
this.toolCtx.fillRect(
|
||||
|
|
@ -982,14 +948,14 @@ export default {
|
|||
|
||||
if (this.canTool && brushBlock.bg !== null) {
|
||||
targetBlock.bg = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getBgColour
|
||||
? this.$store.getters.currentBg
|
||||
: brushBlock.bg;
|
||||
|
||||
if (this.mirrorX) {
|
||||
this.currentAsciiBlocks[arrayY][
|
||||
asciiWidth - arrayX
|
||||
].bg = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getBgColour
|
||||
? this.$store.getters.currentBg
|
||||
: brushBlock.bg;
|
||||
}
|
||||
|
||||
|
|
@ -997,7 +963,7 @@ export default {
|
|||
this.currentAsciiBlocks[asciiHeight - arrayY][
|
||||
arrayX
|
||||
].bg = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getBgColour
|
||||
? this.$store.getters.currentBg
|
||||
: brushBlock.bg;
|
||||
}
|
||||
|
||||
|
|
@ -1005,7 +971,7 @@ export default {
|
|||
this.currentAsciiBlocks[asciiHeight - arrayY][
|
||||
asciiWidth - arrayX
|
||||
].bg = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getBgColour
|
||||
? this.$store.getters.currentBg
|
||||
: brushBlock.bg;
|
||||
}
|
||||
}
|
||||
|
|
@ -1014,7 +980,7 @@ export default {
|
|||
if (this.canFg) {
|
||||
this.toolCtx.fillStyle =
|
||||
brushBlock.fg !== null
|
||||
? this.$store.getters.mircColours[brushBlock.fg]
|
||||
? this.mircColours[brushBlock.fg]
|
||||
: "#000000";
|
||||
|
||||
if (this.canTool && brushBlock.fg !== null) {
|
||||
|
|
@ -1050,7 +1016,7 @@ export default {
|
|||
|
||||
if (this.canText && brushBlock.char !== null) {
|
||||
this.toolCtx.fillStyle =
|
||||
this.$store.getters.mircColours[brushBlock.fg];
|
||||
this.mircColours[brushBlock.fg];
|
||||
|
||||
this.toolCtx.fillText(
|
||||
brushBlock.char,
|
||||
|
|
@ -1060,14 +1026,14 @@ export default {
|
|||
|
||||
if (this.canTool && brushBlock.char !== null) {
|
||||
targetBlock.char = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getSelectedChar
|
||||
? this.$store.getters.getChar
|
||||
: brushBlock.char;
|
||||
|
||||
if (this.mirrorX) {
|
||||
this.currentAsciiBlocks[arrayY][
|
||||
asciiWidth - arrayX
|
||||
].char = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getSelectedChar
|
||||
? this.$store.getters.getChar
|
||||
: brushBlock.char;
|
||||
}
|
||||
|
||||
|
|
@ -1075,7 +1041,7 @@ export default {
|
|||
this.currentAsciiBlocks[asciiHeight - arrayY][
|
||||
arrayX
|
||||
].char = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getSelectedChar
|
||||
? this.$store.getters.getChar
|
||||
: brushBlock.char;
|
||||
}
|
||||
|
||||
|
|
@ -1083,13 +1049,13 @@ export default {
|
|||
this.currentAsciiBlocks[asciiHeight - arrayY][
|
||||
asciiWidth - arrayX
|
||||
].char = !this.$store.getters.selectBlocks.length
|
||||
? this.$store.getters.getSelectedChar
|
||||
? this.$store.getters.getChar
|
||||
: brushBlock.char;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.toolCtx.fillStyle = this.$store.getters.mircColours[0];
|
||||
this.toolCtx.fillStyle = this.mircColours[0];
|
||||
this.toolCtx.fillRect(brushX, brushY, BLOCK_WIDTH, BLOCK_HEIGHT);
|
||||
|
||||
if (this.mirrorX) {
|
||||
|
|
@ -1251,9 +1217,7 @@ export default {
|
|||
const { x } = this;
|
||||
const { y } = this;
|
||||
|
||||
const newColor = this.currengBg;
|
||||
|
||||
// Get the input which needs to be replaced.
|
||||
const newColor = this.currentBg;
|
||||
const current = this.currentAsciiBlocks[y][x].bg;
|
||||
|
||||
// If the newColor is same as the existing
|
||||
|
|
@ -1262,12 +1226,11 @@ export default {
|
|||
return this.currentAsciiBlocks;
|
||||
}
|
||||
|
||||
// Other wise call the fill function which will fill in the existing image.
|
||||
this.fillTool(this.currentAsciiBlocks, y, x, newColor, current);
|
||||
this.fillTool(this.currentAsciiBlocks, y, x, current);
|
||||
|
||||
this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
|
||||
},
|
||||
fillTool(fillBlocks, y, x, newColor, current) {
|
||||
fillTool(fillBlocks, y, x, current) {
|
||||
// If row is less than 0
|
||||
if (x < 0) {
|
||||
return;
|
||||
|
|
@ -1311,16 +1274,16 @@ export default {
|
|||
|
||||
// Fill in all four directions
|
||||
// Fill Prev row
|
||||
this.fillTool(fillBlocks, y, x - 1, newColor, current);
|
||||
this.fillTool(fillBlocks, y, x - 1, current);
|
||||
|
||||
// Fill Next row
|
||||
this.fillTool(fillBlocks, y, x + 1, newColor, current);
|
||||
this.fillTool(fillBlocks, y, x + 1, current);
|
||||
|
||||
// Fill Prev col
|
||||
this.fillTool(fillBlocks, y - 1, x, newColor, current);
|
||||
this.fillTool(fillBlocks, y - 1, x, current);
|
||||
|
||||
// Fill next col
|
||||
this.fillTool(fillBlocks, y + 1, x, newColor, current);
|
||||
this.fillTool(fillBlocks, y + 1, x, current);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Betöltés…
Reference in New Issue