var __defProp = Object.defineProperty;
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;
};
import { l as lodash, aB as throttle, an as debounce, a9 as cloneDeep, aa as pick } from "./index.js";
import { x as createCanvas, e as editorDefaults, P as utils, k as isGroup, t as transformMath, af as isBase64, T as Transform, i as isEqual_1 } from "./watermark.js";
import { E as ElementModel } from "./background.js";
import { i as inherit, B as BaseElement } from "./base-element.js";
import "vue";
import "./v4.js";
function getLcm(a, b) {
  const num1 = a;
  const num2 = b;
  let c = 0;
  while (b !== 0) {
    c = a % b;
    a = b;
    b = c;
  }
  return num1 * num2 / a;
}
function getRepeat(model2) {
  const { fullScreenInfo, template: template2 } = model2;
  const repeat = [
    {
      leftIndent: 0,
      colGap: fullScreenInfo.colGap,
      rowGap: fullScreenInfo.rowGap,
      transform: template2.transform
    },
    {
      leftIndent: fullScreenInfo.leftIndent,
      colGap: fullScreenInfo.colGap,
      rowGap: fullScreenInfo.rowGap,
      transform: template2.transform
    }
  ];
  return repeat;
}
function renderRepeat(cellCanvas, repeat) {
  const rowCanvases = [];
  let rowsHeight = 0;
  let sumHeight = 0;
  const lcm = repeat.reduce((lcm2, row) => {
    const { leftIndent, colGap, rowGap } = row;
    const transform = row.transform.toJSON();
    const cellWidth = Math.abs(cellCanvas.width * transform.a) + Math.abs(cellCanvas.height * transform.c);
    const cellHeight = Math.abs(cellCanvas.height * transform.d) + Math.abs(cellCanvas.width * transform.b);
    const [dx, dy] = [
      [cellCanvas.width, 0],
      [0, cellCanvas.height],
      [cellCanvas.width, cellCanvas.height]
    ].reduce(([dx2, dy2], [x, y]) => {
      const _x = transform.a * x + transform.c * y;
      const _y = transform.b * x + transform.d * y;
      if (-_x > dx2) {
        dx2 = -_x;
      }
      if (-_y > dy2) {
        dy2 = -_y;
      }
      return [dx2, dy2];
    }, [0, 0]);
    const canvas2 = createCanvas(cellWidth, cellHeight);
    const context2 = canvas2.getContext("2d");
    context2.save();
    context2.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx + dx, transform.ty + dy);
    context2.drawImage(cellCanvas, 0, 0);
    context2.restore();
    const repeatCanvas = createCanvas((Math.max(canvas2.width, cellCanvas.width) + colGap) * 3, Math.max(canvas2.height, cellCanvas.height));
    const dLeft = (cellCanvas.width - canvas2.width) / 2;
    const preOffsetLeft = cellCanvas.width + colGap;
    const repeatContext = repeatCanvas.getContext("2d");
    for (let i = 0; i < 3; i++) {
      const left = i * preOffsetLeft + dLeft;
      repeatContext.drawImage(canvas2, left, 0);
    }
    canvas2.width = cellCanvas.width + colGap;
    context2.clearRect(0, 0, canvas2.width, canvas2.height);
    context2.drawImage(repeatCanvas, preOffsetLeft - leftIndent % canvas2.width, 0, canvas2.width, canvas2.height, 0, 0, canvas2.width, canvas2.height);
    canvas2.rowGap = rowGap;
    canvas2.dTop = (cellCanvas.height - canvas2.height) / 2;
    rowCanvases.push(canvas2);
    sumHeight += cellCanvas.height + rowGap;
    rowsHeight += canvas2.height + rowGap;
    if (lcm2 === 0) {
      return canvas2.width;
    } else {
      return getLcm(lcm2, canvas2.width);
    }
  }, 0);
  const vCanvas = createCanvas(lcm, Math.max(rowsHeight, sumHeight) * 3);
  const vContext = vCanvas.getContext("2d");
  let top = 0;
  for (let i = 0; i < 3; i++) {
    rowCanvases.forEach((rowCanvas) => {
      vContext.save();
      vContext.translate(0, top + rowCanvas.dTop);
      vContext.fillStyle = vContext.createPattern(rowCanvas, "repeat-x");
      vContext.fillRect(0, 0, vCanvas.width, rowCanvas.height);
      vContext.restore();
      top += cellCanvas.height + rowCanvas.rowGap;
    });
  }
  const canvas = createCanvas(lcm, sumHeight);
  const context = canvas.getContext("2d");
  context.drawImage(vCanvas, 0, sumHeight, lcm, sumHeight, 0, 0, lcm, canvas.height);
  return canvas;
}
function getNewProps(keys, props, handlerMap, element) {
  const newProps = {};
  let hasProps = false;
  keys.forEach((key) => {
    const handler = handlerMap[key];
    if (handler) {
      hasProps = true;
      handler(props, newProps, element);
    }
  });
  return hasProps ? newProps : null;
}
const logoHandler = {
  url: function(props, targetProps) {
    targetProps.url = props.url;
    targetProps.imageUrl = "";
  },
  enable: function(props, targetProps) {
    targetProps.hidden = !props.enable;
  }
};
function logoPropsToImageProps(props) {
  if (!props)
    return;
  if (props.url) {
    props.logo = Object.assign({}, props.logo, { url: props.url });
  }
  const { logo } = props;
  if (logo) {
    const keys = Object.keys(logo);
    return getNewProps(keys, __spreadValues({ url: props.url }, logo), logoHandler);
  }
}
const titleHandler = {
  title: function(props, targetProps) {
    targetProps.contents = [{ content: props.title }];
    targetProps.content = props.title;
  },
  titleFontSize: function(props, targetProps) {
    targetProps.fontSize = props.titleFontSize;
  },
  fontFamily: function(props, targetProps) {
    targetProps.fontFamily = props.fontFamily;
  },
  titleFontFamily: function(props, targetProps) {
    targetProps.fontFamily = props.titleFontFamily;
  },
  fontWeight: function(props, targetProps) {
    targetProps.fontWeight = props.fontWeight;
  },
  titleFontWeight: function(props, targetProps) {
    targetProps.fontWeight = props.titleFontWeight;
  },
  fontStyle: function(props, targetProps) {
    targetProps.fontStyle = props.fontStyle;
  },
  titleFontStyle: function(props, targetProps) {
    targetProps.fontStyle = props.titleFontStyle;
  }
};
function titlePropsToTextProps(props) {
  if (!props) {
    return;
  }
  const keys = Object.keys(props);
  return getNewProps(keys, props, titleHandler);
}
const infoTextHandler = {
  content: function(props, targetProps) {
    targetProps.contents = [{ content: props.content }];
    targetProps.content = props.content;
  },
  infoFontSize: function(props, targetProps) {
    targetProps.fontSize = props.infoFontSize;
  },
  fontFamily: function(props, targetProps) {
    targetProps.fontFamily = props.fontFamily;
  },
  infoFontFamily: function(props, targetProps) {
    targetProps.fontFamily = props.infoFontFamily;
  },
  fontWeight: function(props, targetProps) {
    targetProps.fontWeight = props.fontWeight;
  },
  infoFontWeight: function(props, targetProps) {
    targetProps.fontWeight = props.infoFontWeight;
  },
  fontStyle: function(props, targetProps) {
    targetProps.fontStyle = props.fontStyle;
  },
  infoFontStyle: function(props, targetProps) {
    targetProps.fontStyle = props.infoFontStyle;
  },
  type: function(props, targetProps, element) {
    const textElement = element.elements.find((elem) => elem.category === "B1");
    if (!textElement)
      return;
    const { relation } = textElement;
    if (relation && element.type !== "flex") {
      const type = props.type;
      const hasIcon = !(!type || type === "word");
      const { offset, defaultOffset, textAlign, defaultTextAlign } = relation;
      const targetOffset = hasIcon ? offset : defaultOffset;
      const targetTextAlign = hasIcon ? textAlign : defaultTextAlign;
      if (targetOffset) {
        targetProps.left = targetOffset.left;
        targetProps.top = targetOffset.top;
        targetProps.width = targetOffset.width;
        targetProps.height = targetOffset.height;
      }
      if (targetTextAlign) {
        targetProps.textAlign = targetTextAlign;
      }
    }
  }
};
function infoPropsToTextProps(props, originInfoModels) {
  if (!props) {
    return;
  }
  const { info } = props;
  const globalKeys = Object.keys(props);
  const infoProps = originInfoModels.map((originInfoModel, index2) => {
    const _info = info ? info[index2] : null;
    const infoKeys = globalKeys.concat(_info ? Object.keys(_info) : []);
    return getNewProps(infoKeys, Object.assign({}, props, _info), infoTextHandler, originInfoModel);
  });
  return infoProps;
}
const infoImageHandler = {
  type: function(props, targetProps) {
    const iconUrl = getIcon(props.type);
    targetProps.url = iconUrl;
    targetProps.hidden = !iconUrl;
    targetProps.iconType = props.type;
  }
};
function infoPropsToImageProps(props, originInfo) {
  if (!props) {
    return;
  }
  const { info } = props;
  const globalKeys = Object.keys(props);
  const infoProps = originInfo.map((_, index2) => {
    const _info = info ? info[index2] : null;
    const infoKeys = globalKeys.concat(_info ? Object.keys(_info) : []);
    return getNewProps(infoKeys, Object.assign({}, props, _info), infoImageHandler);
  });
  return infoProps;
}
function isTextElement(element) {
  if (!element)
    return false;
  return ["threeText", "styledText", "text"].includes(element.type);
}
function changeTextColor(textColor, effectColor, element, editor) {
  const needChangeTextColor = textColor;
  const needChangeEffectColor = effectColor;
  if (!needChangeTextColor && !needChangeEffectColor)
    return;
  if (element.type === "text") {
    if (needChangeTextColor) {
      editor.changeElement({ color: textColor }, element);
    }
    if (!element.mainColor) {
      const { textEffects } = element;
      textEffects.forEach((effect) => {
        const { filling = {}, stroke = {}, shadow = {} } = effect;
        if (!effect.enable)
          return;
        if (filling.enable && filling.type === 0 && needChangeTextColor) {
          filling.color = textColor;
        }
        if (stroke.enable && needChangeEffectColor) {
          stroke.color = effectColor;
        } else if (shadow.enable && needChangeEffectColor) {
          shadow.color = effectColor;
        }
        editor.changeTextEffect(effect, effect, element, false);
      });
    }
  } else if (element.type === "threeText") {
    const layer = element.layers[0];
    const { frontMaterials, bevelMaterials, sideMaterials } = layer;
    if (frontMaterials.type === 0 && needChangeTextColor) {
      frontMaterials.color = textColor;
    }
    if (bevelMaterials.enable && bevelMaterials.type === 0 && needChangeEffectColor) {
      bevelMaterials.color = effectColor;
    } else if (sideMaterials.enable && sideMaterials.type === 0 && needChangeEffectColor) {
      sideMaterials.color = effectColor;
    }
  } else if (element.type === "styledText" && needChangeTextColor) {
    editor.changeElement({ color: textColor }, element, false);
  }
}
function aggregatedTextColors(element) {
  let textColor = null;
  let effectColor = null;
  if (element.type === "text") {
    const { mainColor, color, textEffects } = element;
    if (!mainColor) {
      textColor = color;
      textEffects.forEach((effect) => {
        const { filling = {}, stroke = {}, shadow = {} } = effect;
        if (!effect.enable)
          return;
        if (filling.enable && filling.type === 0) {
          textColor = filling.color;
        }
        if (stroke.enable) {
          effectColor = stroke.color;
        } else if (shadow.enable) {
          effectColor = shadow.color;
        }
      });
    } else {
      textColor = mainColor;
    }
  } else if (element.type === "threeText") {
    const layer = element.layers[0];
    const { frontMaterials, bevelMaterials, sideMaterials } = layer;
    if (frontMaterials.type === 0) {
      textColor = frontMaterials.color;
    }
    if (bevelMaterials.enable && bevelMaterials.type === 0) {
      effectColor = bevelMaterials.color;
    } else if (sideMaterials.enable && sideMaterials.type === 0) {
      effectColor = sideMaterials.color;
    }
  } else if (element.type === "styledText") {
    textColor = element.color;
  }
  return { textColor, effectColor };
}
function changeImageColor(effectUrl, effectColor, element, editor) {
  const needChangeEffect = effectUrl;
  const needChangeEffectColor = effectColor;
  if (!needChangeEffect && !needChangeEffectColor)
    return;
  if (["mask", "image"].includes(element.type)) {
    if (needChangeEffect) {
      editor.changeElement({
        url: effectUrl
      }, element, false);
    }
    if (needChangeEffectColor) {
      const { imageEffects } = element;
      imageEffects.forEach((effect) => {
        if (!effect.enable)
          return;
        if (effect.filling && effect.filling.enable && effect.filling.type === 0) {
          effect.filling.color = effectColor;
        }
        if (effect.stroke && effect.stroke.enable) {
          effect.stroke.color = effectColor;
        } else if (effect.shadow && effect.shadow.enable) {
          effect.shadow.color = effectColor;
        }
        editor.changeImageEffect(effect, effect, element, false);
      });
    }
  } else if (element.type === "svg" && needChangeEffectColor) {
    const { colors } = element;
    if (colors) {
      colors[0] = effectColor;
      editor.changeElement({
        colors
      }, element, false);
    }
  }
}
function aggregatedImageColors(element) {
  let effectColor = null;
  if (["mask", "image"].includes(element.type)) {
    const { imageEffects } = element;
    imageEffects.forEach((effect) => {
      if (!effect.enable)
        return;
      if (effect.filling && effect.filling.enable && effect.filling.type === 0) {
        effectColor = effect.filling.color;
      }
      if (effect.stroke && effect.stroke.enable) {
        effectColor = effect.stroke.color;
      } else if (effect.shadow && effect.shadow.enable) {
        effectColor = effect.shadow.color;
      }
    });
  } else if (element.type === "svg") {
    const { colors } = element;
    effectColor = colors && colors[0];
  }
  return effectColor;
}
const iconMap = {
  wechat: "https://st0.dancf.com/csc/208/materials/142136/20200314-170057-66fa.svg",
  qq: "https://st0.dancf.com/csc/208/materials/142136/20200314-170002-e655.svg",
  weidian: "https://st0.dancf.com/csc/208/materials/142136/20200314-170131-08d4.svg",
  weibo: "https://st0.dancf.com/csc/208/materials/142136/20200314-170118-87a3.svg",
  taobao: "https://st0.dancf.com/csc/208/materials/142136/20200314-170016-0871.svg",
  phone: "https://st0.dancf.com/csc/208/materials/142136/20200314-165936-4a8a.svg",
  mail: "https://st0.dancf.com/csc/208/materials/142136/20200314-165921-6eb8.svg",
  line: "https://st0.dancf.com/csc/212/materials/40027/20200316-104225-3f7f.svg",
  ins: "https://st0.dancf.com/csc/208/materials/142136/20200314-165851-2a65.svg",
  instagram: "https://st0.dancf.com/csc/208/materials/142136/20200314-165851-2a65.svg",
  facebook: "https://st0.dancf.com/csc/212/materials/40027/20200316-104703-0e66.svg"
};
function getIcon(iconType) {
  return iconMap[iconType];
}
class WatermarkModel extends ElementModel {
  constructor(data) {
    if (lodash.exports.get(data, "fullScreenInfo.leftIndent") === void 0 && lodash.exports.get(data, "fullScreenInfo.repeat")) {
      const repeat = data.fullScreenInfo.repeat;
      const repeatItem = repeat[0];
      lodash.exports.set(data, "fullScreenInfo.leftIndent", lodash.exports.get(repeat, "[1].leftIndent", 0));
      lodash.exports.set(data, "fullScreenInfo.colGap", lodash.exports.get(repeatItem, "colGap", 0));
      lodash.exports.set(data, "fullScreenInfo.rowGap", lodash.exports.get(repeatItem, "rowGap", 0));
      lodash.exports.set(data, "template.transform", lodash.exports.get(repeatItem, "transform", lodash.exports.cloneDeep(editorDefaults.element.transform)));
    }
    super(data);
    this.setTemplate(data.template);
    const isFullScreenWatermark = data.waterType === 1;
    this.rotatable = !isFullScreenWatermark;
    this.dragable = !isFullScreenWatermark;
    this.$renderVersion = 0;
    this.$renderInCanvas = false;
    this.$repeatImageUrl = "";
    this.$repeatImageWidth = 0;
    this.$repeatImageHeight = 0;
    this.cellTransform = this.parseTransform(data.cellTransform);
    if (this.cellWidth === 0 || this.cellHeight === 0) {
      this.cellWidth = lodash.exports.get(this, "template.width", 0);
      this.cellHeight = lodash.exports.get(this, "template.height", 0);
    }
    delete this.fullScreenInfo.repeat;
  }
  setTemplate(template2) {
    this.$infoModels = [];
    this.$logoModel = null;
    this.$backgroundModel = null;
    this.$titleModel = null;
    this.$textModels = [];
    this.$effectModels = [];
    this.$info = [];
    utils.walkTemplet((element) => {
      if (element.category === "LOGO") {
        this.$logoModel = element;
      } else if (element.category === "INFO") {
        this.$infoModels.push(element);
      } else if (element.category === "BG") {
        this.$backgroundModel = element;
      } else if (element.category === "H1") {
        this.$titleModel = element;
      }
      if (element.colorChange) {
        if (["text", "threeText", "styleText"].includes(element.type)) {
          this.$textModels.push(element);
        } else if (["image", "mask", "svg"].includes(element.type) && element.category !== "BG") {
          this.$effectModels.push(element);
        }
      }
      if (element.autoAdaptive !== 0 && ["text", "threeText", "styleText"].includes(element.type)) {
        element.autoAdaptive = 2;
      }
      if (isGroup(element)) {
        element.$inWatermark = true;
      }
    }, true, [template2]);
    template2.transform = this.parseTransform(template2.transform);
    template2.$inWatermark = true;
    this.template = template2;
  }
  set url(value) {
    this.logo.url = value;
  }
  get url() {
    return this.logo.url;
  }
  set rotate(deg) {
    if (this.waterType === 1)
      return;
    this.transform.rotation = transformMath.degToRad(deg);
  }
  get rotate() {
    return transformMath.radToDeg(this.rotation);
  }
  set scaleX(v) {
    if (this.waterType === 1)
      return;
    this.transform.scale.x = v;
  }
  get scaleX() {
    return this.transform.scale.x;
  }
  set scaleY(v) {
    if (this.waterType === 1)
      return;
    this.transform.scale.y = v;
  }
  get scaleY() {
    return this.transform.scale.y;
  }
  set skewX(v) {
    if (this.waterType === 1)
      return;
    this.transform.skew.x = v;
  }
  get skewX() {
    return this.transform.skew.x;
  }
  set skewY(v) {
    if (this.waterType === 1)
      return;
    this.transform.skew.y = v;
  }
  get skewY() {
    return this.transform.skew.y;
  }
  get aggregatedColors() {
    const colors = [
      { key: "textColor", color: null },
      { key: "effectColor", color: null },
      { key: "backgroundColor", color: null }
    ];
    this.$textModels.forEach((textModel) => {
      const { textColor, effectColor } = aggregatedTextColors(textModel);
      if (textColor) {
        colors[0].color = textColor;
      }
      if (effectColor) {
        colors[1].color = effectColor;
      }
    });
    this.$effectModels.forEach((effectModel) => {
      const effectColor = aggregatedImageColors(effectModel);
      if (effectColor) {
        const index2 = effectModel.category === "ICON" ? 0 : 1;
        colors[index2].color = effectColor;
      }
    });
    if (this.$backgroundModel) {
      const backgroundColor = aggregatedImageColors(this.$backgroundModel);
      if (backgroundColor) {
        colors[2].color = backgroundColor;
      }
    }
    return colors.filter((color) => color.color);
  }
  get aggregatedFonts() {
    const { $titleModel, $infoModels } = this;
    const aggregatedFonts = [];
    if ($titleModel) {
      aggregatedFonts.push({
        fontFamily: $titleModel.fontFamily,
        fontStyle: $titleModel.fontStyle,
        fontWeight: $titleModel.fontWeight,
        linkedId: $titleModel.$id
      });
    }
    $infoModels.forEach((infoModel) => {
      let textModel = infoModel;
      if (isGroup(textModel)) {
        textModel = infoModel.elements.find((element) => isTextElement(element.type));
      }
      if (isTextElement(textModel)) {
        aggregatedFonts.push({
          fontFamily: textModel.fontFamily,
          fontStyle: textModel.fontStyle,
          fontWeight: textModel.fontWeight,
          linkedId: textModel.$id
        });
      }
    });
    return aggregatedFonts;
  }
  get title() {
    const { $titleModel } = this;
    if ($titleModel) {
      return $titleModel.content;
    }
    return void 0;
  }
  get info() {
    const { $infoModels } = this;
    if (!$infoModels)
      return [];
    return $infoModels.map((infoModel) => {
      const info = {
        type: null,
        content: null
      };
      if (isTextElement(infoModel)) {
        info.content = infoModel.content;
      } else if (isGroup(infoModel)) {
        utils.walkTemplet((element) => {
          if (isTextElement(element)) {
            info.content = element.content;
          } else if (element.type === "svg") {
            info.type = element.iconType;
          }
        }, true, [infoModel]);
      }
      return info;
    });
  }
  get infoCount() {
    return this.$infoModels.length;
  }
  get fontFamily() {
    const { aggregatedFonts, fontFamilyMixed } = this;
    if (fontFamilyMixed || aggregatedFonts.length === 0) {
      return null;
    }
    return aggregatedFonts[0].fontFamily;
  }
  get fontWeight() {
    const { aggregatedFonts, fontFamilyMixed } = this;
    if (fontFamilyMixed || aggregatedFonts.length === 0) {
      return null;
    }
    return aggregatedFonts[0].fontWeight;
  }
  get fontStyle() {
    const { aggregatedFonts, fontFamilyMixed } = this;
    if (fontFamilyMixed || aggregatedFonts.length === 0) {
      return null;
    }
    return aggregatedFonts[0].fontStyle;
  }
  set fontFamily(value) {
  }
  set fontWeight(value) {
  }
  set fontStyle(value) {
  }
  set title(value) {
  }
  set info(value) {
  }
  get fontFamilyMixed() {
    const { aggregatedFonts } = this;
    const font = aggregatedFonts[0];
    if (font) {
      return aggregatedFonts.some((otherFont, index2) => {
        return index2 > 0 && otherFont.fontFamily !== font.fontFamily && otherFont.fontWeight !== font.fontWeight && otherFont.fontStyle !== font.fontStyle;
      });
    }
    return false;
  }
  get hasLogo() {
    return !!this.$logoModel;
  }
  get hasTitle() {
    return !!this.$titleModel;
  }
  get hasInfo() {
    return this.$infoModels.length > 0;
  }
  async renderCell(editor) {
    this.$cellCanvas = null;
    this.$repeatCanvas = null;
    this.$fullScreenCanvas = null;
    this.$cellCanvas = await editor.elementToCanvas(this.template);
    return this.$cellCanvas;
  }
  async renderRepeat(editor) {
    this.$fullScreenCanvas = null;
    this.$repeatCanvas = null;
    if (!this.$cellCanvas) {
      await this.renderCell(editor);
    }
    const repeat = getRepeat(this);
    const canvas = renderRepeat(this.$cellCanvas, repeat);
    this.$repeatCanvas = canvas;
    return canvas;
  }
  async renderFullScreen(editor) {
    this.$fullScreenCanvas = null;
    if (!this.$repeatCanvas) {
      await this.renderRepeat(editor);
    }
    const repeatCanvas = this.$repeatCanvas;
    const { width, height, fullScreenInfo } = this;
    const { left, top } = fullScreenInfo;
    const canvas = createCanvas(width, height);
    const context = canvas.getContext("2d");
    context.save();
    let offsetLeft = left % repeatCanvas.width;
    if (offsetLeft > 0) {
      offsetLeft = offsetLeft - repeatCanvas.width;
    }
    let offsetTop = top % repeatCanvas.height;
    if (offsetTop > 0) {
      offsetTop = offsetTop - repeatCanvas.height;
    }
    context.translate(offsetLeft, offsetTop);
    context.fillStyle = context.createPattern(repeatCanvas, "repeat");
    context.fillRect(0, 0, width + Math.abs(offsetLeft), height + Math.abs(offsetTop));
    context.restore();
    this.$fullScreenCanvas = canvas;
    return canvas;
  }
  resizeCell(width, height) {
    const { cellWidth, $infoModels } = this;
    this.cellWidth = width;
    this.cellHeight = height;
    const ratio = width / cellWidth;
    $infoModels.forEach((infoModel) => {
      infoModel.elements.forEach((element) => {
        const { relation } = element;
        if (relation) {
          const { offset, defaultOffset } = relation;
          [offset, defaultOffset].filter((offset2) => offset2).forEach((offset2) => {
            ["left", "top", "width", "height"].forEach((key) => {
              offset2[key] *= ratio;
            });
          });
        }
      });
    });
  }
  exportData() {
    const cloneData = __spreadValues({}, this);
    const { fullScreenInfo, template: template2 } = cloneData;
    const repeat = [];
    repeat[0] = {
      colGap: fullScreenInfo.colGap,
      rowGap: fullScreenInfo.rowGap,
      transform: template2.transform,
      leftIndent: 0
    };
    if (fullScreenInfo.leftIndent !== 0) {
      repeat[1] = {
        colGap: fullScreenInfo.colGap,
        rowGap: fullScreenInfo.rowGap,
        transform: template2.transform,
        leftIndent: fullScreenInfo.leftIndent
      };
    }
    fullScreenInfo.repeat = repeat;
    return cloneData;
  }
}
var model = WatermarkModel;
var template$1 = `<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, cssStyle]"
>
    <group-element
        v-if="initDfd"
        :class="{ 'editor-element-watermark__cell--hidden' : model.waterType === 1}"
        :options="options"
        :global="global"
        :model="model.template"
        :editor="editor"
        :isWatermarkChildren="true"
    />
    <img
        class="editor-element-watermark__image"
        ref="img"
        crossorigin
        v-if="model.waterType === 1 && model.imageUrl && !renderInCanvas"
        :src="model.imageUrl"
        :style="watermarkImageStyle"
    />
    <div
        v-else-if="model.waterType === 1"
        class="editor-element-watermark__canvas"
        :style="watermarkStyle"
    />

    <ElementCommon
        :element="model"
        :options="options"
        :global="global"
        :editor="editor"
        :layout="editor.currentLayout"
        :hideBlink="hideBlink"
        :isShowBlink="isShowBlink"
        :bgNinePatch="bgNinePatch"
    />
</div>
`;
var WatermarkElement = inherit(BaseElement, {
  name: "watermark-element",
  template: template$1,
  props: ["global", "model", "options", "editor"],
  data() {
    return {
      initDfd: false,
      loadDfd: null,
      componentLoaded: false,
      backgroundModel: null,
      parentLayout: null
    };
  },
  computed: {
    cssStyle() {
      const { rect } = this;
      const { padding } = rect;
      return {
        height: rect.height + padding[0] + padding[2] + "px",
        width: rect.width + padding[1] + padding[3] + "px"
      };
    },
    watermarkImageStyle() {
      const { zoom } = this.global;
      const { width, height, left, top } = this.model;
      return {
        width: `${width * zoom}px`,
        height: `${height * zoom}px`,
        left: `${left * zoom}px`,
        top: `${top * zoom}px`
      };
    },
    watermarkStyle() {
      const { model: model2, global } = this;
      const { zoom } = global;
      const {
        fullScreenInfo,
        width,
        height,
        $repeatImageUrl,
        $repeatImageWidth,
        $repeatImageHeight
      } = model2;
      const offsetLeft = fullScreenInfo.left * zoom;
      const offsetTop = fullScreenInfo.top * zoom;
      return {
        width: `${width * zoom}px`,
        height: `${height * zoom}px`,
        backgroundImage: `url(${$repeatImageUrl})`,
        backgroundSize: `${$repeatImageWidth * zoom}px ${$repeatImageHeight * zoom}px`,
        backgroundRepeat: "repeat",
        backgroundPosition: `${offsetLeft}px ${offsetTop}px`
      };
    },
    waterType() {
      return this.model.waterType;
    },
    editing() {
      return this.model.$editing;
    },
    renderInCanvas() {
      return this.model.$renderInCanvas;
    }
  },
  watch: {
    "model.template"() {
      if (this.isDesignMode) {
        this.templateInit();
        this.checkLoad();
      }
    },
    "model.$renderVersion"() {
      if (this.isDesignMode) {
        this.$nextTick(() => {
          this.lazyRenderFullScreen(true);
        });
      }
    },
    "model.waterType"() {
      if (this.isDesignMode) {
        this.onWaterTypeChange();
      }
    },
    "model.fullScreenInfo": {
      deep: true,
      handler() {
        if (this.isDesignMode && !this.editing) {
          this.lazyRenderFullScreen(false, true);
        }
      }
    },
    "model.template.transform": {
      deep: true,
      handler() {
        if (this.isDesignMode && !this.editing) {
          this.lazyRenderFullScreen(false, true);
        }
      }
    },
    "parentLayout.width"(width) {
      if (this.isDesignMode && this.waterType === 1) {
        this.model.width = width;
      }
    },
    "parentLayout.height"(height) {
      if (this.isDesignMode && this.waterType === 1) {
        this.model.height = height;
      }
    }
  },
  created() {
    this.lazyRenderFullScreen = throttle((reRenderCell, reRenderRepeat) => {
      if (this.model.waterType === 1) {
        this.renderFullScreen(reRenderCell, reRenderRepeat);
      }
    }, 80, { trailing: true });
    this.lazyExportImage = debounce(() => this.exportImage(), 400, { leading: false });
    this.templateInit();
  },
  mounted() {
    this.model.$getResizeLimit = () => ({
      maxWidth: Infinity,
      minWidth: 20,
      maxHeight: Infinity,
      minHeight: 20
    });
    this.parentLayout = this.editor.getLayoutByElement(this.model);
    this.$watch(() => {
      const { left, top } = this.model.fullScreenInfo;
      return [left, top];
    }, () => {
      if (this.isDesignMode && !this.editing) {
        this.lazyRenderFullScreen();
      }
    });
    this.$watch(() => {
      const { width, height } = this.model;
      return [width, height];
    }, () => {
      if (this.isDesignMode) {
        this.updateSize();
      }
    });
    this.$watch(() => {
      const { left, top } = this.model;
      return [left, top];
    }, () => {
      if (this.isDesignMode) {
        this.updatePosition();
      }
    });
  },
  methods: {
    load() {
      return this.loadDfd.promise;
    },
    initLoadDfd() {
      const loadDfd = {};
      loadDfd.promise = new Promise((resolve, reject) => {
        loadDfd.resolve = resolve;
        loadDfd.reject = reject;
      }).then(async () => {
        const { waterType, imageUrl } = this.model;
        if (waterType === 1 && (!imageUrl || isBase64(imageUrl))) {
          await this.$nextTick();
          return this.renderFullScreen(true);
        }
      });
      this.loadDfd = loadDfd;
      this.initDfd = false;
      this.$nextTick(() => {
        this.initDfd = true;
      });
    },
    templateInit() {
      this.initLoadDfd();
    },
    updateSize() {
      const { model: model2, parentLayout } = this;
      const { waterType, width, height, template: template2 } = model2;
      if (waterType === 0) {
        template2.width = width;
        template2.height = height;
        model2.resizeCell(width, height);
      } else {
        model2.width = parentLayout.width;
        model2.height = parentLayout.height;
        this.lazyRenderFullScreen();
      }
    },
    updatePosition() {
      const { waterType, left, top } = this.model;
      if (waterType === 0) {
        this.model.cellLeft = left;
        this.model.cellTop = top;
      } else {
        this.model.left = 0;
        this.model.top = 0;
      }
    },
    onWaterTypeChange() {
      const { model: model2 } = this;
      const { waterType } = model2;
      if (waterType === 1) {
        this.renderFullScreen(true);
      }
    },
    async renderFullScreen(reRenderCell = false, reRenderRepeat = false) {
      const { model: model2, editor } = this;
      if (!this.isInEditor && !this.isDesignMode)
        return;
      if (reRenderCell) {
        await model2.renderCell(editor);
      }
      if (reRenderRepeat) {
        await model2.renderRepeat(editor);
      }
      this.exportRepeatCanvas();
    },
    async exportRepeatCanvas() {
      if (!this.model.$repeatCanvas) {
        await this.model.renderRepeat(this.editor);
      }
      const { $repeatCanvas } = this.model;
      this.model.$repeatImageUrl = $repeatCanvas.toDataURL("image/png");
      this.model.$repeatImageWidth = $repeatCanvas.width;
      this.model.$repeatImageHeight = $repeatCanvas.height;
      this.model.$renderInCanvas = true;
      this.lazyExportFullCanvas();
    },
    async lazyExportFullCanvas() {
      if (!this._lazyExportFullCanvas) {
        this._lazyExportFullCanvas = debounce(async () => {
          await this.model.renderFullScreen(this.editor);
          const { $fullScreenCanvas } = this.model;
          this.model.imageUrl = $fullScreenCanvas.toDataURL("image/png");
          this.model.imageWidth = $fullScreenCanvas.width;
          this.model.imageHeight = $fullScreenCanvas.height;
        }, 200, { leading: false, trailing: true });
      }
      return this._lazyExportFullCanvas();
    }
  },
  events: {
    "element.loaded"(model2) {
      if (model2 === this.model.template) {
        this.loadDfd.resolve();
      }
    },
    "element.transformStart"(model2, data) {
      if (model2 === this.model && model2.waterType === 0) {
        this.$events.$emit("element.transformStart", model2.template, data);
      }
    },
    "element.transformEnd"(model2, drag, data) {
      if (model2 === this.model && model2.waterType === 0) {
        this.$events.$emit("element.transformEnd", model2.template, drag, data);
        this.$nextTick(() => {
          const { cellWidth, cellHeight, waterType } = this.model;
          if (waterType === 0) {
            this.model.template.width = cellWidth;
            this.model.template.height = cellHeight;
          }
        });
      }
    },
    "element.watermarkUpdated"(element, reRenderCell, reRenderRepeat) {
      if (element === this.model) {
        this.lazyRenderFullScreen(reRenderCell, reRenderRepeat);
      }
    }
  }
});
function autoImportSyncComponent(template2, editor) {
  const supportTypes = editor.supportTypes;
  const types = supportTypes.includes("group") ? [] : ["group"];
  editor.walkTemplet((element) => {
    const type = element.type;
    if (!supportTypes.includes(type) && !types.includes(type)) {
      types.push(type);
    }
  }, true, [template2]);
  return Promise.all(types.map((type) => {
    return editor.createAsyncComponent({ type });
  }));
}
var methods = {
  setWatermarkTemplate(template2, element) {
    element = this.getElement(element);
    if (!element || element.type !== "watermark") {
      return;
    }
    return autoImportSyncComponent(template2, this).then(() => {
      template2 = this.createElement(cloneDeep(template2));
      template2.$parentId = element.$id;
      template2.left = 0;
      template2.top = 0;
      const ratio = element.template.width / template2.width;
      element.cellWidth = element.template.width = template2.width * ratio;
      element.cellHeight = element.template.height = template2.height * ratio;
      if (element.waterType === 0) {
        element.width = template2.width * ratio;
        element.height = template2.height * ratio;
      }
      return this.resizeElements([template2], ratio).then(() => {
        const {
          logo,
          title,
          $logoModel,
          aggregatedColors,
          fontFamily,
          fontWeight,
          fontStyle
        } = element;
        let color;
        if (aggregatedColors) {
          color = {};
          aggregatedColors.forEach((c) => {
            color[c.key] = c.color;
          });
        }
        element.setTemplate(template2);
        if (logo && $logoModel) {
          Object.assign(element.$logoModel, {
            $renderId: $logoModel.$renderId,
            url: $logoModel.url,
            imageTransform: $logoModel.parseTransform($logoModel.imageTransform),
            naturalWidth: $logoModel.naturalWidth,
            naturalHeight: $logoModel.naturalHeight
          });
        }
        this.changeWatermark({
          logo,
          title,
          color,
          fontFamily,
          fontWeight,
          fontStyle
        }, element);
        this.makeSnapshot("change_watermark_template");
      });
    });
  },
  changeWatermark(props, element, makeSnapshot = true) {
    element = this.getElement(element);
    if (!element || element.type !== "watermark") {
      return;
    }
    let needRender = false;
    const logoProps = element.$logoModel && logoPropsToImageProps(props);
    const titleProps = element.$titleModel && titlePropsToTextProps(props);
    const infoTextProps = element.$infoModels.length > 0 && infoPropsToTextProps(props, element.$infoModels);
    const infoImageProps = element.$infoModels.length > 0 && infoPropsToImageProps(props, element.$infoModels);
    if (logoProps) {
      this.changeElement(logoProps, [element.$logoModel], false);
      needRender = true;
    }
    if (titleProps) {
      this.changeElement(titleProps, [element.$titleModel], false);
      needRender = true;
    }
    if (infoTextProps) {
      infoTextProps.forEach((infoProp, index2) => {
        if (infoProp) {
          let textModel = element.$infoModels[index2];
          if (isGroup(textModel)) {
            textModel = textModel.elements.find((model2) => isTextElement(model2));
          }
          if (isTextElement(textModel)) {
            this.changeElement(infoProp, [textModel], false);
          }
          needRender = true;
        }
      });
    }
    if (infoImageProps) {
      infoImageProps.forEach((infoProp, index2) => {
        if (infoProp) {
          let imageModel = element.$infoModels[index2];
          if (isGroup(imageModel)) {
            imageModel = imageModel.elements.find((model2) => model2.type === "image" || model2.type === "mask" || model2.type === "svg");
          }
          if (imageModel) {
            this.changeElement(infoProp, [imageModel], false);
          }
          needRender = true;
        }
      });
    }
    if (props.color) {
      const keys = Object.keys(props.color);
      if (keys.some((key) => ["textColor", "effectColor"].includes(key))) {
        const { textColor, effectColor } = props.color;
        element.$textModels.forEach((textModel) => {
          if (textModel.colorChange) {
            changeTextColor(textColor, effectColor, textModel, this);
          }
        });
      }
      if (keys.some((key) => ["effect", "effectColor", "textColor"].includes(key))) {
        const { effect, effectColor, textColor } = props.color;
        element.$effectModels.forEach((effectModel) => {
          if (effectModel.colorChange) {
            if (effectModel.category === "ICON") {
              changeImageColor(null, textColor, effectModel, this);
            } else {
              changeImageColor(effect, effectColor, effectModel, this);
            }
          }
        });
      }
      if (element.$backgroundModel && keys.some((key) => ["backgroundImage", "backgroundColor"].includes(key))) {
        const { backgroundImage, backgroundColor } = props.color;
        changeImageColor(backgroundImage, backgroundColor, element.$backgroundModel, this);
      }
      needRender = true;
    }
    if (needRender) {
      element.$renderVersion += 1;
    }
    makeSnapshot && this.makeSnapshot("change_element");
  },
  changeWatermarkLogo(url, { width, height }, element) {
    element = this.getElement(element);
    if (!element || element.type !== "watermark") {
      return;
    }
    this.replaceImage(url, { forwardEdit: element.waterType !== 1, width, height }, element.$logoModel, false);
    this.changeElement({
      logo: { url }
    }, element, false);
    this.makeSnapshot("change_watermark_logo");
  },
  flipWatermarkLogo(dir, element) {
    element = this.getElement(element);
    if (!element || element.type !== "watermark") {
      return;
    }
    this.flipElement(dir, element.$logoModel);
    this.$events.$emit("element.watermarkUpdated", element, true);
  },
  createWatermarkByGroup(groupElement, options) {
    if (!isGroup(groupElement)) {
      return {};
    }
    const element = cloneDeep(groupElement);
    delete element.uuid;
    delete element.$id;
    const watermark = Object.assign({
      type: "watermark"
    }, cloneDeep(editorDefaults.watermarkElement), options);
    watermark.cellWidth = element.width;
    watermark.cellHeight = element.height;
    watermark.cellTop = element.top;
    watermark.cellLeft = element.left;
    if (watermark.waterType === 0) {
      watermark.width = watermark.cellWidth = element.width;
      watermark.height = watermark.cellHeight = element.height;
      watermark.left = element.left;
      watermark.top = element.top;
    }
    element.left = 0;
    element.top = 0;
    watermark.template = element;
    return this.createElement(watermark);
  },
  showWatermarkEditor(element) {
    element = this.getElement(element);
    if (element.type !== "watermark" || element.waterType !== 1) {
      return;
    }
    this.currentEditWatermark = element;
  },
  hideWatermarkEditor() {
    this.currentEditWatermark = null;
  },
  setWatermarkType(waterType, element, layout) {
    element = this.getElement(element);
    if (!element || element.type !== "watermark") {
      return;
    }
    if (waterType === 1) {
      if (!layout) {
        layout = this.getLayoutByElement(element) || this.currentLayout;
      }
      const { width, height } = layout;
      this.changeElement({
        width,
        height,
        top: 0,
        left: 0,
        dragable: false,
        rotatable: false,
        transform: element.parseTransform(new Transform()),
        resize: 0,
        waterType
      }, element);
    } else {
      const {
        template: { width, height },
        cellLeft,
        cellTop,
        cellTransform
      } = element;
      this.changeElement({
        cellWidth: width,
        cellHeight: height,
        left: cellLeft,
        top: cellTop,
        width,
        height,
        rotatable: true,
        dragable: true,
        transform: cellTransform,
        resize: 1,
        imageUrl: "",
        imageWidth: 0,
        imageHeight: 0,
        waterType
      });
    }
  }
};
var template = '<div class="editor-watermark-editor" :style="boxStyle">\n    <div class="editor-watermark-editor-outer" :style="outerWatermarkStyle" />\n    <div class="editor-watermark-editor-inner" :style="innerWatermarkStyle" />\n</div>\n';
class WatermarkEditorModel extends ElementModel {
  constructor(data) {
    super(data);
    const transform = lodash.exports.get(data, "template.transform", lodash.exports.cloneDeep(editorDefaults.element.transform));
    lodash.exports.set(this, "template.transform", this.parseTransform(transform));
  }
  get scale() {
    const transform = this.template.transform;
    return Math.min(transform.scale.x, transform.scale.y);
  }
  set scale(value) {
    const transform = this.template.transform;
    transform.scale.x = value.x;
    transform.scale.y = value.y;
  }
}
var WatermarkEditor = inherit(BaseElement.createStaticBaseElement(), {
  template,
  name: "watermark-editor",
  props: ["model", "currentElement", "currentLayout", "global", "options"],
  filters: {
    angle(angle) {
      angle = Math.round(angle) % 360;
      angle = angle >= 180 ? angle - 360 : angle;
      return angle + "\xB0";
    }
  },
  data() {
    return {
      innerProps: {
        editModel: null
      },
      shellRect: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      repeatCanvas: null,
      cellCanvas: null,
      watermarkImage: "",
      watermarkWidth: 0,
      watermarkHeight: 0,
      action: {
        scale: false,
        drag: false,
        rotate: false
      }
    };
  },
  computed: {
    editor() {
      return this.$parent;
    },
    zoom() {
      return this.global.zoom;
    },
    editModel() {
      return this.getEditModel();
    },
    layout() {
      return this.editor.currentLayout;
    },
    boxStyle() {
      const { left, top, right, bottom } = this.shellRect;
      return {
        right: `${-right}px`,
        bottom: `${-bottom}px`,
        left: `${-left}px`,
        top: `${-top}px`
      };
    },
    outerWatermarkStyle() {
      const { zoom } = this.global;
      const { shellRect, editModel, watermarkImage, watermarkWidth, watermarkHeight } = this;
      const { fullScreenInfo, opacity } = editModel;
      const offsetLeft = fullScreenInfo.left * zoom;
      const offsetTop = fullScreenInfo.top * zoom;
      return {
        backgroundImage: `url(${watermarkImage})`,
        opacity: 0.19 * opacity,
        backgroundSize: `${watermarkWidth * zoom}px ${watermarkHeight * zoom}px`,
        backgroundRepeat: "repeat",
        backgroundPosition: `${offsetLeft + shellRect.left}px ${offsetTop + shellRect.top}px`
      };
    },
    innerWatermarkStyle() {
      const { zoom } = this.global;
      const { editModel, watermarkImage, watermarkWidth, watermarkHeight, shellRect } = this;
      const { fullScreenInfo, opacity } = editModel;
      const offsetLeft = fullScreenInfo.left * zoom;
      const offsetTop = fullScreenInfo.top * zoom;
      return {
        backgroundImage: `url(${watermarkImage})`,
        opacity,
        backgroundSize: `${watermarkWidth * zoom}px ${watermarkHeight * zoom}px`,
        backgroundRepeat: "repeat",
        backgroundPosition: `${offsetLeft}px ${offsetTop}px`,
        left: `${shellRect.left}px`,
        top: `${shellRect.top}px`,
        width: `${editModel.width * zoom}px`,
        height: `${editModel.height * zoom}px`
      };
    },
    transform() {
      return this.editModel.template.transform;
    }
  },
  watch: {
    currentElement(element) {
      if (element !== this.editModel) {
        this.$events.$emit("element.editApply", this.editModel);
        this.destroyEditModel();
      }
    }
  },
  events: {
    "element.watermarTransformEnd"() {
      this.lazyRenderWatermark();
    },
    "element.dragStart"(element) {
      if (element === this.editModel) {
        this.dragInit();
        this.action.drag = true;
      }
    },
    "element.customDragMove"({ element, dx, dy }) {
      if (element === this.editModel) {
        this.draging(dx, dy);
      }
    },
    "element.dragEnd"(element) {
      if (element === this.editModel) {
        this.dragEnd();
        this.action.drag = false;
      }
    },
    "element.editApply"(model2) {
      if (model2 === this.editModel) {
        this.save();
      }
    },
    "element.editCancel"(model2) {
      if (model2 === this.editModel) {
        this.cancel();
      }
    },
    "element.editReset"(model2) {
      if (model2 === this.editModel) {
        model2.$reset();
      }
    },
    "watermarkEditor.scale"(scale) {
      const {
        template: { transform }
      } = this.editModel;
      transform.scale.x = scale;
      transform.scale.y = scale;
      this.lazyRenderWatermark();
      this.action.scale = true;
    },
    "watermarkEditor.rotate"(rotate) {
      const {
        template: { transform }
      } = this.editModel;
      transform.rotation = utils.degToRad(rotate);
      this.lazyRenderWatermark();
    },
    "watermarkEditor.scaleEnd"() {
      this.action.scale = false;
    },
    "watermarkEditor.changeGap"(value) {
      const { fullScreenInfo } = this.editModel;
      fullScreenInfo.colGap = value;
      fullScreenInfo.rowGap = value;
      this.lazyRenderWatermark();
    },
    "watermarkEditor.changeIndent"(value) {
      const { fullScreenInfo } = this.editModel;
      fullScreenInfo.leftIndent = value;
      this.lazyRenderWatermark();
    },
    "base.click"(e) {
      e.preventDefault();
      if (!this.action.scale && !this.action.drag) {
        const point = this.editor.pointFromEvent(e);
        const rect = utils.getElementRect(this.editModel, 1);
        if (!utils.pointInRect(point.x, point.y, rect)) {
          this.save();
        }
      }
    }
  },
  created() {
    this.lastCurrentElement = this.currentElement;
    this.lazyRenderWatermark = throttle(() => {
      this.renderWatermark();
    }, 80, { leading: false });
  },
  async mounted() {
    this.editor.focusElement(this.editModel);
    this.shellDom = this.editor.container.find(".editor-shell-wrap")[0];
    this.$watch(() => {
      const { containerRect, shellRect } = this.editor;
      return [
        containerRect.width,
        containerRect.height,
        shellRect.width,
        shellRect.height
      ];
    }, () => {
      const { offsetTop, offsetLeft, clientWidth, clientHeight } = this.shellDom;
      const offsetRight = offsetLeft + clientWidth;
      const offsetBottom = offsetTop + clientHeight;
      const containerRect = this.editor.containerRect;
      this.shellRect = {
        left: offsetLeft + containerRect.padding[3],
        top: offsetTop + containerRect.padding[0],
        right: containerRect.scrollWidth - offsetRight + containerRect.padding[1],
        bottom: containerRect.scrollHeight - offsetBottom + containerRect.padding[2]
      };
    }, {
      immediate: true
    });
    this.editModel.active = true;
    if (!this.model.$cellCanvas) {
      await this.model.renderCell(this.editor);
    }
    if (!this.model.$repeatCanvas) {
      await this.model.renderRepeat(this.editor);
    }
    this.cellCanvas = this.model.$cellCanvas;
    this.repeatCanvas = this.model.$repeatCanvas;
    this.exportImage();
  },
  methods: {
    getEditModel() {
      const { width, height, fullScreenInfo, template: template2, opacity, lock } = this.model;
      const newTemplate = cloneDeep(template2);
      newTemplate.transform = this.model.parseTransform(template2.transform);
      const model2 = new WatermarkEditorModel({
        type: "$watermarker",
        left: 0,
        top: 0,
        width,
        height,
        opacity,
        waterType: 1,
        fullScreenInfo: cloneDeep(fullScreenInfo),
        template: newTemplate,
        $customDragMove: true,
        rotatable: false,
        resize: 0,
        lock
      });
      this.model.$editing = true;
      model2.$canReset = () => {
        const props = ["scale"];
        const cache = this.getEditModel();
        return !isEqual_1(pick(model2, props), pick(cache, props));
      };
      const transform = model2.template.transform;
      const scaleCache = {
        x: transform.scale.x,
        y: transform.scale.y
      };
      model2.$reset = () => {
        model2.scale = scaleCache;
        this.lazyRenderWatermark();
      };
      return model2;
    },
    destroyEditModel() {
      const model2 = this.model;
      if (!model2) {
        return;
      }
      if (this.lastCurrentElement && this.currentElement === this.editModel) {
        this.editor.focusElement(this.lastCurrentElement);
      }
      model2.$editing = false;
      this.$emit("update:model", null);
    },
    renderWatermark() {
      const { cellCanvas, editModel } = this;
      const repeat = getRepeat(editModel);
      this.repeatCanvas = renderRepeat(cellCanvas, repeat);
      this.exportImage();
    },
    exportImage() {
      const { repeatCanvas } = this;
      this.watermarkImage = repeatCanvas.toDataURL("image/png");
      this.watermarkWidth = repeatCanvas.width;
      this.watermarkHeight = repeatCanvas.height;
    },
    dragInit() {
      const { left, top } = this.editModel.fullScreenInfo;
      this.$dragCache = { left, top };
    },
    draging(dx, dy) {
      const { fullScreenInfo } = this.editModel;
      const { left, top } = this.$dragCache;
      fullScreenInfo.left = left + dx;
      fullScreenInfo.top = top + dy;
    },
    dragEnd() {
      delete this.$editModel;
    },
    save() {
      const { model: model2, editModel } = this;
      this.destroyEditModel();
      model2.$editing = true;
      this.editor.changeElement({
        opacity: editModel.opacity,
        fullScreenInfo: editModel.fullScreenInfo,
        template: {
          transform: editModel.template.transform
        },
        lock: editModel.lock
      }, model2);
      model2.$repeatCanvas = this.repeatCanvas;
      this.editor.$events.$emit("element.watermarkUpdated", model2);
      model2.$editing = false;
    },
    cancel() {
      this.destroyEditModel();
    }
  }
});
var index = {
  model,
  methods,
  layoutComponent: WatermarkElement,
  editComponent: WatermarkEditor
};
export { index as default };
