176       if (!rects.some((rect) => rect.id === key)) {
181     rects.forEach((rect) => {
182       const existingGraphics = this.lastScene.rectIdToRectGraphics.get(rect.id);
184         ? this.makeAndAddRectMesh(rect)
186             rect,
187             existingGraphics.rect,
190       this.lastScene.rectIdToRectGraphics.set(rect.id, {rect, mesh});
218         .filter((graphics) => graphics.rect.isClickable)
254   private makeAndAddRectMesh(rect: UiRect3D): THREE.Mesh {
255     const color = this.getColor(rect);
256     const fillMaterial = this.getFillMaterial(rect, color);
258       this.makeRoundedRectGeometry(rect),
259       rect.fillRegion ? Canvas.TRANSPARENT_MATERIAL : fillMaterial,
262     if (rect.fillRegion) {
263       this.addFillRegionMesh(rect, fillMaterial, mesh);
265     this.addRectBorders(rect, mesh);
269     mesh.position.z = rect.topLeft.z;
270     mesh.name = rect.id;
271     mesh.applyMatrix4(this.toMatrix4(rect.transform));
276   private makeRoundedRectGeometry(rect: UiRect3D): THREE.ShapeGeometry {
278       rect.topLeft.x,
279       rect.bottomRight.y,
280       rect.topLeft.z,
283       rect.bottomRight.x,
284       rect.topLeft.y,
285       rect.bottomRight.z,
287     const cornerRadius = this.getAdjustedCornerRadius(rect);
291       .moveTo(rect.topLeft.x, rect.topLeft.y + cornerRadius)
299       .lineTo(rect.bottomRight.x - cornerRadius, rect.bottomRight.y)
301         rect.bottomRight.x,
302         rect.bottomRight.y,
303         rect.bottomRight.x,
304         rect.bottomRight.y - cornerRadius,
313       .lineTo(rect.topLeft.x + cornerRadius, rect.topLeft.y)
315         rect.topLeft.x,
316         rect.topLeft.y,
317         rect.topLeft.x,
318         rect.topLeft.y + cornerRadius,
336   private getColor(rect: UiRect3D): THREE.Color | undefined {
337     switch (rect.colorType) {
340         return this.getVisibleRectColor(rect.darkFactor);
352             rect.darkFactor,
372         assertUnreachable(rect.colorType);
395     rect: UiRect3D,
401     if (rect.cornerRadius) {
414   private getAdjustedCornerRadius(rect: UiRect3D): number {
416     const height = rect.bottomRight.y - rect.topLeft.y;  constant
417     const width = rect.bottomRight.x - rect.topLeft.x;  constant
419     const cornerRadius = Math.min(rect.cornerRadius, minEdge / 2);
427   private makePinnedRectBorders(rect: UiRect3D): THREE.Mesh {
428     const pinnedBorders = this.createPinnedBorderRects(rect);
429     let color = this.pinnedIdToColorMap.get(rect.id);
434       this.pinnedIdToColorMap.set(rect.id, color);
447   private createPinnedBorderRects(rect: UiRect3D): THREE.Shape[] {
448     const cornerRadius = this.getAdjustedCornerRadius(rect);
449     const xBoldWidth = Canvas.RECT_EDGE_BOLD_WIDTH / rect.transform.dsdx;
450     const yBorderWidth = Canvas.RECT_EDGE_BOLD_WIDTH / rect.transform.dsdy;
454         .moveTo(rect.topLeft.x, rect.topLeft.y + cornerRadius)
455         .lineTo(rect.topLeft.x, rect.bottomRight.y - cornerRadius)
457           rect.topLeft.x,
458           rect.bottomRight.y,
459           rect.topLeft.x + cornerRadius,
460           rect.bottomRight.y,
462         .lineTo(rect.bottomRight.x - cornerRadius, rect.bottomRight.y)
464           rect.bottomRight.x,
465           rect.bottomRight.y,
466           rect.bottomRight.x,
467           rect.bottomRight.y - cornerRadius,
470           rect.bottomRight.x - xBoldWidth,
471           rect.bottomRight.y - cornerRadius,
474           rect.bottomRight.x - xBoldWidth,
475           rect.bottomRight.y - yBorderWidth,
476           rect.bottomRight.x - cornerRadius,
477           rect.bottomRight.y - yBorderWidth,
480           rect.topLeft.x + cornerRadius,
481           rect.bottomRight.y - yBorderWidth,
484           rect.topLeft.x + xBoldWidth,
485           rect.bottomRight.y - yBorderWidth,
486           rect.topLeft.x + xBoldWidth,
487           rect.bottomRight.y - cornerRadius,
489         .lineTo(rect.topLeft.x + xBoldWidth, rect.topLeft.y + cornerRadius)
490         .lineTo(rect.topLeft.x, rect.topLeft.y + cornerRadius),
494         .moveTo(rect.bottomRight.x, rect.bottomRight.y - cornerRadius)
495         .lineTo(rect.bottomRight.x, rect.topLeft.y + cornerRadius)
497           rect.bottomRight.x,
498           rect.topLeft.y,
499           rect.bottomRight.x - cornerRadius,
500           rect.topLeft.y,
502         .lineTo(rect.topLeft.x + cornerRadius, rect.topLeft.y)
504           rect.topLeft.x,
505           rect.topLeft.y,
506           rect.topLeft.x,
507           rect.topLeft.y + cornerRadius,
509         .lineTo(rect.topLeft.x + xBoldWidth, rect.topLeft.y + cornerRadius)
511           rect.topLeft.x + xBoldWidth,
512           rect.topLeft.y + yBorderWidth,
513           rect.topLeft.x + cornerRadius,
514           rect.topLeft.y + yBorderWidth,
517           rect.bottomRight.x - cornerRadius,
518           rect.topLeft.y + yBorderWidth,
521           rect.bottomRight.x - xBoldWidth,
522           rect.topLeft.y + yBorderWidth,
523           rect.bottomRight.x - xBoldWidth,
524           rect.topLeft.y + cornerRadius,
527           rect.bottomRight.x - xBoldWidth,
528           rect.bottomRight.y - cornerRadius,
530         .lineTo(rect.bottomRight.x, rect.bottomRight.y - cornerRadius),
536     rect: UiRect3D,
542         rect.colorType === ColorType.VISIBLE_WITH_OPACITY ||
543         rect.colorType === ColorType.HAS_CONTENT_AND_OPACITY ||
544         rect.colorType === ColorType.HIGHLIGHTED_WITH_OPACITY
546         opacity = rect.darkFactor;
548         opacity = rect.isOversized
562     rect: UiRect3D,
566     const fillShapes = assertDefined(rect.fillRegion).map((fillRect) =>
575     fillMesh.name = rect.id + Canvas.GRAPHICS_NAMES.fillRegion;
881   rect: UiRect3D;  property