Draggable-board NPM

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 在线演示地址

使用场景演示

无边界笔记，可参考 heptabase
工作流编辑，可参考 n8n
流程图绘制，可参考 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 支持