当前位置: 首页 > 工具软件 > Graph.Editor > 使用案例 >

grapheditor示例-运行代码逻辑整理

岳和泽
2023-12-01

grapheditor示例-运行代码逻辑整理

S1 构建资源文件路径:默认路径 /modeleditor/resources/grapheditor_xx,_xx对应语言

 

S2 读取资源:

(1)默认资源文件有两个:/modeleditor/resources/grapheditor,/modeleditor/resources/default.xml;

(2)解析/modeleditor/resources/grapheditor 生成资源字符串字典;

(3)解析/modeleditor/resources/default.xml 获取基本图元样式表。

 

S3 调用EditorUi构造函数:
(1)新建Editor实例:传入参数chrome(是否显示图形界面,默认为显示), 为基本图元样式表,此时Editor中model为空;
    设置Editor为事件源;
    设置chromeless属性;
    初始化图元模板注册器;
    创建graph;
    设置editable属性;
    创建回退操作管理器。

(2)用构造函数创建EditorUi的实例,参数为Editor和目标位置div的ID;
    设置Editor为事件源;
    设置editor;
    设置页面对应的div的ID;
    设置graph为Editor的graph;
    设置lightbox;
    创建Action集合;
    创建menus,实际执行函数为Menus.js中的createMenus函数(此处EditorUi.js中createMenus函数被后加载的Menus.js中的createMenus函数重载),此函数会将menuitem的key与Action集合中做对应映射;
    创建Divs:
    创建menubarContainer (div class名称geMenubarContainer);
    创建toolbarContainer (div class名称geToolbarContainer);
    创建sidebarContainer (div class名称geSidebarContainer);
    创建formatContainer(div class名称geSidebarContainer geFormatContainer);
    创建diagramContainer (div class名称geDiagramContainer);
    创建footerContainer (div class名称geFooterContainer);
    创建geHsplit(div class名称geHsplit);
    创建sidebarFooterContainer,默认操作结果为空;
    创建tabContainer,默认操作结果为空。
    创建Ui:
    创建menubar并添加到container(调用Menus.js中createMenubar函数,传入 class为geMenubar的div元素作为menubar的父节点元素);
         [注]实际加载显示的是Menus.js中Menus.prototype.defaultMenuItems中菜单。
    创建左侧sidebar元素并添加到container;
    创建右侧format属性栏并添加到container;
    创建footer并添加到container;
    添加diagramContainer到container;
    创建工具条并添加到container;
    将hsplit分隔条添加到container,并把分隔条响应事件加入。

 类似资料: