chore(docs): put all actions into single panel

docs/examples/layout/AnimationEdge.vue

@@ -60,8 +60,6 @@ const sourceNodeData = toRef(() => nodesData.value[1])
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished)
 
-const isSkipped = toRef(() => targetNodeData.value.isSkipped)
-
 const isAnimating = ref(false)
 
 const edgeColor = toRef(() => {
@@ -86,14 +84,6 @@ const edgeColor = toRef(() => {
 
 const path = computed(() => getSmoothStepPath(props))
 
-watch(isSkipped, (isSkipped) => {
-  if (isSkipped) {
-    edgePoint.value = 0
-    currentLength.value = 0
-    isAnimating.value = false
-  }
-})
-
 watch(isAnimating, (isAnimating) => {
   const edge = findEdge(props.id)
 
@@ -192,6 +182,7 @@ export default {
 .truck {
   position: relative;
   display: inline-block;
+  transform: scaleX(-1);
 }
 
 .box {

docs/examples/layout/App.vue

@@ -15,7 +15,9 @@ const edges = ref(initialEdges)
 
 const dagreGraph = ref(new dagre.graphlib.Graph())
 
-const { run, stop, isRunning } = useRunProcess(dagreGraph)
+const cancelOnError = ref(true)
+
+const { run, stop, isRunning } = useRunProcess({ dagreGraph, cancelOnError })
 
 const { findNode, fitView } = useVueFlow()
 
@@ -82,14 +84,35 @@ function handleLayout(direction) {
 
       <Background />
 
-      <Panel class="layout-panel" position="top-left">
-        <button @click="handleLayout('TB')">vertical</button>
-        <button @click="handleLayout('LR')">horizontal</button>
-      </Panel>
-
       <Panel class="process-panel" position="top-right">
-        <button v-if="isRunning" @click="stop">🛑</button>
+        <div class="layout-panel">
-        <button v-else @click="run(nodes)">▶️</button>
+          <button v-if="isRunning" @click="stop">🛑</button>
+          <button v-else @click="run(nodes)">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M8 5v14l11-7z" fill="currentColor" />
+            </svg>
+          </button>
+
+          <button title="horizontal" @click="handleLayout('LR')">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M2,12 L22,12" stroke="currentColor" stroke-width="2" />
+              <path d="M7,7 L2,12 L7,17" stroke="currentColor" stroke-width="2" fill="none" />
+              <path d="M17,7 L22,12 L17,17" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+          </button>
+          <button title="vertical" @click="handleLayout('TB')">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12,2 L12,22" stroke="currentColor" stroke-width="2" />
+              <path d="M7,7 L12,2 L17,7" stroke="currentColor" stroke-width="2" fill="none" />
+              <path d="M7,17 L12,22 L17,17" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+          </button>
+        </div>
+
+        <div class="checkbox-panel">
+          <label>Cancel on error</label>
+          <input v-model="cancelOnError" type="checkbox" />
+        </div>
       </Panel>
     </VueFlow>
   </div>
@@ -108,31 +131,48 @@ function handleLayout(direction) {
   gap: 10px;
 }
 
+.process-panel {
+  background-color: #2d3748;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+}
+
 .process-panel button,
 .layout-panel button {
   border: none;
-  padding: 10px;
   cursor: pointer;
-  background-color: #2d3748;
+  background-color: #4a5568;
   border-radius: 8px;
   color: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 .process-panel button {
-  font-size: 24px;
+  font-size: 16px;
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-panel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .process-panel button:hover,
 .layout-panel button:hover {
-  background-color: #4b5563;
+  background-color: #2563eb;
   transition: background-color 0.2s;
 }
 
-.process-panel button:disabled {
+.process-panel label {
-  background-color: #4b5563;
+  color: white;
-  cursor: not-allowed;
+  font-size: 12px;
 }
 </style>

docs/examples/layout/ProcessNode.vue

@@ -74,9 +74,7 @@ const processLabel = toRef(() => {
 
 <template>
   <div class="process-node" :style="{ backgroundColor: bgColor }">
-    <Handle v-if="!isSender" type="target" :position="targetPosition">
+    <Handle v-if="!isSender" type="target" :position="targetPosition" />
-      <div>📥</div>
-    </Handle>
     <Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
 
     <div v-if="!isSender && data.isRunning" class="spinner" />
@@ -91,7 +89,6 @@ const processLabel = toRef(() => {
   padding: 10px;
   color: white;
   border-radius: 99px;
-  font-size: 14px;
   width: 24px;
   height: 24px;
   display: flex;

docs/examples/layout/useRunProcess.js

@@ -9,7 +9,7 @@ import { useVueFlow } from '@vue-flow/core'
  *
  * When a node has multiple descendants, it will run them in parallel.
  */
-export function useRunProcess(dagreGraph) {
+export function useRunProcess({ dagreGraph, cancelOnError = true }) {
   const { updateNodeData, getConnectedEdges } = useVueFlow()
 
   const graph = toRef(() => toValue(dagreGraph))
@@ -49,11 +49,13 @@ export function useRunProcess(dagreGraph) {
           if (!isStart && willThrowError) {
             updateNodeData(node.id, { isRunning: false, hasError: true })
 
-            await skipDescendants(node.id)
+            if (toValue(cancelOnError)) {
-            runningTasks.delete(node.id)
+              await skipDescendants(node.id)
+              runningTasks.delete(node.id)
 
-            resolve()
+              resolve()
-            return
+              return
+            }
           }
 
           updateNodeData(node.id, { isRunning: false, isFinished: true })