fuse-code/src/components/drawing-time-line/frame.vue

<template>
  <template v-for="(l, i) in lines">
    <v-line
      :config="{ ...l, fill: activeNdx === i ? '#00c8af' : '#fff' }"
      :ref="(s: any) => frameShapes[i] = s"
    />
  </template>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import {
  flatPositions,
  useGlobalVar,
  useViewerInvertTransformConfig,
} from "../drawing/hook";
import { Transform } from "konva/lib/Util";
import { Line, LineConfig } from "konva/lib/shapes/Line";
import { DC } from "../drawing/dec";

const { misPixel } = useGlobalVar();

const props = defineProps<{
  items: { time: number }[];
  top: number;
  activeNdx?: number;
}>();
const s = 6;
const invConfig = useViewerInvertTransformConfig();
const lines = computed(() => {
  return props.items.map((item) => {
    const origin = { x: item.time * misPixel, y: props.top + 10 };
    const points = [
      { x: origin.x - s / 2, y: origin.y },
      { x: origin.x + s / 2, y: origin.y },
      { x: origin.x + s / 2, y: origin.y + s * 1.5 },
      { x: origin.x, y: origin.y + s * 2 },
      { x: origin.x - s / 2, y: origin.y + s * 1.5 },
    ];

    return {
      points: flatPositions(points),
      closed: true,
      fill: "#fff",
      hitStrokeWidth: 5,
      ...new Transform()
        .translate(origin.x, 0)
        .scale(invConfig.value.scaleX, 1)
        .translate(-origin.x, 0)
        .decompose(),
    } as LineConfig;
  });
});

const frameShapes = ref<DC<Line>[]>([]);
defineExpose({
  get shapes() {
    return frameShapes.value;
  },
});
</script>