This series of tutorials is to teach you how to create an online drawing software of your own according to the open source JS drawing library. Of course, you can also see the development tutorial of this drawing library. If you feel good, welcome to like, let us have more motivation to do it!

This tutorial series focuses on developing your own drawing software, so the React basics and framework are not covered here. Learn how to react. Learn how to React. Learn how to React.

Source code for this tutorial is Github

In tutorial 1, we set up a basic framework. Now we implement the top navigation menu bar.

  • Building a project framework, Tutorial 1
  • Dva (Redux), Tutorial two
  • Right menu, tutorial three
  • HTTP communication, Tutorial three
  • Routing, Tutorial three

React communication between components – menu events

Here, we implement message communication between components in a Redux manner. UmiJS is a bit more encapsulated and easier to use.

1. Create a store-model

We create a new event.ts file under the SRC/Models folder for store handling of message events. Mainly includes:

  • Namespace – Indicates the namespace
  • The state – data
  • Reducers – Data porters

For those of you who haven’t worked with Redux, the Models is where the data is stored. Use namespace to divide modules or avoid naming conflicts; State: The react state is used to store data. Reducers: Receive the update command, according to the command parameters (state: original data; Action: new behavior parameter data), and then add its own business logic to implement how to update the data. Here, for example, is a simple assignment with no additional business logic. Note that as a hard and fast rule, reducers returns a new copy of the data rather than directly changing the state in the Models. Therefore, the first line below return (… State is a copy of all attributes of the original state, and then the second and third lines are assigned new values.

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

2. In onMenuClick, send the modify data command with Dispatch

UmiJs + DvaJS encapsulates dispatches to react props. So far, our menu events are very simple, no extra data, we just dispatch the menu command (key). Where, Type means to find which function to process the data in all the store’s reducers (not only the model above, but also all the other models) in the format: namespace (event)/reducers function (emit). Payload specifies the parameter used to update data.

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

3. On the page that needs to receive menu messages, connect to bind data

  1. Import connection function: import {connect} from ‘dva’;
  2. TSX = pages/index.tsx
export default connect((state: any) => ({ event: state.event }))(Index);
Copy the code

State :any = props for adding event to pages/index

4. On the Page page componentDidUpdate, receive messages

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); }}}Copy the code

We first determine whether the message has been processed to avoid an infinite loop. And then let the specific function handle it.

5. Finally, refer to the development documentation for the Canvas interface

www.yuque.com/alsmile/top…

Communicate between react components – Status bar in the upper right corner

1. Create a store-model

Used for communication or create a new store, the SRC/models/canvas. Data. Ts. This model is used to save data to the global Canvas.

2. Monitor canvas messages and dispatch the latest status

In SRC /pages/index.ts, we have previously set the canvas onMessage function to listen. Now we add ‘resize’, ‘scale’, ‘locked’ and other events to handle:

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

3. On the layouts/headers. TSX screen, connect to bind data

import { connect } from 'dva';

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

4. Render function

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

Here, we have no special business processing, directly formatted display can be.

Third, the end of this article

Top menu navigation bar basic functions complete. You are welcome to add and submit the GitHub PR: 0. Read the development documentation for the properties.

  1. Fork warehouse to own name
  2. Make changes locally and submit them to your own Git repository
  3. Find the “Pull Request” button in your fork repository and submit it

other

Right-click menu and other features page to be continued.

Open source projects are not easy, you are welcome to join, or sponsor the server: