@lingxiteam/dsl v1.3.3

@lingxiteam/dsl

灵犀低代码平台DSL操作库，一切皆Node。除get开头方法外，一切方法皆可链式调用。示例如下:

DSLCore?.query(compId)
        .setProps(props)
        .setStyle(props)
        .appendSetEvents(event);

1. 安装

yarn add @lingxiteam/dsl

2. 使用

import { DSLProvider } from '@lingxiteam/dsl';

interface EditorProps {}

const Editor: FC<EditorProps> = props => {
  const [json, setJson] = React.useState<any>();

  useEffect(() => {
    setTimeout(() => {
      setJson(data);
    }, 2000);
  }, []);

  return (
    <DSLProvider json={json}>
      <EditorView />
    </DSLProvider>
  );
};

export default Editor;

3. 操作Node

import { useDSLSelect } from '@lingxiteam/dsl';

interface CanvasProps {}

const Canvas: FC<CanvasProps> = props => {
  const { DSLCore } = useDSLSelect();

  // 设置当前选中节点
  DSLCore?.setCurrent(comp.id);

  // 获取根节点
  DSLCore?.document.rootNode;

  // 获取节点子组件
  DSLCore?.document.rootNode?.children();

  // 查询节点
  const node = DSLCore?.query(compId);

  // Node节点的增删改查操作...
  node.appendChild({
    id: '',
    compName: '',
    components: [],
    compLib: ''
    ...
  });

  node.insertChild(0, {
    id: '',
    compName: '',
    components: [],
    compLib: ''
    ...
  });

  node.insertChildBeforeById(compId, getNode());
  
  ...

  // 移除节点
  node.remove();

  // 删除所有子元素
  node.removeAllChildren();
  
  // 支持移动组件 
  node.moveTo();

  // 设置属性、样式、自定义样式、数据源、自定义函数、事件等
  node.setProps();
  node.setStyle();
  node.setCustomStyle();
  node.appendDataSource();
  node.updateDataSourceByIndex();
  node.deleteDataSourceByIndex();
  node.deleteDataSourceById();
  node.appendCustomFunctions();
  node.updateCustomFunctionsByIndex();
  node.updateCustomFunctionsByEventCode();
  node.deleteCustomFunctionsByEventCode();
  node.deleteCustomFunctionsByIndex();

  // 以上函数只是简单列举，内部提供了更多使用方法。详见下表格

  return (
    <div className="canvas" />
  );
};

4. API

4.1 DSLQuery

单例方法，全局只有一个DSLQuery类。等于useDSLSelect类中的DSLCore。一般情况下无需使用本类方法。

4.2 DSLDocument

文档类，用来管理NODE节点。可通过 DSLCore.document 获得。

4.3 DSLNode

具体操作可在项目中直接查看属性，或者使用开发过程中的提示功能。如下图所示。

提示效果

接口定义

查看图片

具体Demo可查看 github