From 8a1084f7c005bce61d321411ee337525d427939f Mon Sep 17 00:00:00 2001 From: Ben Schmidt Date: Mon, 16 Dec 2024 10:29:28 -0500 Subject: [PATCH 1/2] allow setting label font --- src/interaction.ts | 2 +- src/label_rendering.ts | 18 ++++++++++++++---- src/types.ts | 1 + 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/interaction.ts b/src/interaction.ts index 46e2bd0da..d89c77178 100644 --- a/src/interaction.ts +++ b/src/interaction.ts @@ -173,7 +173,7 @@ export class Zoom { if (event.sourceEvent) { (event.sourceEvent as Event).stopPropagation(); } - }); + }) canvas.call(zoomer); diff --git a/src/label_rendering.ts b/src/label_rendering.ts index 8d8feed11..2519e9f12 100644 --- a/src/label_rendering.ts +++ b/src/label_rendering.ts @@ -32,6 +32,7 @@ export class LabelMaker extends Renderer { public label_key?: string; public labelgroup: SVGGElement; private hovered: undefined | string; + private font: string = 'verdana'; public options: DS.LabelOptions = {}; /** * @@ -46,6 +47,11 @@ export class LabelMaker extends Renderer { ) { super(scatterplot.div!.node() as HTMLDivElement, scatterplot); this.options = options; + if (options.font) { + this.font = options.font; + // else verdana + } + this.canvas = scatterplot .elements![2].selectAll('canvas') .node() as HTMLCanvasElement; @@ -74,6 +80,7 @@ export class LabelMaker extends Renderer { 0.5, [0.5, 1e6], options.margin === undefined ? 30 : options.margin, + this.font ); /* this.tree.accessor = (x, y) => { @@ -264,7 +271,7 @@ export class LabelMaker extends Renderer { if (this.hovered === '' + d.minZ + d.minX) { emphasize += 2; } - context.font = `${datum.height * size_adjust + emphasize}pt verdana`; + context.font = `${datum.height * size_adjust + emphasize}pt ${this.font}`; context.shadowBlur = 12 + emphasize * 3; context.lineWidth = 3 + emphasize; @@ -380,13 +387,13 @@ function getContext(): CanvasRenderingContext2D { return context; } -function measure_text(d: RawPoint, pixel_ratio: number, margin: number) { +function measure_text(d: RawPoint, pixel_ratio: number, margin: number, font: string) { // Uses a global context that it calls into existence for measuring; // using the deepscatter // canvas gets too confused with state information. const context = getContext(); // Called for the side-effect of setting `d.aspect_ratio` on the passed item. - context.font = `${d.height}pt verdana`; + context.font = `${d.height}pt ${font}`; if (d.text === '') { return null; } @@ -427,6 +434,7 @@ class DepthTree extends RBush3D { public pixel_ratio: number; public rectangle_buffer: number; public margin: number; + public font: string; // public insertion_log = []; private _accessor: (p: Point) => [number, number] = (p) => [p.x, p.y]; @@ -440,12 +448,14 @@ class DepthTree extends RBush3D { scale_factor = 0.5, zoom = [0.1, 1000], margin = 10, // in screen pixels + font = 'verdana', ) { // scale factor used to determine how quickly points scale. // Not implemented. // size = exp(log(k) * scale_factor); super(); + this.font = font; this.scale_factor = scale_factor; this.mindepth = zoom[0]; this.maxdepth = zoom[1]; @@ -520,7 +530,7 @@ class DepthTree extends RBush3D { if (point['pixel_width'] === undefined) { measured = { ...point, - ...measure_text(point, this.pixel_ratio, this.margin), + ...measure_text(point, this.pixel_ratio, this.margin, this.font), }; } else { measured = point as Point; diff --git a/src/types.ts b/src/types.ts index 0440be54f..1e3a93ba5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -520,6 +520,7 @@ export type LabelOptions = { useColorScale?: boolean; // Whether the colors of text should inherit from the active color scale. margin?: number; // The number of pixels around each box. Default 30. draggable_labels?: boolean; // Should labels be draggable in place? + font?: string // Font. Default verdana. }; export type Labelset = { From bdea4f632c5101576798a5c8435b22aaeb74b3d8 Mon Sep 17 00:00:00 2001 From: Benjamin Schmidt Date: Tue, 27 May 2025 09:53:37 -0400 Subject: [PATCH 2/2] Update types.ts --- package.json | 2 +- src/types.ts | 3 +-- src/wrap_arrow.ts | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 8df3b5731..3ae8f2fac 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "deepscatter", "type": "module", - "version": "3.0.0-next.50", + "version": "3.0.0-next.47", "description": "Fast, animated zoomable scatterplots scaling to billions of points", "files": [ "dist" diff --git a/src/types.ts b/src/types.ts index 1e3a93ba5..75a95e47c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,7 +11,6 @@ import type { Timestamp, Utf8, Vector, - TypeMap, } from 'apache-arrow'; import type { Renderer } from './rendering'; import type { Deeptable } from './Deeptable'; @@ -520,7 +519,7 @@ export type LabelOptions = { useColorScale?: boolean; // Whether the colors of text should inherit from the active color scale. margin?: number; // The number of pixels around each box. Default 30. draggable_labels?: boolean; // Should labels be draggable in place? - font?: string // Font. Default verdana. + font?: string; // Font. Default verdana. }; export type Labelset = { diff --git a/src/wrap_arrow.ts b/src/wrap_arrow.ts index 6c8d4a2ca..c4df235a2 100644 --- a/src/wrap_arrow.ts +++ b/src/wrap_arrow.ts @@ -14,7 +14,7 @@ import { import { Deeptable } from './Deeptable'; import { add_or_delete_column } from './Deeptable'; import type * as DS from './types'; -import { extent, extent, range } from 'd3-array'; +import { extent, range } from 'd3-array'; import { Rectangle } from './tile'; import { tixToZxy } from './tixrixqid';