fix: add getGraph provide (#3072)

Author: NewByVector

packages/x6-react-shape/src/view.ts

@@ -26,10 +26,7 @@ export class ReactShapeView extends NodeView<ReactShape> {
     const node = this.cell
 
     if (container) {
-      const graph = node.model ? node.model.graph : null
-      // Actually in the dnd plugin, this graph is empty,
-      // in order to make the external perception type of graph is a graph, rather than graph | null, so hack this.
-      const elem = React.createElement(Wrap, { node, graph: graph! })
+      const elem = React.createElement(Wrap, { node, graph: this.graph })
       if (Portal.isActive()) {
         const portal = createPortal(elem, container) as ReactPortal
         Portal.connect(this.cell.id, portal)

packages/x6-vue-shape/src/teleport.ts

@@ -1,4 +1,5 @@
 import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
+import { Graph } from '@antv/x6'
 import { VueShape } from './node'
 
 let active = false
@@ -9,6 +10,7 @@ export function connect(
   component: any,
   container: HTMLDivElement,
   node: VueShape,
+  graph: Graph,
 ) {
   if (active) {
     const { Teleport, markRaw } = Vue as any
@@ -17,6 +19,7 @@ export function connect(
         render: () => h(Teleport, { to: container } as any, [h(component)]),
         provide: () => ({
           getNode: () => node,
+          getGraph: () => graph,
         }),
       }),
     )

packages/x6-vue-shape/src/view.ts

@@ -40,12 +40,13 @@ export class VueShapeView extends NodeView<VueShape> {
             provide() {
               return {
                 getNode: () => node,
+                getGraph: () => this.graph,
               }
             },
           })
         } else if (isVue3) {
           if (isActive()) {
-            connect(this.targetId(), component, root, node)
+            connect(this.targetId(), component, root, node, this.graph)
           } else {
             this.vm = createApp({
               render() {
@@ -54,6 +55,7 @@ export class VueShapeView extends NodeView<VueShape> {
               provide() {
                 return {
                   getNode: () => node,
+                  getGraph: () => this.graph,
                 }
               },
             })