-
Notifications
You must be signed in to change notification settings - Fork 1
Display logs mermaid.js
Tutik Alexsandr edited this page Jul 23, 2024
·
1 revision
1 include mermaid.js 2 create container
template
<div class="container" style="overflow: hidden; position: relative; height: 640px;">
<div class="mermaid-container svg-output">
<div class="mermaid svg-container" style="">
</div>
</div>
<div>styles
.mermaid-container table {
width: 100%;
}
.mermaid-container table, .mermaid-container table td {
border: 1px dotted black;
}
.mermaid-container table td {
padding: 2px;
}
.mermaid-container {
font-size: 1rem;
line-height: 1.3;
-webkit-tap-highlight-color: transparent;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" opacity=".27"><g fill="none" stroke="hsla(0, 0%, 80%, 1.00)" stroke-width="1.75"><path d="M0 0h88.889v72.727H0zM88.889 0h88.889v72.727H88.889z"/><path d="M177.778 0h88.889v72.727h-88.889zM266.667 0h88.889v72.727h-88.889zM355.556 0h88.889v72.727h-88.889z"/><path d="M444.444 0h88.889v72.727h-88.889zM533.333 0h88.889v72.727h-88.889zM622.222 0h88.889v72.727h-88.889zM711.111 0H800v72.727h-88.889zM800 0h88.889v72.727H800zM0 72.727h88.889v72.727H0zM88.889 72.727h88.889v72.727H88.889z"/><path d="M177.778 72.727h88.889v72.727h-88.889zM266.667 72.727h88.889v72.727h-88.889zM355.556 72.727h88.889v72.727h-88.889z"/><path d="M444.444 72.727h88.889v72.727h-88.889zM533.333 72.727h88.889v72.727h-88.889zM622.222 72.727h88.889v72.727h-88.889zM711.111 72.727H800v72.727h-88.889zM800 72.727h88.889v72.727H800zM0 145.455h88.889v72.727H0zM88.889 145.455h88.889v72.727H88.889z"/><path d="M177.778 145.455h88.889v72.727h-88.889zM266.667 145.455h88.889v72.727h-88.889zM355.556 145.455h88.889v72.727h-88.889z"/><path d="M444.444 145.455h88.889v72.727h-88.889zM533.333 145.455h88.889v72.727h-88.889zM622.222 145.455h88.889v72.727h-88.889zM711.111 145.455H800v72.727h-88.889zM800 145.455h88.889v72.727H800zM0 218.182h88.889v72.727H0zM88.889 218.182h88.889v72.727H88.889z"/><path d="M177.778 218.182h88.889v72.727h-88.889zM266.667 218.182h88.889v72.727h-88.889zM355.556 218.182h88.889v72.727h-88.889z"/><path d="M444.444 218.182h88.889v72.727h-88.889zM533.333 218.182h88.889v72.727h-88.889zM622.222 218.182h88.889v72.727h-88.889zM711.111 218.182H800v72.727h-88.889zM800 218.182h88.889v72.727H800zM0 290.909h88.889v72.727H0zM88.889 290.909h88.889v72.727H88.889z"/><path d="M177.778 290.909h88.889v72.727h-88.889zM266.667 290.909h88.889v72.727h-88.889zM355.556 290.909h88.889v72.727h-88.889z"/><path d="M444.444 290.909h88.889v72.727h-88.889zM533.333 290.909h88.889v72.727h-88.889zM622.222 290.909h88.889v72.727h-88.889zM711.111 290.909H800v72.727h-88.889zM800 290.909h88.889v72.727H800zM0 363.636h88.889v72.727H0zM88.889 363.636h88.889v72.727H88.889z"/><path d="M177.778 363.636h88.889v72.727h-88.889zM266.667 363.636h88.889v72.727h-88.889zM355.556 363.636h88.889v72.727h-88.889z"/><path d="M444.444 363.636h88.889v72.727h-88.889zM533.333 363.636h88.889v72.727h-88.889zM622.222 363.636h88.889v72.727h-88.889zM711.111 363.636H800v72.727h-88.889zM800 363.636h88.889v72.727H800zM0 436.364h88.889v72.727H0zM88.889 436.364h88.889v72.727H88.889z"/><path d="M177.778 436.364h88.889v72.727h-88.889zM266.667 436.364h88.889v72.727h-88.889zM355.556 436.364h88.889v72.727h-88.889z"/><path d="M444.444 436.364h88.889v72.727h-88.889zM533.333 436.364h88.889v72.727h-88.889zM622.222 436.364h88.889v72.727h-88.889zM711.111 436.364H800v72.727h-88.889zM800 436.364h88.889v72.727H800zM0 509.091h88.889v72.727H0zM88.889 509.091h88.889v72.727H88.889z"/><path d="M177.778 509.091h88.889v72.727h-88.889zM266.667 509.091h88.889v72.727h-88.889zM355.556 509.091h88.889v72.727h-88.889z"/><path d="M444.444 509.091h88.889v72.727h-88.889zM533.333 509.091h88.889v72.727h-88.889zM622.222 509.091h88.889v72.727h-88.889zM711.111 509.091H800v72.727h-88.889zM800 509.091h88.889v72.727H800zM0 581.818h88.889v72.727H0zM88.889 581.818h88.889v72.727H88.889z"/><path d="M177.778 581.818h88.889v72.727h-88.889zM266.667 581.818h88.889v72.727h-88.889zM355.556 581.818h88.889v72.727h-88.889z"/><path d="M444.444 581.818h88.889v72.727h-88.889zM533.333 581.818h88.889v72.727h-88.889zM622.222 581.818h88.889v72.727h-88.889zM711.111 581.818H800v72.727h-88.889zM800 581.818h88.889v72.727H800zM0 654.545h88.889v72.727H0zM88.889 654.545h88.889v72.727H88.889z"/><path d="M177.778 654.545h88.889v72.727h-88.889zM266.667 654.545h88.889v72.727h-88.889zM355.556 654.545h88.889v72.727h-88.889z"/><path d="M444.444 654.545h88.889v72.727h-88.889zM533.333 654.545h88.889v72.727h-88.889zM622.222 654.545h88.889v72.727h-88.889zM711.111 654.545H800v72.727h-88.889zM800 654.545h88.889v72.727H800zM0 727.273h88.889V800H0zM88.889 727.273h88.889V800H88.889z"/><path d="M177.778 727.273h88.889V800h-88.889zM266.667 727.273h88.889V800h-88.889zM355.556 727.273h88.889V800h-88.889z"/><path d="M444.444 727.273h88.889V800h-88.889zM533.333 727.273h88.889V800h-88.889zM622.222 727.273h88.889V800h-88.889zM711.111 727.273H800V800h-88.889zM800 727.273h88.889V800H800zM0 800h88.889v72.727H0zM88.889 800h88.889v72.727H88.889z"/><path d="M177.778 800h88.889v72.727h-88.889zM266.667 800h88.889v72.727h-88.889zM355.556 800h88.889v72.727h-88.889z"/><path d="M444.444 800h88.889v72.727h-88.889zM533.333 800h88.889v72.727h-88.889zM622.222 800h88.889v72.727h-88.889zM711.111 800H800v72.727h-88.889zM800 800h88.889v72.727H800z"/></g></svg>');
transition: background-color .2s ease-in-out;
}
.mermaid-container.svg-output {
-webkit-user-select: none;
user-select: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.mermaid-container .svg-frame {
border: none;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}
.mermaid-container .svg-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform-origin: 0 0;
transform: translateZ(0);
}create render add reactive
if (window.mermaid !== void 0) {
let text = ['graph <name end method>'];
logs.forEach(record => {
if (record.group && record.group === 'graph') {
text.push(record.message)
}
})
_svgContainer.innerText = text.join('\n');
mermaid.initialize({startOnLoad: true});
let _svgContainer = document.querySelector('.svg-container')
let _container = document.querySelector('.svg-output')
let panZoom = new PanZoom(_svgContainer, {
eventArea: _container
});
}- PanZoom code author : https://github.com/jakearchibald/svgomg
- Original file: https://github.com/jakearchibald/svgomg/blob/main/src/js/page/ui/pan-zoom.js
(function() {
function getXY(obj) {
return {
x: obj.pageX,
y: obj.pageY,
};
}
function touchDistance(touch1, touch2) {
const dx = Math.abs(touch2.x - touch1.x);
const dy = Math.abs(touch2.y - touch1.y);
return Math.hypot(dx, dy);
}
function getMidpoint(point1, point2) {
return {
x: (point1.x + point2.x) / 2,
y: (point1.y + point2.y) / 2,
};
}
function getPoints(event) {
return event.touches ? [...event.touches].map((touch) => getXY(touch)) : [getXY(event)];
}
class PanZoom {
constructor(
target, {
eventArea = target,
shouldCaptureFunc = () => true
} = {},
) {
this._target = target;
this._shouldCaptureFunc = shouldCaptureFunc;
this._dx = 0;
this._dy = 0;
this._scale = 1;
this._active = 0;
this._lastPoints = [];
// TODO: revisit this later
// Ideally these would use public class fields, but around 1.7% of users
// are on old Safari versions that don't support them. We should be able
// to switch over soon.
this._onPointerDown = (event) => {
if (event.type === 'mousedown' && event.button !== 0) return;
if (!this._shouldCaptureFunc(event.target)) return;
event.preventDefault();
this._lastPoints = getPoints(event);
this._active++;
if (this._active === 1) this._onFirstPointerDown();
};
this._onPointerMove = (event) => {
event.preventDefault();
const points = getPoints(event);
/* eslint-disable unicorn/no-array-reduce, unicorn/no-array-callback-reference */
const averagePoint = points.reduce(getMidpoint);
const averageLastPoint = this._lastPoints.reduce(getMidpoint);
/* eslint-enable unicorn/no-array-reduce, unicorn/no-array-callback-reference */
const {
left,
top
} = this._target.getBoundingClientRect();
this._dx += averagePoint.x - averageLastPoint.x;
this._dy += averagePoint.y - averageLastPoint.y;
if (points[1]) {
const scaleDiff =
touchDistance(points[0], points[1]) /
touchDistance(this._lastPoints[0], this._lastPoints[1]);
this._scale *= scaleDiff;
this._dx -= (averagePoint.x - left) * (scaleDiff - 1);
this._dy -= (averagePoint.y - top) * (scaleDiff - 1);
}
this._update();
this._lastPoints = points;
};
this._onPointerUp = (event) => {
event.preventDefault();
this._active--;
this._lastPoints.pop();
if (this._active) {
this._lastPoints = getPoints(event);
return;
}
document.removeEventListener('mousemove', this._onPointerMove);
document.removeEventListener('mouseup', this._onPointerUp);
document.removeEventListener('touchmove', this._onPointerMove);
document.removeEventListener('touchend', this._onPointerUp);
};
// bound events
eventArea.addEventListener('mousedown', this._onPointerDown);
eventArea.addEventListener('touchstart', this._onPointerDown);
// unbound
eventArea.addEventListener('wheel', (event) => this._onWheel(event));
}
reset() {
this._dx = 0;
this._dy = 0;
this._scale = 1;
this._update();
}
_onWheel(event) {
if (!this._shouldCaptureFunc(event.target)) return;
event.preventDefault();
const {
left,
top
} = this._target.getBoundingClientRect();
let delta = event.deltaY;
// 1 is "lines", 0 is "pixels"
// Firefox uses "lines" when mouse is connected
if (event.deltaMode === 1) {
delta *= 15;
}
// stop mouse wheel producing huge values
delta = Math.max(Math.min(delta, 60), -60);
const scaleDiff = delta / 300 + 1;
// avoid to-small values
if (this._scale * scaleDiff < 0.05) return;
this._scale *= scaleDiff;
this._dx -= (event.pageX - left) * (scaleDiff - 1);
this._dy -= (event.pageY - top) * (scaleDiff - 1);
this._update();
}
_onFirstPointerDown() {
document.addEventListener('mousemove', this._onPointerMove);
document.addEventListener('mouseup', this._onPointerUp);
document.addEventListener('touchmove', this._onPointerMove);
document.addEventListener('touchend', this._onPointerUp);
}
_update() {
this._target.style.transform = `translate3d(${this._dx}px, ${this._dy}px, 0) scale(${this._scale})`;
}
}
window.PanZoom = PanZoom;
})();