Package - @uyun/venomcanvas

介绍

@uyun/venomcanvas 是一套基于 react-dnd 和 d3，提供实现“搭建可视化画布”的工具组件。

当前功能

基础功能包括
拖拽节点
修改大小
层级绑定
自动吸附
自动对齐
自动标注间距
配置外部拖入目标
导出样式

TODO

~~自定义工具栏~~
~~块级元素控制~~
自动布局
...

组件介绍

主要基于如下三个组件来实现画布功能。参考如下 DEMO:

    import React from 'react'
    import { VenomProvider, Canvas, DragItem } from '@uyun/venomcanvas'

    export default () => {

        return (
            <div className="your-canvas-class">
                <VenomProvider>
                    <div>
                       <DragItem
                         item={{ title: 'div', isVirtual: true, Component: (props) => <div {...props}>content...</div>}}
                       >
                          <div> this is div tag </div>
                       </DragItem>
                       <DragItem
                         item={{ title: 'button', props: { children: 'click me', style: {width: 40} }, Component: <button /> }
                       >
                          <button> this is button </button>
                       </DragItem>
                    </div>
                    <Canvas />
                </VenomProvider>
            </div>
        )
    }

VenomProvider

该组件主要简单封装了React Dnd 和HTML5 拖放API的关系，是最顶层组件，其他所有组件需包含在该组件内使用。

DragItem

该组件用于配置可拖入到画布中的元素

属性

属性	说明	类型	默认值
className	设置当前选择的主机数据	string	-
style	主机原始数据	object	-
item	当元素被拖入画布时所接受的数据	object

属性 item 对象

属性	说明	类型	默认值
title	组件标题	string	-
Component	画布中展示的元素	React.Node	-
props	Component 组件的默认属性	object	-
isBlock	Component 是否是块级元素	boolean	false
isVirtual	Component 是否是不可见元素(eg: div, span 等常见 html 元素)	boolean	false
children	子元素	array	-
...	其他额外元素	-	-

Canvas

核心画布组件

属性

属性	说明	类型	默认值
data	画布中元素数据, 支持三种数据类型: DataType	array/object/array[]	-
currentKey	假如是多个画布的操作，该属性用于切换画布的操作	string	number
ref	画布跟踪对象, 通过 ref.current 来对画布进行相应的控制	React.createRef	-
toolProps	画布中工具栏属性	{}	-
onChange	画布中元素数据变化时回调	function(data, type) {}	-
onInsert	向画布中插入元素成功后回调	function(item){}	-
onSelect	画布中元素被选中时回调	function(items){}	-
onRemove	画布中元素被删除时回调	function(items){}	-
afterMove	画布中元素移动后回调	function(moveItems){}	-
afterResize	画布中元素修改大小后回调	function(item){}	-

三种数据类型


interface Item {
  readonly id: number
  title?: "string"
  props?: {}
  Component: React.ReactNode
  isBlock?: boolean
  isVirtual?: boolean
  x: number
  y: number
  children?: Item[]
}

export type DataType =
  | Item[]
  | Item[][]
  | {
      [key: string]: Item[]
    }

ref current

属性	说明	类型	默认值
state	画布的所有数据	{}	-
dispatch	可手动更新画布数据	React.Dispatch	-
actions	常用的快速更新画布数据的 actions	{}	-

tools

画布数据支持对象配置和默认工具搭配传入

属性	说明	类型	默认值
prepend	在默认画布前操作工具	搭配数据类型[]	-
tools	替换默认画布	搭配数据类型[]	-
append	在默认画布后操作工具	搭配数据类型[]	-

搭配数据类型


   import { Tools } from '@uyun/venomcanvas'

   <Canvas toolProps: {
       prepend: [
           <Tools.AutoLayout />,
           {
               icon: <i className="your icon" />,
               title: 'title',
               active: true,
               onClick: (state, dispatch, actions) => {}
           },
           Tools.Delete
       ]

   } />

默认工具组件

属性	说明	类型	默认值
Delete	删除组件	React.Node	-
Block	设置块属性组件	React.Node	-
Virtual	设置虚拟属性组件	React.Node	-
AutoLayout	自动对齐元素中的子元素	React.Node	-

actions

方法	说明	参数	默认值
insertItem	向画布中添加节点数据	function(item) {}	-
removeItems	删除画布中的节点数据	function(items) {}	-
updateItems	修改画布中某节点的数据, (item 必须包含 id 信息)	function(items, currentKey?: string) {}	-
updateSelectItems	修改当前选中的节点对象, (item 必须包含 id 信息)	function(items, currentKey?: string) {}	-

公共方法: Utils

方法	说明	参数	默认值
transformDataWithStyle	把画布中的数据进行样式导出	data: DataType, virtualTag: 自定义插入的虚拟标签	-


import { Utils } from "@uyun/venomcanvas"

const { transformDataWithStyle  } = Utils

const dataWithStyle = transformDataWithStyle((data: <a href="#三种数据类型">DataType</a>))

Current Tags

0.0.21 ... latest (5 years ago)

介绍