@antv/g6-react-node
TypeScript icon, indicating that this package has built-in type declarations

1.4.8 • Public • Published

G6 React Node

Using React Component to custom your g6 node

Docs

https://dicegraph.github.io/

Example

import {
  Group,
  Rect,
  Text,
  Circle,
  Image,
  createNodeFromReact,
} from '@antv/g6-react-node';
const ReactNode = ({ cfg = {} }) => {
  const { description, meta = {}, label = 'label' } = cfg;
  return (
    <Group>
      <Rect>
        <Rect
          style={{
            width: 150,
            height: 20,
            fill: cfg.color,
            radius: [6, 6, 0, 0],
            cursor: 'move',
            stroke: cfg.color,
          }}
          draggable
        >
          <Text
            style={{
              marginTop: 2,
              marginLeft: 75,
              textAlign: 'center',
              fontWeight: 'bold',
              fill: '#fff',
            }}
          >
            {label}
          </Text>
        </Rect>
        <Rect
          style={{
            width: 150,
            height: 55,
            stroke: cfg.color,
            fill: '#ffffff',
            radius: [0, 0, 6, 6],
          }}
        >
          <Text style={{ marginTop: 5, fill: '#333', marginLeft: 4 }}>
            Desc: {description}
          </Text>
          <Text style={{ marginTop: 10, fill: '#333', marginLeft: 4 }}>
            Creator: {meta.creatorName}
          </Text>
        </Rect>
      </Rect>
      <Circle
        style={{
          stroke: cfg.color,
          r: 10,
          fill: '#fff',
          marginLeft: 75,
          cursor: 'pointer',
        }}
        name="circle"
      >
        <Image
          style={{
            img:
              'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
            width: 12,
            height: 12,
            marginLeft: 69,
            marginTop: -5,
          }}
        />
      </Circle>
    </Group>
  );
};
G6.registerNode('yourNode', createNodeFromReact(ReactNode));

Readme

Keywords

none

Package Sidebar

Install

npm i @antv/g6-react-node

Weekly Downloads

367

Version

1.4.8

License

MIT

Unpacked Size

153 kB

Total Files

101

Last publish

Collaborators

  • xuying1027
  • lvisei
  • yisi.wang
  • basketduck
  • biupiubiupiu
  • flash1
  • dreammy23
  • laixingui.lxg
  • zhangjunjie-loki
  • rainy25ghz
  • zeyuwang
  • yanxiong
  • susiwen8
  • freestyle21
  • soundquiet
  • elaine.q.10
  • sturuby
  • sakuya223
  • serializedowen
  • xdzhao
  • yangzhanmei
  • wjgogogo
  • leungwensen
  • dori
  • iaaron
  • yard
  • simaq
  • dxq613
  • intchous
  • susan_ann
  • jinke.li
  • lzxue
  • army8735
  • atool
  • baizn
  • dengfuping
  • neoddish
  • jeffy2012
  • zqlu
  • afc163
  • pomelo-nwu
  • kopiluwaky
  • ccnuzindex
  • panyuqi
  • bubkoo
  • zengyue
  • kasmine
  • boyu.zlj
  • l1ud0ngq1
  • newbyvector
  • winniexing
  • chenluli
  • kn9117
  • xdddst
  • semious2020
  • esora
  • nadia_liu
  • bbsqq
  • mxz96102
  • openwayne
  • pearmini
  • pddpd
  • yiqianyao
  • zhanba
  • cxxxxxn