588 lines
26 KiB
HTML
588 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>State Machine Explorer - click.kamil.examples.statemachine.extended.config.ExtendedStateMachineConfig</title>
|
|
<!-- Popper and Tippy for tooltips -->
|
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
|
<script src="https://unpkg.com/tippy.js@6"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
|
|
<!-- SVG Pan & Zoom -->
|
|
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--sidebar-bg: #ffffff;
|
|
--main-bg: #f8fafc;
|
|
--accent: #ef4444;
|
|
--primary: #3b82f6;
|
|
--text: #0f172a;
|
|
--text-muted: #64748b;
|
|
--border: #e2e8f0;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
background: var(--main-bg);
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sidebar {
|
|
width: 420px;
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30px;
|
|
overflow-y: auto;
|
|
box-shadow: 10px 0 15px rgba(0,0,0,0.02);
|
|
z-index: 10;
|
|
}
|
|
|
|
header h1 { font-weight: 900; font-size: 1.6rem; color: var(--text); margin: 0 0 5px 0; letter-spacing: -0.5px; }
|
|
header p { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); margin: 0 0 35px 0; opacity: 0.7; }
|
|
|
|
.section-label {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.ep-card {
|
|
padding: 18px;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
position: relative;
|
|
}
|
|
|
|
.ep-card:hover {
|
|
border-color: var(--primary);
|
|
transform: translateX(5px);
|
|
box-shadow: 0 15px 30px -10px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.ep-type {
|
|
font-size: 0.6rem;
|
|
font-weight: 900;
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
}
|
|
.type-rest { background: #eff6ff; color: #1d4ed8; }
|
|
.type-custom { background: #fef2f2; color: #b91c1c; }
|
|
.type-jms { background: #f5f3ff; color: #7c3aed; }
|
|
|
|
.ep-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: var(--text); }
|
|
.ep-fqn { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-muted); opacity: 0.8; }
|
|
|
|
#main { flex-grow: 1; position: relative; background: var(--main-bg); }
|
|
#svg-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; }
|
|
|
|
svg {
|
|
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.03));
|
|
}
|
|
|
|
/* SVG Overlays & Animation */
|
|
svg .stereotype { display: none; } /* Hide the <<link_...>> labels from PUML */
|
|
|
|
.active-path path {
|
|
stroke: var(--accent) !important;
|
|
stroke-width: 5px !important;
|
|
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.active-path text {
|
|
fill: #000 !important;
|
|
font-weight: 800;
|
|
paint-order: stroke;
|
|
stroke: #fff;
|
|
stroke-width: 4px;
|
|
}
|
|
|
|
.dimmed {
|
|
opacity: 0.1 !important;
|
|
filter: grayscale(1);
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.payload-box {
|
|
background: #0f172a;
|
|
color: #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="sidebar">
|
|
<header>
|
|
<h1>Explorer</h1>
|
|
<p>click.kamil.examples.statemachine.extended.config.ExtendedStateMachineConfig</p>
|
|
</header>
|
|
|
|
<div id="ep-list"></div>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<div id="svg-container">
|
|
<?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="100%" preserveAspectRatio="xMidYMid meet" style="width:355px;height:234px;background:#FFFFFF;" version="1.1" viewBox="0 0 355 234" width="100%" zoomAndPan="magnify"><defs/><g class="link_EXTERNAL_TRIGGER" ><rect fill="#FFFFFF" height="100%" rx="12.5" ry="12.5" style="stroke:#94A3B8;stroke-width:1.0;" width="100%" x="75.9046" y="12"/><text fill="#000000" font-family="Inter" font-size="11" font-weight="bold" lengthAdjust="spacing" textLength="38" x="81.9046" y="36.1572">START</text><rect fill="#FFFFFF" height="100%" rx="12.5" ry="12.5" style="stroke:#94A3B8;stroke-width:1.0;" width="100%" x="60.4046" y="100"/><text fill="#000000" font-family="Inter" font-size="11" font-weight="bold" lengthAdjust="spacing" textLength="71" x="65.4046" y="124.1572">PROCESSING</text><rect fill="#FFFFFF" height="100%" rx="12.5" ry="12.5" style="stroke:#94A3B8;stroke-width:1.0;" width="100%" x="12.4046" y="188"/><text fill="#000000" font-family="Inter" font-size="11" font-weight="bold" lengthAdjust="spacing" textLength="71" x="17.4046" y="212.1572">COMPLETED</text><rect fill="#FFFFFF" height="100%" rx="12.5" ry="12.5" style="stroke:#94A3B8;stroke-width:1.0;" width="100%" x="111.4046" y="188"/><text fill="#000000" font-family="Inter" font-size="11" font-weight="bold" lengthAdjust="spacing" textLength="67" x="116.4046" y="212.1572">CANCELLED</text><ellipse cx="310.9046" cy="30" fill="#222222" rx="10" ry="10" style="stroke:#222222;stroke-width:1.0;"/><rect fill="#FFFFFF" height="100%" rx="12.5" ry="12.5" style="stroke:#94A3B8;stroke-width:1.0;" width="100%" x="272.4046" y="100"/><text fill="#000000" font-family="Inter" font-size="11" font-weight="bold" lengthAdjust="spacing" textLength="67" x="277.4046" y="124.1572">INIT_STATE</text><polygon fill="#94A3B8" points="310.9046,99.8638,314.9046,90.8638,310.9046,94.8638,306.9046,90.8638,310.9046,99.8638" style="stroke:#94A3B8;stroke-width:1.0;"/><path d="M310.9046,44.243 C310.9046,58.3573 310.9046,76.7854 310.9046,93.8638 " fill="none" style="stroke:#94A3B8;stroke-width:1.2;"/><polygon fill="#1E90FF" points="60.2076,112.4455,52.2937,106.5829,55.3274,111.3575,50.5529,114.3912,60.2076,112.4455" style="stroke:#1E90FF;stroke-width:1.0;"/><path d="M75.6397,35.6355 C54.1314,39.3635 24.4721,48.3514 9.9046,70 C-5.2717,92.5535 23.5287,104.2681 54.3514,111.1399 " fill="none" style="stroke:#1E90FF;stroke-width:2.0;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9" lengthAdjust="spacing" textLength="67" x="10.9046" y="79.7012">SUBMIT_EVENT</text><polygon fill="#1E90FF" points="63.5276,187.9672,71.4067,182.0579,65.9644,183.6012,64.4211,178.1589,63.5276,187.9672" style="stroke:#1E90FF;stroke-width:1.0;"/><path d="M90.2519,140.0862 C82.2974,154.3379 74.399,168.4892 66.4518,182.728 " fill="none" style="stroke:#1E90FF;stroke-width:2.0;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9" lengthAdjust="spacing" textLength="30" x="80.9046" y="167.7012">FINISH</text><polygon fill="#1E90FF" points="139.0603,187.9672,138.0803,178.1672,136.5851,183.6228,131.1294,182.1276,139.0603,187.9672" style="stroke:#1E90FF;stroke-width:1.0;"/><path d="M111.7793,140.0862 C119.8994,154.3379 127.9772,168.5152 136.09,182.754 " fill="none" style="stroke:#1E90FF;stroke-width:2.0;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9" lengthAdjust="spacing" textLength="69" x="129.9046" y="167.7012">CANCEL_EVENT</text><polygon fill="#1E90FF" points="100.9046,99.9672,104.9046,90.9672,100.9046,94.9672,96.9046,90.9672,100.9046,99.9672" style="stroke:#1E90FF;stroke-width:1.0;"/><path d="M100.9046,52.0862 C100.9046,66.3379 100.9046,79.7283 100.9046,93.9672 " fill="none" style="stroke:#1E90FF;stroke-width:2.0;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9" lengthAdjust="spacing" textLength="77" x="101.9046" y="79.7012">REACTIVE_EVENT</text><polygon fill="#1E90FF" points="126.0802,40.2178,134.9239,44.5524,131.0767,40.4053,135.2239,36.558,126.0802,40.2178" style="stroke:#1E90FF;stroke-width:1.0;"/><path d="M126.0802,23.7822 C135.8141,23.417 143.9046,26.1563 143.9046,32 C143.9046,37.8438 141.8099,40.808 132.076,40.4427 " fill="none" style="stroke:#1E90FF;stroke-width:2.0;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9" lengthAdjust="spacing" textLength="62" x="144.9046" y="35.7012">AUDIT_EVENT</text><polygon fill="#1E90FF" points="141.5086,110.1768,151.2761,111.4406,146.3005,108.7492,148.9919,103.7736,141.5086,110.1768" style="stroke:#1E90FF;stroke-width:1.0;"/><path d="M126.2421,37.292 C144.8754,41.9178 168.9534,51.3051 180.9046,70 C193.4055,89.5548 172.9517,100.8091 147.2588,108.4637 " fill="none" style="stroke:#1E90FF;stroke-width:2.0;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9" lengthAdjust="spacing" textLength="91" x="185.9046" y="79.7012">EXTERNAL_TRIGGER</text><!--SRC=[dLHhJ-905FtUNt4t-ysi2kMX449Ie2WRG0FLh366ZEq8immpP3g8hF6_x_G5VOoII4BIEUTqxklq_bWBD5yXe6Z7DnBy5PQ88MD1F0nujPOxyB3l2hAMX3F3NnAsHWAjm9T8OdWt03h8NSu5tp2looaNi5qGYGES2m-B2FlPgABAy-KUTHR4NJBi-r1MM9ypEKOh30CciOY1AVc7ePpGKxcZ69uvzHGmYO89XWMODGNS8iyZR0wcyP5ESO4ylWtm5qHzd68i8VXs7_KtbXs12FDXn1dNoS9S6dacMrgEJ5LuPgQJUfrRKWhol57jSobI0byLZRdShLMAOLUdZZLnukVRoKtNdau7uwiOwDwCReUsO_UIipNksiEXEXijF-XIMpNaC1s0CtV1YPkSYlCQalb2Fc1A-JPKV1ZH7mLbn6yD2SFPcQbxyPjAd24Axo4VjwDiDqhzVdY3qX2cqrJCRgzY9XhAtRoWtxTgfL8Y-BjXRc2_lARUw5Jt6avo_ALbTknza1SkbbdUB7LCoqhug4cpO0fPMIdyvMHkmCrAXOGgrGkjifnLLkkNvY7rZDBygbCPPIKVlNVnIPxLhB9krQnkJwkiVTBYs1Bd9s2_eTMQuYPSAzlGm3g0A0Kf4FD9C2GVLAi1WR_6BdaXBk1Np2ISd4Vld-7Pw65ctzjZ9nDBO0y-0bNhF7Pnj8DQhSHcxNRwIud9n5zQCZIMbaaSfIULbRH4u24jaJBFLtpickEIyd69ULnIEIwf7fVKiXBZyUG9Ja_RC1WFd9dQL8vj64QuiU3qCVxwVmMB-ac93jihEqXrc4tlEYDrHMY54AA4BVDe4zA0aRgl66o_6Okn-YhRwVKXolxSXEZnoCt9ZYtU757vAd9e4zB0jxeriQskCxYtyv4AU1EoqAVH8hmGoBhh5QUI1PkGEd-h6lkFOq_6rd3cJ0PNL_Ra44d3D24FxbT3tYv5BwTchoDpWz992XtMYR8DqYaqXQLa_m40]--></g></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<script id="metadata-json" type="application/json">
|
|
{
|
|
"name" : "click.kamil.examples.statemachine.extended.config.ExtendedStateMachineConfig",
|
|
"transitions" : [ {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"START\"",
|
|
"fullIdentifier" : "START"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"PROCESSING\"",
|
|
"fullIdentifier" : "PROCESSING"
|
|
} ],
|
|
"event" : "SUBMIT_EVENT",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"PROCESSING\"",
|
|
"fullIdentifier" : "PROCESSING"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"COMPLETED\"",
|
|
"fullIdentifier" : "COMPLETED"
|
|
} ],
|
|
"event" : "FINISH",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"PROCESSING\"",
|
|
"fullIdentifier" : "PROCESSING"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"CANCELLED\"",
|
|
"fullIdentifier" : "CANCELLED"
|
|
} ],
|
|
"event" : "CANCEL_EVENT",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"START\"",
|
|
"fullIdentifier" : "START"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"PROCESSING\"",
|
|
"fullIdentifier" : "PROCESSING"
|
|
} ],
|
|
"event" : "REACTIVE_EVENT",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"START\"",
|
|
"fullIdentifier" : "START"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"START\"",
|
|
"fullIdentifier" : "START"
|
|
} ],
|
|
"event" : "AUDIT_EVENT",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"START\"",
|
|
"fullIdentifier" : "START"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"PROCESSING\"",
|
|
"fullIdentifier" : "PROCESSING"
|
|
} ],
|
|
"event" : "EXTERNAL_TRIGGER",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
} ],
|
|
"startStates" : [ "INIT_STATE" ],
|
|
"endStates" : [ ],
|
|
"renderChoicesAsDiamonds" : false,
|
|
"metadata" : {
|
|
"triggers" : [ {
|
|
"event" : "FINISH",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "finishOrder",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 34
|
|
}, {
|
|
"event" : "AUDIT_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.AuditInterceptor",
|
|
"methodName" : "preHandle",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 16
|
|
}, {
|
|
"event" : "SUBMIT_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.OrderService",
|
|
"methodName" : "processSubmit",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 20
|
|
}, {
|
|
"event" : "CANCEL_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.OrderService",
|
|
"methodName" : "processCancel",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 25
|
|
}, {
|
|
"event" : "[LIFECYCLE:RESTORE]",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.OrderService",
|
|
"methodName" : "resumeOrder",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 29
|
|
}, {
|
|
"event" : "REACTIVE_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.ReactiveOrderService",
|
|
"methodName" : "processReactive",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 18
|
|
} ],
|
|
"entryPoints" : [ {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/submit",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "submitOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/submit",
|
|
"verb" : "POST"
|
|
}
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/cancel",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "cancelOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/cancel",
|
|
"verb" : "POST"
|
|
}
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/finish",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "finishOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/finish",
|
|
"verb" : "POST"
|
|
}
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/resume",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "resumeOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/resume",
|
|
"verb" : "POST"
|
|
}
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/reactive",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "reactiveOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/reactive",
|
|
"verb" : "POST"
|
|
}
|
|
}, {
|
|
"type" : "CUSTOM",
|
|
"name" : "INTERCEPTOR: AuditInterceptor.preHandle",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.AuditInterceptor",
|
|
"methodName" : "preHandle",
|
|
"metadata" : {
|
|
"interceptorType" : "Spring MVC Interceptor"
|
|
}
|
|
} ],
|
|
"callChains" : [ {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/submit",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "submitOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/submit",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.statemachine.extended.web.OrderController.submitOrder", "click.kamil.examples.statemachine.extended.service.OrderService.processSubmit" ],
|
|
"triggerPoint" : {
|
|
"event" : "SUBMIT_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.OrderService",
|
|
"methodName" : "processSubmit",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 20
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/cancel",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "cancelOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/cancel",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.statemachine.extended.web.OrderController.cancelOrder", "click.kamil.examples.statemachine.extended.service.OrderService.processCancel" ],
|
|
"triggerPoint" : {
|
|
"event" : "CANCEL_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.OrderService",
|
|
"methodName" : "processCancel",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 25
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/finish",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "finishOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/finish",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.statemachine.extended.web.OrderController.finishOrder" ],
|
|
"triggerPoint" : {
|
|
"event" : "FINISH",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "finishOrder",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 34
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/resume",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "resumeOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/resume",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.statemachine.extended.web.OrderController.resumeOrder", "click.kamil.examples.statemachine.extended.service.OrderService.resumeOrder" ],
|
|
"triggerPoint" : {
|
|
"event" : "[LIFECYCLE:RESTORE]",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.OrderService",
|
|
"methodName" : "resumeOrder",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 29
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/reactive",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.OrderController",
|
|
"methodName" : "reactiveOrder",
|
|
"metadata" : {
|
|
"path" : "/api/orders/reactive",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.statemachine.extended.web.OrderController.reactiveOrder", "click.kamil.examples.statemachine.extended.service.ReactiveOrderService.processReactive" ],
|
|
"triggerPoint" : {
|
|
"event" : "REACTIVE_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.service.ReactiveOrderService",
|
|
"methodName" : "processReactive",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 18
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "CUSTOM",
|
|
"name" : "INTERCEPTOR: AuditInterceptor.preHandle",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.AuditInterceptor",
|
|
"methodName" : "preHandle",
|
|
"metadata" : {
|
|
"interceptorType" : "Spring MVC Interceptor"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.statemachine.extended.web.AuditInterceptor.preHandle" ],
|
|
"triggerPoint" : {
|
|
"event" : "AUDIT_EVENT",
|
|
"className" : "click.kamil.examples.statemachine.extended.web.AuditInterceptor",
|
|
"methodName" : "preHandle",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 16
|
|
}
|
|
} ],
|
|
"properties" : {
|
|
"app.states.initial" : "INIT_STATE"
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
const metadata = JSON.parse(document.getElementById('metadata-json').textContent);
|
|
let panZoomInstance;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const svg = document.querySelector('svg');
|
|
panZoomInstance = svgPanZoom(svg, { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true });
|
|
|
|
populateSidebar();
|
|
attachInteractivity();
|
|
});
|
|
|
|
function populateSidebar() {
|
|
const list = document.getElementById('ep-list');
|
|
const entryPoints = metadata.metadata.entryPoints || [];
|
|
|
|
entryPoints.forEach(ep => {
|
|
const card = document.createElement('div');
|
|
card.className = 'ep-card';
|
|
card.innerHTML = `
|
|
<div class="ep-type type-${ep.type.toLowerCase()}">${ep.type}</div>
|
|
<div class="ep-name">${ep.name}</div>
|
|
<div class="ep-fqn">${ep.className}.${ep.methodName}</div>
|
|
`;
|
|
card.onmouseenter = () => highlightPaths(ep.name);
|
|
card.onmouseleave = clearHighlights;
|
|
list.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function highlightPaths(epName) {
|
|
clearHighlights();
|
|
const chains = metadata.metadata.callChains || [];
|
|
const relevantEvents = chains
|
|
.filter(c => c.entryPoint.name === epName)
|
|
.map(c => c.triggerPoint.event);
|
|
|
|
if (relevantEvents.length === 0) return;
|
|
|
|
const svg = document.querySelector('svg');
|
|
// Dim all major groups
|
|
svg.querySelectorAll('g').forEach(g => g.classList.add('dimmed'));
|
|
|
|
relevantEvents.forEach(evt => {
|
|
// Find transition groups by stereotype class injected by PlantUML
|
|
const selector = `.link_` + normalize(evt);
|
|
svg.querySelectorAll(selector).forEach(group => {
|
|
group.classList.remove('dimmed');
|
|
group.classList.add('active-path');
|
|
});
|
|
});
|
|
}
|
|
|
|
function clearHighlights() {
|
|
document.querySelectorAll('.dimmed, .active-path').forEach(el => {
|
|
el.classList.remove('dimmed', 'active-path');
|
|
});
|
|
}
|
|
|
|
function attachInteractivity() {
|
|
const svg = document.querySelector('svg');
|
|
const transitions = metadata.transitions || [];
|
|
|
|
// PlantUML groups transitions with their stereotype classes
|
|
svg.querySelectorAll('g[class^="link_"], g[class*=" link_"]').forEach(group => {
|
|
// Extract event name from class link_EVENTNAME
|
|
const match = group.getAttribute('class').match(/link_([\\w]+)/);
|
|
if (!match) return;
|
|
|
|
const eventName = match[1];
|
|
const metaTrans = transitions.find(t => normalize(t.event) === eventName);
|
|
const chains = (metadata.metadata.callChains || []).filter(c => normalize(c.triggerPoint.event) === eventName);
|
|
|
|
tippy(group, {
|
|
content: createTooltip(eventName, metaTrans, chains),
|
|
allowHTML: true,
|
|
theme: 'modern',
|
|
interactive: true,
|
|
appendTo: document.body,
|
|
placement: 'auto'
|
|
});
|
|
});
|
|
}
|
|
|
|
function normalize(s) {
|
|
if (!s) return "";
|
|
return s.replace(/[^a-zA-Z0-9]/g, '_');
|
|
}
|
|
|
|
function createTooltip(name, trans, chains) {
|
|
let html = `<div style="padding:15px; min-width:320px">
|
|
<div style="font-weight:900; font-size:1.1rem; margin-bottom:12px; border-bottom:1px solid #eee; padding-bottom:8px;">
|
|
Event: ${name}
|
|
</div>`;
|
|
|
|
if (trans && trans.guard) {
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:4px">Guard</div>
|
|
<div style="background:#f1f5f9; padding:6px; border-radius:4px; font-family:monospace; font-size:0.8rem; margin-bottom:12px">${trans.guard.expression}</div>`;
|
|
}
|
|
|
|
// Placeholder for Data Object
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:8px; border-top:1px solid #eee; padding-top:10px">Data Payload (Planned)</div>
|
|
<div class="payload-box">
|
|
<span style="color:#ef4444">OrderRequest</span> {<br>
|
|
<span style="color:#64748b">// Planned logic</span><br>
|
|
id: "ORD-123",<br>
|
|
quantity: 5<br>
|
|
}
|
|
</div>`;
|
|
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |