fuse-code/src/components/path/sign.vue

<template>
  <!-- <template v-if="show">
    <div :style="linePixel">
      {{ path.name }}
    </div>
    <template v-for="(p, i) in pointPixels">
      <span :style="p" v-if="p && path.points[i].name">
        {{ path.points[i].name }}
      </span>
    </template>
</template> -->
</template>

<script lang="ts" setup>
import { computed, onUnmounted, ref, watch, watchEffect } from "vue";
import { sdk } from "@/sdk";

import type { Path } from "@/store";
import { inRevise } from "bill/utils";

export type SignProps = { path: Path };

const props = defineProps<SignProps>();
const emit = defineEmits<{
  (e: "delete"): void;
  (e: "updateLinePosition", val: Path["linePosition"]): void;
  (e: "updatePoints", val: Path["points"]): void;
}>();

const getLineProps = () => ({
  width: props.path.lineWidth,
  color: props.path.lineColor,
  altitudeAboveGround: props.path.lineAltitudeAboveGround,
  position: props.path.linePosition?.position || props.path.points[0]?.position,
  normal: props.path.linePosition?.normal || { x: 0, y: 0, z: 1 },
  modelId: props.path.linePosition?.modelId || props.path.points[0]?.modelId,
});

const path = sdk.createPath({
  name: props.path.name,
  showName: props.path.showName,
  fontSize: props.path.fontSize,
  showDirection: props.path.showDirection,
  reverseDirection: props.path.reverseDirection,
  line: getLineProps(),
  points: props.path.points,
});
path.changeCanEdit(false);

watchEffect(() => path.visibilityName(props.path.showName));

const toCameraDistance = ref(path.toCameraDistance);
path.bus.on("toCameraDistanceChange", (v) => (toCameraDistance.value = v));
const show = computed(
  () =>
    !props.path.points.length ||
    props.path.globalVisibility ||
    toCameraDistance.value <= Math.pow(props.path.visibilityRange, 2)
);
watchEffect(() => {
  console.log(props.path.globalVisibility, toCameraDistance.value);
  console.error("globalVisibility", show.value);
  // path.visibility(show.value);
});

let currentPoints = props.path.points;
let changPointsTimeout: any;
path.bus.on("changePoints", (points) => {
  clearTimeout(changPointsTimeout);
  currentPoints = points.map((p, ndx) => ({
    name: p.name || `标记点${ndx + 1}`,
    position: { ...p.position },
    modelId: p.modelId,
  }));
  console.log("updatePoints", currentPoints);
  emit("updatePoints", currentPoints);
});
watchEffect(() => {
  path.changeName(props.path.name);
});

watch(
  () => props.path.points.map((i) => ({ modelId: i.modelId, position: i.position })),
  (p) => {
    changPointsTimeout = setTimeout(() => {
      if (inRevise(props.path.points, currentPoints)) {
        path.changePathPoints(p);
        currentPoints = props.path.points;
      }
    }, 16);
  },
  { deep: true, flush: "post" }
);

watchEffect(() => {
  for (const point of props.path.points) {
    watchEffect(() => {
      const ndx = props.path.points.indexOf(point);
      if (~ndx) {
        path.changePointName(ndx, point.name);
        currentPoints[ndx].name = point.name;
      }
    });
  }
});

let currentLine = getLineProps();
let changLineTimeout: any;
watch(
  getLineProps,
  (val) => {
    changLineTimeout = setTimeout(() => {
      if (inRevise(val, currentLine)) {
        path.changeLine(val);
        currentLine = val;
      }
    }, 16);
  },
  { deep: true }
);
path.bus.on("linePositionChange", (position) => {
  const p = {
    position: { ...position.pos },
    normal: { ...position.normal },
    modelId: position.modelId,
  };
  currentLine = { ...getLineProps(), ...p };
  emit("updateLinePosition", p);
});

onUnmounted(() => {
  console.error(path, "destory");
  path.destroy();
});
defineExpose(path);
</script>

<style lang="scss" scoped></style>