web-map/src/components/editor-toolbar.vue

<script setup lang="ts">
import { MapAreaType } from '@api/map';
import type { EditorService } from '@core/editor.service';
import { isEmpty } from 'lodash-es';
import { inject, type InjectionKey, ref, type ShallowRef, watch } from 'vue';

type Props = {
  token: InjectionKey<ShallowRef<EditorService>>;
  editable?: boolean;
  current?: string;
};
const props = defineProps<Props>();
const editor = inject(props.token)!;

const mode = ref<MapAreaType>();
watch(editor.value.mouseBrush, (v) => {
  if (!mode.value) return;
  const [p1, p2] = v ?? [];
  if (isEmpty(p1) || isEmpty(p2)) return;
  editor.value.addArea(p1, p2, mode.value);
  mode.value = undefined;
});
</script>

<template>
  <a-space class="toolbar" :size="0">
    <a-button
      class="icon-btn tool-btn"
      :class="{ active: mode === MapAreaType.库区 }"
      size="large"
      @click="mode = MapAreaType.库区"
    >
      <i class="icon" :class="mode === MapAreaType.库区 ? 'area1-active' : 'area1'" />
    </a-button>
    <a-button
      class="icon-btn tool-btn ml-12"
      :class="{ active: mode === MapAreaType.互斥区 }"
      size="large"
      @click="mode = MapAreaType.互斥区"
    >
      <i class="icon" :class="mode === MapAreaType.互斥区 ? 'area11-active' : 'area11'" />
    </a-button>
    <a-button
      class="icon-btn tool-btn ml-12"
      :class="{ active: mode === MapAreaType.非互斥区 }"
      size="large"
      @click="mode = MapAreaType.非互斥区"
    >
      <i class="icon" :class="mode === MapAreaType.非互斥区 ? 'area12-active' : 'area12'" />
    </a-button>

    <a-divider class="size-24 mh-8" type="vertical" />

    <a-button class="icon-btn tool-btn" size="large">
      <i class="mask save" />
    </a-button>
    <a-button class="icon-btn tool-btn ml-12" size="large">
      <i class="mask undo" />
    </a-button>
    <a-button class="icon-btn tool-btn ml-12" size="large">
      <i class="mask redo" />
    </a-button>
    <a-button class="icon-btn tool-btn ml-12" size="large" :disabled="!editor.selected.value.length">
      <i class="mask trash" />
    </a-button>
  </a-space>
</template>