traffic-laser/src/hook/useGraphic.ts

import {computed, reactive, Ref, ref, watch, watchEffect} from "vue";
import { structureDraw } from "@/graphic";
import VectorType from '@/graphic/enum/VectorType'
import UIType from '@/graphic/enum/UIEvents'
import type {RoadPhoto} from '@/store/roadPhotos'
import type {AccidentPhoto} from '@/store/accidentPhotos'
import {getStaticFile} from "@/dbo/main";

export type UITypeT = typeof UIType
export type VectorTypeT = typeof VectorType
export type FocusVector = {
  type: VectorTypeT[keyof VectorTypeT],
  category?: VectorTypeT[keyof VectorTypeT],
  vectorId: string
}

const newsletter = ref<{
  selectUI?: UITypeT[keyof UITypeT]
  focusVector?: FocusVector
}>({ selectUI: null, focusVector: null });

export const graphicState = ref({
  canRevoke: false,
  canRecovery: false,
  showBackImage: false
})

export const setCanvas = async (canvas: HTMLCanvasElement, data: Ref<AccidentPhoto | RoadPhoto>) => {
  await import("../graphic/index.js").then((model) => {
    drawRef.value = model.structureDraw(canvas, newsletter, graphicState);
    watch(
      () => data.value?.id,
      (id, oldId) => {
        if (data.value) {
          oldId && drawRef.value.load.clear()
          console.log("load", data.value)
          drawRef.value.load.load(data.value.data, {
            ...data.value.sceneData,
            backImage: getStaticFile(data.value.photoUrl)
          })
        } else {
          drawRef.value.load.clear()
        }
      },
      { immediate: true }
    )
  });
};

export const drawRef = ref<ReturnType<typeof structureDraw>>();

export const uiType = reactive({
  current: computed(() => newsletter.value.selectUI),
  change: (type: UITypeT[keyof UITypeT]) => {
    drawRef.value.uiControl.selectUI = type
  }
})
export const currentVector = computed(() => newsletter.value.focusVector)

export { VectorType, UIType }