<script setup lang="ts">
import { onMounted } from 'vue';

import { 星座图示例数据_50点 } from './_星座图示例数据_50.js';
import './konva.2.4.2.min.js'; // 引入 Konva 库
import { PlanisphereWidget } from './planispherewidget.js'; // 导入 onMounted

definePage({
  meta: {
    title: '星座图',
  },
});

// 在组件挂载后执行
onMounted(() => {
  // 创建 PlanisphereWidget 实例，指定容器 ID
  const widget = new PlanisphereWidget('constellation-container', {
    // 可以根据需要传递配置选项，例如背景色
    bg_color: '#1e1e2f',
    border_color: '#4a4a6a',
    wave_color: '#00bcd4', // 更改波形颜色以便更清晰
  });

  // 调用 feed 方法绘制星座图
  // 默认 viewmodel 为 0，会调用 drawWave_planis
  widget.feed(星座图示例数据_50点);

  // 如果需要明确设置模式（虽然默认就是星座图）
  // widget.setViewMode(0); // 0=星座图
  // widget.feed(testData);

  // 如果想测试余晖效果
  // widget.setViewMode(3); // 3=余晖图
  // setInterval(() => {
  //   const newData = [];
  //   for (let i = 0; i < 20; i++) { // 每次添加少量新点
  //     const x = Math.random() * 2 - 1;
  //     const y = Math.random() * 2 - 1;
  //     newData.push([x, y]);
  //   }
  //   widget.feed(newData); // 传入新数据以观察余晖
  // }, 500); // 每 500ms 更新一次
});
</script>

<template>
  <div>
    <h2>星座图示例</h2>
    <!-- 添加一个具有 ID 的 div 作为 Konva 的容器 -->
    <div id="constellation-container" class="canvas-container"></div>
  </div>
</template>

<style scoped>
.canvas-container {
  width: 500px; /* 设置容器宽度 */
  height: 500px; /* 设置容器高度 */
  border: 1px solid #ccc; /* 添加边框以便观察容器位置 */
  margin-top: 20px;
}
</style>
