Skip to content

Commit

Permalink
fixed touch
Browse files Browse the repository at this point in the history
  • Loading branch information
@cenfun
cenfun committed Aug 25, 2024
1 parent f88cd18 commit a384491
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 70 deletions.
20 changes: 18 additions & 2 deletions packages/app/src/common/start-move-end.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,21 @@ class StartMoveEnd extends EventTarget {
... options
};


this.startEvents = {
mousedown: {
handler: (e) => {
this.targetMouseDownHandler(e);
if (this.proxyHandler(e)) {
this.targetMouseDownHandler(e);
}
},
options: true
},
touchstart: {
handler: (e) => {
this.targetTouchStartHandler(e);
if (this.proxyHandler(e)) {
this.targetTouchStartHandler(e);
}
},
options: {
passive: false
Expand Down Expand Up @@ -87,6 +92,17 @@ class StartMoveEnd extends EventTarget {

// ====================================================================

// check target proxy
proxyHandler(e) {
const proxy = this.options.proxy;
if (typeof proxy !== 'function') {
return true;
}
return proxy.call(this, e);
}

// ====================================================================

targetMouseDownHandler(e) {
this.motionStop();
this.unbindEvents(this.mouseEvents);
Expand Down
195 changes: 127 additions & 68 deletions packages/app/src/components/detail/attachments/comparison.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const props = defineProps({
// full size image
const imgF = reactive({
startX: 0,
startY: 0,
imageTop: 0,
imageLeft: 0,
opacity: 100,
Expand All @@ -37,6 +38,7 @@ const imgF = reactive({
// half size image (side by side)
const imgH = reactive({
startX: 0,
startY: 0,
imageTop: 0,
imageLeft: 0,
opacity: 100,
Expand All @@ -45,7 +47,6 @@ const imgH = reactive({
});
const d = shallowReactive({
touch: Util.isTouchDevice(),
tabIndex: 0,
tempIndex: 0,
img: imgF
Expand Down Expand Up @@ -160,19 +161,31 @@ const switchTo = (e, offset = 0) => {
}
};
const onMouseUp = (e) => {
d.tabIndex = d.tempIndex;
Util.unbindEvents(windowEvents);
// ===================================================================================================
const onDragDown = (e) => {
// stop drag event for side by side
e.preventDefault();
const ee = e.type.startsWith('touch') ? e.touches[0] : e;
d.img.startX = ee.pageX;
d.img.startY = ee.pageY;
d.startL = d.img.imageLeft;
d.startT = d.img.imageTop;
d.tempIndex = d.tabIndex;
switchTo(e, 0);
};
const onMouseMove = (e) => {
const onDragMove = (e) => {
if (d.gutterEnabled) {
return;
}
const ee = e.type.startsWith('touch') ? e.touches[0] : e;
const offsetX = e.pageX - d.img.startX;
const offsetY = e.pageY - d.img.startY;
const offsetX = ee.pageX - d.img.startX;
const offsetY = ee.pageY - d.img.startY;
// pan if zoom
if (d.img.percent > d.img.minPercent && d.container) {
Expand All @@ -195,41 +208,14 @@ const onMouseMove = (e) => {
if (Math.abs(offsetX) < 10) {
return;
}
switchTo(e, offsetX);
d.img.startX = e.pageX;
};
const windowEvents = {
mousemove: {
handler: (e) => {
onMouseMove(e);
},
options: true
},
mouseup: {
handler: (e) => {
onMouseUp(e);
},
options: {
once: true
}
}
switchTo(e, offsetX);
d.img.startX = ee.pageX;
};
const onMouseDown = (e) => {
// stop drag event for side by side
e.preventDefault();
d.img.startX = e.pageX;
d.img.startY = e.pageY;
d.startL = d.img.imageLeft;
d.startT = d.img.imageTop;
d.tempIndex = d.tabIndex;
switchTo(e, 0);
Util.bindEvents(windowEvents, window);
// console.log(e.offsetX, e.offsetY);
const onDragUp = (e) => {
d.tabIndex = d.tempIndex;
};
const getMinWidth = () => {
Expand Down Expand Up @@ -275,8 +261,11 @@ const zoomTo = (e, percent) => {
}
const br = d.container.getBoundingClientRect();
const ox = Math.round(e.pageX - br.left - 10);
const oy = Math.round(e.pageY - br.top - 10);
const ee = e.type.startsWith('touch') ? e.touches[0] : e;
const ox = Math.round(ee.pageX - br.left - 10);
const oy = Math.round(ee.pageY - br.top - 10);
// console.log(ox, oy);
Expand Down Expand Up @@ -309,11 +298,18 @@ const onDblClick = (e) => {
// console.log('onDblClick');
setTimeout(() => {
if (d.img.percent === 100) {
zoomTo(e, d.img.minPercent - 1);
if (d.img.percent < 100) {
zoomTo(e, 100);
return;
}
if (d.img.percent < 200) {
zoomTo(e, 200);
return;
}
zoomTo(e, 100);
zoomTo(e, d.img.minPercent - 1);
});
};
Expand All @@ -329,7 +325,7 @@ const onMouseWheel = (e) => {
e.preventDefault();
d.imageCursor = delta > 0 ? 'zoom-in' : 'zoom-out';
// d.imageCursor = delta > 0 ? 'zoom-in' : 'zoom-out';
zoomTo(e, percent);
Expand Down Expand Up @@ -469,16 +465,23 @@ const updateOpacity = (imageStyle) => {
};
};
const initOpacity = ($el) => {
const initOpacity = () => {
const $el = el.value;
const $opacity = $el.querySelector('.mcr-comparison-opacity');
const sme = new SME($opacity);
sme.bind(SME.START, (e) => {
if (d.tabIndex === 4) {
d.opacityEnabled = true;
const ed = e.detail;
const ee = ed.e;
const left = sme.clamp(ee.offsetX, 0, 100);
const eee = ee.type.startsWith('touch') ? ee.touches[0] : ee;
const x = eee.pageX - ee.target.getBoundingClientRect().left;
// console.log(x);
d.opacityEnabled = true;
const left = sme.clamp(Math.round(x), 0, 100);
d.img.opacityLeft = left;
d.img.opacity = left;
Expand All @@ -488,7 +491,7 @@ const initOpacity = ($el) => {
sme.bind(SME.MOVE, (e) => {
if (d.opacityEnabled) {
const ed = e.detail;
const left = sme.clamp(d.img.opacityLeft + ed.offsetX, 0, 100);
const left = sme.clamp(Math.round(d.img.opacityLeft + ed.offsetX), 0, 100);
d.img.opacity = left;
}
});
Expand All @@ -514,35 +517,93 @@ const getEventTargetContainer = (e) => {
}
};
let previousTouch = Date.now();
const globalEvents = {
mousedown: {
wheel: {
handler: (e) => {
const container = getEventTargetContainer(e);
if (container) {
// console.log(container);
d.container = container;
onMouseDown(e);
onMouseWheel(e);
}
}
},
wheel: {
dblclick: {
handler: (e) => {
const container = getEventTargetContainer(e);
if (container) {
d.container = container;
onMouseWheel(e);
// can not get event target container
if (d.container) {
onDblClick(e);
}
}
},
dblclick: {
touchstart: {
handler: (e) => {
// mock dblclick
const now = Date.now();
if (now - previousTouch < 400) {
const container = getEventTargetContainer(e);
if (container) {
d.container = container;
onDblClick(e);
}
}
previousTouch = now;
},
options: {
passive: false
}
}
};
const initEvents = () => {
const $el = el.value;
Util.bindEvents(globalEvents, $el);
const sme = new SME($el, {
proxy: (e) => {
const container = getEventTargetContainer(e);
if (container) {
d.container = container;
onDblClick(e);
return true;
}
}
}
});
sme.bind(SME.START, (e) => {
if (d.gutterEnabled) {
return;
}
const ed = e.detail;
const ee = ed.e;
const container = getEventTargetContainer(ee);
if (!container) {
return;
}
d.container = container;
d.dragEnabled = true;
onDragDown(ee);
});
sme.bind(SME.MOVE, (e) => {
if (d.dragEnabled) {
const ed = e.detail;
const ee = ed.e;
onDragMove(ee);
}
});
sme.bind(SME.END, (e) => {
d.dragEnabled = false;
const ed = e.detail;
const ee = ed.e;
onDragUp(ee);
});
};
const updateCurrentTabContainer = () => {
Expand Down Expand Up @@ -580,14 +641,13 @@ watch([
});
onMounted(() => {
Util.bindEvents(globalEvents, el.value);
updateCurrentTabContainer();
initEvents();
initGutter();
initOpacity(el.value);
initOpacity();
});
onUnmounted(() => {
Util.unbindEvents(windowEvents);
Util.unbindEvents(globalEvents);
});
Expand Down Expand Up @@ -703,7 +763,6 @@ onUnmounted(() => {
>
<VuiFlex gap="20px">
<VuiSwitch
v-if="!d.touch"
v-model="state.imageZoom"
class="mcr-comparison-zoom"
width="28px"
Expand Down Expand Up @@ -745,7 +804,7 @@ onUnmounted(() => {
Mouse Down/Up: switch view with neighbor
</li>
<li class="mcr-item">
Double Click: zoom to 100% or reset
Double Click: zoom in 100%/200% or reset
</li>
<li class="mcr-item">
Mouse Wheel: zoom in/out
Expand Down

0 comments on commit a384491

Please sign in to comment.