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

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

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

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

重写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);
}

使用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
      }
    }
  }
}

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

Mar 23 '23 08:03 flgame

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

Mar 26 '23 16:03 loganjingdi

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

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

Mar 27 '23 01:03 JackLian

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

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

Mar 27 '23 08:03 flgame

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

Mar 27 '23 15:03 loganjingdi

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

Mar 27 '23 15:03 loganjingdi

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

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

Mar 27 '23 15:03 loganjingdi

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

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

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

Apr 13 '23 03:04 l704863851

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

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

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

看这里：

Apr 18 '23 02:04 flgame

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

May 10 '23 07:05 l704863851

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

仓库里的demo打不开了 https://alifd.alicdn.com/npm/@alilc/[email protected]/build/lowcode/index.html