「讨论」基于1.0.x版本引擎实现 自由布局 及 磁贴网格布局

[flgame]

我们目前的实现思路如下，希望官方及各位大佬给出更好的方案：

1. 设置引擎选项，允许事件冒泡

   config.setEngineOptions({
   enableMouseEventPropagationInCanvas: true,
   });

2. 重写dragon中处理事件的方法boost，主要是通过动态设置node.isRGLContainer属性，修改默认的拖拽行为 实现见：dragon.zip

   import {
   ILowCodePluginContext,
   plugins,
   project,
   config,
   } from '@alilc/lowcode-engine';
   import DragonWrapper from './plugin/dragon';
   export async function init() {
   const editorInit = (ctx: ILowCodePluginContext) => {
   return {
     name: 'editor-init',
     async init() {
       DragonWrapper(config.get('designer').dragon);
     },
   };
   };
   editorInit.pluginName = 'editorInit';
   await plugins.register(editorInit);
   }

3. 使用react-moveable或其它库构建自由布局物料，在物料中监听move、resize等变化并设置节点属性 物料 如absolute-layout（自由布局容器）、absolute-item（自由布局元素） absolute-layout/meta.ts部分配置：

   const Meta: ComponentMetadata = {
   configure: {
   component: {
     isContainer: true,
     isRGLContainer: true,
   },
   advanced: {
     callbacks: {
       onNodeAdd: (addedNode: any, currentNode: any) => {
         if(addedNode.parent != currentNode) return;
   
         if(addedNode.componentName != 'AbsoluteItem') {
           const snippet = {
             ...defaultItemSnippet,
             children: addedNode.exportSchema(),
           }
           const item = currentNode.document.createNode(snippet);
           currentNode.insertBefore(item, addedNode, false);
           addedNode.remove();
           setTimeout(() => {
             item.select();
           }, 500);
         }
       }
     },
   },
   }
   }

   absolute-item/meta.ts部分配置：

   const Meta: ComponentMetadata = {
   configure: {
   component: {
     isContainer: true,
     nestingRule: {
       parentWhitelist: ['AbsoluteLayout'],
     }
   },
   advanced: {
     callbacks: {
       //do nothing, just make sure "props._leaf" accessible
     }
   }
   }
   }

4. 同上使用react-grid-layout或其它库构建网格布局物料，在物料中监听布局变化并设置节点属性 实现上和自由布局差不多

[loganjingdi]

https://github.com/loganjingdi/lowcode-material-magneticContainer 实现了一版demo，我们这的想法是，尽量不要onDrag等相关操作，这些操作影响的主要是 iframe 上面的node（个人觉得磁吸布局等情况下，iframe能去掉最好）。刚好看了最近开源的G6，已经没有了 iframe，清爽。

[JackLian]

https://github.com/loganjingdi/lowcode-material-magneticContainer 实现了一版demo，我们这的想法是，尽量不要onDrag等相关操作，这些操作影响的主要是 iframe 上面的node（个人觉得磁吸布局等情况下，iframe能去掉最好）。刚好看了最近开源的G6，已经没有了 iframe，清爽。

nb 已star，要不要提个 pr 到 demo 仓库呀

[flgame]

https://github.com/loganjingdi/lowcode-material-magneticContainer 实现了一版demo，我们这的想法是，尽量不要onDrag等相关操作，这些操作影响的主要是 iframe 上面的node（个人觉得磁吸布局等情况下，iframe能去掉最好）。刚好看了最近开源的G6，已经没有了 iframe，清爽。

( ఠൠఠ )ﾉ 在物料中直接设置 isRGLContainer 也是一种方案，只是目前引擎isRGLContainer 有bug，添加节点 或者 节点树中拖动会报错

[loganjingdi]

pr的话，是不是要提交到 物料仓 呀？(doge

[loganjingdi]

物料中设置isRGLContainer，没问题，关键要是更改了内核的dragon来实现的话，有点重了，我这边用了临时方法

[loganjingdi]

物料中设置isRGLContainer，没问题，关键要是更改了内核的dragon来实现的话，有点重了，我这边用了临时方法

不过内核做逻辑处理确实更彻底，通用

[l704863851]

物料中设置isRGLContainer，没问题，关键要是更改了内核的dragon来实现的话，有点重了，我这边用了临时方法

不过内核做逻辑处理确实更彻底，通用

为什么我设置这个参数直接报错了

[flgame]

物料中设置isRGLContainer，没问题，关键要是更改了内核的dragon来实现的话，有点重了，我这边用了临时方法

不过内核做逻辑处理确实更彻底，通用

为什么我设置这个参数直接报错了

看这里：

[l704863851]

@flgame 可不可以不重写dragon解决 #2004 问题

[starsoul666]

https://github.com/loganjingdi/lowcode-material-magneticContainer 实现了一版demo，我们这的想法是，尽量不要onDrag等相关操作，这些操作影响的主要是 iframe 上面的node（个人觉得磁吸布局等情况下，iframe能去掉最好）。刚好看了最近开源的G6，已经没有了 iframe，清爽。

仓库里的demo打不开了 https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.1.0/build/lowcode/index.html

[starsoul666]

的

MagneticContainer 这个组件拖进去报错

[starsoul666]

exportSchema

物料很难拖进去，拖入的时候报错

[starsoul666]

function

有没有可以访问的demo