Default aligment is left,top

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file, following t
 - Can manipulate markers via `hm.extensions.marker?.drawMarkers({...})`
 - Default coloring is "everything gray", even for numeric values
 - Color scales are created by `ColorScale.continuous`
+- Default axis alignment for (`zoom`, `getZoom`, `events.zoom`) changed from center,center to left,top (call `setAlignment` to change)
 - Dropped `formatDataItem` function
 
 ## [0.9.0] - 2024-04-29

docs/customization.md

@@ -215,26 +215,26 @@ This method controls how column/row indices and names are aligned to X and Y axe
 
 Let's demonstrate this on our example with 4 columns, corresponding to X values ("column names") 1, 2, 3, 4. Column indices are always 0-based, so 0, 1, 2, 3.
 
-Default alignment is `'center'`, so the reported value is aligned with the center of the column:
+Default alignment is `'left'`, so the reported value is aligned with the left edge of the column:
 
 ```
-xIndex: -0.5 0 0.5 1 1.5 2 2.5 3 3.5
+xIndex:  0 0.5 1 1.5 2 2.5 3 3.5 4
  ┌─────────┬─────────┬─────────┬─────────┐
  │ Index 0 │ Index 1 │ Index 2 │ Index 3 │
- │  x = 1 │ x = 2 │ x = 3 │ x = 4  │
+ │ Value 1 │ Value 2 │ Value 3 │ Value 4 │
  └─────────┴─────────┴─────────┴─────────┘
-x: 1.5 1 1.5 2 2.5 3 3.5 4 4.5
+x:  1 1.5 2 2.5 3 3.5 4 4.5 5
 ```
 
-When using `'left'`, the reported value is aligned with the left edge of the column:
+When using `'center'`, the reported value is aligned with the center of the column:
 
 ```
-xIndex:  0 0.5 1 1.5 2 2.5 3 3.5 4
+xIndex: -0.5 0 0.5 1 1.5 2 2.5 3 3.5
  ┌─────────┬─────────┬─────────┬─────────┐
  │ Index 0 │ Index 1 │ Index 2 │ Index 3 │
- │  x = 1 │ x = 2 │ x = 3 │ x = 4  │
+ │ Value 1 │ Value 2 │ Value 3 │ Value 4 │
  └─────────┴─────────┴─────────┴─────────┘
-x:  1 1.5 2 2.5 3 3.5 4 4.5 5
+x: 1.5 1 1.5 2 2.5 3 3.5 4 4.5
 ```
 
 When using `'right'`, the reported value is aligned with the right edge of the column:
@@ -243,19 +243,21 @@ When using `'right'`, the reported value is aligned with the right edge of the c
 xIndex: -1 -0.5 0 0.5 1 1.5 2 2.5 3
  ┌─────────┬─────────┬─────────┬─────────┐
  │ Index 0 │ Index 1 │ Index 2 │ Index 3 │
- │  x = 1 │ x = 2 │ x = 3 │ x = 4  │
+ │ Value 1 │ Value 2 │ Value 3 │ Value 4 │
  └─────────┴─────────┴─────────┴─────────┘
 x: 0 1.5 1 1.5 2 2.5 3 3.5 4
 ```
 
 Vertical alignment (rows) works in the same way, but `'top'` and `'bottom'` is used instead of `'left'` and `'right'`.
 
+Default alignment is `'left'` and `'top'`, which is also what HeatmapComponent uses internally.
+
 ```ts
 setAlignment(x: 'left' | 'center' | 'right' | undefined, y: 'top' | 'center' | 'bottom' | undefined): this
 
 // Example usage:
-heatmap.setAlignment('left', 'top');
 heatmap.setAlignment('center', 'center');
+heatmap.setAlignment('left', 'top');
 ```
 
 ---

src/heatmap-component/state.ts

@@ -94,10 +94,12 @@ export class State<TX, TY, TDatum> {
  /** Values corresponding to the individual rows ("row names") */
  yDomain: Domain<TY> = Domain.create([]);
 
- /** Controls how X axis values align with the columns when using `Heatmap.zoom` and `Heatmap.events.zoom` (position of a value on X axis can be aligned to the left edge/center/right edge of the column showing that value) */
- xAlignment: XAlignmentMode = 'center';
- /** Controls how Y axis values align with the rows when using `Heatmap.zoom` and `Heatmap.events.zoom` (position of a value on Y axis is aligned to the top edge/center/bottom edge of the row showing that value) */
- yAlignment: YAlignmentMode = 'center';
+ /** Controls how X axis values align with the columns when using `Heatmap.zoom` and `Heatmap.events.zoom` (position of a value on X axis can be aligned to the left edge/center/right edge of the column showing that value). Call `setAlignment` to change. */
+ get xAlignment() { return this._xAlignment; }
+ private _xAlignment: XAlignmentMode = 'left';
+ /** Controls how Y axis values align with the rows when using `Heatmap.zoom` and `Heatmap.events.zoom` (position of a value on Y axis is aligned to the top edge/center/bottom edge of the row showing that value). Call `setAlignment` to change. */
+ get yAlignment() { return this._yAlignment; }
+ private _yAlignment: YAlignmentMode = 'top';
 
  /** Extent of the data world and canvas */
  boxes: Boxes = { wholeWorld: Box.create(0, 0, 1, 1), visWorld: Box.create(0, 0, 1, 1), canvas: Box.create(0, 0, 1, 1) };
@@ -206,8 +208,8 @@ export class State<TX, TY, TDatum> {
 
  /** Controls how column/row indices and names are aligned to X and Y axes, when using `.zoom` and `.events.zoom` */
  setAlignment(x: XAlignmentMode | undefined, y: YAlignmentMode | undefined): void {
- if (x) this.xAlignment = x;
- if (y) this.yAlignment = y;
+ if (x) this._xAlignment = x;
+ if (y) this._yAlignment = y;
  this.emitZoom('setAlignment');
  }