Implement native BPMN workflows and guided modes
This commit is contained in:
+119
-105
@@ -274,6 +274,10 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workflow-bpmn-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workflow-palette,
|
||||
.workflow-inspector,
|
||||
.workflow-inspector-column {
|
||||
@@ -457,38 +461,101 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
width: 190px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 56px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--line-dark);
|
||||
border-left: 4px solid #3d6f9e;
|
||||
border-radius: 6px;
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-xs);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.workflow-node-trigger {
|
||||
border-left-color: #2f7d6d;
|
||||
.workflow-node-bpmn_activity {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.workflow-node-activity {
|
||||
border-left-color: #3d6f9e;
|
||||
.workflow-node-bpmn_collaboration {
|
||||
border-width: 2px;
|
||||
background: color-mix(in srgb, var(--panel) 92%, transparent);
|
||||
}
|
||||
|
||||
.workflow-node-decision {
|
||||
border-left-color: #b7791f;
|
||||
.workflow-node-shape-participant,
|
||||
.workflow-node-shape-lane {
|
||||
align-items: flex-start;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.workflow-node-wait {
|
||||
border-left-color: #8a6d3b;
|
||||
.workflow-node-shape-lane {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.workflow-node-integration {
|
||||
border-left-color: #76569b;
|
||||
.workflow-node-shape-group {
|
||||
align-items: flex-start;
|
||||
border: 2px dashed var(--line-dark);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workflow-node-outcome {
|
||||
border-left-color: #9d4e63;
|
||||
.workflow-node-shape-text-annotation {
|
||||
border: 0;
|
||||
border-left: 2px solid var(--line-dark);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workflow-node[class*="workflow-node-shape-event"],
|
||||
.workflow-node-shape-gateway {
|
||||
justify-content: flex-start;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.workflow-node[class*="workflow-node-shape-event"] .workflow-node-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex-basis: 42px;
|
||||
border: 2px solid var(--text-strong);
|
||||
border-radius: 50%;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.workflow-node-shape-event-intermediate-catch .workflow-node-icon,
|
||||
.workflow-node-shape-event-intermediate-throw .workflow-node-icon {
|
||||
box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--text-strong);
|
||||
}
|
||||
|
||||
.workflow-node-shape-event-boundary .workflow-node-icon {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.workflow-node-shape-event-end .workflow-node-icon {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.workflow-node-shape-gateway .workflow-node-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex-basis: 42px;
|
||||
border: 2px solid var(--text-strong);
|
||||
border-radius: 2px;
|
||||
background: var(--panel);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.workflow-node-shape-gateway .workflow-node-icon svg {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.workflow-node-shape-data-object,
|
||||
.workflow-node-shape-data-store,
|
||||
.workflow-node-shape-conversation,
|
||||
.workflow-node-shape-choreography {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.workflow-node.is-selected {
|
||||
@@ -498,10 +565,26 @@
|
||||
var(--shadow-xs);
|
||||
}
|
||||
|
||||
.workflow-node[class*="workflow-node-shape-event"].is-selected,
|
||||
.workflow-node-shape-gateway.is-selected {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workflow-node[class*="workflow-node-shape-event"].is-selected .workflow-node-icon,
|
||||
.workflow-node-shape-gateway.is-selected .workflow-node-icon {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
|
||||
}
|
||||
|
||||
.workflow-node.has-error {
|
||||
border-color: var(--danger-text);
|
||||
}
|
||||
|
||||
.workflow-node[class*="workflow-node-shape-event"].has-error .workflow-node-icon,
|
||||
.workflow-node-shape-gateway.has-error .workflow-node-icon {
|
||||
border-color: var(--danger-text);
|
||||
}
|
||||
|
||||
.workflow-node-icon {
|
||||
display: grid;
|
||||
width: 28px;
|
||||
@@ -552,6 +635,25 @@
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.workflow-edge-bpmn-messageFlow .react-flow__edge-path,
|
||||
.workflow-edge-bpmn-association .react-flow__edge-path,
|
||||
.workflow-edge-bpmn-conversationLink .react-flow__edge-path {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.workflow-inspector-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.workflow-inspector-checkbox input {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.workflow-inspector-fields {
|
||||
display: grid;
|
||||
grid-auto-rows: max-content;
|
||||
@@ -899,100 +1001,10 @@
|
||||
padding: 6px 2px;
|
||||
}
|
||||
|
||||
.workflow-run-history > div {
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(min(150px, 100%), 1fr)
|
||||
);
|
||||
overflow-x: auto;
|
||||
.workflow-run-history .stage-rail {
|
||||
padding: 2px 0 4px;
|
||||
}
|
||||
|
||||
.workflow-run-stage {
|
||||
--workflow-stage-color: var(--line-dark);
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 140px;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
gap: 7px;
|
||||
padding: 4px 12px 4px 0;
|
||||
}
|
||||
|
||||
.workflow-run-stage[data-state="completed"] {
|
||||
--workflow-stage-color: var(--green);
|
||||
}
|
||||
|
||||
.workflow-run-stage[data-state="running"],
|
||||
.workflow-run-stage[data-state="waiting"] {
|
||||
--workflow-stage-color: var(--blue);
|
||||
}
|
||||
|
||||
.workflow-run-stage[data-state="failed"],
|
||||
.workflow-run-stage[data-state="cancelled"] {
|
||||
--workflow-stage-color: var(--red);
|
||||
}
|
||||
|
||||
.workflow-run-stage[data-state="superseded"] {
|
||||
--workflow-stage-color: var(--muted);
|
||||
}
|
||||
|
||||
.workflow-run-stage:not(:last-child)::after {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 18px;
|
||||
left: 27px;
|
||||
width: calc(100% - 17px);
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--workflow-stage-color),
|
||||
var(--line-dark)
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.workflow-run-stage-marker {
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--workflow-stage-color);
|
||||
border-radius: 50%;
|
||||
background: var(--panel);
|
||||
color: var(--workflow-stage-color);
|
||||
}
|
||||
|
||||
.workflow-run-stage[data-current="true"] .workflow-run-stage-marker {
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--workflow-stage-color) 18%, transparent);
|
||||
}
|
||||
|
||||
.workflow-run-stage-copy {
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-content: start;
|
||||
gap: 3px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.workflow-run-stage-copy strong,
|
||||
.workflow-run-stage-copy small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.workflow-run-stage-copy strong {
|
||||
color: var(--text-strong);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.workflow-run-stage-copy .status-badge {
|
||||
width: fit-content;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.workflow-run-history small,
|
||||
.workflow-run-events small {
|
||||
color: var(--muted);
|
||||
@@ -1025,6 +1037,7 @@
|
||||
.workflow-editor {
|
||||
grid-template-columns: 180px minmax(0, 1fr) 270px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -1042,6 +1055,7 @@
|
||||
border-top: var(--border-line);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
|
||||
Reference in New Issue
Block a user