reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 06:00:07 +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
.call(zoom.scaleTo, initialZoom)
.call(
zoom.on('zoom', () => {
const { transform } = d3.event as D3ZoomEvent<SVGSVGElement, unknown>;
zoom.on('zoom', (event) => {
const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
vis.attr('transform', transform.toString());
})
)
@ -369,8 +369,8 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
.append('circle')
.attr('class', 'nodeCircle')
.attr('r', 0)
.on('click', (clickedNode) => {
if (d3.event.defaultPrevented) return;
.on('click', (event, clickedNode) => {
if ((event as Event).defaultPrevented) return;
toggleChildren(clickedNode.data);
update();
});
@ -383,7 +383,9 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
.attr('dy', '.35em')
.style('fill-opacity', 0)
.text((d) => d.data.name)
.on('click', onClickText);
.on('click', (_, datum) => {
onClickText(datum);
});
const nodeEnterAndUpdate = nodeEnter.merge(node);

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

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