import { app } from "../../../scripts/app.js";
import { fabric } from "./fabric.js";
import { api } from "../../../scripts/api.js";
import {getDrawColor, hexToRgba} from "./utils.js"
import {PainterWidget,createMessage,loadData,LS_PSave} from "./painter_node.js"

const painters_settings_json = false;

fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = "#108ce6";
fabric.Object.prototype.borderColor = "#108ce6";
fabric.Object.prototype.cornerSize = 10;

let connect_keypoints = [
  [0, 1],
  [1, 2],
  [2, 3],
  [3, 4],
  [1, 5],
  [5, 6],
  [6, 7],
  [1, 8],
  [8, 9],
  [9, 10],
  [1, 11],
  [11, 12],
  [12, 13],
  [0, 14],
  [14, 16],
  [0, 15],
  [15, 17],
];
let connect_color = [
  [0, 0, 255],
  [255, 0, 0],
  [255, 170, 0],
  [255, 255, 0],
  [255, 85, 0],
  [170, 255, 0],
  [85, 255, 0],
  [0, 255, 0],
  [0, 255, 85],
  [0, 255, 170],
  [0, 255, 255],
  [0, 170, 255],
  [0, 85, 255],
  [85, 0, 255],
  [170, 0, 255],
  [255, 0, 255],
  [255, 0, 170],
  [255, 0, 85],
];

const default_keypoints = [
  [241, 57],
  [241, 120],
  [191, 118],
  [177, 183],
  [163, 252],
  [298, 118],
  [317, 182],
  [332, 245],
  [225, 241],
  [213, 359],
  [215, 454],
  [270, 240],
  [282, 360],
  [286, 456],
  [230, 48],
  [255, 48],
  [215, 52],
  [270, 52],
];
const default_subset=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
const asyncLoadImg = (imgURL) => {
  return new Promise((resolve,reject) => {
      // 2.6.0 版本没有对图片加载异常的处理，需要自己处理
      fabric.Image.fromURL(imgURL, img => {
          // 加载出错提示，否则会造成渲染出错
          if(img._originalElement === null){
            reject('图片加载出错啦~~~')  
          }else {
            resolve(img)
          }
      })
      // 4.2.0版本有错误处理 
      // fabric.Image.fromURL(imgURL, (img,isError) => {})
  })
}
class OpenPose {
  constructor(node, canvasElement) {
    this.lockMode = false;
    this.visibleEyes = true;
    this.flipped = false;
    this.node = node;
    this.undo_history = LS_Poses[node.name].undo_history || [];
    this.redo_history = LS_Poses[node.name].redo_history || [];
    this.groups = [];
    this.subsets = [];
    this.hands = [];
    this.rects = [];
    this.index = 1
    this.history_index = 0;
    this.history_change = false;
    this.canvas = this.initCanvas(canvasElement);
    this.disabled=false
        // 创建用于选择图片的input元素
    this.addPoseDemoInput = document.createElement("input");
    this.addPoseDemoInput.type = "file";
    this.addPoseDemoInput.accept = "image/*";
    this.addPoseDemoInput.style.display = "none";
    this.addPoseDemoInput.addEventListener("change", this.addPoseDemo.bind(this));
    document.body.appendChild(this.addPoseDemoInput);
    }

  setCanvasWidth(width){
    this.canvas.setWidth(width);
    //this.painterCanvas.setWidth(width);
  }
  setCanvasHeight(height){
    this.canvas.setHeight(height);
    //this.painterCanvas.setHeight(height);
  }

	// 处理背景图片的加载
  addPoseDemo(e) {
    const file = this.addPoseDemoInput.files[0];
    if(file){
      this.getImageOpse(file)
    }
  }

    // 设置背景图片
  setBackgroundImage(url) {
        fabric.Image.fromURL(url, (img) => {
            img.set({
                originX: 'left',
                originY: 'top',
                opacity: 0.5
            });
            
        this.setCanvasWidth(img.width)
        this.setCanvasHeight(img.height)
        this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
        });
    }
  
