traffic-laser/src/views/scene/covers/fixPoints.vue

<template>
  <FixPointPanel
    v-for="point in (fixPoints as FixPoint[])"
    :key="point.id"
    :data="point"
    :active="point === customMap.activeFixPoint && !selectMeasure"
    @change-pos="(pos) => changePos(point, pos)"
    @focus="(isRaw) => select(point, false, isRaw)"
    @blur="(isRaw) => unSelect(point, false, isRaw)"
    @focus-measure="select(point, true, true)"
    @blur-measure="unSelect(point, true, true)"
  />

  <div ref="menu" @touchstart.stop class="action-menus">
    <!--    <ActionsPanel :menus="activeActionMenus" v-show="customMap.activeFixPoint" />-->

    <ActionMenus
      v-if="drawstatus !== DrawStatus.ing && customMap.activeFixPoint"
      :menus="activeActionMenus"
      :type="0"
      :active-key="edit ? 'edit' : null"
      dire="row"
    />

    <Confirm
      v-if="drawstatus === DrawStatus.ing"
      :ok="() => (drawstatus = DrawStatus.complete)"
      :cancel="() => (drawstatus = DrawStatus.quit)"
      :dis-ok="!ready"
    />
    <!-- <ActionMenus
      v-if="ingActionMenus"
      :type="0"
      :menus="ingActionMenus"
      :active-key="null"
      dire="row"
    /> -->
  </div>

  <EditFixPoint
    v-if="edit"
    @quit="edit = null"
    v-model:text="edit.text"
    ref="dom"
    :key="edit.id"
  />
</template>

<script setup lang="ts">
import { fixPoints, FixPoint } from "@/store/fixPoint";
import FixPointPanel from "./fixPoint.vue";
import Confirm from "../../graphic/confirm.vue";
import { computed, ref, toRaw, watch, watchEffect } from "vue";
import { customMap } from "@/hook";
import ActionMenus from "@/components/group-button/index.vue";
import EditFixPoint from "@/components/edit-fix-point/index.vue";
import {
  delFix3d,
  changePos,
  quitMeasure,
  drawstatus,
  DrawStatus,
  drawingFix3d,
  selectFix3d,
} from "../fixManage";

const edit = ref<FixPoint>();
watchEffect(() => {
  if (edit.value !== customMap.activeFixPoint) {
    edit.value = null;
  }
});

const selectMeasure = ref(false);
const select = (point: FixPoint, onMeasure: boolean = false, onRaw: boolean = false) => {
  selectMeasure.value = onMeasure;
  customMap.activeFixPoint = point;

  if (!onRaw) {
    fixPoints.value.forEach((item) => {
      console.log("select", toRaw(item) === toRaw(point));
      selectFix3d(point, toRaw(item) === toRaw(point));
    });
  }
};
const unSelect = (
  point: FixPoint,
  onMeasure: boolean = false,
  onRaw: boolean = false
) => {
  selectMeasure.value = onMeasure;
  customMap.activeFixPoint =
    customMap.activeFixPoint === point ? null : customMap.activeFixPoint;

  if (!onRaw) {
    selectFix3d(point, false);
  }
};

const activeActionMenus = computed(() =>
  selectMeasure.value
    ? [
        {
          key: "delete",
          icon: "del",
          text: "删除",
          color: "#FF4D4F",
          iconColor: "#fff",
          onClick() {
            quitMeasure(customMap.activeFixPoint);
          },
        },
      ]
    : [
        {
          key: "edit",
          icon: "edit",
          text: "编辑",
          color: "#161A1A",
          iconColor: "#2F8FFF",
          onClick() {
            edit.value =
              edit.value === customMap.activeFixPoint ? null : customMap.activeFixPoint;
          },
        },
        {
          key: "delete",
          icon: "del",
          text: "删除",
          color: "#FF4D4F",
          iconColor: "#fff",
          onClick() {
            if (delFix3d(customMap.activeFixPoint)) {
              customMap.activeFixPoint = null;
              edit.value = null;
            }
          },
        },
      ]
);

const ready = ref(false);
watchEffect(() => {
  if (drawstatus.value === DrawStatus.ing) {
    ready.value = false;
    drawingFix3d.value[0].bus.on(
      "graphChange",
      (data) => (ready.value = data.path.length > 1)
    );
  }
});

const dom = ref<HTMLDivElement>();
const menu = ref<HTMLDivElement>();
watchEffect((onCleanup) => {
  if (edit.value && dom.value) {
    const handler = (ev) => {
      if (!dom.value.contains(ev.target) && !menu.value.contains(ev.target)) {
        edit.value = null;
      }
    };
    // document.documentElement.addEventListener("click", handler)
    document.documentElement.addEventListener("touchstart", handler);
    onCleanup(() => {
      // document.documentElement.removeEventListener("click", handler)
      document.documentElement.removeEventListener("touchstart", handler);
    });
  }
});
</script>

<style lang="scss" scoped>
.action-menus {
  position: absolute;
  bottom: var(--boundMargin);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 2;
  .menus {
    position: static;
  }
}
</style>

<style>
.action-menus .menu.active {
  background: none;
}

.search-fix.ui-input .text.suffix input {
  padding-right: 50px;
}
</style>