queenshow/src/modules/editor/components/CompUI/basicUI/Polygon/component.tsx

import { defineComponent, onMounted , ref, effect} from "vue";
import { string } from "vue-types";
import { useEditor } from "../../../..";
import { View } from "../View";
import { CompUI } from "../..";
import { values } from "lodash";
import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";

import {editState} from "./toolbar"
import { useCompData } from "../../defines/hook";
import { CompPolygonObj } from ".";

function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
   const n = points.length;
   let minv = 100000;
    let minIndex = -1;
    const positions = []

   for(let i=0; i<n; i++) {
      const p = points[i];
      const x = w *p[0];
      const y = h *p[1];
      positions.push([x, y]);

      const ln = (sx-x)*(sx-x) + (sy-y)*(sy-y);
      if ( ln < minv ) {
        minIndex = i;
        minv = ln;
         if(!(sx < (x -10) || sx > (x + 10) || sy < (y -10) || sy > (y+10) ) ) {
            return {clicked: true, index: i};
         }
      }
   }   

   let preIndex = minIndex -1;
   if (preIndex < 0 ) preIndex = n-1;
   let afterIndex = minIndex + 1;
   if ( afterIndex >= n) afterIndex = 0;

   const currV = {x:sx-positions[minIndex][0], y:sy-positions[minIndex][1]};
   const preV = {x:positions[preIndex][0]-positions[minIndex][0], y:positions[preIndex][1]-positions[minIndex][1]}
   const afterV = {x:positions[afterIndex][0]-positions[minIndex][0], y:positions[afterIndex][1]-positions[minIndex][1]}

  const a1 =  Angle(currV, preV)
  const a2 =  Angle(currV, afterV);

  if (a1 < a2) {
    return {index: preIndex};
  }

  return {index: minIndex};
}

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { helper, controls , store} = useEditor();
    const data = useCompData<CompPolygonObj>(props.compId);
    const canvasRef =  ref<HTMLCanvasElement>();
    onMounted(()=>{
        
        // draw();
        let isDragingIndex = -1;
        canvasRef.value?.addEventListener("dblclick", function(e:MouseEvent){
            
            const x = helper.pxToDesignSize(e.offsetX )
            const y = helper.pxToDesignSize(e.offsetY)
            
            const points = data.value.points as number[][];
            const w = data.layout.size[0];
            const h = data.layout.size[1];
            //判断直线相交求解点到直线的距离
            const ret = findNearestPoint(data.value.points, w , h, x, y);
            //判断是否
            console.log("dbclick=>xxxxx", ret);
            if (ret.clicked) {//点击删除
                points.splice(ret.index, 1);
                if (points.length < 4) {
                    return;
                }
                editState.index = 0;
            } else {
                points.splice(ret.index+1, 0, [x / w, y / h]);
                editState.index = ret.index + 1;
            }
            draw();
        })

        canvasRef.value?.addEventListener("mousedown", function(e:MouseEvent){
                if (store.currCompId != props.compId) return;

                const el = canvasRef.value as HTMLCanvasElement;
                const x = helper.pxToDesignSize(e.offsetX )
                const y = helper.pxToDesignSize(e.offsetY)
                
                console.log(x , y);

                const points = data.value.points as number[][];
                const width = data.layout.size[0];
                const height = data.layout.size[1];

                let n = points.length;
                isDragingIndex = -1;
                let initX = 0;
                let initY = 0;

                while(n--) {
                    const p = points[n];

                    const px = width * p[0];
                    const py = height * p[1];
                    
                    if(!(x < (px -10) || x > (px + 10) || y < (py -10) || y > (py+10) ) ) {
                        isDragingIndex = n;
                        initX = p[0]
                        initY = p[1]
                        break;
                    }

                }
                
                const dragingX = x;
                const dragingY = y;

                if (isDragingIndex != -1) {
                    e.preventDefault();
                    e.stopPropagation();
                    editState.index = isDragingIndex;

                    const move =  function (e:MouseEvent){
                        if ( isDragingIndex == -1) return;
                         
                        const offx = (helper.pxToDesignSize(e.offsetX ) - dragingX) / width;
                        const offy = (helper.pxToDesignSize(e.offsetY ) -  dragingY) / height;

                        points[isDragingIndex][0] = initX + offx;
                        points[isDragingIndex][1] = initY + offy;

                        draw();
                    }

                    el.addEventListener("mousemove", move)

                    el.addEventListener("mouseup", function(e:MouseEvent){
                        el.removeEventListener("mousemove", move);
                    });

                    el.addEventListener("mouseleave", function(e:MouseEvent){
                        el.removeEventListener("mousemove", move);
                    })


                }
        }, )

       
        effect(draw);
    })

    

   
    function draw() {
        const canvas = canvasRef.value as HTMLCanvasElement;
        if (!canvas) return;

        const ctx = canvasRef.value?.getContext("2d") as CanvasRenderingContext2D;

        const width = data.layout.size[0];
        const height = data.layout.size[1];
        canvas.width = Math.ceil(Math.max(1, width));
        canvas.height = Math.ceil(Math.max(1, height));
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.lineWidth = data.value.lineWidth;
        ctx.save();
    
        if (data.value.reverseFill) {
            ctx.fillStyle = data.value.fillColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        // if (data.value.res)
        ctx.strokeStyle = data.value.lineColor;
    
        const padding = 0.2;

        ctx.lineJoin = "round";

        ctx.beginPath();
       

        let points = data.value.points as number[][];
        if (data.value.points.length == 0) {
            data.value.points = [[padding, padding], [1 - padding, padding], [1 - padding, 1 - padding] , [padding, 1 - padding]];
            points = data.value.points;
        }

        points.forEach((p, index)=>{
            const x = width * p[0];
            const y = height * p[1];
            index == 0 ?  ctx.moveTo(x, y) :  ctx.lineTo(x, y);
        })

        if (data.value.isClose) {
            ctx.closePath();
        }
        if (data.value.lineWidth !== 0) {
            ctx.stroke();
        }

        if (data.value.isFill)    {
            let bColor = data.value.fillColor;
            if (!bColor) bColor = data.value.lineColor;
            ctx.fillStyle = bColor;
            if (data.value.reverseFill) {
                ctx.fillStyle = "red";
                // 设置剪切区域
                ctx.clip();
                // 将当前路径指定的区域颜色扣除
                ctx.globalCompositeOperation = "destination-out";
            }
            ctx.fill();
        }

        ctx.restore();

        if (store.isEditMode  && store.currCompId == props.compId) {
            points.forEach((p, index)=>{
                const x = width * p[0];
                const y = height * p[1];

                
                    ctx.fillStyle = "red"

                    ctx.beginPath();
                    ctx.arc(x, y, 5,  0, Math.PI*2);
                    ctx.fill();
                
            })
        }
    }

    return () => (
      <View compId={props.compId}>
         <canvas ref={canvasRef} style={{width:"100%", height: "100%"}}> </canvas>
      </View>
    );
  },
});