UniGal-Render

Official Render BE&FE of UniGal-Diagram

---

Render是将离散化的Diagram文件输出为便于直观观看的图片或以代码形式定义的伪图片的工具

综述

渲染一套文件，暂定需要以下几个步骤

1. [后端]文件树的构建
2. [后端]通过深度广度确定图幅规格
3. [前端]绘图
4. [前端]输出

接下来将逐个环节进行分析

文件树的构建

首先，所有文件应全部放在同一个文件夹内，并且这个文件夹内不存在与此无关的节点

每个节点对应一个unigal文件（XML文件）

构建树需要遍历整个目录找到文件列表，并以遍历的形式在这些文件中找到开始节点所在的文件。

伪代码如下

def this_file_is_start(i):
    if xpath("node/type/start")>=0:
        return this_node_is_start_i_times
    else:
        return this_node_is_not_start

for i in filelist:
    if this_file_is_start(i)==1:
        search_other_nodes_at(i)
    else:
        do nothing just wait i++

因为可能有很多个周目的入口，所以构建一个vector<node> start_node_list来分别操作

在内存中构建一个树，树的每个节点是一个结构体，这个结构体和node中的内容完全一致。每读取一个node，就在内存中的树中创建它。

在第一个周目涉及的节点全部读取完后读取第二周目涉及的节点。

若节点的ID表示这个节点已经读取了，就什么也不做，否则就读取。

这样可以把整个网络全都读取一遍。

之后我们得到了一个头节点的指针。

通过深度广度确定图幅规格

图像可以是横向的展示方式（如隐形守护者、墨心），可以是纵向的展示方式（如千恋万花、V’s M）

我们把这个不可滚动的成为广度轴，可以随着时间线滚动的称为深度轴。

纵向展示方式中纵向为深度轴，横向展示方式中横向为深度轴。

深度轴的长度由树的层数来确定，一般数量较大但容易构建。

广度轴的长度需要确定每层最多存在的节点个数，作为总的广度。同时为方便渲染，需要构建vector<node> guangdu_list分别记录每层的广度

通过这两个来计算每个节点绘制的中心位置

绘图

根据中心位置和css中设置的节点样式参数，绘制每个节点（画圆画方绘文字，长宽高间和字号）

之后保存输出。这一步可以本地位图buffer去逐像素操作，也可以前端用canvas实现。

输出

1. 如果您选择输出图片（二进制） （建议不要在技术领域使用二进制文件，这会造成二进制污染）

   1. 位图BMP
   2. 位图PNG

2. 如果您选择输出图片（代码定义）

   1. 矢量SVG（默认并优先实现的(你愿意用svgpp也挺好，不过自己写前端去吧)）

3. 如果您选择输出由代码定义的伪图片（主要是方便您内嵌）

   1. Markdown-mermaid（方便您嵌入文档）
   2. flowchart.js（方便您嵌入网页）

总结

总之需要一个具有XML解析的功能作为后端（无论是C还是py还是js），一个图像处理作为前端（无论是浏览器化还是native），保存为位图或矢量图。

满足这三点，就可以构建一个UniGal-Diagram的渲染器。我们正试图使用pugixml和C++开发后端，前后分离但仅为低程度的文件级分离，而非整个Solution解决方案或者整个Project级别的。

Diagram和Script两个组是同等地位的。虽然Diagram的渲染和解析不和Script组统一，但是Diagram组一样可以自己提出自己的UEP提案，一样可以参与UEP的讨论