  //左右翻转
  fliplf() {
    let aobj=this.canvas.getActiveObject()
    if(!aobj){
      alert("请选择一只需要翻转的手")
      return 
    }
    if(aobj&&aobj['itype']&&aobj['itype']=='hand'){
      this.canvas.getActiveObject().set('flipX', !this.canvas.getActiveObject().flipX);
      this.canvas.renderAll();
    }else{
      alert("只有手能翻转")
    }
  }
  //上下翻转
  fliptd() {
    let aobj=this.canvas.getActiveObject()
    if(!aobj){
      alert("请选择一只需要翻转的手")
      return 
    }
    if(aobj&&aobj['itype']&&aobj['itype']=='hand'){
      this.canvas.getActiveObject().set('flipX', !this.canvas.getActiveObject().flipX);
      this.canvas.renderAll();
    }else{
      alert("只有手能翻转")
    }
  }
  addRect(){ //添加矩形遮罩
    this.changeIndexPose()
    this.groups.push({
      left: 100, // 初始水平位置
      top: 100, // 初始垂直位置
      width: 100,          // 正方形的宽度
      height: 100,         // 正方形的高度
      fill: 'rgba(255,0,0,0.5)' // 填充颜色，这里设置为红色半透明
    });
    this.subsets.push({});
    this.hands.push([]);
    this.node.widgets[this.index].value = this.groups.length-1;
    this.node.widgets[this.index].options['max']=this.groups.length-1;
    for(let i=0;i<this.groups.length;i++){
      if(!Array.isArray(this.groups[i])){
        let indexColor=getDrawColor(i/this.groups.length,"7F") //hexToRgba(,0.5);
        this.groups[i]['fill']=indexColor
      }
    }
    this.setIndexPose(this.node.widgets[this.index].value,false);
  }
  // 异步加载图片
  async addHand(obj,isEdit=true,group=undefined){
    // 引入fabric.js库
    let thi=this
    let x=obj['l'],y=obj['t'];
    let img = await asyncLoadImg(`/lam/getImage?type=hands&&name=${obj.name}`)
    let left=x?x-img.width*0.1/2:0,top=y?y-img.height*0.1/2:0;
    let nobj=Object.assign({
      left: left, // 图片的初始水平位置
      top: top, // 图片的初始垂直位置
      angle: 0, // 图片的初始旋转角度
      opacity: 0.95, // 图片透明度
      // 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半
      scaleX: 0.1, 
      scaleY: 0.1,
      flipX:false,
      flipY:false,
      selectable: isEdit,
      evented: isEdit,
    }, obj);
    img.set(nobj);
    img['itype']='hand'
    if(group){
      group.addWithUpdate(img);
    }else{
      thi.canvas.add(img); // 将图片添加到画布上
    }
    if(x && y){
      thi.canvas.setActiveObject(img); //选中
      thi.hands[thi.history_index].push({
        left: left, // 图片的初始水平位置
        top: top, // 图片的初始垂直位置
        angle: 0, // 图片的初始旋转角度
        name:obj.name,
        scaleX: 0.1, 
        scaleY: 0.1,
        flipX:false,
        flipY:false,
        x:x,
        y:y
      })
      thi.canvas.requestRenderAll();
    }
    return img
  }

  
  delIndexPose(){
    let delIndex=this.history_index
    this.groups.splice(delIndex,1)
    this.subsets.splice(delIndex,1)
    this.hands.splice(delIndex,1)
    this.node.widgets[this.index].value =0;
    this.node.widgets[this.index].options['max']=this.groups.length-1;
    this.node.setDirtyCanvas(true);
    this.setIndexPose(0,false)
  }
  setIndexPose(v,isChangIndex=true){
    this.lockMode=true
    if(isChangIndex){
      this.changeIndexPose()
    }
    this.history_index=v
    let groups=this.groups
    let hands=this.hands
    let vgroups=[]
    for (let i = 0; i < groups.length; i++) {
      if(i==v){
        continue;
      }
      vgroups.push(groups[i])
    }
    this.setPose([],vgroups,false)
    for (let i = 0; i < hands.length; i++) {
      if(i==v){
        continue;
      }
      for(let j = 0; j < hands[i].length; j++){
        this.addHand(hands[i][j],false)
      }
    }
    this.addPose(groups[v],true,hands[v])
    this.lockMode=false
  }

   changeIndexPose(index=undefined){
    if(index===undefined){
      index=this.history_index
    }
    this.canvas.discardActiveObject();
    let json=this.getJSON();
    let keypoints=json["keypoints"]
    if(Array.isArray(keypoints)){
      if(keypoints.length>1){
        let group=[]
        let subset=this.subsets[index]
        for(let i = 0; i < subset.length; i ++){
          if(subset[i]<0){
            group.push([-1,-1])
          }else{
            group.push(keypoints[subset[i]])
          }
        }
        this.groups[index]=group
      }
    }else{
      this.groups[index]=keypoints
    }

    if(json['hands'].length>0){
      this.hands[index]=json['hands']
    }else{
      this.hands[index]=[]
    }
  }

  setPose(keypoints,groups=[],isEdit=true) {
    this.canvas.clear();

    this.canvas.backgroundColor = "#000";

    let res = [];
    if(groups.length>0){
      res=groups;
    }
    for (let i = 0; i < keypoints.length; i += 18) {
      const chunk = keypoints.slice(i, i + 18);
      res.push(chunk);
    }

    for (let item of res) {
      this.addPose(item,isEdit);
      this.canvas.discardActiveObject();
    }
  }

