traffic-laser/src/views/graphic/geos/text.vue

<template>
  <GeoTeleport :menus="menus" class="geo-teleport-use">
    <template v-slot="{ data }">
      <template v-if="data.key === 'color'">
        <Color v-model:color="color">
          <span class="color" :style="{ backgroundColor: color }"></span>
        </Color>
      </template>
      <template v-if="data.key === 'fontSize'">
        <ui-input
          type="select"
          :options="sizeOption"
          class="geo-input"
          dire="top"
          floatingClass="select-floating"
          v-model="size"
        />
        <span class="font-size">{{ size }}</span>
      </template>
    </template>
  </GeoTeleport>

  <div class="text-model" v-if="updateText">
    <div class="text-input">
      <ui-input
        ref="inputTextRef"
        v-model="text"
        width="100%"
        :maxlength="20"
        height="64px"
        @blur="updateText = false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
import UiInput from "@/components/base/components/input/index.vue";
import UiIcon from "@/components/base/components/icon/index.vue";
import { FocusVector, drawRef, useChange } from "@/hook/useGraphic";
import { computed, ref, watch, watchEffect } from "vue";
import { dataService } from "@/graphic/Service/DataService";
import { debounce } from "@/utils";
import GeoActions from "@/graphic/enum/GeoActions";
import Color from "@/components/color/index.vue";
import VectorCategory from "@/graphic/enum/VectorCategory";

const props = defineProps<{ geo: FocusVector }>();
const inputTextRef = ref();
const updateText = ref(false);
const vector = computed(() => {
  let vectorId = props.geo.vectorId;
  if (props.geo.category === VectorCategory.Point.FixPoint) {
    vectorId = dataService.getPoint(props.geo.vectorId)?.linkedTextId;
  }
  return dataService.getText(vectorId);
});
const text = ref("");
const color = ref("#000000");
const size = ref(18);

const syncVector = ([text, size, color]) => {
  console.log(text, size, color);
  vector.value.setValue(text);
  vector.value.setColor(color);
  vector.value.setFontSize(size);
  drawRef.value.renderer.autoRedraw();
  drawRef.value.history.save();
};

watchEffect(() => {
  if (inputTextRef.value) {
    inputTextRef.value.vmRef.input.focus();
  }
});

useChange(() => {
  console.log(vector.value);
  color.value = vector.value.color;
  size.value = vector.value.fontSize;
  text.value = vector.value.value;
});
watch(() => [text.value, size.value, color.value], debounce(syncVector, 500));

const sizeOption = [];
for (let i = 10; i < 30; i++) {
  sizeOption.push({ label: i, value: i });
}
const menus = [
  {
    key: "color",
    icon: "del",
    text: "颜色",
  },
  {
    key: "fontSize",
    text: "文字大小",
  },
  {
    key: "text",
    icon: "edit",
    text: "修改文字",
    onClick: () => (updateText.value = true),
  },
  {
    key: "del",
    icon: "del",
    text: "删除",
    onClick: () => {
      drawRef.value.uiControl.handleGeo(GeoActions.DeleteAction);
    },
  },
];
</script>

<style scoped lang="scss">
.color {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-block;
}

.font-size {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.del-icon {
  font-size: 16px;
}

.geo-input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
}

.text-model {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 4;
}

.text-input {
  width: 785px;
  height: 64px;
  display: block;
  margin: 176px auto 0;
}
</style>

<style lang="scss">
.select-floating.select-float.dire-top {
  margin-top: -10px;
}

.text-input .ui-input .text input {
  font-size: 16px;
  padding: 16px 21px;
}
</style>