// 引入parse和gener函数
// parse: Parse 解析, gener: Generate 生成
const { parse, gener } = require("keypsd");
const { readFileSync, writeFileSync } = require("fs");

// 读取psd文件并解析
let file = readFileSync("./src/test/temp.psd");
// parse接受Uint8Array, Buffer或ArrayBuffer
let result = parse(file);
// 递归显示解析结果
console.dir(result, { depth: null });

// 由测试数据生成PSD文件
let gened = gener(result);
// 写入psd文件, 去文件管理器中打开试试看
writeFileSync("./src/test/write.psd", gened);

// 你可以再次解析生成的数据
// parse(gened);
// ...

// 获取该链接指向的PSD文件并解析为PSD对象
keypsd.parseFrom("./test.psd")
    // 我们直接将解析结果打印出来
    .then(r=> console.log(r));

// 获取该链接指向的图片并为其生成PSD文件
keypsd.generFrom("./test.jpg")
    // 解析生成的PSD文件并将解析结果打印出来
    .then(r=> console.log(keypsd.parse(r)));

// 创建新的Image元素
let img = new Image();
// 指定图像链接(存在跨域限制)
img.src = "./test.jpg";
// 无需等待img.onload, 直接传入generFrom
keypsd.generFrom(img)
    // 将生成的PSD文件解析并打印
    .then(r=> console.log(keypsd.parse(r)));

fetch("./test.jpg")
    // 将fetch结果作为Blob
    .then(response=> response.blob())
    // 解析该Blob对象表达的PSD文件
    .then(blob=> keypsd.generFrom(blob))
    // 为了测试生成的文件的可用性, 将其传入parse再次解析
    .then(r=> console.log(keypsd.parse(r)));