  async addPose(keypoints = undefined,isEdit=true,hands=[]) {
    if (keypoints === undefined) {
      keypoints = default_keypoints;
      this.changeIndexPose()
      this.setPose([],this.groups,false)
      this.groups.push(keypoints);
      this.subsets.push(default_subset);
      this.hands.push(hands);
      this.node.widgets[this.index].value = this.groups.length-1;
      this.node.widgets[this.index].options['max']=this.groups.length-1;
      this.history_index=this.node.widgets[this.index].value
    }

    if(!Array.isArray(keypoints)){
      let nobj=Object.assign({
        left: 100, // 初始水平位置
        top: 100, // 初始垂直位置
        width: 100,          // 正方形的宽度
        height: 100,         // 正方形的高度
        lockRotation: true,   // 设置不可旋转
        selectable: isEdit,
        evented: isEdit,
      }, keypoints);
      const square = new fabric.Rect(nobj);
      this.canvas.add(square);
      if(isEdit){
        this.canvas.setActiveObject(square);
      }
      // 渲染画布
      this.canvas.renderAll();
    }else{
      const group = new fabric.Group();
      const makeCircle = (
        color,
        left,
        top,
        line1,
        line2,
        line3,
        line4,
        line5
      ) => {
        let c = new fabric.Circle({
          left: left,
          top: top,
          strokeWidth: 1,
          radius: 5,
          fill: color,
          stroke: color,
        });
  
        c.hasControls = c.hasBorders = false;
        c.line1 = line1;
        c.line2 = line2;
        c.line3 = line3;
        c.line4 = line4;
        c.line5 = line5;
  
        return c;
      };
  
      const makeLine = (coords, color) => { 
        return new fabric.Line(coords, {
          fill: color,
          stroke: color,
          strokeWidth: 10,
          selectable: false,
          evented: false,
        });
      };
  
      const lines = {};
      const circles = [];
      for (let i = 0; i < connect_keypoints.length; i++) {
        // 连线
        const item = connect_keypoints[i];
        if(keypoints[item[0]][0]<0||keypoints[item[0]][1]<0||keypoints[item[1]][0]<0||keypoints[item[1]][1]<0){
            continue;
        }
        const line = makeLine(
          keypoints[item[0]].concat(keypoints[item[1]]),
          `rgba(${connect_color[i].join(", ")}, 0.7)`
        );
        lines[i]=line;
        this.canvas.add(line);
      }
  
      for (let i = 0; i < keypoints.length; i++) {
        if(keypoints[i][0]<0||keypoints[i][1]<0){
            continue;
        }
        let list = [];
  
        connect_keypoints.filter((item, idx) => {
          if (item.includes(i)) {
            list.push(lines[idx]);
            return idx;
          }
        });
        const circle = makeCircle(
          `rgb(${connect_color[i].join(", ")})`,
          keypoints[i][0],
          keypoints[i][1],
          ...list
        );
        circle["id"] = i;
        circles.push(circle);
        group.addWithUpdate(circle);
      }
      for(let i = 0; i < hands.length; i++){
        await this.addHand(hands[i],true,group)
      }
      this.canvas.discardActiveObject();
      //不可编辑
      if(isEdit){
          this.canvas.setActiveObject(group);
          this.canvas.add(group);  
          group.toActiveSelection(); 
      }
      this.canvas.requestRenderAll();
    }
    
  }

  initCanvas() {
    this.canvas = new fabric.Canvas(this.canvas, {
      backgroundColor: "#000",
      preserveObjectStacking: true,
    });

    const updateLines = (target) => {
      if ("_objects" in target) {
        const flipX = target.flipX ? -1 : 1;
        const flipY = target.flipY ? -1 : 1;
        this.flipped = flipX * flipY === -1;
        const showEyes = this.flipped ? !this.visibleEyes : this.visibleEyes;

        if (target.angle === 0) {
          const rtop = target.top;
          const rleft = target.left;
          for (const item of target._objects) {
            let p = item;
            if((p['itype']&&p['itype']=='hand')||p.type=="rect"){
              continue
            }
            p.scaleX = 1;
            p.scaleY = 1;
            const top =
              rtop +
              p.top * target.scaleY * flipY +
              (target.height * target.scaleY) / 2;
            const left =
              rleft +
              p.left * target.scaleX * flipX +
              (target.width * target.scaleX) / 2;
            p["_top"] = top;
            p["_left"] = left;
            if (p["id"] === 0) {
              p.line1 && p.line1.set({ x1: left, y1: top });
            } else {
              p.line1 && p.line1.set({ x2: left, y2: top });
            }
            if (p["id"] === 14 || p["id"] === 15) {
              p.radius = showEyes ? 5 : 0;
              if (p.line1) p.line1.strokeWidth = showEyes ? 10 : 0;
              if (p.line2) p.line2.strokeWidth = showEyes ? 10 : 0;
            }
            p.line2 && p.line2.set({ x1: left, y1: top });
            p.line3 && p.line3.set({ x1: left, y1: top });
            p.line4 && p.line4.set({ x1: left, y1: top });
            p.line5 && p.line5.set({ x1: left, y1: top });
          }
        } else {
          const aCoords = target.aCoords;
          const center = {
            x: (aCoords.tl.x + aCoords.br.x) / 2,
            y: (aCoords.tl.y + aCoords.br.y) / 2,
          };
          const rad = (target.angle * Math.PI) / 180;
          const sin = Math.sin(rad);
          const cos = Math.cos(rad);

          for (const item of target._objects) {
            let p = item;
            const p_top = p.top * target.scaleY * flipY;
            const p_left = p.left * target.scaleX * flipX;
            const left = center.x + p_left * cos - p_top * sin;
            const top = center.y + p_left * sin + p_top * cos;
            p["_top"] = top;
            p["_left"] = left;
            if (p["id"] === 0) {
              p.line1 && p.line1.set({ x1: left, y1: top });
            } else {
              p.line1 && p.line1.set({ x2: left, y2: top });
            }
            if (p["id"] === 14 || p["id"] === 15) {
              p.radius = showEyes ? 5 : 0.3;
              if (p.line1) p.line1.strokeWidth = showEyes ? 10 : 0;
              if (p.line2) p.line2.strokeWidth = showEyes ? 10 : 0;
            }
            p.line2 && p.line2.set({ x1: left, y1: top });
            p.line3 && p.line3.set({ x1: left, y1: top });
            p.line4 && p.line4.set({ x1: left, y1: top });
            p.line5 && p.line5.set({ x1: left, y1: top });
          }
        }
      } else {
        var p = target;
        if (p["id"] === 0) {
          p.line1 && p.line1.set({ x1: p.left, y1: p.top });
        } else {
          p.line1 && p.line1.set({ x2: p.left, y2: p.top });
        }
        p.line2 && p.line2.set({ x1: p.left, y1: p.top });
        p.line3 && p.line3.set({ x1: p.left, y1: p.top });
        p.line4 && p.line4.set({ x1: p.left, y1: p.top });
        p.line5 && p.line5.set({ x1: p.left, y1: p.top });
      }
      this.canvas.renderAll();
    };

    this.canvas.on("object:moving", (e) => {
      updateLines(e.target);
    });

    this.canvas.on("object:scaling", (e) => {
      updateLines(e.target);
      this.canvas.renderAll();
    });

    this.canvas.on("object:rotating", (e) => {
      updateLines(e.target);
      this.canvas.renderAll();
    });

    this.canvas.on("object:modified", () => {
      console.log('object:modified取消的事件')
      if (
        this.lockMode ||
        (this.canvas.getActiveObject()&&this.canvas.getActiveObject().type == "activeSelection")
      )
        return;
      
      this.changeIndexPose()
      this.undo_history.push({'groups':JSON.parse(JSON.stringify(this.groups)),
            'hands':JSON.parse(JSON.stringify(this.hands)),'index':this.history_index});
      this.redo_history.length = 0;
      this.history_change = true;
    });

    this.canvas.on("selection:cleared", (e) => {
      if (this.lockMode)
          return;
      
      if(e?.deselected?.length>1||(e?.deselected?.length==1&&e?.deselected[0].itype=="hand")){
        let json=this.getJSON();
        if (!Array.isArray(json["keypoints"])||(json["keypoints"].length>0&&json["keypoints"].length >1)) {
            this.changeIndexPose()
            this.undo_history.push({'groups':JSON.parse(JSON.stringify(this.groups)),
            'hands':JSON.parse(JSON.stringify(this.hands)),'index':this.history_index});
            this.redo_history.length = 0;
            this.history_change = true;
        }
        
      }
      console.log('selection:cleared取消的事件')
    });

    if (!LS_Poses[this.node.name].undo_history.length) {
      this.groups=[]
      this.hands=[]
      this.addPose();
      this.undo_history.push({'groups':JSON.parse(JSON.stringify(this.groups)),
      'hands':JSON.parse(JSON.stringify(this.hands)),
      'index':this.history_index});
    }
    return this.canvas;
  }

  undo() {
    if (this.undo_history.length > 0) {
      this.lockMode = true;
      if (this.undo_history.length > 1)
        this.redo_history.push(this.undo_history.pop());

      const content = this.undo_history[this.undo_history.length - 1];
      this.loadPreset(JSON.parse(JSON.stringify(content)));
      this.canvas.renderAll();
      this.lockMode = false;
      this.history_change = true;
    }
  }

  redo() {
    if (this.redo_history.length > 0) {
      this.lockMode = true;
      const content = this.redo_history.pop();
      this.undo_history.push(JSON.parse(JSON.stringify(content)));
      this.loadPreset(content);
      this.canvas.renderAll();
      this.lockMode = false;
      this.history_change = true;
    }
  }

  resetCanvas() {
    this.canvas.clear();
    this.canvas.backgroundColor = "#000";
    this.groups=[]
    this.addPose();
    this.undo_history.push({'groups':JSON.parse(JSON.stringify(this.groups)),
    'hands':JSON.parse(JSON.stringify(this.hands)),
    'index':this.history_index});
  }

  updateHistoryData() {
    if (this.history_change) {
      LS_Poses[this.node.name].undo_history = this.undo_history;
      LS_Poses[this.node.name].redo_history = this.redo_history;
      LS_Save();
      this.history_change = false;
    }
  }

  getHands(){ //获取手势
    let thi=this;
    const addHandsBtn = async () => {
      try {
        const resp = await api.fetchApi(`/lam/getHeads`);
        if (resp.status === 200) {
          const data = await resp.json();
          console.log(data)
          let rightButtons = document.createElement("div");
          rightButtons.className = "panelRightButtons comfy-menu-btns";
          for(let i=0;i<data.length;i++){
            var img = document.createElement('img');
            img.src = `/lam/getImage?type=hands&&name=${data[i]}`;
            img.alt = data[i];
            img.style.width = "40px";
            img.style.height = "40px";
            img.addEventListener("dragend", (e) =>  {
              let name=e.target.alt;
              let x=e.x;
              let y=e.y;
              let width=thi.canvas.width;
              let height=thi.canvas.height;
              let oWidth=thi.canvas.upperCanvasEl.parentElement.offsetWidth
              let oHeight=thi.canvas.upperCanvasEl.parentElement.offsetHeight
              let left=thi.canvas.upperCanvasEl.parentElement.offsetLeft
              let top=thi.canvas.upperCanvasEl.parentElement.offsetTop
              x=(x-left)/oWidth*width
              y=(y-top)/oHeight*height
              thi.addHand({name:name,l:x,t:y})
            });
            rightButtons.appendChild(img);
          }
          thi.canvas.wrapperEl.appendChild(rightButtons);
        } else {
          alert(resp.status + " - " + resp.statusText);
        }
      } catch (error) {
        console.error(error);
      }
    };
    addHandsBtn();
  }

