2021-02-06 01:22:16 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2021-03-13 03:30:58 +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 * 25"
|
2021-08-14 06:41:42 +00:00
|
|
|
:max-width="blockWidth * 40"
|
|
|
|
:max-height="blockHeight * 20"
|
|
|
|
:min-height="blockHeight * 19"
|
2021-04-24 00:20:11 +00:00
|
|
|
:w="toolbarState.w"
|
|
|
|
:h="toolbarState.h"
|
|
|
|
:x="toolbarState.x"
|
|
|
|
:y="toolbarState.y"
|
2021-08-07 05:36:32 +00:00
|
|
|
:draggable="draggable"
|
2021-08-21 01:28:06 +00:00
|
|
|
ref="toolbardrag"
|
2021-02-06 01:22:16 +00:00
|
|
|
>
|
2021-08-05 00:54:40 +00:00
|
|
|
<t-card class="h-full">
|
2021-08-16 07:03:53 +00:00
|
|
|
<div class="flex mb-2">
|
|
|
|
<Colours />
|
|
|
|
</div>
|
2021-08-04 23:09:29 +00:00
|
|
|
|
|
|
|
<div class="flex">
|
2021-12-21 09:51:37 +00:00
|
|
|
<label class="ab-checkbox-hover">
|
2021-08-04 23:09:29 +00:00
|
|
|
<t-checkbox
|
2021-12-21 09:03:40 +00:00
|
|
|
class="form-checkbox h-5 w-5 text-blue-600"
|
2021-08-04 23:09:29 +00:00
|
|
|
name="targetingFg"
|
|
|
|
v-model="toolbarState.targetingFg"
|
|
|
|
:disabled="!canBg && !canText"
|
|
|
|
/>
|
2021-12-21 09:03:40 +00:00
|
|
|
<span class="ab-checkbox-label">FG</span>
|
2021-08-04 23:09:29 +00:00
|
|
|
</label>
|
|
|
|
|
2021-12-21 09:51:37 +00:00
|
|
|
<label class="ab-checkbox-hover">
|
2021-08-04 23:09:29 +00:00
|
|
|
<t-checkbox
|
2021-12-21 09:03:40 +00:00
|
|
|
class="ab-checkbox"
|
2021-08-04 23:09:29 +00:00
|
|
|
name="targetingBg"
|
|
|
|
v-model="toolbarState.targetingBg"
|
|
|
|
:disabled="!canFg && !canText"
|
|
|
|
checked
|
|
|
|
/>
|
2021-12-21 09:03:40 +00:00
|
|
|
<span class="ab-checkbox-label">BG</span>
|
2021-08-04 23:09:29 +00:00
|
|
|
</label>
|
|
|
|
|
2021-12-21 09:51:37 +00:00
|
|
|
<label class="ab-checkbox-hover">
|
2021-08-04 23:09:29 +00:00
|
|
|
<t-checkbox
|
2021-12-21 09:03:40 +00:00
|
|
|
class="ab-checkbox"
|
2021-08-04 23:09:29 +00:00
|
|
|
name="targetingChar"
|
|
|
|
v-model="toolbarState.targetingChar"
|
|
|
|
:disabled="!canFg && !canBg"
|
|
|
|
/>
|
2021-12-21 09:03:40 +00:00
|
|
|
<span class="ab-checkbox-label">Text</span>
|
2021-08-04 23:09:29 +00:00
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
2021-12-21 09:51:37 +00:00
|
|
|
<div class="flex mb-3">
|
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
|
|
|
|
mirror.x
|
|
|
|
? 'border-gray-900 bg-blue-800'
|
|
|
|
: 'border-gray-200 bg-gray-500'
|
|
|
|
}`"
|
|
|
|
@click="
|
|
|
|
mirror.x = !mirror.x;
|
|
|
|
updateMirror();
|
|
|
|
$toasted.show(`Mirror X ${mirror.x ? 'enabled' : 'disabled'}`);
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<span class="material-icons">more_vert</span>
|
|
|
|
</t-button>
|
2021-08-04 23:09:29 +00:00
|
|
|
|
2021-08-14 06:41:42 +00:00
|
|
|
|
2021-12-21 09:51:37 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
|
|
|
|
mirror.y
|
|
|
|
? 'border-gray-900 bg-blue-800'
|
|
|
|
: 'border-gray-200 bg-gray-500'
|
|
|
|
}`"
|
|
|
|
@click="
|
|
|
|
mirror.y = !mirror.y;
|
|
|
|
updateMirror();
|
|
|
|
$toasted.show(`Mirror Y ${mirror.y ? 'enabled' : 'disabled'}`);
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<span class="material-icons">more_horiz</span>
|
|
|
|
</t-button>
|
|
|
|
|
|
|
|
|
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
|
|
|
|
toolbarState.updateBrush
|
|
|
|
? 'border-gray-900 bg-blue-800'
|
|
|
|
: 'border-gray-200 bg-gray-500'
|
|
|
|
}`"
|
|
|
|
@click="
|
|
|
|
$store.commit('toggleUpdateBrush', updateBrush);
|
|
|
|
toolbarState.updateBrush = !toolbarState.updateBrush;
|
|
|
|
$toasted.show(`Update Brush when colours or char changes ${toolbarState.updateBrush ? 'enabled' : 'disabled'}`);
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<span class="material-icons">color_lens</span>
|
|
|
|
</t-button>
|
|
|
|
|
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
|
|
|
|
toolbarState.gridView
|
|
|
|
? 'border-gray-900 bg-blue-800'
|
|
|
|
: 'border-gray-200 bg-gray-500'
|
|
|
|
}`"
|
|
|
|
@click="
|
|
|
|
$store.commit('toggleGridView', gridView);
|
|
|
|
toolbarState.gridView = !toolbarState.gridView;
|
|
|
|
$toasted.show(`Grid view ${toolbarState.gridView ? 'enabled' : 'disabled'}`);
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<span class="material-icons">{{
|
|
|
|
!this.gridView ? "grid_on" : "grid_off"
|
|
|
|
}}</span>
|
|
|
|
</t-button>
|
|
|
|
</div>
|
2021-04-17 00:12:02 +00:00
|
|
|
|
2021-08-12 01:52:40 +00:00
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
v-for="(value, keyToolbar) in toolbarIcons"
|
|
|
|
:key="keyToolbar + 50"
|
2021-12-21 09:51:37 +00:00
|
|
|
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
|
2021-08-12 01:52:40 +00:00
|
|
|
currentTool.name === value.name
|
|
|
|
? 'border-gray-900 bg-blue-500'
|
|
|
|
: 'border-gray-200 bg-gray-500'
|
|
|
|
}`"
|
|
|
|
@click="$store.commit('changeTool', keyToolbar)"
|
|
|
|
>
|
2021-12-21 09:03:40 +00:00
|
|
|
<span class="material-icons">{{ value.icon }}</span>
|
2021-08-12 01:52:40 +00:00
|
|
|
</t-button>
|
2021-03-29 05:10:31 +00:00
|
|
|
</t-card>
|
2021-02-06 01:22:16 +00:00
|
|
|
</vue-draggable-resizable>
|
|
|
|
</div>
|
|
|
|
</template>
|
2021-03-20 03:45:10 +00:00
|
|
|
|
2021-02-06 01:22:16 +00:00
|
|
|
<script>
|
2021-08-04 23:09:29 +00:00
|
|
|
import Colours from "./Colours.vue";
|
2021-08-05 00:54:40 +00:00
|
|
|
import { toolbarIcons, blockWidth, blockHeight } from "../ascii";
|
2021-03-29 05:10:31 +00:00
|
|
|
|
2021-02-06 01:22:16 +00:00
|
|
|
export default {
|
2021-04-24 00:20:11 +00:00
|
|
|
created() {
|
2021-08-03 07:33:25 +00:00
|
|
|
this.toolbar.x = this.toolbarState.x;
|
|
|
|
this.toolbar.y = this.toolbarState.y;
|
|
|
|
this.toolbar.w = this.toolbarState.w;
|
|
|
|
this.toolbar.h = this.toolbarState.h;
|
2021-07-31 02:12:11 +00:00
|
|
|
|
2021-08-03 07:33:25 +00:00
|
|
|
this.mirror.x = this.toolbarState.mirrorX;
|
|
|
|
this.mirror.y = this.toolbarState.mirrorY;
|
2021-04-24 00:20:11 +00:00
|
|
|
},
|
2021-08-04 23:09:29 +00:00
|
|
|
name: "Toolbar",
|
2021-08-14 06:41:42 +00:00
|
|
|
components: { Colours },
|
2021-08-21 01:28:06 +00:00
|
|
|
props: ["yOffset"],
|
2021-02-06 01:22:16 +00:00
|
|
|
data: () => ({
|
2021-04-24 00:20:11 +00:00
|
|
|
toolbar: {
|
|
|
|
w: 0,
|
|
|
|
h: 0,
|
2021-02-06 01:22:16 +00:00
|
|
|
x: 100,
|
|
|
|
y: 100,
|
|
|
|
},
|
2021-07-31 02:12:11 +00:00
|
|
|
mirror: {
|
|
|
|
x: false,
|
|
|
|
y: false,
|
2021-08-03 07:33:25 +00:00
|
|
|
},
|
2021-02-06 01:22:16 +00:00
|
|
|
}),
|
2021-04-24 00:20:11 +00:00
|
|
|
computed: {
|
2021-08-03 03:00:32 +00:00
|
|
|
toolbarIcons() {
|
2021-08-03 07:33:25 +00:00
|
|
|
return toolbarIcons;
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
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() {
|
2021-08-15 01:20:58 +00:00
|
|
|
return this.$store.getters.blockSizeMultiplier;
|
2021-08-05 00:54:40 +00:00
|
|
|
},
|
2021-04-24 00:20:11 +00:00
|
|
|
toolbarState() {
|
2021-08-03 07:33:25 +00:00
|
|
|
return this.$store.getters.toolbarState;
|
2021-04-24 00:20:11 +00:00
|
|
|
},
|
|
|
|
currentAscii() {
|
|
|
|
return this.$store.getters.currentAscii;
|
|
|
|
},
|
2021-08-03 03:00:32 +00:00
|
|
|
currentTool() {
|
2021-08-03 07:33:25 +00:00
|
|
|
return toolbarIcons[this.$store.getters.currentTool];
|
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
|
|
|
},
|
2021-08-07 05:36:32 +00:00
|
|
|
draggable() {
|
|
|
|
return this.toolbarState.draggable;
|
|
|
|
},
|
2021-08-14 06:41:42 +00:00
|
|
|
gridView() {
|
|
|
|
return this.toolbarState.gridView;
|
|
|
|
},
|
|
|
|
updateBrush() {
|
|
|
|
return this.toolbarState.updateBrush;
|
|
|
|
},
|
2021-04-24 00:20:11 +00:00
|
|
|
},
|
2021-08-21 01:28:06 +00:00
|
|
|
watch: {
|
|
|
|
yOffset(val) {
|
2021-12-21 09:51:37 +00:00
|
|
|
this.$refs.toolbardrag.top = Number.parseInt(this.toolbarState.y + val);
|
2021-08-21 01:28:06 +00:00
|
|
|
},
|
|
|
|
},
|
2021-02-06 01:22:16 +00:00
|
|
|
methods: {
|
2021-07-31 02:12:11 +00:00
|
|
|
updateMirror() {
|
2021-08-04 23:09:29 +00:00
|
|
|
this.$store.commit("updateMirror", this.mirror);
|
2021-07-31 02:12:11 +00:00
|
|
|
},
|
2021-04-24 00:20:11 +00:00
|
|
|
onResize(x, y, w, h) {
|
|
|
|
this.toolbar.x = x;
|
|
|
|
this.toolbar.y = y;
|
|
|
|
this.toolbar.w = w;
|
|
|
|
this.toolbar.h = h;
|
|
|
|
|
2021-08-04 23:09:29 +00:00
|
|
|
this.$store.commit("changeToolBarState", {
|
2021-08-04 03:21:06 +00:00
|
|
|
x,
|
|
|
|
y,
|
2021-08-03 07:33:25 +00:00
|
|
|
w: this.toolbar.w,
|
|
|
|
h: this.toolbar.h,
|
|
|
|
});
|
2021-02-06 01:22:16 +00:00
|
|
|
},
|
2021-04-01 23:01:36 +00:00
|
|
|
onDragStop(x, y) {
|
2021-04-24 00:20:11 +00:00
|
|
|
this.toolbar.x = x;
|
|
|
|
this.toolbar.y = y;
|
2021-04-01 23:01:36 +00:00
|
|
|
|
2021-08-04 23:09:29 +00:00
|
|
|
this.$store.commit("changeToolBarState", {
|
2021-08-04 03:21:06 +00:00
|
|
|
x,
|
|
|
|
y,
|
2021-08-03 07:33:25 +00:00
|
|
|
w: this.toolbar.w,
|
|
|
|
h: this.toolbar.h,
|
|
|
|
});
|
2021-02-06 01:22:16 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|