Designable2.0详细规划&任务分解

[janryWang]

大家好，感谢大家对designable的认可，因为designable的定位是 make everything designable，它的核心定位就是设计器引擎，核心特色也是只专注于设计器引擎，所以也就并不会往上层封装出具体产品给大家使用，当然，这样的好处就是，它的聚焦点更多的在于设计器本身的能力，这样我也会花更多的精力在具体拖拽搭建能力上。

大家应该有发现，designable从0.x到1.x beta版经历的时间其实很短，主要是因为通用设计器引擎目前找不到可参考的优雅实现典范，只能一点一点的探索，遇到棘手问题，实在不行只能重构，这就跟之前formily的演变一样，从uform到formily1.x再到formily2.x，当然本身uform在内部其实也探索了差不多3年才开源的，但是designable不太一样，内部只实践了一年不到就对外开源了，所以不稳定性还是有点高的，这也是我至今没有写文档，没有大范围推广的原因。

好了，多的不说了，正式进入 Designable2.0时代

目标

1. 提供完备的自由布局能力
2. 提供动态加载画布组件能力，定义出标准物料协议
3. 提供基础图编辑能力，核心其实是节点连线算法+节点自动布局算法
4. 设计器支持一键暗黑色切换，@designable/react需要剥离antd，同时settings-form升级antd5(@formily/antd需要升级antd5)
5. 单元测试
6. 文档

迭代里程碑

3月-530
完成 1、2，发布第一个测试版

6月-830
完成 3

9月-1130
完成 4

12月-2023年2月

单元测试，文档，正式发布

具体方案

注意：以下重构设计思路，大家最好一起多多讨论，防止正式版发布之后给大家留坑

1. resizable/translatable配置重构，新增gridResolver/roundResolver/freeDragResolver/connectResolver

   {
        gridResolver:{
           xAixsGridSpan:"x-component-props.gridSpan",
           yAixsGridSpan:"x-component-props.yGridSpan",
        },
        roundResolver:{
          borderRadius:"x-component-props.style.borderRadius"
        },
        freeDragResolver:{
           transform(node,{x,y,rotate}){//x,y,width,height,rotate,
             node.props['x-component-props'].style.transform = `translate3d(${x},${y}),roate(${rotate})`
           }
        },
        connectResolver:{//节点连线能力
        
        }
   }
   

2. 全局locales注册干掉，统一在createDesigner的地方传入，同时Designer类新增locales相关属性操作方法

   createDesigner({
     language:"en-US",
     locales:createLocales(AppLocales,SettingsFormLocales)
   })
   

3. 画布组件，设计器行为，统一在createDesigner地方传入，以拦截器形式控制，方便用户对组件做拦截，比如返回动态加载资源的组件(React.lazy包装后的)，资源面板保持原样

createDesigner({
  getComponent(node,sandbox){
    return MyPrototypes[node.componentName]
  },
  getBehavior(node,sandbox){
    return MyBehavior[node.componentName]
  }
})

5. 全局注册icon干掉，统一改成createDesigner传入，并抽象出@designable/react-icons包

   import * as icons from '@designable/react-icons'
   
   createDesigner({
     icons
   })
   

6. Json-schema default解析出默认值合并到defaultProps中，这样就可以避免表单出现时才赋初始值的问题

7. react包把antd依赖干掉

8. 干掉事件前置拦截功能，事件触发统一改成后置触发逻辑，使用洋葱卷中间件机制代替

   engine.subscribeWith('append:node',(payload)=>{
     return false //干掉该功能
   })
   
   //注册中间件
   engine.addEventMiddleware(InsertAfterEvent,(event,next)=>{
   
   })
   
   //自定义触发
   engine.applyEventMiddleware(InsertAfterEvent,
    eventParams,
    (event)=>{
      //链尾操作
   })
   

[lincong1987]

有交互设计参与么？

[janryWang]

我就是交互

[z3phr0]

有考虑做逻辑编排吗

[janryWang]

支持图编辑了，逻辑编排就不是问题

[twinkle77]

”designable的定位是 make everything designable“， 意思是不仅仅是支持表单的搭建，也支持页面的搭建么？
作者能否融入一些页面搭建的元素，比如组件面板增加 弹窗、按钮 、Card ... 等

[janryWang]

现在就支持页面级搭建的

[xjchenhao]

文档都排到明年了啊，在此之前只能看源码和b站直播视频了。

[lianyzhou]

感觉文档可以提前，让用户用起来，提了更多意见，再推进下一步的计划。
否则用户会重复踩坑。

[wsxe9988]

有考虑过类似DataV的蓝图编辑这种的么

[xjchenhao]

【非官方文档可以看这里】

designable工程结构：https://www.yuque.com/xjchenhao/development/rncluc
designable代码提交规范：https://www.yuque.com/xjchenhao/development/tmdayt
「表单设计器开发指南」的内容补充*：https://www.yuque.com/xjchenhao/development/gt1k7i
全局注册与状态管理：https://www.yuque.com/xjchenhao/development/fp8gv5

欢迎留言区指正 or 共创文档。

[twinkle77]

请问下作者，最终跟 lowcode-engine 的区别是？

[twinkle77]

😂 那lowcode-engine 算是更完整的解决方案

[janryWang]

对，人家是低代码引擎，不是设计器引擎

[twinkle77]

哦哦 好的 谢谢

[twinkle77]