  getImageOpse(image){ //上传图片识别骨骼姿态
    let thi=this;
    // 创建一个自定义的Loading控件
    var loading = (function() {
      if(!thi.canvas.wrapperEl.loadingDiv){
        var loadingDiv = document.createElement('div');
        loadingDiv.style.position = 'absolute';
        loadingDiv.style.left = '0';
        loadingDiv.style.top = '0';
        loadingDiv.style.right = '0';
        loadingDiv.style.bottom = '0';
        loadingDiv.style.background = 'rgba(255, 255, 255, 0.5)';
        loadingDiv.style.display = 'flex';
        loadingDiv.style.justifyContent = 'center';
        loadingDiv.style.alignItems = 'center';
        loadingDiv.style.zIndex = '100';
        loadingDiv.style.textAlign = 'center';
        loadingDiv.style.paddingTop = thi.canvas.height/2+'px';
        var loadingText = document.createElement('p');
        loadingText.textContent = '图片识别中...';
        loadingDiv.appendChild(loadingText);
      
        thi.canvas.wrapperEl.appendChild(loadingDiv);
        thi.canvas.wrapperEl.loadingDiv = loadingDiv;
      }
      return {
        show: function() {
          thi.canvas.wrapperEl.loadingDiv.style.display = 'block';
        },
        hide: function() {
          thi.canvas.wrapperEl.loadingDiv.style.display = 'none';
        }
      };
    })();
    // 在执行某些异步操作前显示Loading
    loading.show();
    
    const uploadFile = async (blobFile) => {
      try {
        const resp = await fetch("/lam/getImagePose", {
          method: "POST",
          body: blobFile,
        });
        if (resp.status === 200) {
          const data = await resp.json();
          console.log(data)
          if(data.groups.length<=0){
            alert('未识别到姿态骨骼');
            // 操作完成后隐藏Loading
            loading.hide();
            return ;
          }
          for(let i = 0; i < data.groups.length; i++){
            this.groups.push(data.groups[i]);
            this.subsets.push(data.subsets[i]);
            this.hands.push([]);
          }

          this.node.widgets[this.index].value = this.groups.length-1;
          this.node.widgets[this.index].options['max']=this.groups.length-1;
          this.node.setDirtyCanvas(true);
          this.setIndexPose(this.groups.length-1,false)
          this.updateHistoryData();
          // 操作完成后隐藏Loading
          loading.hide();
        } else {
          alert(resp.status + " - " + resp.statusText);
          loading.hide();
        }
      } catch (error) {
        console.error(error);
        loading.hide();
      }
    };
    let formData = new FormData();
    formData.append("image", image, image.name);
    uploadFile(formData);
  }

  

  getJSON() {
    const json = {
      keypoints: this.canvas
        .getObjects()
        .filter((item) => {
          if (item.type === "circle" || (item.type === "rect" && item.selectable)) return item;
        })
        .map((item) => {
          if(item.type === "rect"){
            return {left:item.left,top:item.top,
              width:item['scaleX']?item.width*item['scaleX']:item.width,
              height:item['scaleY']?item.height*item['scaleY']:item.height,
              fill:item.fill};
          }
          return [Math.round(item.left), Math.round(item.top)];
        }),
      hands:this.canvas
      .getObjects()
      .filter((item) => {
        if (item.type === "image" && item.itype === "hand" && item.selectable ) return item;
      })
      .map((item) => {
        let obj=item.getCenterPoint();
        return Object.assign(obj,{left:item.left,top:item.top,
            scaleX:item.scaleX,scaleY:item.scaleY,
            flipX:item.flipX,flipY:item.flipY,
            name:item.name,angle:item.angle
        });
      }),

    };
    if(json.keypoints.length==1&&!Array.isArray(json.keypoints[0])){
      json.keypoints=json.keypoints[0];
    }
    console.log(json)
    return json;
  }

  loadPreset(obj) {
    this.groups=obj['groups']
    let index=obj['index']
    this.node.widgets[this.index].value=index;
    this.node.widgets[this.index].options['max']=this.groups.length;
    this.node.setDirtyCanvas(true);
    this.setIndexPose(index,false)
  }
}

