CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 21:48:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use pointer events for resizing the photoviewer on supported devices (re: #5505)

Browse Source
This commit is contained in:
Quincy Morgan
2020-05-08 12:01:38 -07:00
parent 77061e9c6c
commit a781847d6a
1 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/photoviewer.js
+40 -7
View File
@@ -13,6 +13,8 @@ export function uiPhotoviewer(context) {
var dispatch = d3_dispatch('resize');
var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse';
function photoviewer(selection) {
selection
.append('button')
@@ -25,27 +27,34 @@ export function uiPhotoviewer(context) {
.append('div')
.call(svgIcon('#iD-icon-close'));
function preventDefault() {
d3_event.preventDefault();
}
selection
.append('button')
.attr('class', 'resize-handle-xy')
.on('touchstart touchdown touchend', preventDefault)
.on(
'mousedown',
_pointerPrefix + 'down',
buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true, resizeOnY: true })
);
selection
.append('button')
.attr('class', 'resize-handle-x')
.on('touchstart touchdown touchend', preventDefault)
.on(
'mousedown',
_pointerPrefix + 'down',
buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true })
);
selection
.append('button')
.attr('class', 'resize-handle-y')
.on('touchstart touchdown touchend', preventDefault)
.on(
'mousedown',
_pointerPrefix + 'down',
buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true })
);
@@ -54,16 +63,23 @@ export function uiPhotoviewer(context) {
services.openstreetcam.loadViewer(context);
function buildResizeListener(target, eventName, dispatch, options) {
var resizeOnX = !!options.resizeOnX;
var resizeOnY = !!options.resizeOnY;
var minHeight = options.minHeight || 240;
var minWidth = options.minWidth || 320;
var pointerId;
var startX;
var startY;
var startWidth;
var startHeight;
function startResize() {
if (pointerId !== (d3_event.pointerId || 'mouse')) return;
d3_event.preventDefault();
d3_event.stopPropagation();
var mapSize = context.map().dimensions();
if (resizeOnX) {
@@ -86,19 +102,36 @@ export function uiPhotoviewer(context) {
}
function stopResize() {
if (pointerId !== (d3_event.pointerId || 'mouse')) return;
d3_event.preventDefault();
d3_event.stopPropagation();
// remove all the listeners we added
d3_select(window)
.on('.' + eventName, null);
}
return function initResize() {
d3_event.preventDefault();
d3_event.stopPropagation();
pointerId = d3_event.pointerId || 'mouse';
startX = d3_event.clientX;
startY = d3_event.clientY;
startWidth = target.node().getBoundingClientRect().width;
startHeight = target.node().getBoundingClientRect().height;
var targetRect = target.node().getBoundingClientRect();
startWidth = targetRect.width;
startHeight = targetRect.height;
d3_select(window)
.on('mousemove.' + eventName, startResize, false)
.on('mouseup.' + eventName, stopResize, false);
.on(_pointerPrefix + 'move.' + eventName, startResize, false)
.on(_pointerPrefix + 'up.' + eventName, stopResize, false);
if (_pointerPrefix === 'pointer') {
d3_select(window)
.on('pointercancel.' + eventName, stopResize, false);
}
};
}
}