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;
  (e: "updateLineHeight", val: Path["lineAltitudeAboveGround"]): void;
}>();

const getLineProps = () => ({
  width: props.path.lineWidth,
  color: props.path.lineColor,
  altitudeAboveGround: props.path.lineAltitudeAboveGround,
  position: props.path.linePosition?.position,
  modelId: props.path.linePosition?.modelId,
});

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

watchEffect(() => path.visibilityName(props.path.showName));
watchEffect(() => path.changeFontSize(props.path.fontSize));
watchEffect(() => path.changeOpacity(props.path.opacity));
watchEffect(() => {
  path.changeDirection(props.path.showDirection, props.path.reverseDirection);
});

watchEffect(() => {
  const range = props.path.globalVisibility ? -1 : props.path.visibilityRange;
  path.changeVisibilityRange(range);
});

let currentPoints = props.path.points;
let changPointsTimeout: any;
path.bus.on("changePoints", (points) => {
  clearTimeout(changPointsTimeout);
  console.log('points', points)
  currentPoints = points.map((p, ndx) => ({
    name: p.name,
    position: { ...p.position },
    modelId: p.modelId.toString(),
    hide: p.hide || false,
  }));
  emit("updatePoints", currentPoints);
});
path.bus.on("changeLineHeight", (val) => {
  emit("updateLineHeight", val);
  clearTimeout(changLineTimeout);
});

watchEffect(() => {
  path.changeName(props.path.name);
});

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

watchEffect(() => {
    props.path.points.forEach((point, index) => {
    // 监听 name 属性
    watch(() => point.name, (newName) => {
      path.changePointName(index, newName);
      currentPoints[index].name = newName;
    });
    
    // 监听 hide 属性
    watch(() => point.hide, (newHide) => {
      if (path.changePointDisplay) {
        path.changePointDisplay(index, !newHide);
      }
    });
  });
},{ deep: true, flush: "post" });
watchEffect(() => {
  path.changeDirection(props.path.showDirection, props.path.reverseDirection);
});

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 },
    modelId: position.modelId.toString(),
  };
  currentLine = { ...getLineProps(), ...p };
  emit("updateLinePosition", p);
});

onUnmounted(() => {
  path.destroy();
});
defineExpose(path);
</script>

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