hongluan-ui
Version:
Hongluan Component Library for Vue 3
447 lines (444 loc) • 16.4 kB
JavaScript
import { defineComponent, ref, effectScope, shallowRef, computed, watch, nextTick, onMounted, resolveComponent, openBlock, createBlock, withCtx, createVNode, Transition, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, renderSlot, createElementBlock, Fragment, renderList, withDirectives, vShow } from 'vue';
import { useEventListener } from '@vueuse/core';
import { throttle } from 'lodash-unified';
import '../../../utils/index.mjs';
import '../../../constants/index.mjs';
import '../../../hooks/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import { HlGroup } from '../../group/index.mjs';
import { HlTeleport } from '../../teleport/index.mjs';
import '../../system-icon/index.mjs';
import { imageViewerProps } from './image-viewer.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import SystemClose from '../../system-icon/src/close.mjs';
import SystemArrowLeft from '../../system-icon/src/arrow-left.mjs';
import SystemArrowRight from '../../system-icon/src/arrow-right.mjs';
import SystemZoomIn from '../../system-icon/src/zoom-in.mjs';
import SystemZoomOut from '../../system-icon/src/zoom-out.mjs';
import SystemRefresh from '../../system-icon/src/refresh.mjs';
import SystemMaximize from '../../system-icon/src/maximize.mjs';
import SystemMinimize from '../../system-icon/src/minimize.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
import { keysOf } from '../../../utils/objects.mjs';
const modes = {
CONTAIN: {
name: "contain",
icon: "Maximize"
},
ORIGINAL: {
name: "original",
icon: "Minimize"
}
};
const _sfc_main = defineComponent({
name: "ImageViewer",
components: {
HlIcon,
HlGroup,
HlTeleport,
SystemClose,
SystemArrowLeft,
SystemArrowRight,
SystemZoomIn,
SystemZoomOut,
SystemRefresh,
SystemMaximize,
SystemMinimize
},
props: imageViewerProps,
emits: ["close", "switch", "rotate"],
setup(props, { emit }) {
var _a;
const { namespace } = useNamespace("image-viewer");
const { nextZIndex } = useZIndex();
const { t } = useLocale();
const wrapper = ref();
const imgRefs = ref([]);
const scopeEventListener = effectScope();
const loading = ref(true);
const activeIndex = ref(props.initialIndex);
const mode = shallowRef(modes.CONTAIN);
const transform = ref({
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false
});
const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
const isSingle = computed(() => {
const { urlList } = props;
return urlList.length <= 1;
});
const isFirst = computed(() => {
return activeIndex.value === 0;
});
const isLast = computed(() => {
return activeIndex.value === props.urlList.length - 1;
});
const currentImg = computed(() => {
return props.urlList[activeIndex.value];
});
const imgStyle = 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 = throttle((e) => {
switch (e.code) {
case EVENT_CODE.esc:
hide();
break;
case EVENT_CODE.space:
toggleMode();
break;
case EVENT_CODE.left:
prev();
break;
case EVENT_CODE.up:
handleActions("zoomIn");
break;
case EVENT_CODE.right:
next();
break;
case EVENT_CODE.down:
handleActions("zoomOut");
break;
}
});
const mousewheelHandler = throttle((e) => {
const delta = e.deltaY || e.deltaX;
handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
zoomRate: props.zoomRate,
enableTransition: false
});
});
scopeEventListener.run(() => {
useEventListener(document, "keydown", keydownHandler);
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 = throttle((ev) => {
transform.value = {
...transform.value,
offsetX: offsetX + ev.pageX - startX,
offsetY: offsetY + ev.pageY - startY
};
});
const removeMousemove = useEventListener(document, "mousemove", dragHandler);
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 = 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;
}
watch(currentImg, () => {
nextTick(() => {
const $img = imgRefs.value[0];
if (!($img == null ? void 0 : $img.complete)) {
loading.value = true;
}
});
});
watch(activeIndex, (val) => {
reset();
emit("switch", val);
});
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 = resolveComponent("hl-group");
const _component_system_zoom_out = resolveComponent("system-zoom-out");
const _component_hl_icon = resolveComponent("hl-icon");
const _component_system_zoom_in = resolveComponent("system-zoom-in");
const _component_system_refresh = resolveComponent("system-refresh");
const _component_system_maximize = resolveComponent("system-maximize");
const _component_system_minimize = resolveComponent("system-minimize");
const _component_system_arrow_left = resolveComponent("system-arrow-left");
const _component_system_arrow_right = resolveComponent("system-arrow-right");
const _component_system_close = resolveComponent("system-close");
const _component_hl_teleport = resolveComponent("hl-teleport");
return openBlock(), createBlock(_component_hl_teleport, {
to: "body",
disabled: !_ctx.teleported
}, {
default: withCtx(() => [
createVNode(Transition, { name: "viewer-fade" }, {
default: withCtx(() => [
createElementVNode("div", {
ref: "wrapper",
tabindex: -1,
class: normalizeClass(_ctx.namespace),
style: normalizeStyle({ zIndex: _ctx.zIndex })
}, [
createElementVNode("div", {
class: "image-viewer-mask",
onClick: withModifiers(($event) => _ctx.hideOnClickModal && _ctx.hide(), ["self"])
}, null, 8, ["onClick"]),
createCommentVNode(" ACTIONS "),
createVNode(_component_hl_group, {
gap: "var(--sm)",
align: "items-middle items-around",
class: "image-viewer-tools"
}, {
default: withCtx(() => [
_ctx.$slots["tools-before"] ? (openBlock(), createBlock(_component_hl_group, {
key: 0,
class: "tools-group"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "tools-before", { index: _ctx.activeIndex })
]),
_: 3
})) : createCommentVNode("v-if", true),
createVNode(_component_hl_group, {
gap: "var(--xs)",
class: "tools-group"
}, {
default: withCtx(() => [
createVNode(_component_hl_icon, {
onClick: ($event) => _ctx.handleActions("zoomOut")
}, {
default: withCtx(() => [
createVNode(_component_system_zoom_out)
]),
_: 1
}, 8, ["onClick"]),
createVNode(_component_hl_icon, {
onClick: ($event) => _ctx.handleActions("zoomIn")
}, {
default: withCtx(() => [
createVNode(_component_system_zoom_in)
]),
_: 1
}, 8, ["onClick"]),
createVNode(_component_hl_icon, {
name: "Refresh",
onClick: ($event) => _ctx.handleActions("anticlockwise")
}, {
default: withCtx(() => [
createVNode(_component_system_refresh)
]),
_: 1
}, 8, ["onClick"]),
createVNode(_component_hl_icon, { onClick: _ctx.toggleMode }, {
default: withCtx(() => [
_ctx.mode.icon === "Maximize" ? (openBlock(), createBlock(_component_system_maximize, { key: 0 })) : createCommentVNode("v-if", true),
_ctx.mode.icon === "Minimize" ? (openBlock(), createBlock(_component_system_minimize, { key: 1 })) : createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["onClick"])
]),
_: 1
}),
!_ctx.isSingle ? (openBlock(), createBlock(_component_hl_group, {
key: 1,
gap: "var(--xs)",
class: "tools-group"
}, {
default: withCtx(() => [
createVNode(_component_hl_icon, {
class: normalizeClass({ "is-disabled": !_ctx.infinite && _ctx.isFirst }),
onClick: _ctx.prev
}, {
default: withCtx(() => [
createVNode(_component_system_arrow_left)
]),
_: 1
}, 8, ["class", "onClick"]),
createVNode(_component_hl_icon, {
class: normalizeClass({ "is-disabled": !_ctx.infinite && _ctx.isLast }),
onClick: _ctx.next
}, {
default: withCtx(() => [
createVNode(_component_system_arrow_right)
]),
_: 1
}, 8, ["class", "onClick"])
]),
_: 1
})) : createCommentVNode("v-if", true),
createVNode(_component_hl_group, { class: "tools-group" }, {
default: withCtx(() => [
createVNode(_component_hl_icon, { onClick: _ctx.hide }, {
default: withCtx(() => [
createVNode(_component_system_close)
]),
_: 1
}, 8, ["onClick"])
]),
_: 1
}),
_ctx.$slots["tools-after"] ? (openBlock(), createBlock(_component_hl_group, {
key: 2,
class: "tools-group"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "tools-after", { index: _ctx.activeIndex })
]),
_: 3
})) : createCommentVNode("v-if", true)
]),
_: 3
}),
createCommentVNode(" CANVAS "),
createElementVNode("div", { class: "image-viewer-canvas" }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
return withDirectives((openBlock(), createElementBlock("img", {
ref_for: true,
ref: (el) => _ctx.imgRefs[i] = el,
key: url,
src: url,
style: 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"])), [
[vShow, i === _ctx.activeIndex]
]);
}), 128))
]),
renderSlot(_ctx.$slots, "default")
], 6)
]),
_: 3
})
]),
_: 3
}, 8, ["disabled"]);
}
var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { ImageViewer as default };
//# sourceMappingURL=image-viewer2.mjs.map