#HarmonyOS NEXT体验官# 基于鸿蒙Next的App（创意工坊）解析2：新建绘画文档 原创

// 引入必要的常量和依赖
import { PANEL_BACKGROUND_COLOR, PANEL_BUTTON_BACKGROUND_COLOR } from '../common/const'  // 引入面板背景颜色和按钮背景颜色常量
import { DocumentSize, DocumentSizes } from '../data/Documents'  // 引入文档尺寸和文档尺寸列表
import EntryAbility from '../entryability/EntryAbility'  // 引入EntryAbility模块，用于获取根路径
import {documentExists,createDocumentDir} from '../common/common'  // 引入检查文档是否存在和创建文档目录的函数

@Entry
@Component
export struct NewDocument {
  // 定义新建文档选择事件，可选参数类型为函数，接收文档名、文档路径和文档尺寸作为参数
  newDocumentSelected?: (documentName: string,
                         documentPath: string,
                         documentSize: DocumentSize) => void

  // 文本输入控制器，用于控制文档名的输入
  documentNameController: TextInputController = new TextInputController()
  // 定义根路径，初始化为EntryAbility的根路径
  rootPath:string = EntryAbility.rootPath;
  // 定义文档名状态变量，初始值为空字符串
  @State documentName: string = '';

  // 构建UI
  build() {
    Column() {
      // 文本输入框，用于输入文档名
      TextInput({ text: this.documentName, placeholder: '输入文档名...', controller: this.documentNameController })
        .placeholderColor(Color.Grey)  // 设置占位符颜色为灰色
        .placeholderFont({ size: 14, weight: 400 })  // 设置占位符字体大小和粗细
        .caretColor(Color.Blue)  // 设置光标颜色为蓝色
        .backgroundColor('#FFFFFF')  // 设置背景颜色为白色
        .width('90%')  // 设置宽度为90%
        .height(40)  // 设置高度为40
        .margin(20)  // 设置外边距为20
        .fontSize(14)  // 设置字体大小为14
        .fontColor(Color.Black)  // 设置字体颜色为黑色
        .onChange((value: string) => {  // 添加输入变化事件监听器
          this.documentName = value  // 当输入变化时，更新文档名状态变量
        })

      // 可滚动区域，包含文档尺寸选项按钮
      Scroll() {
        Column() {
          // 遍历文档尺寸列表，生成按钮
          ForEach(DocumentSizes, (item: DocumentSize) => {
            Button({ type: ButtonType.Normal }) {
              Text(item[0])  // 按钮文本为文档尺寸
            }.backgroundColor(PANEL_BUTTON_BACKGROUND_COLOR)  // 设置按钮背景颜色
            .foregroundColor('#FFFFFF')  // 设置按钮前景色（文本颜色）为白色
            .margin({ top: 5 })  // 设置上边距为5
            .onClick(() => {  // 添加点击事件监听器
              let documentName = this.documentName.trim();  // 获取并去除文档名的首尾空格
              if (documentName === '') {  // 如果文档名为空，显示提示对话框
                AlertDialog.show({
                  message:'请输入文档名',  // 提示信息
                  alignment: DialogAlignment.Center,  // 对话框居中对齐
                  primaryButton: {
                    value: '关闭',  // 按钮文本为“关闭”
                    action: () => {}
                  }
                })
              } else {
                if(documentExists(documentName)) {  // 如果文档名已存在，显示提示对话框
                  AlertDialog.show({
                    message:'文档已经存在，请换一个名',  // 提示信息
                    alignment: DialogAlignment.Center,  // 对话框居中对齐
                    primaryButton: {
                      value: '关闭',  // 按钮文本为“关闭”
                      action: () => {}
                    }
                  })
                } else {
                  if (this.newDocumentSelected) {  // 如果newDocumentSelected事件已定义
                    let documentPath = createDocumentDir(documentName);  // 创建文档目录并获取路径
                    this.newDocumentSelected(documentName, documentPath, item);  // 调用newDocumentSelected事件，传入文档名、文档路径和文档尺寸
                    this.documentName = '';  // 重置文档名状态变量
                  }
                }
              }
            })
          }, (item: DocumentSize) => item[0])  // 指定唯一键为文档尺寸

        }
        .width('100%')  // 设置列宽度为100%
      }
      .scrollable(ScrollDirection.Vertical)  // 设置滚动方向为垂直
      .width('100%')  // 设置宽度为100%
      .height('100%')  // 设置高度为100%
      .backgroundColor(PANEL_BACKGROUND_COLOR)  // 设置背景颜色为面板背景颜色
      .scrollBarWidth(0)  // 设置滚动条宽度为0
      .border({ width: 0, color: '#000000', radius: 10 })  // 设置边框宽度为0，颜色为黑色，圆角半径为10
    }
    .backgroundColor(PANEL_BACKGROUND_COLOR)  // 设置背景颜色为面板背景颜色
    .border({ width: 0, color: '#000000', radius: 10 })  // 设置边框宽度为0，颜色为黑色，圆角半径为10
    .width('100%')  // 设置宽度为100%
    .height('100%')  // 设置高度为100%
  }
}

newDocumentSelected(documentName: string, documentPath: string, documentSize: DocumentSize) {
    // 隐藏新建面板
    this.toggleNewPanel();
    // 更新当前文档名
    this.currentDocumentName = documentName;
    // 更新当前文档路径
    this.currentDocumentPath = documentPath;
    // 隐藏新建面板的可见性
    this.newPanelVisibility = Visibility.None;
    // 隐藏无文档的提示
    this.noDocumentVisibility = Visibility.None;
    
    // 设置当前画布的宽度
    this.currentCanvasWidth = documentSize[1];
    // 设置当前画布的高度
    this.currentCanvasHeight = documentSize[2];
    
    // 通过JavaScript代码设置画布的尺寸
    this.controller1.runJavaScript(`setCanvasSize("${documentSize[1]}","${documentSize[2]}")`)
      .then(data => {
        // 如果定时器ID小于100，启动定时器
        if (this.intervalId < 100) {
          setInterval(() => {
            // 定期获取画布的JSON数据
            this.controller1.runJavaScript(`getCanvasJSON()`)
              .then(data => {
                // 保存画布数据
                this.saveCanvas(trimQuotes(data))
              });
          }, 500);
          // 设置定时器ID为100，防止重复启动定时器
          this.intervalId = 100;
        }
      });
}

function setCanvasSize(width, height) {
    // 将传入的宽度和高度转换为像素
    var newWidth = convertDimensionToPixels(width);
    var newHeight = convertDimensionToPixels(height);

    // 初始化画布，设置新的宽度和高度
    initCanvas(newWidth, newHeight);

    // 更新当前画布宽度和高度的全局变量
    currentCanvasWidth = newWidth;
    currentCanvasHeight = newHeight;

    // 设置画布的新宽度和高度
    canvas.setWidth(newWidth);
    canvas.setHeight(newHeight);

    // 如果画布没有clipPath（裁剪路径），则创建一个新的clipPath
    if (!canvas.clipPath) {
        currentClipRect = new fabric.Rect({
            originX: 'left',           // 裁剪路径的原点X坐标设为左侧
            originY: 'top',            // 裁剪路径的原点Y坐标设为顶部
            left: 0,                   // 裁剪路径的左边距
            top: 0,                    // 裁剪路径的上边距
            width: newWidth,           // 裁剪路径的宽度
            height: newHeight * 3,     // 裁剪路径的高度
            selectable: false,         // 设置裁剪路径不可选中
            evented: false,            // 设置裁剪路径不响应事件
            absolutePositioned: true   // 设置裁剪路径为绝对定位
        });
        // 将新创建的裁剪路径设置为画布的clipPath
        canvas.clipPath = currentClipRect;
    } else {
        // 如果已有clipPath，则更新其尺寸
        canvas.clipPath.set({ width: newWidth, height: newHeight });
    }

    // 添加网格线，参数为网格尺寸、小网格单元数量和线型
    addGridLines(gridSize, smallCellNumber, 'dashed');

    // 请求重新渲染画布
    canvas.requestRenderAll();
}