({
  // 以下三个属性为固定值
  channels: 3,
  depth: 8,
  mode: 'RGB',

  // 正整数width和height
  height: 16,
  width: 16,

  // 图层列表
  layers: [
    {
      // 4个定位用的整数, width和height为正整数. 
      top: 0,
      left: 0,
      width: 0,
      height: 0,
      // 字符串, 作为图层名称
      name: '</Layer group>',
      // 可见性, 就是图层左侧的小眼睛按钮状态
      visible: true,
      // CSS mix-blend-mode的16属性之一, 参见(https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode). 
      blendMode: 'normal',
      // 8位无符号整数(0~255), 代表图层的透明度
      opacity: 255,
      // 通道, 目前必定为id为`-1`到`2`的4个通道, 分别代表argb. 
      channels: [
        { id: -1, dataLen: 0 },
        { id: 0, dataLen: 0 },
        { id: 1, dataLen: 0 },
        { id: 2, dataLen: 0 }
      ],
      // 由photoshop为图层生成的id, 不唯一, 不可靠, 不建议使用. 
      id: 943868237,
      // 只要有这个属性就代表这是一个标记图层组的图层, 只会是"open"和"close"两个值. 
      // 想象带这个属性的图层是一个xml元素, "open"图层就是`<folder>`, "close"图层就是`</folder>`. 
      // 区别在于, 我们往往只显示"open"的图层作为图层组, "close"图层往往不会被显示出来. 
      // 另外, 由于得到的图层顺序是图层栏中从下往上的顺序, 因此你会先遇到"close", 之后才有"open". 
      folder: 'close',
      // 由于该图层只是个标记图层组结束的标志, 并不储存图像, 且width和height都是0
      // 该image属性只会是一个空的Uint8Array. 
      image: Uint8Array(0)
    },
    {
      // 该图层没有folder和text属性, 则是普通的图层, 会有图像信息
      top: 0,
      left: 0,
      width: 16,
      height: 16,
      name: '图层 0',
      visible: true,
      blendMode: 'normal',
      opacity: 255,
      channels: [
        { id: -1, dataLen: 64 },
        { id: 0, dataLen: 256 },
        { id: 1, dataLen: 256 },
        { id: 2, dataLen: 256 }
      ],
      id: 943868237,
      // 一个图层的图像大小必定为**图层**的长乘宽乘4, 代表了其`RGBA`数据
      // 可以直接作为canvas ImageData的数据源
      image: Uint8Array(1024)
    },
    {
      // 该图层是文本图层, 因为它有text属性
      top: 3,
      left: 4,
      width: 9,
      height: 10,
      name: 'a',
      visible: true,
      blendMode: 'normal',
      opacity: 255,
      channels: [
        { id: -1, dataLen: 90 },
        { id: 0, dataLen: 90 },
        { id: 1, dataLen: 90 },
        { id: 2, dataLen: 90 }
      ],
      // text属性描述了该图层包含的文本和样式信息
      text: {
        // 固定6个浮点数, 代表了其变换数据. 参见: 
        // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setTransform
        transform: Float64Array(6) [
          1,
          0,
          0,
          1,
          3.308916720099315,
          12.438202409238862
        ],
        // psd中对该文字的描述信息, 可用性不高
        raw: {...},
        // 该图层的所有字符
        text: 'a\n', 
        // 字符的样式
        chars: [
          {
            char: 'a',
            // [R, G, B, A]
            // 可以通过`rgb(${color[0]} ${color[1]} ${color[2]})`转成字符串. 
            color: Uint8Array(4) [ 82, 159, 70, 255 ],
            // Postscript字体名, **无法**直接用于`font-family`, 
            // 可能需要`queryLocalFonts`函数来查询其`family`的值
            font: 'MicrosoftJhengHeiUIRegular',
            // 字体大小
            size: 16,
            // 下划线, 粗体, 斜体
            underline: false,
            bold: true,
            italic: true
          },
          {
            char: '\n',
            color: Uint8Array(4) [ 82, 159, 70, 255 ],
            font: 'MicrosoftJhengHeiUIRegular',
            size: 16,
            underline: false,
            bold: true,
            italic: true
          },
          text: 'a\n'
        ]
      },
      id: 943868237,
      // 该文本图层的栅格化数据
      // psd很有可能没有写入该数据, 而是用0填充了长度
      image: Uint8Array(360)
    },
    {
      top: 0,
      left: 0,
      width: 0,
      height: 0,
      name: '组 1',
      visible: true,
      blendMode: 'normal',
      opacity: 255,
      channels: [
        { id: -1, dataLen: 0 },
        { id: 0, dataLen: 0 },
        { id: 1, dataLen: 0 },
        { id: 2, dataLen: 0 }
      ],
      id: 943868237,
      // 照应第一个图层
      folder: 'open',
      image: Uint8Array(0)
    }
  ]
})

let psd = { width: 16, height: 16, layers: [ {} ] };
keypsd.gener(psd);

...
let data = context.getImageData(0, 0, 16, 16).data;
let psd = { width: 16, height: 16, layers: [{
    name: "新图层",
    image: data
}] };
keypsd.gener(psd);

let psd = { width: 16, height: 16, layers: [{
    name: "原神",
    text: { chars: [
        {
            char: "原", 
            size: 15
        }, {
            char: "神", 
            size: 12
        }
    ] }
}] };
keypsd.gener(psd);

// 要传入的字符串
const MY_STR = "原神\n启动!";
let textpsd = { width: 32, height: 32, layers: [{
    name: "原神の图层",
    // 将该字符串迭代为每个字符组成数组, 并为每个字符包装成字符对象
    text: { chars: Array.from(MY_STR).map(char=> ({
        // 字符
        char, 
        // 以下颜色示例为黄色rgb(200 200 100)
        // alpha干脆不填也没事
        color: [200, 200, 100], 
        // 字体大小
        size: 8, 
        // 加粗
        bold: true
    })) }
}] };
let gened = keypsd.gener(textpsd);