feat: add nested transform and the test

Author: EralChen

examples/vue3-app/src/App.vue

@@ -32,6 +32,11 @@ import { RouterView } from 'vue-router'
  <el-icon><TrendCharts /></el-icon>
  <span>LFChartView</span>
  </el-menu-item>
+
+ <el-menu-item index="/nested-transform">
+ <el-icon><TrendCharts /></el-icon>
+ <span>NestedTransform</span>
+ </el-menu-item>
  </el-menu>
  </div>
  </header>

examples/vue3-app/src/components/LogicFlow/index.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+import VkLogicFlow from './src/index.vue'
+
+export * as __VkLogicFlow from './src/types'
+export { useLogicFlow } from './src/use'
+
+VkLogicFlow.install = (app: App): void => {
+ app.component(VkLogicFlow.name || 'VkLogicFlow', VkLogicFlow)
+}
+export { VkLogicFlow }
+export default VkLogicFlow

examples/vue3-app/src/components/LogicFlow/src/TeleportContainer.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { getTeleport } from '@logicflow/vue-node-registry'
+import { ref } from 'vue'
+import { useLogicFlow } from './use'
+
+const flowId = ref('')
+const TeleportContainer = getTeleport()
+
+const lf = useLogicFlow()
+lf.once('graph:rendered', ({ graphModel }) => {
+ flowId.value = graphModel.flowId as string
+})
+</script>
+
+<template>
+ <TeleportContainer v-if="flowId" :flow-id="flowId" />
+</template>

examples/vue3-app/src/components/LogicFlow/src/ctx.ts

@@ -0,0 +1,18 @@
+import type { PropType } from 'vue'
+import type { DefaultOptions, LoadEvent } from './types'
+
+export const props = {
+ defaultOptions: {
+ type: Object as PropType<DefaultOptions>,
+ default: () => ({})
+ },
+
+ defaultEdgeType: {
+ type: String,
+ required: false
+ }
+}
+
+export const emits = {
+ load: (_e: LoadEvent) => true
+}

examples/vue3-app/src/components/LogicFlow/src/index.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import { LogicFlow } from '@logicflow/core'
+import { defineComponent, onMounted, ref, watchEffect } from 'vue'
+import { emits, props } from './ctx'
+
+import TeleportContainer from './TeleportContainer.vue'
+import { provideLogicFlow, tryLogicFlow } from './use'
+
+export default defineComponent({
+ name: 'VkLogicFlow',
+ components: {
+ TeleportContainer
+ },
+ inheritAttrs: false,
+ props,
+ emits,
+ setup(props, { emit }) {
+ const parentLogicFlow = tryLogicFlow()
+ const containerRef = ref() as Ref<HTMLDivElement>
+ const ready = ref(false)
+ onMounted(() => {
+ const options = {
+ container: containerRef.value,
+ parentTransform: parentLogicFlow?.graphModel.transformModel,
+ // 其他配置
+ ...props.defaultOptions
+ }
+ const lf = new LogicFlow(options)
+
+ watchEffect(() => {
+ props.defaultEdgeType && lf.setDefaultEdgeType(props.defaultEdgeType)
+ })
+
+ ready.value = true
+ provideLogicFlow(lf)
+ emit('load', { lf })
+ })
+
+ return {
+ containerRef,
+ ready
+ }
+ }
+})
+</script>
+
+<template>
+ <div class="vk-logic-flow" v-bind="$attrs">
+ <main ref="containerRef"></main>
+
+ <TeleportContainer v-if="ready" />
+ <slot v-if="ready"></slot>
+ </div>
+</template>
+
+<style>
+.vk-logic-flow {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+.vk-logic-flow main {
+ width: 100%;
+ height: 100%;
+}
+</style>

examples/vue3-app/src/components/LogicFlow/src/types.ts

@@ -0,0 +1,9 @@
+import type { LogicFlow, Options } from '@logicflow/core'
+
+export type DefaultOptions = Partial<Options.Common>
+
+export interface LoadEvent {
+ lf: LogicFlow
+}
+
+export type OnLoad = (e: LoadEvent) => void

examples/vue3-app/src/components/LogicFlow/src/use.ts

@@ -0,0 +1,24 @@
+import type { LogicFlow } from '@logicflow/core'
+import type { InjectionKey } from 'vue'
+
+import { inject, provide } from 'vue'
+
+const symbol = Symbol('LogicFlow') as InjectionKey<LogicFlow>
+
+export function provideLogicFlow(lf: LogicFlow) {
+ provide(symbol, lf)
+}
+
+export function useLogicFlow(): LogicFlow {
+ const lf = inject(symbol, null)
+ if (!lf) {
+ throw new Error(
+ 'LogicFlow instance is not provided. Please ensure you have called provideLogicFlow before using useLogicFlow.'
+ )
+ }
+ return lf
+}
+
+export function tryLogicFlow(): LogicFlow | null {
+ return inject(symbol, null)
+}

examples/vue3-app/src/components/LoopNode/index.vue

@@ -0,0 +1,65 @@
+<script lang="tsx" setup>
+import { register } from '@logicflow/vue-node-registry'
+import { useLogicFlow, VkLogicFlow } from '../LogicFlow'
+import { h } from 'vue'
+const lf = useLogicFlow()
+
+defineOptions({
+ name: 'LoopNode'
+})
+
+register(
+ {
+ type: 'loop-node',
+ component: {
+ props: ['node', 'graph'],
+
+ setup() {
+ return () =>
+ h(
+ 'div',
+ {
+ class: 'vk-register-node-x',
+ onMousedown: (e) => {
+ e.stopPropagation()
+ },
+ onWheel: (e) => {
+ e.stopPropagation()
+ }
+ },
+ [
+ h(VkLogicFlow, {
+ onLoad: ({ lf }) => {
+ lf.render({
+ nodes: [
+ {
+ id: 'start-node-1',
+ type: 'rect',
+ x: 50,
+ y: 50,
+ properties: {
+ name: 'Start Node'
+ }
+ }
+ ],
+ edges: []
+ })
+ }
+ })
+ ]
+ )
+ }
+ }
+ },
+ lf
+)
+</script>
+<template>
+ <slot></slot>
+</template>
+<style>
+.vk-register-node-x {
+ width: 500px;
+ height: 300px;
+}
+</style>

examples/vue3-app/src/components/LoopNode/types.ts

@@ -0,0 +1,15 @@
+import type { GraphModel, Model } from '@logicflow/core'
+import type { VueNodeModel } from '@logicflow/vue-node-registry'
+
+export interface RegisterNodeComponentProps {
+ graph: GraphModel
+ node: VueNodeModel
+}
+
+export interface AnchorConfig extends Model.AnchorConfig {
+ /**
+ * @description 控制是否可以在此锚点手动创建连线
+ * @link http://logicflow.cn/release/upgrade-to-v1-1#118-%E4%BB%A5%E4%B8%8B
+ */
+ edgeAddable?: boolean
+}

examples/vue3-app/src/router/index.ts

@@ -28,6 +28,11 @@ const router = createRouter({
  path: '/lf-chart',
  name: 'lfChart',
  component: () => import('../views/LFChartView.vue')
+ },
+ {
+ path: '/nested-transform',
+ name: 'nestedTransform',
+ component: () => import('../views/NestedTransformView.vue')
  }
  ]
 })