96 строки
2.9 KiB
HTML
96 строки
2.9 KiB
HTML
<!--
|
|
Test page for manually testing the Query Plan classes
|
|
-->
|
|
<html>
|
|
|
|
<head>
|
|
<title>Query Plan Zoom test</title>
|
|
<script type="text/javascript">
|
|
mxForceIncludes = true;
|
|
mxBasePath = '../../src';
|
|
</script>
|
|
<script type="text/javascript" src="./src/js/graph.js"></script>
|
|
<script type="text/javascript" src="../../src/js/mxClient.js"></script>
|
|
<script type="text/javascript" src="./src/js/queryPlanSetup.js"></script>
|
|
<script type="text/javascript">
|
|
let queryPlan;
|
|
|
|
function main(container) {
|
|
var graph = getGraph();
|
|
|
|
var imageBasePath = './icons/';
|
|
var iconPaths = getIconPaths(imageBasePath);
|
|
var badgePaths = getBadgePaths(imageBasePath);
|
|
var collapseExpandPaths = getCollapseExpandPaths(imageBasePath);
|
|
|
|
let queryPlanConfiguration = {
|
|
container: container,
|
|
queryPlanGraph: graph,
|
|
iconPaths: iconPaths,
|
|
badgeIconPaths: badgePaths,
|
|
expandCollapsePaths: collapseExpandPaths
|
|
};
|
|
queryPlan = new azdataQueryPlan(queryPlanConfiguration);
|
|
queryPlan.enablePanning(false);
|
|
queryPlan.addZoomInRectListener();
|
|
|
|
let zoomInButton = document.getElementById('zoomInBtn');
|
|
zoomInButton.addEventListener('click', () => {
|
|
queryPlan.zoomIn();
|
|
zoomLevelInput.value = `${queryPlan.getZoomLevelPercentage()}`;
|
|
});
|
|
|
|
let zoomOutButton = document.getElementById('zoomOutBtn');
|
|
zoomOutButton.addEventListener('click', () => {
|
|
queryPlan.zoomOut();
|
|
zoomLevelInput.value = `${queryPlan.getZoomLevelPercentage()}`;
|
|
});
|
|
|
|
let zoomToFitButton = document.getElementById('zoomToFitBtn');
|
|
zoomToFitButton.addEventListener('click', () => {
|
|
queryPlan.zoomToFit();
|
|
zoomLevelInput.value = `${queryPlan.getZoomLevelPercentage()}`;
|
|
});
|
|
|
|
let zoomLevelInput = document.getElementById('zoomLevel');
|
|
zoomLevelInput.value = `${queryPlan.getZoomLevelPercentage()}`;
|
|
|
|
let zoomBtn = document.getElementById('zoomBtn');
|
|
zoomBtn.addEventListener('click', () => {
|
|
let enteredZoomLevel = zoomLevelInput.value;
|
|
queryPlan.zoomTo(enteredZoomLevel);
|
|
|
|
zoomLevelInput.value = `${queryPlan.getZoomLevelPercentage()}`;
|
|
});
|
|
};
|
|
|
|
</script>
|
|
<style>
|
|
#graphContainer {
|
|
position: relative;
|
|
overflow: scroll;
|
|
width: 800px;
|
|
height: 800px;
|
|
cursor: default;
|
|
border: 1px solid;
|
|
margin-top: 100px;
|
|
margin-left: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onload="main(document.getElementById('graphContainer'))">
|
|
<div id="graphContainer"></div>
|
|
<div style="position: absolute; overflow: visible; bottom: 50px; left: 8px;">
|
|
<button id="zoomInBtn" type="button" style="font-size:20px;">+</button>
|
|
<button id="zoomOutBtn" type="button" style="font-size:20px;">-</button>
|
|
<button id="zoomToFitBtn" type="button" style="font-size:20px;">To Fit</button>
|
|
|
|
<label for="zoomLevel" style="margin-left: 50px; font-size: 20px;">Zoom Level %: </label>
|
|
<input type="text" id="zoomLevel" name="zoom" style="font-size: 20px;">
|
|
<button id="zoomBtn" type="button" style="font-size: 20px;">Zoom</button>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |