inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/processDrawingConfiguration/editor-util/index.js

@@ -1,2055 +1,2055 @@
-import { fabric } from "fabric";
-import { AlignGuidelines } from "fabric-guideline-plugin";
-
-const UUID = (n = 16) => {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0,
-      v = c == "x" ? r : (r & 0x3) | 0x8;
-    return v.toString(n);
-  });
-};
-
-/**
- *
- * @param fileName string 文件全民
- * @returns
- */
-const FileList = ["jpg", "svg", "png"];
-function getExt(fileName) {
-  let splits = fileName.split(".");
-  return splits.pop();
-}
-function getFiles(files) {
-  const useFile = [];
-
-  for (let i in files) {
-    if (!isNaN(i)) {
-      const item = files[i];
-      const fileExt = getExt(item.name);
-      const has = FileList.indexOf(fileExt);
-
-      if (has >= 0) {
-        const url = windowPath(item);
-        useFile.push({
-          url,
-          fileExt,
-          file: item,
-        });
-      }
-    }
-  }
-
-  return useFile;
-}
-/**
- *
- * @param file 文件类型File
- * @returns window url
- */
-
-function windowPath(file) {
-  let imgPath = "";
-
-  if (window.createObjectURL != undefined) {
-    imgPath = window.createObjectURL(file);
-  } else if (window.URL != undefined) {
-    imgPath = window.URL.createObjectURL(file);
-  } else if (window.webkitURL != undefined) {
-    imgPath = window.webkitURL.createObjectURL(file);
-  }
-
-  return imgPath;
-}
-
-const computedZoomCoord = (x, y, canvas) => {
-  const zoom = canvas.getZoom();
-  let left = x;
-  let top = y;
-
-  if (canvas.viewportTransform) {
-    left = (left - canvas.viewportTransform[4]) / zoom;
-    top = (top - canvas.viewportTransform[5]) / zoom;
-  }
-
-  return {
-    left,
-    top,
-  };
-};
-const computedZoomXY = (e, svg, canvas) => {
-  const userX = e.offsetX - svg.width / 2;
-  const userY = e.offsetY - svg.height / 2;
-  return computedZoomCoord(userX, userY, canvas);
-};
-const getWindowInfo = (domId) => {
-  let height, width, dom;
-
-  if (domId && document.getElementById(domId)) {
-    dom = document.getElementById(domId);
-  }
-
-  return () => {
-    if (dom) {
-      height = dom.clientHeight;
-      width = dom.clientWidth;
-    } else {
-      height = document.body.clientHeight;
-      width = document.body.clientWidth;
-    }
-
-    return {
-      height,
-      width,
-    };
-  };
-};
-const setInfo = (canvas, obj, info) => {
-  obj.set(info);
-  canvas.renderAll();
-};
-const createElementId = (id, className, el) => {
-  const dom = document.createElement(el || "div");
-  dom.id = id;
-  dom.className = className;
-  return dom;
-};
-
-var util = {
-  UUID,
-  computedZoomXY,
-  getWindowInfo,
-  file: {
-    getExt,
-    getFiles,
-  },
-};
-
-const canvasChangeZoom = (canvas) => {
-  canvas.on("mouse:wheel", (opt) => {
-    const delta = opt.e.deltaY; // 滚轮，向上滚一下是 -100，向下滚一下是 100
-
-    let zoom = canvas.getZoom(); // 获取画布当前缩放值
-
-    zoom *= 0.999 ** delta;
-    if (zoom > 20) zoom = 20; // 限制最大缩放级别
-
-    if (zoom < 0.01) zoom = 0.01; // 限制最小缩放级别
-
-    canvas.zoomToPoint(
-      {
-        // 关键点
-        x: opt.e.offsetX,
-        y: opt.e.offsetY,
-      },
-      zoom // 传入修改后的缩放级别
-    );
-  });
-};
-
-const event = {
-  mouseDown(opt, canvas, kk) {
-    let evt = opt.e;
-
-    if (kk === true) {
-      // 是否按住ctrl
-      canvas.isMoveing = true; // isMoveing 是自定义的，开启移动状态
-
-      canvas.lastPosX = evt.clientX; // lastPosX 是自定义的
-
-      canvas.lastPosY = evt.clientY; // lastPosY 是自定义的
-    }
-  },
-
-  mouseMove(opt, canvas) {
-    if (canvas.isMoveing) {
-      let evt = opt.e;
-      let vpt = canvas.viewportTransform; // 聚焦视图的转换
-
-      vpt[4] += evt.clientX - canvas.lastPosX;
-      vpt[5] += evt.clientY - canvas.lastPosY;
-      this.scale.setVpt(vpt[4], vpt[5], opt);
-      canvas.requestRenderAll(); // 重新渲染
-
-      canvas.lastPosX = evt.clientX;
-      canvas.lastPosY = evt.clientY;
-    }
-  },
-
-  mouseUp(opt, canvas) {
-    canvas.setViewportTransform(canvas.viewportTransform); // 设置此画布实例的视口转换
-
-    canvas.isMoveing = false; // 关闭移动状态
-  },
-};
-function canvasMove(canvas) {
-  let flag = false;
-  window.addEventListener("keydown", (e) => {
-    if (e.code === "Space") {
-      flag = true;
-    }
-  });
-  window.addEventListener("keyup", (e) => {
-    flag = false;
-  });
-  canvas.on("mouse:down", (e) => {
-    event.mouseDown(e, canvas, flag);
-  });
-  canvas.on("mouse:move", (e) => {
-    event.mouseMove.bind(this)(e, canvas);
-  });
-  canvas.on("mouse:up", (e) => {
-    event.mouseUp(e, canvas);
-  });
-}
-
-const graphData = {
-  triangle: {
-    effectType: "triangle",
-  },
-  line: {
-    effectType: "line",
-  },
-  shape: {
-    effectType: "shape",
-    outLines: [],
-    inLines: [],
-  },
-  text: {
-    effectType: "text",
-  },
-  default: {
-    isCustomElement: true,
-    effectType: "svg",
-    outLines: [],
-    inLines: [],
-  },
-};
-
-const assign = (object, type) => {
-  const preData = JSON.parse(JSON.stringify(graphData));
-  const data =
-    type && preData[type]
-      ? Object.assign(preData.default, preData[type])
-      : preData.default;
-  return Object.assign(object, {
-    id: UUID(),
-    data,
-  });
-};
-
-var addCustomElement = (canvas, obj, type) => {
-  obj = assign(obj, type);
-  canvas.add(obj);
-  canvas.renderAll();
-  return obj;
-};
-
-// 同步上传img
-
-const LoadImg = (that, canvas, useFile, e) => {
-  const loadFile = new Promise(async (res, rej) => {
-    const url = that.opt.uploadFile?.customFun
-      ? await that.opt.uploadFile?.customFun(useFile.file)
-      : useFile.url;
-    fabric.Image.fromURL(url, (img) => {
-      img.id = util.UUID();
-      const { left, top } = util.computedZoomXY(e, img, canvas);
-      addCustomElement(
-        canvas,
-        img.set({
-          left,
-          top,
-          angle: 0,
-        })
-      );
-      img.crossOrigin = "Anonymous";
-      setTimeout(() => {
-        res(img);
-      }, 10);
-    });
-  });
-  return loadFile;
-}; // 同步上传SVG
-
-const loadSvg = (canvas, useFile, e, callBack) => {
-  const loadFile = new Promise((res, rej) => {
-    const groupSvg = (objects, options) => {
-      const svg = fabric.util.groupSVGElements(objects);
-      const { left, top } = util.computedZoomXY(e, svg, canvas);
-      svg.set({
-        left,
-        top,
-      });
-      addCustomElement(canvas, svg); // 自定义上传svg 参数
-
-      callBack ? callBack(svg) : "";
-      res(svg);
-    };
-
-    fabric.loadSVGFromURL(useFile.url, (objects, options) => {
-      groupSvg(objects);
-    });
-  });
-  return loadFile;
-}; // 同步上传文件
-
-const asyncLoadFile = (that, canvas, useFile, e) => {
-  if (useFile.fileExt === "svg") {
-    return loadSvg(canvas, useFile, e);
-  }
-
-  return LoadImg(that, canvas, useFile, e);
-}; // 上传文件
-
-const LoadFile = (that, canvas, Files, e) => {
-  const { useFile, dropData } = Files;
-  const promiseList = [];
-
-  if (dropData) {
-    const fileExt = getExt(dropData.url);
-    promiseList.push(
-      loadSvg(
-        canvas,
-        {
-          fileExt,
-          url: dropData.url,
-        },
-        e,
-        dropData.callBack
-      )
-    );
-  } else {
-    for (let i of useFile) {
-      promiseList.push(asyncLoadFile(that, canvas, i, e));
-    }
-  }
-
-  return Promise.all(promiseList);
-};
-
-var onDrop = (that, canvas) => {
-  canvas.on("drop", (e) => {
-    const event = e.e;
-    event.preventDefault();
-    const dataTransfer = event.dataTransfer;
-    const files = dataTransfer.files;
-    const useFile = util.file.getFiles(files);
-    const dropData = dataTransfer.getData("dropData");
-    LoadFile(
-      that,
-      canvas,
-      {
-        useFile,
-        dropData: dropData ? JSON.parse(dropData) : null,
-      },
-      event
-    );
-  });
-};
-
-var pointConfig = {
-  pointRadius: 7,
-};
-
-const getObjById = (canvas, id) => {
-  const res = canvas.getObjects().find((ele) => {
-    return ele.id === id;
-  });
-  return res;
-}; // 添加入的锚点
-
-const getInsertIndex = (canvas, line, x, y) => {
-  let index = 0;
-  let distance; // 两点之前直线最短
-
-  for (let i = 0; i <= line.points.length - 2; i++) {
-    const point1 = line.points[i];
-    const point2 = line.points[i + 1];
-    const num =
-      Math.sqrt(Math.pow(x - point1.x, 2) + Math.pow(y - point1.y, 2)) +
-      Math.sqrt(Math.pow(x - point2.x, 2) + Math.pow(y - point2.y, 2)) -
-      Math.sqrt(
-        Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
-      );
-
-    if (!distance || num < distance) {
-      distance = num;
-      index = i;
-    }
-  }
-
-  return index + 1;
-};
-const updateLine = (instance, line) => {
-  instance.canvas.remove(line);
-  const newLine = instance.draw.path({
-    path: line.points,
-    pathOpt: {
-      stroke: line.stroke,
-    },
-  });
-  newLine.id = line.id;
-  newLine.data = line.data;
-  newLine.lockMovementX = true;
-  newLine.lockMovementY = true;
-  return newLine;
-};
-
-let _REMOVEEVENTSTATE = false;
-var remove = (canvas, opt) => {
-  const dom = document.getElementById(opt.boxElement);
-
-  const removeTriOfLine = (obj) => {
-    const triangle = canvas
-      .getObjects()
-      .find((ele) => ele.data.lineId === obj.id);
-    canvas.remove(triangle);
-  };
-
-  const removeRelevance = (obj) => {
-    if (obj.data?.effectType === "line") {
-      removeTriOfLine(obj);
-    }
-
-    if (obj.data?.effectType === "svg") {
-      [...(obj.data.outLines || []), ...(obj.data.inLines || [])]?.forEach(
-        (id) => {
-          const line = getObjById(canvas, id);
-          canvas.remove(line);
-          removeTriOfLine(line);
-        }
-      );
-    }
-  };
-
-  dom.addEventListener("mouseover", () => {
-    _REMOVEEVENTSTATE = true;
-  });
-  dom.addEventListener("mouseout", () => {
-    _REMOVEEVENTSTATE = false;
-  });
-  window.addEventListener("keydown", (e) => {
-    const isToRemove =
-      (e.code === "Backspace" || e.code === "Delete") && _REMOVEEVENTSTATE;
-
-    if (isToRemove) {
-      const activeObjects = canvas.getActiveObjects();
-
-      for (let i of activeObjects) {
-        canvas.remove(i);
-        removeRelevance(i);
-      }
-
-      canvas.renderAll();
-    }
-  });
-};
-
-const getAngle = (a, b) => {
-  let res;
-
-  if (a.x < b.x && a.y > b.y) {
-    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180;
-  } else if (a.x > b.x && a.y > b.y) {
-    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180 + 180;
-  } else if (a.x > b.x && a.y < b.y) {
-    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180 + 180;
-  } else if (a.x < b.x && a.y < b.y) {
-    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180;
-  }
-
-  return res;
-};
-
-const updateTriangle = (canvas, line) => {
-  const oldTri = getObjById(canvas, line.data.triangleId);
-  const tri = getTriangle(line);
-  oldTri.left = tri.left;
-  oldTri.top = tri.top;
-  oldTri.set("fill", line.stroke);
-  oldTri.rotate(tri.angle);
-  oldTri.selectable = false;
-  oldTri.lockMovementX = true;
-  oldTri.lockMovementY = true;
-  canvas.renderAll();
-};
-const getTriangle = (line) => {
-  const begin = line.points[line.points.length - 2];
-  const end = line.points[line.points.length - 1];
-  const angle = (getAngle(begin, end) - 90) * -1;
-  const t = new fabric.Triangle({
-    centeredRotation: true,
-    fill: line.stroke,
-    left: end.x - 7.5,
-    top: end.y - 7.5,
-    hasControls: false,
-    hasBorders: false,
-    lockMovementX: true,
-    lockMovementY: true,
-    selectable: false,
-    width: 15,
-    height: 15,
-  });
-  t.rotate(angle);
-  return t;
-};
-
-const createLine = (instance) => {
-  let tempLine;
-  let beginObj;
-  const canvas = instance.canvas;
-  window.addEventListener("keydown", (e) => {
-    const isShift = e.code === "ShiftLeft" || e.code === "ShiftRight";
-
-    if (isShift) {
-      instance.canvas.keydown = "shift";
-    }
-  });
-  window.addEventListener("keyup", (e) => {
-    instance.canvas.keydown = undefined;
-  });
-  canvas.on("mouse:down:before", (e) => {
-    if (e.target) {
-      beginObj = e.target; // 线编辑状态点块
-
-      if (
-        beginObj &&
-        instance.state === "createLine" &&
-        beginObj.data.effectType !== "line" &&
-        beginObj.data.effectType !== "point"
-      ) {
-        computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-        const beginPoint = beginObj.getCenterPoint();
-        const newLine = new fabric.Path(
-          [
-            ["M", beginPoint.x, beginPoint.y],
-            ["L", beginPoint.x, beginPoint.y],
-          ],
-          {
-            fill: "",
-            stroke: "black",
-            objectCaching: false,
-            strokeWidth: 3,
-            strokeDashArray:
-              canvas.createLineType === "broken" ? [0, 0, 12] : undefined,
-            perPixelTargetFind: true,
-            lockMovementX: true,
-            lockMovementY: true,
-          }
-        );
-        tempLine = newLine;
-        canvas.add(newLine);
-        canvas.renderAll();
-      }
-    } else {
-      beginObj = undefined;
-    }
-  });
-  canvas.on("mouse:move", (e) => {
-    e.target; // 线预览
-
-    if (
-      instance.state === "createLine" &&
-      beginObj &&
-      beginObj.data.effectType !== "line" &&
-      beginObj.data.effectType !== "point"
-    ) {
-      const xy = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-      const path = tempLine.path;
-      path[1][1] = xy.left;
-      path[1][2] = xy.top;
-      canvas.renderAll();
-    }
-  });
-  canvas.on("mouse:up", (e) => {
-    const endObj = e.currentTarget; // 新连线
-
-    if (
-      instance.state === "createLine" &&
-      endObj &&
-      endObj?.data.effectType !== "line" &&
-      endObj?.data.effectType !== "point" &&
-      beginObj &&
-      beginObj?.data.effectType !== "line" &&
-      beginObj?.data.effectType !== "point" &&
-      beginObj !== endObj
-    ) {
-      const beginPoint = beginObj.getCenterPoint();
-      const endPoint = endObj.getCenterPoint();
-      const data = {
-        from: beginObj.id,
-        fromExcursionX: 0,
-        fromExcursionY: 0,
-        to: endObj.id,
-        toExcursionX: 0,
-        toExcursionY: 0,
-      };
-      const line = instance.draw.path({
-        path: [beginPoint, endPoint],
-      });
-      line.data = { ...line.data, ...data }; // 箭头
-
-      const tri = getTriangle(line);
-      const triangle = addCustomElement(instance.canvas, tri, "triangle");
-      line.data.triangleId = triangle.id;
-      triangle.data.lineId = line.id;
-      triangle.data.effectType = "triangle";
-      beginObj.data.outLines.push(line.id);
-      endObj.data.inLines.push(line.id);
-      beginObj = undefined;
-      instance.setState("");
-    }
-
-    if (tempLine) {
-      canvas.remove(tempLine);
-    }
-
-    tempLine = undefined;
-    beginObj = undefined;
-  });
-};
-
-const lineEvent = (instance) => {
-  createLine(instance);
-  let tempLine; // 点下标
-
-  let addPointIndex;
-  let pointIndex;
-  const canvas = instance.canvas; // 都干完刷新一下线
-
-  canvas.on("after:render", (e) => {
-    canvas.getObjects().forEach((obj) => {
-      if (obj.data?.effectType === "line") {
-        if (obj.data?.needUpate) {
-          obj.controls = fabric.Object.prototype.controls;
-          obj.hasControls = false;
-          updateLine(instance, obj);
-          obj.data.needUpate = undefined;
-        }
-      }
-    });
-  });
-  let beginObj;
-  canvas.on("mouse:down:before", (e) => {
-    if (e.target) {
-      beginObj = e.target;
-      const xy = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-      const active = canvas.getActiveObject(); // 点击选中后的线创建折点或者移动折点
-
-      if (
-        beginObj &&
-        beginObj.data?.effectType === "line" &&
-        active?.id === beginObj.id
-      ) {
-        const line = beginObj;
-        line.lockMovementX = true;
-        line.lockMovementY = true;
-        line.points.forEach((p, index) => {
-          if (Math.abs(p.x - xy.left) < 5 && Math.abs(p.y - xy.top) < 5) {
-            pointIndex = index;
-          }
-        }); // 拖动折点
-
-        if (pointIndex !== undefined) {
-          // 首尾折点
-          if (pointIndex !== 0 && pointIndex !== line.points.length - 1) {
-            pointIndex = undefined;
-          }
-
-          return;
-        }
-
-        addPointIndex = getInsertIndex(canvas, line, xy.left, xy.top);
-        line.points.splice(addPointIndex, 0, {
-          x: xy.left,
-          y: xy.top,
-        });
-      }
-    } else {
-      beginObj = undefined;
-    }
-  });
-  canvas.on("mouse:move", (e) => {
-    const obj = e.target;
-    const active = canvas.getActiveObject(); // 创建折点跟随
-
-    if (
-      addPointIndex &&
-      beginObj?.data.effectType === "line" &&
-      active?.id === beginObj.id
-    ) {
-      const line = beginObj;
-      const xy = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-
-      if (instance.canvas.keydown === "shift");
-
-      line.points[addPointIndex].x = xy.left;
-      line.points[addPointIndex].y = xy.top;
-    } // 移动块
-
-    if (
-      instance.state !== "createLine" &&
-      beginObj &&
-      beginObj.data &&
-      beginObj.data?.effectType !== "line" &&
-      beginObj.data?.effectType !== "point"
-    ) {
-      const beginPoint = beginObj.getCenterPoint();
-      beginObj.data.outLines?.forEach((lineId) => {
-        const line = getObjById(canvas, lineId);
-        line.points[0].x = beginPoint.x + line.data.fromExcursionX;
-        line.points[0].y = beginPoint.y + line.data.fromExcursionY;
-        updateTriangle(canvas, line);
-        line.data.needUpate = true;
-      });
-      beginObj.data.inLines?.forEach((lineId) => {
-        const line = getObjById(canvas, lineId);
-        line.points[line.points.length - 1].x =
-          beginPoint.x + line.data.toExcursionX + pointConfig.pointRadius;
-        line.points[line.points.length - 1].y =
-          beginPoint.y + line.data.toExcursionY + pointConfig.pointRadius;
-        updateTriangle(canvas, line);
-        line.data.needUpate = true;
-      });
-    } // 移动点
-
-    if (
-      instance.state !== "createLine" &&
-      beginObj &&
-      beginObj.data?.effectType === "line" &&
-      obj?.data?.effectType === "line"
-    ) {
-      updateTriangle(canvas, beginObj);
-    }
-  });
-  canvas.on("mouse:up", (e) => {
-    e.currentTarget;
-
-    if (canvas.getActiveObjects().length > 1) {
-      canvas.getActiveObject().set("lockMovementX", true);
-      canvas.getActiveObject().set("lockMovementY", true);
-    } // 移动点
-
-    if (pointIndex !== undefined && beginObj?.data.effectType === "line") {
-      const line = beginObj;
-      const point1 = new fabric.Circle({
-        radius: 3,
-        left: line.points[0].x,
-        top: line.points[0].y,
-      });
-      const point2 = new fabric.Circle({
-        radius: 3,
-        left: line.points[line.points.length - 1].x,
-        top: line.points[line.points.length - 1].y,
-      });
-      let newParent;
-      canvas.getObjects().forEach((obj) => {
-        if (obj.data.effectType === "shape" || obj.data.effectType === "svg") {
-          if (
-            obj.intersectsWithObject(point1) &&
-            obj.data.outLines.indexOf(line.id) === -1
-          ) {
-            newParent = {
-              type: "start",
-              obj,
-            };
-          }
-
-          if (
-            obj.intersectsWithObject(point2) &&
-            obj.data.inLines.indexOf(line.id) === -1
-          ) {
-            newParent = {
-              type: "end",
-              obj,
-            };
-          }
-        }
-      }); // 连接到新块
-
-      if (newParent) {
-        const beginPoint = newParent.obj.getCenterPoint();
-
-        if (newParent.type === "start") {
-          const oldRect = getObjById(canvas, line.data.from);
-          oldRect.data.outLines.splice(
-            oldRect.data.outLines.indexOf(line.id),
-            1
-          );
-          line.data.from = newParent.obj.id;
-          line.data.fromExcursionX = 0;
-          line.data.fromExcursionY = 0;
-          line.points[0].x = beginPoint.x;
-          line.points[0].y = beginPoint.y;
-          newParent.obj.data.outLines.push(line.id);
-          line.data.needUpate = true;
-        } else if (newParent.type === "end") {
-          const oldRect = getObjById(canvas, line.data.to);
-          oldRect.data.inLines.splice(oldRect.data.inLines.indexOf(line.id), 1);
-          line.data.to = newParent.obj.id;
-          line.data.toExcursionX = 0;
-          line.data.toExcursionY = 0;
-          line.points[line.points.length - 1].x = beginPoint.x;
-          line.points[line.points.length - 1].y = beginPoint.y;
-          newParent.obj.data.inLines.push(line.id);
-          line.data.needUpate = true;
-        }
-      } else {
-        if (pointIndex === 0) {
-          const rect = getObjById(canvas, line.data.from);
-          const rectPoint = rect.getCenterPoint();
-          line.data.fromExcursionX = e.pointer.x - rectPoint.x;
-          line.data.fromExcursionY = e.pointer.y - rectPoint.y;
-        } else {
-          const rect = getObjById(canvas, line.data.to);
-          const rectPoint = rect.getCenterPoint();
-          line.data.toExcursionX = e.pointer.x - rectPoint.x;
-          line.data.toExcursionY = e.pointer.y - rectPoint.y;
-        }
-      }
-    } // 新点
-
-    if (beginObj?.data?.effectType === "line" && addPointIndex !== undefined) {
-      const line = beginObj;
-      line.data.needUpate = true;
-    }
-
-    if (tempLine) {
-      canvas.remove(tempLine);
-    }
-
-    tempLine = undefined;
-    beginObj = undefined;
-    addPointIndex = undefined;
-    pointIndex = undefined;
-  });
-};
-
-const shapeEvent = (instance) => {
-  const canvas = instance.canvas; // 点下标
-
-  let point;
-  canvas.on("mouse:down:before", (e) => {
-    point = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-  });
-  canvas.on("mouse:up", (e) => {
-    const endPoint = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-
-    if (instance.state !== "createShape") {
-      return;
-    }
-
-    const rect = new fabric.Rect({
-      left: Math.min(point.left, endPoint.left),
-      top: Math.min(point.top, endPoint.top),
-      fill: instance.config.shape.fill,
-      stroke: instance.config.shape.stroke,
-      strokeWidth: 2,
-      width: Math.abs(point.left - endPoint.left),
-      height: Math.abs(point.top - endPoint.top),
-    });
-    addCustomElement(canvas, rect, "shape");
-    instance.setState("");
-  });
-};
-
-const textEvent = (instance) => {
-  const canvas = instance.canvas; // 点下标
-
-  let point;
-  canvas.on("mouse:down:before", (e) => {
-    point = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-  });
-  canvas.on("mouse:up", (e) => {
-    computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
-
-    if (instance.state !== "createText") {
-      return;
-    }
-
-    var itext = new fabric.IText("我是文本", {
-      left: point.left,
-      top: point.top,
-      editable: false,
-      fill: "#354052",
-      lockScalingX: true,
-      lockScalingY: true,
-      strokeWidth: 0,
-      stroke: "#880E4F",
-    });
-    addCustomElement(canvas, itext, "text");
-    instance.setState("");
-  });
-};
-
-var lockMove = (canvas) => {
-  let shiftKey = false;
-  let altKey = false;
-  canvas.on("mouse:down:before", (e) => {
-    shiftKey = e.e.shiftKey;
-    altKey = e.e.altKey;
-
-    if (shiftKey && altKey && e.target) {
-      // 锁定 Y轴移动
-      e.target.lockMovementX = true;
-    } else if (shiftKey && !altKey && e.target) {
-      // 锁定X轴移动
-      e.target.lockMovementY = true;
-    }
-  });
-  canvas.on("mouse:up:before", (e) => {
-    shiftKey = false;
-    altKey = false;
-
-    if (e.target) {
-      // 解锁 Y轴移动
-      e.target.lockMovementX = false; // 解锁 X轴移动
-
-      e.target.lockMovementY = false;
-    }
-  });
-};
-
-function Event(canvas, opt) {
-  // 拖动上传
-  onDrop(this, canvas); // 缩放
-
-  canvasChangeZoom(canvas); // 画布拖动
-
-  canvasMove.bind(this)(canvas); // 删除方法
-
-  remove(canvas, opt); // 辅助线
-
-  const guideline = new AlignGuidelines({
-    canvas,
-  });
-  guideline.init(); // 线相关事件
-
-  lineEvent(this); // 创建矩形
-
-  shapeEvent(this); // 创建文字
-
-  textEvent(this);
-
-  if (opt && opt.isPreview) {
-    (function render() {
-      canvas.renderAll();
-      fabric.util.requestAnimFrame(render);
-    })();
-  } // cp Event
-  // cp(canvas);
-  // 锁定轴移动块
-
-  lockMove(canvas);
-}
-
-var LineState;
-
-(function (LineState) {
-  LineState["RAW_COAL"] = "#EA5858";
-  LineState["CLEAN_COAL"] = "#22CC83";
-  LineState["PRODUCT"] = "#22CC83";
-  LineState["REJECT"] = "#6554C0";
-  LineState["SLURRY"] = "#A52337";
-  LineState["DILUTE_MEDIUM"] = "#9095A2";
-  LineState["CORRECT_MEDIUM"] = "#354052";
-  LineState["DENSE_MEDIUM"] = "#354052";
-  LineState["MIDDLINGS"] = "#FF9214";
-  LineState["SLIME"] = "#729918";
-  LineState["CLARIFIED_WATER"] = " #1CDDEB";
-  LineState["AIR"] = "#D439D4";
-})(LineState || (LineState = {}));
-
-var line = {
-  fill: "transparent",
-  stroke: "#354052",
-  strokeWidth: 3,
-};
-
-var shape = {
-  fill: "#f9fafb",
-  stroke: "#DCE2ED",
-};
-
-var config = {
-  line,
-  shape,
-  canvas: {
-    bc: "transparent",
-  },
-};
-
-const addControl = (poly) => {
-  var lastControl = poly.points.length - 1;
-  poly.cornerStyle = "circle";
-  poly.cornerColor = "red";
-  poly.controls = poly.points.reduce(function (acc, point, index) {
-    acc["p" + index] = new fabric.Control({
-      positionHandler: polygonPositionHandler,
-      actionHandler: anchorWrapper(
-        index > 0 ? index - 1 : lastControl,
-        actionHandler
-      ),
-      actionName: "modifyPolygon",
-      pointIndex: index,
-    });
-    return acc;
-  }, {});
-}; // 返回控制点
-
-function polygonPositionHandler(dim, finalMatrix, fabricObject) {
-  var x = fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x,
-    y = fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y;
-  return fabric.util.transformPoint(
-    {
-      x: x,
-      y: y,
-    },
-    fabric.util.multiplyTransformMatrices(
-      fabricObject.canvas.viewportTransform,
-      fabricObject.calcTransformMatrix()
-    )
-  );
-}
-
-function getObjectSizeWithStroke(object) {
-  var stroke = new fabric.Point(
-    object.strokeUniform ? 1 / object.scaleX : 1,
-    object.strokeUniform ? 1 / object.scaleY : 1
-  ).multiply(object.strokeWidth);
-  return new fabric.Point(object.width + stroke.x, object.height + stroke.y);
-} // define a function that will define what the control does
-// this function will be called on every mouse move after a control has been
-// clicked and is being dragged.
-// The function receive as argument the mouse event, the current trasnform object
-// and the current position in canvas coordinate
-// transform.target is a reference to the current object being transformed,
-
-function actionHandler(eventData, transform, x, y) {
-  var polygon = transform.target,
-    currentControl = polygon.controls[polygon.__corner],
-    mouseLocalPosition = polygon.toLocalPoint(
-      new fabric.Point(x, y),
-      "center",
-      "center"
-    ),
-    polygonBaseSize = getObjectSizeWithStroke(polygon),
-    size = polygon._getTransformedDimensions(0, 0),
-    finalPointPosition = {
-      x:
-        (mouseLocalPosition.x * polygonBaseSize.x) / size.x +
-        polygon.pathOffset.x,
-      y:
-        (mouseLocalPosition.y * polygonBaseSize.y) / size.y +
-        polygon.pathOffset.y,
-    };
-
-  polygon.points[currentControl.pointIndex] = finalPointPosition;
-  return true;
-} // define a function that can keep the polygon in the same position when we change its
-// width/height/top/left.
-
-function anchorWrapper(anchorIndex, fn) {
-  return function (eventData, transform, x, y) {
-    var fabricObject = transform.target,
-      absolutePoint = fabric.util.transformPoint(
-        {
-          x: fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x,
-          y: fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y,
-        },
-        fabricObject.calcTransformMatrix()
-      ),
-      actionPerformed = fn(eventData, transform, x, y);
-    fabricObject._setPositionDimensions({});
-    var polygonBaseSize = getObjectSizeWithStroke(fabricObject),
-      newX =
-        (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) /
-        polygonBaseSize.x,
-      newY =
-        (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) /
-        polygonBaseSize.y;
-
-    fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
-    return actionPerformed;
-  };
-}
-
-const path = function (opt) {
-  if (!opt.pathOpt) {
-    opt.pathOpt = {
-      stroke: config.line.stroke,
-      strokeWidth: config.line.strokeWidth,
-    };
-  } else {
-    if (!opt.pathOpt?.stroke) opt.pathOpt.stroke = config.line.stroke;
-    if (!opt.pathOpt?.strokeWidth)
-      opt.pathOpt.strokeWidth = config.line.strokeWidth;
-  }
-
-  const polyline = new fabric.Polyline(opt.path, {
-    ...opt.pathOpt,
-    fill: "transparent",
-    lockMovementX: true,
-    lockMovementY: true,
-    objectCaching: false,
-    hasBorders: false,
-    perPixelTargetFind: true,
-  });
-  addControl(polyline);
-  return addCustomElement(this.canvas, polyline, "line");
-};
-
-const text = function (opt) {
-  const svg = getObjById(this.canvas, opt.parentId);
-  const newText = new fabric.IText(opt.name, {
-    editable: false,
-    fill: "black",
-    top: svg.top - 30,
-    left: svg.left,
-    lockScalingX: true,
-    lockScalingY: true,
-    ...opt.option,
-  });
-  return addCustomElement(this.canvas, newText, "text");
-};
-
-function Draw() {
-  return {
-    path: path.bind(this),
-    text: text.bind(this),
-  };
-}
-
-/**
- * 线段动画 需优化obo运动
- */
-
-class LineAnimate {
-  constructor(opt, canvas) {
-    this.lineAnimateList = opt;
-    this.canvas = canvas;
-  }
-
-  canvas;
-  lineAnimateList;
-
-  oboRun(speed) {}
-
-  oboStop(speed) {}
-
-  start(item) {
-    let index = 0;
-
-    this.canvas._onObjectRemoved = (e) => {
-      if (item.object === e) item.cycle = false;
-    };
-
-    item.object.set("stroke", LineState[item.state] || "black");
-
-    const run = () => {
-      const speed = item.speed || 1;
-
-      if (item.direction === "negative") {
-        index = speed;
-      } else {
-        index -= speed;
-      }
-
-      item.object.animate(
-        {
-          strokeDashOffset: index,
-        },
-        {
-          duration: 60,
-          onComplete: () => {
-            if (item.cycle) {
-              run();
-            }
-          },
-          easing: (t, b, c, d) => {
-            return (c * t) / d + b;
-          },
-        }
-      );
-    };
-
-    run();
-  } // 添加动画
-
-  addLineAnimate(item) {
-    this.lineAnimateList.push(item);
-    this.start(item);
-  } // 启动所有动画
-
-  startAll() {
-    for (let i of this.lineAnimateList) {
-      this.start(i);
-    }
-  } // 关闭所有动画
-
-  stopAll() {
-    for (let i of this.lineAnimateList) {
-      i.cycle = false;
-    }
-
-    this.lineAnimateList = [];
-  } // 关闭某个动画
-
-  stop(item) {
-    item.cycle = false;
-
-    for (let i = 0; i < this.lineAnimateList.length; i++) {
-      if (this.lineAnimateList[i].object === item.object) {
-        this.lineAnimateList.splice(1, i);
-      }
-    }
-  }
-}
-
-var Alignparam;
-
-(function (Alignparam) {
-  Alignparam[(Alignparam["top"] = 0)] = "top";
-  Alignparam[(Alignparam["left"] = 1)] = "left";
-  Alignparam[(Alignparam["right"] = 2)] = "right";
-  Alignparam[(Alignparam["bottom"] = 3)] = "bottom";
-  Alignparam[(Alignparam["horizontal_center"] = 4)] = "horizontal_center";
-  Alignparam[(Alignparam["vertical_center"] = 5)] = "vertical_center";
-  Alignparam[(Alignparam["horizontal_distribution"] = 6)] =
-    "horizontal_distribution";
-  Alignparam[(Alignparam["vertical_distribution"] = 7)] =
-    "vertical_distribution";
-})(Alignparam || (Alignparam = {}));
-
-var Levels;
-
-(function (Levels) {
-  Levels["top"] = "bringToFront";
-  Levels["bottom"] = "sendToBack";
-  Levels["before"] = "bringForward";
-  Levels["after"] = "sendBackwards";
-})(Levels || (Levels = {}));
-
-/**
- *
- * @param canvas canvas
- * @param alignparam 对齐方向
- */
-const fabricItemAlign = function (alignparam) {
-  const canvas = this.canvas;
-  const canvasObjectsGrop = canvas.getActiveObject();
-
-  const getProperty = (cGrop = canvasObjectsGrop) => {
-    return {
-      gropObjs: cGrop._objects ?? [],
-      gropWidth: cGrop.width ?? 0,
-      gropHeight: cGrop.height ?? 0,
-    };
-  };
-
-  if (canvas.getActiveObjects().length <= 1) return;
-  const { gropObjs, gropWidth, gropHeight } = getProperty();
-
-  if (alignparam === 0) {
-    // 顶对齐
-    gropObjs.forEach((item) => {
-      // 顶对齐算法：top为零表示 依据选中框顶部对齐， left 为 选中点每一项的
-      item.set({
-        top: 0 - gropHeight * 0.5,
-      });
-    });
-  } // 左对齐
-
-  if (alignparam === 1) {
-    gropObjs.forEach((item) => {
-      item.set({
-        left: 0 - gropWidth * 0.5,
-      });
-    });
-  } // 右对齐
-
-  if (alignparam === 2) {
-    gropObjs.forEach((item) => {
-      item.set({
-        left: gropWidth - (item.width ?? 0) * item.scaleX - gropWidth * 0.5,
-      });
-    });
-  } // 底对齐
-
-  if (alignparam === 3) {
-    gropObjs.forEach((item) => {
-      item.set({
-        top: gropHeight - (item.height ?? 0) * item.scaleY - gropHeight * 0.5,
-      });
-    });
-  } // 水平居中对齐
-
-  if (alignparam === 4) {
-    gropObjs.forEach((item) => {
-      item.set({
-        top: 0 - (item.height ?? 0) * item.scaleY * 0.5,
-      });
-    });
-  } // 垂直居中对齐
-
-  if (alignparam === 5) {
-    gropObjs.forEach((item) => {
-      item.set({
-        left: 0 - (item.width ?? 0) * item.scaleX * 0.5,
-      });
-    });
-  } // 水平分布对齐
-
-  if (alignparam === 6) {
-    let groupWidth = gropWidth;
-    gropObjs.forEach((item) => {
-      groupWidth -= (item.width ?? 0) * item.scaleX;
-    });
-    const gap = groupWidth / (gropObjs.length - 1 || 1);
-    gropObjs.forEach((item, idx) => {
-      if (idx > 0) {
-        item.set({
-          left:
-            (gropObjs[idx - 1].left ?? 0) +
-            (gropObjs[idx - 1].width ?? 0) * gropObjs[idx - 1].scaleX +
-            gap,
-        });
-      } else {
-        item.set({
-          left: 0 - gropWidth / 2,
-        });
-      }
-    });
-  } // 垂直分布对齐
-
-  if (alignparam === 7) {
-    let groupHeight = gropHeight;
-    gropObjs.forEach((item) => {
-      groupHeight -= (item.height ?? 0) * item.scaleY;
-    });
-    const gap = groupHeight / (gropObjs.length - 1 || 1);
-    gropObjs.forEach((item, idx) => {
-      if (idx > 0) {
-        item.set({
-          top:
-            (gropObjs[idx - 1].top ?? 0) +
-            (gropObjs[idx - 1].height ?? 0) * gropObjs[idx - 1].scaleY +
-            gap,
-        });
-      } else {
-        item.set({
-          top: 0 - gropHeight / 2,
-        });
-      }
-    });
-  } // 其他对齐规则拓展 ......
-
-  canvas.renderAll(); // 重新渲染
-};
-
-const setLevel = function (idOrEle, level) {
-  const canvas = this.canvas;
-  const obj =
-    typeof idOrEle === "string" ? getObjById(canvas, idOrEle) : idOrEle;
-  const fun = Levels[level];
-
-  if (obj) {
-    obj[fun]();
-  }
-
-  canvas.renderAll(); // 重新渲染
-
-  return obj;
-};
-
-function zoomToFitCanvas(canvas) {
-  //遍历所有对对象，获取最小坐标，最大坐标
-  const objects = canvas.getObjects();
-  let rect = objects[0].getBoundingRect();
-  let minX = rect.left;
-  let minY = rect.top;
-  let maxX = rect.left + rect.width;
-  let maxY = rect.top + rect.height;
-
-  if (objects.length > 0) {
-    for (let i = 1; i < objects.length; i++) {
-      rect = objects[i].getBoundingRect();
-      minX = Math.min(minX, rect.left);
-      minY = Math.min(minY, rect.top);
-      maxX = Math.max(maxX, rect.left + rect.width);
-      maxY = Math.max(maxY, rect.top + rect.height);
-    }
-  } //计算平移坐标
-
-  const panX = (maxX - minX - canvas.width) / 2 + minX;
-  const panY = (maxY - minY - canvas.height) / 2 + minY;
-  const { left, top } = computedZoomCoord(panX, panY, canvas); //开始平移
-
-  canvas.absolutePan({
-    x: left,
-    y: top,
-  }); //计算缩放比例
-
-  const zoom = Math.min(
-    canvas.width / (maxX - minX),
-    canvas.height / (maxY - minY)
-  ); //计算缩放中心
-
-  const zoomPoint = new fabric.Point(canvas.width / 2, canvas.height / 2); //开始缩放
-
-  canvas.zoomToPoint(zoomPoint, zoom * 0.8);
-}
-
-class windowResize {
-  constructor(opt) {
-    this.opt = opt;
-    this.canvas = opt.canvas;
-    this.domInfo = getWindowInfo(opt.id);
-    this.init();
-    this.watchDivChange();
-  }
-
-  opt;
-
-  watchDivChange() {
-    const dom = document.getElementById(this.opt.id);
-    let tm;
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (tm) clearTimeout(tm);
-      tm = setTimeout(() => {
-        this.todo();
-      }, 100);
-    });
-    resizeObserver.observe(dom);
-  }
-
-  init() {
-    const { width, height } = this.domInfo();
-    this.canvas.setWidth(width);
-    this.canvas.setHeight(height);
-  }
-
-  todo(cb) {
-    this.init();
-    const callBack = this.opt.cb || cb;
-    const { width, height } = this.domInfo();
-    callBack ? callBack(width, height, this.canvas) : "";
-  }
-
-  canvas;
-  domInfo;
-}
-
-function renderGrid(canvas) {
-  const width = canvas.width;
-  const height = canvas.height;
-  let line;
-  let rect = [];
-  let size = 20;
-
-  for (let i = 0; i < Math.ceil(width / 20); ++i) {
-    rect[0] = i * size;
-    rect[1] = 0;
-    rect[2] = i * size;
-    rect[3] = height;
-    line = null;
-    line = new fabric.Line(rect, {
-      stroke: "#999",
-      opacity: 0.5,
-    });
-    line.rowName = "grid";
-    line.selectable = false;
-    canvas.add(line);
-    line.sendToBack();
-  }
-
-  for (let i = 0; i < Math.ceil(height / 20); ++i) {
-    rect[0] = 0;
-    rect[1] = i * size;
-    rect[2] = width;
-    rect[3] = i * size;
-    line = null;
-    line = new fabric.Line(rect, {
-      stroke: "#999",
-      opacity: 0.5,
-    });
-    line.rowName = "grid";
-    line.selectable = false;
-    canvas.add(line);
-    line.sendToBack();
-  }
-
-  canvas.renderAll();
-}
-
-class Grid {
-  constructor(opt) {
-    this.opt = opt;
-    this.init();
-  }
-
-  idName = "inl-tp-editor-grid";
-  idBoxName = "inl-tp-editor-grid-box";
-  renderState = false;
-
-  init() {
-    this.resetOpt();
-    this.addElement();
-  }
-
-  renderGrid() {
-    renderGrid(this.canvas);
-  }
-
-  clearGrid() {
-    for (let i of this.canvas.getObjects()) {
-      if (i.rowName === "grid") {
-        this.canvas.remove(i);
-      }
-    }
-
-    this.renderState = false;
-  }
-
-  changeBackground(s, cb) {
-    this.canvas.setBackgroundColor(s, () => {
-      cb ? cb() : "";
-      this.canvas.renderAll();
-    });
-  }
-
-  resetGrid() {
-    this.clearGrid();
-    this.renderGrid();
-    this.renderState = true;
-  }
-
-  resetOpt() {}
-
-  addElement() {
-    const boxDom = document.getElementById(this.opt.boxId);
-    const GridCanvasDom = createElementId(this.idName, this.idName, "canvas");
-    const GridCanvasBoxDom = createElementId(this.idBoxName, this.idBoxName);
-    GridCanvasBoxDom.appendChild(GridCanvasDom);
-    GridCanvasBoxDom.setAttribute(
-      "style",
-      `position:absolute; top: ${this.opt.scaleHd}px; left: ${this.opt.scaleHd}px; right: 0; bottom: 0; z-index: 0;`
-    );
-    boxDom.appendChild(GridCanvasBoxDom);
-    this.canvas = new fabric.Canvas(this.idName);
-    new windowResize({
-      canvas: this.canvas,
-      id: this.idBoxName,
-      cb: () => {
-        if (this.renderState) {
-          this.resetGrid();
-        }
-      },
-    });
-  }
-}
-
-const mtipSvgCustomData = function () {
-  return {
-    data: this.data || {},
-    id: this.id,
-  };
-};
-
-const resetFabric = () => {
-  const newList = [
-    "Line",
-    "Polyline",
-    "Triangle",
-    "Group",
-    "Rect",
-    "Point",
-    "Path",
-    "Circle",
-    "Textbox",
-    "Image",
-    "Text",
-    "IText",
-  ];
-
-  for (let i of newList) {
-    fabric[i].prototype["toObject"] = (function (toObject) {
-      return function () {
-        return fabric.util.object.extend(
-          toObject.call(this),
-          mtipSvgCustomData.call(this)
-        );
-      };
-    })(fabric[i].prototype["toObject"]);
-  }
-};
-
-function loadJsonString(s, cb) {
-  this.canvas.clear(); // 简单辨型
-
-  const loadData = typeof s === "string" ? JSON.parse(s) : s;
-  this.canvas.loadFromJSON(loadData, (objeats) => {
-    this.canvas._objects.forEach((item, key) => {
-      if (this.opt.isPreview) {
-        item.selectable = false;
-        const isLine = item.data && item.data.effectType === "";
-        const triangle = item.data && item.data.effectType === "";
-
-        if (isLine && triangle) {
-          this.setLevel(item, Levels.top);
-        }
-      } else {
-        if (item.data.effectType === "line") {
-          updateLine(this, item);
-        }
-      }
-    });
-
-    cb ? cb() : "";
-  });
-}
-
-class Scale {
-  constructor(opt) {
-    this.resetOpt(opt);
-    this.init();
-  }
-
-  idxbx = "inl-editor-scale-x";
-  idybx = "inl-editor-scale-y";
-  idx = "inl-editor-scale-x-c";
-  idy = "inl-editor-scale-y-c"; // 标尺厚度
-
-  scaleHou = 15;
-
-  init() {
-    this.addElement();
-    this.createScaleCanvas();
-
-    this._renderScale();
-  }
-
-  resetOpt(opt) {
-    this.scaleHou = opt.scaleHou || 15;
-    const useOpt = Object.assign(
-      {},
-      {
-        width: this.scaleHou,
-        height: this.scaleHou,
-        bcoler: "#fff",
-      },
-      opt
-    );
-    this.opt = useOpt;
-  }
-
-  renderAfter() {
-    this.scaleX.setBackgroundColor(this.opt.bcoler, () => {});
-    this.scaleY.setBackgroundColor(this.opt.bcoler, () => {});
-  } // 添加元素
-
-  addElement() {
-    const boxDom = document.getElementById(this.opt.boxId);
-    boxDom.setAttribute("style", `position: relative; `);
-    const scaleX = createElementId("inl-editor-scale-x", "inl-editor-scale-x");
-    const scaleY = createElementId("inl-editor-scale-y", "inl-editor-scale-y");
-    const scaleCX = createElementId("inl-editor-scale-x-c", this.idx, "canvas");
-    const scaleCY = createElementId("inl-editor-scale-y-c", this.idy, "canvas");
-    scaleX.setAttribute(
-      "style",
-      `height: ${this.opt.height}px; position: absolute;z-index:1; top: 0; left:${this.opt.height}px; right:0; overflow:hidden;`
-    );
-    scaleY.setAttribute(
-      "style",
-      ` width: ${this.opt.width}px; position: absolute;z-index:1; top: ${this.opt.width}px; left: 0; bottom:0; overflow:hidden;`
-    );
-    boxDom.appendChild(scaleX);
-    boxDom.appendChild(scaleY);
-    scaleX.appendChild(scaleCX);
-    scaleY.appendChild(scaleCY);
-  }
-
-  scaleX;
-  scaleY; // 创建刻度元素
-
-  createScaleCanvas() {
-    const scaleX = new fabric.Canvas(this.idx);
-    const scaleY = new fabric.Canvas(this.idy);
-    this.scaleX = scaleX;
-    this.scaleY = scaleY;
-    new windowResize({
-      canvas: scaleX,
-      id: this.idxbx,
-    });
-    new windowResize({
-      canvas: scaleY,
-      id: this.idybx,
-    });
-    this.renderAfter();
-    return {
-      scaleX,
-      scaleY,
-    };
-  } // 渲染刻度
-
-  _renderScale() {
-    const zoom = this.opt.drawCanvas.getZoom();
-    const cheight = this.opt.drawCanvas.getHeight();
-    const cwidth = this.opt.drawCanvas.getWidth();
-    this.opt.drawCanvas.viewportTransform[4];
-    this.opt.drawCanvas.viewportTransform[5];
-    const sl = this.scaleHou * 0.6;
-    const bl = this.scaleHou;
-    const xLength = cwidth * zoom * 0.6;
-    const yLength = cheight * zoom; // 先不做运动计算
-
-    const createLineInfo = (i, isX) => {
-      const rect = [0, 0, 0, 0];
-      const val = i + 1;
-      const strokeWidth = val % 10 === 0 && i !== 0 ? 1 : 1;
-      const opacity = val % 10 === 0 && i !== 0 ? 1 : 1;
-      const text = new fabric.Text(val % 10 === 0 ? val + "" : "");
-      text.fontSize = 8;
-      text.fill = "#354052";
-
-      if (isX) {
-        rect[0] = i * 10;
-        rect[1] = bl;
-        rect[2] = i * 10;
-        rect[3] = val % 10 ? sl : 0;
-        text.set({
-          top: -2,
-          left: rect[0] + 1,
-        });
-      } else {
-        rect[0] = val % 10 ? sl : 0;
-        rect[1] = i * 10;
-        rect[2] = bl;
-        rect[3] = i * 10;
-        text.set({
-          top: rect[3],
-          left: 0,
-        });
-      }
-
-      const line = new fabric.Line(rect, {
-        stroke: "#F2F3F8",
-        strokeWidth,
-        opacity,
-      });
-      line.selectable = false;
-      return {
-        line,
-        text,
-      };
-    }; // x 轴
-
-    for (let i = -xLength; i <= xLength; i++) {
-      const { line, text } = createLineInfo(i, true);
-      this.scaleX.add(line, text);
-    } // y轴
-
-    for (let i = -yLength; i <= yLength; i++) {
-      const { line, text } = createLineInfo(i, false);
-      this.scaleY.add(line, text);
-    }
-
-    this.scaleX.renderAll(); // 绘制网格尺
-  }
-
-  renderScale(cb) {
-    this._renderScale();
-
-    if (cb) {
-      cb();
-    }
-  }
-
-  clear() {
-    this.scaleX.clear();
-    this.scaleY.clear();
-  }
-
-  setVpt(x, y, evt) {
-    this.scaleX.viewportTransform[4] = x;
-    this.scaleY.viewportTransform[5] = y;
-    this.scaleX.renderAll();
-    this.scaleY.renderAll();
-    this.scaleX.lastPosX = evt.clientX;
-    this.scaleY.lastPosY = evt.clientY;
-  }
-
-  move() {}
-}
-
-const updateImg = (canvas, id, src) => {
-  const rect = getObjById(canvas, id);
-  fabric.loadSVGFromURL(
-    src || "/images/device/长皮带_2D_红.svg", // "/api/thing/v1/photo/thing4218B0244E0C4083B88E574F7F038C1E.svg",
-    (objects, options) => {
-      const svg = fabric.util.groupSVGElements(objects);
-      svg.id = rect.id;
-      svg.data = rect.data;
-      svg.top = rect.top;
-      svg.left = rect.left;
-      svg.angle = rect.angle;
-      canvas.remove(rect);
-      canvas.add(svg);
-      canvas.renderAll();
-    }
-  );
-}; // 提供更新块上文字的方法
-
-const updateState = (canvas, id, value, isPropertyName) => {
-  const obj = getObjById(canvas, id);
-
-  if (obj.text.indexOf(":") > -1) {
-    const arr = obj.text.split(":");
-    obj.text = isPropertyName ? `${arr[0]}:` : value;
-  } else {
-    obj.text = value;
-  }
-
-  canvas.renderAll();
-};
-
-class inlTpEditor {
-  constructor(opt) {
-    this.opt = opt;
-    this.config = { ...config, ...opt.config };
-    this.init();
-  }
-
-  elementId = "inl-editor-canvas" + UUID(8);
-  enums = {
-    Alignparam,
-    LineState,
-    Levels,
-  };
-
-  newCanvas() {
-    const canvasDomBox = createElementId(
-      this.elementId + "-box",
-      this.elementId + "-box"
-    );
-    const canvasDm = createElementId(this.elementId, this.elementId, "canvas");
-    const boxDom = document.getElementById(this.opt.boxElement);
-    canvasDomBox.setAttribute(
-      "style",
-      `position: absolute; top: ${this.opt.scaleHd || 15}px; left: ${
-        this.opt.scaleHd || 15
-      }px; right: 0; bottom: 0;z-index:1;`
-    );
-    canvasDomBox.appendChild(canvasDm);
-    boxDom.appendChild(canvasDomBox);
-    this.canvas = new fabric.Canvas(this.elementId, {
-      preserveObjectStacking: true,
-      ...this.opt.fConfig,
-    }); // 根据外部盒子控制 canvas大小
-
-    new windowResize({
-      canvas: this.canvas,
-      id: this.opt.boxElement,
-    });
-  } // 所有包裹元素 刻度尺和canvas
-
-  init() {
-    const opt = this.opt;
-    resetFabric();
-    this.newCanvas();
-    this.id = opt.id || util.UUID();
-
-    if (this.opt.url) {
-      this.loadJsonString(this.opt.url, () => {
-        this.initEditorBackground();
-      });
-    } else {
-      this.canvas.setBackgroundColor(config.canvas.bc, () => {});
-    } // 注册事件
-
-    this.injectEvent(); // 网格
-
-    this.grid = new Grid({
-      boxId: this.opt.boxElement || "",
-      canvas: this.canvas,
-      scaleHd: this.opt.scaleHd || 15,
-    });
-
-    if (!this.opt.isPreview) {
-      // 游标卡尺 刻度尺
-      this.scale = new Scale({
-        boxId: opt.boxElement,
-        drawCanvas: this.canvas,
-        scaleHou: this.opt.scaleHd || 15,
-      });
-    }
-  } // 编辑状态下初始化背景色
-
-  initEditorBackground() {
-    const bc = this.canvas.backgroundColor || config.canvas.bc;
-
-    if (bc) {
-      this.setBackground(bc);
-      this.canvas.setBackgroundColor(config.canvas.bc, () => {});
-      this.canvas.renderAll();
-    }
-  } // 修改背景色
-
-  setBackground(s, cb) {
-    if (this.grid) {
-      this.grid.changeBackground(s, cb);
-    } else {
-      this.canvas.setBackgroundColor(s, () => {
-        cb ? cb() : "";
-      });
-      this.canvas.renderAll();
-    }
-  } // 获取背景色
-
-  getBackground() {
-    if (this.grid) {
-      return this.grid.canvas.backgroundColor;
-    }
-
-    return this.canvas.backgroundColor;
-  } // 显示隐藏grid
-
-  changeGridVisibility() {
-    if (this.grid.renderState) {
-      this.grid.clearGrid();
-    } else {
-      this.grid.resetGrid();
-    }
-  }
-
-  scale;
-  grid; // 设置颜色
-
-  setLineColor(line, color) {
-    line.set("stroke", color);
-    const tri = getObjById(this.canvas, line.data.triangleId);
-    tri?.set("fill", color);
-    this.canvas.renderAll();
-  } // 设置新增状态
-
-  setState(state) {
-    this.state = state;
-
-    if (state === "createLine") {
-      this.canvas.selection = false;
-      this.canvas.getObjects().forEach((item) => {
-        item.selectable = false;
-      });
-
-      if (this.canvas.getActiveObject()) {
-        this.canvas.getActiveObject().lockMovementX = true;
-        this.canvas.getActiveObject().lockMovementY = true;
-      }
-    } else if (state === "") {
-      this.canvas.selection = true;
-      this.canvas.getObjects().map((item) => {
-        if (item.data?.effectType !== "triangle") {
-          item.selectable = true;
-        }
-
-        if (
-          item.data?.effectType !== "line" &&
-          item.data?.effectType !== "triangle"
-        ) {
-          item.lockMovementX = false;
-          item.lockMovementY = false;
-        }
-
-        return item;
-      });
-    }
-  } // 合理化布局
-
-  zoomToFitCanvas() {
-    zoomToFitCanvas(this.canvas);
-  } // 绘制方法
-
-  draw = Draw.bind(this)(); // 更新设备图
-
-  updateImg = updateImg; // 更新设备值
-
-  updateState = updateState; // 居中对齐方法
-
-  align = fabricItemAlign.bind(this); // 设置元素层级
-
-  setLevel = setLevel.bind(this); // 注入方法
-
-  injectEvent() {
-    // 注册事件
-    Event.bind(this)(this.canvas, {
-      boxElement: this.opt.boxElement,
-      isPreview: this.opt.isPreview,
-    });
-  } // 翻转元素方法
-
-  flip = {
-    x: () => {
-      const object = this.canvas.getActiveObject();
-      const state = object.flipX;
-      setInfo(this.canvas, object, {
-        flipX: !state,
-      });
-    },
-    y: () => {
-      const object = this.canvas.getActiveObject();
-      const state = object.flipY;
-      setInfo(this.canvas, object, {
-        flipY: !state,
-      });
-    },
-  }; // to canvas  反序列化
-
-  loadJsonString = loadJsonString.bind(this); // to json 序列化json
-
-  toJson() {
-    if (this.grid) {
-      this.canvas.setBackgroundColor(
-        this.getBackground() || config.canvas.bc,
-        () => {}
-      );
-    }
-
-    const json = JSON.stringify(this.canvas.toJSON());
-    this.canvas.setBackgroundColor(config.canvas.bc, () => {});
-    return json;
-  } // 工具
-
-  util = util; // canvas 转图片
-
-  toImg() {
-    if (this.grid) {
-      this.canvas.setBackgroundColor(
-        this.getBackground() || config.canvas.bc,
-        () => {}
-      );
-    }
-
-    const img = this.canvas.toDataURL({
-      format: "image/png",
-    });
-    this.canvas.setBackgroundColor(config.canvas.bc, () => {});
-    return img;
-  } // 添加元素时触发
-
-  onAddElement(callBack) {
-    this.canvas.on("object:added", (e) => {
-      callBack(e.target);
-    });
-  } // 当某个页面元素被删除时触发
-
-  onElementRemove(callBack) {
-    this.canvas.on("object:removed", (e) => {
-      callBack(e.target);
-    });
-  } // 销毁 全局注销
-
-  destroy() {}
-}
-
-export { LineAnimate, inlTpEditor as default };
-//# sourceMappingURL=index.js.map
+import { fabric } from "fabric";
+import { AlignGuidelines } from "fabric-guideline-plugin";
+
+const UUID = (n = 16) => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0,
+      v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(n);
+  });
+};
+
+/**
+ *
+ * @param fileName string 文件全民
+ * @returns
+ */
+const FileList = ["jpg", "svg", "png"];
+function getExt(fileName) {
+  let splits = fileName.split(".");
+  return splits.pop();
+}
+function getFiles(files) {
+  const useFile = [];
+
+  for (let i in files) {
+    if (!isNaN(i)) {
+      const item = files[i];
+      const fileExt = getExt(item.name);
+      const has = FileList.indexOf(fileExt);
+
+      if (has >= 0) {
+        const url = windowPath(item);
+        useFile.push({
+          url,
+          fileExt,
+          file: item,
+        });
+      }
+    }
+  }
+
+  return useFile;
+}
+/**
+ *
+ * @param file 文件类型File
+ * @returns window url
+ */
+
+function windowPath(file) {
+  let imgPath = "";
+
+  if (window.createObjectURL != undefined) {
+    imgPath = window.createObjectURL(file);
+  } else if (window.URL != undefined) {
+    imgPath = window.URL.createObjectURL(file);
+  } else if (window.webkitURL != undefined) {
+    imgPath = window.webkitURL.createObjectURL(file);
+  }
+
+  return imgPath;
+}
+
+const computedZoomCoord = (x, y, canvas) => {
+  const zoom = canvas.getZoom();
+  let left = x;
+  let top = y;
+
+  if (canvas.viewportTransform) {
+    left = (left - canvas.viewportTransform[4]) / zoom;
+    top = (top - canvas.viewportTransform[5]) / zoom;
+  }
+
+  return {
+    left,
+    top,
+  };
+};
+const computedZoomXY = (e, svg, canvas) => {
+  const userX = e.offsetX - svg.width / 2;
+  const userY = e.offsetY - svg.height / 2;
+  return computedZoomCoord(userX, userY, canvas);
+};
+const getWindowInfo = (domId) => {
+  let height, width, dom;
+
+  if (domId && document.getElementById(domId)) {
+    dom = document.getElementById(domId);
+  }
+
+  return () => {
+    if (dom) {
+      height = dom.clientHeight;
+      width = dom.clientWidth;
+    } else {
+      height = document.body.clientHeight;
+      width = document.body.clientWidth;
+    }
+
+    return {
+      height,
+      width,
+    };
+  };
+};
+const setInfo = (canvas, obj, info) => {
+  obj.set(info);
+  canvas.renderAll();
+};
+const createElementId = (id, className, el) => {
+  const dom = document.createElement(el || "div");
+  dom.id = id;
+  dom.className = className;
+  return dom;
+};
+
+var util = {
+  UUID,
+  computedZoomXY,
+  getWindowInfo,
+  file: {
+    getExt,
+    getFiles,
+  },
+};
+
+const canvasChangeZoom = (canvas) => {
+  canvas.on("mouse:wheel", (opt) => {
+    const delta = opt.e.deltaY; // 滚轮，向上滚一下是 -100，向下滚一下是 100
+
+    let zoom = canvas.getZoom(); // 获取画布当前缩放值
+
+    zoom *= 0.999 ** delta;
+    if (zoom > 20) zoom = 20; // 限制最大缩放级别
+
+    if (zoom < 0.01) zoom = 0.01; // 限制最小缩放级别
+
+    canvas.zoomToPoint(
+      {
+        // 关键点
+        x: opt.e.offsetX,
+        y: opt.e.offsetY,
+      },
+      zoom // 传入修改后的缩放级别
+    );
+  });
+};
+
+const event = {
+  mouseDown(opt, canvas, kk) {
+    let evt = opt.e;
+
+    if (kk === true) {
+      // 是否按住ctrl
+      canvas.isMoveing = true; // isMoveing 是自定义的，开启移动状态
+
+      canvas.lastPosX = evt.clientX; // lastPosX 是自定义的
+
+      canvas.lastPosY = evt.clientY; // lastPosY 是自定义的
+    }
+  },
+
+  mouseMove(opt, canvas) {
+    if (canvas.isMoveing) {
+      let evt = opt.e;
+      let vpt = canvas.viewportTransform; // 聚焦视图的转换
+
+      vpt[4] += evt.clientX - canvas.lastPosX;
+      vpt[5] += evt.clientY - canvas.lastPosY;
+      this.scale.setVpt(vpt[4], vpt[5], opt);
+      canvas.requestRenderAll(); // 重新渲染
+
+      canvas.lastPosX = evt.clientX;
+      canvas.lastPosY = evt.clientY;
+    }
+  },
+
+  mouseUp(opt, canvas) {
+    canvas.setViewportTransform(canvas.viewportTransform); // 设置此画布实例的视口转换
+
+    canvas.isMoveing = false; // 关闭移动状态
+  },
+};
+function canvasMove(canvas) {
+  let flag = false;
+  window.addEventListener("keydown", (e) => {
+    if (e.code === "Space") {
+      flag = true;
+    }
+  });
+  window.addEventListener("keyup", (e) => {
+    flag = false;
+  });
+  canvas.on("mouse:down", (e) => {
+    event.mouseDown(e, canvas, flag);
+  });
+  canvas.on("mouse:move", (e) => {
+    event.mouseMove.bind(this)(e, canvas);
+  });
+  canvas.on("mouse:up", (e) => {
+    event.mouseUp(e, canvas);
+  });
+}
+
+const graphData = {
+  triangle: {
+    effectType: "triangle",
+  },
+  line: {
+    effectType: "line",
+  },
+  shape: {
+    effectType: "shape",
+    outLines: [],
+    inLines: [],
+  },
+  text: {
+    effectType: "text",
+  },
+  default: {
+    isCustomElement: true,
+    effectType: "svg",
+    outLines: [],
+    inLines: [],
+  },
+};
+
+const assign = (object, type) => {
+  const preData = JSON.parse(JSON.stringify(graphData));
+  const data =
+    type && preData[type]
+      ? Object.assign(preData.default, preData[type])
+      : preData.default;
+  return Object.assign(object, {
+    id: UUID(),
+    data,
+  });
+};
+
+var addCustomElement = (canvas, obj, type) => {
+  obj = assign(obj, type);
+  canvas.add(obj);
+  canvas.renderAll();
+  return obj;
+};
+
+// 同步上传img
+
+const LoadImg = (that, canvas, useFile, e) => {
+  const loadFile = new Promise(async (res, rej) => {
+    const url = that.opt.uploadFile?.customFun
+      ? await that.opt.uploadFile?.customFun(useFile.file)
+      : useFile.url;
+    fabric.Image.fromURL(url, (img) => {
+      img.id = util.UUID();
+      const { left, top } = util.computedZoomXY(e, img, canvas);
+      addCustomElement(
+        canvas,
+        img.set({
+          left,
+          top,
+          angle: 0,
+        })
+      );
+      img.crossOrigin = "Anonymous";
+      setTimeout(() => {
+        res(img);
+      }, 10);
+    });
+  });
+  return loadFile;
+}; // 同步上传SVG
+
+const loadSvg = (canvas, useFile, e, callBack) => {
+  const loadFile = new Promise((res, rej) => {
+    const groupSvg = (objects, options) => {
+      const svg = fabric.util.groupSVGElements(objects);
+      const { left, top } = util.computedZoomXY(e, svg, canvas);
+      svg.set({
+        left,
+        top,
+      });
+      addCustomElement(canvas, svg); // 自定义上传svg 参数
+
+      callBack ? callBack(svg) : "";
+      res(svg);
+    };
+
+    fabric.loadSVGFromURL(useFile.url, (objects, options) => {
+      groupSvg(objects);
+    });
+  });
+  return loadFile;
+}; // 同步上传文件
+
+const asyncLoadFile = (that, canvas, useFile, e) => {
+  if (useFile.fileExt === "svg") {
+    return loadSvg(canvas, useFile, e);
+  }
+
+  return LoadImg(that, canvas, useFile, e);
+}; // 上传文件
+
+const LoadFile = (that, canvas, Files, e) => {
+  const { useFile, dropData } = Files;
+  const promiseList = [];
+
+  if (dropData) {
+    const fileExt = getExt(dropData.url);
+    promiseList.push(
+      loadSvg(
+        canvas,
+        {
+          fileExt,
+          url: dropData.url,
+        },
+        e,
+        dropData.callBack
+      )
+    );
+  } else {
+    for (let i of useFile) {
+      promiseList.push(asyncLoadFile(that, canvas, i, e));
+    }
+  }
+
+  return Promise.all(promiseList);
+};
+
+var onDrop = (that, canvas) => {
+  canvas.on("drop", (e) => {
+    const event = e.e;
+    event.preventDefault();
+    const dataTransfer = event.dataTransfer;
+    const files = dataTransfer.files;
+    const useFile = util.file.getFiles(files);
+    const dropData = dataTransfer.getData("dropData");
+    LoadFile(
+      that,
+      canvas,
+      {
+        useFile,
+        dropData: dropData ? JSON.parse(dropData) : null,
+      },
+      event
+    );
+  });
+};
+
+var pointConfig = {
+  pointRadius: 7,
+};
+
+const getObjById = (canvas, id) => {
+  const res = canvas.getObjects().find((ele) => {
+    return ele.id === id;
+  });
+  return res;
+}; // 添加入的锚点
+
+const getInsertIndex = (canvas, line, x, y) => {
+  let index = 0;
+  let distance; // 两点之前直线最短
+
+  for (let i = 0; i <= line.points.length - 2; i++) {
+    const point1 = line.points[i];
+    const point2 = line.points[i + 1];
+    const num =
+      Math.sqrt(Math.pow(x - point1.x, 2) + Math.pow(y - point1.y, 2)) +
+      Math.sqrt(Math.pow(x - point2.x, 2) + Math.pow(y - point2.y, 2)) -
+      Math.sqrt(
+        Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
+      );
+
+    if (!distance || num < distance) {
+      distance = num;
+      index = i;
+    }
+  }
+
+  return index + 1;
+};
+const updateLine = (instance, line) => {
+  instance.canvas.remove(line);
+  const newLine = instance.draw.path({
+    path: line.points,
+    pathOpt: {
+      stroke: line.stroke,
+    },
+  });
+  newLine.id = line.id;
+  newLine.data = line.data;
+  newLine.lockMovementX = true;
+  newLine.lockMovementY = true;
+  return newLine;
+};
+
+let _REMOVEEVENTSTATE = false;
+var remove = (canvas, opt) => {
+  const dom = document.getElementById(opt.boxElement);
+
+  const removeTriOfLine = (obj) => {
+    const triangle = canvas
+      .getObjects()
+      .find((ele) => ele.data.lineId === obj.id);
+    canvas.remove(triangle);
+  };
+
+  const removeRelevance = (obj) => {
+    if (obj.data?.effectType === "line") {
+      removeTriOfLine(obj);
+    }
+
+    if (obj.data?.effectType === "svg") {
+      [...(obj.data.outLines || []), ...(obj.data.inLines || [])]?.forEach(
+        (id) => {
+          const line = getObjById(canvas, id);
+          canvas.remove(line);
+          removeTriOfLine(line);
+        }
+      );
+    }
+  };
+
+  dom.addEventListener("mouseover", () => {
+    _REMOVEEVENTSTATE = true;
+  });
+  dom.addEventListener("mouseout", () => {
+    _REMOVEEVENTSTATE = false;
+  });
+  window.addEventListener("keydown", (e) => {
+    const isToRemove =
+      (e.code === "Backspace" || e.code === "Delete") && _REMOVEEVENTSTATE;
+
+    if (isToRemove) {
+      const activeObjects = canvas.getActiveObjects();
+
+      for (let i of activeObjects) {
+        canvas.remove(i);
+        removeRelevance(i);
+      }
+
+      canvas.renderAll();
+    }
+  });
+};
+
+const getAngle = (a, b) => {
+  let res;
+
+  if (a.x < b.x && a.y > b.y) {
+    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180;
+  } else if (a.x > b.x && a.y > b.y) {
+    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180 + 180;
+  } else if (a.x > b.x && a.y < b.y) {
+    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180 + 180;
+  } else if (a.x < b.x && a.y < b.y) {
+    res = (Math.atan((b.y - a.y) / (a.x - b.x)) / Math.PI) * 180;
+  }
+
+  return res;
+};
+
+const updateTriangle = (canvas, line) => {
+  const oldTri = getObjById(canvas, line.data.triangleId);
+  const tri = getTriangle(line);
+  oldTri.left = tri.left;
+  oldTri.top = tri.top;
+  oldTri.set("fill", line.stroke);
+  oldTri.rotate(tri.angle);
+  oldTri.selectable = false;
+  oldTri.lockMovementX = true;
+  oldTri.lockMovementY = true;
+  canvas.renderAll();
+};
+const getTriangle = (line) => {
+  const begin = line.points[line.points.length - 2];
+  const end = line.points[line.points.length - 1];
+  const angle = (getAngle(begin, end) - 90) * -1;
+  const t = new fabric.Triangle({
+    centeredRotation: true,
+    fill: line.stroke,
+    left: end.x - 7.5,
+    top: end.y - 7.5,
+    hasControls: false,
+    hasBorders: false,
+    lockMovementX: true,
+    lockMovementY: true,
+    selectable: false,
+    width: 15,
+    height: 15,
+  });
+  t.rotate(angle);
+  return t;
+};
+
+const createLine = (instance) => {
+  let tempLine;
+  let beginObj;
+  const canvas = instance.canvas;
+  window.addEventListener("keydown", (e) => {
+    const isShift = e.code === "ShiftLeft" || e.code === "ShiftRight";
+
+    if (isShift) {
+      instance.canvas.keydown = "shift";
+    }
+  });
+  window.addEventListener("keyup", (e) => {
+    instance.canvas.keydown = undefined;
+  });
+  canvas.on("mouse:down:before", (e) => {
+    if (e.target) {
+      beginObj = e.target; // 线编辑状态点块
+
+      if (
+        beginObj &&
+        instance.state === "createLine" &&
+        beginObj.data.effectType !== "line" &&
+        beginObj.data.effectType !== "point"
+      ) {
+        computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+        const beginPoint = beginObj.getCenterPoint();
+        const newLine = new fabric.Path(
+          [
+            ["M", beginPoint.x, beginPoint.y],
+            ["L", beginPoint.x, beginPoint.y],
+          ],
+          {
+            fill: "",
+            stroke: "black",
+            objectCaching: false,
+            strokeWidth: 3,
+            strokeDashArray:
+              canvas.createLineType === "broken" ? [0, 0, 12] : undefined,
+            perPixelTargetFind: true,
+            lockMovementX: true,
+            lockMovementY: true,
+          }
+        );
+        tempLine = newLine;
+        canvas.add(newLine);
+        canvas.renderAll();
+      }
+    } else {
+      beginObj = undefined;
+    }
+  });
+  canvas.on("mouse:move", (e) => {
+    e.target; // 线预览
+
+    if (
+      instance.state === "createLine" &&
+      beginObj &&
+      beginObj.data.effectType !== "line" &&
+      beginObj.data.effectType !== "point"
+    ) {
+      const xy = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+      const path = tempLine.path;
+      path[1][1] = xy.left;
+      path[1][2] = xy.top;
+      canvas.renderAll();
+    }
+  });
+  canvas.on("mouse:up", (e) => {
+    const endObj = e.currentTarget; // 新连线
+
+    if (
+      instance.state === "createLine" &&
+      endObj &&
+      endObj?.data.effectType !== "line" &&
+      endObj?.data.effectType !== "point" &&
+      beginObj &&
+      beginObj?.data.effectType !== "line" &&
+      beginObj?.data.effectType !== "point" &&
+      beginObj !== endObj
+    ) {
+      const beginPoint = beginObj.getCenterPoint();
+      const endPoint = endObj.getCenterPoint();
+      const data = {
+        from: beginObj.id,
+        fromExcursionX: 0,
+        fromExcursionY: 0,
+        to: endObj.id,
+        toExcursionX: 0,
+        toExcursionY: 0,
+      };
+      const line = instance.draw.path({
+        path: [beginPoint, endPoint],
+      });
+      line.data = { ...line.data, ...data }; // 箭头
+
+      const tri = getTriangle(line);
+      const triangle = addCustomElement(instance.canvas, tri, "triangle");
+      line.data.triangleId = triangle.id;
+      triangle.data.lineId = line.id;
+      triangle.data.effectType = "triangle";
+      beginObj.data.outLines.push(line.id);
+      endObj.data.inLines.push(line.id);
+      beginObj = undefined;
+      instance.setState("");
+    }
+
+    if (tempLine) {
+      canvas.remove(tempLine);
+    }
+
+    tempLine = undefined;
+    beginObj = undefined;
+  });
+};
+
+const lineEvent = (instance) => {
+  createLine(instance);
+  let tempLine; // 点下标
+
+  let addPointIndex;
+  let pointIndex;
+  const canvas = instance.canvas; // 都干完刷新一下线
+
+  canvas.on("after:render", (e) => {
+    canvas.getObjects().forEach((obj) => {
+      if (obj.data?.effectType === "line") {
+        if (obj.data?.needUpate) {
+          obj.controls = fabric.Object.prototype.controls;
+          obj.hasControls = false;
+          updateLine(instance, obj);
+          obj.data.needUpate = undefined;
+        }
+      }
+    });
+  });
+  let beginObj;
+  canvas.on("mouse:down:before", (e) => {
+    if (e.target) {
+      beginObj = e.target;
+      const xy = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+      const active = canvas.getActiveObject(); // 点击选中后的线创建折点或者移动折点
+
+      if (
+        beginObj &&
+        beginObj.data?.effectType === "line" &&
+        active?.id === beginObj.id
+      ) {
+        const line = beginObj;
+        line.lockMovementX = true;
+        line.lockMovementY = true;
+        line.points.forEach((p, index) => {
+          if (Math.abs(p.x - xy.left) < 5 && Math.abs(p.y - xy.top) < 5) {
+            pointIndex = index;
+          }
+        }); // 拖动折点
+
+        if (pointIndex !== undefined) {
+          // 首尾折点
+          if (pointIndex !== 0 && pointIndex !== line.points.length - 1) {
+            pointIndex = undefined;
+          }
+
+          return;
+        }
+
+        addPointIndex = getInsertIndex(canvas, line, xy.left, xy.top);
+        line.points.splice(addPointIndex, 0, {
+          x: xy.left,
+          y: xy.top,
+        });
+      }
+    } else {
+      beginObj = undefined;
+    }
+  });
+  canvas.on("mouse:move", (e) => {
+    const obj = e.target;
+    const active = canvas.getActiveObject(); // 创建折点跟随
+
+    if (
+      addPointIndex &&
+      beginObj?.data.effectType === "line" &&
+      active?.id === beginObj.id
+    ) {
+      const line = beginObj;
+      const xy = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+
+      if (instance.canvas.keydown === "shift");
+
+      line.points[addPointIndex].x = xy.left;
+      line.points[addPointIndex].y = xy.top;
+    } // 移动块
+
+    if (
+      instance.state !== "createLine" &&
+      beginObj &&
+      beginObj.data &&
+      beginObj.data?.effectType !== "line" &&
+      beginObj.data?.effectType !== "point"
+    ) {
+      const beginPoint = beginObj.getCenterPoint();
+      beginObj.data.outLines?.forEach((lineId) => {
+        const line = getObjById(canvas, lineId);
+        line.points[0].x = beginPoint.x + line.data.fromExcursionX;
+        line.points[0].y = beginPoint.y + line.data.fromExcursionY;
+        updateTriangle(canvas, line);
+        line.data.needUpate = true;
+      });
+      beginObj.data.inLines?.forEach((lineId) => {
+        const line = getObjById(canvas, lineId);
+        line.points[line.points.length - 1].x =
+          beginPoint.x + line.data.toExcursionX + pointConfig.pointRadius;
+        line.points[line.points.length - 1].y =
+          beginPoint.y + line.data.toExcursionY + pointConfig.pointRadius;
+        updateTriangle(canvas, line);
+        line.data.needUpate = true;
+      });
+    } // 移动点
+
+    if (
+      instance.state !== "createLine" &&
+      beginObj &&
+      beginObj.data?.effectType === "line" &&
+      obj?.data?.effectType === "line"
+    ) {
+      updateTriangle(canvas, beginObj);
+    }
+  });
+  canvas.on("mouse:up", (e) => {
+    e.currentTarget;
+
+    if (canvas.getActiveObjects().length > 1) {
+      canvas.getActiveObject().set("lockMovementX", true);
+      canvas.getActiveObject().set("lockMovementY", true);
+    } // 移动点
+
+    if (pointIndex !== undefined && beginObj?.data.effectType === "line") {
+      const line = beginObj;
+      const point1 = new fabric.Circle({
+        radius: 3,
+        left: line.points[0].x,
+        top: line.points[0].y,
+      });
+      const point2 = new fabric.Circle({
+        radius: 3,
+        left: line.points[line.points.length - 1].x,
+        top: line.points[line.points.length - 1].y,
+      });
+      let newParent;
+      canvas.getObjects().forEach((obj) => {
+        if (obj.data.effectType === "shape" || obj.data.effectType === "svg") {
+          if (
+            obj.intersectsWithObject(point1) &&
+            obj.data.outLines.indexOf(line.id) === -1
+          ) {
+            newParent = {
+              type: "start",
+              obj,
+            };
+          }
+
+          if (
+            obj.intersectsWithObject(point2) &&
+            obj.data.inLines.indexOf(line.id) === -1
+          ) {
+            newParent = {
+              type: "end",
+              obj,
+            };
+          }
+        }
+      }); // 连接到新块
+
+      if (newParent) {
+        const beginPoint = newParent.obj.getCenterPoint();
+
+        if (newParent.type === "start") {
+          const oldRect = getObjById(canvas, line.data.from);
+          oldRect.data.outLines.splice(
+            oldRect.data.outLines.indexOf(line.id),
+            1
+          );
+          line.data.from = newParent.obj.id;
+          line.data.fromExcursionX = 0;
+          line.data.fromExcursionY = 0;
+          line.points[0].x = beginPoint.x;
+          line.points[0].y = beginPoint.y;
+          newParent.obj.data.outLines.push(line.id);
+          line.data.needUpate = true;
+        } else if (newParent.type === "end") {
+          const oldRect = getObjById(canvas, line.data.to);
+          oldRect.data.inLines.splice(oldRect.data.inLines.indexOf(line.id), 1);
+          line.data.to = newParent.obj.id;
+          line.data.toExcursionX = 0;
+          line.data.toExcursionY = 0;
+          line.points[line.points.length - 1].x = beginPoint.x;
+          line.points[line.points.length - 1].y = beginPoint.y;
+          newParent.obj.data.inLines.push(line.id);
+          line.data.needUpate = true;
+        }
+      } else {
+        if (pointIndex === 0) {
+          const rect = getObjById(canvas, line.data.from);
+          const rectPoint = rect.getCenterPoint();
+          line.data.fromExcursionX = e.pointer.x - rectPoint.x;
+          line.data.fromExcursionY = e.pointer.y - rectPoint.y;
+        } else {
+          const rect = getObjById(canvas, line.data.to);
+          const rectPoint = rect.getCenterPoint();
+          line.data.toExcursionX = e.pointer.x - rectPoint.x;
+          line.data.toExcursionY = e.pointer.y - rectPoint.y;
+        }
+      }
+    } // 新点
+
+    if (beginObj?.data?.effectType === "line" && addPointIndex !== undefined) {
+      const line = beginObj;
+      line.data.needUpate = true;
+    }
+
+    if (tempLine) {
+      canvas.remove(tempLine);
+    }
+
+    tempLine = undefined;
+    beginObj = undefined;
+    addPointIndex = undefined;
+    pointIndex = undefined;
+  });
+};
+
+const shapeEvent = (instance) => {
+  const canvas = instance.canvas; // 点下标
+
+  let point;
+  canvas.on("mouse:down:before", (e) => {
+    point = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+  });
+  canvas.on("mouse:up", (e) => {
+    const endPoint = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+
+    if (instance.state !== "createShape") {
+      return;
+    }
+
+    const rect = new fabric.Rect({
+      left: Math.min(point.left, endPoint.left),
+      top: Math.min(point.top, endPoint.top),
+      fill: instance.config.shape.fill,
+      stroke: instance.config.shape.stroke,
+      strokeWidth: 2,
+      width: Math.abs(point.left - endPoint.left),
+      height: Math.abs(point.top - endPoint.top),
+    });
+    addCustomElement(canvas, rect, "shape");
+    instance.setState("");
+  });
+};
+
+const textEvent = (instance) => {
+  const canvas = instance.canvas; // 点下标
+
+  let point;
+  canvas.on("mouse:down:before", (e) => {
+    point = computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+  });
+  canvas.on("mouse:up", (e) => {
+    computedZoomCoord(e.pointer.x, e.pointer.y, canvas);
+
+    if (instance.state !== "createText") {
+      return;
+    }
+
+    var itext = new fabric.IText("我是文本", {
+      left: point.left,
+      top: point.top,
+      editable: false,
+      fill: "#354052",
+      lockScalingX: true,
+      lockScalingY: true,
+      strokeWidth: 0,
+      stroke: "#880E4F",
+    });
+    addCustomElement(canvas, itext, "text");
+    instance.setState("");
+  });
+};
+
+var lockMove = (canvas) => {
+  let shiftKey = false;
+  let altKey = false;
+  canvas.on("mouse:down:before", (e) => {
+    shiftKey = e.e.shiftKey;
+    altKey = e.e.altKey;
+
+    if (shiftKey && altKey && e.target) {
+      // 锁定 Y轴移动
+      e.target.lockMovementX = true;
+    } else if (shiftKey && !altKey && e.target) {
+      // 锁定X轴移动
+      e.target.lockMovementY = true;
+    }
+  });
+  canvas.on("mouse:up:before", (e) => {
+    shiftKey = false;
+    altKey = false;
+
+    if (e.target) {
+      // 解锁 Y轴移动
+      e.target.lockMovementX = false; // 解锁 X轴移动
+
+      e.target.lockMovementY = false;
+    }
+  });
+};
+
+function Event(canvas, opt) {
+  // 拖动上传
+  onDrop(this, canvas); // 缩放
+
+  canvasChangeZoom(canvas); // 画布拖动
+
+  canvasMove.bind(this)(canvas); // 删除方法
+
+  remove(canvas, opt); // 辅助线
+
+  const guideline = new AlignGuidelines({
+    canvas,
+  });
+  guideline.init(); // 线相关事件
+
+  lineEvent(this); // 创建矩形
+
+  shapeEvent(this); // 创建文字
+
+  textEvent(this);
+
+  if (opt && opt.isPreview) {
+    (function render() {
+      canvas.renderAll();
+      fabric.util.requestAnimFrame(render);
+    })();
+  } // cp Event
+  // cp(canvas);
+  // 锁定轴移动块
+
+  lockMove(canvas);
+}
+
+var LineState;
+
+(function (LineState) {
+  LineState["RAW_COAL"] = "#EA5858";
+  LineState["CLEAN_COAL"] = "#22CC83";
+  LineState["PRODUCT"] = "#22CC83";
+  LineState["REJECT"] = "#6554C0";
+  LineState["SLURRY"] = "#A52337";
+  LineState["DILUTE_MEDIUM"] = "#9095A2";
+  LineState["CORRECT_MEDIUM"] = "#354052";
+  LineState["DENSE_MEDIUM"] = "#354052";
+  LineState["MIDDLINGS"] = "#FF9214";
+  LineState["SLIME"] = "#729918";
+  LineState["CLARIFIED_WATER"] = " #1CDDEB";
+  LineState["AIR"] = "#D439D4";
+})(LineState || (LineState = {}));
+
+var line = {
+  fill: "transparent",
+  stroke: "#354052",
+  strokeWidth: 3,
+};
+
+var shape = {
+  fill: "#f9fafb",
+  stroke: "#DCE2ED",
+};
+
+var config = {
+  line,
+  shape,
+  canvas: {
+    bc: "transparent",
+  },
+};
+
+const addControl = (poly) => {
+  var lastControl = poly.points.length - 1;
+  poly.cornerStyle = "circle";
+  poly.cornerColor = "red";
+  poly.controls = poly.points.reduce(function (acc, point, index) {
+    acc["p" + index] = new fabric.Control({
+      positionHandler: polygonPositionHandler,
+      actionHandler: anchorWrapper(
+        index > 0 ? index - 1 : lastControl,
+        actionHandler
+      ),
+      actionName: "modifyPolygon",
+      pointIndex: index,
+    });
+    return acc;
+  }, {});
+}; // 返回控制点
+
+function polygonPositionHandler(dim, finalMatrix, fabricObject) {
+  var x = fabricObject.points[this.pointIndex].x - fabricObject.pathOffset.x,
+    y = fabricObject.points[this.pointIndex].y - fabricObject.pathOffset.y;
+  return fabric.util.transformPoint(
+    {
+      x: x,
+      y: y,
+    },
+    fabric.util.multiplyTransformMatrices(
+      fabricObject.canvas.viewportTransform,
+      fabricObject.calcTransformMatrix()
+    )
+  );
+}
+
+function getObjectSizeWithStroke(object) {
+  var stroke = new fabric.Point(
+    object.strokeUniform ? 1 / object.scaleX : 1,
+    object.strokeUniform ? 1 / object.scaleY : 1
+  ).multiply(object.strokeWidth);
+  return new fabric.Point(object.width + stroke.x, object.height + stroke.y);
+} // define a function that will define what the control does
+// this function will be called on every mouse move after a control has been
+// clicked and is being dragged.
+// The function receive as argument the mouse event, the current trasnform object
+// and the current position in canvas coordinate
+// transform.target is a reference to the current object being transformed,
+
+function actionHandler(eventData, transform, x, y) {
+  var polygon = transform.target,
+    currentControl = polygon.controls[polygon.__corner],
+    mouseLocalPosition = polygon.toLocalPoint(
+      new fabric.Point(x, y),
+      "center",
+      "center"
+    ),
+    polygonBaseSize = getObjectSizeWithStroke(polygon),
+    size = polygon._getTransformedDimensions(0, 0),
+    finalPointPosition = {
+      x:
+        (mouseLocalPosition.x * polygonBaseSize.x) / size.x +
+        polygon.pathOffset.x,
+      y:
+        (mouseLocalPosition.y * polygonBaseSize.y) / size.y +
+        polygon.pathOffset.y,
+    };
+
+  polygon.points[currentControl.pointIndex] = finalPointPosition;
+  return true;
+} // define a function that can keep the polygon in the same position when we change its
+// width/height/top/left.
+
+function anchorWrapper(anchorIndex, fn) {
+  return function (eventData, transform, x, y) {
+    var fabricObject = transform.target,
+      absolutePoint = fabric.util.transformPoint(
+        {
+          x: fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x,
+          y: fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y,
+        },
+        fabricObject.calcTransformMatrix()
+      ),
+      actionPerformed = fn(eventData, transform, x, y);
+    fabricObject._setPositionDimensions({});
+    var polygonBaseSize = getObjectSizeWithStroke(fabricObject),
+      newX =
+        (fabricObject.points[anchorIndex].x - fabricObject.pathOffset.x) /
+        polygonBaseSize.x,
+      newY =
+        (fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y) /
+        polygonBaseSize.y;
+
+    fabricObject.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
+    return actionPerformed;
+  };
+}
+
+const path = function (opt) {
+  if (!opt.pathOpt) {
+    opt.pathOpt = {
+      stroke: config.line.stroke,
+      strokeWidth: config.line.strokeWidth,
+    };
+  } else {
+    if (!opt.pathOpt?.stroke) opt.pathOpt.stroke = config.line.stroke;
+    if (!opt.pathOpt?.strokeWidth)
+      opt.pathOpt.strokeWidth = config.line.strokeWidth;
+  }
+
+  const polyline = new fabric.Polyline(opt.path, {
+    ...opt.pathOpt,
+    fill: "transparent",
+    lockMovementX: true,
+    lockMovementY: true,
+    objectCaching: false,
+    hasBorders: false,
+    perPixelTargetFind: true,
+  });
+  addControl(polyline);
+  return addCustomElement(this.canvas, polyline, "line");
+};
+
+const text = function (opt) {
+  const svg = getObjById(this.canvas, opt.parentId);
+  const newText = new fabric.IText(opt.name, {
+    editable: false,
+    fill: "black",
+    top: svg.top - 30,
+    left: svg.left,
+    lockScalingX: true,
+    lockScalingY: true,
+    ...opt.option,
+  });
+  return addCustomElement(this.canvas, newText, "text");
+};
+
+function Draw() {
+  return {
+    path: path.bind(this),
+    text: text.bind(this),
+  };
+}
+
+/**
+ * 线段动画 需优化obo运动
+ */
+
+class LineAnimate {
+  constructor(opt, canvas) {
+    this.lineAnimateList = opt;
+    this.canvas = canvas;
+  }
+
+  canvas;
+  lineAnimateList;
+
+  oboRun(speed) {}
+
+  oboStop(speed) {}
+
+  start(item) {
+    let index = 0;
+
+    this.canvas._onObjectRemoved = (e) => {
+      if (item.object === e) item.cycle = false;
+    };
+
+    item.object.set("stroke", LineState[item.state] || "black");
+
+    const run = () => {
+      const speed = item.speed || 1;
+
+      if (item.direction === "negative") {
+        index = speed;
+      } else {
+        index -= speed;
+      }
+
+      item.object.animate(
+        {
+          strokeDashOffset: index,
+        },
+        {
+          duration: 60,
+          onComplete: () => {
+            if (item.cycle) {
+              run();
+            }
+          },
+          easing: (t, b, c, d) => {
+            return (c * t) / d + b;
+          },
+        }
+      );
+    };
+
+    run();
+  } // 添加动画
+
+  addLineAnimate(item) {
+    this.lineAnimateList.push(item);
+    this.start(item);
+  } // 启动所有动画
+
+  startAll() {
+    for (let i of this.lineAnimateList) {
+      this.start(i);
+    }
+  } // 关闭所有动画
+
+  stopAll() {
+    for (let i of this.lineAnimateList) {
+      i.cycle = false;
+    }
+
+    this.lineAnimateList = [];
+  } // 关闭某个动画
+
+  stop(item) {
+    item.cycle = false;
+
+    for (let i = 0; i < this.lineAnimateList.length; i++) {
+      if (this.lineAnimateList[i].object === item.object) {
+        this.lineAnimateList.splice(1, i);
+      }
+    }
+  }
+}
+
+var Alignparam;
+
+(function (Alignparam) {
+  Alignparam[(Alignparam["top"] = 0)] = "top";
+  Alignparam[(Alignparam["left"] = 1)] = "left";
+  Alignparam[(Alignparam["right"] = 2)] = "right";
+  Alignparam[(Alignparam["bottom"] = 3)] = "bottom";
+  Alignparam[(Alignparam["horizontal_center"] = 4)] = "horizontal_center";
+  Alignparam[(Alignparam["vertical_center"] = 5)] = "vertical_center";
+  Alignparam[(Alignparam["horizontal_distribution"] = 6)] =
+    "horizontal_distribution";
+  Alignparam[(Alignparam["vertical_distribution"] = 7)] =
+    "vertical_distribution";
+})(Alignparam || (Alignparam = {}));
+
+var Levels;
+
+(function (Levels) {
+  Levels["top"] = "bringToFront";
+  Levels["bottom"] = "sendToBack";
+  Levels["before"] = "bringForward";
+  Levels["after"] = "sendBackwards";
+})(Levels || (Levels = {}));
+
+/**
+ *
+ * @param canvas canvas
+ * @param alignparam 对齐方向
+ */
+const fabricItemAlign = function (alignparam) {
+  const canvas = this.canvas;
+  const canvasObjectsGrop = canvas.getActiveObject();
+
+  const getProperty = (cGrop = canvasObjectsGrop) => {
+    return {
+      gropObjs: cGrop._objects ?? [],
+      gropWidth: cGrop.width ?? 0,
+      gropHeight: cGrop.height ?? 0,
+    };
+  };
+
+  if (canvas.getActiveObjects().length <= 1) return;
+  const { gropObjs, gropWidth, gropHeight } = getProperty();
+
+  if (alignparam === 0) {
+    // 顶对齐
+    gropObjs.forEach((item) => {
+      // 顶对齐算法：top为零表示 依据选中框顶部对齐， left 为 选中点每一项的
+      item.set({
+        top: 0 - gropHeight * 0.5,
+      });
+    });
+  } // 左对齐
+
+  if (alignparam === 1) {
+    gropObjs.forEach((item) => {
+      item.set({
+        left: 0 - gropWidth * 0.5,
+      });
+    });
+  } // 右对齐
+
+  if (alignparam === 2) {
+    gropObjs.forEach((item) => {
+      item.set({
+        left: gropWidth - (item.width ?? 0) * item.scaleX - gropWidth * 0.5,
+      });
+    });
+  } // 底对齐
+
+  if (alignparam === 3) {
+    gropObjs.forEach((item) => {
+      item.set({
+        top: gropHeight - (item.height ?? 0) * item.scaleY - gropHeight * 0.5,
+      });
+    });
+  } // 水平居中对齐
+
+  if (alignparam === 4) {
+    gropObjs.forEach((item) => {
+      item.set({
+        top: 0 - (item.height ?? 0) * item.scaleY * 0.5,
+      });
+    });
+  } // 垂直居中对齐
+
+  if (alignparam === 5) {
+    gropObjs.forEach((item) => {
+      item.set({
+        left: 0 - (item.width ?? 0) * item.scaleX * 0.5,
+      });
+    });
+  } // 水平分布对齐
+
+  if (alignparam === 6) {
+    let groupWidth = gropWidth;
+    gropObjs.forEach((item) => {
+      groupWidth -= (item.width ?? 0) * item.scaleX;
+    });
+    const gap = groupWidth / (gropObjs.length - 1 || 1);
+    gropObjs.forEach((item, idx) => {
+      if (idx > 0) {
+        item.set({
+          left:
+            (gropObjs[idx - 1].left ?? 0) +
+            (gropObjs[idx - 1].width ?? 0) * gropObjs[idx - 1].scaleX +
+            gap,
+        });
+      } else {
+        item.set({
+          left: 0 - gropWidth / 2,
+        });
+      }
+    });
+  } // 垂直分布对齐
+
+  if (alignparam === 7) {
+    let groupHeight = gropHeight;
+    gropObjs.forEach((item) => {
+      groupHeight -= (item.height ?? 0) * item.scaleY;
+    });
+    const gap = groupHeight / (gropObjs.length - 1 || 1);
+    gropObjs.forEach((item, idx) => {
+      if (idx > 0) {
+        item.set({
+          top:
+            (gropObjs[idx - 1].top ?? 0) +
+            (gropObjs[idx - 1].height ?? 0) * gropObjs[idx - 1].scaleY +
+            gap,
+        });
+      } else {
+        item.set({
+          top: 0 - gropHeight / 2,
+        });
+      }
+    });
+  } // 其他对齐规则拓展 ......
+
+  canvas.renderAll(); // 重新渲染
+};
+
+const setLevel = function (idOrEle, level) {
+  const canvas = this.canvas;
+  const obj =
+    typeof idOrEle === "string" ? getObjById(canvas, idOrEle) : idOrEle;
+  const fun = Levels[level];
+
+  if (obj) {
+    obj[fun]();
+  }
+
+  canvas.renderAll(); // 重新渲染
+
+  return obj;
+};
+
+function zoomToFitCanvas(canvas) {
+  //遍历所有对对象，获取最小坐标，最大坐标
+  const objects = canvas.getObjects();
+  let rect = objects[0].getBoundingRect();
+  let minX = rect.left;
+  let minY = rect.top;
+  let maxX = rect.left + rect.width;
+  let maxY = rect.top + rect.height;
+
+  if (objects.length > 0) {
+    for (let i = 1; i < objects.length; i++) {
+      rect = objects[i].getBoundingRect();
+      minX = Math.min(minX, rect.left);
+      minY = Math.min(minY, rect.top);
+      maxX = Math.max(maxX, rect.left + rect.width);
+      maxY = Math.max(maxY, rect.top + rect.height);
+    }
+  } //计算平移坐标
+
+  const panX = (maxX - minX - canvas.width) / 2 + minX;
+  const panY = (maxY - minY - canvas.height) / 2 + minY;
+  const { left, top } = computedZoomCoord(panX, panY, canvas); //开始平移
+
+  canvas.absolutePan({
+    x: left,
+    y: top,
+  }); //计算缩放比例
+
+  const zoom = Math.min(
+    canvas.width / (maxX - minX),
+    canvas.height / (maxY - minY)
+  ); //计算缩放中心
+
+  const zoomPoint = new fabric.Point(canvas.width / 2, canvas.height / 2); //开始缩放
+
+  canvas.zoomToPoint(zoomPoint, zoom * 0.8);
+}
+
+class windowResize {
+  constructor(opt) {
+    this.opt = opt;
+    this.canvas = opt.canvas;
+    this.domInfo = getWindowInfo(opt.id);
+    this.init();
+    this.watchDivChange();
+  }
+
+  opt;
+
+  watchDivChange() {
+    const dom = document.getElementById(this.opt.id);
+    let tm;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (tm) clearTimeout(tm);
+      tm = setTimeout(() => {
+        this.todo();
+      }, 100);
+    });
+    resizeObserver.observe(dom);
+  }
+
+  init() {
+    const { width, height } = this.domInfo();
+    this.canvas.setWidth(width);
+    this.canvas.setHeight(height);
+  }
+
+  todo(cb) {
+    this.init();
+    const callBack = this.opt.cb || cb;
+    const { width, height } = this.domInfo();
+    callBack ? callBack(width, height, this.canvas) : "";
+  }
+
+  canvas;
+  domInfo;
+}
+
+function renderGrid(canvas) {
+  const width = canvas.width;
+  const height = canvas.height;
+  let line;
+  let rect = [];
+  let size = 20;
+
+  for (let i = 0; i < Math.ceil(width / 20); ++i) {
+    rect[0] = i * size;
+    rect[1] = 0;
+    rect[2] = i * size;
+    rect[3] = height;
+    line = null;
+    line = new fabric.Line(rect, {
+      stroke: "#999",
+      opacity: 0.5,
+    });
+    line.rowName = "grid";
+    line.selectable = false;
+    canvas.add(line);
+    line.sendToBack();
+  }
+
+  for (let i = 0; i < Math.ceil(height / 20); ++i) {
+    rect[0] = 0;
+    rect[1] = i * size;
+    rect[2] = width;
+    rect[3] = i * size;
+    line = null;
+    line = new fabric.Line(rect, {
+      stroke: "#999",
+      opacity: 0.5,
+    });
+    line.rowName = "grid";
+    line.selectable = false;
+    canvas.add(line);
+    line.sendToBack();
+  }
+
+  canvas.renderAll();
+}
+
+class Grid {
+  constructor(opt) {
+    this.opt = opt;
+    this.init();
+  }
+
+  idName = "inl-tp-editor-grid";
+  idBoxName = "inl-tp-editor-grid-box";
+  renderState = false;
+
+  init() {
+    this.resetOpt();
+    this.addElement();
+  }
+
+  renderGrid() {
+    renderGrid(this.canvas);
+  }
+
+  clearGrid() {
+    for (let i of this.canvas.getObjects()) {
+      if (i.rowName === "grid") {
+        this.canvas.remove(i);
+      }
+    }
+
+    this.renderState = false;
+  }
+
+  changeBackground(s, cb) {
+    this.canvas.setBackgroundColor(s, () => {
+      cb ? cb() : "";
+      this.canvas.renderAll();
+    });
+  }
+
+  resetGrid() {
+    this.clearGrid();
+    this.renderGrid();
+    this.renderState = true;
+  }
+
+  resetOpt() {}
+
+  addElement() {
+    const boxDom = document.getElementById(this.opt.boxId);
+    const GridCanvasDom = createElementId(this.idName, this.idName, "canvas");
+    const GridCanvasBoxDom = createElementId(this.idBoxName, this.idBoxName);
+    GridCanvasBoxDom.appendChild(GridCanvasDom);
+    GridCanvasBoxDom.setAttribute(
+      "style",
+      `position:absolute; top: ${this.opt.scaleHd}px; left: ${this.opt.scaleHd}px; right: 0; bottom: 0; z-index: 0;`
+    );
+    boxDom.appendChild(GridCanvasBoxDom);
+    this.canvas = new fabric.Canvas(this.idName);
+    new windowResize({
+      canvas: this.canvas,
+      id: this.idBoxName,
+      cb: () => {
+        if (this.renderState) {
+          this.resetGrid();
+        }
+      },
+    });
+  }
+}
+
+const mtipSvgCustomData = function () {
+  return {
+    data: this.data || {},
+    id: this.id,
+  };
+};
+
+const resetFabric = () => {
+  const newList = [
+    "Line",
+    "Polyline",
+    "Triangle",
+    "Group",
+    "Rect",
+    "Point",
+    "Path",
+    "Circle",
+    "Textbox",
+    "Image",
+    "Text",
+    "IText",
+  ];
+
+  for (let i of newList) {
+    fabric[i].prototype["toObject"] = (function (toObject) {
+      return function () {
+        return fabric.util.object.extend(
+          toObject.call(this),
+          mtipSvgCustomData.call(this)
+        );
+      };
+    })(fabric[i].prototype["toObject"]);
+  }
+};
+
+function loadJsonString(s, cb) {
+  this.canvas.clear(); // 简单辨型
+
+  const loadData = typeof s === "string" ? JSON.parse(s) : s;
+  this.canvas.loadFromJSON(loadData, (objeats) => {
+    this.canvas._objects.forEach((item, key) => {
+      if (this.opt.isPreview) {
+        item.selectable = false;
+        const isLine = item.data && item.data.effectType === "";
+        const triangle = item.data && item.data.effectType === "";
+
+        if (isLine && triangle) {
+          this.setLevel(item, Levels.top);
+        }
+      } else {
+        if (item.data.effectType === "line") {
+          updateLine(this, item);
+        }
+      }
+    });
+
+    cb ? cb() : "";
+  });
+}
+
+class Scale {
+  constructor(opt) {
+    this.resetOpt(opt);
+    this.init();
+  }
+
+  idxbx = "inl-editor-scale-x";
+  idybx = "inl-editor-scale-y";
+  idx = "inl-editor-scale-x-c";
+  idy = "inl-editor-scale-y-c"; // 标尺厚度
+
+  scaleHou = 15;
+
+  init() {
+    this.addElement();
+    this.createScaleCanvas();
+
+    this._renderScale();
+  }
+
+  resetOpt(opt) {
+    this.scaleHou = opt.scaleHou || 15;
+    const useOpt = Object.assign(
+      {},
+      {
+        width: this.scaleHou,
+        height: this.scaleHou,
+        bcoler: "#fff",
+      },
+      opt
+    );
+    this.opt = useOpt;
+  }
+
+  renderAfter() {
+    this.scaleX.setBackgroundColor(this.opt.bcoler, () => {});
+    this.scaleY.setBackgroundColor(this.opt.bcoler, () => {});
+  } // 添加元素
+
+  addElement() {
+    const boxDom = document.getElementById(this.opt.boxId);
+    boxDom.setAttribute("style", `position: relative; `);
+    const scaleX = createElementId("inl-editor-scale-x", "inl-editor-scale-x");
+    const scaleY = createElementId("inl-editor-scale-y", "inl-editor-scale-y");
+    const scaleCX = createElementId("inl-editor-scale-x-c", this.idx, "canvas");
+    const scaleCY = createElementId("inl-editor-scale-y-c", this.idy, "canvas");
+    scaleX.setAttribute(
+      "style",
+      `height: ${this.opt.height}px; position: absolute;z-index:1; top: 0; left:${this.opt.height}px; right:0; overflow:hidden;`
+    );
+    scaleY.setAttribute(
+      "style",
+      ` width: ${this.opt.width}px; position: absolute;z-index:1; top: ${this.opt.width}px; left: 0; bottom:0; overflow:hidden;`
+    );
+    boxDom.appendChild(scaleX);
+    boxDom.appendChild(scaleY);
+    scaleX.appendChild(scaleCX);
+    scaleY.appendChild(scaleCY);
+  }
+
+  scaleX;
+  scaleY; // 创建刻度元素
+
+  createScaleCanvas() {
+    const scaleX = new fabric.Canvas(this.idx);
+    const scaleY = new fabric.Canvas(this.idy);
+    this.scaleX = scaleX;
+    this.scaleY = scaleY;
+    new windowResize({
+      canvas: scaleX,
+      id: this.idxbx,
+    });
+    new windowResize({
+      canvas: scaleY,
+      id: this.idybx,
+    });
+    this.renderAfter();
+    return {
+      scaleX,
+      scaleY,
+    };
+  } // 渲染刻度
+
+  _renderScale() {
+    const zoom = this.opt.drawCanvas.getZoom();
+    const cheight = this.opt.drawCanvas.getHeight();
+    const cwidth = this.opt.drawCanvas.getWidth();
+    this.opt.drawCanvas.viewportTransform[4];
+    this.opt.drawCanvas.viewportTransform[5];
+    const sl = this.scaleHou * 0.6;
+    const bl = this.scaleHou;
+    const xLength = cwidth * zoom * 0.6;
+    const yLength = cheight * zoom; // 先不做运动计算
+
+    const createLineInfo = (i, isX) => {
+      const rect = [0, 0, 0, 0];
+      const val = i + 1;
+      const strokeWidth = val % 10 === 0 && i !== 0 ? 1 : 1;
+      const opacity = val % 10 === 0 && i !== 0 ? 1 : 1;
+      const text = new fabric.Text(val % 10 === 0 ? val + "" : "");
+      text.fontSize = 8;
+      text.fill = "#354052";
+
+      if (isX) {
+        rect[0] = i * 10;
+        rect[1] = bl;
+        rect[2] = i * 10;
+        rect[3] = val % 10 ? sl : 0;
+        text.set({
+          top: -2,
+          left: rect[0] + 1,
+        });
+      } else {
+        rect[0] = val % 10 ? sl : 0;
+        rect[1] = i * 10;
+        rect[2] = bl;
+        rect[3] = i * 10;
+        text.set({
+          top: rect[3],
+          left: 0,
+        });
+      }
+
+      const line = new fabric.Line(rect, {
+        stroke: "#F2F3F8",
+        strokeWidth,
+        opacity,
+      });
+      line.selectable = false;
+      return {
+        line,
+        text,
+      };
+    }; // x 轴
+
+    for (let i = -xLength; i <= xLength; i++) {
+      const { line, text } = createLineInfo(i, true);
+      this.scaleX.add(line, text);
+    } // y轴
+
+    for (let i = -yLength; i <= yLength; i++) {
+      const { line, text } = createLineInfo(i, false);
+      this.scaleY.add(line, text);
+    }
+
+    this.scaleX.renderAll(); // 绘制网格尺
+  }
+
+  renderScale(cb) {
+    this._renderScale();
+
+    if (cb) {
+      cb();
+    }
+  }
+
+  clear() {
+    this.scaleX.clear();
+    this.scaleY.clear();
+  }
+
+  setVpt(x, y, evt) {
+    this.scaleX.viewportTransform[4] = x;
+    this.scaleY.viewportTransform[5] = y;
+    this.scaleX.renderAll();
+    this.scaleY.renderAll();
+    this.scaleX.lastPosX = evt.clientX;
+    this.scaleY.lastPosY = evt.clientY;
+  }
+
+  move() {}
+}
+
+const updateImg = (canvas, id, src) => {
+  const rect = getObjById(canvas, id);
+  fabric.loadSVGFromURL(
+    src || "/images/device/长皮带_2D_红.svg", // "/api/thing/v1/photo/thing4218B0244E0C4083B88E574F7F038C1E.svg",
+    (objects, options) => {
+      const svg = fabric.util.groupSVGElements(objects);
+      svg.id = rect.id;
+      svg.data = rect.data;
+      svg.top = rect.top;
+      svg.left = rect.left;
+      svg.angle = rect.angle;
+      canvas.remove(rect);
+      canvas.add(svg);
+      canvas.renderAll();
+    }
+  );
+}; // 提供更新块上文字的方法
+
+const updateState = (canvas, id, value, isPropertyName) => {
+  const obj = getObjById(canvas, id);
+
+  if (obj.text.indexOf(":") > -1) {
+    const arr = obj.text.split(":");
+    obj.text = isPropertyName ? `${arr[0]}:` : value;
+  } else {
+    obj.text = value;
+  }
+
+  canvas.renderAll();
+};
+
+class inlTpEditor {
+  constructor(opt) {
+    this.opt = opt;
+    this.config = { ...config, ...opt.config };
+    this.init();
+  }
+
+  elementId = "inl-editor-canvas" + UUID(8);
+  enums = {
+    Alignparam,
+    LineState,
+    Levels,
+  };
+
+  newCanvas() {
+    const canvasDomBox = createElementId(
+      this.elementId + "-box",
+      this.elementId + "-box"
+    );
+    const canvasDm = createElementId(this.elementId, this.elementId, "canvas");
+    const boxDom = document.getElementById(this.opt.boxElement);
+    canvasDomBox.setAttribute(
+      "style",
+      `position: absolute; top: ${this.opt.scaleHd || 15}px; left: ${
+        this.opt.scaleHd || 15
+      }px; right: 0; bottom: 0;z-index:1;`
+    );
+    canvasDomBox.appendChild(canvasDm);
+    boxDom.appendChild(canvasDomBox);
+    this.canvas = new fabric.Canvas(this.elementId, {
+      preserveObjectStacking: true,
+      ...this.opt.fConfig,
+    }); // 根据外部盒子控制 canvas大小
+
+    new windowResize({
+      canvas: this.canvas,
+      id: this.opt.boxElement,
+    });
+  } // 所有包裹元素 刻度尺和canvas
+
+  init() {
+    const opt = this.opt;
+    resetFabric();
+    this.newCanvas();
+    this.id = opt.id || util.UUID();
+
+    if (this.opt.url) {
+      this.loadJsonString(this.opt.url, () => {
+        this.initEditorBackground();
+      });
+    } else {
+      this.canvas.setBackgroundColor(config.canvas.bc, () => {});
+    } // 注册事件
+
+    this.injectEvent(); // 网格
+
+    this.grid = new Grid({
+      boxId: this.opt.boxElement || "",
+      canvas: this.canvas,
+      scaleHd: this.opt.scaleHd || 15,
+    });
+
+    if (!this.opt.isPreview) {
+      // 游标卡尺 刻度尺
+      this.scale = new Scale({
+        boxId: opt.boxElement,
+        drawCanvas: this.canvas,
+        scaleHou: this.opt.scaleHd || 15,
+      });
+    }
+  } // 编辑状态下初始化背景色
+
+  initEditorBackground() {
+    const bc = this.canvas.backgroundColor || config.canvas.bc;
+
+    if (bc) {
+      this.setBackground(bc);
+      this.canvas.setBackgroundColor(config.canvas.bc, () => {});
+      this.canvas.renderAll();
+    }
+  } // 修改背景色
+
+  setBackground(s, cb) {
+    if (this.grid) {
+      this.grid.changeBackground(s, cb);
+    } else {
+      this.canvas.setBackgroundColor(s, () => {
+        cb ? cb() : "";
+      });
+      this.canvas.renderAll();
+    }
+  } // 获取背景色
+
+  getBackground() {
+    if (this.grid) {
+      return this.grid.canvas.backgroundColor;
+    }
+
+    return this.canvas.backgroundColor;
+  } // 显示隐藏grid
+
+  changeGridVisibility() {
+    if (this.grid.renderState) {
+      this.grid.clearGrid();
+    } else {
+      this.grid.resetGrid();
+    }
+  }
+
+  scale;
+  grid; // 设置颜色
+
+  setLineColor(line, color) {
+    line.set("stroke", color);
+    const tri = getObjById(this.canvas, line.data.triangleId);
+    tri?.set("fill", color);
+    this.canvas.renderAll();
+  } // 设置新增状态
+
+  setState(state) {
+    this.state = state;
+
+    if (state === "createLine") {
+      this.canvas.selection = false;
+      this.canvas.getObjects().forEach((item) => {
+        item.selectable = false;
+      });
+
+      if (this.canvas.getActiveObject()) {
+        this.canvas.getActiveObject().lockMovementX = true;
+        this.canvas.getActiveObject().lockMovementY = true;
+      }
+    } else if (state === "") {
+      this.canvas.selection = true;
+      this.canvas.getObjects().map((item) => {
+        if (item.data?.effectType !== "triangle") {
+          item.selectable = true;
+        }
+
+        if (
+          item.data?.effectType !== "line" &&
+          item.data?.effectType !== "triangle"
+        ) {
+          item.lockMovementX = false;
+          item.lockMovementY = false;
+        }
+
+        return item;
+      });
+    }
+  } // 合理化布局
+
+  zoomToFitCanvas() {
+    zoomToFitCanvas(this.canvas);
+  } // 绘制方法
+
+  draw = Draw.bind(this)(); // 更新设备图
+
+  updateImg = updateImg; // 更新设备值
+
+  updateState = updateState; // 居中对齐方法
+
+  align = fabricItemAlign.bind(this); // 设置元素层级
+
+  setLevel = setLevel.bind(this); // 注入方法
+
+  injectEvent() {
+    // 注册事件
+    Event.bind(this)(this.canvas, {
+      boxElement: this.opt.boxElement,
+      isPreview: this.opt.isPreview,
+    });
+  } // 翻转元素方法
+
+  flip = {
+    x: () => {
+      const object = this.canvas.getActiveObject();
+      const state = object.flipX;
+      setInfo(this.canvas, object, {
+        flipX: !state,
+      });
+    },
+    y: () => {
+      const object = this.canvas.getActiveObject();
+      const state = object.flipY;
+      setInfo(this.canvas, object, {
+        flipY: !state,
+      });
+    },
+  }; // to canvas  反序列化
+
+  loadJsonString = loadJsonString.bind(this); // to json 序列化json
+
+  toJson() {
+    if (this.grid) {
+      this.canvas.setBackgroundColor(
+        this.getBackground() || config.canvas.bc,
+        () => {}
+      );
+    }
+
+    const json = JSON.stringify(this.canvas.toJSON());
+    this.canvas.setBackgroundColor(config.canvas.bc, () => {});
+    return json;
+  } // 工具
+
+  util = util; // canvas 转图片
+
+  toImg() {
+    if (this.grid) {
+      this.canvas.setBackgroundColor(
+        this.getBackground() || config.canvas.bc,
+        () => {}
+      );
+    }
+
+    const img = this.canvas.toDataURL({
+      format: "image/png",
+    });
+    this.canvas.setBackgroundColor(config.canvas.bc, () => {});
+    return img;
+  } // 添加元素时触发
+
+  onAddElement(callBack) {
+    this.canvas.on("object:added", (e) => {
+      callBack(e.target);
+    });
+  } // 当某个页面元素被删除时触发
+
+  onElementRemove(callBack) {
+    this.canvas.on("object:removed", (e) => {
+      callBack(e.target);
+    });
+  } // 销毁 全局注销
+
+  destroy() {}
+}
+
+export { LineAnimate, inlTpEditor as default };
+//# sourceMappingURL=index.js.map