提供一个布局编辑器，用于通过可视化的方式生成一个页面布局

[rdkmaster]

界面原型

[rdkmaster]

输入参数

blocks

提供一个输入属性blocks，定义为

// 其中Block里的4个属性的单位均为新增物体的所占/所在的单位数，而不是绝对值
export class Block {
    left: number;
    top: number;
    width: number;
    hieight: number;
    scaleDirection: "none"|"ver"|"hor"|"both";
};
blocks: Block[] | ArrayCollection<Block>

unitLength

unitLength: number = 8;

单位长度，默认值是8px，支持双绑。提示：通过修改这个值可以模拟放大缩小的效果

[rdkmaster]

输出事件

change

定义为

change: EventEmitter<string>;

在编辑器发生了变化后，发出此事件，事件带上由product生成器生成的html代码片段。下游系统监听此事件，并取出生成的html代码片段继续工作。

select

定义为

select: EventEmitter<Blocks[]>;

用户在编辑器上选中了某个（些）物体后，发出此事件。

[rdkmaster]

方法

本组件自身不提供编辑工具栏，应用自行提供UI入口，通过调用本组件的这些方法实现工具栏的功能。

对齐

用于用户选中多个物体时，对他们进行对齐。第一版暂不实现，后续通过迭代逐渐支持这些方法。

• alignTop
• alignBottom
• alignLeft
• alignRight
• alignCenter
• alignMiddle
• ...

排列

用于用户选中多个物体时，对他们的位置重新排列。第一版暂不实现，后续通过迭代逐渐支持这些方法。

• distributeCentersHorizontally
• distributeCentersVertically
• ...

[rdkmaster]

编辑过程

画布上需要加上 jigsaw-droppable 指令，用于接受拖放

拖过来的物体，必须包含如下的参数，其中?的表示可选，否则为必选

{
    layout: Layout,
    coder: {
        placeholder?: () => string, placeholderContext?: any,
        product: () => string, productContext?: any
    }
}

• coder里是生成代码功能
  • placeholder用于生成拖放后的占位符，如果省略，则读取product。占位符会在设计过程中显示出来，因此要尽量使用简单的html，而不要使用过于复杂的HTML片段，别在设计过程中显示不正确影响使用体验
  • product用于生成最终的代码，这些代码作为下游系统的输入，必须要与下游系统能够对接上。这些代码不用于设计过程中的显示。