traffic-laser/src/views/scene/TrackMeasure.vue

<template>
  <div class="photo-btn">
    <ButtonPane class="item fun-ctrl" :size="80" @click="callback">
      <ui-icon type="return" class="icon" />
    </ButtonPane>
    <ButtonPane class="item fun-ctrl" :size="80" @click="active = !active">
      <ui-icon type="line_h" class="icon" :class="{ active }" />
    </ButtonPane>
  </div>
</template>
<script setup lang="ts">
import UiIcon from "@/components/base/components/icon/index.vue";
import ButtonPane from "@/components/button-pane/index.vue";
import {
  startMeasure,
  stopMeasure,
  SuccessMeasureAtom,
} from "@/views/scene/linkage/measure";
import { onActivated, onMounted, ref, watchEffect, nextTick } from "vue";
import { tempMeasures } from "@/store/measure";
import { measureDisabledStack } from "@/hook/custom";
import { useSDK } from "@/hook";

const props = defineProps<{ onConfirm: (data: SuccessMeasureAtom) => void }>();
const active = ref(false);
const callback = () => {
  props.onConfirm(tempMeasures.value[0] as any);
  tempMeasures.value = [];
};
watchEffect(() => {
  if (active.value) {
    tempMeasures.value = [];
    startMeasure("L_LINE", "red").then((measure) => {
      if (measure) {
        active.value = null;
        tempMeasures.value = [measure];
        nextTick(() => {
          const canvas = useSDK().carry.measureMap.get(measure);
          canvas.bus.on("update", (pos) => {
            measure.length = canvas.getDistance().value;
          });
        });
      }
    });
  } else {
    stopMeasure();
  }
});
</script>

<style lang="scss" scoped>
.photo-btn {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 15px;
  z-index: 1000;

  .item {
    position: static;
    margin: 20px 0;
  }

  .icon {
    &.active {
      color: var(--colors-primary-base);
    }

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
  }
}
</style>