4.1.1-beta.2 • Published 8 months ago

@lingxiteam/types v4.1.1-beta.2

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

@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。一般情况下无需使用本类方法。

方法说明类型默认值参数必填
init(e: JSONType): this初始化方法,传入JSON数据,一般不用主动调用,默认会通过DSLProvider传入。(e: JSONType) => this-
reset(e): this重置方法,默认恢复到init初始化状态() => this-无参数
clear(e): this清除QSLQuery,主要给恢复、回退功能使用() => this-无参数
query(id:string): DSLNode | RootNode根据id查询Node节点(id: string) => DSLNode | RootNode-
toJSON() => JSONType转换成JSON数据() => JSONType|null-

4.2 DSLDocument

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

4.3 DSLNode

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

提示效果

提示1

接口定义

查看图片

具体Demo可查看 github

4.1.1-beta.2

8 months ago

4.2.1-alpha.4

9 months ago

4.2.1-alpha.2

10 months ago

4.2.1-alpha.3

9 months ago

4.2.1-alpha.1

10 months ago

4.1.1-alpha.5

10 months ago

4.1.1-alpha.4

11 months ago

4.1.1-alpha.3

11 months ago

4.1.1-alpha.2

11 months ago

4.1.1-alpha.1

11 months ago

3.5.1-alpha.40

1 year ago

3.5.1-alpha.38

1 year ago

3.5.1-alpha.39

1 year ago

3.7.1-alpha.20

12 months ago

3.8.1-alpha.3

1 year ago

3.8.1-alpha.2

1 year ago

3.8.1-alpha.1

1 year ago

4.0.1-alpha.4

12 months ago

4.0.1-alpha.5

11 months ago

4.0.1-alpha.2

12 months ago

4.0.1-alpha.3

12 months ago

3.8.1-alpha.12

12 months ago

3.8.1-alpha.11

12 months ago

3.8.1-alpha.10

1 year ago

4.1.1

11 months ago

3.5.1-alpha.37

1 year ago

3.5.1-alpha.36

1 year ago

3.7.1

1 year ago

3.5.1-alpha.34

1 year ago

3.5.1-alpha.35

1 year ago

3.5.1-alpha.33

1 year ago

3.5.1-alpha.31

1 year ago

3.5.1-alpha.32

1 year ago

3.5.1-alpha.30

1 year ago

3.5.1-alpha.27

1 year ago

3.5.1-alpha.28

1 year ago

3.5.1-alpha.29

1 year ago

3.5.1-alpha.26

1 year ago

3.5.1-alpha.25

1 year ago

3.5.1-alpha.8

1 year ago

3.5.1-alpha.7

1 year ago

3.5.1-alpha.20

1 year ago

3.5.1-alpha.21

1 year ago

3.5.1-alpha.22

1 year ago

3.5.1-alpha.23

1 year ago

3.7.1-alpha.10

1 year ago

3.7.1-alpha.7

1 year ago

3.7.1-alpha.1

1 year ago

3.5.1-alpha.6

1 year ago

3.5.1-alpha.5

1 year ago

3.6.1-alpha.3

1 year ago

3.6.1-alpha.2

1 year ago

3.6.1-alpha.1

1 year ago

3.5.1-alpha.1

1 year ago

3.5.1-alpha.2

1 year ago

3.2.1

1 year ago

3.3.1

1 year ago

3.5.1

1 year ago

3.3.1-alpha.14

1 year ago

3.3.1-alpha.13

2 years ago

3.3.1-alpha.12

2 years ago

3.3.1-alpha.11

2 years ago

3.3.1-alpha.10

2 years ago

3.3.1-alpha.9

2 years ago

3.3.1-alpha.8

2 years ago

3.3.1-alpha.7

2 years ago

3.3.1-alpha.6

2 years ago

3.2.1-y.0

2 years ago

3.2.1-alpha.38

2 years ago

3.2.1-alpha.16

2 years ago

3.2.1-alpha.39

2 years ago

3.2.1-alpha.17

2 years ago

3.2.1-alpha.18

2 years ago

3.2.1-alpha.19

2 years ago

3.2.1-alpha.34

2 years ago

3.2.1-alpha.35

2 years ago

3.2.1-alpha.36

2 years ago

3.2.1-alpha.14

2 years ago

3.2.1-alpha.37

2 years ago

3.2.1-alpha.15

2 years ago

3.2.1-alpha.30

2 years ago

3.2.1-alpha.31

2 years ago

3.2.1-alpha.32

2 years ago

3.2.1-alpha.33

2 years ago

3.2.1-alpha.40

2 years ago

3.2.1-alpha.27

2 years ago

3.2.1-alpha.28

2 years ago

3.2.1-alpha.29

2 years ago

3.3.1-alpha.1

2 years ago

3.2.1-alpha.23

2 years ago

3.2.1-alpha.24

2 years ago

3.2.1-alpha.25

2 years ago

3.2.1-alpha.26

2 years ago

3.2.1-alpha.41

2 years ago

3.2.1-alpha.42

2 years ago

3.2.1-alpha.20

2 years ago

3.2.1-alpha.43

2 years ago

3.2.1-alpha.21

2 years ago

3.2.1-alpha.44

2 years ago

3.2.1-alpha.22

2 years ago

3.3.1-alpha.4

2 years ago

3.3.1-alpha.3

2 years ago

3.3.1-alpha.2

2 years ago

0.0.8

2 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago