alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.58k stars 2.53k forks source link

Designer dragon 的 onDrag 事件暴漏的 nodes 类型和实现不符 #2787

Open Zeral-Zhang opened 10 months ago

Zeral-Zhang commented 10 months ago

Describe the bug (required) / 详细描述 bug(必填)

使用 DesignerView 监听 Designer onDrag 事件,发现 onDrag 事件中的节点 nodes 实际类型为 INode 和申明的 IPublicModelNode 类型不符合,导致部分 API 不可用,例如设置可见性 node.visile = false 等。

export class IPublicModelDragObject {
  type: IPublicEnumDragObjectType.Node | IPublicEnumDragObjectType.NodeData;

  data: IPublicTypeNodeSchema | IPublicTypeNodeSchema[] | null;

  nodes: (IPublicModelNode | null)[] | null;
}

实际设值 nodes 的地方 designer/src/builtin-simulator/host.ts:674:

          let nodes: INode[] = [node];
          let ignoreUpSelected = false;
          if (isMulti) {
            // multi select mode, directily add
            if (!selection.has(node.id)) {
              designer.activeTracker.track({ node, instance: nodeInst?.instance });
              selection.add(node.id);
              ignoreUpSelected = true;
            }
            focusNode?.id && selection.remove(focusNode.id);
            // 获得顶层 nodes
            nodes = selection.getTopNodes();
          } else if (selection.containsNode(node, true)) {
            nodes = selection.getTopNodes();
          } else {
            // will clear current selection & select dragment in dragstart
          }
          designer.dragon.boost(
            {
              type: IPublicEnumDragObjectType.Node,
              nodes,
            },
            downEvent,
            isRGLNode ? rglNode : undefined,
          );

To Reproduce (required) / 如何复现 bug?(必填,非常重要)

加载插件,

const TestPlugin = (ctx: IPublicModelPluginContext) => {
    return {
        async init() {
            const { project } = ctx;
            const editor = globalContext.get('editor');
            const designer = engineEditor.get('designer') as Designer;
            designer.dragon.onDrag((e) => {
               if (isDragNodeDataObject(e.dragObject)) return;
                // method setExpraPropValue is undefined
                console.log(e.dragObject.nodes?[0].setExtraPropValue);
            })
        },
    };
};

拖动画布上的组件,onDrag 触发,node.setExtraPropValue 方法 为 undefined


Expected behavior (required) / 预期行为(必填,非常重要)

期望 onDrag 时 dragObject 的 nodes 类型和申明类型一致,可以调用相应的 API


Environments (please complete the following information) (required): / 请提供如下信息(必填)

liujuping commented 10 months ago

得用这里的 API

https://lowcode-engine.cn/site/docs/api/canvas#dragon

designer 和 editor 不建议继续使用。