前面板开发（suanpan-javascript-sdk）

提示： 1.入门文档：https://grapesjs.com/docs/ 2.index.html 是 demo 代码。并不会打包到线上。

前面板组件模板工程：https://github.com/sheldonwr/suanpan-frontpanel-plugin-open clone 该工程，进行本地编辑

新建一个组件

所有的组件代码都放到 src\dashboard\plugins\blocks 目录下。根据组件所属的分类，放到对应的目录下面。例） echarts*->图表， text*->显示文本，..... 以新建一个 line-chart 组件为例。参考 src\dashboard\plugins\blocks\echarts\LineChart.js 1）在对应的文件夹下的 index 文件中引入组件文件（src\dashboard\plugins\blocks\echarts\index.js）。 2）LineChart.js 文件解析 -name -> 常量定义在 src\dashboard\plugins\common\constants\index.js 文件中

viewTemplate()

定义组件的 html 模板

viewStyle()

定义组件和组件内部的 css 式样

blockOptions()

定义编辑器左侧组件显示式样

spOptions()

定义后面板组件的属性

1）inPorts 和 outPorts 是输入桩和输出桩。如果组件需要多个输入桩和输出桩时，需要添加对应的 port

componentOptions()

设置组件的属性

1.常用设置：

resizable -> 常用 true， false: 不能手动在画布上调整组件的大小

childrenSelectable -> 默认 true。false：画布上不能选中组件的子元素，可以在层级选择器子元素进行编辑
disableChildEdit -> 默认 false，可不设置。true：不能编辑子元素，层级选择器也不显示子元素
childrenStatic -> 默认 false，可不设置。true: 组件内的所有子元素都是 static 定位
isFormItem -> 默认 false，可不设置。所有的表单元素，需要设置为 true

2.traits: [] 说明，traits 中定义组件的自定义属性

【trait 的 type】

1）grapejs 的内置类型：

input：默认类型，输入框
number：数字
checkbox：选择框
color：颜色选择器
button：按钮
select: 下拉列表

2）自定义 trait 类型：

自定义的 trait 类型放在 src\dashboard\plugins\common\traits 目录中。

自定义的 trait 类型需要在 src\dashboard\plugins\blocks\index.js 文件中引入。

【trait 共通规约】

No	属性名	格式	示例
1	颜色	color	#FFFFFF

rgba(0,0,0,1) rgb(0,0,0) | | 2 | 色系 | ","分割的字符串 | #FFFFFF,#dddddd | | 3 | 字体大小 | number | 数值 | | 4 | 图片组 | “|”分割的字符串 | | | 5 | 渐变色 | | #59B5FF #2263BD::#FF9793 #E7504C::#AE60FA
#6D32C1::#EFCE49 #D79C12::#FFB058 #C56625::#4ACC88 #27A657::#2C989E #27BCC9::#8A98FF #2B36A8 |

3.定义各个 trait 的初始值：

onModelScript()

用于渲染组件

1.传参方式 const dataSource = '{[ dataSource ]}'; ->使用 '{[ XXX ]}'格式取 model 的值。

注意向这个方法中传值只能通过这种方式。如果想要传入一个变量，可以在 onViewInit()方法中给 model 塞值。具体可以参考 src\dashboard\plugins\blocks\text\Weather.js 文件。

2.数据交互

实现原理：使用 socket 发布和注册事件
eventName 固定为【call-组件 id】不可变更。

发布事件。将交互数据发到 spOptions 定义的相应的输出桩

注册事件。从 spOptions 定义的相应的输入桩接收数据进行数据刷新。

onViewInit()

用于进行组件初始化处理，事件绑定

1.基本事件绑定。

所有的 trait 都需要绑定 change 事件，用来变更 trait 的设置值后立即刷新组件。

2.特殊事件绑定

实现一个可以上传图片的 trait，参考 src\dashboard\plugins\blocks\text\LedGroup.js

1）componentOptions()的 traits 中添加一个 trait，使用 command 触发一个自定义事件。

2）editor 绑定自定义事件，并进行 model 的数据处理。

组件相关功能设置

1.设置组件开发者

式样：

实现原理：

