@vyr/service-graph 0.0.1

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vyr/service-graph",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "vue": "3.5.22",
+    "@vyr/locale": "0.0.1",
+    "@vyr/engine": "0.0.1",
+    "@vyr/service": "0.0.1",
+    "jsondiffpatch": "^0.6.0",
+    "@antv/x6": "^2.18.1",
+    "@antv/x6-plugin-selection": "^2.2.2",
+    "@antv/x6-plugin-stencil": "^2.1.5",
+    "@antv/x6-plugin-history": "2.2.4"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ]
+}

package/src/GraphDrawer.ts

@@ -0,0 +1,309 @@
+import { Generate, Listener } from '@vyr/engine'
+import { Cell, CellView, Edge, Graph, Shape } from '@antv/x6'
+import { Selection } from '@antv/x6-plugin-selection'
+import { Stencil } from '@antv/x6-plugin-stencil'
+import { History } from '@antv/x6-plugin-history'
+import { Options } from '@antv/x6/lib/graph/options'
+import { Unit } from './common/Unit'
+import { language } from './locale'
+
+interface GraphObserver {
+    resize: (e: any) => void
+    select: (cell: Cell[]) => void
+    change: (e: {}) => void
+    remove: (cell: Cell) => void
+    link: (e: { source: string, target: string }) => void
+    unlink: (e: { source: string, target: string }) => void
+    dispose: (e: any) => void
+}
+type Connecting = Options.Connecting
+
+class GraphDrawer extends Listener<GraphObserver> {
+    private isReadonly = false
+    readonly connecting
+    readonly dom = document.createElement('div')
+    readonly selection: Selection
+    readonly stencil: Stencil
+    readonly graph: Graph
+    readonly history: History
+    readonly tool
+    selectEdge = ''
+    container: Element | null = null
+    needTriggerChange = false
+
+    constructor() {
+        super()
+        this.dom = document.createElement('div')
+        this.connecting = {
+            snap: true,
+            allowMulti: false,
+            allowBlank: false,
+            allowLoop: false,
+            allowNode: false,
+            highlight: true,
+            connector: 'rounded',
+            connectionPoint: 'boundary',
+            router: 'manhattan',
+            validateMagnet: this._validateMagnet,
+            validateConnection: this._validateConnection,
+        }
+
+        this.graph = new Graph({
+            container: this.dom,
+            autoResize: true,
+            mousewheel: true,
+            panning: { enabled: true },
+            interacting: this._interacting,
+            connecting: {
+                ...this.connecting,
+                createEdge: this._createEdge,
+            },
+        })
+        this.selection = new Selection({
+            enabled: true,
+            multiple: true,
+            rubberband: true,
+            movable: true,
+            modifiers: 'ctrl',
+            showNodeSelectionBox: true,
+            filter(cell) {
+                return cell instanceof Unit ? true : false
+            }
+        })
+        this.stencil = new Stencil({
+            target: this.graph,
+            title: language.get('graphDrawer.stencil.title'),
+            layoutOptions: { columns: 1, columnWidth: 200, dx: 20, },
+            stencilGraphHeight: 0,
+            stencilGraphPadding: 0,
+            groups: [{ name: 'inspector' }],
+        })
+        this.history = new History({ enabled: false, })
+        this.graph.use(this.selection)
+        this.graph.use(this.history)
+
+        this.tool = document.createElement('div')
+        this.tool.style.width = '240px';
+        this.tool.style.height = '100%';
+        this.tool.style.position = 'absolute';
+        this.tool.style.top = '0px'
+        this.tool.style.left = '0px'
+        this.tool.style.zIndex = '999'
+        this.tool.appendChild(this.stencil.container)
+        this.stencil.dnd.options.dndContainer = this.tool
+
+        this.graph.on('node:added', this._changeListener)
+        this.graph.on('node:removed', this._changeListener)
+        this.graph.on('edge:removed', this._changeListener)
+        this.graph.on('node:moved', this._changeListener)
+
+        this.graph.on('node:selected', this._delaySelect)
+        this.graph.on('node:unselected', this._delaySelect)
+
+        this.graph.on('edge:connected', (e) => {
+            //@ts-ignore
+            const source = e.edge.source.cell
+            //@ts-ignore
+            const target = e.edge.target.cell
+
+            const sourceCell = this.graph.getCellById(source)
+            const targetCell = this.graph.getCellById(target)
+            if (sourceCell instanceof Unit && targetCell instanceof Unit) {
+                this.trigger('link', { source, target })
+                this._changeListener()
+            }
+        })
+
+        //边
+        this.graph.on('edge:mouseenter', ({ edge }) => {
+        })
+        this.graph.on('edge:mouseleave', ({ edge }) => {
+        })
+        this.graph.on('edge:click', ({ edge }) => {
+            this._unselectEdge()
+            edge.setAttrs({ line: Unit.edge.highlight })
+            this.selectEdge = edge.id
+        })
+        this.graph.on('edge:removed', ({ edge }: any) => {
+            if (edge.id === this.selectEdge) this.selectEdge = ''
+            const source = this.graph.getCellById(edge.source.cell)
+            const target = this.graph.getCellById(edge.target.cell)
+            if (source instanceof Unit && target instanceof Unit) {
+                this.trigger('unlink', { source: edge.source.cell, target: edge.target.cell })
+            }
+        })
+
+        this.graph.on('blank:mouseup', () => {
+            this._unselectEdge()
+        })
+        this.graph.on('blank:contextmenu', (e) => {
+        })
+        this.graph.on('cell:contextmenu', ({ cell, x, y }) => {
+            if (cell instanceof Unit) cell.rightClick({ cell, x, y })
+        })
+        //点击节点
+        this.graph.on('cell:click', ({ cell, x, y }) => {
+            this._unselectEdge()
+            if (cell instanceof Unit) cell.click({ cell, x, y })
+        })
+
+        window.addEventListener('resize', this._resize)
+        window.addEventListener('keydown', this._delete)
+
+        this.listen('dispose', () => {
+            window.removeEventListener('resize', this._resize)
+            window.removeEventListener('keydown', this._delete)
+        })
+    }
+
+    private _interacting: CellView.Interacting = ({ cell }) => {
+        const result = {
+            nodeMovable: true
+        }
+
+        if (cell instanceof Unit) result.nodeMovable = cell.isMove()
+
+        return result
+    }
+    private _validateMagnet: Connecting['validateMagnet'] = ({ cell, magnet }) => {
+        return cell instanceof Unit ? cell.isCreateEdge(magnet) : false
+    }
+    private _createEdge: Connecting['createEdge'] = () => {
+        return new Shape.Edge({ attrs: Unit.edge })
+    }
+    private _validateConnection: Connecting['validateConnection'] = ({ sourceCell, targetCell, targetMagnet }) => {
+        if (!targetMagnet || !sourceCell) return false
+        return targetCell instanceof Unit ? targetCell.isConnection(targetMagnet, sourceCell) : false
+    }
+    private _undo = (e: KeyboardEvent) => {
+        if (e.ctrlKey === false || ['KeyZ'].includes(e.code) === false) return
+        if (this.history.canUndo()) this.history.undo()
+    }
+    private _redo = (e: KeyboardEvent) => {
+        if (e.ctrlKey === false || ['KeyY'].includes(e.code) === false) return
+        if (this.history.canRedo()) this.history.redo()
+    }
+    private _unselectEdge = () => {
+        if (this.selectEdge) {
+            const oldEdge = this.graph.getCellById(this.selectEdge)
+            oldEdge.setAttrs({ line: Unit.edge.line })
+        }
+        this.selectEdge = ''
+    }
+
+    private _delaySelect = Generate.delayExecute(() => {
+        const cells = this.selection.getSelectedCells()
+        this.trigger('select', cells)
+    })
+    private _changeListener = () => {
+        if (this.needTriggerChange === false) return
+        this._delayChange()
+    }
+    private _delayChange = Generate.delayExecute(() => {
+        this.trigger('change', {})
+    })
+    private _resize = Generate.delayExecute(() => {
+        if (!this.container) return
+        const rect = this.container.getBoundingClientRect()
+        this.graph.resize(rect.width, rect.height)
+        this.trigger('resize', {})
+    })
+
+    private _delete = (e: KeyboardEvent) => {
+        if (this.isReadonly === true) return
+        if (['Delete'].includes(e.code) === false) return
+        const cells = this.selection.getSelectedCells()
+        for (const cell of cells) this.remove(cell)
+        if (this.selectEdge) this.remove(this.graph.getCellById(this.selectEdge))
+    }
+
+    private _isEdgePort(data: { [k: string]: any }): data is { cell: string } {
+        return data?.cell ? true : false
+    }
+
+    getMapper(edge: Edge) {
+        if (this._isEdgePort(edge.source) === false) return null
+        if (this._isEdgePort(edge.target) === false) return null
+        return { source: edge.source.cell, target: edge.target.cell }
+    }
+
+    getEdgeOfMapper(source: string, target: string) {
+        const edge = {
+            shape: 'edge',
+            source: { cell: source, port: 'out' },
+            target: { cell: target, port: 'in' },
+            attrs: Unit.edge,
+        }
+
+        return edge
+    }
+
+    setReadonly(readonly: boolean) {
+        this.isReadonly = readonly
+        let display = 'none'
+        if (readonly) {
+            this.graph.options.interacting = false
+        } else {
+            this.graph.options.interacting = this._interacting
+            display = 'block'
+        }
+        this.tool.style.display = display
+    }
+
+    mount(container: Element | string) {
+        this.container = container instanceof Element ? container : document.getElementById(container) ?? null
+        if (this.container === null) return
+        this.container.appendChild(this.dom)
+        this.container.appendChild(this.tool)
+        this._resize()
+        window.addEventListener('keydown', this._redo)
+        window.addEventListener('keydown', this._undo)
+    }
+
+    unmount() {
+        if (!this.container) return
+        window.removeEventListener('keydown', this._redo)
+        window.removeEventListener('keydown', this._undo)
+        this.container.removeChild(this.dom)
+        this.container = null
+    }
+
+    find(id: string) {
+        const cells = this.graph.getCells()
+        for (const cell of cells) {
+            if (cell.id === id) return cell as Unit
+        }
+
+        return null
+    }
+
+    remove(cell: Cell) {
+        const parentCell = cell.parent
+        this.graph.removeCell(cell)
+
+        if (parentCell) {
+            const subs = parentCell.getChildren() as Cell[]
+            for (let i = 0; i < subs.length; i++) {
+                const sub = subs[i]
+                sub.setProp('position', { x: 0, y: i * Unit.height })
+            }
+        }
+
+        if (cell instanceof Unit) this.trigger('remove', cell)
+        cell.dispose()
+    }
+
+    clear() {
+        this._unselectEdge()
+        this.graph.resetCells([])
+        // this.history.clean()
+        this.selection.clean()
+    }
+
+    dispose() {
+        this.clear()
+        this.unmount()
+    }
+}
+
+export { GraphDrawer }

