React Draggable Board是一个基于Web技术的无边框画布组件，允许用户拖放、缩放元素等交互操作，解决了程序员开发麻烦、用户体验不佳等问题。此组件内置了容器组件和可放置于容器内的Nodes，支持配置可操作性：draggable, resizable, connectable, disabled，每个操作都有回调勾子。同时还支持可调节项和开发者选项支持。

gif 图片

Install

npm install draggable-board
# or
yarn add draggable-board

Examples

// index.jsx
import React from 'react'
import { DraggableBoard, DraggableBoardDataset } from 'draggable-board'

const nodeStyle = {
  height: '100%',
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}

const dataset: any = new DraggableBoardDataset({
  // nodes are required, it's an array of node
  nodes: [
    {
      // The 3 fields listed above are required: [key, view, render]
      key: `node-a`, // key is used to identify a node, it should be unique

      // view is used to describe the position and size of a node
      view: {
        position: { x: 100, y: 100, z: 1 }, // z is optional, but if you want to use z-index, you should set it, if not have z value, then z will be "auto" in css
        size: { w: 220, h: 150 }, // size is controlled by user, so it's required
      },

      // render content of a node, it's a function that returns a react element
      render: (node: any) => {
        return <div style={{ background: 'pink', ...nodeStyle }}>this is {node.name}</div>
      },

      // you can keep your fields here, they will be passed to render function
      // like this:
      name: 'John',
      age: 18,
      height: 180,
    },
    {
      key: `node-b`,
      view: {
        position: { x: 450, y: 300, z: 1 },
        size: { w: 300, h: 300 },
      },
      render: (node: any) => {
        return <div style={{ background: 'darkseagreen', ...nodeStyle }}>this is {node.key}</div>
      },
    },
  ],

  // links are optional, you can ignore it if you don't need it
  // links set the connection between nodes
  links: [
    {
      from: { key: 'node-a', port: 'right' },
      to: { key: 'node-b', port: 'left' },
    },
  ],
})

export const App = () => {
  return (
    <DraggableBoard
      dataset={dataset}
      containerSize={{ w: 1000, h: 800 }}
      onCallback={(eventName, data) => {
        console.log(`* Event happened: ${eventName}, the data is:`, data)
      }}
    />
  )
}

🎉 Congratulations! You should be able to see a board has 2 nodes and 1 link between them.

Parameter Table

| Parameter Name | Default Value | Description | | ----------------- | ---------------------- | ----------------------------------------------------------------------------------------- | | containerSize | { w: 600, h: 600 } | The size of the container in which the DraggableBoard component is rendered. | | scaleRange | { min: 0.2, max: 5 } | The range of allowed scales for the DraggableBoard component. | | scaleSpeed | 15 | The speed at which the DraggableBoard component scales when the user interacts with it. | | offsetSpeed | 25 | The speed at which the DraggableBoard component moves when the user interacts with it. | | alignStrategy | "default" | The strategy used to align the DraggableBoard component within the container. | | dataset | undefined | The data used to render the DraggableBoard component. | | render | undefined | The function used to render the DraggableBoard component. | | backgroundColor | "transparent" | The background color of the DraggableBoard component. | | devMode | false | Whether the DraggableBoard component is in development mode. | | onCallback | undefined | The function called when certain events occur within the DraggableBoard component. |

基本功能总览

跳转 storybook 在线演示地址

使用场景演示

1. 无边界笔记，可参考 heptabase
2. 工作流编辑，可参考 n8n
3. 流程图绘制，可参考 drawio, jam

功能调节和可选项

• 可调节支持
  • containerSize({x, y})
  • offsetSpeed(number)
  • offsetStrategy(number | "unlimited")
  • scaleSpeed(number)
  • scaleStrategy({max: 10, min: 0.1})
  • offsetCompensator("defualt" | "center" | "left" | "top") 位移补偿器
  • mode("readOnly", "default", "?devloper", "inside")
  • interactiveMethod("magic-pad", "mouse")
• 开发者选项支持
  • devTools layout render：show offset, scale, vectors、elements borders
  • dev custom elements 支持

外观调整

• 外观风格指定：None, Base, Daisy, Linear
• 连接线风格指定：Line
• 深色模式/浅色模式
• 背景波点

接入方式说明

利用 标签和回调机制实现项目隔离

兼容性说明

RoadMap

• [ ] 固定限位选项，例如在类似泳道图的场景中，需要固定某些元素的位置，限制其拖动范围
• [ ]