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));
import { E as ElementModel } from "./background.js";
import { C as CellModel } from "./model2.js";
import { l as lodash, aB as throttle, a9 as cloneDeep, $ as tinycolor } from "./index.js";
import { P as utils, $ } from "./watermark.js";
import { i as inherit } from "./base-element.js";
import { E as EditorElementGroup } from "./index21.js";
import { c as clone } from "./clone.js";
import "vue";
import "./v4.js";
import "./index18.js";
import "./dom.js";
import "./flattenDeep.js";
import "./defaults.js";
import "./index15.js";
import "./gif-utils.js";
import "./gif-apng.worker.js";
import "./upng.js";
import "./api-service.js";
class CollageModel extends ElementModel {
  constructor(data) {
    super(data);
    this.$cellIndex = -1;
    this.outerGap = data.outerGap || 0;
    this.gap = data.gap || 0;
    this.itemRoundness = data.itemRoundness || 0;
    if (this.elements.length) {
      this.elements = this.elements.map((data2) => {
        const element = new CellModel(data2);
        element.disableEditable();
        return element;
      });
    }
  }
}
function getGapOfGrid(grid) {
  if (grid.length === 0) {
    return 0;
  } else if (grid.length === 1) {
    return grid[0].top;
  } else {
    const minTop = Math.min.apply(null, grid.map((cell) => cell.top));
    const cellsAtTop = grid.filter((cell) => cell.top === minTop);
    if (cellsAtTop.length > 1) {
      cellsAtTop.sort((cell1, cell2) => cell1.left - cell2.left);
      return cellsAtTop[1].left - cellsAtTop[0].left - cellsAtTop[0].width;
    } else {
      const minLeft = Math.min.apply(null, grid.map((cell) => cell.left));
      const cellsAtLeft = grid.filter((cell) => cell.left === minLeft);
      cellsAtLeft.sort((cell1, cell2) => cell1.top - cell2.top);
      return cellsAtLeft[1].top - cellsAtLeft[0].top - cellsAtLeft[0].height;
    }
  }
}
function relationOfPointInGrid(grid, point, allowdedDiff = 0.5) {
  const relation = {
    left: [],
    top: [],
    right: [],
    bottom: []
  };
  const edge = {
    left: -1,
    top: -1,
    right: -1,
    bottom: -1
  };
  const gridEdge = {
    left: null,
    right: null,
    top: null,
    bottom: null
  };
  const _grid = grid.map((cell) => {
    const _cell = __spreadProps(__spreadValues({}, cell), {
      right: cell.left + cell.width,
      bottom: cell.top + cell.height,
      source: cell
    });
    gridEdge.left = gridEdge.left !== null ? Math.min(_cell.left, gridEdge.left) : _cell.left;
    gridEdge.right = gridEdge.right !== null ? Math.max(_cell.right, gridEdge.right) : _cell.right;
    gridEdge.top = gridEdge.top !== null ? Math.min(_cell.top, gridEdge.top) : _cell.top;
    gridEdge.bottom = gridEdge.bottom !== null ? Math.max(_cell.bottom, gridEdge.bottom) : _cell.bottom;
    return _cell;
  });
  let cellContainPoint = null;
  _grid.some((cell) => {
    const isCellContainPoint = cell.left - point.x < -1 && cell.right - point.x > 1 && cell.top - point.y < -1 && cell.bottom - point.y > 1;
    if (isCellContainPoint) {
      cellContainPoint = cell;
    }
    return isCellContainPoint;
  });
  if (cellContainPoint !== null) {
    edge.left = cellContainPoint.left;
    edge.right = cellContainPoint.right;
    edge.top = cellContainPoint.top;
    edge.bottom = cellContainPoint.bottom;
    relation.left = _grid.filter((cell) => cell.right - edge.left <= allowdedDiff);
    relation.right = _grid.filter((cell) => cell.left - edge.right >= -allowdedDiff);
    relation.top = _grid.filter((cell) => cell.bottom - edge.top <= allowdedDiff);
    relation.bottom = _grid.filter((cell) => cell.top - edge.bottom >= -allowdedDiff);
  } else {
    _grid.forEach((cell) => {
      if (cell.right - point.x <= allowdedDiff) {
        relation.left.push(cell);
        if (edge.left === -1) {
          edge.left = cell.right;
        } else {
          edge.left = Math.max(cell.right, edge.left);
        }
      } else if (cell.left - point.x >= -allowdedDiff) {
        relation.right.push(cell);
        if (edge.right === -1) {
          edge.right = cell.left;
        } else {
          edge.right = Math.min(cell.left, edge.right);
        }
      }
      if (cell.bottom - point.y <= allowdedDiff) {
        relation.top.push(cell);
        if (edge.top === -1) {
          edge.top = cell.bottom;
        } else {
          edge.top = Math.max(cell.bottom, edge.top);
        }
      } else if (cell.top - point.y >= -allowdedDiff) {
        relation.bottom.push(cell);
        if (edge.bottom === -1) {
          edge.bottom = cell.top;
        } else {
          edge.bottom = Math.min(cell.top, edge.bottom);
        }
      }
    });
    edge.top = edge.top === -1 ? gridEdge.top : edge.top;
    edge.left = edge.left === -1 ? gridEdge.left : edge.left;
    edge.right = edge.right === -1 ? gridEdge.right : edge.right;
    edge.bottom = edge.bottom === -1 ? gridEdge.bottom : edge.bottom;
  }
  const gap = getGapOfGrid(grid);
  relation.left = relation.left.filter((l) => {
    return l.right - edge.left >= Math.min(-allowdedDiff, -gap) && l.right - edge.right <= allowdedDiff && l.left - edge.left <= allowdedDiff;
  });
  relation.right = relation.right.filter((r) => {
    return r.left - edge.left >= -allowdedDiff && r.left - edge.right <= Math.max(allowdedDiff, gap) && r.right - edge.right >= allowdedDiff;
  });
  relation.top = relation.top.filter((t) => {
    return t.bottom - edge.top >= Math.min(-allowdedDiff, -gap) && t.bottom - edge.bottom <= allowdedDiff && t.top - edge.top <= allowdedDiff;
  });
  relation.bottom = relation.bottom.filter((b) => {
    return b.top - edge.top >= -allowdedDiff && b.top - edge.bottom <= Math.max(allowdedDiff, gap) && b.bottom - edge.bottom >= allowdedDiff;
  });
  const minLeft = relation.left.length > 0 ? Math.min.apply(null, relation.left.map((c) => c.left)) : edge.left;
  const maxRight = relation.right.length > 0 ? Math.max.apply(null, relation.right.map((c) => c.right)) : edge.right;
  const verticalFilter = (c) => {
    const separated = c.left - maxRight > -allowdedDiff || c.right - minLeft < allowdedDiff;
    return !separated;
  };
  relation.top = relation.top.filter(verticalFilter);
  relation.bottom = relation.bottom.filter(verticalFilter);
  return relation;
}
function relationOfLineInGrid(grid, line, allowedDiff = 0.5) {
  const relation = {
    left: [],
    top: [],
    right: [],
    bottom: []
  };
  const [point1, point2] = line;
  const _grid = grid.map((cell) => {
    const _cell = __spreadProps(__spreadValues({}, cell), {
      right: cell.left + cell.width,
      bottom: cell.top + cell.height,
      source: cell
    });
    return _cell;
  });
  const gap = getGapOfGrid(grid);
  if (point1.x === point2.x) {
    const x = point1.x;
    const minY = Math.min(point1.y, point2.y);
    const maxY = Math.max(point1.y, point2.y);
    relation.left = _grid.filter((cell) => {
      const diff = cell.right - x;
      return diff <= allowedDiff && diff >= -Math.max(gap, allowedDiff) && cell.top - maxY <= allowedDiff && cell.bottom - minY >= allowedDiff;
    });
    relation.right = _grid.filter((cell) => {
      const diff = cell.left - x;
      return diff >= -allowedDiff && diff <= Math.max(gap, allowedDiff) && cell.top - maxY <= allowedDiff && cell.bottom - minY >= allowedDiff;
    });
  } else if (point1.y === point2.y) {
    const y = point1.y;
    const minX = Math.min(point1.x, point2.x);
    const maxX = Math.max(point1.x, point2.x);
    relation.top = _grid.filter((cell) => {
      const diff = cell.bottom - y;
      return diff <= allowedDiff && diff >= -Math.max(gap, allowedDiff) && cell.left - maxX <= allowedDiff && cell.right - minX >= allowedDiff;
    });
    relation.bottom = _grid.filter((cell) => {
      const diff = cell.top - y;
      return diff >= -allowedDiff && diff <= Math.max(gap, allowedDiff) && cell.left - maxX <= allowedDiff && cell.right - minX >= allowedDiff;
    });
  }
  return relation;
}
function getBorderOfGrid(grid) {
  let currentBorder = 9999;
  grid.forEach((cell) => {
    currentBorder = Math.min(currentBorder, cell.top);
  });
  return currentBorder;
}
function reLayoutGridByGapBorder(grid, gap, border) {
  if (typeof gap !== "number" || typeof border !== "number")
    return grid;
  const newGrid = grid.map((cell) => __spreadValues({}, cell));
  const currentBorder = getBorderOfGrid(newGrid);
  const borderDiff = border - currentBorder;
  const currentGap = getGapOfGrid(newGrid);
  const gapDiff = gap - currentGap;
  if (borderDiff === 0 && gapDiff === 0)
    return grid;
  const tops = {};
  const lefts = {};
  const gridEdge = {
    top: Infinity,
    bottom: -Infinity,
    left: Infinity,
    right: -Infinity
  };
  newGrid.forEach((cell) => {
    const bottom = cell.top + cell.height;
    const right = cell.left + cell.width;
    gridEdge.top = Math.min(cell.top, gridEdge.top);
    gridEdge.left = Math.min(cell.left, gridEdge.left);
    gridEdge.bottom = Math.max(bottom, gridEdge.bottom);
    gridEdge.right = Math.max(right, gridEdge.right);
    cell._left = cell.left + borderDiff;
    cell._top = cell.top + borderDiff;
    tops[cell.top] = 1;
    lefts[cell.left] = 1;
  });
  adjustCells(newGrid, "horizontal", tops, gapDiff, borderDiff, currentGap, gridEdge.right);
  adjustCells(newGrid, "vertical", lefts, gapDiff, borderDiff, currentGap, gridEdge.bottom);
  return newGrid.map((cell) => ({
    left: cell._left || cell.left,
    top: cell._top || cell.top,
    width: Number.isNaN(cell._width) ? 1 : cell._width,
    height: Number.isNaN(cell._height) ? 1 : cell._height
  }));
}
function adjustCells(grid, direction, positions, gapDiff, borderDiff, currentGap, edge) {
  let posField = "top";
  let sumField = "width";
  let otherPosField = "left";
  let otherSumField = "height";
  let newOtherPosField = "_left";
  let newSumField = "_width";
  if (direction === "vertical") {
    posField = "left";
    sumField = "height";
    otherPosField = "top";
    otherSumField = "width";
    newOtherPosField = "_top";
    newSumField = "_height";
  }
  const gridSortByPostField = grid.map((cell) => ({ sortField: cell[posField], cell })).sort((c1, c2) => c1.sortField - c2.sortField);
  Object.keys(positions).map((t) => parseFloat(t)).sort((t1, t2) => t1 - t2).forEach((pos) => {
    const relativeCells = grid.filter((c) => c[posField] < pos && c[posField] + c[otherSumField] - pos >= 1 || Math.abs(c[posField] - pos) < 1).sort((c1, c2) => c1[otherPosField] - c2[otherPosField]);
    if (relativeCells.length > 0) {
      const leftsOrTopsOfContainedCell = relativeCells.reduce((leftsOrTops, acc) => {
        leftsOrTops[acc[otherPosField]] = 1;
        return leftsOrTops;
      }, {});
      const maxBottomOrRight = relativeCells.map((x) => x[posField] + x[otherSumField]).sort((a, b) => a - b).pop();
      let widthOrHeightSum = relativeCells.reduce((sum, c) => sum + c[sumField], 0) + (relativeCells.length - 1) * currentGap;
      gridSortByPostField.forEach(({ cell }) => {
        const bottomOrRight = cell[posField] + cell[otherSumField];
        widthOrHeightSum = widthOrHeightSum + cell[sumField] + currentGap;
        if (cell[posField] > top && bottomOrRight - maxBottomOrRight < 1 && !leftsOrTopsOfContainedCell[cell[otherPosField]] && widthOrHeightSum - 1 < edge) {
          leftsOrTopsOfContainedCell[cell[otherPosField]] = 1;
          relativeCells.push(cell);
        } else {
          widthOrHeightSum = widthOrHeightSum - cell[sumField] - currentGap;
        }
      });
      relativeCells.sort((c1, c2) => c1[otherPosField] - c2[otherPosField]);
    }
    const sumOfGrid = relativeCells.reduce((s, c) => {
      s += c[sumField];
      return s;
    }, 0);
    const unCalculatedCells = relativeCells.filter((cell) => typeof cell[newSumField] !== "number");
    if (unCalculatedCells.length === relativeCells.length) {
      const diff = borderDiff * 2 + (relativeCells.length - 1) * gapDiff;
      const ratio = (sumOfGrid - diff) / sumOfGrid;
      relativeCells.forEach((cell, index2) => {
        const width = cell[sumField];
        cell[newSumField] = width * ratio;
        if (index2 !== 0) {
          const prevCell = relativeCells[index2 - 1];
          const leftOrTop = prevCell[newOtherPosField] || prevCell[otherPosField];
          const widthOfHeight = prevCell[newSumField] || prevCell[sumField];
          cell[newOtherPosField] = leftOrTop + widthOfHeight + gapDiff;
        }
        grid.forEach((c) => {
          if (Math.abs(c[otherPosField] - cell[otherPosField]) < 1 && Math.abs(c[sumField] - cell[sumField]) < 1 && !c[newSumField]) {
            c[newOtherPosField] = cell[newOtherPosField];
            c[newSumField] = cell[newSumField];
          }
        });
      });
    } else if (unCalculatedCells.length > 0) {
      for (let i = 0; i < relativeCells.length; i++) {
        const current = relativeCells[i];
        if (current[newSumField])
          continue;
        const prev = relativeCells[i - 1] || {
          _left: 0,
          _width: borderDiff - gapDiff,
          _top: 0,
          _height: borderDiff - gapDiff
        };
        const next = relativeCells[i + 1] || {
          _left: sumOfGrid - borderDiff + gapDiff,
          _width: 0,
          _top: sumOfGrid - borderDiff + gapDiff,
          _height: 0
        };
        current[newOtherPosField] = prev[newOtherPosField] + prev[newSumField] + gapDiff;
        if (typeof next[newSumField] !== "undefined") {
          current[newSumField] = next[newOtherPosField] - current[newOtherPosField] - gapDiff;
        } else {
          let diff = gapDiff;
          if (i === 0 || i === relativeCells.length - 1) {
            diff = gapDiff / 2;
          }
          current[newSumField] = current[sumField] - diff;
        }
        grid.forEach((c) => {
          if (Math.abs(c[otherPosField] - current[otherPosField]) < 1 && Math.abs(c[sumField] - current[sumField]) < 1 && !c[newSumField]) {
            c[newOtherPosField] = current[newOtherPosField];
            c[newSumField] = current[newSumField];
          }
        });
      }
    } else {
      for (let i = 0; i < relativeCells.length - 1; i++) {
        const current = relativeCells[i];
        const next = relativeCells[i + 1];
        const diff = next[newOtherPosField] - current[newOtherPosField] - current[newSumField] - gapDiff;
        if (Math.abs(diff) > 1) {
          current[newSumField] += diff;
        }
      }
    }
  });
}
function relationOfCellInGrid(grid, index2) {
  const targetCell = grid[index2];
  if (!targetCell) {
    return {
      left: [],
      right: [],
      top: [],
      bottom: []
    };
  }
  const relation = relationOfPointInGrid(grid, {
    x: targetCell.left + Math.floor(targetCell.width / 2),
    y: targetCell.top + Math.floor(targetCell.height / 2)
  });
  function filterUnConnectedAtHorizontal(cell) {
    const seperated = cell.top >= targetCell.top + targetCell.height || cell.bottom <= targetCell.top;
    return !seperated;
  }
  relation.left = relation.left.filter(filterUnConnectedAtHorizontal);
  relation.right = relation.right.filter(filterUnConnectedAtHorizontal);
  function filterUnConnectedAtVertical(cell) {
    const seperated = cell.left >= targetCell.left + targetCell.width || cell.right <= targetCell.left;
    return !seperated;
  }
  relation.bottom = relation.bottom.filter(filterUnConnectedAtVertical);
  relation.top = relation.top.filter(filterUnConnectedAtVertical);
  return relation;
}
function removeCellInGrids(grid, index2, gap, direction) {
  const newGrid = grid.map((cell) => {
    return __spreadValues({}, cell);
  });
  const targetCell = newGrid[index2];
  if (!targetCell)
    return newGrid;
  const edge = {
    top: Math.round(targetCell.top),
    bottom: Math.round(targetCell.top + targetCell.height),
    left: Math.round(targetCell.left),
    right: Math.round(targetCell.left + targetCell.width)
  };
  const relation = relationOfCellInGrid(newGrid, index2);
  newGrid.splice(index2, 1);
  const horizontal = getRelayoutLength(relation, "h", edge.top, edge.bottom);
  const vertical = getRelayoutLength(relation, "v", edge.left, edge.right);
  if (horizontal.length > 0 && (horizontal.length <= vertical.length || vertical.length === 0) && direction !== "vertical") {
    reLayoutGridBeforeRemove(relation, horizontal.dirs, "h", edge.left, edge.right, gap);
  } else if (vertical.length > 0) {
    reLayoutGridBeforeRemove(relation, vertical.dirs, "v", edge.top, edge.bottom, gap);
  }
  return newGrid;
}
function getMergeableDirectionOfCell(grid, index2) {
  const newGrid = grid.map((cell) => {
    return __spreadValues({}, cell);
  });
  const targetCell = newGrid[index2];
  if (!targetCell) {
    return {
      horizontal: false,
      vertical: false
    };
  }
  const edge = {
    top: Math.round(targetCell.top),
    bottom: Math.round(targetCell.top + targetCell.height),
    left: Math.round(targetCell.left),
    right: Math.round(targetCell.left + targetCell.width)
  };
  const relation = relationOfCellInGrid(newGrid, index2);
  const horizontal = getRelayoutLength(relation, "h", edge.top, edge.bottom);
  const vertical = getRelayoutLength(relation, "v", edge.left, edge.right);
  return {
    horizontal: horizontal.length > 0,
    vertical: vertical.length > 0
  };
}
function getRelayoutLength(relation, orientation, minEdge, maxEdge) {
  let checkDirs, side, dir;
  if (orientation === "v") {
    checkDirs = ["top", "bottom"];
    side = "width";
    dir = "left";
  } else {
    checkDirs = ["left", "right"];
    side = "height";
    dir = "top";
  }
  let totalLength = 0;
  const dirs = [];
  checkDirs.forEach((_dir) => {
    const cells = relation[_dir];
    const length = cells.length;
    let min = Infinity;
    let max = -1;
    if (length > 0) {
      cells.some((cell) => {
        const cellMin = Math.round(cell[dir]);
        const cellMax = Math.round(cell[dir] + cell[side]);
        if (cellMin < min) {
          min = cellMin;
        }
        if (cellMax > max) {
          max = cellMax;
        }
        return min < minEdge || max > maxEdge;
      });
      if (min === minEdge && max === maxEdge) {
        dirs.push(_dir);
        totalLength += length;
      }
    }
  });
  return { length: totalLength, dirs };
}
function reLayoutGridBeforeRemove(relation, dirs, orientation, minEdge, maxEdge, gap) {
  let min, max, side, minDir, maxDir;
  if (orientation === "v") {
    side = "height";
    minDir = "top";
    maxDir = "bottom";
  } else {
    side = "width";
    minDir = "left";
    maxDir = "right";
  }
  if (dirs.length > 1) {
    const middle = (maxEdge - minEdge) / 2;
    min = minEdge + middle - gap / 2;
    max = maxEdge - middle + gap / 2;
  } else {
    min = maxEdge;
    max = minEdge;
  }
  dirs.forEach((dir) => {
    const cells = relation[dir];
    switch (dir) {
      case minDir:
        cells.forEach((cell) => {
          cell.source[side] = min - cell[dir];
        });
        break;
      case maxDir:
        cells.forEach((cell) => {
          cell.source[side] = cell[minDir] + cell[side] - max;
          cell.source[minDir] = max;
        });
        break;
    }
  });
}
function reLayoutGuideLine(grid, gap, lineMergeThrottle = 1) {
  const guildLine = {
    horizontal: [],
    vertical: []
  };
  const horizontalMap = {};
  const verticalMap = {};
  const edge = {
    left: Infinity,
    top: Infinity,
    right: -1,
    bottom: -1
  };
  grid.forEach((cell) => {
    const left = cell.left;
    const top2 = cell.top;
    const right = cell.left + cell.width;
    const bottom = cell.top + cell.height;
    if (left < edge.left) {
      edge.left = left;
    }
    if (top2 < edge.top) {
      edge.top = top2;
    }
    if (bottom > edge.bottom) {
      edge.bottom = bottom;
    }
    if (right > edge.right) {
      edge.right = right;
    }
  });
  grid.slice().sort((c1, c2) => c1.left - c2.left).forEach((cell) => {
    const left = cell.left;
    const top2 = cell.top;
    const right = cell.left + cell.width;
    mergeHorizontal(top2 - gap / 2, left, right, horizontalMap, gap, lineMergeThrottle);
  });
  grid.slice().sort((c1, c2) => c1.top - c2.top).forEach((cell) => {
    const left = cell.left;
    const top2 = cell.top;
    const bottom = cell.top + cell.height;
    mergeVertical(left - gap / 2, top2, bottom, verticalMap, gap, lineMergeThrottle);
  });
  Object.keys(verticalMap).forEach((key) => {
    const left = parseFloat(key);
    if (left === edge.left - gap / 2)
      return;
    const lines = verticalMap[key];
    guildLine.vertical = guildLine.vertical.concat(lines);
  });
  Object.keys(horizontalMap).forEach((key) => {
    const top2 = parseFloat(key);
    if (top2 === edge.top - gap / 2)
      return;
    const lines = horizontalMap[key];
    guildLine.horizontal = guildLine.horizontal.concat(lines);
  });
  guildLine.vertical.sort((l1, l2) => {
    const diff = l1.from.y - l2.from.y;
    return diff === 0 ? l1.from.x - l2.from.x : diff;
  });
  guildLine.horizontal.sort((l1, l2) => {
    const diff = l1.from.x - l2.from.x;
    return diff === 0 ? l1.from.y - l2.from.y : diff;
  });
  return guildLine;
}
function mergeVertical(x, top2, bottom, verticalMap, gap, lineMergeThrottle = 1) {
  let lines = verticalMap[x];
  if (!lines) {
    const nearKey = Object.keys(verticalMap).find((key) => Math.abs(parseFloat(key) - x) < lineMergeThrottle);
    lines = verticalMap[nearKey];
  }
  if (lines) {
    const line = lines.find(({ to }) => top2 - to.y - gap < 0.5);
    if (line) {
      const { from, to } = line;
      const minTop = Math.min(from.y, top2);
      const maxBottom = Math.max(to.y, bottom);
      from.y = minTop;
      to.y = maxBottom;
    } else {
      lines.push({
        from: { x, y: top2 },
        to: { x, y: bottom }
      });
    }
    return;
  }
  verticalMap[x] = [
    {
      from: { x, y: top2 },
      to: { x, y: bottom }
    }
  ];
}
function mergeHorizontal(y, left, right, horizontalMap, gap, lineMergeThrottle = 1) {
  let lines = horizontalMap[y];
  if (!lines) {
    const nearKey = Object.keys(horizontalMap).find((key) => Math.abs(parseFloat(key) - y) < lineMergeThrottle);
    lines = horizontalMap[nearKey];
  }
  if (lines) {
    const line = lines.find(({ to }) => left - to.x - gap < 0.5);
    if (line) {
      const { from, to } = line;
      const minLeft = Math.min(from.x, left);
      const maxRight = Math.max(to.x, right);
      from.x = minLeft;
      to.x = maxRight;
    } else {
      lines.push({
        from: { x: left, y },
        to: { x: right, y }
      });
    }
    return;
  }
  horizontalMap[y] = [
    {
      from: { x: left, y },
      to: { x: right, y }
    }
  ];
}
function findNearestCellOfPoint(grid, point, maxDistance = Infinity) {
  const { x, y } = point;
  if (x <= 0 || y <= 0)
    return null;
  const minDistance = [
    {
      cellIndex: -1,
      distance: Infinity,
      side: "left"
    },
    {
      cellIndex: -1,
      distance: Infinity,
      side: "right"
    },
    {
      cellIndex: -1,
      distance: Infinity,
      side: "top"
    },
    {
      cellIndex: -1,
      distance: Infinity,
      side: "bottom"
    }
  ];
  let inside = null;
  let rightEdge = -Infinity;
  let bottomEdge = -Infinity;
  grid.forEach((cell, cellIndex) => {
    if (inside)
      return;
    const right = cell.left + cell.width;
    const bottom = cell.top + cell.height;
    rightEdge = Math.max(rightEdge, right);
    bottomEdge = Math.max(bottomEdge, bottom);
    if (cell.left - x <= 0 && right - x >= 0 && cell.top - y <= 0 && bottom - y >= 0) {
      inside = {
        cellIndex,
        cell,
        side: "inside"
      };
      return;
    }
    const distance = [
      pointToSegDist(x, y, cell.left, cell.top, cell.left, bottom),
      pointToSegDist(x, y, right, cell.top, right, bottom),
      pointToSegDist(x, y, cell.left, cell.top, right, cell.top),
      pointToSegDist(x, y, cell.left, bottom, right, bottom)
    ];
    let min2 = Infinity;
    let minIndex = -1;
    distance.forEach((val, index2) => {
      if (val < min2) {
        minIndex = index2;
        min2 = val;
      }
    });
    if (min2 < minDistance[minIndex].distance) {
      minDistance[minIndex].cellIndex = cellIndex;
      minDistance[minIndex].distance = min2;
    }
  });
  if (inside) {
    return {
      distance: -1,
      side: "inside",
      index: inside.cellIndex
    };
  }
  const pointInsideGrid = x <= rightEdge + maxDistance && y <= bottomEdge + maxDistance;
  if (!pointInsideGrid)
    return null;
  const min = minDistance.reduce((min2, val) => {
    if (!min2 || val.distance < min2.distance)
      return val;
    return min2;
  }, null);
  if (!min)
    return null;
  return {
    distance: min.distance,
    index: min.cellIndex,
    side: min.side
  };
}
function pointToSegDist(x, y, x1, y1, x2, y2) {
  const cross1 = (x2 - x1) * (x - x1) + (y2 - y1) * (y - y1);
  if (cross1 <= 0) {
    return Math.hypot(x - x1, y - y1);
  }
  const cross2 = (x1 - x2) * (x - x2) + (y1 - y2) * (y - y2);
  if (cross2 <= 0) {
    return Math.hypot(x - x2, y - y2);
  }
  const lengthOfSegment = Math.hypot(x2 - x1, y2 - y1);
  const r = cross1 / (lengthOfSegment * lengthOfSegment);
  const px = x1 + (x2 - x1) * r;
  const py = y1 + (y2 - y1) * r;
  return Math.hypot(x - px, y - py);
}
function getRectsOfCells(cells, gap, outerGap) {
  let rects = cells.map((c) => ({
    left: c.left,
    top: c.top,
    width: c.width,
    height: c.height
  }));
  rects = reLayoutGridByGapBorder(rects, gap, outerGap);
  rects.forEach((rect) => {
    rect.width = Math.max(rect.width, 1);
    rect.height = Math.max(rect.height, 1);
  });
  return rects;
}
var template = `<div
    class="editor-element"
    :class="[
        'editor-element-' + model.type,
        model.lock ? 'editor-element-lock' : '',
        model.hidden ? 'editor-element-hidden' : '',
        model.frozen ? 'editor-element-frozen' : '',
        model.$loaded ? '' : 'editor-element-loading',
        model.$selected ? 'editor-element-selected' : '',
        model.$editing ? 'editor-element-editing' : '',
    ]"
    :style="baseStyle"
>
    <!-- elements -->
    <component
        ref="elements"
        v-for="(element, index) in model.elements"
        :key="index"
        is="cell-element"
        :options="options"
        :global="global"
        :model="element"
        :render-model="renderElements[index]"
    ></component>

    <i class="border-before"></i>
</div>
`;
var CollageElement = inherit(EditorElementGroup, {
  name: "collage-element",
  template,
  data() {
    return {
      imageDropMode: false
    };
  },
  computed: {
    backgroundStyle() {
      const { backgroundColor } = this.model;
      return {
        backgroundColor
      };
    },
    renderElements() {
      const { elements } = this.model;
      const { gap, outerGap } = this;
      return getRectsOfCells(elements.map((element) => utils.getElementRect(element)), gap, outerGap);
    },
    outerGap() {
      const { outerGap = 0 } = this.model;
      return this.imageDropMode ? outerGap + 4 : outerGap;
    },
    gap() {
      const { gap = 0 } = this.model;
      return this.imageDropMode ? gap + 4 : gap;
    }
  },
  methods: {
    resizeInit() {
      this.$childModelsCache = this.model.elements.map((element) => {
        const cache = lodash.exports.pick(element, [
          "left",
          "top",
          "width",
          "height",
          "fontSize",
          "imageWidth",
          "imageHeight"
        ]);
        cache.padding = lodash.exports.clone(element.padding);
        cache.clip = lodash.exports.clone(element.clip);
        return cache;
      });
      this.$elementCache = {
        width: this.model.width,
        height: this.model.height
      };
    },
    getRect() {
      const { model, global } = this;
      const { zoom } = global;
      const { elements } = model;
      const bbox = utils.getBBoxByElements(elements.map((elem) => __spreadProps(__spreadValues({}, elem), {
        rotate: 0
      })));
      return {
        height: bbox.height * zoom + bbox.top * 2 * zoom,
        width: bbox.width * zoom + bbox.left * 2 * zoom
      };
    },
    resizeEnd() {
      delete this.$childModelsCache;
      delete this.$elementCache;
    },
    setSubElementsRatio(widthRatio, heightRatio) {
      const { $childModelsCache, model } = this;
      const rects = $childModelsCache.map((rect) => {
        return {
          left: rect.left * widthRatio,
          top: rect.top * heightRatio,
          width: rect.width * widthRatio,
          height: rect.height * heightRatio
        };
      });
      rects.forEach((rect, i) => {
        const element = model.elements[i];
        element.left = rect.left;
        element.top = rect.top;
        element.width = rect.width;
        element.height = rect.height;
      });
    },
    setItemRoundness() {
      const { elements, itemRoundness } = this.model;
      elements.forEach((element) => {
        element.borderRadius = itemRoundness;
      });
    },
    removeSubElement(index2, direction) {
      const { elements, $cellIndex } = this.model;
      if (elements.length > this.options.minCellCount) {
        if ($cellIndex === index2) {
          this.model.$cellIndex = -1;
        }
        const rects = [];
        elements.forEach((_element) => {
          const rect = utils.getElementRect(_element);
          rect.$element = _element;
          rects.push(rect);
        });
        const newRects = removeCellInGrids(rects, index2, 0, direction);
        this.model.elements = newRects.map((rect) => {
          const { left, top: top2, width, height, $element } = rect;
          $element.left = left;
          $element.top = top2;
          $element.width = width;
          $element.height = height;
          return $element;
        });
        this.$events.$emit("editor.snapshot.create", null, true);
        this.autoFixGrid();
      }
    },
    clearSubElement(index2) {
      const { elements } = this.model;
      const element = elements[index2];
      if (element) {
        element.url = "";
        element.imageTransform = null;
        element.opacity = 1;
      }
    },
    addSubElement(index2, side, cell) {
      const { elements } = this.model;
      const element = elements[index2];
      if (element) {
        const rect = utils.getElementRect(element);
        const newWidth = Math.max(rect.width / 2, 1);
        const newHeight = Math.max(rect.height / 2, 1);
        if (["left", "right"].indexOf(side) >= 0) {
          let leftElement, rightElement;
          if (side === "left") {
            leftElement = cell;
            rightElement = element;
          } else {
            leftElement = element;
            rightElement = cell;
          }
          leftElement.left = rect.left;
          leftElement.top = rect.top;
          leftElement.width = newWidth;
          leftElement.height = rect.height;
          rightElement.left = rect.left + newWidth;
          rightElement.top = rect.top;
          rightElement.width = newWidth;
          rightElement.height = rect.height;
        } else {
          let topElement, bottomElement;
          if (side === "top") {
            topElement = cell;
            bottomElement = element;
          } else {
            topElement = element;
            bottomElement = cell;
          }
          topElement.left = rect.left;
          topElement.top = rect.top;
          topElement.width = rect.width;
          topElement.height = newHeight;
          bottomElement.left = rect.left;
          bottomElement.top = rect.top + newHeight;
          bottomElement.width = rect.width;
          bottomElement.height = newHeight;
        }
        elements.splice(index2, 0, cell);
        this.model.$cellIndex = index2;
      }
    },
    changeSubelement(index2, props) {
      const cell = this.model.elements[index2];
      if (cell) {
        lodash.exports.merge(cell, props);
      }
    },
    getMergeableDirectionOfCell(index2) {
      const { elements } = this.model;
      const grid = elements.map((elem) => ({
        left: elem.left,
        top: elem.top,
        width: elem.width,
        height: elem.height
      }));
      return getMergeableDirectionOfCell(grid, index2);
    },
    autoFixGrid() {
      const elements = this.model.elements;
      const tops = /* @__PURE__ */ new Set();
      const lefts = /* @__PURE__ */ new Set();
      elements.forEach((elem) => {
        tops.add(elem.top);
        lefts.add(elem.left);
      });
      Array.from(tops).sort((t1, t2) => t1 - t2).forEach((top2) => {
        const cellsRelated = elements.filter((elem) => Math.abs(elem.top - top2) < 1 || elem.top - top2 < -1 && elem.top + elem.height - top2 > 1).sort((c1, c2) => c1.left - c2.left);
        if (cellsRelated[0].left !== 0) {
          cellsRelated[0].left = 0;
        }
        for (let i = 0; i < cellsRelated.length - 1; i++) {
          const leftCell = cellsRelated[i];
          const rightCell = cellsRelated[i + 1];
          const diff = rightCell.left - (leftCell.left + leftCell.width);
          const topDiff = rightCell.top - leftCell.top;
          if (Math.abs(diff) > 1) {
            if (topDiff < -1) {
              leftCell.width += diff;
            } else {
              rightCell.left -= diff;
              rightCell.width += diff;
            }
          }
        }
      });
      Array.from(lefts).sort((l1, l2) => l1 - l2).forEach((left) => {
        const cellsRelated = elements.filter((elem) => Math.abs(elem.left - left) < 1 || elem.left - left < -1 && elem.left + elem.width - left > 1).sort((c1, c2) => c1.top - c2.top);
        if (cellsRelated[0].top !== 0) {
          cellsRelated[0].top = 0;
        }
        for (let i = 0; i < cellsRelated.length - 1; i++) {
          const topCell = cellsRelated[i];
          const bottomCell = cellsRelated[i + 1];
          const diff = bottomCell.top - (topCell.top + topCell.height);
          const leftDiff = bottomCell.left - topCell.left;
          if (Math.abs(diff) > 1) {
            if (leftDiff < -1) {
              topCell.height += diff;
            } else {
              bottomCell.top -= diff;
              bottomCell.height += diff;
            }
          }
        }
      });
    }
  },
  events: {
    "editor.collage.cell.remove"(element, index2, direction) {
      if (this.model.elements.length <= this.options.minCellCount)
        return;
      let _index = -1;
      if (element === this.model) {
        _index = index2;
      } else {
        _index = this.model.elements.findIndex((elem) => elem === element);
      }
      if (_index !== -1) {
        this.removeSubElement(_index, direction);
      }
    },
    "editor.collage.cell.add"(element, index2, side, cell) {
      if (element === this.model) {
        this.addSubElement(index2, side, cell);
      }
    },
    "editor.collage.cell.change"(element, index2, props) {
      if (element === this.model) {
        this.changeSubelement(index2, props);
      }
    },
    "editor.collage.cell.clear"(element, index2) {
      if (element === this.model) {
        this.clearSubElement(index2);
      }
    },
    "editor.collage.dropmode.active"(element) {
      if (element === this.model) {
        this.imageDropMode = true;
      }
    },
    "editor.collage.dropmode.unactive"(element) {
      if (element === this.model) {
        this.imageDropMode = false;
      }
    }
  },
  watch: {
    "model.width"() {
      this.updateSubElements();
    },
    "model.height"() {
      this.updateSubElements();
    },
    "model.itemRoundness"() {
      this.setItemRoundness();
      this.$events.$emit("editor.snapshot.create", "change_element");
    },
    "model.gap"() {
      this.$events.$emit("editor.snapshot.create", "change_element");
    },
    "model.outerGap"() {
      this.$events.$emit("editor.snapshot.create", "change_element");
    }
  },
  created() {
    this.load();
    this.setItemRoundness();
  },
  mounted() {
    this.autoFixGrid();
  }
});
var methods = {
  flipCell(dir) {
    const currentCell = this.getCurrentCell();
    if (!currentCell)
      return;
    this.$events.$emit("editor.cell.flip", currentCell, dir);
  },
  zoomCell(zoom) {
    const currentCell = this.getCurrentCell();
    if (!currentCell)
      return;
    this.$events.$emit("editor.cell.zoom", currentCell, zoom);
  },
  rotateCell(deg) {
    const currentCell = this.getCurrentCell();
    if (!currentCell)
      return;
    this.$events.$emit("editor.cell.rotate", currentCell, deg);
  },
  getRectOfCell(collage, index2) {
    if (!collage || collage.type !== "collage") {
      throw new Error("first argument should be collage element model");
    }
    return getRectsOfCells(collage.elements, collage.gap, collage.outerGap)[index2];
  },
  getCurrentCell() {
    if (!this.currentElement || this.currentElement.type !== "collage")
      return null;
    return this.currentElement.elements[this.currentElement.$cellIndex];
  },
  resizeCurrentCell({ width, height }) {
    if (!this.currentElement || this.currentElement.type !== "collage" || this.currentElement.$cellIndex === -1)
      return;
    const cellIndex = this.currentElement.$cellIndex;
    const currentCell = this.getCurrentCell();
    const diff = {
      x: width ? width - currentCell.width : 0,
      y: height ? height - currentCell.height : 0
    };
    const grid = this.currentElement.elements.map((e) => ({
      left: e.left,
      top: e.top,
      width: e.width,
      height: e.height
    }));
    const updateGrid = () => {
      grid.forEach((c) => {
        c.width = c._width || c.width;
        c.height = c._height || c.height;
        c.left = c._left || c.left;
        c.top = c._top || c.top;
      });
    };
    const cell = grid[cellIndex];
    const right = cell.left + cell.width;
    const bottom = cell.top + cell.height;
    if (diff.x !== 0) {
      const relationAtRight = relationOfLineInGrid(grid, [
        {
          x: right,
          y: cell.top
        },
        {
          x: right,
          y: bottom
        }
      ]);
      const relationAtLeft = relationOfLineInGrid(grid, [
        {
          x: cell.left,
          y: cell.top
        },
        {
          x: cell.left,
          y: bottom
        }
      ]);
      if (relationAtRight.right.length > 0 && relationAtLeft.left.length > 0) {
        const leftDiff = Math.ceil(diff.x / 2);
        this.resizeCellFromLeft(grid, cell, leftDiff, relationAtLeft);
        updateGrid();
        this.resizeCellFromRight(grid, cell, diff.x - leftDiff, relationAtRight);
      } else if (relationAtRight.right.length > 0) {
        this.resizeCellFromRight(grid, cell, diff.x, relationAtRight);
      } else if (relationAtLeft.left.length > 0) {
        this.resizeCellFromLeft(grid, cell, diff.x, relationAtLeft);
      }
    }
    if (diff.y !== 0) {
      const relationAtBottom = relationOfLineInGrid(grid, [
        {
          x: cell.left,
          y: bottom
        },
        {
          x: right,
          y: bottom
        }
      ]);
      const relationAtTop = relationOfLineInGrid(grid, [
        {
          x: cell.left,
          y: cell.top
        },
        {
          x: right,
          y: cell.top
        }
      ]);
      if (relationAtBottom.bottom.length > 0 && relationAtTop.top.length > 0) {
        const topDiff = Math.ceil(diff.y / 2);
        this.resizeCellFromTop(grid, cell, topDiff, relationAtTop);
        updateGrid();
        this.resizeCellFromBottom(grid, cell, diff.y - topDiff, relationAtBottom);
      } else if (relationAtBottom.bottom.length > 0) {
        this.resizeCellFromBottom(grid, cell, diff.y, relationAtBottom);
      } else if (relationAtTop.top.length > 0) {
        this.resizeCellFromTop(grid, cell, diff.y, relationAtTop);
      }
    }
    updateGrid();
    this.currentElement.elements.forEach((elem, index2) => {
      elem.left = grid[index2].left;
      elem.top = grid[index2].top;
      elem.width = grid[index2].width;
      elem.height = grid[index2].height;
    });
  },
  resizeCellFromRight(grid, cell, diff, relation) {
    if (!cell || !diff)
      return;
    if (!relation) {
      const right = cell.left + cell.width;
      const bottom = cell.top + cell.height;
      relation = relationOfLineInGrid(grid, [
        {
          x: right,
          y: cell.top
        },
        {
          x: right,
          y: bottom
        }
      ]);
    }
    cell._width = cell.width + diff;
    relation.right = relation.right.filter((c) => !c.source._width && !c.source._left);
    if (relation.right.length === 0)
      return;
    const exactRightCell = relation.right.find((c) => Math.abs(c.top - cell.top) < 1 && Math.abs(c.height - cell.height) < 1);
    if (exactRightCell) {
      exactRightCell.source._left = exactRightCell.source.left + diff;
      exactRightCell.source._width = exactRightCell.source.width - diff;
      return;
    }
    const line = {
      from: Infinity,
      to: -Infinity
    };
    relation.right.forEach((c) => {
      line.from = Math.min(c.top, line.from);
      line.to = Math.max(c.top + c.height, line.to);
      c.source._width = c.source.width - diff;
      c.source._left = c.source.left + diff;
    });
    const rightX = relation.right[0].left;
    const lineRelation = relationOfLineInGrid(grid, [
      {
        x: rightX,
        y: line.from
      },
      {
        x: rightX,
        y: line.to
      }
    ]);
    lineRelation.left.filter((l) => !l.source._width && !l.source._left).forEach((l) => {
      this.resizeCellFromRight(grid, l.source, diff);
    });
  },
  resizeCellFromLeft(grid, cell, diff, relation) {
    if (!cell || !diff)
      return;
    const bottom = cell.top + cell.height;
    if (!relation) {
      relation = relationOfLineInGrid(grid, [
        {
          x: cell.left,
          y: cell.top
        },
        {
          x: cell.left,
          y: bottom
        }
      ]);
    }
    cell._width = cell.width + diff;
    cell._left = cell.left - diff;
    relation.left = relation.left.filter((c) => !c.source._width && !c.source._left);
    if (relation.left.length === 0)
      return;
    const exactLeftCell = relation.left.find((c) => Math.abs(c.top - cell.top) < 1 && Math.abs(c.height - cell.height) < 1);
    if (exactLeftCell) {
      exactLeftCell.source._width = exactLeftCell.source.width - diff;
      return;
    }
    const line = {
      from: Infinity,
      to: -Infinity
    };
    relation.left.forEach((c) => {
      line.from = Math.min(c.top, line.from);
      line.to = Math.max(c.top + c.height, line.to);
      c.source._width = c.source.width - diff;
    });
    const leftX = relation.left[0].left + relation.left[0].width;
    const lineRelation = relationOfLineInGrid(grid, [
      {
        x: leftX,
        y: line.from
      },
      {
        x: leftX,
        y: line.to
      }
    ]);
    lineRelation.right.filter((l) => !l.source._width && !l.source._left).forEach((l) => {
      this.resizeCellFromLeft(grid, l.source, diff);
    });
  },
  resizeCellFromBottom(grid, cell, diff, relation) {
    if (!cell || !diff)
      return;
    if (!relation) {
      const right = cell.left + cell.width;
      const bottom = cell.top + cell.height;
      relation = relationOfLineInGrid(grid, [
        {
          x: cell.left,
          y: bottom
        },
        {
          x: right,
          y: bottom
        }
      ]);
    }
    cell._height = cell.height + diff;
    relation.bottom = relation.bottom.filter((c) => !c.source._height && !c.source._top);
    if (relation.bottom.length === 0)
      return;
    const exactBottomCell = relation.bottom.find((c) => Math.abs(c.left - cell.left) < 1 && Math.abs(c.width - cell.width) < 1);
    if (exactBottomCell) {
      exactBottomCell.source._top = exactBottomCell.source.top + diff;
      exactBottomCell.source._height = exactBottomCell.source.height - diff;
      return;
    }
    const line = {
      from: Infinity,
      to: -Infinity
    };
    relation.bottom.forEach((c) => {
      line.from = Math.min(c.left, line.from);
      line.to = Math.max(c.left + c.width, line.to);
      c.source._height = c.source.height - diff;
      c.source._top = c.source.top + diff;
    });
    const bottomY = relation.bottom[0].top;
    const lineRelation = relationOfLineInGrid(grid, [
      {
        x: line.from,
        y: bottomY
      },
      {
        x: line.to,
        y: bottomY
      }
    ]);
    lineRelation.top.filter((c) => !c.source._height && !c.source._top).forEach((c) => {
      this.resizeCellFromBottom(grid, c.source, diff);
    });
  },
  resizeCellFromTop(grid, cell, diff, relation) {
    if (!cell || !diff)
      return;
    const right = cell.left + cell.width;
    if (!relation) {
      relation = relationOfLineInGrid(grid, [
        {
          x: cell.left,
          y: cell.top
        },
        {
          x: right,
          y: cell.top
        }
      ]);
    }
    cell._height = cell.height + diff;
    cell._top = cell.top - diff;
    relation.top = relation.top.filter((c) => !c.source._height && !c.source._top);
    if (relation.top.length === 0)
      return;
    const exactTopCell = relation.top.find((c) => Math.abs(c.left - cell.left) < 1 && Math.abs(c.width - cell.width) < 1);
    if (exactTopCell) {
      exactTopCell.source._height = exactTopCell.source.height - diff;
      return;
    }
    const line = {
      from: Infinity,
      to: -Infinity
    };
    relation.top.forEach((c) => {
      line.from = Math.min(c.left, line.from);
      line.to = Math.max(c.left + c.width, line.to);
      c.source._height = c.source.height - diff;
    });
    const topY = relation.top[0].top + relation.top[0].height;
    const lineRelation = relationOfLineInGrid(grid, [
      {
        x: line.from,
        y: topY
      },
      {
        x: line.to,
        y: topY
      }
    ]);
    lineRelation.bottom.filter((c) => !c.source._height && !c.source._top).forEach((c) => {
      this.resizeCellFromTop(grid, c.source, diff);
    });
  }
};
var EditorCollageEditorTpl = `<div
    class="editor-collage-editor"
    :class="{
        'line-dragging': currentDraggingLine.dir === 'h',
        'line-dragging-v': currentDraggingLine.dir === 'v',
        'img-dragging': !!draggingCell,
        'collage-dragging': model.$draging && !model.$customDragMove
    }"
    @click="onClick"
    @dblclick="onDblClick"
>
    <div class="editor-img-ghost" v-if="cellGhostVisible" :style="cellGhostStyle">
        <img :src="draggingCell.url" />
    </div>
    <div
        class="editor-drag-gap-placeholder"
        :style="dragGapPlaceholderStyle"
        v-if="dropImgMode"
    ></div>
    <div v-else-if="guideLines">
        <div
            class="editor-collage-h"
            :class="{'line-dragging': isCurrentDraggingLine(i, 'h')}"
            v-for="(line, i) in guideLines.horizontal"
            :key="'h' + i"
            :style="lineStyle(line)"
            @mousedown="initLineDrag(line, 'h', $event, i)"
        ></div>
        <div
            class="editor-collage-v"
            :class="{'line-dragging': isCurrentDraggingLine(i, 'v')}"
            v-for="(line, i) in guideLines.vertical"
            :key="'v'+ i"
            :style="lineStyle(line)"
            @mousedown="initLineDrag(line, 'v', $event, i)"
        ></div>
    </div>
    <div class="editor-element-cell-ghosts">
        <div
            class="editor-element-cell-ghost"
            :class="{selected: model.$cellIndex === index && !model.$draging}"
            v-for="(cell, index) in renderElements"
            :style="getCellStyle(cell, index)"
        >
            <div class="editor-element-cell--remover-wrapper" @click="removeImgOrCell(cell, index)">
                <div
                    class="editor-element-cell--remover"
                    :class="{'dark-bg': isCellBgDark(cell)}"
                    :style="getCellRemoverStyle(cell, index)"
                >
                    <svg
                        version="1.1"
                        id="\u56FE\u5C42_1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        x="0px"
                        y="0px"
                        viewBox="0 0 16 16"
                    >
                        <path
                            style="opacity: 0.9; fill: #fff"
                            d="M11.8,1.6l-0.7,0.7L7.8,5.6L4.6,2.3L3.9,1.6L3.1,2.3L2,3.4L1.3,4.1L2,4.8l3.3,3.3L2,11.4l-0.7,0.7L2,12.8 L3.1,14l0.7,0.7L4.6,14l3.3-3.3l3.3,3.3l0.7,0.7l0.7-0.7l1.1-1.1l0.7-0.7l-0.7-0.7l-3.3-3.3l3.3-3.3l0.7-0.7l-0.7-0.7l-1.1-1.1 L11.8,1.6L11.8,1.6z"
                        />
                        <g>
                            <polygon
                                points="13,4.1 11.8,3 7.8,7 3.9,3 2.7,4.1 6.7,8.1 2.7,12.1 3.9,13.3 7.8,9.3 11.8,13.3 13,12.1 9,8.1"
                            />
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="editor-collage-dragger">
        <svg
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 16 16"
        >
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M8.616,12.524h2.344l-2.976,2.976l-2.976-2.976h2.405V8.631H3.476v2.344L0.5,8l2.976-2.976v2.405h3.938V3.476H5.009L7.985,0.5l2.976,2.976H8.616v3.953h3.908V5.024L15.499,8l-2.976,2.976V8.631H8.616V12.524z"
            />
        </svg>
    </div>
</div>
`;
const MIN_CELL_SIZE = 30;
const doc = $(document);
var CollageEditor = {
  name: "collage-editor",
  template: EditorCollageEditorTpl,
  props: ["global", "model", "options"],
  data() {
    return {
      draggingCell: null,
      draggingCellRenderModel: null,
      dragActiveCell: {
        index: -1,
        side: ""
      },
      currentDraggingLine: {
        index: -1,
        initIndex: -1,
        dir: "",
        otherLinesCache: null
      },
      cellGhostVisible: false,
      cellGhostStyle: {},
      dropImgMode: false
    };
  },
  computed: {
    rect() {
      const { model } = this;
      const { zoom } = this.global;
      return utils.getElementRect(model, zoom);
    },
    renderElements() {
      const { elements } = this.model;
      const { gap, outerGap } = this;
      return getRectsOfCells(elements.map((element) => utils.getElementRect(element)), gap, outerGap);
    },
    outerGap() {
      const { outerGap = 0 } = this.model;
      return this.dropImgMode ? outerGap + 4 : outerGap;
    },
    gap() {
      const { gap = 0 } = this.model;
      return this.dropImgMode ? gap + 4 : gap;
    },
    guideLines() {
      const gap = this.model.gap;
      return reLayoutGuideLine(this.renderElements, gap, Math.max(Math.min(3, gap / 2), 1));
    },
    dragGapPlaceholderStyle() {
      const { index: index2, side } = this.dragActiveCell;
      if (index2 === -1 || side === "") {
        return {
          display: "none"
        };
      } else {
        const { zoom } = this.global;
        const gap = this.gap * zoom;
        const cell = this.renderElements[index2];
        const dir = ["left", "right"].indexOf(side) > -1 ? "v" : "h";
        const gapSize = 4;
        const width = dir === "v" ? gapSize : cell.width * zoom;
        const height = dir === "h" ? gapSize : cell.height * zoom;
        let left = cell.left * zoom;
        let top2 = cell.top * zoom;
        if (side === "left") {
          left -= (gap + gapSize) / 2;
          left = Math.max(0, left);
          if (left - this.outerGap > 0) {
            left = Math.max(left, this.outerGap / 2);
          } else {
            left = Math.min(left, this.outerGap / 2);
          }
        } else if (side === "right") {
          left += cell.width * zoom + (gap - gapSize) / 2;
          left = Math.min(left, (this.model.width - this.outerGap / 2) * zoom);
        }
        if (side === "top") {
          top2 -= (gap + gapSize) / 2;
          top2 = Math.max(0, top2);
          if (top2 - this.outerGap > 0) {
            top2 = Math.max(top2, this.outerGap / 2);
          } else {
            top2 = Math.min(top2, this.outerGap / 2);
          }
        } else if (side === "bottom") {
          top2 += cell.height * zoom + (gap - gapSize) / 2;
          top2 = Math.min(top2, (this.model.height - this.outerGap / 2) * zoom);
        }
        return {
          left: `${left}px`,
          top: `${top2}px`,
          width: `${width}px`,
          height: `${height}px`
        };
      }
    }
  },
  methods: {
    lineStyle(line) {
      const { zoom } = this.global;
      const { from, to } = line;
      const width = to.x - from.x;
      const height = to.y - from.y;
      const lineSize = 10;
      const left = from.x;
      const top2 = from.y;
      return {
        left: (width !== 0 ? left * zoom : left * zoom - lineSize / 2) + "px",
        top: (height !== 0 ? top2 * zoom : top2 * zoom - lineSize / 2) + "px",
        width: width * zoom + "px",
        height: height * zoom + "px"
      };
    },
    initLineDrag(line, dir, e, index2) {
      const self = this;
      const { model } = this;
      const zoom = this.global.zoom;
      this.currentDraggingLine = {
        index: index2,
        initIndex: index2,
        dir,
        otherLinesCache: dir === "h" ? this.guideLines.horizontal.slice() : this.guideLines.vertical.slice()
      };
      if (e.button !== 0 || model.$draging) {
        return;
      }
      const { from, to } = line;
      const cells = this.renderElements.map((rect, index3) => {
        const element = model.elements[index3];
        return __spreadProps(__spreadValues({}, rect), {
          $element: {
            model: element,
            rect: utils.getElementRect(element)
          }
        });
      });
      const relation = relationOfLineInGrid(cells, [from, to], 1);
      const drag = this.drag = {
        dir,
        rotate: model.rotate,
        height: model.height,
        width: model.width,
        centerX: model.width / 2,
        centerY: model.height / 2,
        relation,
        line,
        left: to.x,
        top: to.y,
        pageX: e.pageX,
        pageY: e.pageY,
        points: utils.getPointsByElement(model),
        move(e2) {
          e2.preventDefault();
          const dx = e2.pageX - drag.pageX;
          const dy = e2.pageY - drag.pageY;
          const dxy = utils.getDxyByAngle(dx, dy, drag.rotate);
          dxy.dx = Math.round(dxy.dx);
          dxy.dy = Math.round(dxy.dy);
          drag.dx = dxy.dx / zoom;
          drag.dy = dxy.dy / zoom;
          const lineCache = self.currentDraggingLine.otherLinesCache;
          if (!lineCache)
            return;
          if (dir === "h" && lineCache.length > self.guideLines.horizontal.length) {
            const changedIndex = lineCache.findIndex((l, index3) => {
              const newLine = self.guideLines.horizontal[index3];
              return !newLine || l.from.x !== newLine.from.x || l.to.x !== newLine.to.x;
            });
            self.currentDraggingLine.index = changedIndex;
          } else if (dir === "v" && lineCache.length > self.guideLines.vertical.length) {
            const changedIndex = lineCache.findIndex((l, index3) => {
              const newLine = self.guideLines.vertical[index3];
              return !newLine || l.from.y !== newLine.from.y || l.to.y !== newLine.to.y;
            });
            self.currentDraggingLine.index = changedIndex;
          } else {
            self.currentDraggingLine.index = self.currentDraggingLine.initIndex;
          }
          if (!drag.draging) {
            drag.draging = true;
            self.$events.$emit("collageEditor.lineDrag.active", model, drag);
          }
          self.$events.$emit("collageEditor.lineDrag.moving", drag, model);
        },
        cancel() {
          doc.off("mousemove", drag.move);
          self.drag = null;
          model.$draging = false;
          model.$customDragMove = false;
          self.currentDraggingLine = {
            index: -1,
            initIndex: -1,
            dir: "",
            otherLinesCache: null
          };
          if (drag.draging) {
            self.$events.$emit("collageEditor.lineDrag.inactive", model, drag);
            drag.draging = false;
          }
        }
      };
      model.$draging = true;
      model.$customDragMove = true;
      doc.on("mousemove", throttle(drag.move, 16));
      doc.one("mouseup", drag.cancel);
    },
    isCurrentDraggingLine(index2, dir) {
      return this.currentDraggingLine.index === index2 && this.currentDraggingLine.dir === dir;
    },
    dragInit(drag) {
      const { editor } = this.$parent;
      const { elements } = this.model;
      if (editor) {
        const { x, y } = editor.pointFromEvent(drag);
        this.$drag = this.pointFromEvent(x, y);
        const nearestCell = findNearestCellOfPoint(this.renderElements, this.$drag, 0);
        if (nearestCell && nearestCell.side === "inside") {
          const cell = elements[nearestCell.index];
          const renderModel = this.renderElements[nearestCell.index];
          if (cell && cell.url) {
            let imgWidth = cell.$width;
            let imgHeight = cell.$height;
            if (cell.rotate === 90 || cell.rotate === 270 || cell.rotate === -90 || cell.rotate === -270) {
              imgWidth = cell.$height;
              imgHeight = cell.$width;
            }
            this.$cellCache = {
              maxDx: Math.abs(imgWidth / 2 - renderModel.width * this.global.zoom / 2),
              maxDy: Math.abs(imgHeight / 2 - renderModel.height * this.global.zoom / 2),
              offset: clone(cell.offset)
            };
          }
          const draggingCell = this.model.elements[nearestCell.index];
          if (draggingCell.url) {
            this.$dragCellIndex = nearestCell.index;
            this.draggingCell = this.model.elements[nearestCell.index];
            this.draggingCellRenderModel = this.renderElements[nearestCell.index];
            this.model.$cellIndex = nearestCell.index;
          }
        }
        this.model.$customDragMove = !!this.draggingCell;
      }
    },
    dragMoving(dx, dy) {
      const { $dragCellIndex, $drag, $nearestCell, gap, outerGap } = this;
      const { elements } = this.model;
      const rad = this.model.rotate * Math.PI / 180;
      let _dx = dx * Math.cos(rad) + dy * Math.sin(rad);
      let _dy = -dx * Math.sin(rad) + dy * Math.cos(rad);
      if ($dragCellIndex >= 0) {
        const nearestCell = findNearestCellOfPoint(this.renderElements, { x: $drag.x + _dx, y: $drag.y + _dy }, outerGap);
        if ($nearestCell) {
          this.$events.$emit("editor.collage.cell.unactive", this.model);
        }
        let dragOverVisible = true;
        if (nearestCell) {
          const cell = elements[nearestCell.index];
          if (nearestCell.side !== "inside") {
            this.$events.$emit("editor.collage.cell.active", this.model, nearestCell.index, nearestCell.side);
            dragOverVisible = false;
          } else if (!this.cellGhostVisible && nearestCell.index === $dragCellIndex) {
            const { offset, maxDx, maxDy } = this.$cellCache;
            let _maxDx = maxDx;
            let _maxDy = maxDy;
            if (cell.rotate === 90 || cell.rotate === -270) {
              _dx = cell.scaleX * dy;
              _dy = cell.scaleY * -dx;
              _maxDx = maxDy;
              _maxDy = maxDx;
            } else if (cell.rotate === 180 || cell.rotate === -180) {
              _dx = cell.scaleX * -dx;
              _dy = cell.scaleY * -dy;
            } else if (cell.rotate === 270 || cell.rotate === -90) {
              _dx = cell.scaleX * -dy;
              _dy = cell.scaleY * dx;
              _maxDx = maxDy;
              _maxDy = maxDx;
            } else {
              _dx = cell.scaleX * dx;
              _dy = cell.scaleY * dy;
            }
            if (Math.abs(offset.x + _dx) * this.global.zoom * cell.zoom <= _maxDx) {
              cell.offset.x = offset.x + _dx / cell.zoom;
            } else if (_dx > 0) {
              cell.offset.x = _maxDx / (this.global.zoom * cell.zoom);
            } else {
              cell.offset.x = -_maxDx / (this.global.zoom * cell.zoom);
            }
            if (Math.abs(offset.y + _dy) * this.global.zoom * cell.zoom <= _maxDy) {
              cell.offset.y = offset.y + _dy / cell.zoom;
            } else if (_dy > 0) {
              cell.offset.y = _maxDy / (this.global.zoom * cell.zoom);
            } else {
              cell.offset.y = -_maxDy / (this.global.zoom * cell.zoom);
            }
          }
        }
        this.$nearestCell = nearestCell;
        if (!this.draggingCell) {
          this.cellGhostVisible = false;
        } else {
          const ghostLeft = this.$drag.x + _dx;
          const ghostTop = this.$drag.y + _dy;
          const renderModel = this.draggingCellRenderModel;
          const right = renderModel.width + renderModel.left;
          const bottom = renderModel.height + renderModel.top;
          if (!this.cellGhostVisible) {
            this.cellGhostVisible = ghostLeft - right > -gap / 2 || ghostLeft - renderModel.left < gap / 2 || ghostTop - renderModel.top < gap / 2 || ghostTop - bottom > -gap / 2;
          } else {
            const { imageWidth, imageHeight } = this.draggingCell;
            const ratio = imageWidth / imageHeight;
            const ghostWidth = 110;
            const ghostHeight = ghostWidth / ratio;
            this.cellGhostStyle = {
              width: `${ghostWidth}px`,
              left: `${(ghostLeft - ghostWidth / 2) * this.global.zoom}px`,
              top: `${(ghostTop - ghostHeight / 2) * this.global.zoom}px`
            };
            if (dragOverVisible) {
              const cell = this.$nearestCell ? this.model.elements[this.$nearestCell.index] : null;
              this.$events.$emit("editor.cell.dragover", cell);
            } else {
              this.$events.$emit("editor.cell.dragover", null);
            }
            this.$events.$emit("editor.collage.dropmode.active", this.model);
          }
        }
      }
    },
    dragEnd() {
      const { $dragCellIndex, $nearestCell } = this;
      const { elements } = this.model;
      if ($dragCellIndex >= 0) {
        this.$events.$emit("editor.collage.cell.unactive", this.model);
        const dragCell = elements[$dragCellIndex];
        if ($nearestCell) {
          this.$events.$emit("editor.collage.cell.unactive", this.model);
          if ($nearestCell.side !== "inside") {
            const newCell = cloneDeep(dragCell);
            newCell.backgroundColor = "";
            newCell.zoom = 1;
            this.$events.$emit("editor.collage.cell.clear", this.model, $dragCellIndex);
            this.$events.$emit("editor.collage.cell.add", this.model, $nearestCell.index, $nearestCell.side, newCell);
          } else if ($nearestCell.index !== $dragCellIndex) {
            const cell = elements[$nearestCell.index];
            const { url, imageTransform, opacity, scaleX, scaleY, rotate } = dragCell;
            dragCell.url = cell.url;
            dragCell.imageTransform = cell.imageTransform;
            dragCell.opacity = cell.opacity;
            dragCell.scaleX = cell.scaleX;
            dragCell.scaleY = cell.scaleY;
            dragCell.rotate = cell.rotate;
            dragCell.zoom = 1;
            cell.url = url;
            cell.imageTransform = imageTransform;
            cell.opacity = opacity;
            cell.scaleX = scaleX;
            cell.scaleY = scaleY;
            cell.rotate = rotate;
            cell.zoom = 1;
            this.model.$cellIndex = $nearestCell.index;
          }
        }
      }
      if (this.model.$customDragMove) {
        this.draggingCell = null;
        this.cellGhostVisible = false;
        this.$events.$emit("editor.cell.dragover", null);
        this.$events.$emit("editor.collage.dropmode.unactive", this.model);
        delete this.$nearestCell;
        delete this.$targetCell;
        delete this.$dragInit;
        delete this.$cellCache;
        delete this.$dragCellIndex;
      }
      this.model.$customDragMove = false;
      delete this.$drag;
    },
    pointFromEvent(pointX, pointY) {
      const { width, height, rotate, left, top: top2 } = this.rect;
      const zoom = this.global.zoom;
      const pivotX = width / zoom / 2;
      const pivotY = height / zoom / 2;
      pointX = pointX - left / zoom - pivotX;
      pointY = -(pointY - top2 / zoom - pivotY);
      const point = utils.getRotationPoint({ x: pointX, y: pointY }, -(360 - rotate) / 180 * Math.PI);
      return { x: point.x + pivotX, y: pivotY - point.y };
    },
    remove(index2) {
      this.$events.$emit("editor.collage.cell.remove", this.model, index2);
    },
    getCellStyle(renderModel, index2) {
      const { zoom } = this.global;
      const { width, height, left, top: top2 } = renderModel;
      const cell = this.model.elements[index2];
      const minSize = Math.min(width, height);
      return {
        left: `${left * zoom}px`,
        top: `${top2 * zoom}px`,
        width: `${width * zoom}px`,
        height: `${height * zoom}px`,
        borderRadius: `${cell.borderRadius * minSize * zoom / 2}px`,
        cursor: "move"
      };
    },
    getCellRemoverStyle(renderModel, index2) {
      const cellRemoveable = this.model.elements.length > this.options.minCellCount;
      const zoom = this.global.zoom;
      const cell = this.model.elements[index2];
      const width = 16;
      const height = 16;
      const cellWidth = renderModel.width * zoom;
      const cellHeight = renderModel.height * zoom;
      let right = width - MIN_CELL_SIZE < 10 ? 6 : width - 6;
      let top2 = 6;
      const borderRadius = cell.borderRadius;
      const minSize = Math.min(renderModel.width, renderModel.height);
      const roundedWidth = borderRadius * minSize / 2 * zoom;
      if (width > cellWidth) {
        right = (cellWidth - width) / 2;
      } else {
        right = right + roundedWidth / 4;
      }
      if (height > cellHeight) {
        top2 = (cellHeight - height) / 2;
      } else {
        top2 = top2 + roundedWidth / 4;
      }
      return {
        display: cellRemoveable || !!cell.url ? "block" : "none",
        right: `${right}px`,
        top: `${top2}px`
      };
    },
    removeImgOrCell(cell, index2) {
      const element = this.model.elements[index2];
      if (element.url) {
        element.url = "";
        this.$events.$emit("element.editApply", element, false);
      } else {
        if (this.$cellIndex === index2) {
          this.$cellIndex = -1;
        }
        this.$events.$emit("editor.collage.cell.remove", element);
      }
    },
    isCellBgDark(cell) {
      if (cell.url)
        return true;
      if (!cell.backgroundColor)
        return false;
      return tinycolor(cell.backgroundColor).isDark();
    },
    isClickOnRemover(target) {
      if (!target || target === this.$el)
        return false;
      if (typeof target.className === "string" && target.className.indexOf("cell--remover") > -1) {
        return true;
      }
      return this.isClickOnRemover(target.parentElement);
    },
    onClick(event) {
      if (this.isClickOnRemover(event.target)) {
        return;
      }
      const { editor } = this.$parent;
      if (editor) {
        const { elements } = this.model;
        const { x, y } = editor.pointFromEvent(event);
        const elementBelowMouse = editor.elementFromPoint(x, y);
        if (!elementBelowMouse || elementBelowMouse.type !== "collage")
          return;
        const point = this.pointFromEvent(x, y);
        const nearestCell = findNearestCellOfPoint(this.renderElements, point, 0);
        if (nearestCell && nearestCell.side === "inside") {
          const cell = elements[nearestCell.index];
          if (!cell.url) {
            this.$events.$emit("editor.contextmenu", event);
          }
          this.model.$cellIndex = nearestCell.index;
          this.$events.$emit("editor.collage.cell.click", nearestCell);
        } else {
          this.model.$cellIndex = -1;
        }
      }
    },
    onDblClick(event) {
      const { editor } = this.$parent;
      if (editor) {
        const { x, y } = editor.pointFromEvent(event);
        const point = this.pointFromEvent(x, y);
        const nearestCell = findNearestCellOfPoint(this.renderElements, point, 0);
        if (nearestCell && nearestCell.side === "inside") {
          if (this.options.hookImagePicker) {
            this.$events.$emit("editor.collage.picker", this.model.elements[nearestCell.index], this.model);
          } else {
            editor.pickImage((image, url) => {
              this.$events.$emit("editor.collage.cell.change", this.model, nearestCell.index, { url, zoom: 1 });
              this.$events.$emit("editor.edit.apply", this.model);
              this.$events.$emit("editor.collage.image.upload", this.model, nearestCell.index, {
                url,
                width: image.naturalWidth,
                height: image.naturalHeight
              });
            });
          }
          this.model.$cellIndex = nearestCell.index;
        } else {
          this.model.$cellIndex = -1;
        }
      }
    }
  },
  events: {
    "base.dragStart"(model, event) {
      if (model === this.model) {
        this.dragInit(event);
      }
    },
    "base.dragMove"(drag, element) {
      if (element !== this.model) {
        return false;
      }
      let { dx, dy } = drag;
      if (element.$dragLimit) {
        const rotateVector = utils.getVectorRotator(element.rotate);
        const { minLeft, maxLeft, minTop, maxTop, centerDeltaX, centerDeltaY } = element.$getDragLimit();
        const [dx_, dy_] = rotateVector(dx, dy);
        const [centerDeltaX_, centerDeltaY_] = rotateVector(centerDeltaX, centerDeltaY);
        const clampedDeltaX_ = utils.clamp(centerDeltaX_ + dx_, minLeft, maxLeft);
        const clampedDeltaY_ = utils.clamp(centerDeltaY_ + dy_, minTop, maxTop);
        const [clampedDeltaX, clampedDeltaY] = rotateVector(clampedDeltaX_, clampedDeltaY_, true);
        [dx, dy] = [clampedDeltaX - centerDeltaX, clampedDeltaY - centerDeltaY];
      }
      if (this.model.$customDragMove) {
        this.dragMoving(dx, dy);
      }
    },
    "base.dragEnd"(element) {
      if (element === this.model) {
        this.dragEnd();
      }
    },
    "collageEditor.lineDrag.active"(element, drag) {
      if (element === this.model) {
        this.$dragLineCache = cloneDeep(drag.line);
      }
    },
    "collageEditor.lineDrag.moving"(drag, element) {
      if (element === this.model && this.$dragLineCache) {
        const { from } = this.$dragLineCache;
        const { line, relation, dir, dx, dy } = drag;
        let { top: top2, bottom, left, right } = relation;
        top2 = top2.filter((c) => {
          const right2 = c.left + c.width;
          const diff = from.y - c.top - c.height;
          const valid = diff < this.gap / 2 + 3 && diff > this.gap / 2 - 3;
          return valid && c.left >= line.from.x - 1 && right2 <= line.to.x + 1;
        });
        bottom = bottom.filter((c) => {
          const right2 = c.left + c.width;
          const diff = c.top - from.y;
          const valid = diff < this.gap / 2 + 3 && diff > this.gap / 2 - 3;
          return valid && c.left >= line.from.x - 1 && right2 <= line.to.x + 1;
        });
        left = left.filter((c) => {
          const bottom2 = c.top + c.height;
          const diff = from.x - c.left - c.width;
          const valid = diff < this.gap / 2 + 3 && diff > this.gap / 2 - 3;
          return valid && c.top >= line.from.y - 1 && bottom2 <= line.to.y + 1;
        });
        right = right.filter((c) => {
          const bottom2 = c.top + c.height;
          const diff = c.left - from.x;
          const valid = diff < this.gap / 2 + 3 && diff > this.gap / 2 - 3;
          return valid && c.top >= line.from.y - 1 && bottom2 <= line.to.y + 1;
        });
        if (dir === "h") {
          const canResize = !(top2.some((cell) => cell.height + dy < MIN_CELL_SIZE) || bottom.some((cell) => cell.height - dy < MIN_CELL_SIZE));
          if (canResize) {
            line.from.y = from.y + dy;
            line.to.y = from.y + dy;
            top2.forEach((cell) => {
              cell.$element.model.height = cell.$element.rect.height + dy;
            });
            bottom.forEach((cell) => {
              cell.$element.model.height = cell.$element.rect.height - dy;
              cell.$element.model.top = cell.$element.rect.top + dy;
            });
          }
        } else if (dir === "v") {
          const canResize = !(left.some((cell) => cell.width + dx < MIN_CELL_SIZE) || right.some((cell) => cell.width - dx < MIN_CELL_SIZE));
          if (canResize) {
            line.from.x = from.x + dx;
            line.to.x = from.x + dx;
            left.forEach((cell) => {
              cell.$element.model.width = cell.$element.rect.width + dx;
            });
            right.forEach((cell) => {
              cell.$element.model.left = cell.$element.rect.left + dx;
              cell.$element.model.width = cell.$element.rect.width - dx;
            });
          }
        }
      }
    },
    "collageEditor.lineDrag.inactive"(element, drag) {
      if (element === this.model) {
        const { from, to } = drag.line;
        const preFrom = this.$dragLineCache.from;
        const preTo = this.$dragLineCache.to;
        if (from.x !== preFrom.x || from.y !== preFrom.y || to.x !== preTo.x || to.y !== preTo.y) {
          this.$events.$emit("element.editApply", this.model);
        }
        delete this.$dragLineCache;
      }
    },
    "editor.collage.cell.unactive"(element) {
      if (this.model !== element)
        return;
      this.dragActiveCell = {
        index: -1,
        side: ""
      };
    },
    "editor.collage.cell.active"(element, index2, side) {
      if (this.model !== element)
        return;
      this.dragActiveCell = {
        index: index2,
        side
      };
    },
    "editor.collage.dropmode.active"(element) {
      if (this.model !== element)
        return;
      this.dropImgMode = true;
    },
    "editor.collage.dropmode.unactive"(element) {
      if (this.model !== element)
        return;
      this.dropImgMode = false;
    },
    "editor.collage.drag.outside"(evt, cb) {
      if (!evt)
        return;
      const editor = this.$parent.$parent;
      editor.$events.$emit("editor.collage.dropmode.active", this.model);
      const point = this.pointFromEvent(editor.pointFromEvent(evt));
      const { outerGap, model, renderElements } = this;
      const elements = model.elements;
      const nearestCell = findNearestCellOfPoint(renderElements, point, outerGap);
      if (nearestCell) {
        if (nearestCell.side !== "inside") {
          this.$events.$emit("editor.collage.cell.active", model, nearestCell.index, nearestCell.side);
          this.$events.$emit("editor.cell.dragover", null);
        } else {
          this.$events.$emit("editor.cell.dragover", elements[nearestCell.index]);
          this.$events.$emit("editor.collage.cell.unactive", model);
        }
      } else {
        this.$events.$emit("editor.cell.dragover", null);
        this.$events.$emit("editor.collage.cell.unactive", model);
      }
      if (cb)
        cb(nearestCell);
    }
  }
};
var index = {
  model: CollageModel,
  methods,
  layoutComponent: CollageElement,
  editComponent: CollageEditor
};
export { index as default };