package/src/GraphService.ts

@@ -0,0 +1,181 @@
+import { reactive, AsyncComponentLoader, defineAsyncComponent } from 'vue'
+import { Service } from "@vyr/service"
+import { DeserializationObject, InteractionInputCollection, ObjectUtils, RoutineDescriptor, RoutineMapper, RoutineNode } from '@vyr/engine'
+import { Unit } from './common/Unit'
+import { BranchUnit, ConditionUnit, ExecuteUnit, RoutineUnit as GraphRoutineUnit } from './common/RoutineUnit'
+import { GraphDrawer } from './GraphDrawer'
+
+class GraphState {
+    width = '60%'
+    height = '60%'
+    visible = false
+    descriptor = ''
+    event = ''
+    inputs: InteractionInputCollection = {}
+    routine: DeserializationObject<RoutineDescriptor> | null = null
+
+    reset() {
+        this.descriptor = ''
+        this.event = ''
+        this.inputs = {}
+        this.routine = null
+    }
+}
+
+class GraphService extends Service {
+    private _map = new Map()
+    private _drawer: GraphDrawer | null = null
+    get drawer() {
+        if (this._drawer === null) {
+            this._drawer = new GraphDrawer()
+            this._drawer.stencil.load([
+                new ExecuteUnit({ drawer: this._drawer, label: 'Execute' },),
+                new BranchUnit({ drawer: this._drawer, label: 'Branch' }),
+                new ConditionUnit({ drawer: this._drawer, label: 'Condition' }),
+            ], 'inspector')
+        }
+        return this._drawer
+    }
+    readonly state = reactive(new GraphState())
+    routine: DeserializationObject<RoutineDescriptor> | null = null
+
+    private _doNodes(nodes: RoutineNode[]) {
+        for (const node of nodes) {
+            if (node.routine === 'Execute') {
+                const cell = new ExecuteUnit({ ...node, drawer: this.drawer })
+                this.drawer.graph.addCell(cell)
+            } else if (node.routine === 'Condition') {
+                this.drawer.graph.addCell(new ConditionUnit({ ...node, drawer: this.drawer }))
+            } else if (node.routine === 'Branch') {
+                this.drawer.graph.addCell(new BranchUnit({ ...node, drawer: this.drawer }))
+            }
+        }
+
+    }
+    private _doMappers(mappers: RoutineMapper[]) {
+        for (const mapper of mappers) {
+            const edge = this.drawer.getEdgeOfMapper(mapper.source, mapper.target)
+            this.drawer.graph.addEdge(edge)
+        }
+    }
+
+    private _diff(cur: RoutineNode[], old: RoutineNode[]) {
+        const addQueue: RoutineNode[] = []
+        const removeQueue: RoutineNode[] = []
+        const updateQueue: RoutineNode[] = []
+
+        const temp = new Map<string, RoutineNode>()
+        for (const oldItem of old) {
+            temp.set(oldItem.id, oldItem)
+        }
+
+        for (const curItem of cur) {
+            const oldItem = temp.get(curItem.id)
+            if (oldItem === undefined) {
+                addQueue.push(curItem)
+            } else {
+                if (ObjectUtils.equals(curItem, oldItem) === false) updateQueue.push(curItem)
+                temp.delete(curItem.id)
+            }
+        }
+
+        removeQueue.push(...temp.values())
+
+        return {
+            addQueue,
+            removeQueue,
+            updateQueue
+        }
+    }
+
+    render(routine: DeserializationObject<RoutineDescriptor>) {
+        this.routine = routine
+
+        this.drawer.needTriggerChange = false
+        this._doNodes(routine.nodes)
+        this._doMappers(routine.mappers)
+        this.drawer.needTriggerChange = true
+    }
+
+    update(curRoutine: DeserializationObject<RoutineDescriptor>) {
+        if (this.routine === null) return
+
+        this.drawer.needTriggerChange = false
+        this.drawer.selectEdge = ''
+        this.drawer.history.clean()
+        const selects = this.drawer.selection.getSelectedCells()
+
+        const edges = this.drawer.graph.getEdges()
+        for (const edge of edges) this.drawer.remove(edge)
+
+        const patch = this._diff(curRoutine.nodes, this.routine.nodes)
+
+        let needCleanSelection = false
+        for (const remove of patch.removeQueue) {
+            const cell = this.drawer.graph.getCellById(remove.id)
+            if (!cell) continue
+            if (selects.includes(cell)) needCleanSelection = true
+            this.drawer.remove(cell)
+        }
+
+        if (needCleanSelection) this.drawer.selection.clean()
+
+        this._doNodes(patch.addQueue)
+
+        for (const update of patch.updateQueue) {
+            const cell = this.drawer.graph.getCellById(update.id) as Unit
+            if (cell) cell.setVMeta(update)
+        }
+
+        this._doMappers(curRoutine.mappers)
+        this.drawer.needTriggerChange = true
+
+        this.routine = curRoutine
+    }
+
+    build() {
+        const routine = new RoutineDescriptor()
+        const cells = this.drawer.graph.getCells()
+
+        for (const cell of cells) {
+            if (cell instanceof GraphRoutineUnit) {
+                const node = {
+                    id: cell.id,
+                    label: cell.vMeta.label ?? '',
+                    url: cell.vMeta.url,
+                    routine: cell.vMeta.routine,
+                    input: cell.vMeta.input,
+                    position: cell.getPosition(),
+                }
+                routine.nodes.push(node)
+            } else if (cell.isEdge()) {
+                const mapper = this.drawer.getMapper(cell)
+                if (mapper) routine.mappers.push(mapper)
+            }
+        }
+
+        const roots = this.drawer.graph.getRootNodes()
+        for (const root of roots) routine.roots.push(root.id)
+
+        return { ...routine, uuid: this.routine?.uuid }
+    }
+
+    get(id: string) {
+        return this._map.get(id) ?? null
+    }
+
+    keys() {
+        return [...this._map.keys()]
+    }
+
+    set(id: string, executor: AsyncComponentLoader): void {
+        const component = defineAsyncComponent({
+            loader: executor,
+            timeout: 5000
+        })
+        this._map.set(id, component)
+    }
+
+}
+
+export { GraphService }