d3ad6136ef
Split monolithic embedded JavaScript in overlay.html into dedicated modules: - tooltip.js: Custom tooltip functionality with interactive copy/paste mode - pipeline-navigation.js: Clickable pipeline-dot references for navigation - text-ellipsizer.js: Text ellipsizing with tooltip integration - svg-overlay-manager.js: Main coordinator orchestrating all functionality Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/9547>
108 lines
3.6 KiB
HTML
108 lines
3.6 KiB
HTML
<!--
|
|
Copyright (c) 2015 Mountainstorm
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
in the Software without restriction, including without limitation the rights
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in all
|
|
copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
SOFTWARE.
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/dist/bundle.css">
|
|
<link rel="stylesheet" href="/css/graphviz.svg.css">
|
|
</head>
|
|
|
|
<style>
|
|
.floating-rectangle {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
color: #000000;
|
|
border: 1px solid #d0d0d0;
|
|
padding: 10px;
|
|
z-index: 1000;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
}
|
|
|
|
.custom-tooltip {
|
|
position: absolute;
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
z-index: 10000;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
max-width: 400px;
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
-ms-user-select: text;
|
|
}
|
|
|
|
.custom-tooltip.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.custom-tooltip.interactive {
|
|
pointer-events: auto;
|
|
cursor: text;
|
|
border: 2px solid #555;
|
|
}
|
|
|
|
.custom-tooltip.interactive::after {
|
|
content: " (Text selected - Ctrl+C to copy)";
|
|
font-size: 10px;
|
|
color: #aaa;
|
|
font-style: italic;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<h1 style="text-align: center" id="title"> {{ TITLE }}</h1>
|
|
|
|
<div id="graph" class="dragscroll" style="width: 100%; height: 100%; overflow: scroll;"></div>
|
|
<div class="floating-rectangle" id="instructions">
|
|
Click node to highlight<br/>Shift-Ctrl-scroll or w/s to zoom<br/>Esc to unhighlight<br/>Double-click ellipsized text to copy
|
|
</div>
|
|
|
|
<div class="floating-rectangle" id="actions" style="top: auto; bottom: 100px; left: 10px;">
|
|
<button id="save-svg" class="btn btn-primary btn-sm" style="margin-right: 5px;">Save SVG</button>
|
|
</div>
|
|
|
|
<script src='/dist/bundle.js'></script>
|
|
<script type="text/javascript" src="/js/jquery.graphviz.svg.js"></script>
|
|
<script type="text/javascript" src="/js/tooltip.js"></script>
|
|
<script type="text/javascript" src="/js/pipeline-navigation.js"></script>
|
|
<script type="text/javascript" src="/js/text-ellipsizer.js"></script>
|
|
<script type="text/javascript" src="/js/svg-overlay-manager.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(() => {
|
|
const svgOverlayManager = new SvgOverlayManager();
|
|
svgOverlayManager.setTitle();
|
|
svgOverlayManager.init();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|