# GC.Spread.Sheets.Shapes.ShapeCollection

## Content

# Class: ShapeCollection

[Sheets](../modules/GC.Spread.Sheets).[Shapes](../modules/GC.Spread.Sheets.Shapes).ShapeCollection

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.Shapes.ShapeCollection#constructor)

### Methods

- [add](GC.Spread.Sheets.Shapes.ShapeCollection#add)
- [addCameraShape](GC.Spread.Sheets.Shapes.ShapeCollection#addcamerashape)
- [addConnector](GC.Spread.Sheets.Shapes.ShapeCollection#addconnector)
- [addFormControl](GC.Spread.Sheets.Shapes.ShapeCollection#addformcontrol)
- [addPictureShape](GC.Spread.Sheets.Shapes.ShapeCollection#addpictureshape)
- [all](GC.Spread.Sheets.Shapes.ShapeCollection#all)
- [clear](GC.Spread.Sheets.Shapes.ShapeCollection#clear)
- [get](GC.Spread.Sheets.Shapes.ShapeCollection#get)
- [group](GC.Spread.Sheets.Shapes.ShapeCollection#group)
- [remove](GC.Spread.Sheets.Shapes.ShapeCollection#remove)
- [snapMode](GC.Spread.Sheets.Shapes.ShapeCollection#snapmode)
- [ungroup](GC.Spread.Sheets.Shapes.ShapeCollection#ungroup)
- [zIndex](GC.Spread.Sheets.Shapes.ShapeCollection#zindex)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new ShapeCollection**(`sheet`)

Represents a shape manager that managers all shapes in a sheet.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `sheet` | [`Worksheet`](GC.Spread.Sheets.Worksheet) | The worksheet. |

## Methods

### <a id="add" name="add"></a> add

▸ **add**(`name`, `autoShapeTypeOrModel`, `left?`, `top?`, `width?`, `height?`): [`Shape`](GC.Spread.Sheets.Shapes.Shape)

Add a new shape to shape collection

**`example`**
```
// This example shows how to add a new shape
var shape = activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the shape. If name is empty string, a unique name will be generated. |
| `autoShapeTypeOrModel` | [`IShapeModel`](../interfaces/GC.Spread.Sheets.Shapes.IShapeModel) \| [`AutoShapeType`](../enums/GC.Spread.Sheets.Shapes.AutoShapeType) | The type of the shape (for one of the buildin types) or the model for custom shape. |
| `left?` | `number` | - |
| `top?` | `number` | - |
| `width?` | `number` | - |
| `height?` | `number` | - |

#### Returns

[`Shape`](GC.Spread.Sheets.Shapes.Shape)

The shape that has been added to the sheet.

___

### <a id="addcamerashape" name="addcamerashape"></a> addCameraShape

▸ **addCameraShape**(`name`, `range`, `left?`, `top?`, `width?`, `height?`): [`CameraShape`](GC.Spread.Sheets.Shapes.CameraShape)

Add a new camera shape to shape collection

**`example`**
```
// This example shows how to add a new camera shape
var shape = activeSheet.shapes.addCameraShape("camera shape 1", 'Sheet1!A1:A8', 100, 50, 100, 150);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the camera shape. If name is empty string, a unique name will be generated. |
| `range` | `string` | The range of the shape generated from, it should be a range formula, like Sheet1!A1:A8. |
| `left?` | `number` | - |
| `top?` | `number` | - |
| `width?` | `number` | - |
| `height?` | `number` | - |

#### Returns

[`CameraShape`](GC.Spread.Sheets.Shapes.CameraShape)

The shape that has been added to the sheet.

___

### <a id="addconnector" name="addconnector"></a> addConnector

▸ **addConnector**(`name`, `connectorType`, `beginX?`, `beginY?`, `endX?`, `endY?`): [`ConnectorShape`](GC.Spread.Sheets.Shapes.ConnectorShape)

Add a Connector Shape to shape collection

**`example`**
```
//This example shows how to add a connector shape
var shape1 = activeSheet.shapes.addConnector("shape1", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 200, 50, 300, 200);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the shape. If name is empty string, a unique name will be generated. |
| `connectorType` | [`ConnectorType`](../enums/GC.Spread.Sheets.Shapes.ConnectorType) | The type of the connector. |
| `beginX?` | `number` | - |
| `beginY?` | `number` | - |
| `endX?` | `number` | - |
| `endY?` | `number` | - |

#### Returns

[`ConnectorShape`](GC.Spread.Sheets.Shapes.ConnectorShape)

The connector shape that has been added to the sheet.

___

### <a id="addformcontrol" name="addformcontrol"></a> addFormControl

▸ **addFormControl**(`name`, `formControlType`, `left?`, `top?`, `width?`, `height?`): [`FormControlShape`](GC.Spread.Sheets.Shapes.FormControlShape)

Add a new form control shape to shape collection

**`example`**
```
// This example shows how to add a new form control shape
var shape = activeSheet.shapes.addFormControl("spinButton", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 100, 50, 100, 50);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the shape. If name is empty string, a unique name will be generated. |
| `formControlType` | [`FormControlType`](../enums/GC.Spread.Sheets.Shapes.FormControlType) | The type of the form control shape |
| `left?` | `number` | - |
| `top?` | `number` | - |
| `width?` | `number` | - |
| `height?` | `number` | - |

#### Returns

[`FormControlShape`](GC.Spread.Sheets.Shapes.FormControlShape)

The from control shape that has been added to the sheet.

___

### <a id="addpictureshape" name="addpictureshape"></a> addPictureShape

▸ **addPictureShape**(`name`, `src`, `left?`, `top?`, `width?`, `height?`): [`PictureShape`](GC.Spread.Sheets.Shapes.PictureShape)

Add a new picture shape to shape collection

**`example`**
```
// This example shows how to add a new picture shape
var shape = activeSheet.shapes.addPictureShape("Picture 1", "data:image/svg+xml;base64.....", 100, 50, 100, 100);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the shape. If name is empty string, a unique name will be generated. |
| `src` | `string` | The src of the picture. |
| `left?` | `number` | - |
| `top?` | `number` | - |
| `width?` | `number` | - |
| `height?` | `number` | - |

#### Returns

[`PictureShape`](GC.Spread.Sheets.Shapes.PictureShape)

The picture shape that has been added to the sheet.

___

### <a id="all" name="all"></a> all

▸ **all**(): [`Shape`](GC.Spread.Sheets.Shapes.Shape)[]

get all shapes

**`example`**
```
// This sample shows how to get all shapes in shape collection
activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
activeSheet.shapes.addConnector("shape2", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 200, 50, 300, 200);
var shapes = activeSheet.shapes.all();
```

#### Returns

[`Shape`](GC.Spread.Sheets.Shapes.Shape)[]

all shapes

___

### <a id="clear" name="clear"></a> clear

▸ **clear**(): `void`

clear all shapes

**`example`**
```
//This example shows how to clear all shapes in shape collection
activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
activeSheet.shapes.addConnector("shape2", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 200, 50, 300, 200);
activeSheet.shapes.clear();
```

#### Returns

`void`

___

### <a id="get" name="get"></a> get

▸ **get**(`name`): [`Shape`](GC.Spread.Sheets.Shapes.Shape)

Get a shape with name

**`example`**
```
//This example shows how to get a shape with name.
activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
activeSheet.shapes.get("shape1");
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the shape. |

#### Returns

[`Shape`](GC.Spread.Sheets.Shapes.Shape)

The Shape

___

### <a id="group" name="group"></a> group

▸ **group**(`shapes`): [`GroupShape`](GC.Spread.Sheets.Shapes.GroupShape)

Groups the Shapes.

**`example`**
```
//This sample shows how to group some shapes
var shape1 = activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
var shape2 = activeSheet.shapes.addConnector("shape2", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 200, 50, 300, 200);
var shapes = [shape1, shape2];
var groupShape = activeSheet.shapes.group(shapes)
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `shapes` | [`Shape`](GC.Spread.Sheets.Shapes.Shape)[] | The shapes to group. |

#### Returns

[`GroupShape`](GC.Spread.Sheets.Shapes.GroupShape)

The Shape group.

___

### <a id="remove" name="remove"></a> remove

▸ **remove**(`name`): `void`

remove a shape

**`example`**
```
//This example shows how to remove a shape
activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
activeSheet.shapes.remove("shape1");
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the shape. |

#### Returns

`void`

___

### <a id="snapmode" name="snapmode"></a> snapMode

▸ **snapMode**(`value?`): `void` \| [`SnapMode`](../enums/GC.Spread.Sheets.Shapes.SnapMode)

Gets or sets whether to align shape to grid line or the other shapes.

**`example`**
```
sheet1.shapes.SnapMode(GC.Spread.Sheets.Shapes.SnapMode.grid);
var snapMode = sheet1.shapes.snapMode();
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | [`SnapMode`](../enums/GC.Spread.Sheets.Shapes.SnapMode) | Whether to snap shapes to the grid line or other shapes. |

#### Returns

`void` \| [`SnapMode`](../enums/GC.Spread.Sheets.Shapes.SnapMode)

If no value is set, returns which snapMode use.

___

### <a id="ungroup" name="ungroup"></a> ungroup

▸ **ungroup**(`groupShape`): `void`

Separate a groupShape to some shapes

**`example`**
```
//This sample shows how to separate a groupShape to some shapes
var shape1 = activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
var shape2 = activeSheet.shapes.addConnector("shape2", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 200, 50, 300, 200);
var shapes = [shape1, shape2];
var groupShape = activeSheet.shapes.group(shapes);
activeSheet.shapes.ungroup(groupShape);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `groupShape` | [`GroupShape`](GC.Spread.Sheets.Shapes.GroupShape) | The groupShape to separate. |

#### Returns

`void`

___

### <a id="zindex" name="zindex"></a> zIndex

▸ **zIndex**(`shapeName`, `zIndex`): `number`

 Get or set the z-index for a shape

**`example`**
```
//This is a sample shows how to use zIndex.
var shape1 = activeSheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
var style = shape1.style();
style.fill.color = "red";
shape1.style(style);
var shape2 = activeSheet.shapes.addConnector("shape2", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 100, 50, 200, 200);
activeSheet.shapes.zIndex("shape2"); // 1
activeSheet.shapes.zIndex("shape2", 0);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `shapeName` | `string` | The name of the shape |
| `zIndex` | `number` | The z-index for the shape. The zIndex should be between 0 to all shapes length(not contains). A shape with greater zIndex is always in front of a shape with a lower zIndex. |

#### Returns

`number`