reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 14:09:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Nathan Bierema 2023-01-02 14:35:03 -05:00
parent 4ae9d4afb0
commit ddfc4f31a3
2 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/d3-state-visualizer/src/charts/tree/tree.ts
View File

@ -186,8 +186,8 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
// eslint-disable-next-line @typescript-eslint/unbound-method // eslint-disable-next-line @typescript-eslint/unbound-method
.call(zoom.scaleTo, initialZoom) .call(zoom.scaleTo, initialZoom)
.call( .call(
zoom.on('zoom', () => { zoom.on('zoom', (event) => {
const { transform } = d3.event as D3ZoomEvent<SVGSVGElement, unknown>; const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
vis.attr('transform', transform.toString()); vis.attr('transform', transform.toString());
}) })
) )
@ -369,8 +369,8 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
.append('circle') .append('circle')
.attr('class', 'nodeCircle') .attr('class', 'nodeCircle')
.attr('r', 0) .attr('r', 0)
.on('click', (clickedNode) => { .on('click', (event, clickedNode) => {
if (d3.event.defaultPrevented) return; if ((event as Event).defaultPrevented) return;
toggleChildren(clickedNode.data); toggleChildren(clickedNode.data);
update(); update();
}); });
@ -383,7 +383,9 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
.attr('dy', '.35em') .attr('dy', '.35em')
.style('fill-opacity', 0) .style('fill-opacity', 0)
.text((d) => d.data.name) .text((d) => d.data.name)
.on('click', onClickText); .on('click', (_, datum) => {
onClickText(datum);
});
const nodeEnterAndUpdate = nodeEnter.merge(node); const nodeEnterAndUpdate = nodeEnter.merge(node);

36
packages/d3tooltip/src/index.ts
View File

@ -1,11 +1,11 @@
import * as d3 from 'd3'; import * as d3 from 'd3';
import type { BaseType, ContainerElement, Selection } from 'd3'; import type { BaseType, Selection } from 'd3';
export type StyleValue = string | number | boolean; export type StyleValue = string | number | boolean;
interface Options< interface Options<
Datum, Datum,
RootGElement extends ContainerElement, RootGElement extends BaseType,
RootDatum, RootDatum,
RootPElement extends BaseType, RootPElement extends BaseType,
RootPDatum RootPDatum
@ -23,13 +23,7 @@ interface Options<
text: string | ((datum: Datum) => string); text: string | ((datum: Datum) => string);
} }
const defaultOptions: Options< const defaultOptions: Options<unknown, BaseType, unknown, BaseType, unknown> = {
unknown,
ContainerElement,
unknown,
BaseType,
unknown
> = {
left: undefined, // mouseX left: undefined, // mouseX
top: undefined, // mouseY top: undefined, // mouseY
offset: { left: 0, top: 0 }, offset: { left: 0, top: 0 },
@ -43,7 +37,7 @@ export function tooltip<
Datum, Datum,
PElement extends BaseType, PElement extends BaseType,
PDatum, PDatum,
RootGElement extends ContainerElement, RootGElement extends BaseType,
RootDatum, RootDatum,
RootPElement extends BaseType, RootPElement extends BaseType,
RootPDatum RootPDatum
@ -68,9 +62,12 @@ export function tooltip<
const rootNode = anchor.node()!; const rootNode = anchor.node()!;
return function tip(selection: Selection<GElement, Datum, PElement, PDatum>) { return function tip(selection: Selection<GElement, Datum, PElement, PDatum>) {
selection.on('mouseover.tip', (node) => { selection.on('mouseover.tip', (event, datum) => {
const [mouseX, mouseY] = d3.mouse(rootNode); const [pointerX, pointerY] = d3.pointer(event, rootNode);
const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; const [x, y] = [
left || pointerX + offset.left,
top || pointerY - offset.top,
];
anchor.selectAll(`div.${className}`).remove(); anchor.selectAll(`div.${className}`).remove();
@ -81,20 +78,23 @@ export function tooltip<
.style('z-index', 1001) .style('z-index', 1001)
.style('left', `${x}px`) .style('left', `${x}px`)
.style('top', `${y}px`) .style('top', `${y}px`)
.html(typeof text === 'function' ? () => text(node) : () => text); .html(typeof text === 'function' ? () => text(datum) : () => text);
for (const [key, value] of Object.entries(styles)) { for (const [key, value] of Object.entries(styles)) {
el.style(key, value); el.style(key, value);
} }
}); });
selection.on('mousemove.tip', (node) => { selection.on('mousemove.tip', (event, datum) => {
const [mouseX, mouseY] = d3.mouse(rootNode); const [pointerX, pointerY] = d3.pointer(event, rootNode);
const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top]; const [x, y] = [
left || pointerX + offset.left,
top || pointerY - offset.top,
];
el.style('left', `${x}px`) el.style('left', `${x}px`)
.style('top', `${y}px`) .style('top', `${y}px`)
.html(typeof text === 'function' ? () => text(node) : () => text); .html(typeof text === 'function' ? () => text(datum) : () => text);
}); });
selection.on('mouseout.tip', () => el.remove()); selection.on('mouseout.tip', () => el.remove());