Props
| Name | Type | Default value | Required? | Description |
|---|---|---|---|---|
currentPositions | Array | - | No | The current positions of all members. |
teamMembers | Array | - | No | The list of team members displayed on the mat. |
width | Number | 500 | No | The width of the SVG mat in pixels. |
height | Number | - | No | The height of the SVG mat in pixels. |
dotRadius | Number | 20 | No | The radius of each member's dot on the mat. |
snapping | Boolean | true | No | Whether position snapping is enabled. |
transitionMs | Number | 1000 | No | The transition duration for movements in milliseconds. |
interactive | Boolean | true | No | Whether the mat is interactive (allows dragging). |
matType | String | "square" | No | The type/layout of the mat (e.g., 'square', 'cheer'). |
proposedPositions | Array | - | No | the proposed positions of unpositioned members. |
Data
| Name | Type | Default value | Description |
|---|---|---|---|
selectedMemberId | String | null | The currently selected member's ID for interaction. |
snappingDistance | Number | 2 | The distance threshold for snapping positions. |
positions | Array | null | The array of member positions on the mat. |
Computed
| Name | Type | Description |
|---|---|---|
_height | Number | The computed height of the mat based on type and width |
Events
| Name | Payload Type | Description |
|---|---|---|
positionChange | Array | Emitted when a member's position is changed. [selectedMemberId, xNew, yNew] |
Examples
<Mat :currentPositions="positions" :teamMembers="members" @positionChange="handler" /><Mat :currentPositions="positions" :teamMembers="members" :width="800" :height="400" :dotRadius="30" :snapping="false" :transitionMs="500" :interactive="false" matType="cheer" :proposedPositions="proposedPositions" @positionChange="handler" />