SolidEditor

[nutsjian]

1. SolidEditor

在分析SolidViewport源码之前，先讲一下SolidEditor的几个主要构件：Guides、InfiniteViewer、SolidViewport、MoveableManager(Moveable)、Selecto、SolidEditorManager。

Guides：是标尺辅助线组件；

InfiniteViewer：是无限滚动区域组件，方便我们在该区域快速滚动到画布设计的可见区域；

SolidViewport：是真正的设计可视区域；

MoveableManager(Moveable)：用来包装我们的可视化组件（2D、3D、表格等自定义可视化组件），包装后提升一些能力，包括拖拽、缩放、圆角及一些自定义能力；

Selecto：选择器组件，支持多选、框选可视区的组件；

SolidManager：SolidEditor的管理器，对外暴露一些函数供外部组件调用来和SolidEditor做交互，但SolidUI项目中，我打算通过EventBus来解藕整个项目的各个模块，SolidManager作为SolidEditor交互的统一入口，在SolidManager 中会订阅所有EventBus的event type，当有事件需要通知SolidEditor以便SolidEditor作出反馈的时候，SolidManager统一接管这些事件订阅，并把事件消息分发给SolidEditor内部组件的函数作出反馈。

综上，SolidUI 是用 React 开发的，我们的目的是想把 SolidEditor 做成一个高内聚，低耦合的功能丰富的编辑器组件。对外提供一系列方法函数或通过EventBus约定一些事件来做交互。

2. SolidViewport

SolidViewport 作为整个编辑器的可视区域，用来渲染各个视图组件（SolidView），各个组件在SolidViewport中抽象成ElementInfo类型的元素，

export interface ElementInfo {
  // 元素ID
  id?: string;
  // 元素类型

  jsx: SolidJSXType;
  // 元素名称
  name: string;
  // 父元素ID
  scopeId?: string;
  // 子元素集合
  children?: ElementInfo[];
  // DOM attributes 属性
  attrs?: IObject<any>;
  // 组件ID
  componentId?: string;
  jsxId?: string;
  // 真是DOM元素
  el?: HTMLElement | null;
  // 元素在当前兄弟节点中的索引号，根节点是 viewport
  index?: number;
}

SolidViewport 组件中有一个成员属性 ids 用来保存所有的视图元素。并且考虑到有的视图组件有容器的特性，所以在SolidViewport中的元素应该维护成一颗树，根元素是一个固定的元素viewport，在SolidViewport中一颗视图元素树的结构应该像下面这个样子。

其中粉丝背景的是该元素节点在当前层次的索引号，紫色背景的是该元素节点的ID。目前能想到的一些基本的函数功能包括：

• 给当前视图增加元素，增加元素的时候要考虑是否是添加到一个带有容器属性的元素中，而不是添加到根viewport元素下。

• 删除选中的一个或多个元素，注意删除的元素要检查是否有子元素，有子元素也要逐个删除。

• 能方便的通过当前元素选择兄弟节点。

• 通过ID找到ElementInfo元素。

• 通过ID集合找到ElementInfo元素集合。

• 获取当前SolidViewport下的所有ElementInfo元素集合。

详细的请参考v0.1.0版本的SolidViewport源码，我这里直接贴一些源码分析的截图：

---

1. SolidEditor

Before analyzing SolidViewport source code，first introduce the SolidEditor's main components：Guides, InfiniteViewer, SolidViewport, MoveableManager(Moveable), Selecto, SolidEditorManager。

• Guides: is the ruler auxiliary line component;

• InfiniteViewer: It is an infinite scrolling area component, which is convenient for us to quickly scroll to the visible area of the canvas design in this area;

• SolidViewport: is the real design visual area;

• MoveableManager (Moveable): used to package our visual components (custom visual components such as 2D, 3D, tables), etc. After packaging, some capabilities are improved, including dragging, zooming, rounded corners and some custom capabilities;

• Selecto: selector component, which supports multiple selection and frame selection of components in the visual area;

• SolidManager: The manager of SolidEditor, which exposes some functions for external components to call to interact with SolidEditor, but in the SolidUI project, I plan to use EventBus to decouple the various modules of the entire project. SolidManager is a unified entry for SolidEditor interaction. In SolidManager It will subscribe to all event types of EventBus. When there is an event that needs to be notified to SolidEditor so that SolidEditor can give feedback, SolidManager will uniformly take over these event subscriptions and distribute event messages to functions of SolidEditor internal components for feedback.

In summary, SolidUI is developed with React, and our goal is to make SolidEditor a highly cohesive, low-coupling feature-rich editor component. Provide a series of method functions or contract some events through EventBus to interact.

2. SolidViewport

SolidViewport is used as the visual area of the entire editor to render each view component (SolidView). Each component is abstracted into ElementInfo type elements in SolidViewport.

export interface ElementInfo {
   // element ID
   id?: string;
   // element type

   jsx: SolidJSXType;
   // element name
   name: string;
   // Parent element ID
   scopeId?: string;
   // collection of child elements
   children?: ElementInfo[];
   // DOM attributes property
   attrs?: IObject<any>;
   // component ID
   componentId?: string;
   jsxId?: string;
   // is really a DOM element
   el?: HTMLElement | null;
   // The index number of the element in the current sibling node, the root node is viewport
   index?: number;
}

There is a member attribute ids in SolidViewport component to save all view elements. And considering that some view components have the characteristics of containers, the elements in SolidViewport should be maintained as a tree, and the root element is a fixed element viewport. The structure of a view element tree in SolidViewport should look like the following.

Among them, the fan background is the index number of the element node at the current level, and the purple background is the ID of the element node. Some basic functions that can be thought of at present include:

• Add elements to the current view. When adding elements, consider whether to add them to an element with a container attribute instead of adding them to the root viewport element.

• Delete one or more selected elements, pay attention to check whether the deleted element has child elements, and delete the child elements one by one.

• It is convenient to select sibling nodes through the current element.

• Find the ElementInfo element by ID.

• Find the ElementInfo element collection through the ID collection.

• Get the collection of all ElementInfo elements under the current SolidViewport.

For details, please refer to the SolidViewport source code of v0.1.0 version. Here I directly post some screenshots of the source code analysis:

[15100399015]

very good！good！good！