hongluan-ui/lib/components/image-viewer/src/image-viewer2.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var lodashUnified = require('lodash-unified');
require('../../../utils/index.js');
require('../../../constants/index.js');
require('../../../hooks/index.js');
var index = require('../../icon/index.js');
var index$1 = require('../../group/index.js');
var index$2 = require('../../teleport/index.js');
require('../../system-icon/index.js');
var imageViewer = require('./image-viewer.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var close = require('../../system-icon/src/close.js');
var arrowLeft = require('../../system-icon/src/arrow-left.js');
var arrowRight = require('../../system-icon/src/arrow-right.js');
var zoomIn = require('../../system-icon/src/zoom-in.js');
var zoomOut = require('../../system-icon/src/zoom-out.js');
var refresh = require('../../system-icon/src/refresh.js');
var maximize = require('../../system-icon/src/maximize.js');
var minimize = require('../../system-icon/src/minimize.js');
var index$3 = require('../../../hooks/use-namespace/index.js');
var index$4 = require('../../../hooks/use-z-index/index.js');
var index$5 = require('../../../hooks/use-locale/index.js');
var aria = require('../../../constants/aria.js');
var objects = require('../../../utils/objects.js');

const modes = {
  CONTAIN: {
    name: "contain",
    icon: "Maximize"
  },
  ORIGINAL: {
    name: "original",
    icon: "Minimize"
  }
};
const _sfc_main = vue.defineComponent({
  name: "ImageViewer",
  components: {
    HlIcon: index.HlIcon,
    HlGroup: index$1.HlGroup,
    HlTeleport: index$2.HlTeleport,
    SystemClose: close["default"],
    SystemArrowLeft: arrowLeft["default"],
    SystemArrowRight: arrowRight["default"],
    SystemZoomIn: zoomIn["default"],
    SystemZoomOut: zoomOut["default"],
    SystemRefresh: refresh["default"],
    SystemMaximize: maximize["default"],
    SystemMinimize: minimize["default"]
  },
  props: imageViewer.imageViewerProps,
  emits: ["close", "switch", "rotate"],
  setup(props, { emit }) {
    var _a;
    const { namespace } = index$3.useNamespace("image-viewer");
    const { nextZIndex } = index$4.useZIndex();
    const { t } = index$5.useLocale();
    const wrapper = vue.ref();
    const imgRefs = vue.ref([]);
    const scopeEventListener = vue.effectScope();
    const loading = vue.ref(true);
    const activeIndex = vue.ref(props.initialIndex);
    const mode = vue.shallowRef(modes.CONTAIN);
    const transform = vue.ref({
      scale: 1,
      deg: 0,
      offsetX: 0,
      offsetY: 0,
      enableTransition: false
    });
    const zIndex = vue.ref((_a = props.zIndex) != null ? _a : nextZIndex());
    const isSingle = vue.computed(() => {
      const { urlList } = props;
      return urlList.length <= 1;
    });
    const isFirst = vue.computed(() => {
      return activeIndex.value === 0;
    });
    const isLast = vue.computed(() => {
      return activeIndex.value === props.urlList.length - 1;
    });
    const currentImg = vue.computed(() => {
      return props.urlList[activeIndex.value];
    });
    const imgStyle = vue.computed(() => {
      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
      let translateX = offsetX / scale;
      let translateY = offsetY / scale;
      const radian = deg * Math.PI / 180;
      const cosRadian = Math.cos(radian);
      const sinRadian = Math.sin(radian);
      translateX = translateX * cosRadian + translateY * sinRadian;
      translateY = translateY * cosRadian - offsetX / scale * sinRadian;
      const style = {
        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
        transition: enableTransition ? "transform .3s" : ""
      };
      if (mode.value.name === modes.CONTAIN.name) {
        style.maxWidth = style.maxHeight = "100%";
      }
      return style;
    });
    function hide() {
      unregisterEventListener();
      emit("close");
    }
    function registerEventListener() {
      const keydownHandler = lodashUnified.throttle((e) => {
        switch (e.code) {
          case aria.EVENT_CODE.esc:
            hide();
            break;
          case aria.EVENT_CODE.space:
            toggleMode();
            break;
          case aria.EVENT_CODE.left:
            prev();
            break;
          case aria.EVENT_CODE.up:
            handleActions("zoomIn");
            break;
          case aria.EVENT_CODE.right:
            next();
            break;
          case aria.EVENT_CODE.down:
            handleActions("zoomOut");
            break;
        }
      });
      const mousewheelHandler = lodashUnified.throttle((e) => {
        const delta = e.deltaY || e.deltaX;
        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
          zoomRate: props.zoomRate,
          enableTransition: false
        });
      });
      scopeEventListener.run(() => {
        core.useEventListener(document, "keydown", keydownHandler);
        core.useEventListener(document, "wheel", mousewheelHandler);
      });
    }
    function unregisterEventListener() {
      scopeEventListener.stop();
    }
    function handleImgLoad() {
      loading.value = false;
    }
    function handleImgError(e) {
      loading.value = false;
      e.target.alt = t("hl.image.error");
    }
    function handleMouseDown(e) {
      if (loading.value || e.button !== 0 || !wrapper.value)
        return;
      transform.value.enableTransition = false;
      const { offsetX, offsetY } = transform.value;
      const startX = e.pageX;
      const startY = e.pageY;
      const dragHandler = lodashUnified.throttle((ev) => {
        transform.value = {
          ...transform.value,
          offsetX: offsetX + ev.pageX - startX,
          offsetY: offsetY + ev.pageY - startY
        };
      });
      const removeMousemove = core.useEventListener(document, "mousemove", dragHandler);
      core.useEventListener(document, "mouseup", () => {
        removeMousemove();
      });
      e.preventDefault();
    }
    function reset() {
      transform.value = {
        scale: 1,
        deg: 0,
        offsetX: 0,
        offsetY: 0,
        enableTransition: false
      };
    }
    function toggleMode() {
      if (loading.value)
        return;
      const modeNames = objects.keysOf(modes);
      const modeValues = Object.values(modes);
      const currentMode = mode.value.name;
      const index = modeValues.findIndex((i) => i.name === currentMode);
      const nextIndex = (index + 1) % modeNames.length;
      mode.value = modes[modeNames[nextIndex]];
      reset();
    }
    function setActiveItem(index) {
      const len = props.urlList.length;
      activeIndex.value = (index + len) % len;
    }
    function prev() {
      if (isFirst.value && !props.infinite)
        return;
      setActiveItem(activeIndex.value - 1);
    }
    function next() {
      if (isLast.value && !props.infinite)
        return;
      setActiveItem(activeIndex.value + 1);
    }
    function handleActions(action, options = {}) {
      if (loading.value)
        return;
      const { minScale, maxScale } = props;
      const { zoomRate, rotateDeg, enableTransition } = {
        zoomRate: props.zoomRate,
        rotateDeg: 90,
        enableTransition: true,
        ...options
      };
      switch (action) {
        case "zoomOut":
          if (transform.value.scale > minScale) {
            transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));
          }
          break;
        case "zoomIn":
          if (transform.value.scale < maxScale) {
            transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));
          }
          break;
        case "clockwise":
          transform.value.deg += rotateDeg;
          emit("rotate", transform.value.deg);
          break;
        case "anticlockwise":
          transform.value.deg -= rotateDeg;
          emit("rotate", transform.value.deg);
          break;
      }
      transform.value.enableTransition = enableTransition;
    }
    vue.watch(currentImg, () => {
      vue.nextTick(() => {
        const $img = imgRefs.value[0];
        if (!($img == null ? void 0 : $img.complete)) {
          loading.value = true;
        }
      });
    });
    vue.watch(activeIndex, (val) => {
      reset();
      emit("switch", val);
    });
    vue.onMounted(() => {
      var _a2, _b;
      registerEventListener();
      (_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
    });
    return {
      namespace,
      activeIndex,
      wrapper,
      imgRefs,
      isSingle,
      isFirst,
      isLast,
      currentImg,
      imgStyle,
      mode,
      zIndex,
      handleActions,
      prev,
      next,
      hide,
      toggleMode,
      setActiveItem,
      handleImgLoad,
      handleImgError,
      handleMouseDown
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_group = vue.resolveComponent("hl-group");
  const _component_system_zoom_out = vue.resolveComponent("system-zoom-out");
  const _component_hl_icon = vue.resolveComponent("hl-icon");
  const _component_system_zoom_in = vue.resolveComponent("system-zoom-in");
  const _component_system_refresh = vue.resolveComponent("system-refresh");
  const _component_system_maximize = vue.resolveComponent("system-maximize");
  const _component_system_minimize = vue.resolveComponent("system-minimize");
  const _component_system_arrow_left = vue.resolveComponent("system-arrow-left");
  const _component_system_arrow_right = vue.resolveComponent("system-arrow-right");
  const _component_system_close = vue.resolveComponent("system-close");
  const _component_hl_teleport = vue.resolveComponent("hl-teleport");
  return vue.openBlock(), vue.createBlock(_component_hl_teleport, {
    to: "body",
    disabled: !_ctx.teleported
  }, {
    default: vue.withCtx(() => [
      vue.createVNode(vue.Transition, { name: "viewer-fade" }, {
        default: vue.withCtx(() => [
          vue.createElementVNode("div", {
            ref: "wrapper",
            tabindex: -1,
            class: vue.normalizeClass(_ctx.namespace),
            style: vue.normalizeStyle({ zIndex: _ctx.zIndex })
          }, [
            vue.createElementVNode("div", {
              class: "image-viewer-mask",
              onClick: vue.withModifiers(($event) => _ctx.hideOnClickModal && _ctx.hide(), ["self"])
            }, null, 8, ["onClick"]),
            vue.createCommentVNode(" ACTIONS "),
            vue.createVNode(_component_hl_group, {
              gap: "var(--sm)",
              align: "items-middle items-around",
              class: "image-viewer-tools"
            }, {
              default: vue.withCtx(() => [
                _ctx.$slots["tools-before"] ? (vue.openBlock(), vue.createBlock(_component_hl_group, {
                  key: 0,
                  class: "tools-group"
                }, {
                  default: vue.withCtx(() => [
                    vue.renderSlot(_ctx.$slots, "tools-before", { index: _ctx.activeIndex })
                  ]),
                  _: 3
                })) : vue.createCommentVNode("v-if", true),
                vue.createVNode(_component_hl_group, {
                  gap: "var(--xs)",
                  class: "tools-group"
                }, {
                  default: vue.withCtx(() => [
                    vue.createVNode(_component_hl_icon, {
                      onClick: ($event) => _ctx.handleActions("zoomOut")
                    }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(_component_system_zoom_out)
                      ]),
                      _: 1
                    }, 8, ["onClick"]),
                    vue.createVNode(_component_hl_icon, {
                      onClick: ($event) => _ctx.handleActions("zoomIn")
                    }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(_component_system_zoom_in)
                      ]),
                      _: 1
                    }, 8, ["onClick"]),
                    vue.createVNode(_component_hl_icon, {
                      name: "Refresh",
                      onClick: ($event) => _ctx.handleActions("anticlockwise")
                    }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(_component_system_refresh)
                      ]),
                      _: 1
                    }, 8, ["onClick"]),
                    vue.createVNode(_component_hl_icon, { onClick: _ctx.toggleMode }, {
                      default: vue.withCtx(() => [
                        _ctx.mode.icon === "Maximize" ? (vue.openBlock(), vue.createBlock(_component_system_maximize, { key: 0 })) : vue.createCommentVNode("v-if", true),
                        _ctx.mode.icon === "Minimize" ? (vue.openBlock(), vue.createBlock(_component_system_minimize, { key: 1 })) : vue.createCommentVNode("v-if", true)
                      ]),
                      _: 1
                    }, 8, ["onClick"])
                  ]),
                  _: 1
                }),
                !_ctx.isSingle ? (vue.openBlock(), vue.createBlock(_component_hl_group, {
                  key: 1,
                  gap: "var(--xs)",
                  class: "tools-group"
                }, {
                  default: vue.withCtx(() => [
                    vue.createVNode(_component_hl_icon, {
                      class: vue.normalizeClass({ "is-disabled": !_ctx.infinite && _ctx.isFirst }),
                      onClick: _ctx.prev
                    }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(_component_system_arrow_left)
                      ]),
                      _: 1
                    }, 8, ["class", "onClick"]),
                    vue.createVNode(_component_hl_icon, {
                      class: vue.normalizeClass({ "is-disabled": !_ctx.infinite && _ctx.isLast }),
                      onClick: _ctx.next
                    }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(_component_system_arrow_right)
                      ]),
                      _: 1
                    }, 8, ["class", "onClick"])
                  ]),
                  _: 1
                })) : vue.createCommentVNode("v-if", true),
                vue.createVNode(_component_hl_group, { class: "tools-group" }, {
                  default: vue.withCtx(() => [
                    vue.createVNode(_component_hl_icon, { onClick: _ctx.hide }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(_component_system_close)
                      ]),
                      _: 1
                    }, 8, ["onClick"])
                  ]),
                  _: 1
                }),
                _ctx.$slots["tools-after"] ? (vue.openBlock(), vue.createBlock(_component_hl_group, {
                  key: 2,
                  class: "tools-group"
                }, {
                  default: vue.withCtx(() => [
                    vue.renderSlot(_ctx.$slots, "tools-after", { index: _ctx.activeIndex })
                  ]),
                  _: 3
                })) : vue.createCommentVNode("v-if", true)
              ]),
              _: 3
            }),
            vue.createCommentVNode(" CANVAS "),
            vue.createElementVNode("div", { class: "image-viewer-canvas" }, [
              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
                  ref_for: true,
                  ref: (el) => _ctx.imgRefs[i] = el,
                  key: url,
                  src: url,
                  style: vue.normalizeStyle(_ctx.imgStyle),
                  class: "image-viewer-img",
                  crossorigin: _ctx.crossorigin,
                  onLoad: _ctx.handleImgLoad,
                  onError: _ctx.handleImgError,
                  onMousedown: _ctx.handleMouseDown
                }, null, 44, ["src", "crossorigin", "onLoad", "onError", "onMousedown"])), [
                  [vue.vShow, i === _ctx.activeIndex]
                ]);
              }), 128))
            ]),
            vue.renderSlot(_ctx.$slots, "default")
          ], 6)
        ]),
        _: 3
      })
    ]),
    _: 3
  }, 8, ["disabled"]);
}
var ImageViewer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = ImageViewer;
//# sourceMappingURL=image-viewer2.js.map