【前端新手也能做大项目】:跟我一起,从零打造一个属于自己的在线Visio项目实战【ReactJS】(二)

本系列教程是教大家如何根据开源js绘图库,打造一个属于自己的在线绘图软件。当然,也可以看着是这个绘图库的开发教程。如果你觉得好,欢迎点个赞,让我们更有动力去做好!

本系列教程重点介绍如何开发自己的绘图软件,因此,react基础和框架不在此介绍。可以推荐react官网学习,或《React全家桶免费视频》。

本系列教程源码地址:Github

前面教程一,搭建了一个基础框架,现在我们来实现顶部导航菜单栏功能。

一、react组件间通信 - 菜单事件

这里,我们通过redux方式来实现组件间消息通信。UmiJS做了一点封装,使用更简单。

1. 新建store - model

我们在src/models文件夹下新建event.ts文件,专门用于消息事件的store处理。
主要包含:

  • namespace - 命名空间
  • state - 数据
  • reducers - 数据搬运工

给没有接触过redux的同学简单介绍下,会的请自动跳过:
models是数据存储的地方。用namespace来进行模块划分或避免命名冲突;state:类似于react的state,专门用于存放数据;reducers:接收更新命令,根据命令参数(state :原数据;action:新行为参数数据),然后加上自己的业务逻辑,去实现如何更新数据。比如下面,只是简单的赋值,没有额外的业务逻辑。
注意,有个硬性规定就是,reducers要返回一个新数据副本,而不是直接修改models里面的state。因此,这里return下面的第一行(...state)就是先拷贝原始state所有属性,然后第二、三行,赋值新数据。

reducers: {
    emit(state, action) {
      return {
        ...state,
        event: action.payload.event,
        data: action.payload.data,
      };
    },
  },

2. 在onMenuClick里,用dispatch发送修改数据命令

UmiJs + DvaJS已经自动封装dispatch到react的props里了,我们直接拿来使用。
目前为止,我们的菜单事件很简单,没有额外数据,我们就直接dispatch发生菜单命令(key值)就好。
其中,type表示在store的所有reducers(不仅仅是上面的model,还包含其他所有model)中查找用哪个函数处理数据,格式:命名空间(event)/reducers函数(emit)。payload,更新数据用的参数。

this.props.dispatch({
            type: 'event/emit',
            payload: {
              event: key
            }
});

3. 在需要接收菜单消息的page页面,connect连接绑定数据

  1. 导入连接函数:import { connect } from 'dva';
  2. 绑定connect:在pages/index.tsx底部添加:
export default connect((state: any) => ({ event: state.event }))(Index);

上面,state:any是指整个store,我们这里暂时只用到event,故只返回event加入到pages/index的props。

4. 在page页面componentDidUpdate,接收消息

componentDidUpdate() {
    if (this.props.event !== this.state.event) {
      this.setState({ event: this.props.event });
      if (this['handle_' + this.props.event.event]) {
        this['handle_' + this.props.event.event](this.props.event.data);
      }
    }
  }

我们先判断消息是否已经处理过,避免无限循环。然后交给具体函数处理。

5. 最后,画布接口参考开发文档

https://www.yuque.com/alsmile...

二、react组件间通信 - 右上角状态栏

【前端新手也能做大项目】:跟我一起,从零打造一个属于自己的在线Visio项目实战【ReactJS】(二)_第1张图片

1. 新建store - model

还是先新建一个store用于通信,src/models/canvas.data.ts。这个model用于全局canvas的数据保存。

2. 监听画布canvas消息,dispatch最新状态

在src/pages/index.ts里,前面已经设置监听了canvas的消息onMessage函数。
现在我们添加‘resize’,‘scale’,‘locked’等事件的处理:

      case 'resize':
      case 'scale':
      case 'locked':
        if (this.canvas) {
          this.props.dispatch({
            type: 'canvas/update',
            payload: {
              data: this.canvas.data
            }
          });
        }
        break;

3. 在layouts/headers.tsx页面,connect连接绑定数据

import { connect } from 'dva';

export default connect((state: any) => ({ canvasData: state.canvas }))(Headers);

4. render函数显示即可

render(): React.ReactNode {
    const { data } = this.props.canvasData;
    const scale = Math.floor(data.scale);
        ......
}

这里,我们没有特别业务处理,直接格式化显示即可。

三、本篇最后

顶部菜单导航栏基础功能完成。还是欢迎大家补充并提交GitHub的pr

  1. 阅读开发文档,了解相关属性。
  2. fork仓库到自己名下
  3. 本地修改并提交到自己的git仓库
  4. 在自己的fork仓库找到 “Pull request” 按钮,提交

file

其他

右键菜单、图形列表等功能待续。

开源项目不易,欢迎大家一起参与,或资助服务器:

file

你可能感兴趣的:(javascript,react.js,canvas,html5,实战开发)