import { i as inherit, d as isBase64, B as BaseElement, f as logoPropsToImageProps, t as titlePropsToTextProps, h as infoPropsToTextProps, j as infoPropsToImageProps, k as isGroup, m as isTextElement, n as changeTextColor, o as changeImageColor, e as editorDefaults, p as Transform, q as ElementModel, u as utils, r as getRepeat, v as renderRepeat, W as WatermarkModel } from "./install-editor.js";
import { aB as throttle, an as debounce, a9 as cloneDeep, l as lodash, aa as pick } from "./index.js";
import { i as isEqual_1 } from "./watermark.js";
import "vue";
import "./base-element.js";
import "./defaults.js";
import "./index15.js";
import "./asyncToGenerator.js";
import "./pixel-helper.js";
import "./index16.js";
import "./uniq.js";
import "./video.js";
import "./get-lines.js";
import "./gif-apng.worker.js";
import "./vue-slider-component.umd.min.js";
import "./v4.js";
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">
        <template
            v-if="model.template.type === 'group'"
            v-slot:children="{ subElement, hideBlink, bgNinePatch }">
            <i class="border-before"></i>

            <watermark
                v-if="subElement.watermarkEnable"
                :global="global"
                :options="options"
                :model="subElement" />

            <background
                v-if="subElement.backgroundColor || (subElement.backgroundEffect && subElement.backgroundEffect.enable && subElement.backgroundEffect.type)"
                :element="subElement"
                :mode="options.mode"
                :global="global"
                :options="options"
                :layout="editor.currentLayout" />

            <ninePatch-element
                v-if="subElement.backgroundEffect && subElement.backgroundEffect.enable && subElement.backgroundEffect.type === 'ninePatch' && editor.supportTypesMap.ninePatch"
                class="is-background"
                :editor="editor"
                :model="bgNinePatch"
                :global="global"
                :options="options" />

            <!-- \u5143\u7D20\u8FB9\u6846 -->
            <border
                v-if="subElement.border && subElement.border.enable"
                :global="global"
                :options="options"
                :mode="options.mode"
                :element="subElement"
                :layout="editor.currentLayout" />
        </template>
    </group-element>
    <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" />

    <slot :hideBlink="hideBlink" :isShowBlink="isShowBlink" :bgNinePatch="bgNinePatch"></slot>
</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, global } = this;
      const { zoom } = global;
      const { fullScreenInfo, width, height, $repeatImageUrl, $repeatImageWidth, $repeatImageHeight } = model;
      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, parentLayout } = this;
      const { waterType, width, height, template: template2 } = model;
      if (waterType === 0) {
        template2.width = width;
        template2.height = height;
        model.resizeCell(width, height);
      } else {
        model.width = parentLayout.width;
        model.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 } = this;
      const { waterType } = model;
      if (waterType === 1) {
        this.renderFullScreen(true);
      }
    },
    async renderFullScreen(reRenderCell = false, reRenderRepeat = false) {
      const { model, editor } = this;
      if (!this.isInEditor && !this.isDesignMode)
        return;
      if (reRenderCell) {
        await model.renderCell(editor);
      }
      if (reRenderRepeat) {
        await model.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"(model) {
      if (model === this.model.template) {
        this.loadDfd.resolve();
      }
    },
    "element.transformStart"(model, data) {
      if (model === this.model && model.waterType === 0) {
        this.$events.$emit("element.transformStart", model.template, data);
      }
    },
    "element.transformEnd"(model, drag, data) {
      if (model === this.model && model.waterType === 0) {
        this.$events.$emit("element.transformEnd", model.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(() => {
        let { 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((model) => isTextElement(model));
          }
          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((model) => model.type === "image" || model.type === "mask" || model.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\n    class="editor-watermark-editor"\n    :style="boxStyle">\n    <div\n        class="editor-watermark-editor-outer"\n        :style="outerWatermarkStyle" />\n    <div\n        class="editor-watermark-editor-inner"\n        :style="innerWatermarkStyle" />\n</div>\n\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"(model) {
      if (model === this.editModel) {
        this.save();
      }
    },
    "element.editCancel"(model) {
      if (model === this.editModel) {
        this.cancel();
      }
    },
    "element.editReset"(model) {
      if (model === this.editModel) {
        model.$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 model = 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;
      model.$canReset = () => {
        const props = [
          "scale"
        ];
        const cache = this.getEditModel();
        return !isEqual_1(pick(model, props), pick(cache, props));
      };
      const transform = model.template.transform;
      const scaleCache = {
        x: transform.scale.x,
        y: transform.scale.y
      };
      model.$reset = () => {
        model.scale = scaleCache;
        this.lazyRenderWatermark();
      };
      return model;
    },
    destroyEditModel() {
      const model = this.model;
      if (!model) {
        return;
      }
      if (this.lastCurrentElement && this.currentElement === this.editModel) {
        this.editor.focusElement(this.lastCurrentElement);
      }
      model.$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, editModel } = this;
      this.destroyEditModel();
      model.$editing = true;
      this.editor.changeElement({
        opacity: editModel.opacity,
        fullScreenInfo: editModel.fullScreenInfo,
        template: {
          transform: editModel.template.transform
        },
        lock: editModel.lock
      }, model);
      model.$repeatCanvas = this.repeatCanvas;
      this.editor.$events.$emit("element.watermarkUpdated", model);
      model.$editing = false;
    },
    cancel() {
      this.destroyEditModel();
    }
  }
});
var index = {
  model: WatermarkModel,
  methods,
  layoutComponent: WatermarkElement,
  editComponent: WatermarkEditor
};
export { index as default };
