How to use panzoom - 10 common examples
To help you get started, we’ve selected a few panzoom examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
anvaka / sayit / src / lib / createRenderer.js View on Github 
export default function createRenderer(progress) {
const scene = document.querySelector('#scene');
const nodeContainer = scene.querySelector('#nodes');
const edgeContainer = scene.querySelector('#edges');
let lastPanTime = 0;
let lastTouchEndTime = 0;
let clickTimeout;
const panzoom = createPanZoom(scene);
const defaultRectangle = { left: -500, right: 500, top: -500, bottom: 500 };
panzoom.showRectangle(defaultRectangle);
// maps node id to node ui
let nodes = new Map();
let layout,
graph,
currentLayoutFrame = 0,
linkAnimator;
let textMeasure = createTextMeasure(scene);
bus.on('graph-ready', onGraphReady);
return {
render,
disposeprivate createPanZoom() {
if (!this.panZoomRootRef.current) {
return;
}
this.panZoomRootRefCurrent = this.panZoomRootRef.current;
this.panZoomComp = panzoom(this.panZoomRootRef.current, {
beforeWheel: (e) => {
// allow wheel-zoom only if ctrl is down.
return !e.ctrlKey;
},
smoothScroll: false,
});
if (this.props.setPanZoomComp) {
this.props.setPanZoomComp(this.panZoomComp, this.panZoomRootRef.current);
}
}export default function createRenderer(progress) {
const scene = document.querySelector('#scene');
const nodeContainer = scene.querySelector('#nodes');
const edgeContainer = scene.querySelector('#edges');
const hideTooltipArgs = {isVisible: false};
const panzoom = createPanZoom(scene);
const defaultRectangle = {left: -500, right: 500, top: -500, bottom: 500}
panzoom.showRectangle(defaultRectangle);
// maps node id to node ui
let nodes = new Map();
let layout, graph, currentLayoutFrame = 0, linkAnimator;
let textMeasure = createTextMeasure(scene);
bus.on('graph-ready', onGraphReady);
return {
render,
dispose
}
function dispose() {break;
case "object":
mediaPlayerVideoObjectLoaded(source, settings);
break;
}
// Fix video pausing after show animation completes
if (settings.mediatype == "video") $("video",card).on(videoFixEvents.join(" "), function (e) { }).one("suspend pause",function(){this.play()})
var effect = "";
effectCSS = "";
if (settings.animated == "true" && settings.effect != undefined) {
effect = JSON.parse(settings.effect);
if (effect.effect == "panzoom") {
effectCSS = " \
@keyframes panzoom { \
from { transform: scale(" + settings["panzoom.scale.from"] + ") " + settings["panzoom.offset.from"] + settings["panzoom.rotate"] + " } \
to { transform: scale(" + settings["panzoom.scale.to"] + ") " + settings["panzoom.offset.to"] + settings["panzoom.rotate"] + " } \
} \
\
.front { \
animation: panzoom " + settings["panzoom.interval"] + "s linear alternate infinite; \
} \
";
effect.effect = "fade";
}
}
try {
$("#panzoom")[0].innerHTML = effectCSS;
} catch(e) { }
// ToDo: Wait for images to finish rendering before start show
$("#rolodex").waitForImages().done(function(source, settings) {case "object":
mediaPlayerVideoObjectLoaded(source, settings);
break;
}
// Fix video pausing after show animation completes
if (settings.mediatype == "video") $("video",card).on(videoFixEvents.join(" "), function (e) { }).one("suspend pause",function(){this.play()})
var effect = "";
effectCSS = "";
if (settings.animated == "true" && settings.effect != undefined) {
effect = JSON.parse(settings.effect);
if (effect.effect == "panzoom") {
effectCSS = " \
@keyframes panzoom { \
from { transform: scale(" + settings["panzoom.scale.from"] + ") " + settings["panzoom.offset.from"] + settings["panzoom.rotate"] + " } \
to { transform: scale(" + settings["panzoom.scale.to"] + ") " + settings["panzoom.offset.to"] + settings["panzoom.rotate"] + " } \
} \
\
.front { \
animation: panzoom " + settings["panzoom.interval"] + "s linear alternate infinite; \
} \
";
effect.effect = "fade";
}
}
try {
$("#panzoom")[0].innerHTML = effectCSS;
} catch(e) { }
// ToDo: Wait for images to finish rendering before start show
$("#rolodex").waitForImages().done(function(source, settings) {
if (settings.animated == "true" && settings.effect != undefined) card.show(effect);// Fix video pausing after show animation completes
if (settings.mediatype == "video") $("video",card).on(videoFixEvents.join(" "), function (e) { }).one("suspend pause",function(){this.play()})
var effect = "";
effectCSS = "";
if (settings.animated == "true" && settings.effect != undefined) {
effect = JSON.parse(settings.effect);
if (effect.effect == "panzoom") {
effectCSS = " \
@keyframes panzoom { \
from { transform: scale(" + settings["panzoom.scale.from"] + ") " + settings["panzoom.offset.from"] + settings["panzoom.rotate"] + " } \
to { transform: scale(" + settings["panzoom.scale.to"] + ") " + settings["panzoom.offset.to"] + settings["panzoom.rotate"] + " } \
} \
\
.front { \
animation: panzoom " + settings["panzoom.interval"] + "s linear alternate infinite; \
} \
";
effect.effect = "fade";
}
}
try {
$("#panzoom")[0].innerHTML = effectCSS;
} catch(e) { }
// ToDo: Wait for images to finish rendering before start show
$("#rolodex").waitForImages().done(function(source, settings) {
if (settings.animated == "true" && settings.effect != undefined) card.show(effect);
else card.show("fade", 250);
while($("#rolodex .card").length > 2) {
first = $("#rolodex .card").first();
first.hide();function initPanzoom() {
let initializedPanzoom = makePanzoom(gl.canvas, {
realPinch: true,
zoomSpeed: 0.025,
controller: wglPanZoom(gl.canvas, updateBoundingBox)
});
return initializedPanzoom;
}getClientCoordinate,
getTransform,
getRoot,
removeChild,
setViewBox,
setClearColor,
dispose,
renderFrame,
getPixelRatio,
setPixelRatio
});
var wglController = wglPanZoom(canvas, sceneRoot, api);
var panzoom = makePanzoom(canvas, {
zoomSpeed: 0.025,
controller: wglController
});
sceneRoot.bindScene(api);
var disposeClick;
listenToEvents();
renderFrame();
return api;
function getPixelRatio() {
return pixelRatio;
}reset() {
this.$refs.content.removeAttribute('style');
if (this.pz) {
this.pz.dispose();
this.pz = undefined;
}
const opts = {
maxZoom: 5.0,
minZoom: 1.0,
smoothScroll: false
};
this.pz = panzoom(this.$refs.content, opts);
}
}mounted() {
const { scene } = this.$refs;
this.zoomHandle = panZoom(scene);
const rect = this.$el.getBoundingClientRect();
this.zoomHandle.moveTo(rect.width / 2, rect.height / 2);
this.initEvents(scene);
this.initializeGraph(this.graph);
},panzoom
Extensible, mobile friendly pan and zoom framework (supports DOM and SVG).
