2021-08-06 01:51:58 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2021-08-06 04:00:21 +00:00
|
|
|
<vue-draggable-resizable
|
2021-08-07 02:41:47 +00:00
|
|
|
@dragstop="onDragStop"
|
2021-08-12 05:51:16 +00:00
|
|
|
@resizestop="onResize"
|
2021-08-14 06:41:42 +00:00
|
|
|
:grid="[blockWidth, blockHeight]"
|
|
|
|
:min-width="blockWidth * 35"
|
2021-08-07 02:41:47 +00:00
|
|
|
:max-width="blockWidth * 50"
|
2021-08-16 06:14:49 +00:00
|
|
|
:min-height="blockHeight * 15"
|
2021-08-07 02:41:47 +00:00
|
|
|
:max-height="blockHeight * 100"
|
|
|
|
:w="brushLibraryState.w"
|
|
|
|
:h="brushLibraryState.h"
|
|
|
|
:x="brushLibraryState.x"
|
|
|
|
:y="brushLibraryState.y"
|
2021-08-21 01:28:06 +00:00
|
|
|
ref="brushlibrarypanel"
|
2021-08-06 04:00:21 +00:00
|
|
|
>
|
2021-08-19 01:08:36 +00:00
|
|
|
<t-card class="h-full overflow-y-auto overflow-x-auto">
|
2021-08-06 11:00:35 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
:class="`block w-full ${
|
2021-08-07 05:36:32 +00:00
|
|
|
panel.tab === 1
|
2021-08-06 11:00:35 +00:00
|
|
|
? 'border-gray-900 bg-blue-500'
|
|
|
|
: 'border-gray-200 bg-gray-500'
|
|
|
|
}`"
|
2021-08-07 05:36:32 +00:00
|
|
|
@click="changeTab(1)"
|
2021-08-06 11:00:35 +00:00
|
|
|
>
|
2021-08-15 01:20:58 +00:00
|
|
|
Library
|
|
|
|
</t-button>
|
2021-08-06 04:00:21 +00:00
|
|
|
|
2021-08-06 11:00:35 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
:class="`block w-full ${
|
2021-08-07 05:36:32 +00:00
|
|
|
panel.tab === 0
|
2021-08-06 11:00:35 +00:00
|
|
|
? 'border-gray-900 bg-blue-500'
|
|
|
|
: 'border-gray-200 bg-gray-500'
|
|
|
|
}`"
|
2021-08-07 05:36:32 +00:00
|
|
|
@click="changeTab(0)"
|
2021-08-06 11:00:35 +00:00
|
|
|
>
|
2021-08-15 01:20:58 +00:00
|
|
|
History
|
|
|
|
</t-button>
|
2021-08-06 04:00:21 +00:00
|
|
|
|
2021-08-06 11:00:35 +00:00
|
|
|
<div class="flex">
|
2021-08-07 05:36:32 +00:00
|
|
|
<div v-if="panel.tab === 0">
|
2021-08-19 01:08:36 +00:00
|
|
|
<div v-for="(brush, key) in brushHistory" :key="key">
|
2021-08-14 06:41:42 +00:00
|
|
|
<t-card
|
|
|
|
class="hover:border-blue-900 border-gray-300 bg-gray-200 mt-2"
|
|
|
|
>
|
2021-08-06 11:00:35 +00:00
|
|
|
<BrushCanvas :blocks="decompressBlock(brush.blocks)" />
|
2021-08-06 04:00:21 +00:00
|
|
|
|
2021-08-06 11:00:35 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
@click="saveToLibrary(decompressBlock(brush.blocks))"
|
2021-08-15 01:20:58 +00:00
|
|
|
>
|
|
|
|
<font-awesome-icon
|
2021-08-07 05:36:32 +00:00
|
|
|
:icon="['fas', 'save']"
|
|
|
|
size="lg"
|
|
|
|
class="p-1 mx-1"
|
2021-08-15 01:20:58 +00:00
|
|
|
/>
|
|
|
|
</t-button>
|
2021-08-06 11:00:35 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
@click="reuseBlocks(decompressBlock(brush.blocks))"
|
2021-08-15 01:20:58 +00:00
|
|
|
>
|
|
|
|
<font-awesome-icon
|
2021-08-07 05:36:32 +00:00
|
|
|
:icon="['fas', 'paint-brush']"
|
|
|
|
size="lg"
|
|
|
|
class="p-1 mx-1"
|
2021-08-15 01:20:58 +00:00
|
|
|
/>
|
|
|
|
</t-button>
|
2021-08-08 01:55:59 +00:00
|
|
|
|
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
@click="removeFromHistory(decompressBlock(brush.blocks))"
|
2021-08-15 01:20:58 +00:00
|
|
|
>
|
|
|
|
<font-awesome-icon
|
2021-08-08 01:55:59 +00:00
|
|
|
:icon="['fas', 'trash']"
|
|
|
|
size="lg"
|
|
|
|
class="p-1 mx-1 right-auto"
|
2021-08-15 01:20:58 +00:00
|
|
|
/>
|
|
|
|
</t-button>
|
2021-08-06 11:00:35 +00:00
|
|
|
</t-card>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-06 04:00:21 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
<div v-if="panel.tab === 1">
|
2021-08-19 01:08:36 +00:00
|
|
|
<div v-for="(brush, key) in brushLibrary" :key="key">
|
2021-08-06 11:00:35 +00:00
|
|
|
<t-card
|
2021-08-07 23:45:37 +00:00
|
|
|
:class="`hover:border-blue-900 border-gray-300 bg-gray-200 mt-2`"
|
2021-08-06 11:00:35 +00:00
|
|
|
>
|
|
|
|
<BrushCanvas :blocks="decompressBlock(brush.blocks)" />
|
2021-08-07 05:36:32 +00:00
|
|
|
|
2021-08-06 11:00:35 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
@click="removeFromLibrary(decompressBlock(brush.blocks))"
|
2021-08-15 01:20:58 +00:00
|
|
|
>
|
|
|
|
<font-awesome-icon
|
2021-08-07 05:36:32 +00:00
|
|
|
:icon="['fas', 'trash']"
|
|
|
|
size="lg"
|
|
|
|
class="p-1 mx-1"
|
2021-08-15 01:20:58 +00:00
|
|
|
/>
|
|
|
|
</t-button>
|
2021-08-06 11:00:35 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
@click="reuseBlocks(decompressBlock(brush.blocks))"
|
2021-08-15 01:20:58 +00:00
|
|
|
>
|
|
|
|
<font-awesome-icon
|
2021-08-07 05:36:32 +00:00
|
|
|
:icon="['fas', 'paint-brush']"
|
|
|
|
size="lg"
|
|
|
|
class="p-1 mx-1"
|
2021-08-15 01:20:58 +00:00
|
|
|
/>
|
|
|
|
</t-button>
|
2021-08-06 11:00:35 +00:00
|
|
|
</t-card>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-06 04:00:21 +00:00
|
|
|
</div>
|
2021-08-06 11:00:35 +00:00
|
|
|
</t-card>
|
2021-08-06 04:00:21 +00:00
|
|
|
</vue-draggable-resizable>
|
2021-08-06 01:51:58 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2021-08-14 06:41:42 +00:00
|
|
|
<style scoped>
|
|
|
|
.buttons {
|
|
|
|
margin-top: 35px;
|
|
|
|
}
|
|
|
|
.ghost {
|
|
|
|
opacity: 0.5;
|
|
|
|
background: #c8ebfb;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2021-08-06 01:51:58 +00:00
|
|
|
<script>
|
2021-08-06 04:00:21 +00:00
|
|
|
import { mircColours99, blockWidth, blockHeight } from "../ascii";
|
2021-08-06 11:00:35 +00:00
|
|
|
import BrushCanvas from "./parts/BrushCanvas.vue";
|
|
|
|
import LZString from "lz-string";
|
2021-08-06 01:51:58 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "BrushLibrary",
|
2021-08-07 02:41:47 +00:00
|
|
|
created() {
|
|
|
|
this.panel.x = this.brushLibraryState.x;
|
|
|
|
this.panel.y = this.brushLibraryState.y;
|
|
|
|
this.panel.w = this.brushLibraryState.w;
|
|
|
|
this.panel.h = this.brushLibraryState.h;
|
2021-08-07 05:36:32 +00:00
|
|
|
this.panel.tab = this.brushLibraryState.tab;
|
2021-08-07 02:41:47 +00:00
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
data: () => ({
|
2021-08-07 02:41:47 +00:00
|
|
|
panel: {
|
|
|
|
w: 0,
|
|
|
|
h: 0,
|
|
|
|
x: 100,
|
|
|
|
y: 100,
|
|
|
|
visible: true,
|
2021-08-07 05:36:32 +00:00
|
|
|
tab: 1,
|
2021-08-14 06:41:42 +00:00
|
|
|
dragging: false,
|
2021-08-07 02:41:47 +00:00
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
}),
|
2021-08-06 04:00:21 +00:00
|
|
|
components: {
|
|
|
|
BrushCanvas,
|
|
|
|
},
|
2021-08-21 01:28:06 +00:00
|
|
|
props: ['yOffset'],
|
2021-08-06 01:51:58 +00:00
|
|
|
computed: {
|
2021-08-06 04:00:21 +00:00
|
|
|
blockWidth() {
|
2021-08-14 06:41:42 +00:00
|
|
|
return blockWidth * this.blockSizeMultiplier;
|
2021-08-06 04:00:21 +00:00
|
|
|
},
|
|
|
|
blockHeight() {
|
2021-08-14 06:41:42 +00:00
|
|
|
return blockHeight * this.blockSizeMultiplier;
|
|
|
|
},
|
|
|
|
blockSizeMultiplier() {
|
|
|
|
return this.$store.getters.blockSizeMultiplier;
|
2021-08-06 04:00:21 +00:00
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
currentAscii() {
|
|
|
|
return this.$store.getters.currentAscii;
|
|
|
|
},
|
2021-08-06 04:00:21 +00:00
|
|
|
brushHistory() {
|
2021-08-19 01:08:36 +00:00
|
|
|
return this.$store.getters.brushHistory;
|
2021-08-06 04:00:21 +00:00
|
|
|
},
|
|
|
|
brushLibrary() {
|
|
|
|
return this.$store.getters.brushLibrary;
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
mircColours() {
|
|
|
|
return mircColours99;
|
|
|
|
},
|
2021-08-06 04:00:21 +00:00
|
|
|
brushBlocks() {
|
|
|
|
return this.$store.getters.brushBlocks;
|
|
|
|
},
|
2021-08-07 02:41:47 +00:00
|
|
|
brushLibraryState() {
|
|
|
|
return this.$store.getters.brushLibraryState;
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
},
|
2021-08-21 01:28:06 +00:00
|
|
|
watch: {
|
|
|
|
yOffset(val) {
|
|
|
|
this.$refs.brushlibrarypanel.top = Number.parseInt(this.brushLibraryState.y+val)
|
|
|
|
}
|
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
methods: {
|
2021-08-06 04:00:21 +00:00
|
|
|
changeTab(tab) {
|
2021-08-07 05:36:32 +00:00
|
|
|
this.panel.tab = tab;
|
|
|
|
this.$store.commit("changeBrushLibraryState", this.panel);
|
2021-08-06 04:00:21 +00:00
|
|
|
},
|
|
|
|
decompressBlock(item) {
|
2021-08-06 11:00:35 +00:00
|
|
|
return JSON.parse(LZString.decompressFromUTF16(item));
|
2021-08-06 04:00:21 +00:00
|
|
|
},
|
|
|
|
reuseBlocks(value) {
|
2021-08-06 11:00:35 +00:00
|
|
|
this.$store.commit("brushBlocks", value);
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$store.commit("changeTool", 4);
|
2021-08-06 04:00:21 +00:00
|
|
|
},
|
|
|
|
saveToLibrary(value) {
|
2021-08-06 11:00:35 +00:00
|
|
|
this.$store.commit("pushBrushLibrary", value);
|
|
|
|
},
|
|
|
|
removeFromLibrary(value) {
|
|
|
|
this.$store.commit("removeBrushLibrary", value);
|
|
|
|
},
|
2021-08-08 01:55:59 +00:00
|
|
|
removeFromHistory(value) {
|
|
|
|
this.$store.commit("removeBrushHistory", value);
|
|
|
|
},
|
2021-08-07 02:41:47 +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-07 05:36:32 +00:00
|
|
|
this.$store.commit("changeBrushLibraryState", this.panel);
|
2021-08-07 02:41:47 +00:00
|
|
|
},
|
|
|
|
onDragStop(x, y) {
|
|
|
|
this.panel.x = x;
|
|
|
|
this.panel.y = y;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$store.commit("changeBrushLibraryState", this.panel);
|
2021-08-07 02:41:47 +00:00
|
|
|
},
|
2021-08-06 01:51:58 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|