remember pan and zoom

This commit is contained in:
azivner 2018-10-25 15:45:14 +02:00
parent 41fca4c4f3
commit 1d51f58447
2 changed files with 1511 additions and 1475 deletions

View File

@ -241,12 +241,30 @@ async function show() {
jsPlumb.fire("jsPlumbDemoLoaded", instance);
panzoom($relationMapCanvas[0]);
const pz = panzoom($relationMapCanvas[0], {
maxZoom: 2,
minZoom: 0.1
});
if (mapData.transform) {
pz.moveTo(mapData.transform.x, mapData.transform.y);
pz.zoomTo(0, 0, mapData.transform.scale);
}
$relationMapCanvas[0].addEventListener('zoom', function(e) {
mapData.transform = pz.getTransform();
saveData();
});
$relationMapCanvas[0].addEventListener('panend', function(e) {
mapData.transform = pz.getTransform();
saveData();
}, true);
});
}
function saveData() {
noteDetailService.saveNote();
noteDetailService.noteChanged();
}
function initNode(el) {

View File

@ -1,30 +1,32 @@
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.panzoom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/* globals SVGElement */
/**
'use strict';
/* globals SVGElement */
/**
* Allows to drag and zoom svg elements
*/
var wheel = require('wheel')
var animate = require('amator')
var kinetic = require('./lib/kinetic.js')
var createEvent = require('./lib/createEvent.js')
var preventTextSelection = require('./lib/textSelectionInterceptor.js')()
var Transform = require('./lib/transform.js');
var makeSvgController = require('./lib/svgController.js')
var makeDomController = require('./lib/domController.js')
var wheel = require('wheel')
var animate = require('amator')
var kinetic = require('./lib/kinetic.js')
var createEvent = require('./lib/createEvent.js')
var preventTextSelection = require('./lib/textSelectionInterceptor.js')()
var Transform = require('./lib/transform.js');
var makeSvgController = require('./lib/svgController.js')
var makeDomController = require('./lib/domController.js')
var defaultZoomSpeed = 0.065
var defaultDoubleTapZoomSpeed = 1.75
var doubleTapSpeedInMS = 300
var defaultZoomSpeed = 0.065
var defaultDoubleTapZoomSpeed = 1.75
var doubleTapSpeedInMS = 300
module.exports = createPanZoom
module.exports = createPanZoom
/**
/**
* Creates a new instance of panzoom, so that an object can be panned and zoomed
*
* @param {DOMElement} domElement where panzoom should be attached.
* @param {Object} options that configure behavior.
*/
function createPanZoom(domElement, options) {
function createPanZoom(domElement, options) {
options = options || {}
var domController = options.controller
@ -54,6 +56,7 @@ function createPanZoom(domElement, options) {
domController.initTransform(transform)
}
var filterKey = typeof options.filterKey === 'function' ? options.filterKey : noop;
var realPinch = typeof options.realPinch === 'boolean' ? options.realPinch : false
var bounds = options.bounds
var maxZoom = typeof options.maxZoom === 'number' ? options.maxZoom : Number.POSITIVE_INFINITY
@ -126,7 +129,6 @@ function createPanZoom(domElement, options) {
function resume() {
if (paused) {
console.log('resujme')
listenForEvents()
paused = false
}
@ -461,6 +463,11 @@ function createPanZoom(domElement, options) {
z = -1 // `=` - zoom in (equal sign on US layout is under `+`)
}
if (filterKey(e, x, y, z)) {
// They don't want us to handle the key: https://github.com/anvaka/panzoom/issues/45
return;
}
if (x || y) {
e.preventDefault()
e.stopPropagation()
@ -484,7 +491,9 @@ function createPanZoom(domElement, options) {
}
function onTouch(e) {
// let the override the touch behavior
beforeTouch(e);
if (e.touches.length === 1) {
return handleSingleFingerTouch(e, e.touches[0])
} else if (e.touches.length === 2) {
@ -506,6 +515,17 @@ function createPanZoom(domElement, options) {
e.preventDefault()
}
function beforeDoubleClick(e) {
if (options.onDoubleClick && !options.onDoubleClick(e)) {
// if they return `false` from onTouch, we don't want to stop
// events propagation. Fixes https://github.com/anvaka/panzoom/issues/46
return
}
e.preventDefault()
e.stopPropagation()
}
function handleSingleFingerTouch(e) {
var touch = e.touches[0]
var offset = getOffsetXY(touch)
@ -599,11 +619,9 @@ function createPanZoom(domElement, options) {
}
function onDoubleClick(e) {
beforeDoubleClick(e);
var offset = getOffsetXY(e)
smoothZoom(offset.x, offset.y, zoomDoubleClickSpeed)
e.preventDefault()
e.stopPropagation()
}
function onMouseDown(e) {
@ -757,11 +775,11 @@ function createPanZoom(domElement, options) {
var event = createEvent(name)
domElement.dispatchEvent(event)
}
}
}
function noop() { }
function noop() { }
function validateBounds(bounds) {
function validateBounds(bounds) {
var boundsType = typeof bounds
if (boundsType === 'undefined' || boundsType === 'boolean') return // this is okay
// otherwise need to be more thorough:
@ -770,31 +788,31 @@ function validateBounds(bounds) {
if (!validBounds) throw new Error('Bounds object is not valid. It can be: ' +
'undefined, boolean (true|false) or an object {left, top, right, bottom}')
}
}
function isNumber(x) {
function isNumber(x) {
return Number.isFinite(x)
}
}
// IE 11 does not support isNaN:
function isNaN(value) {
function isNaN(value) {
if (Number.isNaN) {
return Number.isNaN(value)
}
return value !== value
}
}
function rigidScroll() {
function rigidScroll() {
return {
start: noop,
stop: noop,
cancel: noop
}
}
}
function autoRun() {
function autoRun() {
if (typeof document === 'undefined') return
var scripts = document.getElementsByTagName('script');
@ -860,20 +878,20 @@ function autoRun() {
var value = JSON.parse(attr.value);
return {name: name, value: value};
}
}
}
autoRun();
autoRun();
},{"./lib/createEvent.js":2,"./lib/domController.js":3,"./lib/kinetic.js":4,"./lib/svgController.js":5,"./lib/textSelectionInterceptor.js":6,"./lib/transform.js":7,"amator":8,"wheel":10}],2:[function(require,module,exports){
/* global Event */
module.exports = createEvent;
},{"./lib/createEvent.js":2,"./lib/domController.js":3,"./lib/kinetic.js":4,"./lib/svgController.js":5,"./lib/textSelectionInterceptor.js":6,"./lib/transform.js":7,"amator":8,"wheel":10}],2:[function(require,module,exports){
/* global Event */
module.exports = createEvent;
var isIE = typeof Event !== 'function'
var isIE = typeof Event !== 'function'
/**
/**
* Constructs custom event. Works in IE too
*/
function createEvent(name) {
function createEvent(name) {
if (isIE) {
var evt = document.createEvent('CustomEvent')
evt.initCustomEvent(name, true, true, undefined)
@ -883,12 +901,12 @@ function createEvent(name) {
bubbles: true
})
}
}
}
},{}],3:[function(require,module,exports){
module.exports = makeDomController
},{}],3:[function(require,module,exports){
module.exports = makeDomController
function makeDomController(domElement) {
function makeDomController(domElement) {
var elementValid = (domElement instanceof HTMLElement)
if (!elementValid) {
throw new Error('svg element is required for svg.panzoom to work')
@ -934,15 +952,15 @@ function makeDomController(domElement) {
transform.scale + ', ' +
transform.x + ', ' + transform.y + ')'
}
}
}
},{}],4:[function(require,module,exports){
/**
},{}],4:[function(require,module,exports){
/**
* Allows smooth kinetic scrolling of the surface
*/
module.exports = kinetic;
module.exports = kinetic;
function kinetic(getPoint, scroll, settings) {
function kinetic(getPoint, scroll, settings) {
if (typeof settings !== 'object') {
// setting could come as boolean, we should ignore it, and use an object.
settings = {}
@ -1056,12 +1074,12 @@ function kinetic(getPoint, scroll, settings) {
}
}
}
}
},{}],5:[function(require,module,exports){
module.exports = makeSvgController
},{}],5:[function(require,module,exports){
module.exports = makeSvgController
function makeSvgController(svgElement) {
function makeSvgController(svgElement) {
var elementValid = (svgElement instanceof SVGElement)
if (!elementValid) {
throw new Error('svg element is required for svg.panzoom to work')
@ -1119,14 +1137,14 @@ function makeSvgController(svgElement) {
transform.scale + ' ' +
transform.x + ' ' + transform.y + ')')
}
}
},{}],6:[function(require,module,exports){
/**
}
},{}],6:[function(require,module,exports){
/**
* Disallows selecting text.
*/
module.exports = createTextSelectionInterceptor
module.exports = createTextSelectionInterceptor
function createTextSelectionInterceptor() {
function createTextSelectionInterceptor() {
var dragObject
var prevSelectStart
var prevDragStart
@ -1150,41 +1168,41 @@ function createTextSelectionInterceptor() {
window.document.onselectstart = prevSelectStart
if (dragObject) dragObject.ondragstart = prevDragStart
}
}
}
function disabled(e) {
function disabled(e) {
e.stopPropagation()
return false
}
}
},{}],7:[function(require,module,exports){
module.exports = Transform;
},{}],7:[function(require,module,exports){
module.exports = Transform;
function Transform() {
function Transform() {
this.x = 0;
this.y = 0;
this.scale = 1;
}
}
},{}],8:[function(require,module,exports){
var BezierEasing = require('bezier-easing')
},{}],8:[function(require,module,exports){
var BezierEasing = require('bezier-easing')
// Predefined set of animations. Similar to CSS easing functions
var animations = {
var animations = {
ease: BezierEasing(0.25, 0.1, 0.25, 1),
easeIn: BezierEasing(0.42, 0, 1, 1),
easeOut: BezierEasing(0, 0, 0.58, 1),
easeInOut: BezierEasing(0.42, 0, 0.58, 1),
linear: BezierEasing(0, 0, 1, 1)
}
}
module.exports = animate;
module.exports.makeAggregateRaf = makeAggregateRaf;
module.exports.sharedScheduler = makeAggregateRaf();
module.exports = animate;
module.exports.makeAggregateRaf = makeAggregateRaf;
module.exports.sharedScheduler = makeAggregateRaf();
function animate(source, target, options) {
function animate(source, target, options) {
var start = Object.create(null)
var diff = Object.create(null)
options = options || {}
@ -1244,11 +1262,11 @@ function animate(source, target, options) {
source[key] = diff[key] * t + start[key]
})
}
}
}
function noop() { }
function noop() { }
function getScheduler(scheduler) {
function getScheduler(scheduler) {
if (!scheduler) {
var canRaf = typeof window !== 'undefined' && window.requestAnimationFrame
return canRaf ? rafScheduler() : timeoutScheduler()
@ -1257,16 +1275,16 @@ function getScheduler(scheduler) {
if (typeof scheduler.cancel !== 'function') throw new Error('Scheduler is supposed to have cancel(handle) function')
return scheduler
}
}
function rafScheduler() {
function rafScheduler() {
return {
next: window.requestAnimationFrame.bind(window),
cancel: window.cancelAnimationFrame.bind(window)
}
}
}
function timeoutScheduler() {
function timeoutScheduler() {
return {
next: function(cb) {
return setTimeout(cb, 1000/60)
@ -1275,9 +1293,9 @@ function timeoutScheduler() {
return clearTimeout(id)
}
}
}
}
function makeAggregateRaf() {
function makeAggregateRaf() {
var frontBuffer = new Set();
var backBuffer = new Set();
var frameToken = 0;
@ -1320,37 +1338,37 @@ function makeAggregateRaf() {
function cancel(callback) {
backBuffer.delete(callback);
}
}
}
},{"bezier-easing":9}],9:[function(require,module,exports){
/**
},{"bezier-easing":9}],9:[function(require,module,exports){
/**
* https://github.com/gre/bezier-easing
* BezierEasing - use bezier curve for transition easing function
* by Gaëtan Renaudeau 2014 - 2015 MIT License
*/
// These values are established by empiricism with tests (tradeoff: performance VS precision)
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;
var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
var float32ArraySupported = typeof Float32Array === 'function';
var float32ArraySupported = typeof Float32Array === 'function';
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C (aA1) { return 3.0 * aA1; }
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C (aA1) { return 3.0 * aA1; }
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
function binarySubdivide (aX, aA, aB, mX1, mX2) {
function binarySubdivide (aX, aA, aB, mX1, mX2) {
var currentX, currentT, i = 0;
do {
currentT = aA + (aB - aA) / 2.0;
@ -1362,9 +1380,9 @@ function binarySubdivide (aX, aA, aB, mX1, mX2) {
}
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
return currentT;
}
}
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
var currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope === 0.0) {
@ -1374,13 +1392,13 @@ function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
}
function LinearEasing (x) {
function LinearEasing (x) {
return x;
}
}
module.exports = function bezier (mX1, mY1, mX2, mY2) {
module.exports = function bezier (mX1, mY1, mX2, mY2) {
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
throw new Error('bezier x values must be in [0, 1] range');
}
@ -1429,10 +1447,10 @@ module.exports = function bezier (mX1, mY1, mX2, mY2) {
}
return calcBezier(getTForX(x), mY1, mY2);
};
};
};
},{}],10:[function(require,module,exports){
/**
},{}],10:[function(require,module,exports){
/**
* This module unifies handling of mouse whee event across different browsers
*
* See https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel?redirectlocale=en-US&redirectslug=DOM%2FMozilla_event_reference%2Fwheel
@ -1448,40 +1466,40 @@ module.exports = function bezier (mX1, mY1, mX2, mY2) {
*/
// by default we shortcut to 'addEventListener':
module.exports = addWheelListener;
module.exports = addWheelListener;
// But also expose "advanced" api with unsubscribe:
module.exports.addWheelListener = addWheelListener;
module.exports.removeWheelListener = removeWheelListener;
module.exports.addWheelListener = addWheelListener;
module.exports.removeWheelListener = removeWheelListener;
var prefix = "", _addEventListener, _removeEventListener, support;
var prefix = "", _addEventListener, _removeEventListener, support;
detectEventModel(typeof window !== 'undefined' && window,
detectEventModel(typeof window !== 'undefined' && window,
typeof document !== 'undefined' && document);
function addWheelListener( elem, callback, useCapture ) {
function addWheelListener( elem, callback, useCapture ) {
_addWheelListener( elem, support, callback, useCapture );
// handle MozMousePixelScroll in older Firefox
if( support == "DOMMouseScroll" ) {
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
}
}
}
function removeWheelListener( elem, callback, useCapture ) {
function removeWheelListener( elem, callback, useCapture ) {
_removeWheelListener( elem, support, callback, useCapture );
// handle MozMousePixelScroll in older Firefox
if( support == "DOMMouseScroll" ) {
_removeWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
}
}
}
// TODO: in theory this anonymous function may result in incorrect
// 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 ) {
function _addWheelListener( elem, eventName, callback, useCapture ) {
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
!originalEvent && ( originalEvent = window.event );
@ -1525,13 +1543,13 @@ function _addWheelListener( elem, eventName, callback, useCapture ) {
return callback( event );
}, useCapture || false );
}
}
function _removeWheelListener( elem, eventName, callback, useCapture ) {
function _removeWheelListener( elem, eventName, callback, useCapture ) {
elem[ _removeEventListener ]( prefix + eventName, callback, useCapture || false );
}
}
function detectEventModel(window, document) {
function detectEventModel(window, document) {
if ( window && window.addEventListener ) {
_addEventListener = "addEventListener";
_removeEventListener = "removeEventListener";
@ -1549,7 +1567,7 @@ function detectEventModel(window, document) {
} else {
support = "wheel";
}
}
}
},{}]},{},[1])(1)
},{}]},{},[1])(1)
});