I have been busy researching the Lowcode platform and developing the following two projects:

  • H5 editor H5-Dooring,
  • Visualized large screen editorV6.Dooring

I didn’t have much time to do the building project on the PC side. Fortunately, many principles of building the platform are common, so I developed the editor PC-Dooring for the PC side as early as last year. Although there are still some deficiencies in the design (which will be mentioned later), the basic model has been implemented. Let’s share the implementation with you.

In order to ensure the overall logic and organization of the article, I divided the concrete implementation of the visual building platform into the following parts:

  • PC editor effect display
  • Overall technical architecture
  • Visual construction technology implementation
  • Editor core ideas
  • Editor architecture model
  • How to develop standard material assemblies
  • Editor post planning

PC editor effect display

In the above demonstration, the component library approach is similar to H5-Dooring, except that the author uses the PC-specific component library ANTD, so we can integrate any component that ANTD supports into PC-Dooring.

Overall technical architecture

The overall technical architecture is very similar to the H5-Dooring class and follows my product design philosophy — don’t make the user think. Reduce the drag and drop complexity of everything and do it in the interactive mode of smart grid (this design approach has some limitations, just for your reference, or you can use v6.Dooring’s free layout mode). The overall structure is shown in the figure below:

From the figure above, we can see that the editor is mainly divided into the following parts:

  • Component materials
  • The canvas area
  • Property editing area
  • Auxiliary function
  • other

At present, component materials mainly realize the basic components, visual components and media components, other classes of component implementation is similar, the overall implementation of technology we will be introduced in the following.

Visual construction technology implementation

We still use React as the front-end framework. Of course, you can also use Vue3.0. The principles are the same, and different plug-ins also provide support for multiple frameworks. The core of the editor is component dragging. Here, the author uses the react-DND library, which is strong and stable in the community. The dragging is divided into two parts, one is the dragging from the component area to the canvas area, the other is the free dragging of components inside the canvas area. We can use the native H5 drag-and-drop API to implement the first part of the function. The essence is to transfer the data carried by the drag source to the specified area of the canvas. The target source listens to the event to take the data carried by the target source and dynamically render the actual component. The process is as follows:

Of course, the friends who have studied React-DND in detail know that the above two functions can be realized through React-DND, you can refer to its official website react-DND official website to learn the specific implementation process, you can also directly refer to the source code of PC-Dooring.

As for component libraries, we can use any familiar component libraries, such as ANTD, Element, Zant, etc. Component materials need to follow our agreed DSL protocol, here you can refer to the industrial protocol standard ODATA specification. With a specification, we can package standard component materials to integrate with third-party component libraries.

As for functional auxiliary modules and state management, we can use mobx, Redux, DVA and so on to achieve, the ultimate goal is to make different parts of the editor can be linked to each other, real-time update component state, and data transmission capability.

Editor core ideas

The author has also analyzed several existing solutions before, and found that the idea of Bytebik’s Cube is very appropriate, here is attached a schematic:

The core is the effective lexical data generated by the editor that the renderer can parse and render into usable HTML pages.

Editor overall architecture model

The overall architecture model of the editor is mainly for you to have a global understanding of the realization idea of the visual editor and the future planning direction. The author has made a basic sketch, as follows:

How to develop standard material assemblies

Developing standard component materials requires following the data protocols and component development specifications within our editor. Developing components in PC-Dooring mainly consists of the following parts:

  • Component code
  • Schema definition
  • The template definition

Component code is the specific implementation of the component, as follows:

import React, { memo } from 'react';
import { ITextConfig } from './schema';
import logo from '@/assets/text.png';
const Text = memo((props: ITextConfig & { isTpl: boolean }) = > {
  const { align, text, fontSize, color, lineHeight, isTpl } = props;
  return (
    <>
      {isTpl ? (
        <div>
          <img src={logo} alt=""></img>
        </div>
      ) : (
        <div style={{ color.textAlign: align.fontSize.lineHeight}} >{text}</div>
      )}
    </>
  );
});
export default Text;
Copy the code

Schema defines component property constraints, editable item types, and default values, as follows:

import {
  IColorConfigType,
  INumberConfigType,
  ISelectConfigType,
  ITextConfigType,
  TColorDefaultType,
  TNumberDefaultType,
  TSelectDefaultType,
  TTextDefaultType,
} from '@/components/FormComponents/types';

export type TTextSelectKeyType = 'left' | 'right' | 'center';
export type TTextEditData = Array<
  ITextConfigType | IColorConfigType | INumberConfigType | ISelectConfigType<TTextSelectKeyType>
>;
export interface ITextConfig {
  text: TTextDefaultType;
  color: TColorDefaultType;
  fontSize: TNumberDefaultType;
  align: TSelectDefaultType<TTextSelectKeyType>;
  lineHeight: TNumberDefaultType;
}

export interface ITextSchema {
  editData: TTextEditData;
  config: ITextConfig;
}
const Text: ITextSchema = {
  editData: [{key: 'text'.name: 'words'.type: 'Text'}, {key: 'color'.name: 'Title Color'.type: 'Color'}, {key: 'fontSize'.name: 'Font size'.type: 'Number'}, {key: 'align'.name: 'Alignment'.type: 'Select'.range: [{key: 'left'.text: 'Left alignment'}, {key: 'center'.text: 'Center align'}, {key: 'right'.text: 'Right alignment',},],}, {key: 'lineHeight'.name: 'high line'.type: 'Number'],},config: {
    text: 'I am text'.color: 'rgba (60,60,60,1)'.fontSize: 18.align: 'center'.lineHeight: 2,}};export default Text;
Copy the code

Template specifies the basic way components are displayed on the canvas, as follows:

const template = {
  type: 'Text'.h: 20.displayName: 'Text Component'};export default template;
Copy the code

You can also extend the definition or merge the schema and template. As long as a component meets the above conventions, it can be consumed by our editor.

Editor post planning

At present, there are still some problems in PC editor that have not been well solved. For example, the limitation of layout means that many components must be horizontally expanded to meet the personalized needs of different users. Secondly, the component linkage mechanism needs to be managed by a unified data center. If you are interested, you can do it.

Pc-dooring is currently fully open source on Github under the MIT protocol, so if you’re interested, you can do your part to help the community solve more problems.

Find it useful? Like the collection, by the way, click like it, your support is my biggest encouragement! Wechat search “interesting talk front end”, found more interesting H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization front-end knowledge and practical.