From bfbe9b697e80466de84d82d975116e2ffcf04564 Mon Sep 17 00:00:00 2001 From: plouc Date: Fri, 31 Dec 2021 14:07:26 +0900 Subject: [PATCH] feat(network): remove nodeBlendMode as it doesn't play well with link endings underneath --- packages/generators/src/network.ts | 32 ++++++++++++-------- packages/network/src/Network.tsx | 4 +-- packages/network/src/NetworkNode.tsx | 8 ++--- packages/network/src/NetworkNodes.tsx | 20 +++--------- packages/network/src/defaults.ts | 1 - packages/network/src/types.ts | 10 ++---- website/src/data/components/network/meta.yml | 1 - website/src/data/components/network/props.ts | 7 ----- website/src/pages/network/canvas.tsx | 22 ++++++++------ website/src/pages/network/index.tsx | 1 - 10 files changed, 44 insertions(+), 62 deletions(-) diff --git a/packages/generators/src/network.ts b/packages/generators/src/network.ts index 0cd6f3bbe4..ff77c35763 100644 --- a/packages/generators/src/network.ts +++ b/packages/generators/src/network.ts @@ -14,24 +14,32 @@ type ExtraNode = { } export const generateNetworkData = ({ - rootNodeSize = 24, - minMidNodes = 6, - maxMidNodes = 16, - midNodeSize = 16, - minLeaves = 4, - maxLeaves = 16, - leafSize = 8, + rootSize = 32, + midSize = 24, + leafSize = 12, + minMidNodes = 5, + maxMidNodes = 11, + minLeaves = 3, + maxLeaves = 9, +}: { + rootSize?: number + midSize?: number + leafSize?: number + minMidNodes?: number + maxMidNodes?: number + minLeaves?: number + maxLeaves?: number } = {}) => { const rootNode = { - id: '0', + id: 'Node 0', height: 2, - size: rootNodeSize, + size: rootSize, color: 'rgb(244, 117, 96)', } let nodes = Array.from({ length: random(minMidNodes, maxMidNodes) }, (_, k) => ({ - id: `${k + 1}`, + id: `Node ${k + 1}`, height: 1, - size: midNodeSize, + size: midSize, color: 'rgb(97, 205, 187)', })) @@ -39,7 +47,7 @@ export const generateNetworkData = ({ const extraNodes: ExtraNode[] = [] nodes.forEach(source => { links.push({ - source: '0', + source: 'Node 0', target: source.id, distance: 80, }) diff --git a/packages/network/src/Network.tsx b/packages/network/src/Network.tsx index f547efcac8..ba1c3601d3 100644 --- a/packages/network/src/Network.tsx +++ b/packages/network/src/Network.tsx @@ -36,7 +36,6 @@ const InnerNetwork = ({ activeNodeSize = svgDefaultProps.activeNodeSize, inactiveNodeSize = svgDefaultProps.inactiveNodeSize, nodeColor = svgDefaultProps.nodeColor, - nodeBlendMode = svgDefaultProps.nodeBlendMode, nodeBorderWidth = svgDefaultProps.nodeBorderWidth, nodeBorderColor = svgDefaultProps.nodeBorderColor, @@ -120,11 +119,10 @@ const InnerNetwork = ({ if (layers.includes('nodes') && nodes !== null) { layerById.nodes = ( - + key="nodes" nodes={nodes} nodeComponent={nodeComponent} - blendMode={nodeBlendMode} onClick={isInteractive ? onClick : undefined} onMouseEnter={isInteractive ? handleNodeHover : undefined} onMouseMove={isInteractive ? handleNodeHover : undefined} diff --git a/packages/network/src/NetworkNode.tsx b/packages/network/src/NetworkNode.tsx index b25285e1a6..1af20ff948 100644 --- a/packages/network/src/NetworkNode.tsx +++ b/packages/network/src/NetworkNode.tsx @@ -1,16 +1,15 @@ import { memo } from 'react' import { animated, to } from '@react-spring/web' -import { InputLink, InputNode, NodeProps } from './types' +import { InputNode, NodeProps } from './types' -const NonMemoizedNetworkNode = ({ +const NonMemoizedNetworkNode = ({ node, animated: animatedProps, - blendMode, onClick, onMouseEnter, onMouseMove, onMouseLeave, -}: NodeProps) => ( +}: NodeProps) => ( { @@ -18,7 +17,6 @@ const NonMemoizedNetworkNode = ( })} r={to([animatedProps.size], size => size / 2)} fill={animatedProps.color} - style={{ mixBlendMode: blendMode }} strokeWidth={animatedProps.borderWidth} stroke={animatedProps.borderColor} opacity={animatedProps.opacity} diff --git a/packages/network/src/NetworkNodes.tsx b/packages/network/src/NetworkNodes.tsx index ade6ddc46b..542f42e3fc 100644 --- a/packages/network/src/NetworkNodes.tsx +++ b/packages/network/src/NetworkNodes.tsx @@ -1,19 +1,11 @@ import { createElement, MouseEvent, useMemo } from 'react' import { useTransition } from '@react-spring/web' import { useMotionConfig } from '@nivo/core' -import { - InputNode, - ComputedNode, - NodeAnimatedProps, - NodeComponent, - NetworkSvgProps, - InputLink, -} from './types' +import { InputNode, ComputedNode, NodeAnimatedProps, NodeComponent } from './types' -interface NetworkNodesProps { +interface NetworkNodesProps { nodes: ComputedNode[] - nodeComponent: NodeComponent - blendMode: NonNullable['nodeBlendMode']> + nodeComponent: NodeComponent onClick?: (node: ComputedNode, event: MouseEvent) => void onMouseEnter?: (node: ComputedNode, event: MouseEvent) => void onMouseMove?: (node: ComputedNode, event: MouseEvent) => void @@ -59,15 +51,14 @@ const getExitTransition = opacity: 0, }) -export const NetworkNodes = ({ +export const NetworkNodes = ({ nodes, nodeComponent, - blendMode, onClick, onMouseEnter, onMouseMove, onMouseLeave, -}: NetworkNodesProps) => { +}: NetworkNodesProps) => { const { animate, config: springConfig } = useMotionConfig() const [enterTransition, regularTransition, exitTransition] = useMemo( @@ -93,7 +84,6 @@ export const NetworkNodes = ({ key: node.id, node, animated: transitionProps, - blendMode, onClick, onMouseEnter, onMouseMove, diff --git a/packages/network/src/defaults.ts b/packages/network/src/defaults.ts index a6db410f62..ef0e728aca 100644 --- a/packages/network/src/defaults.ts +++ b/packages/network/src/defaults.ts @@ -54,7 +54,6 @@ export const svgDefaultProps = { nodeComponent: NetworkNode as NonNullable< NetworkSvgProps['nodeComponent'] >, - nodeBlendMode: 'normal' as NonNullable['nodeBlendMode']>, linkComponent: NetworkLink as NonNullable< NetworkSvgProps['linkComponent'] >, diff --git a/packages/network/src/types.ts b/packages/network/src/types.ts index 34b5f9e14a..6d24f85098 100644 --- a/packages/network/src/types.ts +++ b/packages/network/src/types.ts @@ -43,18 +43,15 @@ export interface NodeAnimatedProps { scale: number } -export interface NodeProps { +export interface NodeProps { node: ComputedNode animated: AnimatedProps - blendMode: NonNullable['nodeBlendMode']> onClick?: (node: ComputedNode, event: MouseEvent) => void onMouseEnter?: (node: ComputedNode, event: MouseEvent) => void onMouseMove?: (node: ComputedNode, event: MouseEvent) => void onMouseLeave?: (node: ComputedNode, event: MouseEvent) => void } -export type NodeComponent = FunctionComponent< - NodeProps -> +export type NodeComponent = FunctionComponent> export type NodeCanvasRenderer = ( ctx: CanvasRenderingContext2D, node: ComputedNode @@ -181,8 +178,7 @@ export type NetworkSvgProps = Pa NetworkDataProps & Dimensions & { layers?: (LayerId | CustomLayer)[] - nodeComponent?: NodeComponent - nodeBlendMode?: CssMixBlendMode + nodeComponent?: NodeComponent linkComponent?: LinkComponent linkBlendMode?: CssMixBlendMode } diff --git a/website/src/data/components/network/meta.yml b/website/src/data/components/network/meta.yml index d791e7330e..d05b6cb380 100644 --- a/website/src/data/components/network/meta.yml +++ b/website/src/data/components/network/meta.yml @@ -34,7 +34,6 @@ NetworkCanvas: package: '@nivo/network' tags: - canvas - - experimental stories: - label: Custom node tooltip link: networkcanvas--custom-node-tooltip diff --git a/website/src/data/components/network/props.ts b/website/src/data/components/network/props.ts index 7f6885ebbb..fd858724f8 100644 --- a/website/src/data/components/network/props.ts +++ b/website/src/data/components/network/props.ts @@ -197,13 +197,6 @@ const props: ChartProperty[] = [ flavors: allFlavors, defaultValue: defaults.nodeColor, }, - blendMode({ - group: 'Nodes', - key: 'nodeBlendMode', - target: 'nodes', - flavors: ['svg'], - defaultValue: svgDefaultProps.nodeBlendMode, - }), { key: 'nodeBorderWidth', group: 'Nodes', diff --git a/website/src/pages/network/canvas.tsx b/website/src/pages/network/canvas.tsx index d7ce744841..d45cb3968f 100644 --- a/website/src/pages/network/canvas.tsx +++ b/website/src/pages/network/canvas.tsx @@ -28,7 +28,10 @@ const initialProperties = Object.freeze({ inactiveNodeSize: defaults.inactiveNodeSize, nodeColor: (node: any) => node.color, nodeBorderWidth: 1, - nodeBorderColor: { theme: 'background' }, + nodeBorderColor: { + from: 'color', + modifiers: [['darker', 0.8]], + }, linkThickness: dynamicLinkThicknessValue, linkColor: defaults.linkColor, @@ -38,7 +41,13 @@ const initialProperties = Object.freeze({ isInteractive: true, }) -const generateData = () => generateNetworkData() +const generateData = () => + generateNetworkData({ + minMidNodes: 9, + maxMidNodes: 15, + minLeaves: 7, + maxLeaves: 12, + }) const NetworkCanvas = () => { const { @@ -66,14 +75,7 @@ const NetworkCanvas = () => { initialProperties={initialProperties} defaultProperties={defaults} propertiesMapper={mapper} - generateData={() => - generateData({ - rootNodeRadius: 10, - maxMidNodes: 32, - midNodeRadius: 6, - leafRadius: 3, - }) - } + generateData={generateData} getDataSize={data => data.nodes.length} image={image} > diff --git a/website/src/pages/network/index.tsx b/website/src/pages/network/index.tsx index 8153edee6b..975a8c616f 100644 --- a/website/src/pages/network/index.tsx +++ b/website/src/pages/network/index.tsx @@ -31,7 +31,6 @@ const initialProperties = Object.freeze({ activeNodeSize: dynamicActiveNodeSizeValue, inactiveNodeSize: defaults.inactiveNodeSize, nodeColor: (node: any) => node.color, - nodeBlendMode: 'normal', nodeBorderWidth: 1, nodeBorderColor: { from: 'color',