| 125 | */ |
| 126 | @nodeName('Circle') |
| 127 | export class Circle extends Curve { |
| 128 | /** |
| 129 | * The starting angle in degrees for the circle sector. |
| 130 | * |
| 131 | * @remarks |
| 132 | * This property can be used together with {@link startAngle} to turn this |
| 133 | * circle into a sector (when using fill) or an arc (when using stroke). |
| 134 | * |
| 135 | * @defaultValue 0 |
| 136 | */ |
| 137 | @initial(0) |
| 138 | @signal() |
| 139 | public declare readonly startAngle: SimpleSignal<number, this>; |
| 140 | |
| 141 | /** |
| 142 | * The ending angle in degrees for the circle sector. |
| 143 | * |
| 144 | * @remarks |
| 145 | * This property can be used together with {@link endAngle} to turn this |
| 146 | * circle into a sector (when using fill) or an arc (when using stroke). |
| 147 | * |
| 148 | * @defaultValue 360 |
| 149 | */ |
| 150 | @initial(360) |
| 151 | @signal() |
| 152 | public declare readonly endAngle: SimpleSignal<number, this>; |
| 153 | |
| 154 | /** |
| 155 | * Whether the circle sector should be drawn counterclockwise. |
| 156 | * |
| 157 | * @remarks |
| 158 | * By default, the circle begins at {@link startAngle} and is drawn clockwise |
| 159 | * until reaching {@link endAngle}. Setting this property to true will reverse |
| 160 | * this direction. |
| 161 | */ |
| 162 | @initial(false) |
| 163 | @signal() |
| 164 | public declare readonly counterclockwise: SimpleSignal<boolean, this>; |
| 165 | |
| 166 | /** |
| 167 | * Whether the path of this circle should be closed. |
| 168 | * |
| 169 | * @remarks |
| 170 | * When set to true, the path of this circle will start and end at the center. |
| 171 | * This can be used to fine-tune how sectors are rendered. |
| 172 | * |
| 173 | * @example |
| 174 | * A closed circle will look like a pie chart: |
| 175 | * ```tsx |
| 176 | * <Circle |
| 177 | * size={300} |
| 178 | * fill={'lightseagreen'} |
| 179 | * endAngle={230} |
| 180 | * closed={true} |
| 181 | * /> |
| 182 | * ``` |
| 183 | * An open one will look like an arc: |
| 184 | * ```tsx |