@live-change/flow-frontend 0.9.226 → 0.9.228

package/front/src/components/Flow.vue

@@ -15,13 +15,14 @@
            transform, transformOrigin: '0 0',
            width: flow?.size?.width + 'px', height: flow?.size?.height + 'px'
          }">
-<!--      <pre class="absolute text-xs">{{ JSON.stringify(freeEdge, null, 2) }}</pre>-->
       <svg xmlns="http://www.w3.org/2000/svg" class="absolute w-full h-full pointer-events-none">
         <slot name="background-edges" v-bind="flow" />
       </svg>
-      <slot v-bind="flow" />
       <svg xmlns="http://www.w3.org/2000/svg" class="absolute w-full h-full pointer-events-none">
         <slot name="foreground-edges" v-bind="flow" />
+      </svg>
+      <slot v-bind="flow" />
+      <svg xmlns="http://www.w3.org/2000/svg" class="absolute w-full h-full pointer-events-none">
         <slot name="free-edge" v-bind="{ freeEdge, flow }" />
       </svg>
     </div>
@@ -30,7 +31,7 @@
 
 <script setup>
 
-  import { defineProps, defineEmits, toRefs, reactive, ref, onMounted, onUnmounted, watch, computed } from "vue"
+  import { defineProps, defineEmits, toRefs, reactive, ref, onMounted, onUnmounted, watch, computed, unref } from "vue"
   import { useFlow } from "./index.js"
 
   const viewport = ref(null)
@@ -127,7 +128,7 @@
         if(flow.options.connect) {
           flow.options.connect(newEdge)
         } else {
-          flow.edges.push(newEdge)
+          unref(flow.edges).push(newEdge)
         }
       }
     },

package/front/src/components/Node.vue

@@ -17,7 +17,7 @@
 
   const { node } = toRefs(props)
 
-  const flow = inject("flow")
+  const flow = inject("flow", null)
 
   const element = ref(null)
 

package/front/src/components/NodeHandle.vue

@@ -19,7 +19,7 @@
 
   const { node } = toRefs(props)
 
