diff --git a/libraries/panzoom.js b/libraries/panzoom.js index f9caf3cda..587851041 100644 --- a/libraries/panzoom.js +++ b/libraries/panzoom.js @@ -115,12 +115,16 @@ function createPanZoom(domElement, options) { zoomTo: publicZoomTo, zoomAbs: zoomAbs, smoothZoom: smoothZoom, - getTransform: getTransformModel, showRectangle: showRectangle, pause: pause, resume: resume, isPaused: isPaused, + + getTransform: getTransformModel, + getMinZoom: getMinZoom, + getMaxZoom: getMaxZoom, + getOwner: () => owner } eventify(api); @@ -216,6 +220,14 @@ function createPanZoom(domElement, options) { return transform } + function getMinZoom() { + return minZoom; + } + + function getMaxZoom() { + return maxZoom; + } + function getPoint() { return { x: transform.x, @@ -345,8 +357,14 @@ function createPanZoom(domElement, options) { transform.x = size.x - ratio * (size.x - transform.x) transform.y = size.y - ratio * (size.y - transform.y) - var transformAdjusted = keepTransformInsideBounds() - if (!transformAdjusted) transform.scale *= ratio + // TODO: https://github.com/anvaka/panzoom/issues/112 + if (bounds && boundsPadding === 1 && minZoom === 1) { + transform.scale *= ratio + keepTransformInsideBounds() + } else { + var transformAdjusted = keepTransformInsideBounds() + if (!transformAdjusted) transform.scale *= ratio + } triggerEvent('zoom') @@ -1308,7 +1326,7 @@ function makeAggregateRaf() { var t = backBuffer; backBuffer = frontBuffer; - frontBuffer = t; + frontBuffer = t; frontBuffer.forEach(function(callback) { callback(); @@ -1571,7 +1589,7 @@ function removeWheelListener( elem, callback, useCapture ) { // unsubscription in some browsers. But in practice, I don't think we should // worry too much about it (those browsers are on the way out) function _addWheelListener( elem, eventName, callback, useCapture ) { - elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function(originalEvent ) { + elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) { !originalEvent && ( originalEvent = window.event ); // create a normalized event object @@ -1613,10 +1631,7 @@ function _addWheelListener( elem, eventName, callback, useCapture ) { // it's time to fire the callback return callback( event ); - }, { - capture: useCapture || false , - passive: false - }); + }, useCapture || false ); } function _removeWheelListener( elem, eventName, callback, useCapture ) { diff --git a/src/public/javascripts/services/link_map.js b/src/public/javascripts/services/link_map.js index e6c961f89..22f18e49e 100644 --- a/src/public/javascripts/services/link_map.js +++ b/src/public/javascripts/services/link_map.js @@ -146,6 +146,10 @@ export default class LinkMap { $noteBox .css("left", (middleW + p.x * 100) + "px") .css("top", (middleH + p.y * 100) + "px"); + + if ($noteBox.hasClass("link-map-active-note")) { + this.moveToCenterOfElement($noteBox[0]); + } }, () => {}, () => {}, @@ -160,6 +164,21 @@ export default class LinkMap { setTimeout(() => this.renderer.stop(), 3000); } + moveToCenterOfElement(element) { + const elemBounds = element.getBoundingClientRect(); + const containerBounds = this.pzInstance.getOwner().getBoundingClientRect(); + + const centerX = -elemBounds.left + containerBounds.left + (containerBounds.width / 2) - (elemBounds.width / 2); + const centerY = -elemBounds.top + containerBounds.top + (containerBounds.height / 2) - (elemBounds.height / 2); + + const transform = this.pzInstance.getTransform(); + + const newX = transform.x + centerX; + const newY = transform.y + centerY; + + this.pzInstance.moveTo(newX, newY); + } + initPanZoom() { if (this.pzInstance) { return; diff --git a/src/public/stylesheets/link_map.css b/src/public/stylesheets/link_map.css index c36f59811..737f378e0 100644 --- a/src/public/stylesheets/link_map.css +++ b/src/public/stylesheets/link_map.css @@ -6,7 +6,7 @@ .link-map-container .note-box { padding: 8px; position: absolute !important; - background-color: var(--accented-background-color); + background-color: var(--main-background-color); color: var(--main-text-color); z-index: 4; border: 1px solid #666; @@ -37,7 +37,7 @@ } .link-map-active-note { - background-color: var(--more-accented-background-color) !important; + background-color: var(--accented-background-color) !important; } .link-map-container .jsplumb-connection-hover path {