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

Update style option

Browse Source
This commit is contained in:
Nathan Bierema 2022-12-28 16:25:46 -05:00
parent 15bf781bbb
commit 046c69c5f7
2 changed files with 79 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ import {
} from './utils'; } from './utils';
import { tooltip } from 'd3tooltip'; import { tooltip } from 'd3tooltip';
// TODO Can we remove InputOptions?
export interface InputOptions { export interface InputOptions {
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
state?: {} | null; state?: {} | null;
@ -19,7 +20,22 @@ export interface InputOptions {
rootKeyName: string; rootKeyName: string;
pushMethod: 'push' | 'unshift'; pushMethod: 'push' | 'unshift';
id: string; id: string;
style: { [key: string]: Primitive }; chartStyles: { [key: string]: Primitive };
nodeStyleOptions: {
colors: {
default: string;
collapsed: string;
parent: string;
};
radius: number;
};
textStyleOptions: {
colors: {
default: string;
hover: string;
};
};
linkStyles: { [key: string]: Primitive };
size: number; size: number;
aspectRatio: number; aspectRatio: number;
initialZoom: number; initialZoom: number;
@ -57,26 +73,22 @@ interface Options {
rootKeyName: string; rootKeyName: string;
pushMethod: 'push' | 'unshift'; pushMethod: 'push' | 'unshift';
id: string; id: string;
style: { chartStyles: { [key: string]: Primitive };
node: { nodeStyleOptions: {
colors: { colors: {
default: string; default: string;
collapsed: string; collapsed: string;
parent: string; parent: string;
};
radius: number;
}; };
text: { radius: number;
colors: { };
default: string; textStyleOptions: {
hover: string; colors: {
}; default: string;
}; hover: string;
link: {
stroke: string;
fill: string;
}; };
}; };
linkStyles: { [key: string]: Primitive };
size: number; size: number;
aspectRatio: number; aspectRatio: number;
initialZoom: number; initialZoom: number;
@ -111,26 +123,25 @@ const defaultOptions: Options = {
pushMethod: 'push', pushMethod: 'push',
tree: undefined, tree: undefined,
id: 'd3svg', id: 'd3svg',
style: { chartStyles: {},
node: { nodeStyleOptions: {
colors: { colors: {
default: '#ccc', default: '#ccc',
collapsed: 'lightsteelblue', collapsed: 'lightsteelblue',
parent: 'white', parent: 'white',
},
radius: 7,
}, },
text: { radius: 7,
colors: { },
default: 'black', textStyleOptions: {
hover: 'skyblue', colors: {
}, default: 'black',
}, hover: 'skyblue',
link: {
stroke: '#000',
fill: 'none',
}, },
}, },
linkStyles: {
stroke: '#000',
fill: 'none',
},
size: 500, size: 500,
aspectRatio: 1.0, aspectRatio: 1.0,
initialZoom: 1, initialZoom: 1,
@ -186,7 +197,10 @@ export default function (
) { ) {
const { const {
id, id,
style, chartStyles,
nodeStyleOptions,
textStyleOptions,
linkStyles,
size, size,
aspectRatio, aspectRatio,
initialZoom, initialZoom,
@ -209,28 +223,28 @@ export default function (
const fullWidth = size; const fullWidth = size;
const fullHeight = size * aspectRatio; const fullHeight = size * aspectRatio;
const attr: { [key: string]: Primitive } = {
id,
preserveAspectRatio: 'xMinYMin slice',
};
if (!(style as unknown as { [key: string]: Primitive }).width) {
attr.width = fullWidth;
}
if (
!(style as unknown as { [key: string]: Primitive }).width ||
!(style as unknown as { [key: string]: Primitive }).height
) {
attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`;
}
const root = d3.select(DOMNode); const root = d3.select(DOMNode);
const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom); const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom);
let svgElement = root
.append('svg')
.attr('id', id)
.attr('preserveAspectRatio', 'xMinYMin slice');
if (!chartStyles.width) {
svgElement = svgElement.attr('width', fullWidth);
}
if (!chartStyles.width || !chartStyles.height) {
svgElement = svgElement.attr('viewBox', `0 0 ${fullWidth} ${fullHeight}`);
}
svgElement = svgElement.style('cursor', '-webkit-grab');
const vis = root const vis = root
.append('svg') .append('svg')
.attr(attr) .attr(attr)
.style({ cursor: '-webkit-grab', ...style } as unknown as { .style({ cursor: '-webkit-grab', ...chartStyles } as unknown as {
[key: string]: Primitive; [key: string]: Primitive;
}) })
.call( .call(
@ -244,7 +258,7 @@ export default function (
) )
.append('g') .append('g')
.attr({ .attr({
transform: `translate(${margin.left + style.node.radius}, ${ transform: `translate(${margin.left + nodeStyleOptions.radius}, ${
margin.top margin.top
}) scale(${initialZoom})`, }) scale(${initialZoom})`,
}); });
@ -385,17 +399,17 @@ export default function (
}, },
}) })
.style({ .style({
fill: style.text.colors.default, fill: textStyleOptions.colors.default,
cursor: 'pointer', cursor: 'pointer',
}) })
.on('mouseover', function mouseover(this: EventTarget) { .on('mouseover', function mouseover(this: EventTarget) {
d3.select(this).style({ d3.select(this).style({
fill: style.text.colors.hover, fill: textStyleOptions.colors.hover,
}); });
}) })
.on('mouseout', function mouseout(this: EventTarget) { .on('mouseout', function mouseout(this: EventTarget) {
d3.select(this).style({ d3.select(this).style({
fill: style.text.colors.default, fill: textStyleOptions.colors.default,
}); });
}); });
@ -445,10 +459,10 @@ export default function (
'stroke-width': '1.5px', 'stroke-width': '1.5px',
fill: (d) => fill: (d) =>
d._children d._children
? style.node.colors.collapsed ? nodeStyleOptions.colors.collapsed
: d.children : d.children
? style.node.colors.parent ? nodeStyleOptions.colors.parent
: style.node.colors.default, : nodeStyleOptions.colors.default,
}); });
// transition nodes to their new position // transition nodes to their new position
@ -460,7 +474,7 @@ export default function (
}); });
// ensure circle radius is correct // ensure circle radius is correct
nodeUpdate.select('circle').attr('r', style.node.radius); nodeUpdate.select('circle').attr('r', nodeStyleOptions.radius);
// fade the text in and align it // fade the text in and align it
nodeUpdate nodeUpdate
@ -470,7 +484,7 @@ export default function (
transform: function transform(this: SVGGraphicsElement, d) { transform: function transform(this: SVGGraphicsElement, d) {
const x = const x =
(d.children || d._children ? -1 : 1) * (d.children || d._children ? -1 : 1) *
(this.getBBox().width / 2 + style.node.radius + 5); (this.getBBox().width / 2 + nodeStyleOptions.radius + 5);
return `translate(${x},0)`; return `translate(${x},0)`;
}, },
}); });
@ -540,7 +554,7 @@ export default function (
} as d3.svg.diagonal.Link<NodePosition>); } as d3.svg.diagonal.Link<NodePosition>);
}, },
}) })
.style(style.link); .style(linkStyles);
// transition links to their new position // transition links to their new position
link link

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

@ -33,7 +33,7 @@ interface Tip<
PDatum PDatum
> { > {
(selection: Selection<GElement, Datum, PElement, PDatum>): void; (selection: Selection<GElement, Datum, PElement, PDatum>): void;
style: (this: this, value: { [key: string]: StyleValue }) => this; styles: (this: this, value: { [key: string]: StyleValue }) => this;
text: ( text: (
this: this, this: this,
value: value:
@ -103,7 +103,7 @@ export function tooltip<
selection.on('mouseout.tip', () => el.remove()); selection.on('mouseout.tip', () => el.remove());
} }
tip.style = function setStyle( tip.styles = function setStyles(
this: typeof tip, this: typeof tip,
value: { [key: string]: StyleValue } value: { [key: string]: StyleValue }
) { ) {