fix: render react component

examples/x6-example-features/src/pages/react/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Graph, Color } from '@antv/x6'
+import '@antv/x6-react-shape'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+    })
+
+    const sourceColor = Color.random()
+    const targetColor = Color.random()
+    const source = graph.addNode({
+      type: 'react-shape',
+      x: 80,
+      y: 80,
+      width: 160,
+      height: 60,
+      component: (
+        <div
+          style={{
+            color: Color.invert(sourceColor, true),
+            width: '100%',
+            height: '100%',
+            textAlign: 'center',
+            lineHeight: '60px',
+            background: sourceColor,
+          }}
+        >
+          Source
+        </div>
+      ),
+    })
+
+    const target = graph.addNode({
+      type: 'react-shape',
+      x: 200,
+      y: 200,
+      width: 160,
+      height: 60,
+      component: (
+        <div
+          style={{
+            color: Color.invert(targetColor, true),
+            width: '100%',
+            height: '100%',
+            textAlign: 'center',
+            lineHeight: '60px',
+            background: targetColor,
+          }}
+        >
+          Source
+        </div>
+      ),
+    })
+
+    graph.addEdge({
+      type: 'edge',
+      source,
+      target,
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/router/index.tsx

@@ -20,7 +20,6 @@ export default class Example extends React.Component<
       container: this.container,
       width: 1000,
       height: 600,
-      gridSize: 10,
     })
 
     const source = graph.addNode({

packages/x6/src/graph/renderer.ts

@@ -3,7 +3,7 @@ import { KeyValue } from '../types'
 import { Point, Rectangle } from '../geometry'
 import { Cell, Edge, Model } from '../model'
 import { View, CellView, NodeView, EdgeView } from '../view'
-import { Flag } from '../view/flag'
+import { FlagManager } from '../view/flag'
 import { Graph } from './graph'
 import { Base } from './base'
 
@@ -200,7 +200,7 @@ export class Renderer extends Base {
           continue
         }
 
-        const flagLabels: Flag.Action[] = ['update']
+        const flagLabels: FlagManager.Action[] = ['update']
         if (edge.getTargetCell() === cell) {
           flagLabels.push('target')
         }

packages/x6/src/index.less

@@ -45,12 +45,17 @@
 
   /* stylelint-disable-next-line */
   foreignobject {
-    overflow: hidden;
+    display: block;
+    overflow: visible;
+    background-color: transparent;
 
     & > body {
       position: static;
+      width: 100%;
+      height: 100%;
       margin: 0;
       padding: 0;
+      overflow: visible;
       background-color: transparent;
     }
   }

packages/x6/src/model/edge.ts

@@ -1276,7 +1276,7 @@ export namespace Edge {
 }
 
 export namespace Edge {
-  export type Definition = typeof Edge & (new (...args: any[]) => Edge)
+  export type Definition = typeof Edge
 
   let counter = 0
   function getClassName(name?: string) {

packages/x6/src/model/node.ts

@@ -1036,7 +1036,7 @@ export namespace Node {
 }
 
 export namespace Node {
-  export type Definition = typeof Node & (new (...args: any[]) => Node)
+  export type Definition = typeof Node
 
   let counter = 0
   function getClassName(name?: string) {

packages/x6/src/view/cell.ts

@@ -2,20 +2,20 @@ import { Registry } from '../common'
 import { Nilable, KeyValue } from '../types'
 import { Rectangle, Point } from '../geometry'
 import { ArrayExt, ObjectExt, Dom } from '../util'
+import { ConnectionStrategy } from '../connection'
 import { Attr } from '../definition/attr'
 import { Cell } from '../model/cell'
 import { Edge } from '../model/edge'
 import { Model } from '../model/model'
 import { Graph } from '../graph/graph'
-import { ConnectionStrategy } from '../connection'
 import { View } from './view'
-import { Flag } from './flag'
 import { Cache } from './cache'
 import { Markup } from './markup'
 import { EdgeView } from './edge'
 import { NodeView } from './node'
 import { ToolsView } from './tool'
 import { AttrManager } from './attr'
+import { FlagManager } from './flag'
 
 export class CellView<
   Entity extends Cell = Cell,
@@ -29,17 +29,17 @@ export class CellView<
     actions: {},
   }
 
-  static getDefaults() {
+  public static getDefaults() {
     return this.defaults
   }
 
-  static config<T extends CellView.Options = CellView.Options>(
+  public static config<T extends CellView.Options = CellView.Options>(
     options: Partial<T>,
   ) {
     this.defaults = this.getOptions(options)
   }
 
-  static getOptions<T extends CellView.Options = CellView.Options>(
+  public static getOptions<T extends CellView.Options = CellView.Options>(
     options: Partial<T>,
   ): T {
     const mergeActions = <T>(arr1: T | T[], arr2?: T | T[]) => {
@@ -86,7 +86,7 @@ export class CellView<
   public cell: Entity
   protected selectors: Markup.Selectors
   protected readonly options: Options
-  protected readonly flag: Flag
+  protected readonly flag: FlagManager
   protected readonly attr: AttrManager
   protected readonly cache: Cache
 
@@ -99,7 +99,11 @@ export class CellView<
     this.cell = cell
     this.options = this.ensureOptions(options)
     this.attr = new AttrManager(this)
-    this.flag = new Flag(this, this.options.actions, this.options.bootstrap)
+    this.flag = new FlagManager(
+      this,
+      this.options.actions,
+      this.options.bootstrap,
+    )
     this.cache = new Cache(this)
 
     this.setContainer(this.ensureContainer())
@@ -192,18 +196,6 @@ export class CellView<
     return this
   }
 
-  protected renderChildren(children: Markup.JSONMarkup[]) {
-    if (children) {
-      const isSVG = this.container instanceof SVGElement
-      const ns = isSVG ? Dom.ns.svg : Dom.ns.xhtml
-      const ret = Markup.parseJSONMarkup(children, { ns })
-      Dom.empty(this.container)
-      Dom.append(this.container, ret.fragment)
-      // this.childNodes = doc.selectors
-    }
-    return this
-  }
-
   confirmUpdate(flag: number, options: any = {}) {
     return 0
   }
@@ -212,23 +204,23 @@ export class CellView<
     return this.flag.getBootstrapFlag()
   }
 
-  getFlag(actions: Flag.Actions) {
+  getFlag(actions: FlagManager.Actions) {
     return this.flag.getFlag(actions)
   }
 
-  hasAction(flag: number, actions: Flag.Actions) {
+  hasAction(flag: number, actions: FlagManager.Actions) {
     return this.flag.hasAction(flag, actions)
   }
 
-  removeAction(flag: number, actions: Flag.Actions) {
+  removeAction(flag: number, actions: FlagManager.Actions) {
     return this.flag.removeAction(flag, actions)
   }
 
   handleAction(
     flag: number,
-    action: Flag.Action,
+    action: FlagManager.Action,
     handle: () => void,
-    additionalRemovedActions?: Flag.Actions | null,
+    additionalRemovedActions?: FlagManager.Actions | null,
   ) {
     if (this.hasAction(flag, action)) {
       handle()
@@ -800,8 +792,8 @@ export namespace CellView {
     priority: number
     isSvgElement: boolean
     rootSelector: string
-    bootstrap: Flag.Actions
-    actions: KeyValue<Flag.Actions>
+    bootstrap: FlagManager.Actions
+    actions: KeyValue<FlagManager.Actions>
     events?: View.Events | null
     documentEvents?: View.Events | null
     interactive?: Interactive
@@ -848,8 +840,6 @@ export namespace CellView {
   }
 }
 
-export namespace CellView {}
-
 export namespace CellView {
   export interface PositionEventArgs {
     x: number
@@ -896,6 +886,11 @@ export namespace CellView {
   }
 }
 
+export namespace CellView {
+  export const Flag = FlagManager
+  export const Attr = AttrManager
+}
+
 // decorators
 // ----
 export namespace CellView {
@@ -905,7 +900,7 @@ export namespace CellView {
     }
   }
 
-  export function bootstrap(actions: Flag.Actions) {
+  export function bootstrap(actions: FlagManager.Actions) {
     return function (ctor: typeof CellView) {
       ctor.config({ bootstrap: actions })
     }

packages/x6/src/view/flag.ts

@@ -1,19 +1,19 @@
 import { KeyValue } from '../types'
 import { CellView } from './cell'
 
-export class Flag {
+export class FlagManager {
   protected attrs: { [attr: string]: number }
   protected flags: { [name: string]: number }
-  protected bootstrap: Flag.Actions
+  protected bootstrap: FlagManager.Actions
 
   protected get cell() {
     return this.view.cell
   }
 
   constructor(
     protected view: CellView,
-    actions: KeyValue<Flag.Actions>,
-    bootstrap: Flag.Actions = [],
+    actions: KeyValue<FlagManager.Actions>,
+    bootstrap: FlagManager.Actions = [],
   ) {
     const flags: { [name: string]: number } = {}
     const attrs: { [attr: string]: number } = {}
@@ -58,7 +58,7 @@ export class Flag {
     this.bootstrap = bootstrap
   }
 
-  getFlag(label: Flag.Actions) {
+  getFlag(label: FlagManager.Actions) {
     const flags = this.flags
     if (flags == null) {
       return 0
@@ -71,11 +71,11 @@ export class Flag {
     return flags[label] | 0
   }
 
-  hasAction(flag: number, label: Flag.Actions) {
+  hasAction(flag: number, label: FlagManager.Actions) {
     return flag & this.getFlag(label)
   }
 
-  removeAction(flag: number, label: Flag.Actions) {
+  removeAction(flag: number, label: FlagManager.Actions) {
     return flag ^ (flag & this.getFlag(label))
   }
 
@@ -100,7 +100,7 @@ export class Flag {
   }
 }
 
-export namespace Flag {
+export namespace FlagManager {
   export type Action =
     | 'render'
     | 'update'

packages/x6/src/view/markup.ts

@@ -1,6 +1,6 @@
 import { Attr } from '../definition'
 import { KeyValue, Nilable } from '../types'
-import { ObjectExt, StringExt, Dom } from '../util'
+import { ObjectExt, StringExt, Dom, $ } from '../util'
 
 export type Markup = string | Markup.JSONMarkup | Markup.JSONMarkup[]