yk-element-components-v2/hotArea/index.mjs

import C from "vue";
const i = {
  MIN_LIMIT: 20,
  DECIMAL_PLACES: 4
};
i.getMultiple = (e = i.DECIMAL_PLACES) => 10 ** e;
i.decimalPoint = (e = 0) => Math.round(e * i.getMultiple()) / i.getMultiple() || 0;
i.getOffset = (e = {}) => ({
  width: e.clientWidth || 0,
  height: e.clientHeight || 0
});
i.getPageX = (e) => "pageX" in e ? e.pageX : e.touches[0].pageX;
i.getPageY = (e) => "pageY" in e ? e.pageY : e.touches[0].pageY;
i.getDistanceX = (e, t) => i.getPageX(e) - (t.getBoundingClientRect().left + window.pageXOffset);
i.getDistanceY = (e, t) => i.getPageY(e) - (t.getBoundingClientRect().top + window.pageYOffset);
i.dealEdgeValue = (e, t, n) => (t.hasOwnProperty("left") && t.left < 0 && (t.left = 0, t.width = e.width + e.left), t.hasOwnProperty("top") && t.top < 0 && (t.top = 0, t.height = e.height + e.top), !t.hasOwnProperty("left") && t.hasOwnProperty("width") && e.left + t.width > n.width && (t.width = n.width - e.left), !t.hasOwnProperty("top") && t.hasOwnProperty("height") && e.top + t.height > n.height && (t.height = n.height - e.top), Object.assign(e, t));
i.dealTL = (e, t, n, o = i.MIN_LIMIT) => {
  const a = {}, s = e.width - t, h = e.height - n;
  return s >= Math.min(o, e.width) && Object.assign(a, {
    width: s,
    left: e.left + t
  }), h >= Math.min(o, e.height) && Object.assign(a, {
    height: h,
    top: e.top + n
  }), a;
};
i.dealTC = (e, t, n, o = i.MIN_LIMIT) => {
  let a = {};
  const s = e.height - n;
  return s >= Math.min(o, e.height) && (a = {
    height: s,
    top: e.top + n
  }), a;
};
i.dealTR = (e, t, n, o = i.MIN_LIMIT) => {
  const a = {}, s = e.width + t, h = e.height - n;
  return s >= Math.min(o, e.width) && Object.assign(a, {
    width: s
  }), h >= Math.min(o, e.height) && Object.assign(a, {
    height: h,
    top: e.top + n
  }), a;
};
i.dealCL = (e, t, n, o = i.MIN_LIMIT) => {
  const a = {}, s = e.width - t;
  return s >= Math.min(o, e.width) && Object.assign(a, {
    width: s,
    left: e.left + t
  }), a;
};
i.dealCR = (e, t, n, o = i.MIN_LIMIT) => {
  const a = {}, s = e.width + t;
  return s >= Math.min(o, e.width) && Object.assign(a, {
    width: s
  }), a;
};
i.dealBL = (e, t, n, o = i.MIN_LIMIT) => {
  const a = {}, s = e.width - t, h = e.height + n;
  return s >= Math.min(o, e.width) && Object.assign(a, {
    width: s,
    left: e.left + t
  }), h >= Math.min(o, e.height) && Object.assign(a, {
    height: h
  }), a;
};
i.dealBC = (e, t, n, o = i.MIN_LIMIT) => {
  const a = {}, s = e.height + n;
  return s >= Math.min(o, e.height) && Object.assign(a, {
    height: s
  }), a;
};
i.dealBR = (e, t, n, o = i.MIN_LIMIT) => {
  const a = {}, s = e.width + t, h = e.height + n;
  return s >= Math.min(o, e.width) && Object.assign(a, {
    width: s
  }), h >= Math.min(o, e.height) && Object.assign(a, {
    height: h
  }), a;
};
const b = {
  bind(e, t, n) {
    e.addEventListener("mousedown", o);
    function o(a) {
      const s = a.target.dataset.pointer;
      if (!s)
        return;
      a.stopPropagation();
      const h = e.parentNode, u = n.context.setting, l = i.getOffset(h.parentNode);
      let r = {
        width: i.getOffset(h).width || 0,
        height: i.getOffset(h).height || 0,
        top: u.topPer * l.height || 0,
        left: u.leftPer * l.width || 0
      }, f = i.getPageX(a), m = i.getPageY(a), g;
      n.context.handlehideZone(!0), window.addEventListener("mousemove", c), window.addEventListener("mouseup", d);
      function c(p) {
        p.preventDefault(), g = !0;
        const w = i.getPageX(p) - f, P = i.getPageY(p) - m;
        f = i.getPageX(p), m = i.getPageY(p);
        const z = i[s](r, w, P);
        r = i.dealEdgeValue(r, z, l), Object.assign(h.style, {
          top: `${r.top}px`,
          left: `${r.left}px`,
          width: `${r.width}px`,
          height: `${r.height}px`
        });
      }
      function d() {
        if (g) {
          g = !1;
          const p = {
            topPer: i.decimalPoint(r.top / l.height),
            leftPer: i.decimalPoint(r.left / l.width),
            widthPer: i.decimalPoint(r.width / l.width),
            heightPer: i.decimalPoint(r.height / l.height)
          };
          n.context.changeInfo(p), Object.assign(h.style, {
            top: `${r.top}px`,
            left: `${r.left}px`,
            width: `${r.width}px`,
            height: `${r.height}px`
          });
        }
        n.context.handlehideZone(!1), window.removeEventListener("mousemove", c), window.removeEventListener("mouseup", d);
      }
    }
    e.$destroy = () => e.removeEventListener("mousedown", o);
  },
  unbind(e) {
    e.$destroy();
  }
}, M = {
  bind(e, t, n) {
    e.addEventListener("mousedown", o);
    function o(a) {
      a.stopPropagation();
      const s = i.getOffset(e.parentNode), h = i.getPageX(a), u = i.getPageY(a);
      let l, r, f;
      window.addEventListener("mousemove", m), window.addEventListener("mouseup", g);
      function m(c) {
        c.preventDefault(), f = !0, n.context.handlehideZone(!0);
        const d = n.context.setting;
        let p = i.getPageX(c) - h, w = i.getPageY(c) - u;
        d.topPer = d.topPer || 0, d.leftPer = d.leftPer || 0, l = i.decimalPoint(w / s.height + d.topPer), r = i.decimalPoint(p / s.width + d.leftPer), l < 0 && (l = 0, w = -s.height * d.topPer), r < 0 && (r = 0, p = -s.width * d.leftPer), l + d.heightPer > 1 && (l = 1 - d.heightPer, w = s.height * (l - d.topPer)), r + d.widthPer > 1 && (r = 1 - d.widthPer, p = s.width * (r - d.leftPer)), e.style.transform = `translate(${p}px, ${w}px)`;
      }
      function g() {
        f && (f = !1, e.style.transform = "translate(0, 0)", n.context.changeInfo({
          topPer: l,
          leftPer: r
        })), n.context.handlehideZone(!1), window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", g);
      }
    }
    e.$destroy = () => e.removeEventListener("mousedown", o);
  },
  unbind(e) {
    e.$destroy();
  }
};
function I(e) {
  const t = [
    "\u96F6",
    "\u4E00",
    "\u4E8C",
    "\u4E09",
    "\u56DB",
    "\u4E94",
    "\u516D",
    "\u4E03",
    "\u516B",
    "\u4E5D"
  ], n = ["", "\u5341", "\u767E", "\u5343", "\u4E07", "\u4EBF"];
  let o = e.toString(), a = o.length, s = "";
  for (let h = 0; h < a; h++)
    s += t[parseInt(o[h])] + n[a - 1 - h];
  return s = s.replace(/零[十百千]/g, "\u96F6"), s = s.replace(/零+/g, "\u96F6"), s = s.replace(/^零+/, ""), s = s.replace(/零+$/, ""), s[s.length - 1] === "\u96F6" && (s = s.slice(0, -1)), s;
}
function _(e, t, n, o, a, s, h, u) {
  var l = typeof e == "function" ? e.options : e;
  t && (l.render = t, l.staticRenderFns = n, l._compiled = !0), o && (l.functional = !0), s && (l._scopeId = "data-v-" + s);
  var r;
  if (h ? (r = function(g) {
    g = g || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !g && typeof __VUE_SSR_CONTEXT__ < "u" && (g = __VUE_SSR_CONTEXT__), a && a.call(this, g), g && g._registeredComponents && g._registeredComponents.add(h);
  }, l._ssrRegister = r) : a && (r = u ? function() {
    a.call(
      this,
      (l.functional ? this.parent : this).$root.$options.shadowRoot
    );
  } : a), r)
    if (l.functional) {
      l._injectStyles = r;
      var f = l.render;
      l.render = function(c, d) {
        return r.call(d), f(c, d);
      };
    } else {
      var m = l.beforeCreate;
      l.beforeCreate = m ? [].concat(m, r) : [r];
    }
  return {
    exports: e,
    options: l
  };
}
const $ = {
  name: "Zone",
  directives: {
    changeSize: b,
    dragItem: M
  },
  props: {
    index: {
      type: [Number, String],
      default: ""
    },
    setting: {
      type: [Object],
      default: () => ({})
    },
    sortType: {
      type: String,
      default: "text"
    },
    hotTitle: {
      type: String,
      default: "\u70ED\u533A"
    },
    bgImg: {
      type: String,
      default: ""
    },
    isFullImg: {
      type: Boolean,
      default: !1
    }
  },
  data() {
    return {
      zoneTop: "",
      zoneLeft: "",
      zoneWidth: "",
      zoneHeight: "",
      hideZone: !1,
      tooSmall: !1
    };
  },
  watch: {
    setting: {
      handler(e) {
        this.setZoneInfo(e);
      },
      deep: !0
    }
  },
  mounted() {
    this.setZoneInfo(this.setting);
  },
  computed: {
    getSortNumber() {
      return this.sortType === "text" ? I(this.index + 1) : this.index + 1;
    }
  },
  methods: {
    setZoneInfo(e) {
      this.zoneTop = this.getZoneStyle(e.topPer), this.zoneLeft = this.getZoneStyle(e.leftPer), this.zoneWidth = this.getZoneStyle(e.widthPer), this.zoneHeight = this.getZoneStyle(e.heightPer), this.tooSmall = e.widthPer < 0.01 && e.heightPer < 0.01;
    },
    handlehideZone(e = !0) {
      this.hideZone !== e && (this.hideZone = e);
    },
    changeInfo(e = {}) {
      const { index: t } = this;
      this.$emit("changeInfo", {
        info: e,
        index: t
      });
    },
    delItem(e) {
      this.$emit("delItem", e);
    },
    getZoneStyle(e) {
      return `${(e || 0) * 100}%`;
    }
  }
};
var L = function() {
  var t = this, n = t._self._c;
  return n("div", { directives: [{ name: "drag-item", rawName: "v-drag-item" }], style: {
    top: t.zoneTop,
    left: t.zoneLeft,
    width: t.zoneWidth,
    height: t.zoneHeight
  } }, [n("ul", { directives: [{ name: "change-size", rawName: "v-change-size" }], staticClass: "hz-m-box", class: {
    "hz-z-hidden": t.tooSmall,
    "hz-m-hoverbox": !t.hideZone
  }, style: {
    background: t.bgImg ? `url(${t.bgImg}) no-repeat` : "",
    backgroundSize: t.bgImg ? t.isFullImg ? "100% 100%" : "contain" : ""
  } }, [n("li", { staticClass: "hz-u-index", attrs: { title: `${t.hotTitle}${t.getSortNumber}` } }, [t._v(" " + t._s(t.hotTitle) + t._s(t.getSortNumber) + " ")]), n("li", { directives: [{ name: "show", rawName: "v-show", value: !t.hideZone, expression: "!hideZone" }], staticClass: "hz-u-close", attrs: { title: "\u5220\u9664\u8BE5\u70ED\u533A" }, on: { click: function(o) {
    return o.stopPropagation(), t.delItem(t.index);
  } } }, [n("svg", { staticClass: "hz-u-close-icon", attrs: { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" } }, [n("path", { attrs: { d: `M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1
                  191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0
                  0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z` } })])]), n("li", { staticClass: "hz-u-square hz-u-square-tl", attrs: { "data-pointer": "dealTL" } }), n("li", { staticClass: "hz-u-square hz-u-square-tc", attrs: { "data-pointer": "dealTC" } }), n("li", { staticClass: "hz-u-square hz-u-square-tr", attrs: { "data-pointer": "dealTR" } }), n("li", { staticClass: "hz-u-square hz-u-square-cl", attrs: { "data-pointer": "dealCL" } }), n("li", { staticClass: "hz-u-square hz-u-square-cr", attrs: { "data-pointer": "dealCR" } }), n("li", { staticClass: "hz-u-square hz-u-square-bl", attrs: { "data-pointer": "dealBL" } }), n("li", { staticClass: "hz-u-square hz-u-square-bc", attrs: { "data-pointer": "dealBC" } }), n("li", { staticClass: "hz-u-square hz-u-square-br", attrs: { "data-pointer": "dealBR" } })])]);
}, x = [], y = /* @__PURE__ */ _(
  $,
  L,
  x,
  !1,
  null,
  null,
  null,
  null
);
const O = y.exports, T = {
  bind(e, t, n) {
    const o = i.MIN_LIMIT;
    e.addEventListener("mousedown", a);
    function a(s) {
      s.preventDefault();
      let h = {
        top: i.getDistanceY(s, e),
        left: i.getDistanceX(s, e),
        width: 0,
        height: 0
      };
      const u = i.getOffset(e), l = {
        topPer: i.decimalPoint(h.top / u.height),
        leftPer: i.decimalPoint(h.left / u.width),
        widthPer: 0,
        heightPer: 0
      };
      let r = i.getPageX(s), f = i.getPageY(s);
      n.context.addItem(l), window.addEventListener("mousemove", m), window.addEventListener("mouseup", g);
      function m(c) {
        c.preventDefault();
        const d = i.getPageX(c) - r, p = i.getPageY(c) - f;
        r = i.getPageX(c), f = i.getPageY(c);
        const w = 0, P = i.dealBR(h, d, p, w);
        h = i.dealEdgeValue(h, P, u), Object.assign(e.lastElementChild.style, {
          top: `${h.top}px`,
          left: `${h.left}px`,
          width: `${h.width}px`,
          height: `${h.height}px`
        });
      }
      function g() {
        const c = {
          topPer: i.decimalPoint(h.top / u.height),
          leftPer: i.decimalPoint(h.left / u.width),
          widthPer: i.decimalPoint(h.width / u.width),
          heightPer: i.decimalPoint(h.height / u.height)
        };
        n.context.isOverRange() ? n.context.overRange() : u.height < o && h.width > o ? n.context.changeItem(
          Object.assign(c, {
            topPer: 0,
            heightPer: 1
          })
        ) : u.width < o && h.height > o ? n.context.changeItem(
          Object.assign(c, {
            leftper: 0,
            widthPer: 1
          })
        ) : h.width > o && h.height > o ? n.context.changeItem(c) : n.context.eraseItem(), window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", g);
      }
    }
    e.$destroy = () => e.removeEventListener("mousedown", a);
  },
  unbind(e) {
    e.$destroy();
  }
}, S = {
  name: "yk-hot-area",
  directives: {
    addItem: T
  },
  components: {
    Zone: O
  },
  props: {
    image: {
      type: String,
      required: !0
    },
    value: {
      type: Array,
      default: () => []
    },
    max: {
      type: Number,
      default: 1 / 0
    },
    sortType: {
      type: String,
      default: "text"
    },
    hotTitle: {
      type: String,
      default: "\u70ED\u533A"
    },
    isFullImg: {
      type: Boolean,
      default: !1
    }
  },
  computed: {
    zones: {
      get() {
        return this.value;
      },
      set(e) {
        this.$emit("input", e);
      }
    }
  },
  methods: {
    findCurSelect() {
      return this.value.find((e) => e.selected);
    },
    onSelect(e) {
      const t = this.findCurSelect();
      t && (t.selected = 0), e && (C.set(e, "selected", 1), this.$emit("select-zone", e));
    },
    changeInfo(e) {
      const { info: t, index: n } = e;
      this.changeItem(t, n);
    },
    addItem(e) {
      this.zones.push(e), this.hasChange(), this.$emit("add", e), this.onSelect(e);
    },
    eraseItem(e = this.zones.length - 1) {
      this.removeItem(e), this.$emit("erase", e);
    },
    isOverRange() {
      const { max: e, zones: t } = this;
      return e && t.length > e;
    },
    overRange() {
      const e = this.zones.length - 1;
      this.removeItem(e), this.$emit("overRange", e);
    },
    removeItem(e = this.zones.length - 1) {
      const t = this.zones[e];
      t === this.findCurSelect() && this.onSelect(null), this.zones.splice(e, 1), this.hasChange(), this.$emit("remove", t, e);
    },
    changeItem(e, t = this.zones.length - 1) {
      Object.assign(this.zones[t], e), this.hasChange();
    },
    hasChange() {
      this.zones.forEach((e) => {
        Math.abs(e.widthPer - e.heightPer) < 0.01 ? e.isCircle = !0 : e.isCircle = !1;
      }), this.$emit("change", this.zones);
    }
  }
};
var E = function() {
  var t = this, n = t._self._c;
  return n("div", { ref: "content", staticClass: "hz-m-wrap" }, [n("img", { staticClass: "hz-u-img", attrs: { src: t.image, alt: "\u70ED\u533A\u80CC\u666F" } }), n("div", { directives: [{ name: "add-item", rawName: "v-add-item" }], staticClass: "hz-m-area" }, t._l(t.zones, function(o, a) {
    return n("zone", { key: a, staticClass: "hz-m-item", class: {
      "hz-m-item-selected": o.selected
    }, attrs: { bgImg: o.bgImg, index: a, setting: o, sortType: t.sortType, hotTitle: t.hotTitle, isFullImg: t.isFullImg }, on: { delItem: function(s) {
      return t.removeItem(s);
    }, changeInfo: function(s) {
      return t.changeInfo(s);
    } }, nativeOn: { click: function(s) {
      return t.onSelect(o);
    } } });
  }), 1)]);
}, N = [], X = /* @__PURE__ */ _(
  S,
  E,
  N,
  !1,
  null,
  null,
  null,
  null
);
const v = X.exports, R = {
  install(e) {
    e.component(v.name, v);
  }
};
export {
  R as default
};