<!--
 * @FileDescription: vue-konva
 * @Author: hcy
 * @Date: 2023-03-29
-->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
// import Konva from 'konva';

// const state = reactive({
//   stage: null as any,
//   layer: null as any,
//   group: new Map(),
//   myMap: new Map(),
//   // shape: null as any,
//   //   boundingBox: null as any,
//   //   box: null as any,
//   shapePath: [
//     {
//       name: 'test1',
//       color: 'pink',
//       selected: true,
//       path: [
//         { x: 100, y: 100 },
//         { x: 200, y: 100 },
//         { x: 200, y: 200 },
//         { x: 0, y: 300 },
//       ],
//     },
//   ] as any[],
// });

const stageSize = reactive({
  width: 1200, // 画布宽度
  height: 800, // 画布高度
  gridGap: 100, // 网格的间距
});

onMounted(() => {
  drawGrid();
});

/**
 * 绘制网格线
 */
function drawGrid() {
  let canvas: any = document.getElementById('canvas-grid');
  let pen = canvas.getContext('2d');

  // 绘制网格
  const step = stageSize.gridGap;
  const h = stageSize.height;
  const w = stageSize.width;
  const w_l = w / step;
  const h_l = h / step;

  // 横着的线
  for (let i = 0; i <= h_l; i++) {
    pen.beginPath();
    pen.moveTo(0, i * step);
    pen.lineTo(w, i * step);
    pen.stroke();
  }
  // 竖着的线
  for (let i = 0; i <= w_l; i++) {
    pen.beginPath();
    pen.moveTo(i * step, 0);
    pen.lineTo(i * step, h);
    pen.stroke();
  }
}
</script>
<template>
  <div class="konva-main-page container-height center">
    <div
      class="canvas-box"
      :style="{
        width: stageSize.width + 'px',
        height: stageSize.height + 'px',
      }"
    >
      <canvas
        id="canvas-grid"
        :width="stageSize.width"
        :height="stageSize.height"
        style="position: absolute"
      ></canvas>
      <div id="stage-container"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.canvas-box {
  box-sizing: border-box;
  border: 1px solid #000;
  position: relative;
}
</style>
