react 拖拽组件

完成功能

• [x] 容器组件（ 锁定 / 排序 / 多层级 ）
• [x] 标尺 （标尺坐标显示 / 新增删除标尺）
• [x] 图层树 (图层锁定 / 排序 / 删除 / 显示隐藏)
• [x] 拖拽组件 （拖拽 / 调整大小）
• [ ] 标尺吸附功能 （ 临近x轴y轴自动吸附 ）

示例

运行

npm run dev

props

• zoom:number 缩放
• width:number 宽度
• height :number 高度
• containerComps 容器组件
• containerUpdate(node:ITreeNode) 容器组件触发的回调

组件调用

import 'rc-draggable/dist/index.css'  //引入样式表文件
import {DrawCanvas,DrawRuler,ContainerComps,LayerTree,connector} from 'rc-draggable'

export default function (props){
    return <DrawCanvas {...props}>
        <LayerTree />
        <DrawRuler />
        <ContainerComps />
    </DrawCanvas>
}

• DrawCanvas 创建拖拽容器
• DrawRuler 创建标尺
• ContainerComps 创建容器组件
• connector 高阶组件（用于组件扩展）