44 lines
1.4 KiB
Vue
44 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { MAP_POINT_TYPES, type MapPen, type MapPointInfo } from '@api/map';
|
||
|
|
import type { EditorService } from '@core/editor.service';
|
||
|
|
import sTheme from '@core/theme.service';
|
||
|
|
import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
token: InjectionKey<ShallowRef<EditorService>>;
|
||
|
|
};
|
||
|
|
const props = defineProps<Props>();
|
||
|
|
const editor = inject(props.token)!;
|
||
|
|
|
||
|
|
const pen = computed<MapPen | undefined>(() => editor.value.current.value);
|
||
|
|
const point = computed<MapPointInfo | null>(() => {
|
||
|
|
const point = pen.value?.point;
|
||
|
|
if (!point?.type) return null;
|
||
|
|
return point;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-card :title="$t('属性')" :bordered="false">
|
||
|
|
<template v-if="pen && point">
|
||
|
|
<a-row :gutter="8">
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-select :value="point.type" @change="editor.changePointType(pen.id!, <number>$event)">
|
||
|
|
<a-select-option v-for="[l, v] in MAP_POINT_TYPES" :key="v">{{ $t(l) }}</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-input
|
||
|
|
:maxlength="10"
|
||
|
|
:value="pen.label"
|
||
|
|
@change="editor.updatePen(pen.id!, { label: $event.target.value }, false)"
|
||
|
|
>
|
||
|
|
<template #suffix><EditOutlined /></template>
|
||
|
|
</a-input>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</template>
|
||
|
|
<a-empty v-else :image="sTheme.empty" />
|
||
|
|
</a-card>
|
||
|
|
</template>
|