fix: 🐛 html shape

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

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Graph } from '@antv/x6'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+    })
+
+    const source = graph.addNode({
+      shape: 'html',
+      x: 80,
+      y: 80,
+      width: 160,
+      height: 60,
+      html: () => {
+        const wrap = document.createElement('div')
+        wrap.style.width = '100%'
+        wrap.style.height = '100%'
+        wrap.style.background = '#f0f0f0'
+        wrap.style.display = 'flex'
+        wrap.style.justifyContent = 'center'
+        wrap.style.alignItems = 'center'
+
+        wrap.innerText = 'hello'
+
+        return wrap
+      },
+    })
+
+    const wrap = document.createElement('div')
+    wrap.style.width = '100%'
+    wrap.style.height = '100%'
+    wrap.style.background = '#f0f0f0'
+    wrap.style.display = 'flex'
+    wrap.style.justifyContent = 'center'
+    wrap.style.alignItems = 'center'
+
+    wrap.innerText = 'world'
+
+    const target = graph.addNode({
+      shape: 'html',
+      x: 320,
+      y: 320,
+      width: 160,
+      height: 60,
+      html: wrap,
+    })
+
+    graph.addEdge({
+      source,
+      target,
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

packages/x6/src/shape/standard/html.ts

@@ -61,15 +61,19 @@ export namespace HTML {
     }
 
     protected renderHTMLComponent() {
-      const $container = this.$(this.container)
-        .find('foreignObject > div')
-        .empty()
+      const wrap = this.selectors.wrap
+      const $wrap = wrap
+        ? this.$(wrap)
+        : this.$(this.container).find('foreignObject > body > div')
+
+      $wrap.empty()
+
       const component = this.graph.hook.getHTMLComponent(this.cell)
       if (component) {
         if (typeof component === 'string') {
-          $container.html(component)
+          $wrap.html(component)
         } else {
-          $container.append(component)
+          $wrap.append(component)
         }
       }
     }
@@ -99,22 +103,25 @@ export namespace HTML {
       },
       {
         tagName: 'foreignObject',
-        selector: 'foreignObject',
+        selector: 'fo',
         children: [
           {
-            tagName: 'div',
             ns: Dom.ns.xhtml,
-            selector: 'label',
-            style: {
-              width: '100%',
-              height: '100%',
-              position: 'static',
-              backgroundColor: 'transparent',
-              textAlign: 'center',
-              margin: 0,
-              padding: 0,
-              boxSizing: 'border-box',
+            tagName: 'body',
+            selector: 'foBody',
+            attrs: {
+              xmlns: Dom.ns.xhtml,
             },
+            children: [
+              {
+                tagName: 'div',
+                selector: 'wrap',
+                style: {
+                  width: '100%',
+                  height: '100%',
+                },
+              },
+            ],
           },
         ],
       },
@@ -125,10 +132,12 @@ export namespace HTML {
     ],
     attrs: {
       body: {
+        fill: 'none',
+        stroke: 'none',
         refWidth: '100%',
         refHeight: '100%',
       },
-      foreignObject: {
+      fo: {
         refWidth: '100%',
         refHeight: '100%',
       },