chore: init

packages/x6-react-shape/README.md

@@ -0,0 +1,49 @@
+# @antv/x6-react-shape
+
+> x6 shape for rendering react components
+
+## Installation
+
+```shell
+# npm
+$ npm install @antv/x6-react-shape --save
+
+# yarn
+$ yarn add @antv/x6-react-shape
+```
+
+## Usage
+
+```ts
+import { Graph, Shape } from '@antv/x6'
+import { ReactShape } from '@antv/x6-react-shape'
+
+// register shape with name "react"
+Shape.register('react', ReactShape, true) 
+
+// render
+graph.addNode({
+  x: 32,
+  y: 48,
+  width: 180,
+  height: 40,
+  stroke: '#597ef7',
+  label: false,   // no label
+  shape: 'react', // registered shape name
+  component: (    // react component
+    <div
+      style={{
+        color: '#fff',
+        width: '100%',
+        height: '100%',
+        background: '#597ef7',
+        textAlign: 'center',
+        lineHeight: '40px',
+      }}
+    >
+      This is a react element
+    </div>
+  ),
+})
+```
+

packages/x6-react-shape/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@antv/x6-react-shape",
+  "version": "0.2.2",
+  "description": "x6 shape for rendering react components",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "unpkg": "dist/x6-react-shape.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
+  "keywords": [
+    "shape",
+    "react",
+    "render",
+    "x6",
+    "antv"
+  ],
+  "scripts": {
+    "clean": "rimraf dist es lib",
+    "lint": "tslint -c tslint.json -p tsconfig.json --fix",
+    "watch": "watch 'yarn build' ./src",
+    "build:esm": "tsc --module esnext --target es2015 --outDir ./es",
+    "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
+    "build:umd": "rollup -c",
+    "build": "run-p build:cjs build:esm build:umd",
+    "prebuild": "run-s lint clean",
+    "prepare": "yarn build",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "src/**/*.ts": [
+      "tslint -c tslint.json -p ./tsconfig.json --fix",
+      "git add"
+    ]
+  },
+  "peerDependencies": {
+    "@antv/x6": "*",
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.7",
+    "@babel/preset-env": "^7.8.7",
+    "@rollup/plugin-commonjs": "^12.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-typescript": "^3.1.1",
+    "@types/node": "^13.9.1",
+    "@types/react": "^16.9.13",
+    "babel-loader": "^8.0.6",
+    "lint-staged": "^10.2.2",
+    "npm-run-all": "^4.1.5",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "rimraf": "^3.0.0",
+    "rollup": "^2.10.5",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-filesize": "^9.0.0",
+    "rollup-plugin-terser": "^5.3.0",
+    "sinon": "^7.5.0",
+    "ts-jest": "^24.0.2",
+    "ts-node": "^8.6.2",
+    "tslint": "^5.18.0",
+    "typescript": "^3.5.3",
+    "watch": "^1.0.2"
+  },
+  "author": {
+    "name": "bubkoo",
+    "email": "bubkoo.wy@gmail.com"
+  },
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "https://github.com/antvis/x6",
+  "bugs": {
+    "url": "https://github.com/antvis/x6/issues"
+  },
+  "repository": "https://github.com/antvis/x6/tree/master/packages/x6-react-shape",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

packages/x6-react-shape/rollup.config.js

@@ -0,0 +1,31 @@
+import { terser } from 'rollup-plugin-terser'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import filesize from 'rollup-plugin-filesize'
+import typescript from '@rollup/plugin-typescript'
+import autoExternal from 'rollup-plugin-auto-external'
+
+export default {
+  input: './src/index.ts',
+  output: [
+    {
+      name: 'X6ReactShape',
+      format: 'umd',
+      file: 'dist/x6-react-shape.js',
+      sourcemap: true,
+      globals: {
+        react: 'React',
+        'react-dom': 'ReactDom',
+        '@antv/x6': 'X6',
+      },
+    },
+  ],
+  plugins: [
+    typescript({ outDir: './dist' }),
+    resolve(),
+    commonjs(),
+    terser(),
+    filesize(),
+    autoExternal(),
+  ],
+}

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

@@ -0,0 +1,2 @@
+export * from './node'
+export * from './view'

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

@@ -0,0 +1,98 @@
+import { Graph, Node, Dom } from '@antv/x6'
+
+export class ReactShape<
+  Properties extends Node.Properties = Node.Properties
+> extends Node<Properties> {
+  get component() {
+    return this.getComponent()
+  }
+
+  set component(val: ReactShape.Properties['component']) {
+    this.setComponent(val)
+  }
+
+  getComponent(): ReactShape.Properties['component'] {
+    return this.store.get('component')
+  }
+
+  setComponent(
+    component: ReactShape.Properties['component'],
+    options: Node.SetOptions = {},
+  ) {
+    this.store.set('component', component, options)
+    return this
+  }
+}
+
+export namespace ReactShape {
+  export type Component = React.ReactElement
+
+  export interface Properties extends Node.Properties {
+    component?:
+      | ((this: Graph, node: Node) => Component | null | undefined)
+      | Component
+      | null
+  }
+}
+
+export namespace ReactShape {
+  ReactShape.config({
+    view: 'react-shape-view',
+    markup: [
+      {
+        tagName: 'rect',
+        selector: 'body',
+      },
+      {
+        tagName: 'foreignObject',
+        selector: 'fo',
+        children: [
+          {
+            ns: Dom.ns.xhtml,
+            tagName: 'body',
+            selector: 'foBody',
+            attrs: {
+              xmlns: Dom.ns.xhtml,
+            },
+            children: [
+              {
+                tagName: 'div',
+                selector: 'container',
+                style: {
+                  width: '100%',
+                  height: '100%',
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        tagName: 'text',
+        selector: 'label',
+      },
+    ],
+    attrs: {
+      body: {
+        fill: 'none',
+        stroke: 'none',
+        refWidth: '100%',
+        refHeight: '100%',
+      },
+      fo: {
+        refWidth: '100%',
+        refHeight: '100%',
+      },
+      label: {
+        fontSize: 14,
+        fill: '#333',
+        refX: '50%',
+        refY: '50%',
+        textAnchor: 'middle',
+        textVerticalAnchor: 'middle',
+      },
+    },
+  })
+
+  Node.registry.register('react-shape', ReactShape)
+}

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

@@ -0,0 +1,59 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { NodeView } from '@antv/x6'
+import { ReactShape } from './node'
+import { Wrap } from './wrap'
+
+export class ReactShapeView extends NodeView<ReactShape> {
+  public reactContainer: HTMLElement
+
+  render() {
+    super.render()
+    this.renderReactComponent()
+    return this
+  }
+
+  confirmUpdate(flag: number) {
+    const ret = super.confirmUpdate(flag)
+    return this.handleAction(ret, ReactShapeView.action, () =>
+      this.renderReactComponent(),
+    )
+  }
+
+  protected renderReactComponent() {
+    const root = this.unmountReactComponent()
+    const node = this.cell as ReactShape
+    if (root) {
+      ReactDOM.render(
+        React.createElement(Wrap, { node }, node.getComponent()),
+        root,
+      )
+    }
+  }
+
+  protected unmountReactComponent() {
+    const root = this.container.querySelector('foreignObject > body > div')
+    if (root) {
+      ReactDOM.unmountComponentAtNode(root)
+    }
+    return root
+  }
+
+  @NodeView.dispose()
+  dispose() {
+    this.unmountReactComponent()
+  }
+}
+
+export namespace ReactShapeView {
+  export const action = 'react' as any
+
+  ReactShapeView.config({
+    bootstrap: [action],
+    actions: {
+      component: action,
+    },
+  })
+
+  NodeView.registry.register('react-shape-view', ReactShapeView)
+}

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { ReactShape } from './node'
+
+export class Wrap extends React.PureComponent<Wrap.Props, Wrap.State> {
+  state = { tick: 0 }
+
+  componentDidMount() {
+    this.props.node.on('change:*', () => {
+      this.setState({ tick: this.state.tick + 1 })
+    })
+  }
+
+  render() {
+    const child = React.Children.only(this.props.children)
+    return React.isValidElement(child)
+      ? React.cloneElement(child, { node: this.props.node })
+      : child
+  }
+}
+
+export namespace Wrap {
+  export interface State {
+    tick: number
+  }
+
+  export interface Props {
+    node: ReactShape
+  }
+}

packages/x6-react-shape/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json",
+}

packages/x6-react-shape/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tslint.json"
+}