vue-desktop/src/core/desktop/ui/useDesktopInit.ts

import XSystem from '@/core/XSystem.ts'
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
import {
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  toRefs,
  useTemplateRef,
  watch,
  watchEffect,
} from 'vue'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { useDraggable } from '@vueuse/core'

export function useDesktopInit(containerStr: string) {
  let container:HTMLElement
  const gridTemplate = reactive({
    cellWidth: 90,
    cellHeight: 110,
    gap: 10,
    colCount: 1,
    rowCount: 1
  })

  const ro = new ResizeObserver(entries => {
    const entry= entries[0]
    const containerRect = entry.contentRect
    gridTemplate.colCount = Math.floor(containerRect.width / gridTemplate.cellWidth);
    gridTemplate.rowCount = Math.floor(containerRect.height / (gridTemplate.cellHeight));
    console.log('resize', gridTemplate)
  })

  onMounted(() => {
    container = document.querySelector(containerStr)!
    ro.observe(container)
  })
  onUnmounted(() => {
    ro.unobserve(container)
  })

  // 有桌面图标的app
  const appInfos = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
  const appIcons: IDesktopAppIcon[] = appInfos.map((processInfo, index) => {
    // 左上角坐标原点，从上到下从左到右 索引从1开始
    const x = Math.floor(index / gridTemplate.rowCount) + 1
    const y = index % gridTemplate.rowCount + 1
    return {
      name: processInfo.name,
      icon: processInfo.icon,
      path: processInfo.startName,
      col: x,
      row: y
    }
  })
  const appIconsRef = reactive(appIcons)

  watch(() => [gridTemplate.rowCount, gridTemplate.colCount], () => {
    appIconsRef.forEach((appIcon, index) => {
      const x = Math.floor(index / gridTemplate.rowCount) + 1
      const y = index % gridTemplate.rowCount + 1
      appIcon.col = x
      appIcon.row = y
    })
    console.log(appIconsRef)
  })

  return {
    ...toRefs(gridTemplate),
    appIconsRef
  }
}