Organizer: Front end talk early

Share person: Ze Hui, Millet

Application scenarios

  • The Web version of XMind supports custom requirements. Apply to test case management.
  • Intelligent manufacturing process, asset prototype management, front end capability map management, Mi notes mind map. Custom nodes and connections between nodes.

Problems at the start

  • Various types of technology
  • Some types are no longer iterative
  • Limited control integration extensions, such as DOM customization and React/Vue extensions
  • Business componentization has high demands, customization cannot be made out of the box, and secondary development costs are high

The target

  1. Meet a variety of application scenarios
  2. High degree of technical customization. The bottom layer is controllable, the algorithm is controllable and the workflow is controllable.

Technology selection

D3.js is used at the bottom

  • Fine control size
  • Rich in mature products

The project design

Mife – Graphic Implementation solution

1. The engine

  • D3.js, Echarts, Antv, ife-graphic. Core

2. com ponent extension

  • Component.chart

  • Component.flow

  • Component.okr

  • .

3.Editor/React/Vue upper package

  • Hina – Editor, the Sale – the Manage…

The material market

Various components -> different combinations -> different functional requirements

Graphic API

Constructors

  • constructor

Properties

  • data
  • gLink
  • gNode
  • gTransform
  • gZoom

.

Methods

  • resizeUpdate
  • setTransform

.

By inheriting this layer of components, more low-level components can be developed.

Simple implementation

selection-init

export function svgInit(this: Core.Graphic, selection: d3.Selection<any.any.any.any>) {
  const { clientWidth, clientHeight } = this.options.container;

  this.svg = selection
    .append('svg')
    .attr('viewBox'[0.0, clientWidth, clientHeight].join(' '))
    .style('width'.`${clientWidth}px`)
    .style('height'.`${clientHeight}px`)
    .style('position'.'absolute')
    .style('top'.'0')
    .style('left'.'0')

  return this.svg;
}
Copy the code

selection-event

selection-update

.

The implementation is relatively easy to understand, here is not an example.

Core design principles

Single responsibility principle

  • A program does one thing well
  • If the function is too complex, break it up and each part remains independent

Open/closed principle

  • Open for extension, closed for modification
  • When requirements are added, extend new code rather than modify existing code

A goal

Mind maps

  • Layout/edit/collapse
  • History/Copy and paste

OKR extension

  • The React extension
  • Fully automatic layout of child nodes

Performance and scaling

Performance optimization particle size controllable to achieve the minimum Funtion.

Maintain good scalability of mainstream frameworks, and consider extending Canvas/WebGL at the bottom level in the future.

Data is recommended

Data Visualization (Interviews with 40 Data Designers)