mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
remember pan and zoom
This commit is contained in:
parent
41fca4c4f3
commit
1d51f58447
@ -241,12 +241,30 @@ async function show() {
|
|||||||
|
|
||||||
jsPlumb.fire("jsPlumbDemoLoaded", instance);
|
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() {
|
function saveData() {
|
||||||
noteDetailService.saveNote();
|
noteDetailService.noteChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
function initNode(el) {
|
function initNode(el) {
|
||||||
|
@ -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){
|
(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
|
* Allows to drag and zoom svg elements
|
||||||
*/
|
*/
|
||||||
var wheel = require('wheel')
|
var wheel = require('wheel')
|
||||||
var animate = require('amator')
|
var animate = require('amator')
|
||||||
var kinetic = require('./lib/kinetic.js')
|
var kinetic = require('./lib/kinetic.js')
|
||||||
var createEvent = require('./lib/createEvent.js')
|
var createEvent = require('./lib/createEvent.js')
|
||||||
var preventTextSelection = require('./lib/textSelectionInterceptor.js')()
|
var preventTextSelection = require('./lib/textSelectionInterceptor.js')()
|
||||||
var Transform = require('./lib/transform.js');
|
var Transform = require('./lib/transform.js');
|
||||||
var makeSvgController = require('./lib/svgController.js')
|
var makeSvgController = require('./lib/svgController.js')
|
||||||
var makeDomController = require('./lib/domController.js')
|
var makeDomController = require('./lib/domController.js')
|
||||||
|
|
||||||
var defaultZoomSpeed = 0.065
|
var defaultZoomSpeed = 0.065
|
||||||
var defaultDoubleTapZoomSpeed = 1.75
|
var defaultDoubleTapZoomSpeed = 1.75
|
||||||
var doubleTapSpeedInMS = 300
|
var doubleTapSpeedInMS = 300
|
||||||
|
|
||||||
module.exports = createPanZoom
|
module.exports = createPanZoom
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a new instance of panzoom, so that an object can be panned and zoomed
|
* Creates a new instance of panzoom, so that an object can be panned and zoomed
|
||||||
*
|
*
|
||||||
* @param {DOMElement} domElement where panzoom should be attached.
|
* @param {DOMElement} domElement where panzoom should be attached.
|
||||||
* @param {Object} options that configure behavior.
|
* @param {Object} options that configure behavior.
|
||||||
*/
|
*/
|
||||||
function createPanZoom(domElement, options) {
|
function createPanZoom(domElement, options) {
|
||||||
options = options || {}
|
options = options || {}
|
||||||
|
|
||||||
var domController = options.controller
|
var domController = options.controller
|
||||||
@ -54,6 +56,7 @@ function createPanZoom(domElement, options) {
|
|||||||
domController.initTransform(transform)
|
domController.initTransform(transform)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var filterKey = typeof options.filterKey === 'function' ? options.filterKey : noop;
|
||||||
var realPinch = typeof options.realPinch === 'boolean' ? options.realPinch : false
|
var realPinch = typeof options.realPinch === 'boolean' ? options.realPinch : false
|
||||||
var bounds = options.bounds
|
var bounds = options.bounds
|
||||||
var maxZoom = typeof options.maxZoom === 'number' ? options.maxZoom : Number.POSITIVE_INFINITY
|
var maxZoom = typeof options.maxZoom === 'number' ? options.maxZoom : Number.POSITIVE_INFINITY
|
||||||
@ -126,7 +129,6 @@ function createPanZoom(domElement, options) {
|
|||||||
|
|
||||||
function resume() {
|
function resume() {
|
||||||
if (paused) {
|
if (paused) {
|
||||||
console.log('resujme')
|
|
||||||
listenForEvents()
|
listenForEvents()
|
||||||
paused = false
|
paused = false
|
||||||
}
|
}
|
||||||
@ -461,6 +463,11 @@ function createPanZoom(domElement, options) {
|
|||||||
z = -1 // `=` - zoom in (equal sign on US layout is under `+`)
|
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) {
|
if (x || y) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
@ -484,7 +491,9 @@ function createPanZoom(domElement, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onTouch(e) {
|
function onTouch(e) {
|
||||||
|
// let the override the touch behavior
|
||||||
beforeTouch(e);
|
beforeTouch(e);
|
||||||
|
|
||||||
if (e.touches.length === 1) {
|
if (e.touches.length === 1) {
|
||||||
return handleSingleFingerTouch(e, e.touches[0])
|
return handleSingleFingerTouch(e, e.touches[0])
|
||||||
} else if (e.touches.length === 2) {
|
} else if (e.touches.length === 2) {
|
||||||
@ -506,6 +515,17 @@ function createPanZoom(domElement, options) {
|
|||||||
e.preventDefault()
|
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) {
|
function handleSingleFingerTouch(e) {
|
||||||
var touch = e.touches[0]
|
var touch = e.touches[0]
|
||||||
var offset = getOffsetXY(touch)
|
var offset = getOffsetXY(touch)
|
||||||
@ -599,11 +619,9 @@ function createPanZoom(domElement, options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onDoubleClick(e) {
|
function onDoubleClick(e) {
|
||||||
|
beforeDoubleClick(e);
|
||||||
var offset = getOffsetXY(e)
|
var offset = getOffsetXY(e)
|
||||||
smoothZoom(offset.x, offset.y, zoomDoubleClickSpeed)
|
smoothZoom(offset.x, offset.y, zoomDoubleClickSpeed)
|
||||||
|
|
||||||
e.preventDefault()
|
|
||||||
e.stopPropagation()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseDown(e) {
|
function onMouseDown(e) {
|
||||||
@ -757,11 +775,11 @@ function createPanZoom(domElement, options) {
|
|||||||
var event = createEvent(name)
|
var event = createEvent(name)
|
||||||
domElement.dispatchEvent(event)
|
domElement.dispatchEvent(event)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function noop() { }
|
function noop() { }
|
||||||
|
|
||||||
function validateBounds(bounds) {
|
function validateBounds(bounds) {
|
||||||
var boundsType = typeof bounds
|
var boundsType = typeof bounds
|
||||||
if (boundsType === 'undefined' || boundsType === 'boolean') return // this is okay
|
if (boundsType === 'undefined' || boundsType === 'boolean') return // this is okay
|
||||||
// otherwise need to be more thorough:
|
// 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: ' +
|
if (!validBounds) throw new Error('Bounds object is not valid. It can be: ' +
|
||||||
'undefined, boolean (true|false) or an object {left, top, right, bottom}')
|
'undefined, boolean (true|false) or an object {left, top, right, bottom}')
|
||||||
}
|
}
|
||||||
|
|
||||||
function isNumber(x) {
|
function isNumber(x) {
|
||||||
return Number.isFinite(x)
|
return Number.isFinite(x)
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE 11 does not support isNaN:
|
// IE 11 does not support isNaN:
|
||||||
function isNaN(value) {
|
function isNaN(value) {
|
||||||
if (Number.isNaN) {
|
if (Number.isNaN) {
|
||||||
return Number.isNaN(value)
|
return Number.isNaN(value)
|
||||||
}
|
}
|
||||||
|
|
||||||
return value !== value
|
return value !== value
|
||||||
}
|
}
|
||||||
|
|
||||||
function rigidScroll() {
|
function rigidScroll() {
|
||||||
return {
|
return {
|
||||||
start: noop,
|
start: noop,
|
||||||
stop: noop,
|
stop: noop,
|
||||||
cancel: noop
|
cancel: noop
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function autoRun() {
|
function autoRun() {
|
||||||
if (typeof document === 'undefined') return
|
if (typeof document === 'undefined') return
|
||||||
|
|
||||||
var scripts = document.getElementsByTagName('script');
|
var scripts = document.getElementsByTagName('script');
|
||||||
@ -860,20 +878,20 @@ function autoRun() {
|
|||||||
var value = JSON.parse(attr.value);
|
var value = JSON.parse(attr.value);
|
||||||
return {name: name, value: 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){
|
},{"./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 */
|
/* global Event */
|
||||||
module.exports = createEvent;
|
module.exports = createEvent;
|
||||||
|
|
||||||
var isIE = typeof Event !== 'function'
|
var isIE = typeof Event !== 'function'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructs custom event. Works in IE too
|
* Constructs custom event. Works in IE too
|
||||||
*/
|
*/
|
||||||
function createEvent(name) {
|
function createEvent(name) {
|
||||||
if (isIE) {
|
if (isIE) {
|
||||||
var evt = document.createEvent('CustomEvent')
|
var evt = document.createEvent('CustomEvent')
|
||||||
evt.initCustomEvent(name, true, true, undefined)
|
evt.initCustomEvent(name, true, true, undefined)
|
||||||
@ -883,12 +901,12 @@ function createEvent(name) {
|
|||||||
bubbles: true
|
bubbles: true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},{}],3:[function(require,module,exports){
|
},{}],3:[function(require,module,exports){
|
||||||
module.exports = makeDomController
|
module.exports = makeDomController
|
||||||
|
|
||||||
function makeDomController(domElement) {
|
function makeDomController(domElement) {
|
||||||
var elementValid = (domElement instanceof HTMLElement)
|
var elementValid = (domElement instanceof HTMLElement)
|
||||||
if (!elementValid) {
|
if (!elementValid) {
|
||||||
throw new Error('svg element is required for svg.panzoom to work')
|
throw new Error('svg element is required for svg.panzoom to work')
|
||||||
@ -934,15 +952,15 @@ function makeDomController(domElement) {
|
|||||||
transform.scale + ', ' +
|
transform.scale + ', ' +
|
||||||
transform.x + ', ' + transform.y + ')'
|
transform.x + ', ' + transform.y + ')'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},{}],4:[function(require,module,exports){
|
},{}],4:[function(require,module,exports){
|
||||||
/**
|
/**
|
||||||
* Allows smooth kinetic scrolling of the surface
|
* 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') {
|
if (typeof settings !== 'object') {
|
||||||
// setting could come as boolean, we should ignore it, and use an object.
|
// setting could come as boolean, we should ignore it, and use an object.
|
||||||
settings = {}
|
settings = {}
|
||||||
@ -1056,12 +1074,12 @@ function kinetic(getPoint, scroll, settings) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},{}],5:[function(require,module,exports){
|
},{}],5:[function(require,module,exports){
|
||||||
module.exports = makeSvgController
|
module.exports = makeSvgController
|
||||||
|
|
||||||
function makeSvgController(svgElement) {
|
function makeSvgController(svgElement) {
|
||||||
var elementValid = (svgElement instanceof SVGElement)
|
var elementValid = (svgElement instanceof SVGElement)
|
||||||
if (!elementValid) {
|
if (!elementValid) {
|
||||||
throw new Error('svg element is required for svg.panzoom to work')
|
throw new Error('svg element is required for svg.panzoom to work')
|
||||||
@ -1119,14 +1137,14 @@ function makeSvgController(svgElement) {
|
|||||||
transform.scale + ' ' +
|
transform.scale + ' ' +
|
||||||
transform.x + ' ' + transform.y + ')')
|
transform.x + ' ' + transform.y + ')')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},{}],6:[function(require,module,exports){
|
},{}],6:[function(require,module,exports){
|
||||||
/**
|
/**
|
||||||
* Disallows selecting text.
|
* Disallows selecting text.
|
||||||
*/
|
*/
|
||||||
module.exports = createTextSelectionInterceptor
|
module.exports = createTextSelectionInterceptor
|
||||||
|
|
||||||
function createTextSelectionInterceptor() {
|
function createTextSelectionInterceptor() {
|
||||||
var dragObject
|
var dragObject
|
||||||
var prevSelectStart
|
var prevSelectStart
|
||||||
var prevDragStart
|
var prevDragStart
|
||||||
@ -1150,41 +1168,41 @@ function createTextSelectionInterceptor() {
|
|||||||
window.document.onselectstart = prevSelectStart
|
window.document.onselectstart = prevSelectStart
|
||||||
if (dragObject) dragObject.ondragstart = prevDragStart
|
if (dragObject) dragObject.ondragstart = prevDragStart
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function disabled(e) {
|
function disabled(e) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
},{}],7:[function(require,module,exports){
|
},{}],7:[function(require,module,exports){
|
||||||
module.exports = Transform;
|
module.exports = Transform;
|
||||||
|
|
||||||
function Transform() {
|
function Transform() {
|
||||||
this.x = 0;
|
this.x = 0;
|
||||||
this.y = 0;
|
this.y = 0;
|
||||||
this.scale = 1;
|
this.scale = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
},{}],8:[function(require,module,exports){
|
},{}],8:[function(require,module,exports){
|
||||||
var BezierEasing = require('bezier-easing')
|
var BezierEasing = require('bezier-easing')
|
||||||
|
|
||||||
// Predefined set of animations. Similar to CSS easing functions
|
// Predefined set of animations. Similar to CSS easing functions
|
||||||
var animations = {
|
var animations = {
|
||||||
ease: BezierEasing(0.25, 0.1, 0.25, 1),
|
ease: BezierEasing(0.25, 0.1, 0.25, 1),
|
||||||
easeIn: BezierEasing(0.42, 0, 1, 1),
|
easeIn: BezierEasing(0.42, 0, 1, 1),
|
||||||
easeOut: BezierEasing(0, 0, 0.58, 1),
|
easeOut: BezierEasing(0, 0, 0.58, 1),
|
||||||
easeInOut: BezierEasing(0.42, 0, 0.58, 1),
|
easeInOut: BezierEasing(0.42, 0, 0.58, 1),
|
||||||
linear: BezierEasing(0, 0, 1, 1)
|
linear: BezierEasing(0, 0, 1, 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
module.exports = animate;
|
module.exports = animate;
|
||||||
module.exports.makeAggregateRaf = makeAggregateRaf;
|
module.exports.makeAggregateRaf = makeAggregateRaf;
|
||||||
module.exports.sharedScheduler = makeAggregateRaf();
|
module.exports.sharedScheduler = makeAggregateRaf();
|
||||||
|
|
||||||
|
|
||||||
function animate(source, target, options) {
|
function animate(source, target, options) {
|
||||||
var start = Object.create(null)
|
var start = Object.create(null)
|
||||||
var diff = Object.create(null)
|
var diff = Object.create(null)
|
||||||
options = options || {}
|
options = options || {}
|
||||||
@ -1244,11 +1262,11 @@ function animate(source, target, options) {
|
|||||||
source[key] = diff[key] * t + start[key]
|
source[key] = diff[key] * t + start[key]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function noop() { }
|
function noop() { }
|
||||||
|
|
||||||
function getScheduler(scheduler) {
|
function getScheduler(scheduler) {
|
||||||
if (!scheduler) {
|
if (!scheduler) {
|
||||||
var canRaf = typeof window !== 'undefined' && window.requestAnimationFrame
|
var canRaf = typeof window !== 'undefined' && window.requestAnimationFrame
|
||||||
return canRaf ? rafScheduler() : timeoutScheduler()
|
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')
|
if (typeof scheduler.cancel !== 'function') throw new Error('Scheduler is supposed to have cancel(handle) function')
|
||||||
|
|
||||||
return scheduler
|
return scheduler
|
||||||
}
|
}
|
||||||
|
|
||||||
function rafScheduler() {
|
function rafScheduler() {
|
||||||
return {
|
return {
|
||||||
next: window.requestAnimationFrame.bind(window),
|
next: window.requestAnimationFrame.bind(window),
|
||||||
cancel: window.cancelAnimationFrame.bind(window)
|
cancel: window.cancelAnimationFrame.bind(window)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function timeoutScheduler() {
|
function timeoutScheduler() {
|
||||||
return {
|
return {
|
||||||
next: function(cb) {
|
next: function(cb) {
|
||||||
return setTimeout(cb, 1000/60)
|
return setTimeout(cb, 1000/60)
|
||||||
@ -1275,9 +1293,9 @@ function timeoutScheduler() {
|
|||||||
return clearTimeout(id)
|
return clearTimeout(id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function makeAggregateRaf() {
|
function makeAggregateRaf() {
|
||||||
var frontBuffer = new Set();
|
var frontBuffer = new Set();
|
||||||
var backBuffer = new Set();
|
var backBuffer = new Set();
|
||||||
var frameToken = 0;
|
var frameToken = 0;
|
||||||
@ -1320,37 +1338,37 @@ function makeAggregateRaf() {
|
|||||||
function cancel(callback) {
|
function cancel(callback) {
|
||||||
backBuffer.delete(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
|
* https://github.com/gre/bezier-easing
|
||||||
* BezierEasing - use bezier curve for transition easing function
|
* BezierEasing - use bezier curve for transition easing function
|
||||||
* by Gaëtan Renaudeau 2014 - 2015 – MIT License
|
* by Gaëtan Renaudeau 2014 - 2015 – MIT License
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// These values are established by empiricism with tests (tradeoff: performance VS precision)
|
// These values are established by empiricism with tests (tradeoff: performance VS precision)
|
||||||
var NEWTON_ITERATIONS = 4;
|
var NEWTON_ITERATIONS = 4;
|
||||||
var NEWTON_MIN_SLOPE = 0.001;
|
var NEWTON_MIN_SLOPE = 0.001;
|
||||||
var SUBDIVISION_PRECISION = 0.0000001;
|
var SUBDIVISION_PRECISION = 0.0000001;
|
||||||
var SUBDIVISION_MAX_ITERATIONS = 10;
|
var SUBDIVISION_MAX_ITERATIONS = 10;
|
||||||
|
|
||||||
var kSplineTableSize = 11;
|
var kSplineTableSize = 11;
|
||||||
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
|
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 A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
|
||||||
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
|
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
|
||||||
function C (aA1) { return 3.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.
|
// 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.
|
// 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;
|
var currentX, currentT, i = 0;
|
||||||
do {
|
do {
|
||||||
currentT = aA + (aB - aA) / 2.0;
|
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);
|
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
|
||||||
return currentT;
|
return currentT;
|
||||||
}
|
}
|
||||||
|
|
||||||
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
|
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
|
||||||
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
|
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
|
||||||
var currentSlope = getSlope(aGuessT, mX1, mX2);
|
var currentSlope = getSlope(aGuessT, mX1, mX2);
|
||||||
if (currentSlope === 0.0) {
|
if (currentSlope === 0.0) {
|
||||||
@ -1374,13 +1392,13 @@ function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
|
|||||||
aGuessT -= currentX / currentSlope;
|
aGuessT -= currentX / currentSlope;
|
||||||
}
|
}
|
||||||
return aGuessT;
|
return aGuessT;
|
||||||
}
|
}
|
||||||
|
|
||||||
function LinearEasing (x) {
|
function LinearEasing (x) {
|
||||||
return 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)) {
|
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
|
||||||
throw new Error('bezier x values must be in [0, 1] range');
|
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);
|
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
|
* 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
|
* 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':
|
// by default we shortcut to 'addEventListener':
|
||||||
|
|
||||||
module.exports = addWheelListener;
|
module.exports = addWheelListener;
|
||||||
|
|
||||||
// But also expose "advanced" api with unsubscribe:
|
// But also expose "advanced" api with unsubscribe:
|
||||||
module.exports.addWheelListener = addWheelListener;
|
module.exports.addWheelListener = addWheelListener;
|
||||||
module.exports.removeWheelListener = removeWheelListener;
|
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);
|
typeof document !== 'undefined' && document);
|
||||||
|
|
||||||
function addWheelListener( elem, callback, useCapture ) {
|
function addWheelListener( elem, callback, useCapture ) {
|
||||||
_addWheelListener( elem, support, callback, useCapture );
|
_addWheelListener( elem, support, callback, useCapture );
|
||||||
|
|
||||||
// handle MozMousePixelScroll in older Firefox
|
// handle MozMousePixelScroll in older Firefox
|
||||||
if( support == "DOMMouseScroll" ) {
|
if( support == "DOMMouseScroll" ) {
|
||||||
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
|
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeWheelListener( elem, callback, useCapture ) {
|
function removeWheelListener( elem, callback, useCapture ) {
|
||||||
_removeWheelListener( elem, support, callback, useCapture );
|
_removeWheelListener( elem, support, callback, useCapture );
|
||||||
|
|
||||||
// handle MozMousePixelScroll in older Firefox
|
// handle MozMousePixelScroll in older Firefox
|
||||||
if( support == "DOMMouseScroll" ) {
|
if( support == "DOMMouseScroll" ) {
|
||||||
_removeWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
|
_removeWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: in theory this anonymous function may result in incorrect
|
// TODO: in theory this anonymous function may result in incorrect
|
||||||
// unsubscription in some browsers. But in practice, I don't think we should
|
// 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)
|
// 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 ) {
|
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
|
||||||
!originalEvent && ( originalEvent = window.event );
|
!originalEvent && ( originalEvent = window.event );
|
||||||
|
|
||||||
@ -1525,13 +1543,13 @@ function _addWheelListener( elem, eventName, callback, useCapture ) {
|
|||||||
return callback( event );
|
return callback( event );
|
||||||
|
|
||||||
}, useCapture || false );
|
}, useCapture || false );
|
||||||
}
|
}
|
||||||
|
|
||||||
function _removeWheelListener( elem, eventName, callback, useCapture ) {
|
function _removeWheelListener( elem, eventName, callback, useCapture ) {
|
||||||
elem[ _removeEventListener ]( prefix + eventName, callback, useCapture || false );
|
elem[ _removeEventListener ]( prefix + eventName, callback, useCapture || false );
|
||||||
}
|
}
|
||||||
|
|
||||||
function detectEventModel(window, document) {
|
function detectEventModel(window, document) {
|
||||||
if ( window && window.addEventListener ) {
|
if ( window && window.addEventListener ) {
|
||||||
_addEventListener = "addEventListener";
|
_addEventListener = "addEventListener";
|
||||||
_removeEventListener = "removeEventListener";
|
_removeEventListener = "removeEventListener";
|
||||||
@ -1549,7 +1567,7 @@ function detectEventModel(window, document) {
|
|||||||
} else {
|
} else {
|
||||||
support = "wheel";
|
support = "wheel";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},{}]},{},[1])(1)
|
},{}]},{},[1])(1)
|
||||||
});
|
});
|
Loading…
x
Reference in New Issue
Block a user