chore: update

pure-admin · Mar 19, 2024 · ff72326 · ff72326
1 parent 5cbc4e9
commit ff72326
Show file tree

Hide file tree

Showing 10 changed files with 607 additions and 192 deletions.
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.1.2",
     "@pureadmin/utils": "^2.4.7",
+    "@vue-flow/background": "^1.3.0",
     "@vue-flow/core": "^1.33.4",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/views/vue-flow/layouting/animationEdge.vue b/src/views/vue-flow/layouting/animationEdge.vue
@@ -1,75 +1,138 @@
-<script setup lang="ts">
-import type { EdgeProps } from "@vue-flow/core";
-import { ref, toRef, computed, watch } from "vue";
+<script lang="ts" setup>
+import { computed, nextTick, ref, toRef, watch } from "vue";
 import { TransitionPresets, executeTransition } from "@vueuse/core";
 import {
   BaseEdge,
   EdgeLabelRenderer,
+  Position,
   getSmoothStepPath,
-  useNodesData
+  useNodesData,
+  useVueFlow
 } from "@vue-flow/core";
 
-const props = defineProps<EdgeProps>();
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  source: {
+    type: String,
+    required: true
+  },
+  target: {
+    type: String,
+    required: true
+  },
+  sourceX: {
+    type: Number,
+    required: true
+  },
+  sourceY: {
+    type: Number,
+    required: true
+  },
+  targetX: {
+    type: Number,
+    required: true
+  },
+  targetY: {
+    type: Number,
+    required: true
+  },
+  sourcePosition: {
+    type: String,
+    default: Position.Right
+  },
+  targetPosition: {
+    type: String,
+    default: Position.Left
+  }
+});
+
+const { findEdge } = useVueFlow();
+
+const nodesData = useNodesData([props.target, props.source]);
 
 const edgePoint = ref(0);
 
-const sourceNodeData = useNodesData(() => props.source);
+const edgeRef = ref();
+
+const labelPosition = ref({ x: 0, y: 0 });
+
+const currentLength = ref(0);
+
+const targetNodeData = toRef(() => nodesData.value[0].data);
+
+const sourceNodeData = toRef(() => nodesData.value[1].data);
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished);
 
