General-AI-Platform-Web-Client/src/views/deviceSetting/hooks/useDeviceObject.ts

/**
 * @交互说明
 * 1. 初始化选中目标的设备对象 【设备名称、使用图标】
 */
// https://t7.baidu.com/it/u=2757924858,1404466263&fm=193
import video_type_1 from "@/assets/modelSetting/video_type_1.png";
import video_type_2 from "@/assets/modelSetting/video_type_2.png";
import video_type_3 from "@/assets/modelSetting/video_type_3.png";
import device_video_bg from "@/assets/modelSetting/device_video_bg.png";
import device_video_bg_gray from "@/assets/modelSetting/device_video_bg_gray.png";
import notInVisableIcon from "@/assets/modelSetting/notInVisableIcon.png";
import { workspaceIDConf } from "@/config/attribute/viewType";
import { v4 as uuid } from "uuid";

const deviceInfoKey = "deviceInfo";
// TODO 设计实现点位绑定设备实体的位置偏移问题
/**
 * @交互说明
 * 1. 基于画布中心点建立坐标系。画布中心点坐标为(0,0)
 */
export const useDeviceObject = () => {
  // 拖拽新增获取设备对象在画布上的坐标
  function getDragDeviceObjectOrdinate(event, viewObj, deviceObj) {
    // 移动到画布上的设备对象的相对坐标，使用相对图片的坐标系，而不是画布的坐标系
    const currWorkSpaceData = document
      .getElementById(workspaceIDConf)
      .getBoundingClientRect();

    const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
    const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
    const { left, top, width, height } = currWorkSpaceData;
    //   .getSelectionElement()
    //   .getBoundingClientRect();
    // 该设备基于当前画布的坐标信息
    const currPointView = {
      x: event.clientX - left,
      y: event.clientY - top
    };
    // const pointerVpt = viewObj.restorePointerVpt(currPointView);
    const x_ordinate =
      currPointView.x - width / 2 - (deviceObj.width * deviceObj.scaleX) / 2;
    const y_ordinate =
      height / 2 - currPointView.y + (deviceObj.height * deviceObj.scaleY) / 2;
    console.log(
      "currWorkSpace:",
      currWorkSpaceData,
      "cvsObjects:",
      cvsObjects,
      "event:",
      event,
      "getDragDeviceObjectOrdinate",
      "imgObjects:",
      imgObjects.getCenterPoint(),
      x_ordinate,
      y_ordinate
    );
    return {
      x_ordinate,
      y_ordinate
    };
  }
  // 在画布上移动后设备对象坐标
  function fetchMoveDeviceObjectOrdinate(viewObj, activeObject) {
    const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
    const x_ordinate = activeObject.get("left") - cvsObjects.width / 2;
    const y_ordinate = cvsObjects.height / 2 - activeObject.get("top");
    return {
      x_ordinate,
      y_ordinate
    };
  }

  // 使用相对坐标换实际位置的方法
  function fetchOrdinateByView(viewObj, deviceItem) {
    const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
    const { x_ordinate, y_ordinate } = deviceItem;
    const left = cvsObjects.width / 2 + parseFloat(x_ordinate);
    const top = cvsObjects.height / 2 - parseFloat(y_ordinate);
    console.log(cvsObjects, "fetchOrdinateByView", left, top);
    return {
      left,
      top
    };
  }

  // 可操作区域的各点位相对坐标【限定可操作区域边界】
  function fetchViewsBoundaries(viewObj, activeObj) {
    // 图片原点为中心图标
    const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
    const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
    const y_mistake = -8 * activeObj?.scaleY; // 上下边界误差
    const currIconWidth = activeObj?.width * activeObj?.scaleX;
    const currIconHeight = activeObj?.height * activeObj?.scaleY;
    const startLeft =
      (cvsObjects.width * cvsObjects.scaleX -
        imgObjects.width * imgObjects.scaleX) /
        2 -
      currIconWidth / 2;
    const startTop =
      (cvsObjects.height * cvsObjects.scaleY -
        imgObjects.height * imgObjects.scaleY) /
        2 -
      currIconHeight -
      y_mistake;
    const endLeft = startLeft + imgObjects.width * imgObjects.scaleX;
    const endTop = startTop + imgObjects.height * imgObjects.scaleY;
    const currImgWidth = imgObjects.width * imgObjects.scaleX;
    const currImgHeight = imgObjects.height * imgObjects.scaleY;
    return {
      x_min: -currImgWidth / 2 - currIconWidth / 2,
      y_min: -currImgHeight / 2 - currIconHeight,
      x_max: currImgWidth / 2 + currIconWidth / 2,
      y_max: currImgHeight / 2,
      startLeft,
      startTop,
      endLeft,
      endTop
    };
  }

  // 操作区判断设备是否在可视区域内
  function isInViewBoundaries(viewObj, deviceObj): boolean {
    const { x_min, x_max, y_min, y_max } = fetchViewsBoundaries(
      viewObj,
      deviceObj
    );
    const { x_ordinate, y_ordinate } = deviceObj;
    // 限制对象在画布内移动
    if (x_ordinate < x_min) {
      return false;
    }
    if (y_ordinate < y_min) {
      return false;
    }
    if (x_ordinate > x_max) {
      return false;
    }
    if (y_ordinate > y_max) {
      return false;
    }
    return true;
  }

  // 预览判断当前的图片图层内
  function isInCurrViewBoundaries(viewObj, deviceObj): boolean {
    const objLeft = deviceObj.left;
    const objTop = deviceObj.top;
    const canvasObject = viewObj;
    const { backgroundImage } = canvasObject; // backgroundImage 背景图片
    const currIconWidth = deviceObj?.width * deviceObj?.scaleX;
    const currIconHeight = deviceObj?.height * deviceObj?.scaleY;
    const y_mistake = -8 * deviceObj?.scaleY; // 上下边界误差
    const x_mistake = 1; // 左右边界误差
    const startLeft =
      (canvasObject.width - backgroundImage.width * backgroundImage.scaleX) /
        2 -
      currIconWidth / 2;
    const startTop =
      (canvasObject.height - backgroundImage.height * backgroundImage.scaleY) /
        2 -
      currIconHeight -
      y_mistake;
    const endLeft = startLeft + backgroundImage.width * backgroundImage.scaleX;
    const endTop = startTop + backgroundImage.height * backgroundImage.scaleY;

    console.log(
      backgroundImage.getBoundingClientRect(),
      canvasObject.width,
      canvasObject.scaleX,
      backgroundImage.width,
      backgroundImage.scaleX,
      currIconWidth,
      "isInCurrViewBoundaries",
      backgroundImage.scaleX,
      deviceObj,
      "startLeft",
      startLeft,
      "startTop",
      startTop,
      "endLeft",
      endLeft,
      "endTop",
      endTop
    );
    if (
      objLeft < startLeft - x_mistake ||
      objTop < startTop ||
      objLeft > endLeft + x_mistake ||
      objTop > endTop
    ) {
      return true;
    }
    return false;
  }

  // function isInView() {
  //   // TODO 用三角函数判断
  //   return;
  // }

  // 设备对象是否移动
  function isMoveDevice(activeObject, viewObj) {
    const x_ordinate_history = activeObject.get(deviceInfoKey)?.x_ordinate;
    const y_ordinate_history = activeObject.get(deviceInfoKey)?.y_ordinate;
    const { x_ordinate, y_ordinate } = fetchMoveDeviceObjectOrdinate(
      viewObj,
      activeObject
    );
    // 误差设置为 0.1
    const errorValue = [1, 1];
    let x_move = true;
    let y_move = true;
    const x_move_value = Math.abs(
      Number(x_ordinate_history) - Number(x_ordinate)
    );
    const y_move_value = Math.abs(
      Number(y_ordinate_history) - Number(y_ordinate)
    );

    // 重新绑定车间的设备没有坐标信息，暂时不判断设备是否移动【默认没有移动】
    // if (Number.isNaN(x_move_value) || Number.isNaN(y_move_value)) {
    //   return false;
    // }
    if (x_move_value < errorValue[0]) {
      x_move = false;
    }
    if (y_move_value < errorValue[1]) {
      y_move = false;
    }
    console.log(
      "isMoveDevice:" + (x_move || y_move),
      "x_move_value" + x_move_value,
      "y_move_value" + y_move_value
    );
    return x_move || y_move;
  }

  // 初始化设备对象
  const initDeviceGroupObjects: Record<string, any> = (
    record,
    restDeviceItem = {}
  ) => {
    console.log(record, "initDeviceGroupObjects");
    // const { value } = record;
    let iconObjectSrc = video_type_1;
    switch (record?.icon) {
      case "3":
        iconObjectSrc = video_type_3;
        break;
      case "2":
        iconObjectSrc = video_type_2;
        break;
      case "1":
      default:
        iconObjectSrc = video_type_1;
        break;
    }
    let bgDeviceImage;
    const fontStyle = { fill: "#333333" };
    // 不在可视区域内的设备
    if (record?.notInVisable) {
      bgDeviceImage = device_video_bg_gray;
      fontStyle.fill = "gray";
    } else {
      bgDeviceImage = device_video_bg;
    }
    return {
      name: "device",
      id: uuid(),
      deviceInfo: record, // 设备信息
      left: record?.left ? Number(record?.left) : 0,
      top: record?.top ? Number(record?.top) : 0,
      selectable: true,
      hasControls: true,
      lockUniScaling: true, // 当设置为true，Object将无法被锁定比例进行缩放。默认值为false。
      lockScalingX: true, // 当设置为true，Object水平方向将无法被缩放。默认值为false。
      lockScalingY: true, // 当设置为true，Object垂直方向将无法被缩放。默认值为false。
      lockRotation: true, // 当设置为true，Object的旋转将被锁定。默认值为false。
      type: "group",
      version: "5.3.0",
      originX: "left",
      originY: "top",
      width: 132,
      height: 62,
      fill: "rgb(0,0,0)",
      stroke: null,
      strokeWidth: 0,
      strokeDashArray: null,
      strokeLineCap: "butt",
      strokeDashOffset: 0,
      strokeLineJoin: "miter",
      strokeUniform: false,
      strokeMiterLimit: 4,
      scaleX: 1,
      scaleY: 1,
      angle: 0,
      flipX: false,
      flipY: false,
      opacity: 1,
      shadow: null,
      visible: true,
      backgroundColor: "",
      fillRule: "nonzero",
      paintFirst: "fill",
      globalCompositeOperation: "source-over",
      skewX: 0,
      skewY: 0,
      objects: [
        {
          type: "image",
          version: "5.3.0",
          originX: "left",
          originY: "top",
          left: -66,
          top: -33,
          width: 264,
          height: 132,
          fill: "rgb(0,0,0)",
          stroke: null,
          strokeWidth: 0,
          strokeDashArray: null,
          strokeLineCap: "butt",
          strokeDashOffset: 0,
          strokeLineJoin: "miter",
          strokeUniform: false,
          strokeMiterLimit: 4,
          scaleX: 0.5,
          scaleY: 0.5,
          angle: 0,
          flipX: false,
          flipY: false,
          opacity: 1,
          shadow: null,
          visible: true,
          backgroundColor: "",
          fillRule: "nonzero",
          paintFirst: "fill",
          globalCompositeOperation: "source-over",
          skewX: 0,
          skewY: 0,
          cropX: 0,
          cropY: 0,
          selectable: false,
          hasControls: false,
          src: bgDeviceImage,
          crossOrigin: null,
          filters: []
        },
        {
          type: "image",
          version: "5.3.0",
          originX: "left",
          originY: "top",
          left: -50.6281,
          top: -22.9893,
          width: 48,
          height: 48,
          fill: "rgb(0,0,0)",
          stroke: null,
          strokeWidth: 0,
          strokeDashArray: null,
          strokeLineCap: "butt",
          strokeDashOffset: 0,
          strokeLineJoin: "miter",
          strokeUniform: false,
          strokeMiterLimit: 4,
          scaleX: 0.6174,
          scaleY: 0.6174,
          angle: 0,
          flipX: false,
          flipY: false,
          opacity: 1,
          shadow: null,
          visible: true,
          backgroundColor: "",
          fillRule: "nonzero",
          paintFirst: "fill",
          globalCompositeOperation: "source-over",
          skewX: 0,
          skewY: 0,
          cropX: 0,
          cropY: 0,
          selectable: false,
          hasControls: false,
          src: iconObjectSrc,
          crossOrigin: null,
          filters: []
        },
        {
          type: "textbox",
          version: "5.3.0",
          originX: "left",
          originY: "top",
          left: -14.3377,
          top: -15.4904,
          width: 320,
          height: 90.4,
          fill: fontStyle.fill,
          stroke: null,
          strokeWidth: 1,
          strokeDashArray: null,
          strokeLineCap: "butt",
          strokeDashOffset: 0,
          strokeLineJoin: "miter",
          strokeUniform: false,
          strokeMiterLimit: 4,
          scaleX: 0.1681,
          scaleY: 0.1681,
          angle: 0,
          flipX: false,
          flipY: false,
          opacity: 1,
          shadow: "",
          visible: true,
          backgroundColor: "",
          fillRule: "nonzero",
          paintFirst: "fill",
          globalCompositeOperation: "source-over",
          skewX: 0,
          skewY: 0,
          fontFamily: "arial",
          fontWeight: "normal",
          fontSize: 80,
          text: record?.name,
          underline: false,
          overline: false,
          linethrough: false,
          textAlign: "left",
          fontStyle: "normal",
          lineHeight: 1.16,
          textBackgroundColor: "",
          charSpacing: 0,
          styles: [],
          direction: "ltr",
          path: null,
          pathStartOffset: 0,
          pathSide: "left",
          pathAlign: "baseline",
          selectable: false,
          hasControls: false
        },
        {
          type: "image",
          version: "5.3.0",
          originX: "left",
          originY: "top",
          left: -47.6281,
          top: -19.9893,
          width: 40,
          height: 40,
          fill: "rgb(0,0,0)",
          stroke: null,
          strokeWidth: 0,
          strokeDashArray: null,
          strokeLineCap: "butt",
          strokeDashOffset: 0,
          strokeLineJoin: "miter",
          strokeUniform: false,
          strokeMiterLimit: 4,
          scaleX: 0.6174,
          scaleY: 0.6174,
          angle: 0,
          flipX: false,
          flipY: false,
          opacity: 1,
          shadow: null,
          visible: false,
          backgroundColor: "",
          fillRule: "nonzero",
          paintFirst: "fill",
          globalCompositeOperation: "source-over",
          skewX: 0,
          skewY: 0,
          cropX: 0,
          cropY: 0,
          selectable: false,
          hasControls: false,
          src: notInVisableIcon,
          crossOrigin: null,
          filters: []
        }
      ],
      ...restDeviceItem
    };
  };
  return {
    initDeviceGroupObjects,
    isInViewBoundaries,
    getDragDeviceObjectOrdinate,
    isMoveDevice,
    fetchViewsBoundaries,
    fetchOrdinateByView,
    fetchMoveDeviceObjectOrdinate,
    isInCurrViewBoundaries
  };
};