@zoom-image/vue
Version:
Adapter of zoom image core for Vue
130 lines (127 loc) • 3.25 kB
JavaScript
;
var core = require('@zoom-image/core');
var vue = require('vue');
// src/useZoomImageWheel.ts
function useZoomImageWheel() {
let result;
const zoomImageState = vue.reactive({
currentZoom: 1,
enable: false,
currentPositionX: -1,
currentPositionY: -1,
currentRotation: 0
});
const createZoomImage = (...arg) => {
result?.cleanup();
result = core.createZoomImageWheel(...arg);
const currentState = result.getState();
for (const key in currentState) {
zoomImageState[key] = currentState[key];
}
result.subscribe(({ updatedProperties }) => {
for (const key in updatedProperties) {
zoomImageState[key] = updatedProperties[key];
}
});
};
vue.onUnmounted(() => {
result?.cleanup();
});
const setZoomImageState = (state) => {
result?.setState(state);
};
return {
createZoomImage,
zoomImageState,
setZoomImageState
};
}
function useZoomImageHover() {
let result;
const zoomImageState = vue.reactive({
enabled: false,
zoomedImgStatus: "idle"
});
const createZoomImage = (...arg) => {
result?.cleanup();
result = core.createZoomImageHover(...arg);
const currentState = result.getState();
for (const key in currentState) {
zoomImageState[key] = currentState[key];
}
result.subscribe(({ updatedProperties }) => {
for (const key in updatedProperties) {
zoomImageState[key] = updatedProperties[key];
}
});
};
vue.onUnmounted(() => {
result?.cleanup();
});
const setZoomImageState = (state) => {
result?.setState(state);
};
return {
createZoomImage,
zoomImageState,
setZoomImageState
};
}
function useZoomImageMove() {
let result;
const zoomImageState = vue.reactive({
zoomedImgStatus: "idle"
});
const createZoomImage = (...arg) => {
result?.cleanup();
result = core.createZoomImageMove(...arg);
const currentState = result.getState();
for (const key in currentState) {
zoomImageState[key] = currentState[key];
}
result.subscribe(({ updatedProperties }) => {
for (const key in updatedProperties) {
zoomImageState[key] = updatedProperties[key];
}
});
};
vue.onUnmounted(() => {
result?.cleanup();
});
return {
createZoomImage,
zoomImageState
};
}
function useZoomImageClick() {
let result;
const zoomImageState = vue.reactive({
zoomedImgStatus: "idle"
});
const createZoomImage = (...arg) => {
result?.cleanup();
result = core.createZoomImageClick(...arg);
const currentState = result.getState();
for (const key in currentState) {
zoomImageState[key] = currentState[key];
}
result.subscribe(({ updatedProperties }) => {
for (const key in updatedProperties) {
zoomImageState[key] = updatedProperties[key];
}
});
};
vue.onUnmounted(() => {
result?.cleanup();
});
return {
zoomImageState,
createZoomImage
};
}
exports.useZoomImageClick = useZoomImageClick;
exports.useZoomImageHover = useZoomImageHover;
exports.useZoomImageMove = useZoomImageMove;
exports.useZoomImageWheel = useZoomImageWheel;
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map