-  const flow = inject("flow")
+  const flow = inject("flow", null)
 
   function handleMouseDown(event) {
     event.preventDefault()

package/front/src/components/NodePort.vue

@@ -42,7 +42,7 @@
 
   const { node, portId, direction, newEdgeOptions } = toRefs(props)
 
-  const flow = inject("flow")
+  const flow = inject("flow", null)
 
   const element = ref(null)
 
@@ -56,7 +56,6 @@
 
   function handleMouseDown(event) {
     event.preventDefault()
-    console.log("start draw edge", node.value.id, portId.value)
     flow.startDrawEdge(node.value, portId.value, event, newEdgeOptions)
   }
 

package/front/src/components/index.js

@@ -1,7 +1,7 @@
 import { ref, unref, reactive, computed, inject, provide, watch } from "vue"
 
 export function useFlow(options) {
-  const existingFlow = inject("flow")
+  const existingFlow = inject("flow", null)
   if(existingFlow && options) throw new Error("Flow already exists")
   if(existingFlow) return existingFlow
 
@@ -98,14 +98,15 @@ export function useFlow(options) {
   }
 
   function findNode(nodeId) {
+    nodeId = getNodeId(nodeId)
     if(options.findNode) return options.findNode(nodeId)
     if(options.findNodeIndex) return unref(nodes)[options.findNodeIndex(nodeId)]
-    return unref(nodes).value.find(n => n.id == node)
+    return unref(nodes).find(n => n.id == nodeId)
   }
   function findNodeIndex(nodeId) {
     nodeId = getNodeId(nodeId)
     if(options.findNodeIndex) return options.findNodeIndex(nodeId)
-    return unref(nodes).value.findIndex(n => n.id == node)
+    return unref(nodes).findIndex(n => n.id == nodeId)
   }
   function getNodeId(nodeId) {
     if(typeof nodeId == "string") return nodeId
@@ -118,14 +119,15 @@ export function useFlow(options) {
   }
 
   function findEdge(edgeId) {
+    edgeId = getEdgeId(edgeId)
     if(options.findEdge) return options.findEdge(edgeId)
     if(options.findEdgeIndex) return unref(edges)[options.findEdgeIndex(edgeId)]
-    return unref(edges).value.find(e => e.id == edgeId)
+    return unref(edges).find(e => e.id == edgeId)
   }
   function findEdgeIndex(edgeId) {
     edgeId = getEdgeId(edgeId)
     if(options.findEdgeIndex) return options.findEdgeIndex(edgeId)
-    return unref(edges).value.findIndex(e => e.id == edgeId)
+    return unref(edges).findIndex(e => e.id == edgeId)
   }
   function getEdgeId(edgeId) {
     if(typeof edgeId == "string") return edgeId
@@ -160,7 +162,6 @@ export function useFlow(options) {
   function setPortElement(nodeId, portId, element, direction) {
     nodeId = getNodeId(nodeId)
     if (typeof portId != "string") portId = portId.id ?? `${nodeId}/${portId.name}`
-    console.log("setPortElement", nodeId, portId, element)
     const nodeView = nodeViews.get(nodeId)
     if(!nodeView) {
       return
@@ -265,9 +266,8 @@ export function useFlow(options) {
   }
 
   function startDrawEdge(nodeId, portId, event, newEdgeOptions) {
-    console.log("startDrawEdge", nodeId, portId, event)
     nodeId = getNodeId(nodeId)
-    if (typeof portId != "string") portId = portId.id ?? `${node.id}/${portId.name}`
+    if (typeof portId != "string") portId = portId.id ?? `${nodeId}/${portId.name}`
     dragState.value = {
       type: "drawEdge",
       node: nodeId,
@@ -283,7 +283,7 @@ export function useFlow(options) {
     if(options.deleteEdge) {
       options.deleteEdge(unref(edges)[edgeIndex])
     } else {
-      edges.splice(edgeIndex, 1)
+      unref(edges).splice(edgeIndex, 1)
     }
   }
 
@@ -298,7 +298,7 @@ export function useFlow(options) {
     if(options.deleteNode) {
       options.deleteNode(unref(nodes)[nodeIndex])
     } else {
-      nodes.splice(nodeIndex, 1)
+      unref(nodes).splice(nodeIndex, 1)
     }
   }
 

package/front/src/config.js

@@ -0,0 +1,90 @@
+import deepmerge from 'deepmerge'
+
+import * as en from '../locales/en.js'
+import flowEn from '../locales/en.json'
+import { locales as baseLocales } from '@live-change/frontend-base'
+
+import Aura from '@primeuix/themes/aura'
+import { definePreset } from '@primeuix/themes'
+
+const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
+export default {
+
+  primeVue: {
+    theme: {
+      preset: definePreset(Aura, {
+        semantic: {
+          primary: Object.fromEntries(
+            levels.map(level => [level, `{blue.${level}}`])
+          ),
+          colorScheme: {
+            light: {
+              surface: {
+                0: '#ffffff',
+                ...Object.fromEntries(
+                  levels.map(level => [level, `{zinc.${level}}`])
+                )
+              },
+              primary: {
+                contrastColor: '#000000'
+              }
+            },
+            dark: {
+              surface: {
+                0: '#ffffff',
+                ...Object.fromEntries(
+                  levels.map(level => [level, `{slate.${level}}`])
+                )
+              }
+            }
+          }
+        }
+      }),
+      options: {
+        prefix: 'p',
+        darkModeSelector: '.app-dark-mode',
+        cssLayer: {
+          name: 'primevue',
+          order: 'base, primevue'
+        }
+      }
+    },
+    ripple: true
+  },
+
+  defaultLocale: 'en',
+  localeSelector: ({ headers }) => {
+    const acceptLanguage = headers?.['accept-language']
+    if (acceptLanguage) {
+      const code = acceptLanguage.split(',')[0].trim().split('-')[0]
+      if (code) return code
+    }
+    if (typeof window !== 'undefined') {
+      const html = document.querySelector('html')
+      const lang = html?.getAttribute('lang')
+      if (lang) return lang.split('-')[0]
+    }
+    return 'en'
+  },
+
+  i18n: {
+    messages: {
+      en: deepmerge.all([
+        baseLocales.en,
+        flowEn,
+        en.messages
+      ])
+    },
+    numberFormats: {
+      en: deepmerge.all([
+        en.numberFormats
+      ])
+    },
+    datetimeFormats: {
+      en: deepmerge.all([
+        en.datetimeFormats
+      ])
+    }
+  }
+}

package/front/src/demo/DemoEdge.vue

@@ -0,0 +1,38 @@
+<template>
+  <Edge :edge="edge">
+    <template #default="{ src, dest }">
+      <EdgeBezierCurve :src="src" :dest="dest" v-slot="{ bezierPath }" >
+        <path :d="bezierPath" stroke="black" fill="none" stroke-width="10" stroke-linecap="round" />
+        <path :d="bezierPath" stroke="rgb(76, 175, 80)" fill="none" stroke-width="9" stroke-linecap="round"
+              :data-testid="`delete-edge-${edgeTestId}`" class="pointer-events-auto cursor-pointer"
+              @click.stop="flow.deleteEdge(edge)" />
+      </EdgeBezierCurve>
+
+      <EdgeEndHandle v-if="edge.src.node && edge.dest.node" :position="src" :edge="edge" end="src" />
+      <EdgeEndHandle v-if="edge.dest.node && edge.src.node" :position="dest" :edge="edge" end="dest" />
+    </template>
+  </Edge>
+</template>
+
+<script setup>
+
+  import Edge from "../components/Edge.vue"
+  import EdgeBezierCurve from "../components/EdgeBezierCurve.vue"
+  import EdgeEndHandle from "../components/EdgeEndHandle.vue"
+
+  import { defineProps, toRefs, computed } from "vue"
+  import { useFlow } from "../components/index.js"
+  import { flowTestId } from "./flowTestId.js"
+
+  const props = defineProps({
+    edge: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { edge } = toRefs(props)
+  const flow = useFlow()
+  const edgeTestId = computed(() => flowTestId(edge.value?.id))
+
+</script>

package/front/src/demo/DemoNodeCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <Node :node="node">
+    <div class="demo-node-card">
+      <NodeHandle :node="node" class="demo-node-handle">
+        <i :class="['pi', icon, 'text-sm']" />
+        <span>{{ title }}</span>
+      </NodeHandle>
+      <div class="demo-node-body">
+        <slot />
+      </div>
+      <div class="demo-node-footer">
+        <Button @click="emit('delete')" size="small" severity="danger"
+                variant="outlined" rounded icon="pi pi-trash"
+                data-testid="delete-node" />
+      </div>
+    </div>
+  </Node>
+</template>
+
+<script setup>
+
+  import Node from "../components/Node.vue"
+  import NodeHandle from "../components/NodeHandle.vue"
+
+  import { defineProps, defineEmits, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    }
+  })
+
+  const { node, title, icon } = toRefs(props)
+
+  const emit = defineEmits(['delete'])
+
+</script>
+
+<style>
+  .demo-node-card {
+    background: var(--p-surface-0, #ffffff);
+    border: 1px solid var(--p-surface-200, #e5e7eb);
+    border-radius: 12px;
+    box-shadow:
+      0 4px 10px rgba(0, 0, 0, 0.12),
+      0 1px 5px rgba(0, 0, 0, 0.12);
+    min-width: 13rem;
+    max-width: 16rem;
+    color: var(--p-surface-900, #212121);
+  }
+  .demo-node-handle {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 1.125rem;
+    font-weight: 500;
+    padding: 0.5rem 0.75rem 0.45rem;
+    margin-bottom: 0.15rem;
+    border-bottom: 1px solid var(--p-surface-200, #f3f4f6);
+  }
+  .demo-node-body {
+    padding-bottom: 0.15rem;
+  }
+  .demo-node-section {
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--p-surface-500, #6b7280);
+    padding: 0.25rem 0.75rem 0.15rem;
+  }
+  .demo-node-footer {
+    display: flex;
+    justify-content: center;
+    padding: 0.25rem 0 0.5rem;
+  }
+</style>

package/front/src/demo/DemoPort.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="relative w-4 h-4 shrink-0">
+    <NodePort :node="node" :portId="portId" :direction="{ x, y: 0 }"
+         class="absolute rounded-full bg-green-500 w-4 h-4 border border-white"
+         :style="{ left: `${-0.5 + x * 0.3}rem`, top: `-0.5rem` }"
+         :data-testid="`port-${flowTestId(node.id)}-${portId}`">
+    </NodePort>
+  </div>
+</template>
+
+<script setup>
+
+  import { defineProps, toRefs } from "vue"
+  import NodePort from "../components/NodePort.vue"
+  import { flowTestId } from "./flowTestId.js"
+
+  const props = defineProps({
+    x: {
+      type: Number,
+      required: true
+    },
+    node: {
+      type: Object,
+      required: true
+    },
+    portId: {
+      type: String,
+      required: true
+    }
+  })
+
+  const { x, node, portId } = toRefs(props)
+
+</script>

package/front/src/demo/EnrichNode.vue

@@ -0,0 +1,37 @@
+<template>
+  <DemoNodeCard :node="node" title="Enrich" icon="pi-cog" @delete="deleteNode">
+    <div class="demo-node-section">Add field</div>
+    <div class="flex items-center p-1">
+      <DemoPort :x="-1" :node="node" portId="in" />
+      <div class="flex-1 mx-2">
+        <InputText v-model="node.field" class="w-full text-sm mb-2" placeholder="field name" />
+        <InputText v-model="node.value" class="w-full text-sm" placeholder="value" />
+      </div>
+      <DemoPort :x="1" :node="node" portId="out" />
+    </div>
+  </DemoNodeCard>
+</template>
+
+<script setup>
+
+  import DemoNodeCard from "./DemoNodeCard.vue"
+  import DemoPort from "./DemoPort.vue"
+  import { useFlow } from "../components/index.js"
+
+  import { defineProps, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { node } = toRefs(props)
+  const flow = useFlow()
+
+  function deleteNode() {
+    flow.deleteNode(node.value)
+  }
+
+</script>

package/front/src/demo/FlowKitchenSink.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="w-full h-screen flex flex-col">
+    <NavBar />
+    <div class="bg-surface-0 dark:bg-surface-900 py-2 px-4 shadow flex items-center gap-2 z-10 flex-wrap">
+      <Button label="Add source" icon="pi pi-plus" size="small" data-testid="add-source"
+              @click="addNode('source')" />
+      <Button label="Add enrich" icon="pi pi-plus" size="small" severity="secondary"
+              data-testid="add-enrich" @click="addNode('enrich')" />
+      <Button label="Add output" icon="pi pi-plus" size="small" severity="secondary"
+              data-testid="add-output" @click="addNode('output')" />
+      <Button label="Run sample" icon="pi pi-play" size="small" severity="success"
+              data-testid="run-sample" @click="runSample" />
+      <Button label="Reset" icon="pi pi-refresh" size="small" severity="warning" variant="outlined" @click="resetGraph" />
+      <span v-if="runError" class="text-red-600 text-sm ml-2">{{ runError }}</span>
+    </div>
+    <div class="flex flex-1 min-h-0">
+      <Flow class="flex-1 grow">
+        <template #default>
+          <component v-for="node of nodes" :key="node.id" :is="nodeComponentByType[node.type]" :node="node"
+                       :style="{ left: node.position.x + 'px', top: node.position.y + 'px' }"
+                       class="absolute" :data-testid="`node-${node.type}`">
+          </component>
+        </template>
+        <template #foreground-edges>
+          <DemoEdge v-for="edge of edges" :key="edge.id" :edge="edge" />
+        </template>
+        <template #free-edge="{ freeEdge }">
+          <DemoEdge v-if="freeEdge" :edge="freeEdge" />
+        </template>
+      </Flow>
+      <aside class="w-80 bg-surface-100 dark:bg-surface-800 border-l border-gray-200 overflow-auto p-3">
+        <div class="font-semibold mb-2">Last run</div>
+        <pre class="text-xs m-0 whitespace-pre-wrap" data-testid="last-run">{{ lastRunText }}</pre>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import Flow from '../components/Flow.vue'
+  import { useFlow } from '../components/index.js'
+  import NavBar from "../NavBar.vue"
+  import SourceNode from "./SourceNode.vue"
+  import EnrichNode from "./EnrichNode.vue"
+  import OutputNode from "./OutputNode.vue"
+  import DemoEdge from "./DemoEdge.vue"
+  import { createSeedGraph, STORAGE_KEY } from "./seedGraph.js"
+  import { runDemoGraph } from "./runDemoGraph.js"
+
+  import { computed, onMounted, ref, watch } from 'vue'
+
+  const nodeComponentByType = {
+    source: SourceNode,
+    enrich: EnrichNode,
+    output: OutputNode
+  }
+
+  const seed = createSeedGraph()
+  const nodes = ref(seed.nodes)
+  const edges = ref(seed.edges)
+  const lastRun = ref(null)
+  const runError = ref('')
+
+  const lastRunText = computed(() => {
+    if (!lastRun.value) return 'Press Run sample to execute the graph on the source record.'
+    return JSON.stringify(lastRun.value, null, 2)
+  })
+
+  function isConnectable(fromNode, fromPort, toNode, toPort) {
+    const fromId = typeof fromNode == 'string' ? fromNode : fromNode?.id
+    const toId = typeof toNode == 'string' ? toNode : toNode?.id
+    if (fromId && toId && fromId === toId) return false
+    if (!fromPort || !toPort) return true
+    return fromPort !== toPort
+      && (fromPort === 'in' || fromPort === 'out')
+      && (toPort === 'in' || toPort === 'out')
+  }
+
+  function connect(newEdge) {
+    if (newEdge.src.port !== 'out' && newEdge.dest.port === 'out') {
+      const tmp = newEdge.src
+      newEdge.src = newEdge.dest
+      newEdge.dest = tmp
+    }
+    edges.value.push(newEdge)
+  }
+
+  const flow = useFlow({
+    nodes,
+    edges,
+    width: 1600,
+    height: 900,
+    edgeConnectDistance: 48,
+    isConnectable,
+    connect
+  })
+
+  function persistableNodes() {
+    return nodes.value.map(node => {
+      const { lastRecord, ...rest } = node
+      return rest
+    })
+  }
+
+  onMounted(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY)
+      if (raw) {
+        const parsed = JSON.parse(raw)
+        if (Array.isArray(parsed.nodes) && Array.isArray(parsed.edges)) {
+          nodes.value = parsed.nodes
+          edges.value = parsed.edges
+        }
+      }
+    } catch (err) {
+      // keep seed graph
+    }
+    watch([nodes, edges], () => {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        nodes: persistableNodes(),
+        edges: edges.value
+      }))
+    }, { deep: true })
+  })
+
+  function addNode(type) {
+    const id = flow.generateNodeId()
+    const node = {
+      id,
+      type,
+      position: {
+        x: 80 - flow.position.x,
+        y: 80 - flow.position.y
+      }
+    }
+    if (type === 'source') node.record = { sku: 'NEW', qty: 1 }
+    if (type === 'enrich') {
+      node.field = 'extra'
+      node.value = ''
+    }
+    nodes.value.push(node)
+  }
+
+  function resetGraph() {
+    const next = createSeedGraph()
+    nodes.value = next.nodes
+    edges.value = next.edges
+    lastRun.value = null
+    runError.value = ''
+  }
+
+  function runSample() {
+    const result = runDemoGraph(nodes.value, edges.value)
+    lastRun.value = result
+    runError.value = result.error || ''
+    if (result.traces) {
+      for (const trace of result.traces) {
+        const node = nodes.value.find(n => n.id === trace.nodeId)
+        if (node) node.lastRecord = trace.record
+      }
+    }
+  }
+
+</script>

package/front/src/demo/OutputNode.vue

@@ -0,0 +1,45 @@
+<template>
+  <DemoNodeCard :node="node" title="Output" icon="pi-box" @delete="deleteNode">
+    <div class="demo-node-section">Result</div>
+    <div class="flex items-center p-1">
+      <DemoPort :x="-1" :node="node" portId="in" />
+      <pre class="demo-node-result flex-1 mx-2 my-0 overflow-auto">{{
+        JSON.stringify(node.lastRecord ?? {}, null, 2)
+      }}</pre>
+    </div>
+  </DemoNodeCard>
+</template>
+
+<script setup>
+
+  import DemoNodeCard from "./DemoNodeCard.vue"
+  import DemoPort from "./DemoPort.vue"
+  import { useFlow } from "../components/index.js"
+
+  import { defineProps, toRefs } from "vue"
+
+  const props = defineProps({
+    node: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { node } = toRefs(props)
+  const flow = useFlow()
+
+  function deleteNode() {
+    flow.deleteNode(node.value)
+  }
+
+</script>
+
+<style scoped>
+  .demo-node-result {
+    font-size: 0.75rem;
+    max-height: 8rem;
+    background: var(--p-surface-50, #f9fafb);
+    border-radius: 8px;
+    padding: 0.4rem 0.5rem;
+  }
+</style>