From 836517a9fe336385689f3a70ad7bb13f971cef66 Mon Sep 17 00:00:00 2001 From: Matias Volpe Date: Thu, 12 Jul 2018 09:11:18 -0300 Subject: [PATCH 1/2] Add ability to resize to PhotoViewer --- css/60_photos.css | 35 +++++++++++++++++++ modules/services/mapillary.js | 7 ++++ modules/ui/init.js | 64 ++++++++++++++++++++++++++++++++++- 3 files changed, 105 insertions(+), 1 deletion(-) diff --git a/css/60_photos.css b/css/60_photos.css index d1e84d79cf..d7f4adff5f 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -12,11 +12,46 @@ border-radius: 0; padding: 5px; position: absolute; + right: 5px; + top: 5px; + z-index: 50; +} + +#photoviewer button.resize-handle-xy { + border-radius: 0; + position: absolute; + top: 0; + right: 0; + z-index: 49; + cursor: nesw-resize; + height: 10px; + width: 10px; +} + +#photoviewer button.resize-handle-x { + border-radius: 0; + position: absolute; + top: 0; right: 0; + bottom: 0; + z-index: 48; + cursor: ew-resize; + height: auto; + width: 5px; +} + +#photoviewer button.resize-handle-y { + border-radius: 0; + position: absolute; top: 0; + right: 0; z-index: 48; + cursor: ns-resize; + height: 5px; + width: 100%; } + .photo-wrapper, .photo-wrapper img { width: 100%; diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index baed207b82..01aefaae21 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -431,6 +431,13 @@ export default { // load mapillary signs sprite var defs = context.container().select('defs'); defs.call(svgDefs(context).addSprites, ['mapillary-sprite']); + + // Register viewer resize handler + context.ui().on('photoviewerResize', function() { + if (_mlyViewer) { + _mlyViewer.resize(); + } + }); }, diff --git a/modules/ui/init.js b/modules/ui/init.js index 7e1d134fc4..e196d507f9 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -2,6 +2,7 @@ import { event as d3_event, select as d3_select } from 'd3-selection'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; @@ -13,6 +14,7 @@ import { modeBrowse } from '../modes'; import { services } from '../services'; import { svgDefs, svgIcon } from '../svg'; import { utilGetDimensions } from '../util/dimensions'; +import { utilRebind } from '../util'; import { uiAccount } from './account'; import { uiAttribution } from './attribution'; @@ -42,9 +44,46 @@ import { uiVersion } from './version'; import { uiZoom } from './zoom'; import { uiCmd } from './cmd'; +function buildResizeListener(target, eventName, dispatch, options) { + var resizeOnX = !!options.resizeOnX; + var resizeOnY = !!options.resizeOnY; + var startX; + var startY; + var startWidth; + var startHeight; + + function startResize() { + if (resizeOnX) { + target.style('width', (startWidth + d3_event.clientX - startX) + 'px'); + } + + if (resizeOnY) { + target.style('height', (startHeight + startY - d3_event.clientY) + 'px'); + } + + dispatch.call(eventName, target); + } + + function stopResize() { + d3_select(window) + .on('.' + eventName, null); + } + + return function initResize() { + startX = d3_event.clientX; + startY = d3_event.clientY; + startWidth = target.node().getBoundingClientRect().width; + startHeight = target.node().getBoundingClientRect().height; + + d3_select(window) + .on('mousemove.' + eventName, startResize, false) + .on('mouseup.' + eventName, stopResize, false); + }; +} export function uiInit(context) { var uiInitCounter = 0; + var dispatch = d3_dispatch('photoviewerResize'); function render(container) { @@ -256,6 +295,29 @@ export function uiInit(context) { .append('div') .call(svgIcon('#iD-icon-close')); + photoviewer + .append('button') + .attr('class', 'resize-handle-xy') + .on( + 'mousedown', + buildResizeListener(photoviewer, 'photoviewerResize', dispatch, { resizeOnX: true, resizeOnY: true }) + ); + + photoviewer + .append('button') + .attr('class', 'resize-handle-x') + .on( + 'mousedown', + buildResizeListener(photoviewer, 'photoviewerResize', dispatch, { resizeOnX: true }) + ); + + photoviewer + .append('button') + .attr('class', 'resize-handle-y') + .on( + 'mousedown', + buildResizeListener(photoviewer, 'photoviewerResize', dispatch, { resizeOnY: true }) + ); window.onbeforeunload = function() { return context.save(); @@ -370,5 +432,5 @@ export function uiInit(context) { ui.sidebar = uiSidebar(context); - return ui; + return utilRebind(ui, dispatch, 'on'); } From 0ea0749135838b54f1c8efc59b62d692e3273095 Mon Sep 17 00:00:00 2001 From: Matias Volpe Date: Fri, 13 Jul 2018 09:16:36 -0300 Subject: [PATCH 2/2] Add minimum resize height/width --- modules/ui/init.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/modules/ui/init.js b/modules/ui/init.js index e196d507f9..3e4c695c57 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -47,6 +47,8 @@ import { uiCmd } from './cmd'; 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 startX; var startY; var startWidth; @@ -54,11 +56,13 @@ function buildResizeListener(target, eventName, dispatch, options) { function startResize() { if (resizeOnX) { - target.style('width', (startWidth + d3_event.clientX - startX) + 'px'); + var newWidth = Math.max(minWidth, startWidth + d3_event.clientX - startX); + target.style('width', newWidth + 'px'); } if (resizeOnY) { - target.style('height', (startHeight + startY - d3_event.clientY) + 'px'); + var newHeight = Math.max(minHeight, startHeight + startY - d3_event.clientY); + target.style('height', newHeight + 'px'); } dispatch.call(eventName, target);