import { i as inherit, u as utils, B as BaseElement, H as arrowModel } from "./install-editor.js";
import { P as Promise$1 } from "./base-element.js";
import "vue";
import "./index.js";
import "./watermark.js";
import "./v4.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";
var methods = {};
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"
>
    <div class="element-main">
        <div
            class="element-main-inner"
            :style="mainInnerStyle"
            v-if="model.$loaded">
            <!-- \u7BAD\u8EAB -->
            <svg
                ref="trunk"
                xmlns="http://www.w3.org/2000/svg"
                :style="trunkStyle"
                :width="model.$trunkWidth"
                :height="model.trunk.height"
                :viewBox="'0 0 ' + model.$trunkWidth + ' ' + model.trunk.height">
                <path :fill="model.color" :d="trunkPath"/>
            </svg>
            <!-- \u7BAD\u5C3E -->
            <svg
                ref="tail"
                xmlns="http://www.w3.org/2000/svg"
                :width="model.tail.width"
                :height="model.tail.height"
                :style="tailStyle"
                :viewBox="'0 0 ' + model.tail.width + ' ' + model.tail.height"
                v-html="tailSvgContent"
                v-if="model.tail.$svg || model.tail.svg"></svg>
            <!-- \u7BAD\u5934 -->
            <svg
                ref="head"
                xmlns="http://www.w3.org/2000/svg"
                :width="model.head.width"
                :height="model.head.height"
                :style="headStyle"
                :viewBox="'0 0 ' + model.head.width + ' ' + model.head.height"
                v-html="headSvgContent"
                v-if="model.head.$svg || model.head.svg"></svg>
        </div>
    </div>

    <slot :hideBlink="hideBlink" :isShowBlink="isShowBlink" :bgNinePatch="bgNinePatch"></slot>
</div>
`;
var arrowElement = inherit(BaseElement, {
  name: "arrow-element",
  template,
  data() {
    return {
      scale: 1,
      headSvgContent: "",
      tailSvgContent: ""
    };
  },
  computed: {
    mainInnerStyle() {
      const model = this.model;
      const $originalScale = model.$originalScale || 1;
      return {
        transform: `scale(${this.global.zoom * model.$minScale * $originalScale})`,
        transformOrigin: "0 0"
      };
    },
    headStyle() {
      const model = this.model;
      return {
        fill: model.color,
        left: model.$headLeft + "px",
        top: model.head.top + "px"
      };
    },
    tailStyle() {
      const model = this.model;
      return {
        fill: model.color,
        left: model.tail.left + "px",
        top: model.tail.top + "px"
      };
    },
    trunkStyle() {
      const model = this.model;
      return {
        left: model.trunk.left + "px",
        top: model.trunk.top + "px"
      };
    },
    trunkPath() {
      const model = this.model;
      const higherLeft = model.trunk.leftHeight > model.trunk.rightHeight;
      const startY = higherLeft ? 0 : model.tail.top - model.trunk.top - (model.trunk.leftHeight - model.tail.height) / 2;
      const endY = higherLeft ? model.head.top - model.trunk.top - (model.trunk.rightHeight - model.head.height) / 2 : 0;
      return `M0 ${startY} L${model.$trunkWidth} ${endY} V${endY + model.trunk.rightHeight} L0 ${startY + model.trunk.leftHeight}`;
    }
  },
  methods: {
    load() {
      const { model } = this;
      const { head, tail } = model;
      const promiseArr = [];
      if (!head.svg.includes("<svg")) {
        promiseArr.push(utils.loadXMLStr(head.svg).then((xml) => {
          head.$svg = xml;
        }));
      } else {
        head.$svg = "";
      }
      if (!tail.svg.includes("<svg")) {
        promiseArr.push(utils.loadXMLStr(tail.svg).then((xml) => {
          tail.$svg = xml;
        }));
      } else {
        tail.$svg = "";
      }
      return Promise$1.all(promiseArr).then(() => {
        this.parse();
      });
    },
    parse() {
      const model = this.model;
      const svgReg = /(^\s*<svg[^<]*>)|(<\/svg[^<]*>\s*$)/g;
      this.headSvgContent = (model.head.$svg || model.head.svg).replace(svgReg, "");
      this.tailSvgContent = (model.tail.$svg || model.tail.svg).replace(svgReg, "");
    }
  },
  watch: {
    "model.head.svg"(v) {
      this.checkLoad();
    },
    "model.tail.svg"(v) {
      this.checkLoad();
    }
  },
  mounted() {
  }
});
var index = {
  model: arrowModel,
  methods,
  layoutComponent: arrowElement
};
export { index as default };
