Separate rendering from painting

* rendering is for constructing DOM nodes * painting is for drawing to the canvas
bokeh · mattpap · May 3, 2024 · Mar 29, 2024 · Mar 29, 2024 · Apr 11, 2024
commit 366d1c507bcd8715dc532d0596effa61669e9975
diff --git a/bokehjs/src/lib/core/visuals/hatch.ts b/bokehjs/src/lib/core/visuals/hatch.ts
@@ -40,7 +40,7 @@ export class Hatch extends VisualProperties {
         void image.then((image) => {
           if (this._update_iteration == _update_iteration) {
             finalize(image)
-            this.obj.request_render()
+            this.obj.request_paint()
           }
         })
       } else {
@@ -156,7 +156,7 @@ export class HatchScalar extends VisualUniforms {
         void image.then((image) => {
           if (this._update_iteration == _update_iteration) {
             finalize(image)
-            this.obj.request_render()
+            this.obj.request_paint()
           }
         })
       } else {
@@ -269,7 +269,7 @@ export class HatchVector extends VisualUniforms {
           void image.then((image) => {
             if (this._update_iteration == _update_iteration) {
               finalize(image)
-              this.obj.request_render()
+              this.obj.request_paint()
             }
           })
         } else {

diff --git a/bokehjs/src/lib/core/visuals/text.ts b/bokehjs/src/lib/core/visuals/text.ts
@@ -22,7 +22,7 @@ function load_font(font: string, obj: Renderable): void {
 
   const {fonts} = document
   if (!fonts.check(font)) {
-    void fonts.load(font).then(() => obj.request_render())
+    void fonts.load(font).then(() => obj.request_paint())
   }
 }
 

diff --git a/bokehjs/src/lib/core/visuals/visual.ts b/bokehjs/src/lib/core/visuals/visual.ts
@@ -6,7 +6,7 @@ export type NameOf<Key extends string> = Key extends `text_${infer Name}` ? Name
 export type ValuesOf<T> = {[Key in keyof T & string as NameOf<Key>]: T[Key] extends p.Property<infer V> ? V : never}
 
 export interface Renderable {
-  request_render(): void
+  request_paint(): void
  readonly canvas: {
     create_layer(): CanvasLayer
   }

diff --git a/bokehjs/src/lib/models/annotations/arrow.ts b/bokehjs/src/lib/models/annotations/arrow.ts
@@ -133,7 +133,7 @@ export class ArrowView extends DataAnnotationView {
     }
   }
 
-  paint(ctx: Context2d): void {
+  _paint_data(ctx: Context2d): void {
     const {start, end} = this
 
     const {_sx_start, _sy_start, _sx_end, _sy_end, _angles} = this
@@ -144,15 +144,15 @@ export class ArrowView extends DataAnnotationView {
         ctx.save()
         ctx.translate(_sx_end[i], _sy_end[i])
         ctx.rotate(_angles[i])
-        end.render(ctx, i)
+        end.paint(ctx, i)
         ctx.restore()
       }
 
       if (start != null) {
         ctx.save()
         ctx.translate(_sx_start[i], _sy_start[i])
         ctx.rotate(_angles[i] + Math.PI)
-        start.render(ctx, i)
+        start.paint(ctx, i)
         ctx.restore()
       }
 

diff --git a/bokehjs/src/lib/models/annotations/arrow_head.ts b/bokehjs/src/lib/models/annotations/arrow_head.ts
@@ -51,7 +51,7 @@ export class OpenHeadView extends ArrowHeadView {
     ctx.lineTo(0.5*size_i, size_i)
   }
 
-  render(ctx: Context2d, i: number): void {
+  paint(ctx: Context2d, i: number): void {
     const size_i = this.size.get(i)
     ctx.beginPath()
     ctx.moveTo(0.5*size_i, size_i)
@@ -102,7 +102,7 @@ export class NormalHeadView extends ArrowHeadView {
     ctx.lineTo(0.5*size_i, size_i)
   }
 
-  render(ctx: Context2d, i: number): void {
+  paint(ctx: Context2d, i: number): void {
     const size_i = this.size.get(i)
     ctx.beginPath()
     ctx.moveTo(0.5*size_i, size_i)
@@ -161,7 +161,7 @@ export class VeeHeadView extends ArrowHeadView {
     ctx.lineTo(0.5*size_i, size_i)
   }
 
-  render(ctx: Context2d, i: number): void {
+  paint(ctx: Context2d, i: number): void {
     const size_i = this.size.get(i)
     ctx.beginPath()
     ctx.moveTo(0.5*size_i, size_i)
@@ -210,7 +210,7 @@ export class TeeHeadView extends ArrowHeadView {
   declare model: TeeHead
   declare visuals: TeeHead.Visuals
 
-  render(ctx: Context2d, i: number): void {
+  paint(ctx: Context2d, i: number): void {
     const size_i = this.size.get(i)
     ctx.beginPath()
     ctx.moveTo(0.5*size_i, 0)

diff --git a/bokehjs/src/lib/models/annotations/band.ts b/bokehjs/src/lib/models/annotations/band.ts
@@ -8,7 +8,7 @@ export class BandView extends UpperLowerView {
   declare model: Band
   declare visuals: Band.Visuals
 
-  paint(ctx: Context2d): void {
+  _paint_data(ctx: Context2d): void {
     // Draw the band body
     ctx.beginPath()
     ctx.moveTo(this._lower_sx[0], this._lower_sy[0])

diff --git a/bokehjs/src/lib/models/annotations/base_color_bar.ts b/bokehjs/src/lib/models/annotations/base_color_bar.ts
@@ -118,9 +118,6 @@ export abstract class BaseColorBarView extends AnnotationView {
       request_paint() {
         self.parent.request_paint(self)
       },
-      request_render() {
-        self.request_paint()
-      },
       notify_finished_after_paint() {
         self.parent.notify_finished_after_paint()
       },
@@ -173,8 +170,8 @@ export abstract class BaseColorBarView extends AnnotationView {
       this._apply_axis_properties()
       // TODO?: this.plot_view.invalidate_layout()
     })
-    this.connect(this._ticker.change, () => this.request_render())
-    this.connect(this._formatter.change, () => this.request_render())
+    this.connect(this._ticker.change, () => this.request_paint())
+    this.connect(this._formatter.change, () => this.request_paint())
   }
 
   protected _update_frame(): void {
@@ -483,13 +480,13 @@ export abstract class BaseColorBarView extends AnnotationView {
 
   protected abstract _paint_colors(ctx: Context2d, bbox: BBox): void
 
-  protected _render(): void {
+  protected _paint(): void {
     const {ctx} = this.layer
     ctx.save()
     this._paint_bbox(ctx, this._inner_layout.bbox)
     this._paint_colors(ctx, this._inner_layout.center_panel.bbox)
-    this._title_view.render()
-    this._axis_view.render()
+    this._title_view.paint()
+    this._axis_view.paint()
     ctx.restore()
   }
 

diff --git a/bokehjs/src/lib/models/annotations/box_annotation.ts b/bokehjs/src/lib/models/annotations/box_annotation.ts
@@ -38,7 +38,7 @@ export class BoxAnnotationView extends AnnotationView implements Pannable, Pinch
 
   override connect_signals(): void {
     super.connect_signals()
-    this.connect(this.model.change, () => this.request_render())
+    this.connect(this.model.change, () => this.request_paint())
   }
 
   readonly [auto_ranged] = true
@@ -133,7 +133,7 @@ export class BoxAnnotationView extends AnnotationView implements Pannable, Pinch
     })
   }
 
-  protected _render(): void {
+  protected _paint(): void {
     if (!this.bbox.is_valid) {
       return
     }

diff --git a/bokehjs/src/lib/models/annotations/color_bar.ts b/bokehjs/src/lib/models/annotations/color_bar.ts
@@ -202,7 +202,7 @@ export class ColorBarView extends BaseColorBarView {
     }
 
     this._set_canvas_image()
-    this.plot_view.request_layout() // this.request_render()
+    this.plot_view.request_layout() // this.request_paint()
   }
 
   override _paint_colors(ctx: Context2d, bbox: BBox): void {

diff --git a/bokehjs/src/lib/models/annotations/data_annotation.ts b/bokehjs/src/lib/models/annotations/data_annotation.ts
@@ -22,7 +22,7 @@ export abstract class DataAnnotationView extends AnnotationView {
   }
 
   protected _rerender(): void {
-    this.request_render()
+    this.request_paint()
   }
 
   set_data(source: ColumnarDataSource): void {
@@ -57,17 +57,17 @@ export abstract class DataAnnotationView extends AnnotationView {
 
   abstract map_data(): void
 
-  abstract paint(ctx: Context2d): void
+  abstract _paint_data(ctx: Context2d): void
 
   private _initial_set_data = false
 
-  protected _render(): void {
+  protected _paint(): void {
     if (!this._initial_set_data) {
       this.set_data(this.model.source)
       this._initial_set_data = true
     }
     this.map_data()
-    this.paint(this.layer.ctx)
+    this._paint_data(this.layer.ctx)
   }
 }
 

diff --git a/bokehjs/src/lib/models/annotations/html/label.ts b/bokehjs/src/lib/models/annotations/html/label.ts
@@ -37,7 +37,7 @@ export class HTMLLabelView extends TextAnnotationView {
     return {width, height}
   }
 
-  protected _render(): void {
+  protected _paint(): void {
     const {angle, angle_units} = this.model
     const rotation = compute_angle(angle, angle_units)
 
@@ -71,7 +71,7 @@ export class HTMLLabelView extends TextAnnotationView {
     sx += this.model.x_offset
     sy -= this.model.y_offset
 
-    this._paint(this.layer.ctx, this.model.text, sx, sy, rotation)
+    this._paint_text(this.layer.ctx, this.model.text, sx, sy, rotation)
   }
 }
 

diff --git a/bokehjs/src/lib/models/annotations/html/label_set.ts b/bokehjs/src/lib/models/annotations/html/label_set.ts
@@ -44,7 +44,7 @@ export class HTMLLabelSetView extends DataAnnotationView {
   }
 
   protected override _rerender(): void {
-    this.render()
+    this.paint()
   }
 
   map_data(): void {
@@ -74,7 +74,7 @@ export class HTMLLabelSetView extends DataAnnotationView {
     })()
   }
 
-  paint(): void {
+  _paint_data(): void {
     const {ctx} = this.layer
 
     for (let i = 0, end = this.text.length; i < end; i++) {
@@ -89,11 +89,11 @@ export class HTMLLabelSetView extends DataAnnotationView {
         continue
       }
 
-      this._paint(ctx, i, text_i, sx_i, sy_i, angle_i)
+      this._paint_text(ctx, i, text_i, sx_i, sy_i, angle_i)
     }
   }
 
-  protected _paint(ctx: Context2d, i: number, text: string, sx: number, sy: number, angle: number): void {
+  protected _paint_text(ctx: Context2d, i: number, text: string, sx: number, sy: number, angle: number): void {
     assert(i in this.els)
     const el = this.els[i]
 

diff --git a/bokehjs/src/lib/models/annotations/html/text_annotation.ts b/bokehjs/src/lib/models/annotations/html/text_annotation.ts
@@ -36,15 +36,15 @@ export abstract class TextAnnotationView extends AnnotationView {
 
   override connect_signals(): void {
     super.connect_signals()
-    this.connect(this.model.change, () => this.render())
+    this.connect(this.model.change, () => this.paint())
   }
 
-  override render(): void {
+  override paint(): void {
     if (!this.model.visible) {
       undisplay(this.el)
     }
 
-    super.render()
+    super.paint()
   }
 
   get padding(): LRTB<number> {
@@ -55,7 +55,7 @@ export abstract class TextAnnotationView extends AnnotationView {
     return resolve.border_radius(this.model.border_radius)
   }
 
-  protected _paint(ctx: Context2d, text: string, sx: number, sy: number, angle: number): void {
+  protected _paint_text(ctx: Context2d, text: string, sx: number, sy: number, angle: number): void {
     const {el} = this
     undisplay(el)
 

diff --git a/bokehjs/src/lib/models/annotations/html/title.ts b/bokehjs/src/lib/models/annotations/html/title.ts
@@ -67,7 +67,7 @@ export class HTMLTitleView extends TextAnnotationView {
     return [sx, sy]
   }
 
-  protected _render(): void {
+  protected _paint(): void {
     const {text} = this.model
     if (text.length == 0) {
       return
@@ -79,7 +79,7 @@ export class HTMLTitleView extends TextAnnotationView {
     const [sx, sy] = this._get_location()
     const angle = this.panel.get_label_angle_heuristic("parallel")
 
-    this._paint(this.layer.ctx, text, sx, sy, angle)
+    this._paint_text(this.layer.ctx, text, sx, sy, angle)
   }
 
   // XXX: this needs to use CSS computed styles

diff --git a/bokehjs/src/lib/models/annotations/label_set.ts b/bokehjs/src/lib/models/annotations/label_set.ts
@@ -48,7 +48,7 @@ export class LabelSetView extends DataAnnotationView {
     })()
   }
 
-  paint(): void {
+  _paint_data(): void {
     const {ctx} = this.layer
 
     for (let i = 0, end = this.text.length; i < end; i++) {
@@ -63,11 +63,11 @@ export class LabelSetView extends DataAnnotationView {
         continue
       }
 
-      this._paint(ctx, i, `${text_i}`, sx_i, sy_i, angle_i)
+      this._paint_text(ctx, i, `${text_i}`, sx_i, sy_i, angle_i)
     }
   }
 
-  protected _paint(ctx: Context2d, i: number, text: string, sx: number, sy: number, angle: number): void {
+  protected _paint_text(ctx: Context2d, i: number, text: string, sx: number, sy: number, angle: number): void {
     const graphics = new TextBox({text})
     graphics.angle = angle
     graphics.position = {sx, sy}

diff --git a/bokehjs/src/lib/models/annotations/legend.ts b/bokehjs/src/lib/models/annotations/legend.ts
@@ -77,9 +77,9 @@ export class LegendView extends AnnotationView {
   override connect_signals(): void {
     super.connect_signals()
 
-    const rerender = () => this.request_render()
-    this.connect(this.model.change, rerender)
-    this.connect(this.model.item_change, rerender)
+    const repaint = () => this.request_paint()
+    this.connect(this.model.change, repaint)
+    this.connect(this.model.item_change, repaint)
   }
 
   override bbox: BBox = new BBox()
@@ -320,10 +320,10 @@ export class LegendView extends AnnotationView {
     return false
   }
 
-  protected _render(): void {
+  protected _paint(): void {
     // It would be better to update geometry (the internal layout) only when
     // necessary, but conditions for that are not clear, so for now update
-    // at every render.
+    // at every paint.
     this.update_geometry()
     this.compute_geometry()
 

diff --git a/bokehjs/src/lib/models/annotations/poly_annotation.ts b/bokehjs/src/lib/models/annotations/poly_annotation.ts
@@ -112,7 +112,7 @@ export class PolyAnnotationView extends AnnotationView implements Pannable, Move
 
   override connect_signals(): void {
     super.connect_signals()
-    this.connect(this.model.change, () => this.request_render())
+    this.connect(this.model.change, () => this.request_paint())
   }
 
   readonly [auto_ranged] = true
@@ -154,7 +154,7 @@ export class PolyAnnotationView extends AnnotationView implements Pannable, Move
     }
   }
 
-  protected _render(): void {
+  protected _paint(): void {
     const {xs, ys} = this.model
     assert(xs.length == ys.length)