diff --git a/dist/deepscatter.js b/dist/deepscatter.js index 2dff014da..858947c24 100644 --- a/dist/deepscatter.js +++ b/dist/deepscatter.js @@ -36157,14 +36157,16 @@ class LabelMaker extends Renderer { event.stopPropagation(); return; }); - handler.on("drag", (event, d) => { - d.data.x = x_.invert(event.x); - d.data.y = y_.invert(event.y); - }); - handler.on("end", (event, d) => { - console.log(`${d.data.x} ${d.data.y} ${d.data.text}`); - }); - bboxes.call(handler); + if (this.options.draggable_labels) { + handler.on("drag", (event, d) => { + d.data.x = x_.invert(event.x); + d.data.y = y_.invert(event.y); + }); + handler.on("end", (event, d) => { + console.log(`${d.data.x} ${d.data.y} ${d.data.text}`); + }); + bboxes.call(handler); + } context2.shadowColor = "black"; context2.strokeStyle = "black"; } diff --git a/integers.html b/integers.html index 8a9ae8d68..977e8afdb 100644 --- a/integers.html +++ b/integers.html @@ -110,7 +110,7 @@ arrow_table: table, point_size: 4, max_points: num_batches * 65536, - alpha: 100, + alpha: 25, background_color: '#EEEDDE', zoom_balance: 0.75, duration: 500, diff --git a/src/label_rendering.ts b/src/label_rendering.ts index 060ee5a0d..ceadcd4e5 100644 --- a/src/label_rendering.ts +++ b/src/label_rendering.ts @@ -4,11 +4,14 @@ import { RBush3D } from 'rbush-3d'; import Scatterplot from './deepscatter'; import { Timer, timer } from 'd3-timer'; import { select } from 'd3-selection'; -//import { Data } from 'apache-arrow'; +import { drag } from 'd3-drag'; + +const handler = drag(); 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? }; function pixel_ratio(scatterplot: Scatterplot): number { @@ -79,6 +82,7 @@ export class LabelMaker extends Renderer { if (this.timer) { this.timer.stop(); } + select(this.labelgroup).attr('display', 'inline'); this.timer = timer(() => { @@ -156,11 +160,13 @@ export class LabelMaker extends Renderer { maxY: corners.y[1], maxZ: transform.k, }); + // context.fillStyle = "rgba(0, 0, 0, 0)"; context.clearRect(0, 0, 4096, 4096); const dim = this.scatterplot.dim('color'); const bboxes = select(this.labelgroup) .selectAll('rect.labelbbox') + // Keyed by the coordinates. .data(overlaps, (d) => '' + d.minZ + d.minX) .join((enter) => enter @@ -173,6 +179,7 @@ export class LabelMaker extends Renderer { const labeler = this; const Y_BUFFER = 5; + // Go through and draw the canvas events. for (const d of overlaps) { const datum = d.data as RawPoint; const x = x_(datum.x) as number; @@ -300,6 +307,16 @@ export class LabelMaker extends Renderer { console.log({ event, d }); }); + if (this.options.draggable_labels) { + handler.on('drag', (event, d) => { + d.data.x = x_.invert(event.x); + d.data.y = y_.invert(event.y); + }); + handler.on('end', (event, d) => { + console.log(`${d.data.x}\t${d.data.y}\t${d.data.text}`); + }); + bboxes.call(handler); + } context.shadowColor = 'black'; context.strokeStyle = 'black'; } @@ -465,9 +482,9 @@ class DepthTree extends RBush3D { maxY: y + pixel_height / zoom / 2, minZ: zoom, maxZ: maxZ || this.maxdepth, - data: { + data: point /*{ ...point, - }, + },*/, }; if (Number.isNaN(x) || Number.isNaN(y))