feat(flow): add shared flow edge,node,guide components & hook

Author: 0721Betty

packages/components/common/CustomHeightResizer.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="custom-height-resizer" @mousedown="handleMouseDown">
+    <slot name="icon"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number
+    min?: number
+    max?: number
+    /**
+     * Whether the resizer is forward or not
+     */
+    isForward?: boolean
+  }>(),
+  {
+    min: 40,
+  },
+)
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+  (e: 'resize', value: number): void
+}>()
+
+let lastYPosition = 0
+
+function setWidth(width: number) {
+  emit('update:modelValue', width)
+}
+
+const resize = (event: MouseEvent) => {
+  const max = props.max || Number.MAX_SAFE_INTEGER
+  const offset = Math.floor(event.pageY) - lastYPosition
+  let targetHeight = props.modelValue + (props.isForward ? offset : -offset)
+  if (targetHeight <= props.min) {
+    targetHeight = props.min
+  } else if (targetHeight >= max) {
+    targetHeight = max
+  }
+  setWidth(targetHeight)
+  lastYPosition = Math.floor(event.pageY)
+}
+
+const handleMouseUp = () => {
+  window.removeEventListener('mousemove', resize)
+  window.removeEventListener('mouseup', handleMouseUp)
+  emit('resize', props.modelValue)
+}
+
+const handleMouseDown = (event: MouseEvent) => {
+  lastYPosition = Math.floor(event.pageY)
+  window.addEventListener('mousemove', resize)
+  window.addEventListener('mouseup', handleMouseUp)
+  event.preventDefault()
+}
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', resize)
+  window.removeEventListener('mouseup', handleMouseUp)
+})
+</script>
+
+<style lang="scss">
+.custom-height-resizer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 8px;
+  z-index: 1;
+  padding-left: 16px;
+  padding-right: 16px;
+  cursor: row-resize;
+}
+</style>

packages/components/flow/composables/useActionAndSourceStatus.ts

@@ -0,0 +1,31 @@
+import { FlowConnectionStatus } from '../types'
+import { useFlowLocale } from './useFlowLocale'
+
+export default (): {
+  statusOptList: Array<{ value: FlowConnectionStatus; label: string }>
+  statusLabelMap: Partial<Record<FlowConnectionStatus, string>>
+  getActionStatusLabel: (status?: FlowConnectionStatus) => string
+} => {
+  const { t } = useFlowLocale()
+  const statusLabelMap: Partial<Record<FlowConnectionStatus, string>> = {
+    [FlowConnectionStatus.Connected]: t('flow.actionAvailable'),
+    [FlowConnectionStatus.Disconnected]: t('flow.actionUnavailable'),
+    [FlowConnectionStatus.Connecting]: t('flow.connecting'),
+    [FlowConnectionStatus.Inconsistent]: t('flow.inconsistent'),
+  }
+  const statusOptList = (Object.entries(statusLabelMap) as [FlowConnectionStatus, string][]).map(
+    ([key, value]) => ({
+      value: key,
+      label: value,
+    }),
+  )
+  const getActionStatusLabel = (status?: FlowConnectionStatus) => {
+    return status ? statusLabelMap[status] || t('flow.disconnected') : ''
+  }
+
+  return {
+    statusLabelMap,
+    statusOptList,
+    getActionStatusLabel,
+  }
+}

packages/components/flow/composables/useFlowGuideNodes.ts

@@ -0,0 +1,71 @@
+import { Edge, Node } from '@vue-flow/core'
+import { createRandomString } from '@emqx/shared-ui-utils'
+import { NodeType } from '../types'
+import { useFlowLocale } from './useFlowLocale'
+
+export const fallbackEdgeStyle = { stroke: '#bbb', strokeDasharray: '5 5' }
+
+export default (): {
+  allGuideFlowData: Array<Node | Edge>
+  idFallback: string
+  idFallbackEdge: string
+} => {
+  const { t } = useFlowLocale()
+  const idSource = createRandomString()
+  const idProcessing = createRandomString()
+  const idSink = createRandomString()
+  const idFallback = createRandomString()
+  const idFallbackEdge = createRandomString()
+  const allGuideFlowData: Array<Node | Edge> = [
+    {
+      id: idSource,
+      label: t('flow.guideSourceNodeLabel'),
+      data: { type: NodeType.Source, desc: t('flow.guideSourceNodeDesc') },
+      type: 'guide',
+      position: { x: 90, y: 90 },
+    },
+    {
+      id: idProcessing,
+      label: t('flow.guideProcessingNodeLabel'),
+      data: { type: NodeType.Processing, desc: t('flow.guideProcessingNodeDesc') },
+      type: 'guide',
+      position: { x: 290, y: 90 },
+    },
+    {
+      id: idSink,
+      label: t('flow.guideSinkNodeLabel'),
+      data: { type: NodeType.Sink, desc: t('flow.guideSinkNodeDesc') },
+      type: 'guide',
+      position: { x: 490, y: 90 },
+    },
+    {
+      id: idFallback,
+      label: t('flow.guideFallbackNodeLabel'),
+      data: { type: NodeType.Fallback, desc: t('flow.guideFallbackNodeDesc') },
+      type: 'guide',
+      position: { x: 690, y: 90 },
+    },
+    {
+      id: createRandomString(),
+      source: idSource,
+      target: idProcessing,
+    },
+    {
+      id: createRandomString(),
+      source: idProcessing,
+      target: idSink,
+    },
+    {
+      id: idFallbackEdge,
+      source: idSink,
+      target: idFallback,
+      style: fallbackEdgeStyle,
+    },
+  ]
+
+  return {
+    allGuideFlowData,
+    idFallback,
+    idFallbackEdge,
+  }
+}