import { E as ElementModel, h as hexaToRgba } from "./background.js";
import { ag as fitArrowTrunk, P as utils } from "./watermark.js";
import { i as inherit, P as Promise$1, B as BaseElement } from "./base-element.js";
import "./index.js";
import "vue";
import "./v4.js";
class arrowModel extends ElementModel {
  constructor(data) {
    super(data);
    this.color = hexaToRgba(this.color);
    if (this.$originalScale === null) {
      const minScale = Math.min(1, this.width / this.minWidth);
      const scale = this.height / minScale / Math.max(this.head.height + this.head.top, this.tail.height + this.tail.top, this.trunk.height + this.trunk.top);
      this.$originalScale = scale.toFixed(2) - 0;
    }
    fitArrowTrunk(this);
    delete this.originalScale;
  }
  get $headLeft() {
    const { tail, head } = this;
    const $originalScale = this.$originalScale || 1;
    const minWidth = this.minWidth;
    const modelWidth = this.width / $originalScale;
    const trunkWidth = Math.max(minWidth, modelWidth) - (tail.left + tail.width + head.width);
    return this.trunk.left + trunkWidth;
  }
  get $trunkWidth() {
    const { tail, head, trunk } = this;
    const $originalScale = this.$originalScale || 1;
    const minWidth = this.minWidth;
    const modelWidth = this.width / $originalScale;
    const trunkWidth = Math.max(minWidth, modelWidth) - (tail.left + tail.width + head.width);
    const trunkInHeadWidth = trunk.left + trunk.width - head.left;
    return Math.max(0, trunkWidth + trunkInHeadWidth);
  }
}
var model = arrowModel;
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>

    <ElementCommon
        :element="model"
        :options="options"
        :global="global"
        :editor="editor"
        :layout="editor.currentLayout"
        :hideBlink="hideBlink"
        :isShowBlink="isShowBlink"
        :bgNinePatch="bgNinePatch"
    />
</div>
`;
var arrowElement = inherit(BaseElement, {
  name: "arrow-element",
  template,
  data() {
    return {
      scale: 1,
      headSvgContent: "",
      tailSvgContent: ""
    };
  },
  computed: {
    mainInnerStyle() {
      const model2 = this.model;
      const $originalScale = model2.$originalScale || 1;
      return {
        transform: `scale(${this.global.zoom * model2.$minScale * $originalScale})`,
        transformOrigin: "0 0"
      };
    },
    headStyle() {
      const model2 = this.model;
      return {
        fill: model2.color,
        left: model2.$headLeft + "px",
        top: model2.head.top + "px"
      };
    },
    tailStyle() {
      const model2 = this.model;
      return {
        fill: model2.color,
        left: model2.tail.left + "px",
        top: model2.tail.top + "px"
      };
    },
    trunkStyle() {
      const model2 = this.model;
      return {
        left: model2.trunk.left + "px",
        top: model2.trunk.top + "px"
      };
    },
    trunkPath() {
      const model2 = this.model;
      const higherLeft = model2.trunk.leftHeight > model2.trunk.rightHeight;
      const startY = higherLeft ? 0 : model2.tail.top - model2.trunk.top - (model2.trunk.leftHeight - model2.tail.height) / 2;
      const endY = higherLeft ? model2.head.top - model2.trunk.top - (model2.trunk.rightHeight - model2.head.height) / 2 : 0;
      return `M0 ${startY} L${model2.$trunkWidth} ${endY} V${endY + model2.trunk.rightHeight} L0 ${startY + model2.trunk.leftHeight}`;
    }
  },
  methods: {
    load() {
      const { model: model2 } = this;
      const { head, tail } = model2;
      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 model2 = this.model;
      const svgReg = /(^\s*<svg[^<]*>)|(<\/svg[^<]*>\s*$)/g;
      this.headSvgContent = (model2.head.$svg || model2.head.svg).replace(svgReg, "");
      this.tailSvgContent = (model2.tail.$svg || model2.tail.svg).replace(svgReg, "");
    }
  },
  watch: {
    "model.head.svg"() {
      this.checkLoad();
    },
    "model.tail.svg"() {
      this.checkLoad();
    }
  },
  mounted() {
  }
});
var index = {
  model,
  methods,
  layoutComponent: arrowElement
};
export { index as default };
