How to use the @antv/x6.Shape.Rectangle function in @antv/x6

import { util, Shape, SvgCanvas2D } from '@antv/x6'

export class InternalStorageShape extends Shape.Rectangle {
  dx: number = 20
  dy: number = 20

  isHtmlAllowed() {
    return false
  }

  drawForeground(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    super.drawForeground(c, x, y, w, h)

    let inset = 0
    if (this.rounded) {
      const f = (this.style.arcSize || 0.15 * 100) / 100
      inset = Math.max(inset, Math.min(w * f, h * f))
    }

import { getFactor } from './util'
import { util, Shape, SvgCanvas2D, Direction, Rectangle } from '@antv/x6'

export class ProcessShape extends Shape.Rectangle {
  factor: number = 0.1
  direction: Direction

  isHtmlAllowed() {
    return false
  }

  getInset(width: number, height: number, round?: boolean) {
    let inset = getFactor(this.style, this.factor, width)

    if (this.rounded) {
      const f = (this.style.arcSize || 0.15 * 100) / 100
      inset = util.clamp(f * width, f * height, inset)
    }

    if (round) {

import ReactDOM from 'react-dom'
import { util, Shape, Rectangle, SvgCanvas2D } from '@antv/x6'
import { Component } from './extend'

export class ReactShape extends Shape.Rectangle {
  container: HTMLElement | null

  constructor(public component?: Component | null) {
    super(new Rectangle())
  }

  drawBackground(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    super.drawBackground(c, x, y, w, h)
    if (!this.outline && !this.facade) {
      this.renderReactComponent()
    }
  }

  renderReactComponent() {
    const bounds = this.bounds.clone()
    let transform = `translate(${bounds.x},${bounds.y})`