Skip to content

Commit

Permalink
feat: ✨ add resizeGroup for stencil (#1388)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NewByVector
NewByVector authored Sep 30, 2021
1 parent 6b32a03 commit d9bec60
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 116 deletions.
8 changes: 8 additions & 0 deletions packages/x6/src/addon/stencil/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,6 +443,14 @@ export class Stencil extends View {
return this
}

resizeGroup(groupName: string, size: { width: number; height: number }) {
const graph = this.graphs[groupName]
if (graph) {
graph.resize(size.width, size.height)
}
return this
}

onRemove() {
Object.keys(this.graphs).forEach((groupName) => {
const graph = this.graphs[groupName]
Expand Down
129 changes: 71 additions & 58 deletions sites/x6-sites/docs/tutorial/basic/dnd.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,11 @@ const dnd = new Addon.Dnd(options)
| 选项 | 类型 | 必选 | 默认值 | 说明 |
|------------------------------|-------------------------------------------------------------------------------------|:----:|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| options.target | Graph | ✓️ | | 目标画布。 |
| options.scaled | boolean | | `false` | 是否根据目标画布的缩放比例缩放拖拽的节点。 |
| options.delegateGraphOptions | Graph.Options | | | 拖拽开始时，创建代理画布的选项。 |
| options.getDragNode | (sourceNode: Node, options: GetDragNodeOptions) => Node | | | 拖拽开始时，获取代理节点（实际被拖拽的节点），默认克隆传入的节点。 |
| options.getDropNode | (draggingNode: Node, options: GetDropNodeOptions) => Node | | | 拖拽结束时，获取放置到目标画布的节点，默认克隆代理节点。 |
| options.validateNode | (droppingNode: Node, options: ValidateNodeOptions) => boolean \| Promins\<boolean\> | | | 拖拽结束时，验证节点是否可以放置到目标画布中。 |
| options.animation | boolean \| { duration?: number; easing?: string } | | `false` | 拖拽结束时，而且目标节点不能添加到目标画布时，是否使用动画将代理画布移动到开始拖动的位置。选项 `duration` 和 `easing` 对应 JQuery 的 [.animate( properties [, duration ] [, easing ] [, complete ] )](https://api.jquery.com/animate/) 方法中的参数。 |
| options.containerParent | HTMLElement | | `document.body` | 拖拽容器挂载在哪个父节点下面 |

### Step 2 开始拖拽

Expand All @@ -57,7 +55,18 @@ dnd.start(node, e)

### 常见问题

1.怎么自定义拖拽节点的样式？
1. 为什么拖拽节点到画布后，ID 发生了改变

根据上面的拖拽细节我们会发现整体拖拽流程是：源节点 -> 拖拽节点 -> 放置节点，默认是将源节点克隆一份变为拖拽节点，拖拽节点克隆一份变为放置节点，在克隆的过程中会重置节点 ID，如果想保持原来节点 ID，可以进行以下操作：

```ts
const dnd = new Addon.Dnd({
getDragNode: (node) => node.clone({ keepId: true }),
getDropNode: (node) => node.clone({ keepId: true }),
})
```

2.怎么自定义拖拽节点的样式？

```ts
const dnd = new Addon.Dnd({
Expand All @@ -77,7 +86,7 @@ const dnd = new Addon.Dnd({
})
```

2.怎么自定义放置到画布上的节点样式？
3.怎么自定义放置到画布上的节点样式？

```ts
const dnd = new Addon.Dnd({
Expand All @@ -89,15 +98,6 @@ const dnd = new Addon.Dnd({
})
```

3.怎么自定义放置到画布上节点的 ID？

```ts
const dnd = new Addon.Dnd({
getDragNode: (node) => node.clone({ keepId: true }),
getDropNode: (node) => node.clone({ keepId: true }),
})
```

## Stencil

Stencil 是 `Addon` 命名空间中的一个插件，是在 Dnd 基础上的进一步封装，提供了一个类似侧边栏的 UI 组件，并支持分组、折叠、搜索等能力。
Expand Down Expand Up @@ -147,7 +147,59 @@ export interface Group {
}
```

初始化时，按照 `options.groups` 提供的分组，在每个分组中根据 `options.stencilGraphXxx` 系列选项渲染一个模板画布。
初始化时，按照 `options.groups` 提供的分组，在每个分组中会渲染一个模板画布。

### Step 2 挂载到页面

将该 UI 组件挂载到页面合适的位置处，例如下面案例中，我们将该组件挂载到侧边栏中。

```ts
this.stencilContainer.appendChild(stencil.container)
```

### Step 3 装载模板节点

我们在每个分组中都渲染了一个模板画布，接下来我们需要向这些模板画布中添加一些模板节点。

```ts
// 创建一些模板节点。
const r1 = new Rect(...)
const c1 = new Circle(...)
const r2 = new Rect(...)
const c2 = new Circle(...)
const r3 = new Rect(...)
const c3 = new Circle(...)

// 将模板节点添加到指定的群组中。
stencil.load([r1, c1, c2, r2.clone()], 'group1')
stencil.load([c2.clone(), r2, r3, c3], 'group2')
```

添加节点时，使用分组或全局的 `layout` 和 `layoutOptions` 来对节点进行自动布局，默认使用网格布局方法来布局模板节点，支持的布局选项有：

| 选项 | 类型 | 默认值 | 说明 |
|-------------|-------------------------------|----------|----------------------------------------------------------------------------------|
| columns | number | `2` | 网格布局的列数，默认为 `2`。行数根据节点数自动计算。 |
| columnWidth | number \| 'auto' \| 'compact' | `'auto'` | 列宽。auto: 所有节点中最宽节点的宽度作为列宽，compact: 该列中最宽节点的宽度作为列宽。 |
| rowHeight | number \| 'auto' \| 'compact' | `'auto'` | 行高。auto: 所有节点中最高节点的高度作为行高，compact: 该行中最高节点的高度作为行高。 |
| dx | number | `10` | 单元格在 X 轴的偏移量，默认为 `10`。 |
| dy | number | `10` | 单元格在 Y 轴的偏移量，默认为 `10`。 |
| marginX | number | `0` | 单元格在 X 轴的边距，默认为 `0`。 |
| marginY | number | `0` | 单元格在 Y 轴的边距，默认为 `0`。 |
| center | boolean | `true` | 节点是否与网格居中对齐，默认为 `true`。 |
| resizeToFit | boolean | `false` | 是否自动调整节点的大小来适应网格大小，默认为 `false`。 |

也可以按照 `(this: Stencil, model: Model, group?: Group | null) => any` 签名进行自定义布局。

### Step 4 拖拽

当我们在模板节点上按下鼠标开始拖动时，就等同于使用该节点调用了 [dnd.start(node, e)](#step-2-开始拖拽) 方法来触发拖拽，更多定制选项请参考上一节 [Dnd 使用教程](#dnd)。

<iframe src="/demos/tutorial/basic/dnd/stencil"></iframe>

### 其他功能

#### 搜索

Stencil 还提供了强大的搜索能力。

Expand Down Expand Up @@ -196,50 +248,11 @@ const stencil = new Addon.Stencil({
})
```

### Step 2 挂载到页面

将该 UI 组件挂载到页面合适的位置处，例如下面案例中，我们将该组件挂载到侧边栏中。

```ts
this.stencilContainer.appendChild(stencil.container)
```

### Step 3 装载模板节点
#### 动态修改 group 大小

我们在每个分组中都渲染了一个模板画布，接下来我们需要向这些模板画布中添加一些模板节点。
我们可以通过 stencil 提供的 `resizeGroup` 动态修改 group 的大小。

```ts
// 创建一些模板节点。
const r1 = new Rect(...)
const c1 = new Circle(...)
const r2 = new Rect(...)
const c2 = new Circle(...)
const r3 = new Rect(...)
const c3 = new Circle(...)

// 将模板节点添加到指定的群组中。
stencil.load([r1, c1, c2, r2.clone()], 'group1')
stencil.load([c2.clone(), r2, r3, c3], 'group2')
```

添加节点时，使用分组或全局的 `layout` 和 `layoutOptions` 来对节点进行自动布局，默认使用网格布局方法来布局模板节点，支持的布局选项有：

| 选项 | 类型 | 默认值 | 说明 |
|-------------|-------------------------------|----------|----------------------------------------------------------------------------------|
| columns | number | `2` | 网格布局的列数，默认为 `2`。行数根据节点数自动计算。 |
| columnWidth | number \| 'auto' \| 'compact' | `'auto'` | 列宽。auto: 所有节点中最宽节点的宽度作为列宽，compact: 该列中最宽节点的宽度作为列宽。 |
| rowHeight | number \| 'auto' \| 'compact' | `'auto'` | 行高。auto: 所有节点中最高节点的高度作为行高，compact: 该行中最高节点的高度作为行高。 |
| dx | number | `10` | 单元格在 X 轴的偏移量，默认为 `10`。 |
| dy | number | `10` | 单元格在 Y 轴的偏移量，默认为 `10`。 |
| marginX | number | `0` | 单元格在 X 轴的边距，默认为 `0`。 |
| marginY | number | `0` | 单元格在 Y 轴的边距，默认为 `0`。 |
| center | boolean | `true` | 节点是否与网格居中对齐，默认为 `true`。 |
| resizeToFit | boolean | `false` | 是否自动调整节点的大小来适应网格大小，默认为 `false`。 |

也可以按照 `(this: Stencil, model: Model, group?: Group | null) => any` 签名进行自定义布局。

### Step 4 拖拽

当我们在模板节点上按下鼠标开始拖动时，就等同于使用该节点调用了 [dnd.start(node, e)](#step-2-开始拖拽) 方法来触发拖拽，更多定制选项请参考上一节 [Dnd 使用教程](#dnd)。

<iframe src="/demos/tutorial/basic/dnd/stencil"></iframe>
// 第一个参数是 group 的 name
stencil.resizeGroup('group1', { width: 200, height: 200 })
```
Loading

0 comments on commit d9bec60

Please sign in to comment.