// Create OpenPose widget
function createOpenPose(node, inputName, inputData, app) {
  node.name = inputName;
  const widget = {
    type: "openpose",
    name: `w${inputName}`,
    value:'',

    draw: function (ctx, _, widgetWidth, y, widgetHeight) {
      const margin = 10,
        visible = app.canvas.ds.scale > 0.5 && this.type === "openpose",
        clientRectBound = ctx.canvas.getBoundingClientRect(),
        transform = new DOMMatrix()
          .scaleSelf(
            clientRectBound.width / ctx.canvas.width,
            clientRectBound.height / ctx.canvas.height
          )
          .multiplySelf(ctx.getTransform())
          .translateSelf(margin, margin + y),
        w = (widgetWidth - margin * 2 - 3) * transform.a;
      
      let h=w/this.openpose.children[0].width*this.openpose.children[0].height

      Object.assign(this.openpose.style, {
        left: `${transform.a * margin + transform.e}px`,
        top: `${transform.d + transform.f}px`,
        width: w + "px",
        height: h + "px",
        position: "absolute",
        zIndex: app.graph._nodes.indexOf(node),
      });

      Object.assign(this.openpose.children[0].style, {
        width: w + "px",
        height: h + "px",
      });

      Object.assign(this.openpose.children[1].style, {
        width: w + "px",
        height: h + "px",
      });

      Array.from(this.openpose.children[2].children).forEach((element) => {
        Object.assign(element.style, {
          width: `${28.0 * transform.a}px`,
          height: `${22.0 * transform.d}px`,
          fontSize: `${transform.d * 10.0}px`,
        });
        element.hidden = !visible;
      });
    },
  };

  // Fabric canvas
  let canvasOpenPose = document.createElement("canvas");
  let canvasPainter = document.createElement("canvas");
  node.openPose = new OpenPose(node, canvasOpenPose,canvasPainter);
  node.openPose.setCanvasWidth(512)
  node.openPose.setCanvasHeight(512)
  
  let index = node.widgets[node.widgets.findIndex(obj => obj.name === 'index')];
  let width = node.widgets[node.widgets.findIndex(obj => obj.name === 'width')];
  let height = node.widgets[node.widgets.findIndex(obj => obj.name === 'height')];
  index.callback = function (v) {
    node.openPose.setIndexPose(v)
  }
  width.callback = function (v) {
    node.openPose.setCanvasWidth(v)
    node.painter.setCanvasSize(v,node.painter.canvas.height)
  }
  height.callback = function (v) {
    node.openPose.setCanvasHeight(v)
    node.painter.setCanvasSize(node.painter.canvas.width,v)
  }

  widget.openpose = node.openPose.canvas.wrapperEl;
  widget.parent = node;
  Object.defineProperty(widget, "value", {
    set: (x) => {
        node.openPose.setCanvasWidth(width.value)
        node.openPose.setCanvasHeight(height.value)
        node.painter.setCanvasSize(width.value,height.value)
        let data=JSON.parse(x)
        node.openPose.groups=data.groups;
        node.openPose.hands=data.hands;
        node.openPose.subsets=data.subsets;
        index.value =0;
        index.options['max']=this.openPose.groups.length-1;
        node.openPose.setIndexPose(0,false)
    },
    get: () => {
      return JSON.stringify({
        groups: this.openPose.groups,
        subsets: this.openPose.subsets,
        hands: this.openPose.hands,
      });
    }
  });

  // Create elements undo, redo, clear history
  let panelButtons = document.createElement("div"),
    addButton = document.createElement("button"),
    delButton = document.createElement("button"),
    resButton = document.createElement("button"),
    refButton = document.createElement("button"),
    undoButton = document.createElement("button"),
    redoButton = document.createElement("button"),
    fliplfButton = document.createElement("button"),
    fliptdButton = document.createElement("button"),
    rectButton = document.createElement("button"),
    historyClearButton = document.createElement("button");

  panelButtons.className = "panelButtons comfy-menu-btns";
  addButton.textContent = "+";
  delButton.textContent = "-";
  resButton.textContent = "⟲";
  refButton.textContent = "img";
  undoButton.textContent = "<-";
  redoButton.textContent = "->";
  fliplfButton.textContent = "↔";
  fliptdButton.textContent = "↕";
  rectButton.textContent = "□";
  historyClearButton.textContent = "✖";
  addButton.title = "添加骨骼";
  delButton.title = "删除骨骼";
  resButton.title = "重置";
  refButton.title = "添加人物示例";
  undoButton.title = "上一步";
  redoButton.title = "下一步";
  fliplfButton.title = "左右翻转";
  fliptdButton.title = "上下翻转";
  rectButton.title="矩形遮罩";
  historyClearButton.title = "清除历史";

  addButton.addEventListener("click", () => node.openPose.addPose());
  delButton.addEventListener("click", () => node.openPose.delIndexPose());
  resButton.addEventListener("click", () => node.openPose.resetCanvas());
  refButton.addEventListener("click", () => node.openPose.addPoseDemoInput.click());
  undoButton.addEventListener("click", () => node.openPose.undo());
  redoButton.addEventListener("click", () => node.openPose.redo());
  fliplfButton.addEventListener("click", () => node.openPose.fliplf());
  fliptdButton.addEventListener("click", () => node.openPose.fliptd());
  rectButton.addEventListener("click", () => node.openPose.addRect());
  historyClearButton.addEventListener("click", () => {
    if (confirm(`删除节点"${node.name}"的所有姿势历史记录 ?`)) {
      node.openPose.undo_history = [];
      node.openPose.redo_history = [];
      if(node.openPose.groups.length>0){
        node.openPose.undo_history.push({'groups':JSON.parse(JSON.stringify(node.openPose.groups)),
        'hands':JSON.parse(JSON.stringify(node.openPose.hands)),
        'index':node.openPose.history_index});
      }
      node.openPose.groups=[]
      node.openPose.addPose();
      node.openPose.history_change = true;
      node.openPose.updateHistoryData();
    }
  });
  panelButtons.appendChild(addButton);
  panelButtons.appendChild(delButton);
  panelButtons.appendChild(resButton);
  panelButtons.appendChild(refButton);
  panelButtons.appendChild(undoButton);
  panelButtons.appendChild(redoButton);
  panelButtons.appendChild(fliplfButton);
  panelButtons.appendChild(fliptdButton);
  panelButtons.appendChild(rectButton);
  panelButtons.appendChild(historyClearButton);
  node.openPose.canvas.wrapperEl.appendChild(panelButtons);

  document.body.appendChild(widget.openpose);
  document.addEventListener('keydown', function(event) {
      if(node.openPose.disabled){
        return;
      }
      if(event.key=='Delete'||event.key=='Backspace'){
        let activeObject=node.openPose.canvas.getActiveObject()
        if (activeObject) {
          node.openPose.canvas.remove(activeObject);
        }
        node.openPose.setIndexPose(node.openPose.history_index,true)
      }
      if(event.key=='ArrowLeft'){
        node.widgets[node.openPose.index].value=node.widgets[node.openPose.index].value!=0?node.widgets[node.openPose.index].value-1:node.widgets[node.openPose.index].options['max']
        node.openPose.setIndexPose(node.widgets[node.openPose.index].value)
      }
      if(event.key=='ArrowRight'){
        node.widgets[node.openPose.index].value=node.widgets[node.openPose.index].value!=node.widgets[node.openPose.index].options['max']?node.widgets[node.openPose.index].value+1:0
        node.openPose.setIndexPose(node.widgets[node.openPose.index].value)
      }
      
  });
  
  node.openPose.getHands()
  node.addWidget("button", "显/隐画板", "ShowPainter", () => {
    node.painter.disabled=!node.painter.disabled
    node.openPose.disabled=!node.openPose.disabled
    
    if(node.openPose.disabled){
      panelButtons.style.display="none"
      node.openPose.canvas.wrapperEl.querySelectorAll('.panelRightButtons')[0].style.display="none"
    }else{
      panelButtons.style.display="flex"
      node.openPose.canvas.wrapperEl.querySelectorAll('.panelRightButtons')[0].style.display="flex"
    }
  });
  
  // Add customWidget to node
  node.addCustomWidget(widget);

  node.onRemoved = () => {
    if (Object.hasOwn(LS_Poses, node.name)) {
      delete LS_Poses[node.name];
      LS_Save();
    }

    // When removing this node we need to remove the input from the DOM
    for (let y in node.widgets) {
      if (node.widgets[y].openpose) {
        node.widgets[y].openpose.remove();
      }
      if (node.widgets[y].painter_wrap) {
        node.widgets[y].painter_wrap.remove();
      }
    }
  };

  widget.onRemove = () => {
    widget.openpose?.remove();
    widget.painter_wrap?.remove();
  };

  app.canvas.onDrawBackground = function () {
    // Draw node isnt fired once the node is off the screen
    // if it goes off screen quickly, the input may not be removed
    // this shifts it off screen so it can be moved back if the node is visible.
    for (let n in app.graph._nodes) {
      n = graph._nodes[n];
      for (let w in n.widgets) {
        let wid = n.widgets[w];
        if (Object.hasOwn(wid, "openpose")) {
          wid.openpose.style.left = -8000 + "px";
          wid.openpose.style.position = "absolute";
        }
      }
    }
  };
  return { widget: widget };
}

window.LS_Poses = {};
function LS_Save() {
  ///console.log("Save:", LS_Poses);
  localStorage.setItem("ComfyUI_Poses", JSON.stringify(LS_Poses));
}

app.registerExtension({
  name: "LAM.OpenPoseEditorPlus",
  async init(app) {
    // Any initial setup to run as soon as the page loads
    let style = document.createElement("style");
    style.innerText = `
    .panelButtons{
      position: absolute;
      padding: 4px;
      display: flex;
      gap: 4px;
      flex-direction: column;
      width: fit-content;
    }
    .panelButtons button:last-child{
      border-color: var(--error-text);
      color: var(--error-text) !important;
    }
    .panelRightButtons{
      right: 0px;
      overflow: auto;
      height: 95%;
      position: absolute;
      padding: 4px;
      display: flex;
      gap: 4px;
      flex-direction: column;
      width: fit-content;
    }
    .panelRightButtons button:last-child{
      border-color: var(--error-text);
      color: var(--error-text) !important;
    }
    .panelPaintBox {
      position: absolute;
      width: 100%;
    }
    .comfy-menu-btns button.active {
      color: var(--error-text) !important;
      font-weight: bold;
      border: 1px solid;
    }
    .painter_manipulation_box {
      position: absolute;
      left: 50%;
      top: -40px;
      transform: translateX(-50%);
    }
    .painter_manipulation_box > div {
      display: grid;
      gap: 2px;
      grid-template-columns: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;
      justify-content: center;
      margin-bottom: 2px;
    }
    .painter_manipulation_box > div button {
      font-size: 0.5rem;
    }
    .painter_manipulation_box > div button[id^=zpos]:active {
      background-color: #484848;
    }
    .painter_drawning_box {
      position: absolute;
      top: -40px;
      width: 88px;
    }
    .painter_drawning_box button {
      width: 24px;
    }
    .painter_drawning_box_property {
      position: absolute;
      top: -36px;
    }
    .painter_drawning_box_property select {
      color: var(--input-text);
      background-color: var(--comfy-input-bg);
      border-radius: 4px;
      border-color: var(--border-color);
      border-style: solid;
    }
    .separator {
      width: 1px;
      height: 25px;
      background-color: var(--border-color);
      display: inline-block;
      vertical-align: middle;
      margin: 0 4px 0 4px;
  }
    .painter_drawning_box > div {
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: center;
    }
    .painter_drawning_box input[type="number"] {
      width: 2.6rem;
      color: var(--input-text);
      background-color: var(--comfy-input-bg);
      border-radius: 8px;
      border-color: var(--border-color);
      border-style: solid;
      font-size: inherit;
    }
    .painter_colors_box input[type="color"], .painter_bg_setting input[type="color"] {
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      margin-bottom: 5px;
      color: var(--input-text);
      background-color: var(--comfy-input-bg);
      border-radius: 8px;
      border-color: var(--border-color);
      border-style: solid;
      font-size: inherit;
    }

    .painter_bg_setting button{
      width: 40px;
      height: 20px;
    }
    .painter_bg_setting #bgColor:after {
      content: attr(data-label);
      position: absolute;
      color: var(--input-text);
      left: 70%;
      font-size: 0.5rem;
      margin-top: -18%;
    }
    .painter_colors_box input[type="color"]::-webkit-color-swatch-wrapper, .painter_bg_setting input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 1px !important;
    }
    .painter_grid_style {
      display: grid;
      gap: 3px;
      font-size: 0.55rem;
      text-align: center;
      align-items: start;
      justify-items: center;
    }
    .painter_shapes_box {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .painter_colors_alpha {
      grid-template-columns: 0.7fr 0.7fr;
    }
    .fieldset_box {
      padding: 2px;
      margin: 15px 0 2px 0;
      position: relative;
      text-align: center;
    }
    .fieldset_box:before {
      content: attr(f_name) ":";
      font-size: 0.6rem;
      position: absolute;
      top: -10px;
      color: yellow;
      left: 0;
      right: 0;
    }
    .list_objects_panel {
      width: 90%;
      font-size: 0.7rem;
    }
    .list_objects_panel__items {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-y: auto;
      max-height: 350px;
    }
    .list_objects_panel__items button {
      width: 80% !important;
    }
    .list_objects_panel__items::-webkit-scrollbar {
      width: 8px;
    }
    .list_objects_panel__items::-webkit-scrollbar-track {
      background-color: var(--descrip-text);
    }
    .list_objects_panel__items::-webkit-scrollbar-thumb {
      background-color: var(--fg-color);
    }
    .list_objects_align {
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: space-between;
      height: 430px;
   }
   .list_objects_align > div{
    flex: 1;
   }
   .painter_history_panel {
    position: absolute;
    padding: 4px;
    display: flex;
    gap: 4px;
    right: 0;
    opacity: 0.8;
    flex-direction: row;
    width: fit-content;
  }
  .painter_history_panel > button {
    background: transparent;
  }
  .painter_history_panel > button:hover:enabled {
    opacity: 1;
    border-color: var(--error-text);
    color: var(--error-text) !important;
  }
  .painter_history_panel > button:disabled {
    opacity: .5;
  }
  .painter_stroke_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .painter_stroke_box > label span {
    margin-right: 9px;
    vertical-align: middle;
    font-size: 10px;
    color: var(--input-text);
  }
  .property_brushesBox, .property_brushesSecondBox {
    display: flex;
    gap: 5px;
  }
  .property_brushesSecondBox > button {
    min-width: 30px;
    font-size: 0.5rem;
  }
  .property_brushesSecondBox svg {
    width: 100%;
    height: 100%;
  }
  .active svg > .cls-2 {
    fill: var(--error-text);
  }
  .active svg > * {
    stroke: var(--error-text);
  }
    
    `;
    document.head.appendChild(style);
  },
  async setup(app) {
    let openPoseNode = app.graph._nodes.filter((wi) => wi.type == "LAM.OpenPoseEditorPlus");

    if (openPoseNode.length) {
      openPoseNode.map((n) => {
        console.log(`Setup PoseNode: ${n.name}`);
        let widgetImage = n.widgets.find((w) => w.name == "image");
        if (widgetImage && Object.hasOwn(LS_Poses, n.name)) {
          let pose_ls = LS_Poses[n.name].undo_history;
          if(pose_ls.length>0){
            n.openPose.loadPreset(pose_ls[pose_ls.length - 1]);
          }else{
            n.openPose.groups=[]
            n.openPose.addPose();
            n.openPose.undo_history.push({'groups':JSON.parse(JSON.stringify(n.openPose.groups)),
            'hands':JSON.parse(JSON.stringify(n.openPose.hands)),
            'index':n.openPose.history_index});
          }
        }
      });
    }
  },
  async beforeRegisterNodeDef(nodeType, nodeData, app) {
    if (nodeData.name === "LAM.OpenPoseEditorPlus") {
      if (painters_settings_json) {
        const message = createMessage(
          "Loading",
          "Please wait, <span style='font-weight: bold; color: orange'>Painter node</span> settings are loading. Loading times may take a long time if large images have been added to the canvas!"
        );
        LS_Painters = await loadData();
        document.body.removeChild(message);
      } else {
        LS_Painters =
          localStorage.getItem("ComfyUI_Painter") &&
          JSON.parse(localStorage.getItem("ComfyUI_Painter"));

        if (!LS_Painters || LS_Painters === undefined) {
          localStorage.setItem("ComfyUI_Painter", JSON.stringify({}));
          LS_Painters = JSON.parse(localStorage.getItem("ComfyUI_Painter"));
        }
      }
      const onNodeCreated = nodeType.prototype.onNodeCreated;
      nodeType.prototype.onNodeCreated = function () {
        const r = onNodeCreated
          ? onNodeCreated.apply(this, arguments)
          : undefined;
        let openPoseNode = app.graph._nodes.filter((wi) => wi.type == "LAM.OpenPoseEditorPlus");
        let nodeName = `Pose_${openPoseNode.length}`;
        let nodeNamePNG = `${nodeName}`;

        console.log(`Create PoseNode: ${nodeName}`);
        LS_Poses =
          localStorage.getItem("ComfyUI_Poses") &&
          JSON.parse(localStorage.getItem("ComfyUI_Poses"));
        if (!LS_Poses) {
          localStorage.setItem("ComfyUI_Poses", JSON.stringify({}));
          LS_Poses = JSON.parse(localStorage.getItem("ComfyUI_Poses"));
        }

        if (!Object.hasOwn(LS_Poses, nodeNamePNG)) {
          LS_Poses[nodeNamePNG] = {
            undo_history: [],
            redo_history: [],
          };
          LS_Save();
        }
        if (LS_Painters && !Object.hasOwn(LS_Painters, nodeNamePNG)) {
          LS_Painters[nodeNamePNG] = {
            undo_history: [],
            redo_history: [],
            canvas_settings: { background: "#000000" },
            settings: {},
          };
          LS_PSave();
        }

        createOpenPose.apply(this, [this, nodeNamePNG, {}, app]);
        PainterWidget.apply(this, [this, nodeNamePNG, {}, app]);
        this.setSize([750, 950]);
        return r;
      };
    }
  },
});