asciibird/src/components/Toolbar.vue

<template>
  <div>
    <vue-draggable-resizable
      @dragstop="onDragStop"
      :grid="[blockWidth, blockHeight]"
      :min-width="blockWidth * 25"
      :max-width="blockWidth * 40"
      :max-height="blockHeight * 20"
      :min-height="blockHeight * 19"
      :w="toolbarState.w"
      :h="toolbarState.h"
      :x="toolbarState.x"
      :y="toolbarState.y"
      :draggable="draggable"
      ref="toolbardrag"
    >
      <t-card class="h-full">
        <div class="flex mb-2">
          <Colours />
        </div>

        <div class="flex">
          <label class="ml-1 w-1/3">
            <t-checkbox
              class="form-checkbox m-1"
              name="targetingFg"
              v-model="toolbarState.targetingFg"
              :disabled="!canBg && !canText"
            />
            <span class="text-sm">FG</span>
          </label>

          <label class="ml-1 w-1/3">
            <t-checkbox
              class="form-checkbox m-1"
              name="targetingBg"
              v-model="toolbarState.targetingBg"
              :disabled="!canFg && !canText"
              checked
            />
            <span class="text-sm">BG</span>
          </label>

          <label class="ml-1 w-1/3">
            <t-checkbox
              class="form-checkbox m-1"
              name="targetingChar"
              v-model="toolbarState.targetingChar"
              :disabled="!canFg && !canBg"
            />
            <span class="text-sm">Text</span>
          </label>
        </div>

        <div class="flex">
          <label class="ml-1 w-1/2">
            <t-checkbox
              class="form-checkbox m-1"
              name="mirror-x"
              v-model="mirror.x"
              @change="updateMirror()"
            />
            <span class="text-sm">Mirror X</span>
          </label>
          <label class="ml-1 w-1/2">
            <t-checkbox
              class="form-checkbox m-1"
              name="mirror-y"
              v-model="mirror.y"
              @change="updateMirror()"
            />
            <span class="text-sm">Mirror Y</span>
          </label>
        </div>

        <div class="flex">
          <label class="ml-1 w-1/2">
            <t-checkbox
              class="form-checkbox m-1"
              name="update-brush"
              v-model="toolbarState.updateBrush"
              @change="$store.commit('toggleUpdateBrush', updateBrush)"
            />
            <span class="text-sm">Update Brush</span>
          </label>
          <label class="ml-1 w-1/2">
            <t-checkbox
              class="form-checkbox m-1"
              name="grid"
              v-model="toolbarState.gridView"
              @change="$store.commit('toggleGridView', gridView)"
            />
            <span class="text-sm">Grid</span>
          </label>
        </div>

        <hr class="m-3" />

        <t-button
          type="button"
          v-for="(value, keyToolbar) in toolbarIcons"
          :key="keyToolbar + 50"
          :class="`w-10 h-10 mt-1 ml-1 ${
            currentTool.name === value.name
              ? 'border-gray-900 bg-blue-500'
              : 'border-gray-200 bg-gray-500'
          }`"
          @click="$store.commit('changeTool', keyToolbar)"
        >
          <font-awesome-icon :icon="[value.fa, value.icon]" size="lg" />
        </t-button>
      </t-card>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import Colours from "./Colours.vue";
import { toolbarIcons, blockWidth, blockHeight } from "../ascii";

export default {
  created() {
    this.toolbar.x = this.toolbarState.x;
    this.toolbar.y = this.toolbarState.y;
    this.toolbar.w = this.toolbarState.w;
    this.toolbar.h = this.toolbarState.h;

    this.mirror.x = this.toolbarState.mirrorX;
    this.mirror.y = this.toolbarState.mirrorY;
  },
  name: "Toolbar",
  components: { Colours },
  props: ["yOffset"],
  data: () => ({
    toolbar: {
      w: 0,
      h: 0,
      x: 100,
      y: 100,
    },
    mirror: {
      x: false,
      y: false,
    },
  }),
  computed: {
    toolbarIcons() {
      return toolbarIcons;
    },
    blockWidth() {
      return blockWidth * this.blockSizeMultiplier;
    },
    blockHeight() {
      return blockHeight * this.blockSizeMultiplier;
    },
    blockSizeMultiplier() {
      return this.$store.getters.blockSizeMultiplier;
    },
    toolbarState() {
      return this.$store.getters.toolbarState;
    },
    currentAscii() {
      return this.$store.getters.currentAscii;
    },
    currentTool() {
      return 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.currentChar;
    },
    draggable() {
      return this.toolbarState.draggable;
    },
    gridView() {
      return this.toolbarState.gridView;
    },
    updateBrush() {
      return this.toolbarState.updateBrush;
    },
  },
  watch: {
    yOffset(val) {
      this.$refs.toolbardrag.top =  Number.parseInt(this.toolbarState.y + val);
    },
  },
  methods: {
    updateMirror() {
      this.$store.commit("updateMirror", this.mirror);
    },
    onResize(x, y, w, h) {
      this.toolbar.x = x;
      this.toolbar.y = y;
      this.toolbar.w = w;
      this.toolbar.h = h;

      this.$store.commit("changeToolBarState", {
        x,
        y,
        w: this.toolbar.w,
        h: this.toolbar.h,
      });
    },
    onDragStop(x, y) {
      this.toolbar.x = x;
      this.toolbar.y = y;

      this.$store.commit("changeToolBarState", {
        x,
        y,
        w: this.toolbar.w,
        h: this.toolbar.h,
      });
    },
  },
};
</script>