+const isCancelled = toRef(() => targetNodeData.value.isCancelled);
+
 const isAnimating = ref(false);
 
 const edgeColor = toRef(() => {
-  if (sourceNodeData.value.hasError) {
+  if (targetNodeData.value.hasError) {
     return "#f87171";
   }
 
-  if (sourceNodeData.value.isFinished) {
-    return "#10b981";
+  if (targetNodeData.value.isFinished) {
+    return "#42B983";
   }
 
-  if (sourceNodeData.value.isCancelled) {
+  if (targetNodeData.value.isCancelled || targetNodeData.value.isSkipped) {
     return "#fbbf24";
   }
 
-  if (sourceNodeData.value.isSkipped) {
-    return "#f59e0b";
+  if (targetNodeData.value.isRunning || isAnimating.value) {
+    return "#2563eb";
   }
 
   return "#6b7280";
 });
 
-const edgeRef = ref<InstanceType<typeof BaseEdge>>();
+// @ts-expect-error
+const path = computed(() => getSmoothStepPath(props));
 
-const circlePosition = ref({ x: 0, y: 0 });
+watch(isCancelled, isCancelled => {
+  if (isCancelled) {
+    reset();
+  }
+});
 
-const currentLength = ref(0);
+watch(isAnimating, isAnimating => {
+  const edge = findEdge(props.id);
 
-const path = computed(() => getSmoothStepPath(props));
+  if (edge) {
+    // we set the `isAnimating` flag, so we can wait until the next node gets executed
+    edge.data = {
+      ...edge.data,
+      isAnimating
+    };
+  }
+});
 
 watch(edgePoint, point => {
   const pathEl = edgeRef.value?.pathEl;
 
-  if (!pathEl || point === 0) {
+  if (!pathEl || point === 0 || !isAnimating.value) {
     return;
   }
 
-  const currLength = pathEl.getTotalLength();
+  const nextLength = pathEl.getTotalLength();
 
-  if (currentLength.value !== currLength) {
-    return runAnimation();
+  // if length changed, restart animation
+  if (currentLength.value !== nextLength) {
+    runAnimation();
+    return;
   }
 
-  circlePosition.value = pathEl.getPointAtLength(point);
+  labelPosition.value = pathEl.getPointAtLength(point);
 });
 
-watch(isFinished, async (isFinished, _, onCleanup) => {
+watch(isFinished, isFinished => {
   if (isFinished) {
-    await runAnimation();
-
-    edgePoint.value = 0;
-    currentLength.value = 0;
-    circlePosition.value = { x: 0, y: 0 };
+    runAnimation();
   }
 });
 
@@ -80,44 +143,77 @@ async function runAnimation() {
     return;
   }
 
-  isAnimating.value = true;
-
   const totalLength = pathEl.getTotalLength();
 
+  // if animation restarted, use last edgePoint value to continue from
   const from = edgePoint.value || 0;
 
+  // update initial label position
+  labelPosition.value = pathEl.getPointAtLength(from);
+
+  isAnimating.value = true;
+
+  // update currentLength value, so we can check if the path length changed during animation
   if (currentLength.value !== totalLength) {
     currentLength.value = totalLength;
   }
 
   await executeTransition(edgePoint, from, totalLength, {
-    transition: TransitionPresets.easeInOutCubic
+    transition: TransitionPresets.easeInOutCubic,
+    duration: Math.max(1500, totalLength / 2),
+    abort: () => !isAnimating.value
   });
 
-  isAnimating.value = false;
+  reset();
+}
+
+function reset() {
+  nextTick(() => {
+    edgePoint.value = 0;
+    currentLength.value = 0;
+    labelPosition.value = { x: 0, y: 0 };
+    isAnimating.value = false;
+  });
 }
 </script>
 
 <template>
   <BaseEdge
-    v-bind="$attrs"
     :id="id"
     ref="edgeRef"
     :path="path[0]"
-    :marker-end="markerEnd"
     :style="{ stroke: edgeColor }"
   />
 
   <EdgeLabelRenderer v-if="isAnimating">
     <div
       :style="{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${circlePosition.x}px,${circlePosition.y}px)`,
-        pointerEvents: 'all'
+        transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)`
       }"
-      class="nodrag nopan"
+      class="nodrag nopan animated-edge-label"
     >
-      📦
+      <span class="truck">
+        <span class="box">📦</span>
+        🚚
+      </span>
     </div>
   </EdgeLabelRenderer>
 </template>
+
+<style scoped>
+.animated-edge-label {
+  position: absolute;
+  z-index: 100;
+}
+
+.truck {
+  position: relative;
+  display: inline-block;
+  transform: scaleX(-1);
+}
+
+.box {
+  position: absolute;
+  top: -10px;
+}
+</style>
diff --git a/src/views/vue-flow/layouting/icon.vue b/src/views/vue-flow/layouting/icon.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <svg
+    v-if="name === 'play'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8 5v14l11-7z" fill="currentColor" />
+  </svg>
+
+  <svg
+    v-else-if="name === 'stop'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M8 16h8V8H8zm4 6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'horizontal'"
+    viewBox="0 0 24 24"
+    height="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>
+
+  <svg
+    v-else-if="name === 'vertical'"
+    viewBox="0 0 24 24"
+    height="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>
+
+  <svg
+    v-else-if="name === 'shuffle'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M14 20v-2h2.6l-3.175-3.175L14.85 13.4L18 16.55V14h2v6zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4zm3.775-9.425L4 5.4L5.4 4l5.175 5.175z"
+    />
+  </svg>
+</template>