supPainter

流程图核心绘制库

协同开发流程

git clone 仓库代码到本地

• git clone http://gitlab.rd.supcon.com/VisualField-Next/suppainter.git 下载suppainter仓库和AppDev2019同级目录

yarn 安装依赖

额外依赖

开发中的本地依赖 `SupJexl`<http://gitlab.rd.supcon.com/zhangshun/supjexl>,下载到本地后, SupPainter中 link SupJexl

yarn build 打 包代码

• 编译的时候暂时有一些类型的判断错误提醒，不影响编译的代码使用，在修改中。

• 在suppainter中编译完成，生成 dist 目录后，继续下面步骤

yarn link

• 进入到suppainter的目录， 输入yarn link

  输出：

success Registered "suppainter".
info You can now run `yarn link "suppainter"` in the projects where you want to use this package and it will be used instead.
Done in 0.11s.

• 依据提示的命令： 在AppDev2019中输入 yarn link "suppainter" 输出：

yarn link v1.12.3
success Using linked package for "suppainter".
Done in 0.12s.

• 连接成功后会在AppDev2019/node_modules的目录下 创建 copy 一份 suppainter仓库代码

• 代码在suppainter中改动，改动后需要yarn build，因为在AppDev2019中外面模块加载的是dist打包目录下代码

Ps: 每次改动编译后，记得在AppDev2019目录中刷新下node_modules目录文件

yarn unlink

在suppainter目录下，输入：yarn unlink,就可以关闭suppainter和AppDev2019的链接。

打包注意事项

• 新添加的依赖的包，加入到rollup.config.js的external：[...]配置中,脚本打包的时候不会把依赖打包到代码中。

• 针对 electron 的操作都不应该放到该库， electron 依赖 Node.js 环境, 当运行期在浏览器运行，不做处理，肯定会报错。

生产流程

1、下载依赖： npm install 10.10.21.34:4873/#/detail/@supcon/suppainter ;

2、引用并初始化：

import * as SupPainter from 'suppainter';
SupPainter.init({ canvas: canvasDom, type: 'runtime' }); // runtime: '运行期', configuration:'组态期'
// 初始化引用后的Suppainter 直接调用api

// example_1 绘制存档文件
SupPainter.page.addAndDraw('test-1.json', `shapeData`); // 传入存档的文件名和存档json数据 直接在canvas元素上绘制出按照已知标准绘制的图元

// example-2 获取某个item
SupPainter.item.getItemByProps(`itemName`); //  通过item的name属性直接获取到唯一的item实例

功能介绍（ps:持续更新补充中...）

功能上主要分为组态期和运行期这两大部分的功能。

组态期：

• 绘制工具
• 组合操作
• 图层操作
• 布尔/旋转/均分/等间距
• 属性设置,存档,加载和保存
• 动态设置
• 表达式设置
• 撤销/恢复/复制/粘贴/缩放...等

运行期：

• 表达式的自定义操作符合自定义方法的实现和解析
• 图元和组合对事件的响应(鼠标，键盘等等)
• 图元和组合的实时数据的响应
• 图元和组合的实时动态展示
• 不同的动画组合渲染

快捷键

组合顺序优先级：Ctrl > Shilf > Alt