请问下作者，formily 使用 json-schema 来描述的出发点是 表单，
但随着 designable 的迭代，越来越偏向 ”页面级“ 的搭建，
后面底层使用的协议会不会往 集团约定好的低代码协议 上靠呀？ @janryWang

[janryWang]

其实组件树就是遵循的这个协议，你可以看看ITreeNode声明

[whinc]

1.x 还会继续开发新特性吗？还是进入维护模式？1.x 后续会提供低成本迁移到2.0的承诺吗？

[janryWang]

1.x不会发正式版，而且设计器属于工具型产品，不是像formily这种会大规模使用的，升级成本还好的，不过我能保证的是TreeNode协议不会变，这样至少可以控制保存在数据库里的数据是不需要大规模清洗的

[whinc]

👍这样就放心了，内部已经通过 formily designer 创建了不少表单配置，只要配置能兼容（或少量调整）影响不大

[AuroraTea]

现在的 https://github.com/alibaba/designable 还能用吗, 不理解要怎么用...install依赖全是弃用, pull以后运行都没能运行起来😲大佬能不能指点一下

[sstruct]

3. 图编辑能力不是必须的，可以提供关闭选项吗

[janryWang]

会提供的

[Carrotzpc]

有两个问题：

• designable 2.0 会考虑内置 OT 或者 CRDT 这样的多人协作能力吗？
• 作者关于低代码的版本管理这块儿怎么看？如果内部基于 formily + designable 搭建低代码平台，会考虑版本管理吗？

[janryWang]

1. 会考虑，不过没那么多精力
2. 版本管理跟designable没啥关系，属于外层封装，我们这边就是外层封装的

[Carrotzpc]

了解，感谢回复，第二点是自己想了解下😁，最近在做一些低码相关的调研。

[jinphic]

designable2.0 我这边有个建议。组件联动这块，好像一直缺少”基于生命周期钩子联动“的这种写法。这个有计划共建吗
https://react.formilyjs.org/zh-CN/api/shared/schema#schemareactions

[janryWang]

这个其实响应器里就能处理

$props({
  onChange(){

  },
  onClick(){

  },
  onSearch(){

  }
})

[jinphic]

感谢，我试用看看

[jinphic]

“核心其实是节点连线算法+节点自动布局算法”

这个指的是 自由布局(translate)的时候，出现的校准线和吸附功能吗？我自己是实现了一个校准线的逻辑，不知道你们二期有没有做这个的打算

[janryWang]

不是，比这个复杂多了

[fish58bf]

首先, 膜拜大佬!
既然是 "make everything designable ", 不知是否计划支持Vue? 或者增加扩展, 低成本的在渲染时托管过来, 或可使用 @formily/vue 适配, 原生js dom适配, 变成一个纯设计器引擎;

[janryWang]

designable vue这块，不是我来支持的，formily vue也不是我在维护的，都是社区贡献的，所以，我这边要做的就是尽可能的让内核设计的更通用，可移植，其他的就交给社区了

[fish58bf]

哦, 明白, 感谢回复; 期待正式发布🎉

[wsxe9988]

自由布局 如果viewport支持缩放的话,会不会有minimap呢

[Elias-cug]

2.0数据源有考虑怎么去管理吗。目前数据源是分散在每个field上面的，不好进行全局数据源的管理。因为目前组件都是基于数据渲染的，数据能优雅的管理使用起来才舒服。

[sstruct]

@janryWang HI janry，530 发布第一个测试版是公开的吗

[xiaoyang4011]

@janryWang 期待第一个测试版

[janryWang]

因为业务压力太大，第一个测试版延期至7月中旬

[RihuaChen]

辛苦辛苦大佬

[sstruct]

代码可以提前公开吗，我们也可以贡献些

[janryWang]

代码不稳定

[henryzp]

7月中旬，坐等。。

关于动态组件加载，这一块，到时候能不能提供个示例啥的

就是光看这个代码：

createDesigner({
  getComponent(node,sandbox){
    return MyPrototypes[node.componentName]
  },
  getBehavior(node,sandbox){
    return MyBehavior[node.componentName]
  }
})

不清楚这个是放在哪里，然后MyPrototypes和MyBehavior是从哪里来的。。

[wQFLX]

8月中马上到了，可以出测版了吧

[tanyo520]

8月中旬了，2.0什么时候出来呢，各位大佬。

[linzer]

"3,提供基础图编辑能力，核心其实是节点连线算法+节点自动布局算法"，有进展没，有具体的计划发布时间没？

[xijin]

9月中旬了，2.0什么时候出来呢，各位大佬。

[tanyo520]

10月中旬了，2.0什么时候出来呢，各位大佬。

[sprint-zhang]

王总该放下鱼竿写代码了

[wangzongxu]

估计在字跳忙的不可开交呢

[Hew007]

12月中旬了快

[qingzhoufeihu]

2023年2月还会发布2.0吗

[janryWang]

目前暂停维护中，未来会重启，感谢大家的支持

[jinphic]

后续我们有feature还可以往这里提pr吗，我们在深度使用和改造designable，希望能保留这个能力

[ilyas-ascend]

Designable 2.0有任何时间安排吗

[0fan]

2024年咯

[Hew007]

可能团队都被广进了🤣

[ZeroJsus]

这个设计理念还是很不错的 是不是后续的维护只有靠社区了 不知道之前团队里面的人都怎么样了