tiny_whiteboard-main/tiny-whiteboard/dist/tiny-whiteboard.es.js

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
var eventemitter3 = { exports: {} };
(function(module) {
  var has = Object.prototype.hasOwnProperty, prefix = "~";
  function Events() {
  }
  if (Object.create) {
    Events.prototype = /* @__PURE__ */ Object.create(null);
    if (!new Events().__proto__)
      prefix = false;
  }
  function EE(fn, context, once) {
    this.fn = fn;
    this.context = context;
    this.once = once || false;
  }
  function addListener(emitter, event, fn, context, once) {
    if (typeof fn !== "function") {
      throw new TypeError("The listener must be a function");
    }
    var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
    if (!emitter._events[evt])
      emitter._events[evt] = listener, emitter._eventsCount++;
    else if (!emitter._events[evt].fn)
      emitter._events[evt].push(listener);
    else
      emitter._events[evt] = [emitter._events[evt], listener];
    return emitter;
  }
  function clearEvent(emitter, evt) {
    if (--emitter._eventsCount === 0)
      emitter._events = new Events();
    else
      delete emitter._events[evt];
  }
  function EventEmitter2() {
    this._events = new Events();
    this._eventsCount = 0;
  }
  EventEmitter2.prototype.eventNames = function eventNames() {
    var names = [], events, name;
    if (this._eventsCount === 0)
      return names;
    for (name in events = this._events) {
      if (has.call(events, name))
        names.push(prefix ? name.slice(1) : name);
    }
    if (Object.getOwnPropertySymbols) {
      return names.concat(Object.getOwnPropertySymbols(events));
    }
    return names;
  };
  EventEmitter2.prototype.listeners = function listeners(event) {
    var evt = prefix ? prefix + event : event, handlers = this._events[evt];
    if (!handlers)
      return [];
    if (handlers.fn)
      return [handlers.fn];
    for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
      ee[i] = handlers[i].fn;
    }
    return ee;
  };
  EventEmitter2.prototype.listenerCount = function listenerCount(event) {
    var evt = prefix ? prefix + event : event, listeners = this._events[evt];
    if (!listeners)
      return 0;
    if (listeners.fn)
      return 1;
    return listeners.length;
  };
  EventEmitter2.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
    var evt = prefix ? prefix + event : event;
    if (!this._events[evt])
      return false;
    var listeners = this._events[evt], len = arguments.length, args, i;
    if (listeners.fn) {
      if (listeners.once)
        this.removeListener(event, listeners.fn, void 0, true);
      switch (len) {
        case 1:
          return listeners.fn.call(listeners.context), true;
        case 2:
          return listeners.fn.call(listeners.context, a1), true;
        case 3:
          return listeners.fn.call(listeners.context, a1, a2), true;
        case 4:
          return listeners.fn.call(listeners.context, a1, a2, a3), true;
        case 5:
          return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
        case 6:
          return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
      }
      for (i = 1, args = new Array(len - 1); i < len; i++) {
        args[i - 1] = arguments[i];
      }
      listeners.fn.apply(listeners.context, args);
    } else {
      var length = listeners.length, j;
      for (i = 0; i < length; i++) {
        if (listeners[i].once)
          this.removeListener(event, listeners[i].fn, void 0, true);
        switch (len) {
          case 1:
            listeners[i].fn.call(listeners[i].context);
            break;
          case 2:
            listeners[i].fn.call(listeners[i].context, a1);
            break;
          case 3:
            listeners[i].fn.call(listeners[i].context, a1, a2);
            break;
          case 4:
            listeners[i].fn.call(listeners[i].context, a1, a2, a3);
            break;
          default:
            if (!args)
              for (j = 1, args = new Array(len - 1); j < len; j++) {
                args[j - 1] = arguments[j];
              }
            listeners[i].fn.apply(listeners[i].context, args);
        }
      }
    }
    return true;
  };
  EventEmitter2.prototype.on = function on(event, fn, context) {
    return addListener(this, event, fn, context, false);
  };
  EventEmitter2.prototype.once = function once(event, fn, context) {
    return addListener(this, event, fn, context, true);
  };
  EventEmitter2.prototype.removeListener = function removeListener(event, fn, context, once) {
    var evt = prefix ? prefix + event : event;
    if (!this._events[evt])
      return this;
    if (!fn) {
      clearEvent(this, evt);
      return this;
    }
    var listeners = this._events[evt];
    if (listeners.fn) {
      if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
        clearEvent(this, evt);
      }
    } else {
      for (var i = 0, events = [], length = listeners.length; i < length; i++) {
        if (listeners[i].fn !== fn || once && !listeners[i].once || context && listeners[i].context !== context) {
          events.push(listeners[i]);
        }
      }
      if (events.length)
        this._events[evt] = events.length === 1 ? events[0] : events;
      else
        clearEvent(this, evt);
    }
    return this;
  };
  EventEmitter2.prototype.removeAllListeners = function removeAllListeners(event) {
    var evt;
    if (event) {
      evt = prefix ? prefix + event : event;
      if (this._events[evt])
        clearEvent(this, evt);
    } else {
      this._events = new Events();
      this._eventsCount = 0;
    }
    return this;
  };
  EventEmitter2.prototype.off = EventEmitter2.prototype.removeListener;
  EventEmitter2.prototype.addListener = EventEmitter2.prototype.on;
  EventEmitter2.prefixed = prefix;
  EventEmitter2.EventEmitter = EventEmitter2;
  {
    module.exports = EventEmitter2;
  }
})(eventemitter3);
var EventEmitter = eventemitter3.exports;
const createCanvas = (width, height, opt = { noStyle: false, noTranslate: false, className: "" }) => {
  let canvas = document.createElement("canvas");
  if (!opt.noStyle) {
    canvas.style.cssText = `
      position: absolute;
      left: 0;
      top: 0;
    `;
  }
  if (opt.className) {
    canvas.className = opt.className;
  }
  let ctx = canvas.getContext("2d");
  canvas.width = width;
  canvas.height = height;
  if (!opt.noTranslate) {
    ctx.translate(canvas.width / 2, canvas.height / 2);
  }
  return {
    canvas,
    ctx
  };
};
const getTowPointDistance = (x1, y1, x2, y2) => {
  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
};
const getPointToLineDistance = (x, y, x1, y1, x2, y2) => {
  if (x1 === x2) {
    return Math.abs(x - x1);
  } else {
    let B = 1;
    let A, C;
    A = (y1 - y2) / (x2 - x1);
    C = 0 - B * y1 - A * x1;
    return Math.abs((A * x + B * y + C) / Math.sqrt(A * A + B * B));
  }
};
const checkIsAtSegment = (x, y, x1, y1, x2, y2, dis = 10) => {
  if (getPointToLineDistance(x, y, x1, y1, x2, y2) > dis) {
    return false;
  }
  let dis1 = getTowPointDistance(x, y, x1, y1);
  let dis2 = getTowPointDistance(x, y, x2, y2);
  let dis3 = getTowPointDistance(x1, y1, x2, y2);
  let max = Math.sqrt(dis * dis + dis3 * dis3);
  if (dis1 <= max && dis2 <= max) {
    return true;
  }
  return false;
};
const radToDeg = (rad) => {
  return rad * (180 / Math.PI);
};
const degToRad = (deg) => {
  return deg * (Math.PI / 180);
};
const getTowPointRotate = (cx, cy, tx, ty, fx, fy) => {
  return radToDeg(Math.atan2(ty - cy, tx - cx) - Math.atan2(fy - cy, fx - cx));
};
const getRotatedPoint = (x, y, cx, cy, rotate) => {
  let deg = radToDeg(Math.atan2(y - cy, x - cx));
  let del = deg + rotate;
  let dis = getTowPointDistance(x, y, cx, cy);
  return {
    x: Math.cos(degToRad(del)) * dis + cx,
    y: Math.sin(degToRad(del)) * dis + cy
  };
};
const getElementCenterPoint = (element) => {
  let { x, y, width, height } = element;
  return {
    x: x + width / 2,
    y: y + height / 2
  };
};
const transformPointReverseRotate = (x, y, cx, cy, rotate) => {
  if (rotate !== 0) {
    let rp = getRotatedPoint(x, y, cx, cy, -rotate);
    x = rp.x;
    y = rp.y;
  }
  return {
    x,
    y
  };
};
const transformPointOnElement = (x, y, element) => {
  let center = getElementCenterPoint(element);
  return transformPointReverseRotate(x, y, center.x, center.y, element.rotate);
};
const getElementCornerPoint = (element, dir) => {
  let { x, y, width, height } = element;
  switch (dir) {
    case "topLeft":
      return {
        x,
        y
      };
    case "topRight":
      return {
        x: x + width,
        y
      };
    case "bottomRight":
      return {
        x: x + width,
        y: y + height
      };
    case "bottomLeft":
      return {
        x,
        y: y + height
      };
  }
};
const getElementRotatedCornerPoint = (element, dir) => {
  let center = getElementCenterPoint(element);
  let dirPos = getElementCornerPoint(element, dir);
  return getRotatedPoint(dirPos.x, dirPos.y, center.x, center.y, element.rotate);
};
const checkPointIsInRectangle = (x, y, rx, ry, rw, rh) => {
  if (typeof rx === "object") {
    let element = rx;
    rx = element.x;
    ry = element.y;
    rw = element.width;
    rh = element.height;
  }
  return x >= rx && x <= rx + rw && y >= ry && y <= ry + rh;
};
const getBoundingRect = (pointArr = [], returnCorners = false) => {
  let minX = Infinity;
  let maxX = -Infinity;
  let minY = Infinity;
  let maxY = -Infinity;
  pointArr.forEach((point) => {
    let [x2, y2] = point;
    if (x2 < minX) {
      minX = x2;
    }
    if (x2 > maxX) {
      maxX = x2;
    }
    if (y2 < minY) {
      minY = y2;
    }
    if (y2 > maxY) {
      maxY = y2;
    }
  });
  let x = minX;
  let y = minY;
  let width = maxX - minX;
  let height = maxY - minY;
  if (returnCorners) {
    return [
      {
        x,
        y
      },
      {
        x: x + width,
        y
      },
      {
        x: x + width,
        y: y + height
      },
      {
        x,
        y: y + height
      }
    ];
  }
  return {
    x,
    y,
    width,
    height
  };
};
const deepCopy = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};
const getFontString = (fontSize, fontFamily) => {
  return `${fontSize}px ${fontFamily}`;
};
const splitTextLines = (text) => {
  return text.replace(/\r\n?/g, "\n").split("\n");
};
let textCheckEl = null;
const getTextActWidth = (text, style) => {
  if (!textCheckEl) {
    textCheckEl = document.createElement("div");
    textCheckEl.style.position = "fixed";
    textCheckEl.style.left = "-99999px";
    document.body.appendChild(textCheckEl);
  }
  let { fontSize, fontFamily } = style;
  textCheckEl.innerText = text;
  textCheckEl.style.fontSize = fontSize + "px";
  textCheckEl.style.fontFamily = fontFamily;
  let { width } = textCheckEl.getBoundingClientRect();
  return width;
};
const getMaxFontSizeInWidth = (text, width, style) => {
  let fontSize = 12;
  while (getTextActWidth(text, __spreadProps(__spreadValues({}, style), {
    fontSize: fontSize + 1
  })) < width) {
    fontSize++;
  }
  return fontSize;
};
const getWrapTextActWidth = (element) => {
  let { text } = element;
  let textArr = splitTextLines(text);
  let maxWidth = -Infinity;
  textArr.forEach((textRow) => {
    let width = getTextActWidth(textRow, element.style);
    if (width > maxWidth) {
      maxWidth = width;
    }
  });
  return maxWidth;
};
const getWrapTextMaxRowTextNumber = (text) => {
  let textArr = splitTextLines(text);
  let maxNumber = -Infinity;
  textArr.forEach((textRow) => {
    if (textRow.length > maxNumber) {
      maxNumber = textRow.length;
    }
  });
  return maxNumber;
};
const getTextElementSize = (element) => {
  let { text, style } = element;
  let width = getWrapTextActWidth(element);
  const lines = Math.max(splitTextLines(text).length, 1);
  let lineHeight = style.fontSize * style.lineHeightRatio;
  let height = lines * lineHeight;
  return {
    width,
    height
  };
};
const throttle = (fn, ctx, time = 100) => {
  let timer = null;
  return (...args) => {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.call(ctx, ...args);
      timer = null;
    }, time);
  };
};
const computedLineWidthBySpeed = (speed, lastLineWidth, baseLineWidth = 2) => {
  let lineWidth = 0;
  let maxLineWidth = baseLineWidth;
  let maxSpeed = 10;
  let minSpeed = 0.5;
  if (speed >= maxSpeed) {
    lineWidth = baseLineWidth;
  } else if (speed <= minSpeed) {
    lineWidth = maxLineWidth + 1;
  } else {
    lineWidth = maxLineWidth - (speed - minSpeed) / (maxSpeed - minSpeed) * maxLineWidth;
  }
  if (lastLineWidth === -1) {
    lastLineWidth = maxLineWidth;
  }
  return lineWidth * (1 / 2) + lastLineWidth * (1 / 2);
};
const downloadFile = (file, fileName) => {
  let a = document.createElement("a");
  a.href = file;
  a.download = fileName;
  a.click();
};
const getElementCorners = (element) => {
  let topLeft = getElementRotatedCornerPoint(element, "topLeft");
  let topRight = getElementRotatedCornerPoint(element, "topRight");
  let bottomLeft = getElementRotatedCornerPoint(element, "bottomLeft");
  let bottomRight = getElementRotatedCornerPoint(element, "bottomRight");
  return [topLeft, topRight, bottomLeft, bottomRight];
};
const getMultiElementRectInfo = (elementList = []) => {
  if (elementList.length <= 0) {
    return {
      minx: 0,
      maxx: 0,
      miny: 0,
      maxy: 0
    };
  }
  let minx = Infinity;
  let maxx = -Infinity;
  let miny = Infinity;
  let maxy = -Infinity;
  elementList.forEach((element) => {
    let pointList = element.getEndpointList();
    pointList.forEach(({ x, y }) => {
      if (x < minx) {
        minx = x;
      }
      if (x > maxx) {
        maxx = x;
      }
      if (y < miny) {
        miny = y;
      }
      if (y > maxy) {
        maxy = y;
      }
    });
  });
  return {
    minx,
    maxx,
    miny,
    maxy
  };
};
const createImageObj = (url) => {
  return new Promise((resolve) => {
    let img = new Image();
    img.setAttribute("crossOrigin", "anonymous");
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      resolve(null);
    };
    img.src = url;
  });
};
let nodeKeyIndex = 0;
const createNodeKey = () => {
  return nodeKeyIndex++;
};
var utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  createCanvas,
  getTowPointDistance,
  getPointToLineDistance,
  checkIsAtSegment,
  radToDeg,
  degToRad,
  getTowPointRotate,
  getRotatedPoint,
  getElementCenterPoint,
  transformPointReverseRotate,
  transformPointOnElement,
  getElementCornerPoint,
  getElementRotatedCornerPoint,
  checkPointIsInRectangle,
  getBoundingRect,
  deepCopy,
  getFontString,
  splitTextLines,
  getTextActWidth,
  getMaxFontSizeInWidth,
  getWrapTextActWidth,
  getWrapTextMaxRowTextNumber,
  getTextElementSize,
  throttle,
  computedLineWidthBySpeed,
  downloadFile,
  getElementCorners,
  getMultiElementRectInfo,
  createImageObj,
  createNodeKey
}, Symbol.toStringTag, { value: "Module" }));
const CORNERS = {
  TOP_LEFT: "topLeft",
  TOP_RIGHT: "topRight",
  BOTTOM_RIGHT: "bottomRight",
  BOTTOM_LEFT: "bottomLeft"
};
const DRAG_ELEMENT_PARTS = {
  BODY: "body",
  ROTATE: "rotate",
  TOP_LEFT_BTN: "topLeftBtn",
  TOP_RIGHT_BTN: "topRightBtn",
  BOTTOM_RIGHT_BTN: "bottomRightBtn",
  BOTTOM_LEFT_BTN: "bottomLeftBtn"
};
const HIT_DISTANCE = 10;
const checkIsAtMultiSegment = (segments, rp) => {
  let res = false;
  segments.forEach((seg) => {
    if (res)
      return;
    if (checkIsAtSegment(rp.x, rp.y, ...seg, HIT_DISTANCE)) {
      res = true;
    }
  });
  return res;
};
const checkIsAtRectangleEdge = (element, rp) => {
  let { x, y, width, height } = element;
  let segments = [
    [x, y, x + width, y],
    [x + width, y, x + width, y + height],
    [x + width, y + height, x, y + height],
    [x, y + height, x, y]
  ];
  return checkIsAtMultiSegment(segments, rp) ? element : null;
};
const checkIsAtRectangleInner = (element, rp) => {
  return checkPointIsInRectangle(rp.x, rp.y, element) ? element : null;
};
const getCircleRadius = (width, height) => {
  return Math.min(Math.abs(width), Math.abs(height)) / 2;
};
const checkIsAtCircleEdge = (element, rp) => {
  let { width, height, x, y } = element;
  let radius = getCircleRadius(width, height);
  let dis = getTowPointDistance(rp.x, rp.y, x + radius, y + radius);
  let onCircle = dis >= radius - HIT_DISTANCE && dis <= radius + HIT_DISTANCE;
  return onCircle ? element : null;
};
const checkIsAtLineEdge = (element, rp) => {
  let segments = [];
  let len = element.pointArr.length;
  let arr = element.pointArr;
  for (let i = 0; i < len - 1; i++) {
    segments.push([...arr[i], ...arr[i + 1]]);
  }
  return checkIsAtMultiSegment(segments, rp) ? element : null;
};
const checkIsAtFreedrawLineEdge = (element, rp) => {
  let res = null;
  element.pointArr.forEach((point) => {
    if (res)
      return;
    let dis = getTowPointDistance(rp.x, rp.y, point[0], point[1]);
    if (dis <= HIT_DISTANCE) {
      res = element;
    }
  });
  return res;
};
const checkIsAtDiamondEdge = (element, rp) => {
  let { x, y, width, height } = element;
  let segments = [
    [x + width / 2, y, x + width, y + height / 2],
    [x + width, y + height / 2, x + width / 2, y + height],
    [x + width / 2, y + height, x, y + height / 2],
    [x, y + height / 2, x + width / 2, y]
  ];
  return checkIsAtMultiSegment(segments, rp) ? element : null;
};
const checkIsAtTriangleEdge = (element, rp) => {
  let { x, y, width, height } = element;
  let segments = [
    [x + width / 2, y, x + width, y + height],
    [x + width, y + height, x, y + height],
    [x, y + height, x + width / 2, y]
  ];
  return checkIsAtMultiSegment(segments, rp) ? element : null;
};
const checkIsAtArrowEdge = (element, rp) => {
  let pointArr = element.pointArr;
  let x = pointArr[0][0];
  let y = pointArr[0][1];
  let tx = pointArr[pointArr.length - 1][0];
  let ty = pointArr[pointArr.length - 1][1];
  let segments = [[x, y, tx, ty]];
  return checkIsAtMultiSegment(segments, rp) ? element : null;
};
var checkHit = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  checkIsAtMultiSegment,
  checkIsAtRectangleEdge,
  checkIsAtRectangleInner,
  getCircleRadius,
  checkIsAtCircleEdge,
  checkIsAtLineEdge,
  checkIsAtFreedrawLineEdge,
  checkIsAtDiamondEdge,
  checkIsAtTriangleEdge,
  checkIsAtArrowEdge
}, Symbol.toStringTag, { value: "Module" }));
const drawWrap = (ctx, fn, fill = false) => {
  ctx.beginPath();
  fn();
  ctx.stroke();
  if (fill) {
    ctx.fill();
  }
};
const drawRect = (ctx, x, y, width, height, fill = false) => {
  drawWrap(ctx, () => {
    ctx.rect(x, y, width, height);
    if (fill) {
      ctx.fillRect(x, y, width, height);
    }
  });
};
const drawDiamond = (ctx, x, y, width, height, fill = false) => {
  drawWrap(
    ctx,
    () => {
      ctx.moveTo(x + width / 2, y);
      ctx.lineTo(x + width, y + height / 2);
      ctx.lineTo(x + width / 2, y + height);
      ctx.lineTo(x, y + height / 2);
      ctx.closePath();
    },
    fill
  );
};
const drawTriangle = (ctx, x, y, width, height, fill = false) => {
  drawWrap(
    ctx,
    () => {
      ctx.moveTo(x + width / 2, y);
      ctx.lineTo(x + width, y + height);
      ctx.lineTo(x, y + height);
      ctx.closePath();
    },
    fill
  );
};
const drawCircle = (ctx, x, y, r, fill = false) => {
  drawWrap(
    ctx,
    () => {
      ctx.arc(x, y, r, 0, 2 * Math.PI);
    },
    fill
  );
};
const drawLine = (ctx, points) => {
  drawWrap(ctx, () => {
    let first = true;
    points.forEach((point) => {
      if (first) {
        first = false;
        ctx.moveTo(point[0], point[1]);
      } else {
        ctx.lineTo(point[0], point[1]);
      }
    });
  });
};
const drawArrow = (ctx, pointArr) => {
  let x = pointArr[0][0];
  let y = pointArr[0][1];
  let tx = pointArr[pointArr.length - 1][0];
  let ty = pointArr[pointArr.length - 1][1];
  drawWrap(
    ctx,
    () => {
      ctx.moveTo(x, y);
      ctx.lineTo(tx, ty);
    },
    true
  );
  let l = 30;
  let deg = 30;
  let lineDeg = radToDeg(Math.atan2(ty - y, tx - x));
  drawWrap(
    ctx,
    () => {
      let plusDeg = deg - lineDeg;
      let _x = tx - l * Math.cos(degToRad(plusDeg));
      let _y = ty + l * Math.sin(degToRad(plusDeg));
      ctx.moveTo(_x, _y);
      ctx.lineTo(tx, ty);
    },
    true
  );
  drawWrap(ctx, () => {
    let plusDeg = 90 - lineDeg - deg;
    let _x = tx - l * Math.sin(degToRad(plusDeg));
    let _y = ty - l * Math.cos(degToRad(plusDeg));
    ctx.moveTo(_x, _y);
    ctx.lineTo(tx, ty);
  });
};
const transformFreeLinePoint = (point, opt) => {
  let { x, y } = opt.app.coordinate.transform(point[0], point[1]);
  return [x - opt.cx, y - opt.cy, ...point.slice(2)];
};
const drawFreeLine = (ctx, points, opt) => {
  for (let i = 0; i < points.length - 1; i++) {
    drawWrap(
      ctx,
      () => {
        let point = transformFreeLinePoint(points[i], opt);
        let nextPoint = transformFreeLinePoint(points[i + 1], opt);
        drawLineSegment(
          ctx,
          point[0],
          point[1],
          nextPoint[0],
          nextPoint[1],
          nextPoint[2]
        );
      },
      true
    );
  }
};
const drawLineSegment = (ctx, mx, my, tx, ty, lineWidth = 0) => {
  drawWrap(ctx, () => {
    if (lineWidth > 0) {
      ctx.lineWidth = lineWidth;
    }
    ctx.moveTo(mx, my);
    ctx.lineTo(tx, ty);
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
  });
};
const drawText = (ctx, textObj, x, y, width, height) => {
  let { text, style } = textObj;
  let lineHeight = style.fontSize * style.lineHeightRatio;
  drawWrap(ctx, () => {
    ctx.font = getFontString(style.fontSize, style.fontFamily);
    ctx.textBaseline = "middle";
    let textArr = splitTextLines(text);
    textArr.forEach((textRow, index) => {
      ctx.fillText(textRow, x, y + (index * lineHeight + lineHeight / 2));
    });
  });
};
const drawImage = (ctx, element, x, y, width, height) => {
  drawWrap(ctx, () => {
    let ratio = width / height;
    let showWidth = 0;
    let showHeight = 0;
    if (ratio > element.ratio) {
      showHeight = height;
      showWidth = element.ratio * height;
    } else {
      showWidth = width;
      showHeight = width / element.ratio;
    }
    ctx.drawImage(element.imageObj, x, y, showWidth, showHeight);
  });
};
var draw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  drawWrap,
  drawRect,
  drawDiamond,
  drawTriangle,
  drawCircle,
  drawLine,
  drawArrow,
  drawFreeLine,
  drawLineSegment,
  drawText,
  drawImage
}, Symbol.toStringTag, { value: "Module" }));
class Coordinate {
  constructor(app) {
    this.app = app;
  }
  addScrollY(y) {
    return y + this.app.state.scrollY;
  }
  addScrollX(x) {
    return x + this.app.state.scrollX;
  }
  subScrollY(y) {
    return y - this.app.state.scrollY;
  }
  subScrollX(x) {
    return x - this.app.state.scrollX;
  }
  transformToCanvasCoordinate(x, y) {
    x -= this.app.width / 2;
    y -= this.app.height / 2;
    return {
      x,
      y
    };
  }
  transformToScreenCoordinate(x, y) {
    x += this.app.width / 2;
    y += this.app.height / 2;
    return {
      x,
      y
    };
  }
  transform(x, y) {
    let t = this.transformToCanvasCoordinate(x, y);
    return {
      x: this.subScrollX(t.x),
      y: this.subScrollY(t.y)
    };
  }
  windowToContainer(x, y) {
    return {
      x: x - this.app.left,
      y: y - this.app.top
    };
  }
  containerToWindow(x, y) {
    return {
      x: x + this.app.left,
      y: y + this.app.top
    };
  }
  scale(x, y) {
    let { state } = this.app;
    let wp = this.transformToCanvasCoordinate(x, y);
    let sp = this.transformToScreenCoordinate(
      wp.x * state.scale,
      wp.y * state.scale
    );
    return {
      x: sp.x,
      y: sp.y
    };
  }
  reverseScale(x, y) {
    let { state } = this.app;
    let tp = this.transformToCanvasCoordinate(x, y);
    let sp = this.transformToScreenCoordinate(
      tp.x / state.scale,
      tp.y / state.scale
    );
    return {
      x: sp.x,
      y: sp.y
    };
  }
  gridAdsorbent(x, y) {
    let { gridConfig, showGrid } = this.app.state;
    if (!showGrid) {
      return {
        x,
        y
      };
    }
    let gridSize = gridConfig.size;
    return {
      x: x - x % gridSize,
      y: y - y % gridSize
    };
  }
}
class Event extends EventEmitter {
  constructor(app) {
    super();
    this.app = app;
    this.coordinate = app.coordinate;
    this.isMousedown = false;
    this.mousedownPos = {
      x: 0,
      y: 0,
      unGridClientX: 0,
      unGridClientY: 0,
      originClientX: 0,
      originClientY: 0
    };
    this.mouseOffset = {
      x: 0,
      y: 0,
      originX: 0,
      originY: 0
    };
    this.lastMousePos = {
      x: 0,
      y: 0
    };
    this.mouseDistance = 0;
    this.lastMouseTime = Date.now();
    this.mouseDuration = 0;
    this.mouseSpeed = 0;
    this.onMousedown = this.onMousedown.bind(this);
    this.onMousemove = this.onMousemove.bind(this);
    this.onMouseup = this.onMouseup.bind(this);
    this.onDblclick = this.onDblclick.bind(this);
    this.onMousewheel = this.onMousewheel.bind(this);
    this.onKeydown = this.onKeydown.bind(this);
    this.onKeyup = this.onKeyup.bind(this);
    this.onContextmenu = this.onContextmenu.bind(this);
    this.bindEvent();
  }
  bindEvent() {
    this.app.container.addEventListener("mousedown", this.onMousedown);
    this.app.container.addEventListener("mousemove", this.onMousemove);
    this.app.container.addEventListener("mouseup", this.onMouseup);
    this.app.container.addEventListener("dblclick", this.onDblclick);
    this.app.container.addEventListener("mousewheel", this.onMousewheel);
    this.app.container.addEventListener("contextmenu", this.onContextmenu);
    window.addEventListener("keydown", this.onKeydown);
    window.addEventListener("keyup", this.onKeyup);
  }
  unbindEvent() {
    this.app.container.removeEventListener("mousedown", this.onMousedown);
    this.app.container.removeEventListener("mousemove", this.onMousemove);
    this.app.container.removeEventListener("mouseup", this.onMouseup);
    this.app.container.removeEventListener("dblclick", this.onDblclick);
    this.app.container.removeEventListener("mousewheel", this.onMousewheel);
    this.app.container.removeEventListener("contextmenu", this.onContextmenu);
    window.removeEventListener("keydown", this.onKeydown);
    window.removeEventListener("keyup", this.onKeyup);
  }
  transformEvent(e) {
    let { coordinate } = this.app;
    let wp = coordinate.windowToContainer(e.clientX, e.clientY);
    let { x, y } = coordinate.reverseScale(wp.x, wp.y);
    x = coordinate.addScrollX(x);
    y = coordinate.addScrollY(y);
    let unGridClientX = x;
    let unGridClientY = y;
    let gp = coordinate.gridAdsorbent(x, y);
    let newEvent = {
      originEvent: e,
      unGridClientX,
      unGridClientY,
      clientX: gp.x,
      clientY: gp.y
    };
    return newEvent;
  }
  onMousedown(e) {
    e = this.transformEvent(e);
    this.isMousedown = true;
    this.mousedownPos.x = e.clientX;
    this.mousedownPos.y = e.clientY;
    this.mousedownPos.unGridClientX = e.unGridClientX;
    this.mousedownPos.unGridClientY = e.unGridClientY;
    this.mousedownPos.originClientX = e.originEvent.clientX;
    this.mousedownPos.originClientY = e.originEvent.clientY;
    this.emit("mousedown", e, this);
  }
  onMousemove(e) {
    e = this.transformEvent(e);
    let x = e.clientX;
    let y = e.clientY;
    if (this.isMousedown) {
      this.mouseOffset.x = x - this.mousedownPos.x;
      this.mouseOffset.y = y - this.mousedownPos.y;
      this.mouseOffset.originX = e.originEvent.clientX - this.mousedownPos.originClientX;
      this.mouseOffset.originY = e.originEvent.clientY - this.mousedownPos.originClientY;
    }
    let curTime = Date.now();
    this.mouseDuration = curTime - this.lastMouseTime;
    this.mouseDistance = getTowPointDistance(
      x,
      y,
      this.lastMousePos.x,
      this.lastMousePos.y
    );
    this.mouseSpeed = this.mouseDistance / this.mouseDuration;
    this.emit("mousemove", e, this);
    this.lastMouseTime = curTime;
    this.lastMousePos.x = x;
    this.lastMousePos.y = y;
  }
  onMouseup(e) {
    e = this.transformEvent(e);
    this.isMousedown = false;
    this.mousedownPos.x = 0;
    this.mousedownPos.y = 0;
    this.emit("mouseup", e, this);
  }
  onDblclick(e) {
    e = this.transformEvent(e);
    this.emit("dblclick", e, this);
  }
  onMousewheel(e) {
    e = this.transformEvent(e);
    this.emit("mousewheel", e.originEvent.wheelDelta < 0 ? "down" : "up");
  }
  onContextmenu(e) {
    e.stopPropagation();
    e.preventDefault();
    e = this.transformEvent(e);
    this.emit("contextmenu", e, this);
  }
  onKeydown(e) {
    this.emit("keydown", e, this);
  }
  onKeyup(e) {
    this.emit("keyup", e, this);
  }
}
class BaseElement extends EventEmitter {
  constructor(opts = {}, app) {
    super();
    this.app = app;
    this.groupId = opts.groupId || "";
    this.type = opts.type || "";
    this.key = createNodeKey();
    this.isCreating = true;
    this.isActive = true;
    this.isSelected = false;
    this.startX = 0;
    this.startY = 0;
    this.x = opts.x || 0;
    this.y = opts.y || 0;
    this.width = opts.width || 0;
    this.height = opts.height || 0;
    this.startRotate = 0;
    this.rotate = opts.rotate || 0;
    this.noRender = false;
    this.style = __spreadValues({
      strokeStyle: "",
      fillStyle: "",
      lineWidth: "small",
      lineDash: 0,
      globalAlpha: 1
    }, opts.style || {});
    this.dragElement = null;
  }
  serialize() {
    return {
      groupId: this.groupId,
      type: this.type,
      width: this.width,
      height: this.height,
      x: this.x,
      y: this.y,
      rotate: this.rotate,
      style: __spreadValues({}, this.style)
    };
  }
  render() {
    throw new Error("\u5B50\u7C7B\u9700\u8981\u5B9E\u73B0\u8BE5\u65B9\u6CD5\uFF01");
  }
  setGroupId(groupId) {
    this.groupId = groupId;
  }
  getGroupId() {
    return this.groupId;
  }
  removeGroupId() {
    this.groupId = "";
  }
  hasGroup() {
    return !!this.groupId;
  }
  renderDragElement() {
    if (this.isActive && !this.isCreating) {
      this.dragElement.showAll();
      this.dragElement.render();
    } else if (this.isSelected) {
      this.dragElement.onlyShowBody();
      this.dragElement.render();
    }
  }
  handleStyle(style) {
    Object.keys(style).forEach((key) => {
      if (key === "lineWidth") {
        if (style[key] === "small") {
          style[key] = 2;
        } else if (style[key] === "middle") {
          style[key] = 4;
        } else if (style[key] === "large") {
          style[key] = 6;
        }
      }
      if (style[key] === "") {
        if (this.app.state[key] !== void 0 && this.app.state[key] !== null && this.app.state[key] !== "") {
          style[key] = this.app.state[key];
        }
      }
    });
    return style;
  }
  setStyle(style = {}) {
    let _style = this.handleStyle(style);
    Object.keys(_style).forEach((key) => {
      if (key === "lineDash") {
        if (_style.lineDash > 0) {
          this.app.ctx.setLineDash([_style.lineDash]);
        }
      } else if (_style[key] !== void 0 && _style[key] !== "" && _style[key] !== null) {
        this.app.ctx[key] = _style[key];
      }
    });
    return this;
  }
  warpRender(renderFn) {
    let { x, y, width, height, rotate, style } = this;
    let { x: tx, y: ty } = this.app.coordinate.transform(x, y);
    let halfWidth = width / 2;
    let halfHeight = height / 2;
    let cx = tx + halfWidth;
    let cy = ty + halfHeight;
    this.app.ctx.save();
    this.app.ctx.translate(cx, cy);
    this.app.ctx.rotate(degToRad(rotate));
    this.setStyle(style);
    renderFn({
      halfWidth,
      halfHeight,
      tx,
      ty,
      cx,
      cy
    });
    this.app.ctx.restore();
    return this;
  }
  saveState() {
    let { rotate, x, y } = this;
    this.startRotate = rotate;
    this.startX = x;
    this.startY = y;
    return this;
  }
  move(ox, oy) {
    let { startX, startY } = this;
    this.x = startX + ox;
    this.y = startY + oy;
    this.emit("elementPositionChange", this.x, this.y);
    return this;
  }
  updateRect(x, y, width, height) {
    this.updatePos(x, y);
    this.updateSize(width, height);
    return this;
  }
  updateSize(width, height) {
    this.width = width;
    this.height = height;
    this.emit("elementSizeChange", this.width, this.height);
    return this;
  }
  updatePos(x, y) {
    this.x = x;
    this.y = y;
    this.emit("elementPositionChange", this.x, this.y);
    return this;
  }
  offsetRotate(or) {
    this.updateRotate(this.startRotate + or);
    return this;
  }
  updateRotate(rotate) {
    rotate = rotate % 360;
    if (rotate < 0) {
      rotate = 360 + rotate;
    }
    this.rotate = parseInt(rotate);
    this.emit("elementRotateChange", this.rotate);
  }
  rotateByCenter(rotate, cx, cy) {
    this.offsetRotate(rotate);
    let np = getRotatedPoint(this.startX, this.startY, cx, cy, rotate);
    this.updatePos(np.x, np.y);
  }
  isHit(x, y) {
    throw new Error("\u5B50\u7C7B\u9700\u8981\u5B9E\u73B0\u8BE5\u65B9\u6CD5!");
  }
  startResize(resizeType, e) {
    this.dragElement.startResize(resizeType, e);
    return this;
  }
  endResize() {
    this.dragElement.endResize();
    return this;
  }
  resize(...args) {
    this.dragElement.handleResizeElement(...args);
    return this;
  }
  getEndpointList() {
    return getElementCorners(this);
  }
}
class DragElement extends BaseElement {
  constructor(element, app, opts = {}) {
    super(
      {
        type: "dragElement",
        notNeedDragElement: true
      },
      app
    );
    this.opts = __spreadValues({
      lockRatio: false
    }, opts);
    this.style = {
      strokeStyle: this.app.state.dragStrokeStyle,
      fillStyle: "transparent",
      lineWidth: "small",
      lineDash: 0,
      globalAlpha: 1
    };
    this.element = element;
    this.offset = 5;
    this.size = 10;
    this.resizeType = "";
    this.diagonalPoint = {
      x: 0,
      y: 0
    };
    this.mousedownPosAndElementPosOffset = {
      x: 0,
      y: 0
    };
    this.elementRatio = 0;
    this.hideParts = [];
  }
  setHideParts(parts = []) {
    this.hideParts = parts;
  }
  showAll() {
    this.setHideParts([]);
  }
  onlyShowBody() {
    this.setHideParts([
      DRAG_ELEMENT_PARTS.ROTATE,
      DRAG_ELEMENT_PARTS.TOP_LEFT_BTN,
      DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN,
      DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN,
      DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN
    ]);
  }
  update() {
    this.x = this.element.x - this.offset;
    this.y = this.element.y - this.offset;
    this.width = this.element.width + this.offset * 2;
    this.height = this.element.height + this.offset * 2;
    this.rotate = this.element.rotate;
  }
  render() {
    if (this.element.hasGroup())
      return;
    this.update();
    let { width, height } = this;
    this.warpRender(({ halfWidth, halfHeight }) => {
      this.app.ctx.save();
      if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.BODY)) {
        this.app.ctx.setLineDash([5]);
        drawRect(this.app.ctx, -halfWidth, -halfHeight, width, height);
        this.app.ctx.restore();
      }
      if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.TOP_LEFT_BTN)) {
        drawRect(
          this.app.ctx,
          -halfWidth - this.size,
          -halfHeight - this.size,
          this.size,
          this.size
        );
      }
      if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN)) {
        drawRect(
          this.app.ctx,
          -halfWidth + this.element.width + this.size,
          -halfHeight - this.size,
          this.size,
          this.size
        );
      }
      if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN)) {
        drawRect(
          this.app.ctx,
          -halfWidth + this.element.width + this.size,
          -halfHeight + this.element.height + this.size,
          this.size,
          this.size
        );
      }
      if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN)) {
        drawRect(
          this.app.ctx,
          -halfWidth - this.size,
          -halfHeight + this.element.height + this.size,
          this.size,
          this.size
        );
      }
      if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.ROTATE)) {
        drawCircle(
          this.app.ctx,
          -halfWidth + this.element.width / 2 + this.size / 2,
          -halfHeight - this.size * 2,
          this.size
        );
      }
    });
  }
  checkPointInDragElementWhere(x, y) {
    let part = "";
    let rp = transformPointOnElement(x, y, this.element);
    if (checkPointIsInRectangle(rp.x, rp.y, this)) {
      part = DRAG_ELEMENT_PARTS.BODY;
    } else if (getTowPointDistance(
      rp.x,
      rp.y,
      this.x + this.width / 2,
      this.y - this.size * 2
    ) <= this.size) {
      part = DRAG_ELEMENT_PARTS.ROTATE;
    } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.TOP_LEFT)) {
      part = DRAG_ELEMENT_PARTS.TOP_LEFT_BTN;
    } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.TOP_RIGHT)) {
      part = DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN;
    } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.BOTTOM_RIGHT)) {
      part = DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN;
    } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.BOTTOM_LEFT)) {
      part = DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN;
    }
    if (this.hideParts.includes(part)) {
      part = "";
    }
    return part;
  }
  _checkPointIsInBtn(x, y, dir) {
    let _x = 0;
    let _y = 0;
    switch (dir) {
      case CORNERS.TOP_LEFT:
        _x = this.x - this.size;
        _y = this.y - this.size;
        break;
      case CORNERS.TOP_RIGHT:
        _x = this.x + this.width;
        _y = this.y - this.size;
        break;
      case CORNERS.BOTTOM_RIGHT:
        _x = this.x + this.width;
        _y = this.y + this.height;
        break;
      case CORNERS.BOTTOM_LEFT:
        _x = this.x - this.size;
        _y = this.y + this.height;
        break;
    }
    return checkPointIsInRectangle(x, y, _x, _y, this.size, this.size);
  }
  startResize(resizeType, e) {
    this.resizeType = resizeType;
    if (this.opts.lockRatio) {
      this.elementRatio = this.element.width / this.element.height;
    }
    if (resizeType === DRAG_ELEMENT_PARTS.BODY) {
      this.element.saveState();
    } else if (resizeType === DRAG_ELEMENT_PARTS.ROTATE) {
      this.element.saveState();
    } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_LEFT_BTN) {
      this.handleDragMousedown(e, CORNERS.TOP_LEFT);
    } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN) {
      this.handleDragMousedown(e, CORNERS.TOP_RIGHT);
    } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN) {
      this.handleDragMousedown(e, CORNERS.BOTTOM_RIGHT);
    } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN) {
      this.handleDragMousedown(e, CORNERS.BOTTOM_LEFT);
    }
  }
  endResize() {
    this.resizeType = "";
    this.diagonalPoint = {
      x: 0,
      y: 0
    };
    this.mousedownPosAndElementPosOffset = {
      x: 0,
      y: 0
    };
    this.elementRatio = 0;
  }
  handleDragMousedown(e, corner) {
    let centerPos = getElementCenterPoint(this.element);
    let pos = getElementRotatedCornerPoint(this.element, corner);
    this.diagonalPoint.x = 2 * centerPos.x - pos.x;
    this.diagonalPoint.y = 2 * centerPos.y - pos.y;
    this.mousedownPosAndElementPosOffset.x = e.clientX - pos.x;
    this.mousedownPosAndElementPosOffset.y = e.clientY - pos.y;
    this.element.saveState();
  }
  handleResizeElement(e, mx, my, offsetX, offsetY) {
    let resizeType = this.resizeType;
    if (resizeType === DRAG_ELEMENT_PARTS.BODY) {
      this.handleMoveElement(offsetX, offsetY);
    } else if (resizeType === DRAG_ELEMENT_PARTS.ROTATE) {
      this.handleRotateElement(e, mx, my);
    } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_LEFT_BTN) {
      this.handleStretchElement(
        e,
        (newCenter, rp) => {
          return {
            width: (newCenter.x - rp.x) * 2,
            height: (newCenter.y - rp.y) * 2
          };
        },
        (rp) => {
          return {
            x: rp.x,
            y: rp.y
          };
        },
        (newRatio, newRect) => {
          let x = newRect.x;
          let y = newRect.y;
          if (newRatio > this.elementRatio) {
            x = newRect.x + newRect.width - this.elementRatio * newRect.height;
          } else if (newRatio < this.elementRatio) {
            y = newRect.y + (newRect.height - newRect.width / this.elementRatio);
          }
          return {
            x,
            y
          };
        }
      );
    } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN) {
      this.handleStretchElement(
        e,
        (newCenter, rp) => {
          return {
            width: (rp.x - newCenter.x) * 2,
            height: (newCenter.y - rp.y) * 2
          };
        },
        (rp, newSize) => {
          return {
            x: rp.x - newSize.width,
            y: rp.y
          };
        },
        (newRatio, newRect) => {
          let x = newRect.x;
          let y = newRect.y;
          if (newRatio > this.elementRatio) {
            x = newRect.x + this.elementRatio * newRect.height;
          } else if (newRatio < this.elementRatio) {
            x = newRect.x + newRect.width;
            y = newRect.y + (newRect.height - newRect.width / this.elementRatio);
          }
          return {
            x,
            y
          };
        }
      );
    } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN) {
      this.handleStretchElement(
        e,
        (newCenter, rp) => {
          return {
            width: (rp.x - newCenter.x) * 2,
            height: (rp.y - newCenter.y) * 2
          };
        },
        (rp, newSize) => {
          return {
            x: rp.x - newSize.width,
            y: rp.y - newSize.height
          };
        },
        (newRatio, newRect) => {
          let x = newRect.x;
          let y = newRect.y;
          if (newRatio > this.elementRatio) {
            x = newRect.x + this.elementRatio * newRect.height;
            y = newRect.y + newRect.height;
          } else if (newRatio < this.elementRatio) {
            x = newRect.x + newRect.width;
            y = newRect.y + newRect.width / this.elementRatio;
          }
          return {
            x,
            y
          };
        }
      );
    } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN) {
      this.handleStretchElement(
        e,
        (newCenter, rp) => {
          return {
            width: (newCenter.x - rp.x) * 2,
            height: (rp.y - newCenter.y) * 2
          };
        },
        (rp, newSize) => {
          return {
            x: rp.x,
            y: rp.y - newSize.height
          };
        },
        (newRatio, newRect) => {
          let x = newRect.x;
          let y = newRect.y;
          if (newRatio > this.elementRatio) {
            x = newRect.x + newRect.width - this.elementRatio * newRect.height;
            y = newRect.y + newRect.height;
          } else if (newRatio < this.elementRatio) {
            y = newRect.y + newRect.width / this.elementRatio;
          }
          return {
            x,
            y
          };
        }
      );
    }
  }
  handleMoveElement(offsetX, offsetY) {
    this.element.move(offsetX, offsetY);
  }
  handleRotateElement(e, mx, my) {
    let centerPos = getElementCenterPoint(this.element);
    let rotate = getTowPointRotate(
      centerPos.x,
      centerPos.y,
      e.clientX,
      e.clientY,
      mx,
      my
    );
    this.element.offsetRotate(rotate);
  }
  stretchCalc(x, y, calcSize, calcPos) {
    let newCenter = {
      x: (x + this.diagonalPoint.x) / 2,
      y: (y + this.diagonalPoint.y) / 2
    };
    let rp = transformPointReverseRotate(
      x,
      y,
      newCenter.x,
      newCenter.y,
      this.element.rotate
    );
    let newSize = calcSize(newCenter, rp);
    let isWidthReverse = false;
    if (newSize.width < 0) {
      newSize.width = 0;
      isWidthReverse = true;
    }
    let isHeightReverse = false;
    if (newSize.height < 0) {
      newSize.height = 0;
      isHeightReverse = true;
    }
    let newPos = calcPos(rp, newSize);
    let newRect = {
      x: newPos.x,
      y: newPos.y,
      width: newSize.width,
      height: newSize.height
    };
    if (isWidthReverse || isHeightReverse) {
      newRect.x = this.element.x;
      newRect.y = this.element.y;
    }
    return {
      newRect,
      newCenter
    };
  }
  handleStretchElement(e, calcSize, calcPos, fixPos) {
    let actClientX = e.clientX - this.mousedownPosAndElementPosOffset.x;
    let actClientY = e.clientY - this.mousedownPosAndElementPosOffset.y;
    let { newRect, newCenter } = this.stretchCalc(
      actClientX,
      actClientY,
      calcSize,
      calcPos
    );
    if (this.opts.lockRatio) {
      this.fixStretch(newRect, newCenter, calcSize, calcPos, fixPos);
      return;
    }
    this.element.updateRect(newRect.x, newRect.y, newRect.width, newRect.height);
  }
  fixStretch(newRect, newCenter, calcSize, calcPos, fixPos) {
    let newRatio = newRect.width / newRect.height;
    let fp = fixPos(newRatio, newRect);
    let rp = getRotatedPoint(
      fp.x,
      fp.y,
      newCenter.x,
      newCenter.y,
      this.element.rotate
    );
    let fixNewRect = this.stretchCalc(rp.x, rp.y, calcSize, calcPos).newRect;
    if (fixNewRect.width === 0 && fixNewRect.height === 0) {
      return;
    }
    this.element.updateRect(
      fixNewRect.x,
      fixNewRect.y,
      fixNewRect.width,
      fixNewRect.height
    );
  }
}
class Rectangle extends BaseElement {
  constructor(...args) {
    super(...args);
    this.dragElement = new DragElement(this, this.app);
  }
  render() {
    let { width, height } = this;
    this.warpRender(({ halfWidth, halfHeight }) => {
      drawRect(this.app.ctx, -halfWidth, -halfHeight, width, height, true);
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtRectangleEdge(this, rp);
  }
}
class Circle extends BaseElement {
  constructor(...args) {
    super(...args);
    this.dragElement = new DragElement(this, this.app, {
      lockRatio: true
    });
  }
  render() {
    let { width, height } = this;
    this.warpRender(({ halfWidth, halfHeight }) => {
      drawCircle(this.app.ctx, 0, 0, getCircleRadius(width, height), true);
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtCircleEdge(this, rp);
  }
}
class Diamond extends BaseElement {
  constructor(...args) {
    super(...args);
    this.dragElement = new DragElement(this, this.app);
  }
  render() {
    let { width, height } = this;
    this.warpRender(({ halfWidth, halfHeight }) => {
      drawDiamond(this.app.ctx, -halfWidth, -halfHeight, width, height, true);
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtDiamondEdge(this, rp);
  }
  getEndpointList() {
    let { x, y, width, height, rotate } = this;
    let points = [
      [x + width / 2, y],
      [x + width, y + height / 2],
      [x + width / 2, y + height],
      [x, y + height / 2]
    ];
    let center = getElementCenterPoint(this);
    return points.map((point) => {
      return getRotatedPoint(point[0], point[1], center.x, center.y, rotate);
    });
  }
}
class Triangle extends BaseElement {
  constructor(...args) {
    super(...args);
    this.dragElement = new DragElement(this, this.app);
  }
  render() {
    let { width, height } = this;
    this.warpRender(({ halfWidth, halfHeight }) => {
      drawTriangle(this.app.ctx, -halfWidth, -halfHeight, width, height, true);
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtTriangleEdge(this, rp);
  }
  getEndpointList() {
    let { x, y, width, height, rotate } = this;
    let points = [
      [x + width / 2, y],
      [x + width, y + height],
      [x, y + height]
    ];
    let center = getElementCenterPoint(this);
    return points.map((point) => {
      return getRotatedPoint(point[0], point[1], center.x, center.y, rotate);
    });
  }
}
class BaseMultiPointElement extends BaseElement {
  constructor(opts = {}, app) {
    super(opts, app);
    this.startPointArr = [];
    this.pointArr = opts.pointArr || [];
    this.startWidth = 0;
    this.startHeight = 0;
    this.fictitiousPoint = {
      x: 0,
      y: 0
    };
  }
  serialize() {
    let base = super.serialize();
    return __spreadProps(__spreadValues({}, base), {
      pointArr: [...this.pointArr]
    });
  }
  addPoint(x, y, ...args) {
    if (!Array.isArray(this.pointArr)) {
      return;
    }
    this.pointArr.push([x, y, ...args]);
    return this;
  }
  updateMultiPointBoundingRect() {
    let rect = getBoundingRect(this.pointArr);
    this.x = rect.x;
    this.y = rect.y;
    this.width = rect.width;
    this.height = rect.height;
    return this;
  }
  updateFictitiousPoint(x, y) {
    this.fictitiousPoint.x = x;
    this.fictitiousPoint.y = y;
  }
  saveState() {
    let { rotate, x, y, width, height, pointArr } = this;
    this.startRotate = rotate;
    this.startX = x;
    this.startY = y;
    this.startPointArr = deepCopy(pointArr);
    this.startWidth = width;
    this.startHeight = height;
    return this;
  }
  move(ox, oy) {
    this.pointArr = this.startPointArr.map((point) => {
      return [point[0] + ox, point[1] + oy, ...point.slice(2)];
    });
    let { startX, startY } = this;
    this.x = startX + ox;
    this.y = startY + oy;
    return this;
  }
  updateRect(x, y, width, height) {
    let { startWidth, startHeight, startPointArr } = this;
    let scaleX = width / startWidth;
    let scaleY = height / startHeight;
    this.pointArr = startPointArr.map((point) => {
      let nx = point[0] * scaleX;
      let ny = point[1] * scaleY;
      return [nx, ny, ...point.slice(2)];
    });
    let rect = getBoundingRect(this.pointArr);
    let offsetX = rect.x - x;
    let offsetY = rect.y - y;
    this.pointArr = this.pointArr.map((point) => {
      return [point[0] - offsetX, point[1] - offsetY, ...point.slice(2)];
    });
    this.updatePos(x, y);
    this.updateSize(width, height);
    return this;
  }
  rotateByCenter(rotate, cx, cy) {
    this.pointArr = this.startPointArr.map((point) => {
      let np = getRotatedPoint(point[0], point[1], cx, cy, rotate);
      return [np.x, np.y, ...point.slice(2)];
    });
    this.updateMultiPointBoundingRect();
  }
  getEndpointList() {
    return this.pointArr.map((point) => {
      let center = getElementCenterPoint(this);
      let np = getRotatedPoint(
        point[0],
        point[1],
        center.x,
        center.y,
        this.rotate
      );
      return {
        x: np.x,
        y: np.y
      };
    });
  }
}
class Freedraw extends BaseMultiPointElement {
  constructor(...args) {
    super(...args);
    this.dragElement = new DragElement(this, this.app);
    this.lastLineWidth = -1;
  }
  render() {
    let { pointArr } = this;
    this.warpRender(({ cx, cy }) => {
      drawFreeLine(this.app.ctx, pointArr, {
        app: this.app,
        cx,
        cy
      });
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtFreedrawLineEdge(this, rp);
  }
  singleRender(mx, my, tx, ty, lineWidth) {
    this.app.ctx.save();
    this.setStyle(this.style);
    drawLineSegment(this.app.ctx, mx, my, tx, ty, lineWidth);
    this.app.ctx.restore();
  }
}
class Arrow extends BaseMultiPointElement {
  constructor(...args) {
    super(...args);
    this.dragElement = new DragElement(this, this.app);
  }
  render() {
    let { pointArr, fictitiousPoint } = this;
    this.warpRender(({ cx, cy }) => {
      let realtimePoint = [];
      if (pointArr.length > 0 && this.isCreating) {
        let { x: fx, y: fy } = this.app.coordinate.transform(
          fictitiousPoint.x - cx,
          fictitiousPoint.y - cy
        );
        realtimePoint = [[fx, fy]];
      }
      drawArrow(
        this.app.ctx,
        pointArr.map((point) => {
          let { x, y } = this.app.coordinate.transform(point[0], point[1]);
          return [x - cx, y - cy];
        }).concat(realtimePoint)
      );
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtArrowEdge(this, rp);
  }
}
class Image$1 extends BaseElement {
  constructor(opts = {}, app) {
    super(opts, app);
    this.dragElement = new DragElement(this, this.app, {
      lockRatio: true
    });
    this.url = opts.url || "";
    this.imageObj = opts.imageObj || null;
    this.ratio = opts.ratio || 1;
  }
  serialize() {
    let base = super.serialize();
    return __spreadProps(__spreadValues({}, base), {
      url: this.url,
      ratio: this.ratio
    });
  }
  render() {
    let { width, height } = this;
    this.warpRender(({ halfWidth, halfHeight }) => {
      drawImage(this.app.ctx, this, -halfWidth, -halfHeight, width, height);
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtRectangleInner(this, rp);
  }
}
class Line extends BaseMultiPointElement {
  constructor(opts = {}, app) {
    super(opts, app);
    this.dragElement = new DragElement(this, this.app);
    this.isSingle = opts.isSingle;
  }
  render() {
    let { pointArr, fictitiousPoint } = this;
    this.warpRender(({ cx, cy }) => {
      let realtimePoint = [];
      if (pointArr.length > 0 && this.isCreating) {
        let { x: fx, y: fy } = this.app.coordinate.transform(
          fictitiousPoint.x - cx,
          fictitiousPoint.y - cy
        );
        realtimePoint = [[fx, fy]];
      }
      drawLine(
        this.app.ctx,
        pointArr.map((point) => {
          let { x, y } = this.app.coordinate.transform(point[0], point[1]);
          return [x - cx, y - cy];
        }).concat(realtimePoint)
      );
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtLineEdge(this, rp);
  }
}
class Text extends BaseElement {
  constructor(opts = {}, app) {
    var _a, _b, _c, _d;
    super(opts, app);
    this.dragElement = new DragElement(this, this.app, {
      lockRatio: true
    });
    this.text = opts.text || "";
    this.style.fillStyle = ((_a = opts.style) == null ? void 0 : _a.fillStyle) || this.app.state.strokeStyle || "#000";
    this.style.fontSize = ((_b = opts.style) == null ? void 0 : _b.fontSize) || this.app.state.fontSize || 18;
    this.style.lineHeightRatio = ((_c = opts.style) == null ? void 0 : _c.lineHeightRatio) || 1.5;
    this.style.fontFamily = ((_d = opts.style) == null ? void 0 : _d.fontFamily) || this.app.state.fontFamily || "\u5FAE\u8F6F\u96C5\u9ED1, Microsoft YaHei";
  }
  serialize() {
    let base = super.serialize();
    return __spreadProps(__spreadValues({}, base), {
      text: this.text
    });
  }
  render() {
    this.warpRender(({ halfWidth, halfHeight }) => {
      drawText(this.app.ctx, this, -halfWidth, -halfHeight);
    });
    this.renderDragElement();
  }
  isHit(x, y) {
    let rp = transformPointOnElement(x, y, this);
    return checkIsAtRectangleInner(this, rp);
  }
  updateRect(x, y, width, height) {
    let { text, style } = this;
    let fontSize = Math.floor(
      height / splitTextLines(text).length / style.lineHeightRatio
    );
    this.style.fontSize = fontSize;
    super.updateRect(x, y, width, height);
  }
  updateTextSize() {
    let { width, height } = getTextElementSize(this);
    this.width = width;
    this.height = height;
  }
}
class Elements$1 {
  constructor(app) {
    this.app = app;
    this.elementList = [];
    this.activeElement = null;
    this.isCreatingElement = false;
    this.isResizing = false;
    this.resizingElement = null;
    this.handleResize = throttle(this.handleResize, this, 16);
  }
  serialize(stringify = false) {
    let data = this.elementList.map((element) => {
      return element.serialize();
    });
    return stringify ? JSON.stringify(data) : data;
  }
  getElementsNum() {
    return this.elementList.length;
  }
  hasElements() {
    return this.elementList.length > 0;
  }
  addElement(element) {
    this.elementList.push(element);
    return this;
  }
  unshiftElement(element) {
    this.elementList.unshift(element);
    return this;
  }
  insertElement(element, index) {
    this.elementList.splice(index, 0, element);
  }
  deleteElement(element) {
    let index = this.getElementIndex(element);
    if (index !== -1) {
      this.elementList.splice(index, 1);
      if (element.isActive) {
        this.cancelActiveElement(element);
      }
    }
    return this;
  }
  deleteAllElements() {
    this.activeElement = null;
    this.elementList = [];
    this.isCreatingElement = false;
    this.isResizing = false;
    this.resizingElement = null;
    return this;
  }
  getElementIndex(element) {
    return this.elementList.findIndex((item) => {
      return item === element;
    });
  }
  createElementsFromData(data) {
    data.forEach((item) => {
      let element = this.pureCreateElement(item);
      element.isActive = false;
      element.isCreating = false;
      this.addElement(element);
    });
    this.app.group.initIdToElementList(this.elementList);
    return this;
  }
  hasActiveElement() {
    return !!this.activeElement;
  }
  setActiveElement(element) {
    this.cancelActiveElement();
    this.activeElement = element;
    if (element) {
      element.isActive = true;
    }
    this.app.emit("activeElementChange", this.activeElement);
    return this;
  }
  cancelActiveElement() {
    if (!this.hasActiveElement()) {
      return this;
    }
    this.activeElement.isActive = false;
    this.activeElement = null;
    this.app.emit("activeElementChange", this.activeElement);
    return this;
  }
  checkIsHitElement(e) {
    let x = e.unGridClientX;
    let y = e.unGridClientY;
    for (let i = this.elementList.length - 1; i >= 0; i--) {
      let element = this.elementList[i];
      if (element.isHit(x, y)) {
        return element;
      }
    }
    return null;
  }
  pureCreateElement(opts = {}) {
    switch (opts.type) {
      case "rectangle":
        return new Rectangle(opts, this.app);
      case "diamond":
        return new Diamond(opts, this.app);
      case "triangle":
        return new Triangle(opts, this.app);
      case "circle":
        return new Circle(opts, this.app);
      case "freedraw":
        return new Freedraw(opts, this.app);
      case "image":
        return new Image$1(opts, this.app);
      case "arrow":
        return new Arrow(opts, this.app);
      case "line":
        return new Line(opts, this.app);
      case "text":
        return new Text(opts, this.app);
      default:
        return null;
    }
  }
  createElement(opts = {}, callback = () => {
  }, ctx = null, notActive) {
    if (this.hasActiveElement() || this.isCreatingElement) {
      return this;
    }
    let element = this.pureCreateElement(opts);
    if (!element) {
      return this;
    }
    this.addElement(element);
    if (!notActive) {
      this.setActiveElement(element);
    }
    this.isCreatingElement = true;
    callback.call(ctx, element);
    return this;
  }
  copyElement(element, notActive = false, pos) {
    return new Promise((resolve) => __async(this, null, function* () {
      if (!element) {
        return resolve();
      }
      let data = this.app.group.handleCopyElementData(element.serialize());
      if (data.type === "image") {
        data.imageObj = yield createImageObj(data.url);
      }
      this.createElement(
        data,
        (element2) => {
          this.app.group.handleCopyElement(element2);
          element2.startResize(DRAG_ELEMENT_PARTS.BODY);
          let ox = 20;
          let oy = 20;
          if (pos) {
            ox = pos.x - element2.x - element2.width / 2;
            oy = pos.y - element2.y - element2.height / 2;
          }
          let gridAdsorbentPos = this.app.coordinate.gridAdsorbent(ox, oy);
          element2.resize(
            null,
            null,
            null,
            gridAdsorbentPos.x,
            gridAdsorbentPos.y
          );
          element2.isCreating = false;
          if (notActive) {
            element2.isActive = false;
          }
          this.isCreatingElement = false;
          resolve(element2);
        },
        this,
        notActive
      );
    }));
  }
  creatingRectangleLikeElement(type, x, y, offsetX, offsetY) {
    this.createElement({
      type,
      x,
      y,
      width: offsetX,
      height: offsetY
    });
    this.activeElement.updateSize(offsetX, offsetY);
  }
  creatingCircle(x, y, e) {
    this.createElement({
      type: "circle",
      x,
      y
    });
    let radius = getTowPointDistance(e.clientX, e.clientY, x, y);
    this.activeElement.updateSize(radius, radius);
  }
  creatingFreedraw(e, event) {
    this.createElement({
      type: "freedraw"
    });
    let element = this.activeElement;
    let lineWidth = computedLineWidthBySpeed(
      event.mouseSpeed,
      element.lastLineWidth
    );
    element.lastLineWidth = lineWidth;
    element.addPoint(e.clientX, e.clientY, lineWidth);
    let { coordinate, ctx, state } = this.app;
    let tfp = coordinate.transformToCanvasCoordinate(
      coordinate.subScrollX(event.lastMousePos.x),
      coordinate.subScrollY(event.lastMousePos.y)
    );
    let ttp = coordinate.transformToCanvasCoordinate(
      coordinate.subScrollX(e.clientX),
      coordinate.subScrollY(e.clientY)
    );
    ctx.save();
    ctx.scale(state.scale, state.scale);
    element.singleRender(tfp.x, tfp.y, ttp.x, ttp.y, lineWidth);
    ctx.restore();
  }
  creatingImage(e, { width, height, imageObj, url, ratio }) {
    let gp = this.app.coordinate.gridAdsorbent(
      e.unGridClientX - width / 2,
      e.unGridClientY - height / 2
    );
    this.createElement({
      type: "image",
      x: gp.x,
      y: gp.y,
      url,
      imageObj,
      width,
      height,
      ratio
    });
  }
  editingText(element) {
    if (element.type !== "text") {
      return;
    }
    element.noRender = true;
    this.setActiveElement(element);
  }
  completeEditingText() {
    let element = this.activeElement;
    if (!element || element.type !== "text") {
      return;
    }
    if (!element.text.trim()) {
      this.deleteElement(element);
      this.setActiveElement(null);
      return;
    }
    element.noRender = false;
  }
  completeCreateArrow(e) {
    this.activeElement.addPoint(e.clientX, e.clientY);
  }
  creatingArrow(x, y, e) {
    this.createElement(
      {
        type: "arrow",
        x,
        y
      },
      (element) => {
        element.addPoint(x, y);
      }
    );
    this.activeElement.updateFictitiousPoint(e.clientX, e.clientY);
  }
  creatingLine(x, y, e, isSingle = false, notCreate = false) {
    if (!notCreate) {
      this.createElement(
        {
          type: "line",
          x,
          y,
          isSingle
        },
        (element2) => {
          element2.addPoint(x, y);
        }
      );
    }
    let element = this.activeElement;
    if (element) {
      element.updateFictitiousPoint(e.clientX, e.clientY);
    }
  }
  completeCreateLine(e, completeCallback = () => {
  }) {
    let element = this.activeElement;
    let x = e.clientX;
    let y = e.clientY;
    if (element && element.isSingle) {
      element.addPoint(x, y);
      completeCallback();
    } else {
      this.createElement({
        type: "line",
        isSingle: false
      });
      element = this.activeElement;
      element.addPoint(x, y);
      element.updateFictitiousPoint(x, y);
    }
  }
  completeCreateElement() {
    this.isCreatingElement = false;
    let element = this.activeElement;
    if (!element) {
      return this;
    }
    if (["freedraw", "arrow", "line"].includes(element.type)) {
      element.updateMultiPointBoundingRect();
    }
    element.isCreating = false;
    this.app.emitChange();
    return this;
  }
  setActiveElementStyle(style = {}) {
    if (!this.hasActiveElement()) {
      return this;
    }
    Object.keys(style).forEach((key) => {
      this.activeElement.style[key] = style[key];
      if (key === "fontSize" && this.activeElement.type === "text") {
        this.activeElement.updateTextSize();
      }
    });
    return this;
  }
  checkInResizeHand(x, y) {
    let element = this.activeElement;
    let hand = element.dragElement.checkPointInDragElementWhere(x, y);
    if (hand) {
      return {
        element,
        hand
      };
    }
    return null;
  }
  checkIsResize(x, y, e) {
    if (!this.hasActiveElement()) {
      return false;
    }
    let res = this.checkInResizeHand(x, y);
    if (res) {
      this.isResizing = true;
      this.resizingElement = res.element;
      this.resizingElement.startResize(res.hand, e);
      this.app.cursor.setResize(res.hand);
      return true;
    }
    return false;
  }
  handleResize(...args) {
    if (!this.isResizing) {
      return;
    }
    this.resizingElement.resize(...args);
    this.app.render.render();
  }
  endResize() {
    this.isResizing = false;
    this.resizingElement.endResize();
    this.resizingElement = null;
  }
}
class ImageEdit extends EventEmitter {
  constructor(app) {
    super();
    this.app = app;
    this.el = null;
    this.isReady = false;
    this.previewEl = null;
    this.imageData = null;
    this.maxWidth = 750;
    this.maxHeight = 450;
    this.maxRatio = this.maxWidth / this.maxHeight;
    this.onImageSelectChange = this.onImageSelectChange.bind(this);
  }
  reset() {
    this.el.value = "";
    this.isReady = false;
    document.body.removeChild(this.previewEl);
    this.previewEl = null;
    this.imageData = null;
  }
  selectImage() {
    if (!this.el) {
      this.el = document.createElement("input");
      this.el.type = "file";
      this.el.accept = "image/*";
      this.el.style.position = "fixed";
      this.el.style.left = "-999999px";
      this.el.addEventListener("change", this.onImageSelectChange);
      document.body.appendChild(this.el);
    }
    this.el.click();
  }
  updatePreviewElPos(x, y) {
    let width = 100;
    let height = width / this.imageData.ratio;
    if (!this.previewEl) {
      this.previewEl = document.createElement("div");
      this.previewEl.style.position = "fixed";
      this.previewEl.style.width = width + "px";
      this.previewEl.style.height = height + "px";
      this.previewEl.style.backgroundImage = `url('${this.imageData.url}')`;
      this.previewEl.style.backgroundSize = "cover";
      this.previewEl.style.pointerEvents = "none";
      document.body.appendChild(this.previewEl);
    }
    let tp = this.app.coordinate.containerToWindow(x, y);
    this.previewEl.style.left = tp.x - width / 2 + "px";
    this.previewEl.style.top = tp.y - height / 2 + "px";
  }
  getImageSize(url) {
    return __async(this, null, function* () {
      return new Promise((resolve, reject) => {
        let img = new Image();
        img.setAttribute("crossOrigin", "anonymous");
        img.onload = () => {
          let width = img.width;
          let height = img.height;
          let ratio = img.width / img.height;
          if (img.width > this.maxWidth || img.height > this.maxHeight) {
            if (ratio > this.maxRatio) {
              width = this.maxWidth;
              height = this.maxWidth / ratio;
            } else {
              height = this.maxHeight;
              width = this.maxHeight * ratio;
            }
          }
          resolve({
            imageObj: img,
            size: {
              width,
              height
            },
            ratio
          });
        };
        img.onerror = () => {
          reject();
        };
        img.src = url;
      });
    });
  }
  onImageSelectChange(e) {
    return __async(this, null, function* () {
      let url = yield this.getImageUrl(e.target.files[0]);
      let { imageObj, size, ratio } = yield this.getImageSize(url);
      this.isReady = true;
      this.imageData = __spreadProps(__spreadValues({
        url
      }, size), {
        ratio,
        imageObj
      });
      this.emit("imageSelectChange", this.imageData);
    });
  }
  getImageUrl(file) {
    return __async(this, null, function* () {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onloadend = () => {
          resolve(reader.result);
        };
        reader.onerror = () => {
          reject();
        };
        reader.readAsDataURL(file);
      });
    });
  }
}
class Cursor {
  constructor(app) {
    this.app = app;
    this.currentType = "default";
  }
  set(type = "default") {
    this.currentType = type;
    let style = type;
    if (type === "eraser") {
      style = `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAARRJREFUOE/dlDFLxEAQhd+BVouFZ3vlQuwSyI+5a7PBRkk6k9KzTOwStJFsWv0xgaQzkNLWszim0kL2OOFc9oKRYHFTz37Lm/dmJhi5JiPzcBjAOYDz7WheADz3jalP8oIxds85P3Zd90RBqqpad133SUSXAJ5M4H3AhWVZd1EUzYQQP96VZYkkSV7btr02QY1Axtgqz/NTz/OM6qSUCMNwRURneoMJOLdt+7Gu643MfeU4zrppmgt9pibgjRBiWRRFb0R934eUcgngdrfxX4CjSwZj7C3Lsqnu8Lc05XQQBO9ENP2NKapnE5s4jme608rhNE2HxWb7qwr2A+f8SAv2BxFdDQ32rpLRVu9Pl+0wztcg6V/VPW4Vw1FsawAAAABJRU5ErkJggg==) 10 10, auto`;
    }
    this.app.container.style.cursor = style;
  }
  hide() {
    this.set("none");
  }
  reset() {
    this.set();
  }
  setCrosshair() {
    this.set("crosshair");
  }
  setMove() {
    this.set("move");
  }
  setResize(dir) {
    let type = "";
    switch (dir) {
      case DRAG_ELEMENT_PARTS.BODY:
        type = "move";
        break;
      case DRAG_ELEMENT_PARTS.ROTATE:
        type = "grab";
        break;
      case DRAG_ELEMENT_PARTS.TOP_LEFT_BTN:
        type = "nw-resize";
        break;
      case DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN:
        type = "ne-resize";
        break;
      case DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN:
        type = "se-resize";
        break;
      case DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN:
        type = "sw-resize";
        break;
    }
    this.set(type);
  }
  setEraser() {
    this.set("eraser");
  }
}
class TextEdit extends EventEmitter {
  constructor(app) {
    super();
    this.app = app;
    this.editable = null;
    this.isEditing = false;
    this.onTextInput = this.onTextInput.bind(this);
    this.onTextBlur = this.onTextBlur.bind(this);
  }
  crateTextInputEl() {
    this.editable = document.createElement("textarea");
    this.editable.dir = "auto";
    this.editable.tabIndex = 0;
    this.editable.wrap = "off";
    this.editable.className = "textInput";
    Object.assign(this.editable.style, {
      position: "fixed",
      display: "block",
      minHeight: "1em",
      backfaceVisibility: "hidden",
      margin: 0,
      padding: 0,
      border: 0,
      outline: 0,
      resize: "none",
      background: "transparent",
      overflow: "hidden",
      whiteSpace: "pre"
    });
    this.editable.addEventListener("input", this.onTextInput);
    this.editable.addEventListener("blur", this.onTextBlur);
    document.body.appendChild(this.editable);
  }
  updateTextInputStyle() {
    let activeElement = this.app.elements.activeElement;
    if (!activeElement) {
      return;
    }
    let { x, y, width, height, style, text, rotate } = activeElement;
    let { coordinate, state } = this.app;
    this.editable.value = text;
    x = coordinate.subScrollX(x);
    y = coordinate.subScrollY(y);
    let sp = coordinate.scale(x, y);
    let tp = coordinate.containerToWindow(sp.x, sp.y);
    let fontSize = style.fontSize * state.scale;
    let styles = {
      font: getFontString(fontSize, style.fontFamily),
      lineHeight: `${fontSize * style.lineHeightRatio}px`,
      left: `${tp.x}px`,
      top: `${tp.y}px`,
      color: style.fillStyle,
      width: Math.max(width, 100) * state.scale + "px",
      height: height * state.scale + "px",
      transform: `rotate(${rotate}deg)`,
      opacity: style.globalAlpha
    };
    Object.assign(this.editable.style, styles);
  }
  onTextInput() {
    let activeElement = this.app.elements.activeElement;
    if (!activeElement) {
      return;
    }
    activeElement.text = this.editable.value;
    let { width, height } = getTextElementSize(activeElement);
    activeElement.width = width;
    activeElement.height = height;
    this.updateTextInputStyle();
  }
  onTextBlur() {
    this.editable.style.display = "none";
    this.editable.value = "";
    this.emit("blur");
    this.isEditing = false;
  }
  showTextEdit() {
    if (!this.editable) {
      this.crateTextInputEl();
    } else {
      this.editable.style.display = "block";
    }
    this.updateTextInputStyle();
    this.editable.focus();
    this.editable.select();
    this.isEditing = true;
  }
}
class History {
  constructor(app) {
    this.app = app;
    this.historyStack = [];
    this.length = 0;
    this.index = -1;
  }
  add(data) {
    let prev = this.length > 0 ? this.historyStack[this.length - 1] : null;
    let copyData = deepCopy(data);
    if (copyData === prev) {
      return;
    }
    this.historyStack.push(copyData);
    this.length++;
    this.index = this.length - 1;
    this.emitChange();
  }
  undo() {
    if (this.index <= 0) {
      return;
    }
    this.index--;
    this.shuttle();
  }
  redo() {
    if (this.index >= this.length - 1) {
      return;
    }
    this.index++;
    this.shuttle();
  }
  shuttle() {
    return __async(this, null, function* () {
      let data = this.historyStack[this.index];
      yield this.app.setData(data, true);
      this.emitChange();
      this.app.emit("change", data);
    });
  }
  clear() {
    this.index = -1;
    this.length = 0;
    this.historyStack = [];
    this.emitChange();
  }
  emitChange() {
    this.app.emit("shuttle", this.index, this.length);
  }
}
class Export {
  constructor(app) {
    this.app = app;
    this.openTest = false;
    this.saveState = {
      scale: 0,
      scrollX: 0,
      scrollY: 0,
      width: 0,
      height: 0
    };
  }
  show(canvas) {
    if (this.openTest) {
      canvas.style.cssText = `
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
      `;
      document.body.appendChild(canvas);
    }
  }
  getElementList(onlySelected = true) {
    if (!onlySelected) {
      return this.app.elements.elementList;
    } else {
      let selectedElements = [];
      if (this.app.elements.activeElement) {
        selectedElements.push(this.app.elements.activeElement);
      } else if (this.app.selection.hasSelectionElements()) {
        selectedElements = this.app.selection.getSelectionElements();
      }
      let res = this.app.elements.elementList.filter((element) => {
        return selectedElements.includes(element);
      });
      return res;
    }
  }
  exportImage({
    type = "image/png",
    renderBg = true,
    useBlob = false,
    paddingX = 10,
    paddingY = 10,
    onlySelected
  } = {}) {
    let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
      this.getElementList(onlySelected)
    );
    let width = maxx - minx + paddingX * 2;
    let height = maxy - miny + paddingY * 2;
    let { canvas, ctx } = createCanvas(width, height, {
      noStyle: true,
      noTranslate: true
    });
    this.show(canvas);
    this.saveAppState();
    this.changeAppState(minx - paddingX, miny - paddingY, ctx);
    if (renderBg && this.app.state.backgroundColor) {
      this.app.background.canvasAddBackgroundColor(
        ctx,
        width,
        height,
        this.app.state.backgroundColor
      );
    }
    this.render(ctx, onlySelected);
    this.recoveryAppState();
    if (useBlob) {
      return new Promise((resolve, reject) => {
        canvas.toBlob((blob) => {
          if (blob) {
            resolve(blob);
          } else {
            reject();
          }
        }, type);
      });
    } else {
      return canvas.toDataURL(type);
    }
  }
  saveAppState() {
    let { width, height, state, ctx } = this.app;
    this.saveState.width = width;
    this.saveState.height = height;
    this.saveState.scale = state.scale;
    this.saveState.scrollX = state.scrollX;
    this.saveState.scrollY = state.scrollY;
    this.saveState.ctx = ctx;
  }
  changeAppState(minx, miny, ctx) {
    this.app.ctx = ctx;
    this.app.state.scale = 1;
    this.app.state.scrollX = 0;
    this.app.state.scrollY = 0;
    this.app.width = minx * 2;
    this.app.height = miny * 2;
  }
  recoveryAppState() {
    let { width, height, scale, scrollX, scrollY, ctx } = this.saveState;
    this.app.state.scale = scale;
    this.app.state.scrollX = scrollX;
    this.app.state.scrollY = scrollY;
    this.app.width = width;
    this.app.height = height;
    this.app.ctx = ctx;
  }
  render(ctx, onlySelected) {
    ctx.save();
    this.getElementList(onlySelected).forEach((element) => {
      if (element.noRender) {
        return;
      }
      let cacheActive = element.isActive;
      let cacheSelected = element.isSelected;
      element.isActive = false;
      element.isSelected = false;
      element.render();
      element.isActive = cacheActive;
      element.isSelected = cacheSelected;
    });
    ctx.restore();
  }
  exportJson() {
    return this.app.getData();
  }
}
class Background {
  constructor(app) {
    this.app = app;
  }
  set() {
    if (this.app.state.backgroundColor) {
      this.addBackgroundColor();
    } else {
      this.remove();
    }
  }
  addBackgroundColor() {
    this.app.container.style.backgroundColor = this.app.state.backgroundColor;
  }
  remove() {
    this.app.container.style.backgroundColor = "";
  }
  canvasAddBackgroundColor(ctx, width, height, backgroundColor) {
    ctx.save();
    ctx.rect(0, 0, width, height);
    ctx.fillStyle = backgroundColor;
    ctx.fill();
    ctx.restore();
  }
}
class Canvas {
  constructor(width, height, opt) {
    this.width = width;
    this.height = height;
    let { canvas, ctx } = createCanvas(width, height, opt);
    this.el = canvas;
    this.ctx = ctx;
  }
  clearCanvas() {
    let { width, height } = this;
    this.ctx.clearRect(-width / 2, -height / 2, width, height);
  }
}
class MultiSelectElement extends BaseElement {
  constructor(opts = {}, app) {
    super(opts, app);
    this.dragElement = new DragElement(this, this.app);
    this.selectedElementList = [];
    this.wholeCenterPos = { x: 0, y: 0 };
  }
  setSelectedElementList(list) {
    this.selectedElementList.forEach((element) => {
      element.isSelected = false;
    });
    this.selectedElementList = list;
    this.selectedElementList.forEach((element) => {
      element.isSelected = true;
    });
  }
  updateElements(elements) {
    let exists = [];
    this.selectedElementList.forEach((element) => {
      if (elements.includes(element)) {
        exists.push(element);
      }
    });
    this.setSelectedElementList(exists);
  }
  updateRect() {
    if (this.selectedElementList.length <= 0) {
      super.updateRect(0, 0, 0, 0);
      return;
    }
    let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
      this.selectedElementList
    );
    super.updateRect(minx, miny, maxx - minx, maxy - miny);
  }
  startResize(...args) {
    this.selectedElementList.forEach((element) => {
      if (args[0] === "rotate") {
        this.wholeCenterPos = getElementCenterPoint(this);
      }
      element.startResize(...args);
    });
  }
  resize(...args) {
    this.selectedElementList.forEach((element) => {
      if (element.dragElement.resizeType === "rotate") {
        this.handleRotate(element, ...args);
      } else {
        element.resize(...args);
      }
    });
  }
  handleRotate(element, e, mx, my, offsetX, offsetY) {
    let rotate = getTowPointRotate(
      this.wholeCenterPos.x,
      this.wholeCenterPos.y,
      e.clientX,
      e.clientY,
      mx,
      my
    );
    element.rotateByCenter(rotate, this.wholeCenterPos.x, this.wholeCenterPos.y);
  }
  endResize() {
    this.selectedElementList.forEach((element) => {
      element.endResize();
    });
  }
  render() {
    if (this.selectedElementList.length > 0) {
      if (this.width <= 0 || this.height <= 0) {
        return;
      }
      this.dragElement.render();
    }
  }
}
class Selection {
  constructor(app) {
    this.app = app;
    this.canvas = null;
    this.ctx = null;
    this.creatingSelection = false;
    this.hasSelection = false;
    this.isResizing = false;
    this.state = this.app.state;
    this.width = this.app.width;
    this.height = this.app.height;
    this.coordinate = new Coordinate(this);
    this.rectangle = new Rectangle(
      {
        type: "rectangle",
        style: {
          strokeStyle: "rgba(9,132,227,0.3)",
          fillStyle: "rgba(9,132,227,0.3)"
        }
      },
      this
    );
    this.multiSelectElement = new MultiSelectElement(
      {
        type: "multiSelectElement"
      },
      this
    );
    this.checkInNodes = throttle(this.checkInNodes, this, 500);
    this.handleResize = throttle(this.handleResize, this, 16);
    this.init();
    this.bindEvent();
  }
  init() {
    if (this.canvas) {
      this.app.container.removeChild(this.canvas.el);
    }
    this.width = this.app.width;
    this.height = this.app.height;
    this.canvas = new Canvas(this.width, this.height, {
      className: "selection"
    });
    this.ctx = this.canvas.ctx;
    this.app.container.appendChild(this.canvas.el);
  }
  bindEvent() {
    this.app.on("change", () => {
      this.state = this.app.state;
      this.multiSelectElement.updateElements(this.app.elements.elementList);
      this.renderSelection();
    });
    this.app.on("scrollChange", () => {
      this.renderSelection();
    });
    this.app.on("zoomChange", () => {
      this.renderSelection();
    });
  }
  onMousedown(e, event) {
    if (e.originEvent.which !== 1) {
      return;
    }
    this.creatingSelection = true;
    this.rectangle.updatePos(event.mousedownPos.x, event.mousedownPos.y);
  }
  onMousemove(e, event) {
    if (Math.abs(event.mouseOffset.x) <= 10 && Math.abs(event.mouseOffset.y) <= 10) {
      return;
    }
    this.onMove(e, event);
  }
  onMouseup() {
    this.creatingSelection = false;
    this.rectangle.updateRect(0, 0, 0, 0);
    this.hasSelection = this.hasSelectionElements();
    this.multiSelectElement.updateRect();
    this.renderSelection();
    this.emitChange();
  }
  reset() {
    this.setMultiSelectElements([]);
    this.hasSelection = false;
    this.renderSelection();
    this.emitChange();
  }
  renderSelection() {
    this.canvas.clearCanvas();
    this.ctx.save();
    this.ctx.scale(this.app.state.scale, this.app.state.scale);
    this.rectangle.render();
    this.multiSelectElement.render();
    this.ctx.restore();
  }
  onMove(e, event) {
    this.rectangle.updateSize(event.mouseOffset.x, event.mouseOffset.y);
    this.renderSelection();
    this.checkInElements(e, event);
  }
  checkInElements(e, event) {
    let minx = Math.min(event.mousedownPos.x, e.clientX);
    let miny = Math.min(event.mousedownPos.y, e.clientY);
    let maxx = Math.max(event.mousedownPos.x, e.clientX);
    let maxy = Math.max(event.mousedownPos.y, e.clientY);
    let selectedElementList = [];
    this.app.elements.elementList.forEach((element) => {
      let _minx = Infinity;
      let _maxx = -Infinity;
      let _miny = Infinity;
      let _maxy = -Infinity;
      let endPointList = element.getEndpointList();
      let rect = getBoundingRect(
        endPointList.map((point) => {
          return [point.x, point.y];
        }),
        true
      );
      rect.forEach(({ x, y }) => {
        if (x < _minx) {
          _minx = x;
        }
        if (x > _maxx) {
          _maxx = x;
        }
        if (y < _miny) {
          _miny = y;
        }
        if (y > _maxy) {
          _maxy = y;
        }
      });
      if (_minx >= minx && _maxx <= maxx && _miny >= miny && _maxy <= maxy) {
        selectedElementList.push(element);
      }
    });
    let finalList = [...selectedElementList];
    selectedElementList.forEach((item) => {
      if (item.hasGroup()) {
        finalList.push(...this.app.group.getGroupElements(item));
      }
    });
    finalList = new Set(finalList);
    finalList = Array.from(finalList);
    this.setMultiSelectElements(finalList, true);
    this.app.render.render();
  }
  checkInResizeHand(x, y) {
    return this.multiSelectElement.dragElement.checkPointInDragElementWhere(
      x,
      y
    );
  }
  checkIsResize(x, y, e) {
    if (!this.hasSelection) {
      return false;
    }
    let hand = this.multiSelectElement.dragElement.checkPointInDragElementWhere(
      x,
      y
    );
    if (hand) {
      this.isResizing = true;
      this.multiSelectElement.startResize(hand, e);
      this.app.cursor.setResize(hand);
      return true;
    }
    return false;
  }
  handleResize(...args) {
    if (!this.isResizing) {
      return;
    }
    this.multiSelectElement.resize(...args);
    this.app.render.render();
    this.multiSelectElement.updateRect();
    this.renderSelection();
  }
  endResize() {
    this.isResizing = false;
    this.multiSelectElement.endResize();
  }
  setSelectedElementStyle(style = {}) {
    if (!this.hasSelectionElements()) {
      return;
    }
    Object.keys(style).forEach((key) => {
      this.getSelectionElements().forEach((element) => {
        element.style[key] = style[key];
        if (key === "fontSize" && element.type === "text") {
          element.updateTextSize();
          this.multiSelectElement.updateRect();
        }
      });
    });
    this.app.render.render();
    this.app.emitChange();
  }
  deleteSelectedElements() {
    this.getSelectionElements().forEach((element) => {
      this.app.elements.deleteElement(element);
    });
    this.selectElements([]);
    this.app.emitChange();
  }
  hasSelectionElements() {
    return this.getSelectionElements().length > 0;
  }
  getSelectionElements() {
    return this.multiSelectElement.selectedElementList;
  }
  copySelectionElements(pos) {
    return __async(this, null, function* () {
      let task = this.getSelectionElements().map((element) => {
        return this.app.elements.copyElement(element, true);
      });
      this.app.group.clearCopyMap();
      let elements = yield Promise.all(task);
      this.setMultiSelectElements(elements);
      if (pos) {
        this.multiSelectElement.startResize(DRAG_ELEMENT_PARTS.BODY);
        let ox = pos.x - this.multiSelectElement.x - this.multiSelectElement.width / 2;
        let oy = pos.y - this.multiSelectElement.y - this.multiSelectElement.height / 2;
        let gridAdsorbentPos = this.app.coordinate.gridAdsorbent(ox, oy);
        this.multiSelectElement.resize(
          null,
          null,
          null,
          gridAdsorbentPos.x,
          gridAdsorbentPos.y
        );
        this.multiSelectElement.endResize();
        this.multiSelectElement.updateRect();
      }
      this.app.render.render();
      this.renderSelection();
      this.app.emitChange();
    });
  }
  selectElements(elements = []) {
    this.hasSelection = elements.length > 0;
    this.setMultiSelectElements(elements);
    this.app.render.render();
    this.renderSelection();
    this.emitChange();
  }
  setMultiSelectElements(elements = [], notUpdateRect) {
    this.multiSelectElement.setSelectedElementList(elements);
    if (!notUpdateRect) {
      this.multiSelectElement.updateRect();
    }
  }
  emitChange() {
    this.app.emit("multiSelectChange", this.getSelectionElements());
  }
}
class Grid {
  constructor(app) {
    this.app = app;
    this.canvas = null;
    this.ctx = null;
    this.init();
    this.app.on("zoomChange", this.renderGrid, this);
    this.app.on("scrollChange", this.renderGrid, this);
  }
  init() {
    if (this.canvas) {
      this.app.container.removeChild(this.canvas.el);
    }
    let { width, height } = this.app;
    this.canvas = new Canvas(width, height, {
      className: "grid"
    });
    this.ctx = this.canvas.ctx;
    this.app.container.insertBefore(
      this.canvas.el,
      this.app.container.children[0]
    );
  }
  drawHorizontalLine(i) {
    let { coordinate, width, state } = this.app;
    let _i = coordinate.subScrollY(i);
    this.ctx.beginPath();
    this.ctx.moveTo(-width / state.scale / 2, _i);
    this.ctx.lineTo(width / state.scale / 2, _i);
    this.ctx.stroke();
  }
  renderHorizontalLines() {
    let { coordinate, height, state } = this.app;
    let { gridConfig, scale } = state;
    let maxBottom = 0;
    for (let i = -height / 2; i < height / 2; i += gridConfig.size) {
      this.drawHorizontalLine(i);
      maxBottom = i;
    }
    for (let i = -height / 2 - gridConfig.size; i > -coordinate.subScrollY(height / scale / 2); i -= gridConfig.size) {
      this.drawHorizontalLine(i);
    }
    for (let i = maxBottom + gridConfig.size; i < coordinate.addScrollY(height / scale / 2); i += gridConfig.size) {
      this.drawHorizontalLine(i);
    }
  }
  drawVerticalLine(i) {
    let { coordinate, height, state } = this.app;
    let _i = coordinate.subScrollX(i);
    this.ctx.beginPath();
    this.ctx.moveTo(_i, -height / state.scale / 2);
    this.ctx.lineTo(_i, height / state.scale / 2);
    this.ctx.stroke();
  }
  renderVerticalLines() {
    let { coordinate, width, state } = this.app;
    let { gridConfig, scale } = state;
    let maxRight = 0;
    for (let i = -width / 2; i < width / 2; i += gridConfig.size) {
      this.drawVerticalLine(i);
      maxRight = i;
    }
    for (let i = -width / 2 - gridConfig.size; i > -coordinate.subScrollX(width / scale / 2); i -= gridConfig.size) {
      this.drawVerticalLine(i);
    }
    for (let i = maxRight + gridConfig.size; i < coordinate.addScrollX(width / scale / 2); i += gridConfig.size) {
      this.drawVerticalLine(i);
    }
  }
  renderGrid() {
    this.canvas.clearCanvas();
    let { gridConfig, scale, showGrid } = this.app.state;
    if (!showGrid) {
      return;
    }
    this.ctx.save();
    this.ctx.scale(scale, scale);
    this.ctx.strokeStyle = gridConfig.strokeStyle;
    this.ctx.lineWidth = gridConfig.lineWidth;
    this.renderHorizontalLines();
    this.renderVerticalLines();
    this.ctx.restore();
  }
  showGrid() {
    this.app.updateState({
      showGrid: true
    });
    this.renderGrid();
  }
  hideGrid() {
    this.app.updateState({
      showGrid: false
    });
    this.canvas.clearCanvas();
  }
  updateGrid(config = {}) {
    this.app.updateState({
      gridConfig: __spreadValues(__spreadValues({}, this.app.state.gridConfig), config)
    });
    if (this.app.state.showGrid) {
      this.hideGrid();
      this.showGrid();
    }
  }
}
const map = {
  Tab: 9,
  Enter: 13,
  Shift: 16,
  Control: 17,
  Alt: 18,
  CapsLock: 20,
  Esc: 27,
  Space: 32,
  PageUp: 33,
  PageDown: 34,
  End: 35,
  Home: 36,
  Insert: 45,
  Left: 37,
  Up: 38,
  Right: 39,
  Down: 40,
  Del: 46,
  NumLock: 144,
  Cmd: 91,
  CmdFF: 224,
  F1: 112,
  F2: 113,
  F3: 114,
  F4: 115,
  F5: 116,
  F6: 117,
  F7: 118,
  F8: 119,
  F9: 120,
  F10: 121,
  F11: 122,
  F12: 123,
  "`": 192,
  "=": 187,
  "+": 187,
  "-": 189,
  "'": 222,
  "/": 191,
  ".": 190
};
for (let i = 0; i <= 9; i++) {
  map[i] = i + 48;
}
"abcdefghijklmnopqrstuvwxyz".split("").forEach((n, index) => {
  map[n] = index + 65;
});
const keyMap = map;
class Mode {
  constructor(app) {
    this.app = app;
    this.startScrollX = 0;
    this.startScrollY = 0;
    this.isDragMode = false;
    this.onMove = throttle(this.onMove, this, 16);
    this.bindEvent();
  }
  bindEvent() {
    this.app.event.on("keydown", (e) => {
      if (e.keyCode === keyMap.Space) {
        this.isDragMode = true;
        this.app.cursor.set("grab");
      }
    });
    this.app.event.on("keyup", (e) => {
      if (this.isDragMode) {
        this.isDragMode = false;
        this.app.cursor.set("default");
      }
    });
  }
  setEditMode() {
    this.app.cursor.set("default");
    this.app.updateState({
      readonly: false
    });
  }
  setReadonlyMode() {
    this.app.cursor.set("grab");
    this.app.updateState({
      readonly: true
    });
  }
  onStart() {
    this.startScrollX = this.app.state.scrollX;
    this.startScrollY = this.app.state.scrollY;
  }
  onMove(e, event) {
    this.app.scrollTo(
      this.startScrollX - event.mouseOffset.originX / this.app.state.scale,
      this.startScrollY - event.mouseOffset.originY / this.app.state.scale
    );
  }
  onEnd() {
    this.startScrollX = 0;
    this.startScrollY = 0;
  }
}
class KeyCommand {
  constructor(app) {
    this.app = app;
    this.keyMap = keyMap;
    this.shortcutMap = {};
    this.bindEvent();
  }
  bindEvent() {
    this.app.event.on("keydown", this.onKeydown, this);
  }
  unBindEvent() {
    this.app.event.off("keydown", this.onKeydown);
  }
  onKeydown(e) {
    Object.keys(this.shortcutMap).forEach((key) => {
      if (this.checkKey(e, key)) {
        e.stopPropagation();
        e.preventDefault();
        this.shortcutMap[key].forEach((f) => {
          f.fn.call(f.ctx);
        });
      }
    });
  }
  checkKey(e, key) {
    let o = this.getOriginEventCodeArr(e);
    let k = this.getKeyCodeArr(key);
    if (o.length !== k.length) {
      return false;
    }
    for (let i = 0; i < o.length; i++) {
      let index = k.findIndex((item) => {
        return item === o[i];
      });
      if (index === -1) {
        return false;
      } else {
        k.splice(index, 1);
      }
    }
    return true;
  }
  getOriginEventCodeArr(e) {
    let arr = [];
    if (e.ctrlKey || e.metaKey) {
      arr.push(keyMap["Control"]);
    }
    if (e.altKey) {
      arr.push(keyMap["Alt"]);
    }
    if (e.shiftKey) {
      arr.push(keyMap["Shift"]);
    }
    if (!arr.includes(e.keyCode)) {
      arr.push(e.keyCode);
    }
    return arr;
  }
  getKeyCodeArr(key) {
    key = key.replace(/\+\+/, "+add");
    let keyArr = key.split(/\s*\+\s*/).map((item) => {
      return item === "add" ? "+" : item;
    });
    let arr = [];
    keyArr.forEach((item) => {
      arr.push(keyMap[item]);
    });
    return arr;
  }
  addShortcut(key, fn, ctx) {
    key.split(/\s*\|\s*/).forEach((item) => {
      if (this.shortcutMap[item]) {
        this.shortcutMap[item].push({
          fn,
          ctx
        });
      } else {
        this.shortcutMap[item] = [
          {
            fn,
            ctx
          }
        ];
      }
    });
  }
  removeShortcut(key, fn) {
    key.split(/\s*\|\s*/).forEach((item) => {
      if (this.shortcutMap[item]) {
        if (fn) {
          let index = this.shortcutMap[item].findIndex((f) => {
            return f.fn === fn;
          });
          if (index !== -1) {
            this.shortcutMap[item].splice(index, 1);
          }
        } else {
          this.shortcutMap[item] = [];
          delete this.shortcutMap[item];
        }
      }
    });
  }
}
class Render {
  constructor(app) {
    this.app = app;
    this.beingCopyActiveElement = null;
    this.beingCopySelectedElements = [];
    this.registerShortcutKeys();
  }
  clearCanvas() {
    let { width, height } = this.app;
    this.app.ctx.clearRect(-width / 2, -height / 2, width, height);
    return this;
  }
  render() {
    let { state } = this.app;
    this.clearCanvas();
    this.app.ctx.save();
    this.app.ctx.scale(state.scale, state.scale);
    this.app.elements.elementList.forEach((element) => {
      if (element.noRender) {
        return;
      }
      element.render();
    });
    this.app.group.render();
    this.app.ctx.restore();
    return this;
  }
  registerShortcutKeys() {
    this.app.keyCommand.addShortcut("Del|Backspace", () => {
      this.deleteCurrentElements();
    });
    this.app.keyCommand.addShortcut("Control+c", () => {
      this.copyCurrentElement();
    });
    this.app.keyCommand.addShortcut("Control+x", () => {
      this.cutCurrentElement();
    });
    this.app.keyCommand.addShortcut("Control+z", () => {
      this.app.history.undo();
    });
    this.app.keyCommand.addShortcut("Control+y", () => {
      this.app.history.redo();
    });
    this.app.keyCommand.addShortcut("Control+v", () => {
      this.pasteCurrentElement(true);
    });
    this.app.keyCommand.addShortcut("Control++", () => {
      this.zoomIn();
    });
    this.app.keyCommand.addShortcut("Control+-", () => {
      this.zoomOut();
    });
    this.app.keyCommand.addShortcut("Shift+1", () => {
      this.fit();
    });
    this.app.keyCommand.addShortcut("Control+a", () => {
      this.selectAll();
    });
    this.app.keyCommand.addShortcut("Control+0", () => {
      this.setZoom(1);
    });
    this.app.keyCommand.addShortcut("Control+'", () => {
      if (this.app.state.showGrid) {
        this.app.grid.hideGrid();
      } else {
        this.app.grid.showGrid();
      }
    });
  }
  copyCurrentElement() {
    if (this.app.elements.activeElement) {
      this.beingCopySelectedElements = [];
      this.beingCopyElement = this.app.elements.activeElement;
    } else if (this.app.selection.hasSelectionElements()) {
      this.beingCopyElement = null;
      this.beingCopySelectedElements = this.app.selection.getSelectionElements();
    }
  }
  cutCurrentElement() {
    if (this.app.elements.activeElement) {
      this.copyCurrentElement();
      this.deleteCurrentElements();
    } else if (this.app.selection.hasSelectionElements()) {
      this.copyCurrentElement();
      this.deleteCurrentElements();
      this.app.selection.setMultiSelectElements(this.beingCopySelectedElements);
      this.app.selection.emitChange();
    }
  }
  pasteCurrentElement(useCurrentEventPos = false) {
    let pos = null;
    if (useCurrentEventPos) {
      let x = this.app.event.lastMousePos.x;
      let y = this.app.event.lastMousePos.y;
      pos = {
        x,
        y
      };
    }
    if (this.beingCopyElement) {
      this.copyElement(this.beingCopyElement, false, pos);
    } else if (this.beingCopySelectedElements.length > 0) {
      this.app.selection.selectElements(this.beingCopySelectedElements);
      this.app.selection.copySelectionElements(useCurrentEventPos ? pos : null);
    }
  }
  deleteElement(element) {
    this.app.elements.deleteElement(element);
    this.render();
    this.app.emitChange();
  }
  copyElement(element, notActive = false, pos) {
    return __async(this, null, function* () {
      this.app.elements.cancelActiveElement();
      yield this.app.elements.copyElement(element, notActive, pos);
      this.app.group.clearCopyMap();
      this.render();
      this.app.emitChange();
    });
  }
  deleteActiveElement() {
    if (!this.app.elements.hasActiveElement()) {
      return;
    }
    this.deleteElement(this.app.elements.activeElement);
  }
  deleteCurrentElements() {
    this.deleteActiveElement();
    this.app.selection.deleteSelectedElements();
  }
  moveUpCurrentElement() {
    this.moveLevelCurrentElement("up");
  }
  moveDownCurrentElement() {
    this.moveLevelCurrentElement("down");
  }
  moveTopCurrentElement() {
    this.moveLevelCurrentElement("top");
  }
  moveBottomCurrentElement() {
    this.moveLevelCurrentElement("bottom");
  }
  moveLevelCurrentElement(level) {
    let element = null;
    if (this.app.elements.hasActiveElement()) {
      element = this.app.elements.activeElement;
    } else if (this.app.selection.getSelectionElements().length === 1) {
      element = this.app.selection.getSelectionElements()[0];
    }
    if (!element) {
      return;
    }
    let index = this.app.elements.getElementIndex(element);
    this.app.elements.elementList.splice(index, 1);
    if (level === "up") {
      this.app.elements.insertElement(element, index + 1);
    } else if (level === "down") {
      this.app.elements.insertElement(element, index - 1);
    } else if (level === "top") {
      this.app.elements.addElement(element);
    } else if (level === "bottom") {
      this.app.elements.unshiftElement(element);
    }
  }
  setActiveElementStyle(style = {}) {
    if (!this.app.elements.hasActiveElement()) {
      return this;
    }
    this.app.elements.setActiveElementStyle(style);
    this.render();
    if (!this.app.elements.isCreatingElement) {
      this.app.emitChange();
    }
    return this;
  }
  setCurrentElementsStyle(style = {}) {
    this.setActiveElementStyle(style);
    this.app.selection.setSelectedElementStyle(style);
  }
  cancelActiveElement() {
    if (!this.app.elements.hasActiveElement()) {
      return this;
    }
    this.app.elements.cancelActiveElement();
    this.render();
    return this;
  }
  updateActiveElementPosition(x, y) {
    if (!this.app.elements.hasActiveElement()) {
      return this;
    }
    this.app.elements.activeElement.updatePos(x, y);
    this.render();
    return this;
  }
  updateActiveElementSize(width, height) {
    if (!this.app.elements.hasActiveElement()) {
      return this;
    }
    this.app.elements.activeElement.updateSize(width, height);
    this.render();
    return this;
  }
  updateActiveElementRotate(rotate) {
    if (!this.app.elements.hasActiveElement()) {
      return this;
    }
    this.app.elements.activeElement.updateRotate(rotate);
    this.render();
    return this;
  }
  empty() {
    this.app.elements.deleteAllElements();
    this.render();
    this.app.history.clear();
    this.app.emitChange();
  }
  zoomIn(num = 0.1) {
    this.app.updateState({
      scale: this.app.state.scale + num
    });
    this.render();
    this.app.emit("zoomChange", this.app.state.scale);
  }
  zoomOut(num = 0.1) {
    this.app.updateState({
      scale: this.app.state.scale - num > 0 ? this.app.state.scale - num : 0
    });
    this.render();
    this.app.emit("zoomChange", this.app.state.scale);
  }
  setZoom(zoom) {
    if (zoom < 0) {
      return;
    }
    this.app.updateState({
      scale: zoom
    });
    this.render();
    this.app.emit("zoomChange", this.app.state.scale);
  }
  fit() {
    if (!this.app.elements.hasElements()) {
      return;
    }
    this.scrollToCenter();
    let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
      this.app.elements.elementList
    );
    let width = maxx - minx;
    let height = maxy - miny;
    let maxScale = Math.min(this.app.width / width, this.app.height / height);
    console.log(maxScale);
    this.setZoom(maxScale);
  }
  scrollTo(scrollX, scrollY) {
    this.app.updateState({
      scrollX,
      scrollY
    });
    this.render();
    this.app.emit(
      "scrollChange",
      this.app.state.scrollX,
      this.app.state.scrollY
    );
  }
  scrollToCenter() {
    if (!this.app.elements.hasElements()) {
      this.scrollTo(0, 0);
      return;
    }
    let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
      this.app.elements.elementList
    );
    let width = maxx - minx;
    let height = maxy - miny;
    this.scrollTo(
      minx - (this.app.width - width) / 2,
      miny - (this.app.height - height) / 2
    );
  }
  copyPasteCurrentElements() {
    this.copyCurrentElement();
    this.pasteCurrentElement();
  }
  setBackgroundColor(color) {
    this.app.updateState({
      backgroundColor: color
    });
    this.app.background.set();
  }
  selectAll() {
    this.app.selection.selectElements(this.app.elements.elementList);
  }
}
class Elements {
  constructor(app) {
    this.app = app;
    this.elementList = [];
    this.activeElement = null;
    this.isCreatingElement = false;
    this.isResizing = false;
    this.resizingElement = null;
    this.handleResize = throttle(this.handleResize, this, 16);
  }
  serialize(stringify = false) {
    let data = this.elementList.map((element) => {
      return element.serialize();
    });
    return stringify ? JSON.stringify(data) : data;
  }
  getElementsNum() {
    return this.elementList.length;
  }
  hasElements() {
    return this.elementList.length > 0;
  }
  addElement(element) {
    this.elementList.push(element);
    return this;
  }
  unshiftElement(element) {
    this.elementList.unshift(element);
    return this;
  }
  insertElement(element, index) {
    this.elementList.splice(index, 0, element);
  }
  deleteElement(element) {
    let index = this.getElementIndex(element);
    if (index !== -1) {
      this.elementList.splice(index, 1);
      if (element.isActive) {
        this.cancelActiveElement(element);
      }
    }
    return this;
  }
  deleteAllElements() {
    this.activeElement = null;
    this.elementList = [];
    this.isCreatingElement = false;
    this.isResizing = false;
    this.resizingElement = null;
    return this;
  }
  getElementIndex(element) {
    return this.elementList.findIndex((item) => {
      return item === element;
    });
  }
  createElementsFromData(data) {
    data.forEach((item) => {
      let element = this.pureCreateElement(item);
      element.isActive = false;
      element.isCreating = false;
      this.addElement(element);
    });
    this.app.group.initIdToElementList(this.elementList);
    return this;
  }
  hasActiveElement() {
    return !!this.activeElement;
  }
  setActiveElement(element) {
    this.cancelActiveElement();
    this.activeElement = element;
    if (element) {
      element.isActive = true;
    }
    this.app.emit("activeElementChange", this.activeElement);
    return this;
  }
  cancelActiveElement() {
    if (!this.hasActiveElement()) {
      return this;
    }
    this.activeElement.isActive = false;
    this.activeElement = null;
    this.app.emit("activeElementChange", this.activeElement);
    return this;
  }
  checkIsHitElement(e) {
    let x = e.unGridClientX;
    let y = e.unGridClientY;
    for (let i = this.elementList.length - 1; i >= 0; i--) {
      let element = this.elementList[i];
      if (element.isHit(x, y)) {
        return element;
      }
    }
    return null;
  }
  pureCreateElement(opts = {}) {
    switch (opts.type) {
      case "rectangle":
        return new Rectangle(opts, this.app);
      case "diamond":
        return new Diamond(opts, this.app);
      case "triangle":
        return new Triangle(opts, this.app);
      case "circle":
        return new Circle(opts, this.app);
      case "freedraw":
        return new Freedraw(opts, this.app);
      case "image":
        return new Image$1(opts, this.app);
      case "arrow":
        return new Arrow(opts, this.app);
      case "line":
        return new Line(opts, this.app);
      case "text":
        return new Text(opts, this.app);
      default:
        return null;
    }
  }
  createElement(opts = {}, callback = () => {
  }, ctx = null, notActive) {
    if (this.hasActiveElement() || this.isCreatingElement) {
      return this;
    }
    let element = this.pureCreateElement(opts);
    if (!element) {
      return this;
    }
    this.addElement(element);
    if (!notActive) {
      this.setActiveElement(element);
    }
    this.isCreatingElement = true;
    callback.call(ctx, element);
    return this;
  }
  copyElement(element, notActive = false, pos) {
    return new Promise((resolve) => __async(this, null, function* () {
      if (!element) {
        return resolve();
      }
      let data = this.app.group.handleCopyElementData(element.serialize());
      if (data.type === "image") {
        data.imageObj = yield createImageObj(data.url);
      }
      this.createElement(
        data,
        (element2) => {
          this.app.group.handleCopyElement(element2);
          element2.startResize(DRAG_ELEMENT_PARTS.BODY);
          let ox = 20;
          let oy = 20;
          if (pos) {
            ox = pos.x - element2.x - element2.width / 2;
            oy = pos.y - element2.y - element2.height / 2;
          }
          let gridAdsorbentPos = this.app.coordinate.gridAdsorbent(ox, oy);
          element2.resize(
            null,
            null,
            null,
            gridAdsorbentPos.x,
            gridAdsorbentPos.y
          );
          element2.isCreating = false;
          if (notActive) {
            element2.isActive = false;
          }
          this.isCreatingElement = false;
          resolve(element2);
        },
        this,
        notActive
      );
    }));
  }
  creatingRectangleLikeElement(type, x, y, offsetX, offsetY) {
    this.createElement({
      type,
      x,
      y,
      width: offsetX,
      height: offsetY
    });
    this.activeElement.updateSize(offsetX, offsetY);
  }
  creatingCircle(x, y, e) {
    this.createElement({
      type: "circle",
      x,
      y
    });
    let radius = getTowPointDistance(e.clientX, e.clientY, x, y);
    this.activeElement.updateSize(radius, radius);
  }
  creatingFreedraw(e, event) {
    this.createElement({
      type: "freedraw"
    });
    let element = this.activeElement;
    let lineWidth = computedLineWidthBySpeed(
      event.mouseSpeed,
      element.lastLineWidth
    );
    element.lastLineWidth = lineWidth;
    element.addPoint(e.clientX, e.clientY, lineWidth);
    let { coordinate, ctx, state } = this.app;
    let tfp = coordinate.transformToCanvasCoordinate(
      coordinate.subScrollX(event.lastMousePos.x),
      coordinate.subScrollY(event.lastMousePos.y)
    );
    let ttp = coordinate.transformToCanvasCoordinate(
      coordinate.subScrollX(e.clientX),
      coordinate.subScrollY(e.clientY)
    );
    ctx.save();
    ctx.scale(state.scale, state.scale);
    element.singleRender(tfp.x, tfp.y, ttp.x, ttp.y, lineWidth);
    ctx.restore();
  }
  creatingImage(e, { width, height, imageObj, url, ratio }) {
    let gp = this.app.coordinate.gridAdsorbent(
      e.unGridClientX - width / 2,
      e.unGridClientY - height / 2
    );
    this.createElement({
      type: "image",
      x: gp.x,
      y: gp.y,
      url,
      imageObj,
      width,
      height,
      ratio
    });
  }
  editingText(element) {
    if (element.type !== "text") {
      return;
    }
    element.noRender = true;
    this.setActiveElement(element);
  }
  completeEditingText() {
    let element = this.activeElement;
    if (!element || element.type !== "text") {
      return;
    }
    if (!element.text.trim()) {
      this.deleteElement(element);
      this.setActiveElement(null);
      return;
    }
    element.noRender = false;
  }
  completeCreateArrow(e) {
    this.activeElement.addPoint(e.clientX, e.clientY);
  }
  creatingArrow(x, y, e) {
    this.createElement(
      {
        type: "arrow",
        x,
        y
      },
      (element) => {
        element.addPoint(x, y);
      }
    );
    this.activeElement.updateFictitiousPoint(e.clientX, e.clientY);
  }
  creatingLine(x, y, e, isSingle = false, notCreate = false) {
    if (!notCreate) {
      this.createElement(
        {
          type: "line",
          x,
          y,
          isSingle
        },
        (element2) => {
          element2.addPoint(x, y);
        }
      );
    }
    let element = this.activeElement;
    if (element) {
      element.updateFictitiousPoint(e.clientX, e.clientY);
    }
  }
  completeCreateLine(e, completeCallback = () => {
  }) {
    let element = this.activeElement;
    let x = e.clientX;
    let y = e.clientY;
    if (element && element.isSingle) {
      element.addPoint(x, y);
      completeCallback();
    } else {
      this.createElement({
        type: "line",
        isSingle: false
      });
      element = this.activeElement;
      element.addPoint(x, y);
      element.updateFictitiousPoint(x, y);
    }
  }
  completeCreateElement() {
    this.isCreatingElement = false;
    let element = this.activeElement;
    if (!element) {
      return this;
    }
    if (["freedraw", "arrow", "line"].includes(element.type)) {
      element.updateMultiPointBoundingRect();
    }
    element.isCreating = false;
    this.app.emitChange();
    return this;
  }
  setActiveElementStyle(style = {}) {
    if (!this.hasActiveElement()) {
      return this;
    }
    Object.keys(style).forEach((key) => {
      this.activeElement.style[key] = style[key];
      if (key === "fontSize" && this.activeElement.type === "text") {
        this.activeElement.updateTextSize();
      }
    });
    return this;
  }
  checkInResizeHand(x, y) {
    let element = this.activeElement;
    let hand = element.dragElement.checkPointInDragElementWhere(x, y);
    if (hand) {
      return {
        element,
        hand
      };
    }
    return null;
  }
  checkIsResize(x, y, e) {
    if (!this.hasActiveElement()) {
      return false;
    }
    let res = this.checkInResizeHand(x, y);
    if (res) {
      this.isResizing = true;
      this.resizingElement = res.element;
      this.resizingElement.startResize(res.hand, e);
      this.app.cursor.setResize(res.hand);
      return true;
    }
    return false;
  }
  handleResize(...args) {
    if (!this.isResizing) {
      return;
    }
    this.resizingElement.resize(...args);
    this.app.render.render();
  }
  endResize() {
    this.isResizing = false;
    this.resizingElement.endResize();
    this.resizingElement = null;
  }
}
let getRandomValues;
const rnds8 = new Uint8Array(16);
function rng() {
  if (!getRandomValues) {
    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
    if (!getRandomValues) {
      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
    }
  }
  return getRandomValues(rnds8);
}
const byteToHex = [];
for (let i = 0; i < 256; ++i) {
  byteToHex.push((i + 256).toString(16).slice(1));
}
function unsafeStringify(arr, offset = 0) {
  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
}
const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
var native = {
  randomUUID
};
function v4(options, buf, offset) {
  if (native.randomUUID && !buf && !options) {
    return native.randomUUID();
  }
  options = options || {};
  const rnds = options.random || (options.rng || rng)();
  rnds[6] = rnds[6] & 15 | 64;
  rnds[8] = rnds[8] & 63 | 128;
  if (buf) {
    offset = offset || 0;
    for (let i = 0; i < 16; ++i) {
      buf[offset + i] = rnds[i];
    }
    return buf;
  }
  return unsafeStringify(rnds);
}
class Group {
  constructor(app) {
    this.app = app;
    this.groupIdToElementList = {};
    this.newGroupIdMap = {};
  }
  render() {
    Object.keys(this.groupIdToElementList).forEach((groupId) => {
      let group = this.groupIdToElementList[groupId];
      let selected = group[0].isSelected;
      if (selected) {
        let mElement = new MultiSelectElement(
          {
            type: "multiSelectElement"
          },
          this.app
        );
        mElement.setSelectedElementList(group);
        mElement.updateRect();
        mElement.dragElement.onlyShowBody();
        mElement.render();
      }
    });
  }
  setToMap(element) {
    let groupId = element.getGroupId();
    if (groupId) {
      if (!this.groupIdToElementList[groupId]) {
        this.groupIdToElementList[groupId] = [];
      }
      this.groupIdToElementList[groupId].push(element);
    }
  }
  initIdToElementList(elementList) {
    this.groupIdToElementList = {};
    elementList.forEach((element) => {
      this.setToMap(element);
    });
  }
  handleCopyElementData(data) {
    if (data.groupId) {
      if (this.newGroupIdMap[data.groupId]) {
        data.groupId = this.newGroupIdMap[data.groupId];
      } else {
        data.groupId = this.newGroupIdMap[data.groupId] = v4();
      }
    }
    return data;
  }
  clearCopyMap() {
    this.newGroupIdMap = {};
  }
  handleCopyElement(element) {
    this.setToMap(element);
  }
  dogroup() {
    if (!this.app.selection.hasSelection || this.app.selection.multiSelectElement.selectedElementList.length <= 1) {
      return;
    }
    let groupElement = this.app.selection.multiSelectElement.selectedElementList;
    let groupId = v4();
    this.groupIdToElementList[groupId] = groupElement;
    groupElement.forEach((element) => {
      element.setGroupId(groupId);
    });
    this.app.render.render();
    this.app.emitChange();
  }
  ungroup() {
    if (!this.app.selection.hasSelection || this.app.selection.multiSelectElement.selectedElementList.length <= 1) {
      return;
    }
    let groupElement = this.app.selection.multiSelectElement.selectedElementList;
    let groupId = groupElement[0].getGroupId();
    this.groupIdToElementList[groupId] = [];
    delete this.groupIdToElementList[groupId];
    groupElement.forEach((element) => {
      element.removeGroupId(groupId);
    });
    this.app.render.render();
    this.app.emitChange();
  }
  setSelection(element) {
    let groupId = element.getGroupId();
    if (this.groupIdToElementList[groupId]) {
      this.app.selection.selectElements(this.groupIdToElementList[groupId]);
    }
  }
  getGroupElements(element) {
    let groupId = element.getGroupId();
    return this.groupIdToElementList[groupId] || [];
  }
}
class TinyWhiteboard extends EventEmitter {
  constructor(opts = {}) {
    super();
    this.opts = opts;
    this.container = opts.container;
    this.drawType = opts.drawType || "selection";
    if (!this.container) {
      throw new Error("\u7F3A\u5C11 container \u53C2\u6570\uFF01");
    }
    if (!["absolute", "fixed", "relative"].includes(
      window.getComputedStyle(this.container).position
    )) {
      throw new Error("container\u5143\u7D20\u9700\u8981\u8BBE\u7F6E\u5B9A\u4F4D\uFF01");
    }
    this.width = 0;
    this.height = 0;
    this.left = 0;
    this.top = 0;
    this.canvas = null;
    this.ctx = null;
    this.state = __spreadValues({
      scale: 1,
      scrollX: 0,
      scrollY: 0,
      scrollStep: 50,
      backgroundColor: "",
      strokeStyle: "#000000",
      fillStyle: "transparent",
      fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Microsoft YaHei",
      fontSize: 18,
      dragStrokeStyle: "#666",
      showGrid: false,
      readonly: false,
      gridConfig: {
        size: 20,
        strokeStyle: "#dfe0e1",
        lineWidth: 1
      }
    }, opts.state || {});
    this.initCanvas();
    this.coordinate = new Coordinate(this);
    this.event = new Event(this);
    this.event.on("mousedown", this.onMousedown, this);
    this.event.on("mousemove", this.onMousemove, this);
    this.event.on("mouseup", this.onMouseup, this);
    this.event.on("dblclick", this.onDblclick, this);
    this.event.on("mousewheel", this.onMousewheel, this);
    this.event.on("contextmenu", this.onContextmenu, this);
    this.keyCommand = new KeyCommand(this);
    this.imageEdit = new ImageEdit(this);
    this.imageEdit.on("imageSelectChange", this.onImageSelectChange, this);
    this.textEdit = new TextEdit(this);
    this.textEdit.on("blur", this.onTextInputBlur, this);
    this.cursor = new Cursor(this);
    this.history = new History(this);
    this.export = new Export(this);
    this.background = new Background(this);
    this.selection = new Selection(this);
    this.group = new Group(this);
    this.grid = new Grid(this);
    this.mode = new Mode(this);
    this.elements = new Elements$1(this);
    this.render = new Render(this);
    this.proxy();
    this.checkIsOnElement = throttle(this.checkIsOnElement, this);
    this.emitChange();
    this.helpUpdate();
  }
  proxy() {
    ["undo", "redo"].forEach((method) => {
      this[method] = this.history[method].bind(this.history);
    });
    [].forEach((method) => {
      this[method] = this.elements[method].bind(this.elements);
    });
    [
      "deleteElement",
      "setActiveElementStyle",
      "setCurrentElementsStyle",
      "cancelActiveElement",
      "deleteActiveElement",
      "deleteCurrentElements",
      "empty",
      "zoomIn",
      "zoomOut",
      "setZoom",
      "scrollTo",
      "scrollToCenter",
      "copyPasteCurrentElements",
      "setBackgroundColor",
      "copyElement",
      "copyCurrentElement",
      "cutCurrentElement",
      "pasteCurrentElement",
      "updateActiveElementRotate",
      "updateActiveElementSize",
      "updateActiveElementPosition",
      "moveBottomCurrentElement",
      "moveTopCurrentElement",
      "moveUpCurrentElement",
      "moveDownCurrentElement",
      "selectAll",
      "fit"
    ].forEach((method) => {
      this[method] = this.render[method].bind(this.render);
    });
    ["exportImage", "exportJson"].forEach((method) => {
      this[method] = this.export[method].bind(this.export);
    });
    ["setSelectedElementStyle"].forEach((method) => {
      this[method] = this.selection[method].bind(this.selection);
    });
    ["dogroup", "ungroup"].forEach((method) => {
      this[method] = this.group[method].bind(this.group);
    });
    ["showGrid", "hideGrid", "updateGrid"].forEach((method) => {
      this[method] = this.grid[method].bind(this.grid);
    });
    ["setEditMode", "setReadonlyMode"].forEach((method) => {
      this[method] = this.mode[method].bind(this.mode);
    });
  }
  getContainerRectInfo() {
    let { width, height, left, top } = this.container.getBoundingClientRect();
    this.width = width;
    this.height = height;
    this.left = left;
    this.top = top;
  }
  helpUpdate() {
    this.background.set();
    if (this.state.showGrid) {
      this.grid.showGrid();
    }
    if (this.state.readonly) {
      this.setReadonlyMode();
    }
  }
  setData(_0, _1) {
    return __async(this, arguments, function* ({ state = {}, elements = [] }, noEmitChange) {
      this.state = state;
      for (let i = 0; i < elements.length; i++) {
        if (elements[i].type === "image") {
          elements[i].imageObj = yield createImageObj(elements[i].url);
        }
      }
      this.helpUpdate();
      this.elements.deleteAllElements().createElementsFromData(elements);
      this.render.render();
      if (!noEmitChange) {
        this.emitChange();
      }
    });
  }
  initCanvas() {
    this.getContainerRectInfo();
    if (this.canvas) {
      this.container.removeChild(this.canvas);
    }
    let { canvas, ctx } = createCanvas(this.width, this.height, {
      className: "main"
    });
    this.canvas = canvas;
    this.ctx = ctx;
    this.container.appendChild(this.canvas);
  }
  resize() {
    this.initCanvas();
    this.render.render();
    this.selection.init();
    this.grid.init();
    this.grid.renderGrid();
  }
  updateState(data = {}) {
    this.state = __spreadValues(__spreadValues({}, this.state), data);
    this.emitChange();
  }
  updateCurrentType(drawType) {
    this.drawType = drawType;
    if (this.drawType === "image") {
      this.imageEdit.selectImage();
    }
    if (this.drawType === "eraser") {
      this.cursor.setEraser();
      this.cancelActiveElement();
    } else if (this.drawType !== "selection") {
      this.cursor.setCrosshair();
    } else {
      this.cursor.reset();
    }
    this.emit("currentTypeChange", this.drawType);
  }
  getData() {
    return {
      state: __spreadValues({}, this.state),
      elements: this.elements.serialize()
    };
  }
  onImageSelectChange() {
    this.cursor.hide();
  }
  onMousedown(e, event) {
    if (this.state.readonly || this.mode.isDragMode) {
      this.mode.onStart();
      return;
    }
    if (!this.elements.isCreatingElement && !this.textEdit.isEditing) {
      let hitElement = this.elements.checkIsHitElement(e);
      if (this.drawType === "selection") {
        if (this.elements.hasActiveElement()) {
          let isResizing = this.elements.checkIsResize(
            event.mousedownPos.unGridClientX,
            event.mousedownPos.unGridClientY,
            e
          );
          if (!isResizing) {
            this.elements.setActiveElement(hitElement);
            this.render.render();
          }
        } else {
          if (this.selection.hasSelection) {
            let isResizing = this.selection.checkIsResize(
              event.mousedownPos.unGridClientX,
              event.mousedownPos.unGridClientY,
              e
            );
            if (!isResizing) {
              this.selection.reset();
              this.elements.setActiveElement(hitElement);
              this.render.render();
            }
          } else if (hitElement) {
            if (hitElement.hasGroup()) {
              this.group.setSelection(hitElement);
              this.onMousedown(e, event);
            } else {
              this.elements.setActiveElement(hitElement);
              this.render.render();
              this.onMousedown(e, event);
            }
          } else {
            this.selection.onMousedown(e, event);
          }
        }
      } else if (this.drawType === "eraser") {
        this.deleteElement(hitElement);
      }
    }
  }
  onMousemove(e, event) {
    if (this.state.readonly || this.mode.isDragMode) {
      if (event.isMousedown) {
        this.mode.onMove(e, event);
      }
      return;
    }
    if (event.isMousedown) {
      let mx = event.mousedownPos.x;
      let my = event.mousedownPos.y;
      let offsetX = Math.max(event.mouseOffset.x, 0);
      let offsetY = Math.max(event.mouseOffset.y, 0);
      if (this.drawType === "selection") {
        if (this.selection.isResizing) {
          this.selection.handleResize(
            e,
            mx,
            my,
            event.mouseOffset.x,
            event.mouseOffset.y
          );
        } else if (this.selection.creatingSelection) {
          this.selection.onMousemove(e, event);
        } else {
          this.elements.handleResize(
            e,
            mx,
            my,
            event.mouseOffset.x,
            event.mouseOffset.y
          );
        }
      } else if (["rectangle", "diamond", "triangle"].includes(this.drawType)) {
        this.elements.creatingRectangleLikeElement(
          this.drawType,
          mx,
          my,
          offsetX,
          offsetY
        );
        this.render.render();
      } else if (this.drawType === "circle") {
        this.elements.creatingCircle(mx, my, e);
        this.render.render();
      } else if (this.drawType === "freedraw") {
        this.elements.creatingFreedraw(e, event);
      } else if (this.drawType === "arrow") {
        this.elements.creatingArrow(mx, my, e);
        this.render.render();
      } else if (this.drawType === "line") {
        if (getTowPointDistance(mx, my, e.clientX, e.clientY) > 3) {
          this.elements.creatingLine(mx, my, e, true);
          this.render.render();
        }
      }
    } else {
      if (this.imageEdit.isReady) {
        this.cursor.hide();
        this.imageEdit.updatePreviewElPos(
          e.originEvent.clientX,
          e.originEvent.clientY
        );
      } else if (this.drawType === "selection") {
        if (this.elements.hasActiveElement()) {
          let handData = "";
          if (handData = this.elements.checkInResizeHand(
            e.unGridClientX,
            e.unGridClientY
          )) {
            this.cursor.setResize(handData.hand);
          } else {
            this.checkIsOnElement(e);
          }
        } else if (this.selection.hasSelection) {
          let hand = this.selection.checkInResizeHand(
            e.unGridClientX,
            e.unGridClientY
          );
          if (hand) {
            this.cursor.setResize(hand);
          } else {
            this.checkIsOnElement(e);
          }
        } else {
          this.checkIsOnElement(e);
        }
      } else if (this.drawType === "line") {
        this.elements.creatingLine(null, null, e, false, true);
        this.render.render();
      }
    }
  }
  checkIsOnElement(e) {
    let hitElement = this.elements.checkIsHitElement(e);
    if (hitElement) {
      this.cursor.setMove();
    } else {
      this.cursor.reset();
    }
  }
  resetCurrentType() {
    if (this.drawType !== "selection") {
      this.drawType = "selection";
      this.emit("currentTypeChange", "selection");
    }
  }
  completeCreateNewElement() {
    this.resetCurrentType();
    this.elements.completeCreateElement();
    this.render.render();
  }
  onMouseup(e) {
    if (this.state.readonly || this.mode.isDragMode) {
      return;
    }
    if (this.drawType === "text") {
      if (!this.textEdit.isEditing) {
        this.createTextElement(e);
        this.resetCurrentType();
      }
    } else if (this.imageEdit.isReady) {
      this.elements.creatingImage(e, this.imageEdit.imageData);
      this.completeCreateNewElement();
      this.cursor.reset();
      this.imageEdit.reset();
    } else if (this.drawType === "arrow") {
      this.elements.completeCreateArrow(e);
      this.completeCreateNewElement();
    } else if (this.drawType === "line") {
      this.elements.completeCreateLine(e, () => {
        this.completeCreateNewElement();
      });
      this.render.render();
    } else if (this.elements.isCreatingElement) {
      if (this.drawType === "freedraw") {
        this.elements.completeCreateElement();
        this.elements.setActiveElement();
      } else {
        this.completeCreateNewElement();
      }
    } else if (this.elements.isResizing) {
      this.elements.endResize();
      this.emitChange();
    } else if (this.selection.creatingSelection) {
      this.selection.onMouseup(e);
    } else if (this.selection.isResizing) {
      this.selection.endResize();
      this.emitChange();
    }
  }
  onDblclick(e) {
    if (this.drawType === "line") {
      this.completeCreateNewElement();
    } else {
      let hitElement = this.elements.checkIsHitElement(e);
      if (hitElement) {
        if (hitElement.type === "text") {
          this.elements.editingText(hitElement);
          this.render.render();
          this.keyCommand.unBindEvent();
          this.textEdit.showTextEdit();
        }
      } else {
        if (!this.textEdit.isEditing) {
          this.createTextElement(e);
        }
      }
    }
  }
  onTextInputBlur() {
    this.keyCommand.bindEvent();
    this.elements.completeEditingText();
    this.render.render();
    this.emitChange();
  }
  createTextElement(e) {
    this.elements.createElement({
      type: "text",
      x: e.clientX,
      y: e.clientY
    });
    this.keyCommand.unBindEvent();
    this.textEdit.showTextEdit();
  }
  onMousewheel(dir) {
    let stepNum = this.state.scrollStep / this.state.scale;
    let step = dir === "down" ? stepNum : -stepNum;
    this.scrollTo(this.state.scrollX, this.state.scrollY + step);
  }
  onContextmenu(e) {
    let elements = [];
    if (this.elements.hasActiveElement()) {
      elements = [this.elements.activeElement];
    } else if (this.selection.hasSelectionElements()) {
      elements = this.selection.getSelectionElements();
    }
    this.emit("contextmenu", e.originEvent, elements);
  }
  emitChange() {
    let data = this.getData();
    this.history.add(data);
    this.emit("change", data);
  }
}
TinyWhiteboard.utils = utils;
TinyWhiteboard.checkHit = checkHit;
TinyWhiteboard.draw = draw;
TinyWhiteboard.elements = Elements;
export { TinyWhiteboard as default };