1）前面板显示开发者：在 traits 中的第一个位置添加一个开发者信息的 trait

2）后面板显示开发者：在 spOption 中添加一个开发者信息的 key。

组件类型 1：

在 spOptions 方法中添加 author 和 email 两个 key 即可。新增 trait 已经在 gpParse 文件中统一处理了。

组件类型 2：

步骤 1：在 traits 中的第一个位置添加作者的 trait: 类型为 authorInfo。

{
  name: 'authorInfo',  ->固定不变
  label: '开发者', ->固定不变
  type: 'authorInfo', ->固定不变
  author: '暴风雪宝',
  email: '823468528@qq.com'
}

步骤 2：在 init 方法中的 def 中同样添加 author 和 email（用于后面板展示作者）

2.设置数据 tab 页

式样：

实现原理：添加一个 trait 去保存每个组件的默认数据
实现方式： 1）数据类型是二维数组，数据中包含表头。

（参考 src\dashboard\plugins\blocks\text\List.js）

步骤：

a）traits 中添加一个隐藏的 trait：defaultData,类型是 hide （key 值固定，不可变更）

{
  name: 'defaultData',
  changeProp: 1,
  type: 'hide'
}

b）设置 defaultData 的初始值：

defaultData:JSON.stringify([
  ["id", "姓名", "性别", "年龄", "采集时间"],
  ["001", "李磊", "男", "12", "2020-01-02 14:28:36"],
  ["002", "王华", "女", "42", "2020-01-02 14:28:36"],
  ["003", "孙南", "男", "34", "2020-01-02 14:28:36"],
  ["004", "李明", "男", "12", "2020-01-02 14:28:36"],
  ["005", "孙华", "女", "42", "2020-01-02 14:28:36"],
  ["006", "苏如花", "男", "34", "2020-01-02 14:28:36"]
]).replace(/\"/g, "\\\""),  ->这里要转换一下"引号"为"斜杠引号"。不然打包到线上之后会报错

c）onModelScript 方法中取 model 中的值来作为初始数据渲染组件：

const defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\"/g, "\"")); ->这里取回的值同样要还原"斜杠引号"为"引号"

d）onViewInit 方法中设置 change: defaultData 的监听事件。

2）数据类型是二维数组，数据中不包含表头。

（参考 src\dashboard\plugins\blocks\echarts\mapHeatmapChart.js） defaultData 的配置同上。额外再添加 defaultDataConfig 的 trait。

a）traits 中添加隐藏的 trait: defaultDataConfig

{
  name: 'defaultDataSetting',
  changeProp: 1,
  type: 'hide'
}

b）设置 defaultDataConfig 的初始值：

'defaultDataConfig': JSON.stringify({
  dataIncludeHeader: false,    ->表示数据中不包含表头
  tableColumns: [   -> 设置显示的默认表头和数据类型。（type 默认都是 string，目前只支持定义为 number）
    {title: "经度", type: "number"},
    {title: "纬度", type: "number"},
    {title: "区域编号", type: "number"},
    {title: "区域颜色", type: "number"}
  ]
}).replace(/\"/g, "\\\"")

c) defaultDataConfig 只用来控制数据 tab 页的显示，不用来渲染组件。onModelScript 方法和 onViewInit 方法不需要处理。

3）数据类型是 hash 的数组。 （参考 src\dashboard\plugins\blocks\echarts\mapOfflineMeteorology.js）处理方式同【1)数据类型是二维数组，数据中包含表头】，只有初始值格式不同。

defaultData 的初始值格式如下：

'defaultData':JSON.stringify([
  {"longitude":116.23128, "latitude":40.22077, "category": "A" },
  {"longitude":121.48941, "latitude":31.40527, "category": "A" },
  {"longitude":113.27324, "latitude":23.15792, "category": "A" },
  {"longitude":91.13775, "latitude":29.65262, "category": "B" },
  {"longitude":109.96144, "latitude":39.82127, "category": "B" },
  {"longitude":120.27324, "latitude":23.15792, "category": "B" }
]).replace(/\"/g, "\\\"")

新建一个组件

viewTemplate()​

viewStyle()​

blockOptions()​

spOptions()​

componentOptions()​

onModelScript()​

onViewInit()​