processOn 可视化状态机编辑插件[更新20170315]

Creator 2.x 扩展插件
#1

阮一峰老师写过一篇介绍状态机的博客：
JavaScript与有限状态机

恩 挺好的

不过不能可视化编辑

所以这两天尝试了
svg.js画flow-chart
arbor.js画flow-chart
cc.graphics画flow-chart
研究processOn源码

好吧 全部都心累夭折了

接着百无聊赖在知乎看到有人说processOn导出的pos文件是json

嘿，突然觉得有戏

于是去导了一个出来

哟，果然，上面连线的数据都有

好吧，然后就满满整理成插件了

插件在审核， 不过我还是觉得应该避免插件从商城安装的时候出错一击暴毙

所以不妨直接在本地安装吧 留条后路2333
[add]对事件拦截做了优化
processon-statemachine.zip (36.9 KB)
[modify]支持工厂方法，可以实例化多个拥有相同状态机数据的状态机 因为修改了API 这里单独列出来[推荐]
processon-statemachine-fsm-factory-version.rar (35.9 KB)

解压之后将processon-statemachine整个文件夹仍到项目的packages文件夹下就可以了

在processon-statemachine文件夹下有一个help文件夹，里面有这个插件使用的介绍

工作的流程大概如下
1.在在线绘制平台processOn绘制状态机流程图
2.导出状态机流程图为pos格式
3.在cocoscreator打开pos-fsm插件面板
4.添加依赖的状态机库state-machine.js
5.选择pos文件后 点击start按钮解析成状态机实例fsm.js

之后的fsm.js如何使用请参考阮一峰老师介绍的javascript-state-machine.js里的readme.md介绍
附上javascript-state-machine.js github地址：
javascript-state-machine

附插件送审的图片：
processOn绘制状态机

QQ图片20170222001555.png960×640 56.4 KB

插件界面
QQ图片20170222001848.png960×640 30.5 KB

添加依赖state-machine.js
QQ图片20170222001946.png960×640 42.7 KB

生成状态机实例fsm.js
QQ图片20170222002046.png960×640 45.1 KB

fsm.js代码示例
QQ图片20170222002131.png960×640 38.5 KB

使用教程视频1
https://v.qq.com/x/page/i0383mxgwd6.html

更新了插件 对拦截事件做了补充
使用教程视频2
https://v.qq.com/x/page/l038356jclm.html

更新的插件 支持工厂方法实例化多个拥有相同状态机数据的状态机实例 因为api修改 放到分支fsm-factory
使用教程视频3
https://v.qq.com/x/page/j0384kqozud.html

10赞
#2

话说发送code-editor:open-by-uuid只能弹出内置的编辑器 如果要弹出vscode应该发什么ipcmsg？

1赞
#3

大神，请收下我的膝盖！帮你先置顶几天！

#4
#5

弹出什么编辑器，取决于用户在偏好设置里设置的工具。

#6

。。可我在asset双击js文件弹出的是vscode(已经配置了)。 发送code-editor:open-by-uuid弹出还是内置代码编辑器 心累2333

#7

另外插件文档描述的editor.assetdb.create和refresh不能刷新assets 我后面用的fs模块write和ipc.sendToMain(“assetdb:refresh”)才起作用 可能我传的参数不对吧 editor.assetdb.refresh参数我用的是"db:/xxx"

#8

哦，你发 code-editor:xxx 那就当然是 code-editor，你应该发 Editor.Ipc.sendToMain(‘assets:open-text-file’, uuid);

#9

好 回头试试，我现在遇到一个问题，用的GOJS库go.zip (226.8 KB)写一个行为树的插件。。在chrome浏览器运行没有问题，可是在creator里面导入的时候报错:
2017-02-22T18:26:11.773Z - error: SyntaxError: Unexpected token <
at Object._evaluateAndCacheScript (F:\cocoscreator\CocosCreator1.4\dist\resources\app.asar\editor-framework\lib\renderer\ui\utils\resource-mgr.js:1:936)
at F:\cocoscreator\CocosCreator1.4\dist\resources\app.asar\editor-framework\lib\renderer\ui\utils\dock-utils.js:1:8995
at F:\cocoscreator\CocosCreator1.4\dist\resources\app.asar\editor-framework\lib\renderer\ui\panel\frame.js:1:2569

这就很尴尬了。我不清楚怎么在creator里面调试。
这是做了一半的creator插件:
test_behavior_tree.zip (441.3 KB)
这是浏览器运行效果：

粘贴的图像1366×768 67.5 KB

大概的错误应该是go.js库文件的格式吧。里面用到了window document这些
开头是这样的 (function(window){…createElement往div上画canvas等等…})(window);
那么求大神指点。。

#10

上面写了一半的插件项目里，在index.html里面对go.js的引用用的是全局目录。

#11

好吧。。知道原因了。。html的panel type只能是simple

#12

Creator 加载的页面是 Vue 页面，所以出现了这个报错。你如果是普通网页，可以修改一下 packages.json 里面的参数…… 是的只能是 simple

#13

processOn可视化状态机编辑插件使用视频教程:
放网盘了，腾讯视频传不上
网盘链接

腾讯视频链接好了
https://v.qq.com/x/page/i0383mxgwd6.html

更新了插件 对拦截事件做了补充
视频链接
https://v.qq.com/x/page/l038356jclm.html

1赞