From 3d9512f1bb5bc665918695c185ab4c41132872e2 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sat, 31 Oct 2020 09:42:17 +0100 Subject: [PATCH 01/17] add tooltip story --- .gitignore | 3 + stories/Tooltips.tsx | 29 +++++++ stories/index.tsx | 4 +- stories/misc/tooltipChartState.ts | 132 ++++++++++++++++++++++++++++++ 4 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 stories/Tooltips.tsx create mode 100644 stories/misc/tooltipChartState.ts diff --git a/.gitignore b/.gitignore index 7cc2112a..a8d3c88c 100644 --- a/.gitignore +++ b/.gitignore @@ -61,3 +61,6 @@ typings/ # next.js build output .next + +# IDE files +.idea diff --git a/stories/Tooltips.tsx b/stories/Tooltips.tsx new file mode 100644 index 00000000..9618731a --- /dev/null +++ b/stories/Tooltips.tsx @@ -0,0 +1,29 @@ +import { cloneDeep, mapValues } from 'lodash' +import * as React from 'react' +import { FlowChart } from '../src' +import * as actions from '../src/container/actions' +import { Page } from './components' +import { tooltipChart } from './misc/tooltipChartState' + +/** + * State is external to the Element + * + * You could easily move this state to Redux or similar by creating your own callback actions. + */ +export class Tooltips extends React.Component { + public state = cloneDeep(tooltipChart) + public render () { + const chart = this.state + const stateActions = mapValues(actions, (func: any) => + (...args: any) => this.setState(func(...args))) as typeof actions + + return ( + + + + ) + } +} diff --git a/stories/index.tsx b/stories/index.tsx index 90061abf..650c4f20 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -12,13 +12,14 @@ import { DragAndDropSidebar } from './DragAndDropSidebar' import { ExternalReactState } from './ExternalReactState' import { InternalReactState } from './InternalReactState' import { LinkColors } from './LinkColors' -import { NodeReadonly } from './NodeReadonly' import { LinkWithArrowHead } from './LinkWithArrowHead' +import { NodeReadonly } from './NodeReadonly' import { ReadonlyMode } from './ReadonlyMode' import { SelectableMode } from './SelectableMode' import { SelectedSidebar } from './SelectedSidebar' import { SmartRouting } from './SmartRouting' import { StressTestDemo } from './StressTest' +import { Tooltips } from './Tooltips' import { Zoom } from './Zoom' storiesOf('State', module) @@ -49,3 +50,4 @@ storiesOf('Other Config', module) .add('Zoom', () => ) .add('Type-safe properties', CustomGraphTypes) .add('Link arrow heads',() => ) + .add('Tooltips',() => ) diff --git a/stories/misc/tooltipChartState.ts b/stories/misc/tooltipChartState.ts new file mode 100644 index 00000000..730a37a8 --- /dev/null +++ b/stories/misc/tooltipChartState.ts @@ -0,0 +1,132 @@ +import { IChart } from '../../src' + +export const tooltipChart: IChart = { + offset: { + x: 0, + y: 0, + }, + scale: 1, + nodes: { + node1: { + id: 'node1', + type: 'output-only', + position: { + x: 300, + y: 100, + }, + ports: { + port1: { + id: 'port1', + type: 'output', + properties: { + value: 'yes', + }, + }, + port2: { + id: 'port2', + type: 'output', + properties: { + value: 'no', + }, + }, + }, + }, + node2: { + id: 'node2', + type: 'input-output', + position: { + x: 300, + y: 300, + }, + ports: { + port1: { + id: 'port1', + type: 'input', + }, + port2: { + id: 'port2', + type: 'output', + }, + }, + }, + node3: { + id: 'node3', + type: 'input-output', + position: { + x: 100, + y: 600, + }, + ports: { + port1: { + id: 'port1', + type: 'input', + }, + port2: { + id: 'port2', + type: 'output', + }, + }, + }, + node4: { + id: 'node4', + type: 'input-output', + position: { + x: 500, + y: 600, + }, + ports: { + port1: { + id: 'port1', + type: 'input', + }, + port2: { + id: 'port2', + type: 'output', + }, + }, + }, + }, + links: { + link1: { + id: 'link1', + from: { + nodeId: 'node1', + portId: 'port2', + }, + to: { + nodeId: 'node2', + portId: 'port1', + }, + properties: { + label: 'example link label', + }, + }, + link2: { + id: 'link2', + from: { + nodeId: 'node2', + portId: 'port2', + }, + to: { + nodeId: 'node3', + portId: 'port1', + }, + properties: { + label: 'another example link label', + }, + }, + link3: { + id: 'link3', + from: { + nodeId: 'node2', + portId: 'port2', + }, + to: { + nodeId: 'node4', + portId: 'port1', + }, + }, + }, + selected: {}, + hovered: {}, +} From 2e900777669d466cc1491eaaaf3f9564bbcac964 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sat, 31 Oct 2020 15:13:07 +0100 Subject: [PATCH 02/17] feat: add basic tooltips --- package-lock.json | 29 ++++++++++++++++++++++++++-- package.json | 1 + src/components/Node/Node.wrapper.tsx | 12 +++++++++++- src/types/chart.ts | 7 +++++++ stories/misc/tooltipChartState.ts | 16 +++++++++++++++ 5 files changed, 62 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index daf3120a..088385a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15688,8 +15688,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-json-view": { "version": "1.19.1", @@ -15820,6 +15819,32 @@ "prop-types": "^15.6.0" } }, + "react-tooltip": { + "version": "4.2.10", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.10.tgz", + "integrity": "sha512-D7ZLx6/QwpUl0SZRek3IZy/HWpsEEp0v3562tcT8IwZgu8IgV7hY5ZzniTkHyRcuL+IQnljpjj7A7zCgl2+T3w==", + "requires": { + "prop-types": "^15.7.2", + "uuid": "^7.0.3" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "uuid": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz", + "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==" + } + } + }, "react-zoom-pan-pinch": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz", diff --git a/package.json b/package.json index 61cd1374..cb3bc302 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "pathfinding": "^0.4.18", "react-draggable": "^4.4.3", "react-resize-observer": "^1.1.1", + "react-tooltip": "^4.2.10", "react-zoom-pan-pinch": "^1.6.1", "uuid": "^3.3.2" }, diff --git a/src/components/Node/Node.wrapper.tsx b/src/components/Node/Node.wrapper.tsx index 2f3ccb25..eda9851e 100644 --- a/src/components/Node/Node.wrapper.tsx +++ b/src/components/Node/Node.wrapper.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import Draggable, { DraggableData } from 'react-draggable' import ResizeObserver from 'react-resize-observer' +import ReactTooltip from 'react-tooltip' import { IConfig, ILink, @@ -33,6 +34,7 @@ export interface INodeWrapperProps { config: IConfig node: INode Component: React.FunctionComponent + TooltipComponent?: React.FunctionComponent offset: IPosition selected: ISelectedOrHovered | undefined hovered: ISelectedOrHovered | undefined @@ -57,6 +59,7 @@ export interface INodeWrapperProps { } export const NodeWrapper = ({ + TooltipComponent, config, node, onDragNode, @@ -157,8 +160,14 @@ export const NodeWrapper = ({ } }, [node, compRef.current, size.width, size.height]) + const tooltip = node.tooltip ? (node.tooltip.showTooltip ? node.tooltip.text : '') : '' + const dataTip = TooltipComponent ? '' : tooltip const children = ( -
+
{ const newSize = { width: rect.width, height: rect.height } @@ -189,6 +198,7 @@ export const NodeWrapper = ({ /> ))} +
) diff --git a/src/types/chart.ts b/src/types/chart.ts index 61406a32..0931bbfb 100644 --- a/src/types/chart.ts +++ b/src/types/chart.ts @@ -17,6 +17,7 @@ export type IChart< /** System Temp */ selected: ISelectedOrHovered hovered: ISelectedOrHovered, + tooltipsGlobal?: ITooltipConfig, } & (ChartProps extends undefined ? { properties?: any, } : { @@ -29,6 +30,7 @@ export interface ISelectedOrHovered { } export type INode = { + tooltip?: ITooltipConfig, id: string type: string position: IPosition @@ -74,3 +76,8 @@ export type ILink = { } : { properties: LinkProps, }) + +interface ITooltipConfig { + showTooltip: boolean, + text: string, +} diff --git a/stories/misc/tooltipChartState.ts b/stories/misc/tooltipChartState.ts index 730a37a8..57ee31c1 100644 --- a/stories/misc/tooltipChartState.ts +++ b/stories/misc/tooltipChartState.ts @@ -1,6 +1,10 @@ import { IChart } from '../../src' export const tooltipChart: IChart = { + tooltipsGlobal: { + showTooltip: true, + text: 'This is the global tooltip', + }, offset: { x: 0, y: 0, @@ -8,6 +12,10 @@ export const tooltipChart: IChart = { scale: 1, nodes: { node1: { + tooltip: { + showTooltip: true, + text: 'this is the tooltip for node1', + }, id: 'node1', type: 'output-only', position: { @@ -32,6 +40,10 @@ export const tooltipChart: IChart = { }, }, node2: { + tooltip: { + showTooltip: true, + text: 'this is the tooltip for node2', + }, id: 'node2', type: 'input-output', position: { @@ -50,6 +62,10 @@ export const tooltipChart: IChart = { }, }, node3: { + tooltip: { + showTooltip: false, + text: 'this is the tooltip for node3 but its off', + }, id: 'node3', type: 'input-output', position: { From 85b1462b6275bc29138d1ec2b67bd4b53e3b2305 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sat, 31 Oct 2020 15:44:43 +0100 Subject: [PATCH 03/17] feat: add global tooltip --- src/components/FlowChart/FlowChart.tsx | 10 +++++++++- src/components/Node/Node.wrapper.tsx | 5 ++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/FlowChart/FlowChart.tsx b/src/components/FlowChart/FlowChart.tsx index 16490922..9a900e61 100644 --- a/src/components/FlowChart/FlowChart.tsx +++ b/src/components/FlowChart/FlowChart.tsx @@ -171,12 +171,20 @@ export const FlowChart = (props: IFlowChartProps) => { const selectedLink = getSelectedLinkForNode(selected, nodeId, links) const hoveredLink = getSelectedLinkForNode(hovered, nodeId, links) + let globalToolTipText + if (chart.tooltipsGlobal && chart.tooltipsGlobal.showTooltip) { + globalToolTipText = chart.tooltipsGlobal.text + } + const nodeWithGlobalToolTip = globalToolTipText ? + { ...nodes[nodeId], ...{ tooltip: { showTooltip: true, text: globalToolTipText } } } + : undefined + return ( Date: Sat, 31 Oct 2020 17:03:51 +0100 Subject: [PATCH 04/17] feat: add delete action --- src/container/actions.ts | 12 +++++++++++- src/types/functions.ts | 2 ++ stories/Tooltips.tsx | 22 ++++++++++++++++------ 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/container/actions.ts b/src/container/actions.ts index abb496d0..da890591 100644 --- a/src/container/actions.ts +++ b/src/container/actions.ts @@ -1,6 +1,6 @@ import { IChart, - IConfig, + IConfig, IDeleteToolTip, identity, IOnCanvasClick, IOnCanvasDrop, @@ -293,3 +293,13 @@ export const onZoomCanvas: IOnZoomCanvas = ({ config, data }) => (chart: IChart) chart.scale = data.scale return chart } + +export const deleteTooltip: IDeleteToolTip = ({ nodeId }) => (chart: IChart): IChart => { + if (nodeId === 'global') { + delete chart.tooltipsGlobal + } + if (nodeId && nodeId !== 'global') { + delete chart.nodes[nodeId].tooltip + } + return chart +} diff --git a/src/types/functions.ts b/src/types/functions.ts index 1db5461d..0f245ed6 100644 --- a/src/types/functions.ts +++ b/src/types/functions.ts @@ -116,3 +116,5 @@ export interface IOnCanvasDropInput { export type IOnCanvasDrop = (input: IOnCanvasDropInput) => void export type IOnZoomCanvas = (input: { config?: IConfig; data: any }) => void + +export type IDeleteToolTip = (input: { nodeId: string | undefined }) => void diff --git a/stories/Tooltips.tsx b/stories/Tooltips.tsx index 9618731a..af5356e9 100644 --- a/stories/Tooltips.tsx +++ b/stories/Tooltips.tsx @@ -10,6 +10,7 @@ import { tooltipChart } from './misc/tooltipChartState' * * You could easily move this state to Redux or similar by creating your own callback actions. */ + export class Tooltips extends React.Component { public state = cloneDeep(tooltipChart) public render () { @@ -18,12 +19,21 @@ export class Tooltips extends React.Component { (...args: any) => this.setState(func(...args))) as typeof actions return ( - - - +
+ + + + + + +
) } } From 24934b2bfea5263b568cd9a8c0699de5d62bffb3 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sat, 31 Oct 2020 17:21:17 +0100 Subject: [PATCH 05/17] feat: toggle tooltip --- src/container/actions.ts | 23 ++++++++++++++++++++++- src/types/functions.ts | 2 ++ stories/Tooltips.tsx | 7 +++++++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/container/actions.ts b/src/container/actions.ts index da890591..9c380ecc 100644 --- a/src/container/actions.ts +++ b/src/container/actions.ts @@ -23,7 +23,7 @@ import { IOnNodeSizeChange, IOnPortPositionChange, IOnZoomCanvas, - IStateCallback, + IStateCallback, IToggleToolTip, } from '../' import { rotate } from './utils/rotate' @@ -303,3 +303,24 @@ export const deleteTooltip: IDeleteToolTip = ({ nodeId }) => (chart: IChart): IC } return chart } + +export const toggleTooltip: IToggleToolTip = ({ nodeId }) => (chart: IChart): IChart => { + if (nodeId === 'global') { + if (chart.tooltipsGlobal) { + chart.tooltipsGlobal.showTooltip ? + chart.tooltipsGlobal.showTooltip = false : + chart.tooltipsGlobal.showTooltip = true + } + } + if (nodeId && nodeId !== 'global') { + if (chart.nodes[nodeId].tooltip) { + // @ts-ignore + chart.nodes[nodeId].tooltip.showTooltip ? + // @ts-ignore + chart.nodes[nodeId].tooltip.showTooltip = false : + // @ts-ignore + chart.nodes[nodeId].tooltip.showTooltip = true + } + } + return chart +} diff --git a/src/types/functions.ts b/src/types/functions.ts index 0f245ed6..70d0353b 100644 --- a/src/types/functions.ts +++ b/src/types/functions.ts @@ -118,3 +118,5 @@ export type IOnCanvasDrop = (input: IOnCanvasDropInput) => void export type IOnZoomCanvas = (input: { config?: IConfig; data: any }) => void export type IDeleteToolTip = (input: { nodeId: string | undefined }) => void + +export type IToggleToolTip = (input: { nodeId: string | undefined }) => void diff --git a/stories/Tooltips.tsx b/stories/Tooltips.tsx index af5356e9..fb69b782 100644 --- a/stories/Tooltips.tsx +++ b/stories/Tooltips.tsx @@ -27,6 +27,13 @@ export class Tooltips extends React.Component { + + + Date: Sat, 31 Oct 2020 21:04:39 +0100 Subject: [PATCH 06/17] feat: toggle tooltip off when clicked --- src/components/FlowChart/FlowChart.tsx | 27 ++++++++++++++------------ src/components/Node/Node.wrapper.tsx | 15 ++++++++++++-- src/container/actions.ts | 8 ++++---- src/types/chart.ts | 1 + src/types/functions.ts | 4 ++-- stories/misc/tooltipChartState.ts | 6 ++++-- 6 files changed, 39 insertions(+), 22 deletions(-) diff --git a/src/components/FlowChart/FlowChart.tsx b/src/components/FlowChart/FlowChart.tsx index 9a900e61..2a3b2404 100644 --- a/src/components/FlowChart/FlowChart.tsx +++ b/src/components/FlowChart/FlowChart.tsx @@ -1,10 +1,9 @@ import * as React from 'react' -import { - CanvasInnerDefault, CanvasOuterDefault, CanvasWrapper, ICanvasInnerDefaultProps, ICanvasOuterDefaultProps, IChart, IConfig, ILink, - ILinkDefaultProps, INodeDefaultProps, INodeInnerDefaultProps, IOnCanvasClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas, - IOnDragCanvasStop, IOnDragNode, IOnDragNodeStop, IOnLinkCancel, IOnLinkClick, IOnLinkComplete, IOnLinkMouseEnter, - IOnLinkMouseLeave, IOnLinkMove, IOnLinkStart, IOnNodeClick, IOnNodeDoubleClick, IOnNodeMouseEnter, IOnNodeMouseLeave, IOnNodeSizeChange, - IOnPortPositionChange, IOnZoomCanvas, IPortDefaultProps, IPortsDefaultProps, ISelectedOrHovered, LinkDefault, LinkWrapper, NodeDefault, NodeInnerDefault, NodeWrapper, PortDefault, PortsDefault, +import {CanvasInnerDefault, CanvasOuterDefault, CanvasWrapper, ICanvasInnerDefaultProps, ICanvasOuterDefaultProps, IChart, IConfig, IDeleteTooltip, + ILink, ILinkDefaultProps, INodeDefaultProps, INodeInnerDefaultProps, IOnCanvasClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas, IOnDragCanvasStop, IOnDragNode, IOnDragNodeStop, + IOnLinkCancel, IOnLinkClick, IOnLinkComplete, IOnLinkMouseEnter, IOnLinkMouseLeave, IOnLinkMove, IOnLinkStart, IOnNodeClick, IOnNodeDoubleClick, + IOnNodeMouseEnter, IOnNodeMouseLeave, IOnNodeSizeChange, IOnPortPositionChange, IOnZoomCanvas, IPortDefaultProps, IPortsDefaultProps, ISelectedOrHovered, IToggletooltip, + LinkDefault, LinkWrapper, NodeDefault, NodeInnerDefault, NodeWrapper, PortDefault, PortsDefault, } from '../../' import { getMatrix } from './utils/grid' @@ -29,7 +28,9 @@ export interface IFlowChartCallbacks { onNodeMouseEnter: IOnNodeMouseEnter onNodeMouseLeave: IOnNodeMouseLeave onNodeSizeChange: IOnNodeSizeChange - onZoomCanvas: IOnZoomCanvas + onZoomCanvas: IOnZoomCanvas, + deleteTooltip: IDeleteTooltip, + toggleTooltip: IToggletooltip, } export interface IFlowChartComponents { @@ -90,6 +91,8 @@ export const FlowChart = (props: IFlowChartProps) => { onNodeMouseLeave, onNodeSizeChange, onZoomCanvas, + deleteTooltip, + toggleTooltip, }, Components: { CanvasOuter = CanvasOuterDefault, @@ -106,7 +109,7 @@ export const FlowChart = (props: IFlowChartProps) => { const canvasCallbacks = { onDragCanvas, onDragCanvasStop, onCanvasClick, onDeleteKey, onCanvasDrop, onZoomCanvas } const linkCallbacks = { onLinkMouseEnter, onLinkMouseLeave, onLinkClick } - const nodeCallbacks = { onDragNode, onNodeClick, onDragNodeStop, onNodeMouseEnter, onNodeMouseLeave, onNodeSizeChange,onNodeDoubleClick } + const nodeCallbacks = { onDragNode, onNodeClick, onDragNodeStop, onNodeMouseEnter, onNodeMouseLeave, onNodeSizeChange,onNodeDoubleClick, deleteTooltip, toggleTooltip } const portCallbacks = { onPortPositionChange, onLinkStart, onLinkMove, onLinkComplete, onLinkCancel } const nodesInView = Object.keys(nodes).filter((nodeId) => { @@ -171,12 +174,12 @@ export const FlowChart = (props: IFlowChartProps) => { const selectedLink = getSelectedLinkForNode(selected, nodeId, links) const hoveredLink = getSelectedLinkForNode(hovered, nodeId, links) - let globalToolTipText + let globalToolTip if (chart.tooltipsGlobal && chart.tooltipsGlobal.showTooltip) { - globalToolTipText = chart.tooltipsGlobal.text + globalToolTip = chart.tooltipsGlobal } - const nodeWithGlobalToolTip = globalToolTipText ? - { ...nodes[nodeId], ...{ tooltip: { showTooltip: true, text: globalToolTipText } } } + const nodeWithGlobalToolTip = globalToolTip ? + { ...nodes[nodeId], ...{ tooltip: globalToolTip } } : undefined return ( diff --git a/src/components/Node/Node.wrapper.tsx b/src/components/Node/Node.wrapper.tsx index f0e9c37f..e97a72d0 100644 --- a/src/components/Node/Node.wrapper.tsx +++ b/src/components/Node/Node.wrapper.tsx @@ -3,7 +3,7 @@ import Draggable, { DraggableData } from 'react-draggable' import ResizeObserver from 'react-resize-observer' import ReactTooltip from 'react-tooltip' import { - IConfig, + IConfig, IDeleteTooltip, ILink, INode, INodeInnerDefaultProps, @@ -23,7 +23,7 @@ import { IPortsDefaultProps, IPosition, ISelectedOrHovered, - ISize, + ISize, IToggletooltip, PortWrapper, } from '../../' import { noop } from '../../utils' @@ -56,6 +56,8 @@ export interface INodeWrapperProps { onNodeSizeChange: IOnNodeSizeChange onNodeMouseEnter: IOnNodeMouseEnter onNodeMouseLeave: IOnNodeMouseLeave + deleteTooltip: IDeleteTooltip + toggleTooltip: IToggletooltip } export const NodeWrapper = ({ @@ -84,6 +86,8 @@ export const NodeWrapper = ({ onLinkMove, onLinkComplete, onLinkCancel, + toggleTooltip, + deleteTooltip, }: INodeWrapperProps) => { const { zoomScale } = React.useContext(CanvasContext) const [size, setSize] = React.useState({ width: 0, height: 0 }) @@ -122,6 +126,13 @@ export const NodeWrapper = ({ onNodeClick({ config, nodeId: node.id }) } } + if (node.tooltip) { + + switch (node.tooltip.toogleOffWhenClicked) { + case 'global': toggleTooltip({ nodeId: 'global' }); break + case 'node' : toggleTooltip({ nodeId: node.id }); break + } + } }, [config, node.id], ) diff --git a/src/container/actions.ts b/src/container/actions.ts index 9c380ecc..d3d6b8b9 100644 --- a/src/container/actions.ts +++ b/src/container/actions.ts @@ -1,6 +1,6 @@ import { IChart, - IConfig, IDeleteToolTip, + IConfig, IDeleteTooltip, identity, IOnCanvasClick, IOnCanvasDrop, @@ -23,7 +23,7 @@ import { IOnNodeSizeChange, IOnPortPositionChange, IOnZoomCanvas, - IStateCallback, IToggleToolTip, + IStateCallback, IToggletooltip, } from '../' import { rotate } from './utils/rotate' @@ -294,7 +294,7 @@ export const onZoomCanvas: IOnZoomCanvas = ({ config, data }) => (chart: IChart) return chart } -export const deleteTooltip: IDeleteToolTip = ({ nodeId }) => (chart: IChart): IChart => { +export const deleteTooltip: IDeleteTooltip = ({ nodeId }) => (chart: IChart): IChart => { if (nodeId === 'global') { delete chart.tooltipsGlobal } @@ -304,7 +304,7 @@ export const deleteTooltip: IDeleteToolTip = ({ nodeId }) => (chart: IChart): IC return chart } -export const toggleTooltip: IToggleToolTip = ({ nodeId }) => (chart: IChart): IChart => { +export const toggleTooltip: IToggletooltip = ({ nodeId }) => (chart: IChart): IChart => { if (nodeId === 'global') { if (chart.tooltipsGlobal) { chart.tooltipsGlobal.showTooltip ? diff --git a/src/types/chart.ts b/src/types/chart.ts index 0931bbfb..cca9e566 100644 --- a/src/types/chart.ts +++ b/src/types/chart.ts @@ -79,5 +79,6 @@ export type ILink = { interface ITooltipConfig { showTooltip: boolean, + toogleOffWhenClicked?: 'global' | 'node' text: string, } diff --git a/src/types/functions.ts b/src/types/functions.ts index 70d0353b..544e8b6a 100644 --- a/src/types/functions.ts +++ b/src/types/functions.ts @@ -117,6 +117,6 @@ export type IOnCanvasDrop = (input: IOnCanvasDropInput) => void export type IOnZoomCanvas = (input: { config?: IConfig; data: any }) => void -export type IDeleteToolTip = (input: { nodeId: string | undefined }) => void +export type IDeleteTooltip = (input: { nodeId: string | undefined }) => void -export type IToggleToolTip = (input: { nodeId: string | undefined }) => void +export type IToggletooltip = (input: { nodeId: string | undefined }) => void diff --git a/stories/misc/tooltipChartState.ts b/stories/misc/tooltipChartState.ts index 57ee31c1..1b1aa4e8 100644 --- a/stories/misc/tooltipChartState.ts +++ b/stories/misc/tooltipChartState.ts @@ -3,7 +3,8 @@ import { IChart } from '../../src' export const tooltipChart: IChart = { tooltipsGlobal: { showTooltip: true, - text: 'This is the global tooltip', + toogleOffWhenClicked: 'global', + text: 'This is the global tooltip and will be toggled off, when clicked', }, offset: { x: 0, @@ -42,7 +43,8 @@ export const tooltipChart: IChart = { node2: { tooltip: { showTooltip: true, - text: 'this is the tooltip for node2', + toogleOffWhenClicked: 'node', + text: 'this is the tooltip for node2 and will be toggled off when clicked', }, id: 'node2', type: 'input-output', From 785d680b7b929174ffb7ea7d5087560adcfc8b1e Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 01:08:36 +0100 Subject: [PATCH 07/17] feat: add custom tooltip --- src/components/FlowChart/FlowChart.tsx | 8 ++++++-- src/components/Node/Node.wrapper.tsx | 14 +++++++++----- .../TooltipComponent.Wrapper.tsx | 19 +++++++++++++++++++ .../TooltipComponent.default.tsx | 12 ++++++++++++ src/components/TooltipComponent/index.ts | 1 + src/components/index.ts | 1 + stories/Tooltips.tsx | 13 +++++++++++++ 7 files changed, 61 insertions(+), 7 deletions(-) create mode 100644 src/components/TooltipComponent/TooltipComponent.Wrapper.tsx create mode 100644 src/components/TooltipComponent/TooltipComponent.default.tsx create mode 100644 src/components/TooltipComponent/index.ts diff --git a/src/components/FlowChart/FlowChart.tsx b/src/components/FlowChart/FlowChart.tsx index 2a3b2404..4865fbad 100644 --- a/src/components/FlowChart/FlowChart.tsx +++ b/src/components/FlowChart/FlowChart.tsx @@ -1,9 +1,10 @@ import * as React from 'react' -import {CanvasInnerDefault, CanvasOuterDefault, CanvasWrapper, ICanvasInnerDefaultProps, ICanvasOuterDefaultProps, IChart, IConfig, IDeleteTooltip, +import { + CanvasInnerDefault, CanvasOuterDefault, CanvasWrapper, ICanvasInnerDefaultProps, ICanvasOuterDefaultProps, IChart, IConfig, IDeleteTooltip, ILink, ILinkDefaultProps, INodeDefaultProps, INodeInnerDefaultProps, IOnCanvasClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas, IOnDragCanvasStop, IOnDragNode, IOnDragNodeStop, IOnLinkCancel, IOnLinkClick, IOnLinkComplete, IOnLinkMouseEnter, IOnLinkMouseLeave, IOnLinkMove, IOnLinkStart, IOnNodeClick, IOnNodeDoubleClick, IOnNodeMouseEnter, IOnNodeMouseLeave, IOnNodeSizeChange, IOnPortPositionChange, IOnZoomCanvas, IPortDefaultProps, IPortsDefaultProps, ISelectedOrHovered, IToggletooltip, - LinkDefault, LinkWrapper, NodeDefault, NodeInnerDefault, NodeWrapper, PortDefault, PortsDefault, + ITooltipComponentDefaultProps, LinkDefault, LinkWrapper, NodeDefault, NodeInnerDefault, NodeWrapper, PortDefault, PortsDefault, TooltipComponentDefault, } from '../../' import { getMatrix } from './utils/grid' @@ -41,6 +42,7 @@ export interface IFlowChartComponents { Port?: React.FunctionComponent Node?: React.FunctionComponent Link?: React.FunctionComponent + TooltipComponent?: React.FunctionComponent } export interface IFlowChartProps { @@ -102,6 +104,7 @@ export const FlowChart = (props: IFlowChartProps) => { Port = PortDefault, Node = NodeDefault, Link = LinkDefault, + TooltipComponent = TooltipComponentDefault, } = {}, config = {}, } = props @@ -187,6 +190,7 @@ export const FlowChart = (props: IFlowChartProps) => { config={config} key={nodeId} Component={Node} + TooltipComponent={TooltipComponent} node={nodeWithGlobalToolTip ? nodeWithGlobalToolTip : nodes[nodeId]} offset={chart.offset} isSelected={isSelected} diff --git a/src/components/Node/Node.wrapper.tsx b/src/components/Node/Node.wrapper.tsx index e97a72d0..a2ce0384 100644 --- a/src/components/Node/Node.wrapper.tsx +++ b/src/components/Node/Node.wrapper.tsx @@ -24,17 +24,20 @@ import { IPosition, ISelectedOrHovered, ISize, IToggletooltip, + ITooltipComponentDefaultProps, PortWrapper, + TooltipComponentDefault, } from '../../' import { noop } from '../../utils' import CanvasContext from '../Canvas/CanvasContext' +import { TooltipComponentWrapper } from '../TooltipComponent/TooltipComponent.Wrapper' import { INodeDefaultProps, NodeDefault } from './Node.default' export interface INodeWrapperProps { config: IConfig node: INode Component: React.FunctionComponent - TooltipComponent?: React.FunctionComponent + TooltipComponent?: React.FunctionComponent offset: IPosition selected: ISelectedOrHovered | undefined hovered: ISelectedOrHovered | undefined @@ -61,7 +64,6 @@ export interface INodeWrapperProps { } export const NodeWrapper = ({ - TooltipComponent, config, node, onDragNode, @@ -70,6 +72,7 @@ export const NodeWrapper = ({ onNodeDoubleClick, isSelected, Component = NodeDefault, + TooltipComponent = TooltipComponentDefault, onNodeSizeChange, onNodeMouseEnter, onNodeMouseLeave, @@ -175,12 +178,11 @@ export const NodeWrapper = ({ if (node.tooltip && node.tooltip.showTooltip) { tooltip = node.tooltip.text } - const dataTip = TooltipComponent ? '' : tooltip const children = (
{ @@ -212,7 +214,9 @@ export const NodeWrapper = ({ /> ))} - + + {tooltip && } +
) diff --git a/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx b/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx new file mode 100644 index 00000000..e48c6a7b --- /dev/null +++ b/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx @@ -0,0 +1,19 @@ +import * as React from 'react' +import { ITooltipComponentDefaultProps, TooltipComponentDefault} from './TooltipComponent.default' + +export const TooltipComponentWrapper = ({ + Component = TooltipComponentDefault, + tooltip, + }: ITooltipComponentWrapperProps) => { + return ( + <> + + + ) +} +export interface ITooltipComponentWrapperProps { + Component: React.FunctionComponent + className?: string + tooltip: string + style?: object +} diff --git a/src/components/TooltipComponent/TooltipComponent.default.tsx b/src/components/TooltipComponent/TooltipComponent.default.tsx new file mode 100644 index 00000000..17c187c5 --- /dev/null +++ b/src/components/TooltipComponent/TooltipComponent.default.tsx @@ -0,0 +1,12 @@ +import * as React from 'react' + +export const TooltipComponentDefault = ({ tooltip }: ITooltipComponentDefaultProps) => { + return ( + <>{tooltip} + ) +} +export interface ITooltipComponentDefaultProps { + className?: string + tooltip: string + style?: object +} diff --git a/src/components/TooltipComponent/index.ts b/src/components/TooltipComponent/index.ts new file mode 100644 index 00000000..57b328aa --- /dev/null +++ b/src/components/TooltipComponent/index.ts @@ -0,0 +1 @@ +export * from './TooltipComponent.default' diff --git a/src/components/index.ts b/src/components/index.ts index d8886094..43175508 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,3 +6,4 @@ export * from './Ports' export * from './PortsGroup' export * from './Link' export * from './FlowChart' +export * from './TooltipComponent' diff --git a/stories/Tooltips.tsx b/stories/Tooltips.tsx index fb69b782..2d5e9d0b 100644 --- a/stories/Tooltips.tsx +++ b/stories/Tooltips.tsx @@ -1,6 +1,7 @@ import { cloneDeep, mapValues } from 'lodash' import * as React from 'react' import { FlowChart } from '../src' +import { ITooltipComponentDefaultProps } from '../src/components/TooltipComponent/TooltipComponent.default' import * as actions from '../src/container/actions' import { Page } from './components' import { tooltipChart } from './misc/tooltipChartState' @@ -11,6 +12,15 @@ import { tooltipChart } from './misc/tooltipChartState' * You could easily move this state to Redux or similar by creating your own callback actions. */ +const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => { + return ( +
+

{props.tooltip}

+
+ ) +} + +console.log(ExampleToolTipComponent) export class Tooltips extends React.Component { public state = cloneDeep(tooltipChart) public render () { @@ -38,6 +48,9 @@ export class Tooltips extends React.Component {
From 9bf37c8f6c98123ce1aee09a295a70c921790d25 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 01:14:45 +0100 Subject: [PATCH 08/17] fix: toggle tooltip stays untoogled --- src/components/Node/Node.wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Node/Node.wrapper.tsx b/src/components/Node/Node.wrapper.tsx index a2ce0384..85048b36 100644 --- a/src/components/Node/Node.wrapper.tsx +++ b/src/components/Node/Node.wrapper.tsx @@ -129,7 +129,7 @@ export const NodeWrapper = ({ onNodeClick({ config, nodeId: node.id }) } } - if (node.tooltip) { + if (node.tooltip && node.tooltip.showTooltip) { switch (node.tooltip.toogleOffWhenClicked) { case 'global': toggleTooltip({ nodeId: 'global' }); break From d20656d71acfdcc6cd00ea04b423e7a3ad703938 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 01:47:45 +0100 Subject: [PATCH 09/17] add readme --- README.md | 186 +++++++++++++++++++++++++++++++++++++++++++ stories/Tooltips.tsx | 1 - 2 files changed, 186 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d3708de8..e7fc8372 100644 --- a/README.md +++ b/README.md @@ -198,6 +198,192 @@ const Example = ( ### Readonly Mode [stories/ReadonlyMode.tsx](./stories/ReadonlyMode.tsx) +### With Tooltips +[stories/Tooltips.tsx](./stories/ReadonlyMode.tsx) + +You can add tooltips by adding tooltipsGlobal into the chartState or tooltip to the node configuration. +tooltipsGlobal will apply for all nodes and tooltip for individual nodes. + +```tsx + +export const tooltipChart: IChart = { + tooltipsGlobal: { + showTooltip: true, + toogleOffWhenClicked: 'global', + text: 'This is the global tooltip and will be toggled off, when clicked', + }, + offset: { + x: 0, + y: 0, + }, + scale: 1, + nodes: { + node1: { + tooltip: { + showTooltip: true, + text: 'this is the tooltip for node1', + }, + id: 'node1', + type: 'output-only', + position: { + x: 300, + y: 100, + }, + ports: { + port1: { + id: 'port1', + type: 'output', + properties: { + value: 'yes', + }, + }, + port2: { + id: 'port2', + type: 'output', + properties: { + value: 'no', + }, + }, + }, + }, + node2: { + tooltip: { + showTooltip: true, + toogleOffWhenClicked: 'node', + text: 'this is the tooltip for node2 and will be toggled off when clicked', + }, + id: 'node2', + type: 'input-output', + position: { + x: 300, + y: 300, + }, + ports: { + port1: { + id: 'port1', + type: 'input', + }, + port2: { + id: 'port2', + type: 'output', + }, + }, + }, + node3: { + tooltip: { + showTooltip: false, + text: 'this is the tooltip for node3 but its off', + }, + id: 'node3', + type: 'input-output', + position: { + x: 100, + y: 600, + }, + ports: { + port1: { + id: 'port1', + type: 'input', + }, + port2: { + id: 'port2', + type: 'output', + }, + }, + }, + node4: { + id: 'node4', + type: 'input-output', + position: { + x: 500, + y: 600, + }, + ports: { + port1: { + id: 'port1', + type: 'input', + }, + port2: { + id: 'port2', + type: 'output', + }, + }, + }, + }, + links: { + link1: { + id: 'link1', + from: { + nodeId: 'node1', + portId: 'port2', + }, + to: { + nodeId: 'node2', + portId: 'port1', + }, + properties: { + label: 'example link label', + }, + }, + link2: { + id: 'link2', + from: { + nodeId: 'node2', + portId: 'port2', + }, + to: { + nodeId: 'node3', + portId: 'port1', + }, + properties: { + label: 'another example link label', + }, + }, + link3: { + id: 'link3', + from: { + nodeId: 'node2', + portId: 'port2', + }, + to: { + nodeId: 'node4', + portId: 'port1', + }, + }, + }, + selected: {}, + hovered: {}, +} + +``` +You can also customize the tooltipComponent by adding it to Component props of flowChart: + +```tsx +const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => { + return ( +
+

{props.tooltip}

+
+ ) +} + +export class Tooltips extends React.Component { +... + return + ( + + ‚ + ) +} + +``` + ### Other Demos [stories/ExternalReactState.tsx](./stories) diff --git a/stories/Tooltips.tsx b/stories/Tooltips.tsx index 2d5e9d0b..171edd1c 100644 --- a/stories/Tooltips.tsx +++ b/stories/Tooltips.tsx @@ -20,7 +20,6 @@ const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => { ) } -console.log(ExampleToolTipComponent) export class Tooltips extends React.Component { public state = cloneDeep(tooltipChart) public render () { From 0c547fc1184e80f82ef459cec9f638282ef127f5 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 01:51:49 +0100 Subject: [PATCH 10/17] style: typo and shorten readme --- README.md | 79 +++---------------------------------------------------- 1 file changed, 3 insertions(+), 76 deletions(-) diff --git a/README.md b/README.md index e7fc8372..1df40413 100644 --- a/README.md +++ b/README.md @@ -280,81 +280,8 @@ export const tooltipChart: IChart = { x: 100, y: 600, }, - ports: { - port1: { - id: 'port1', - type: 'input', - }, - port2: { - id: 'port2', - type: 'output', - }, - }, - }, - node4: { - id: 'node4', - type: 'input-output', - position: { - x: 500, - y: 600, - }, - ports: { - port1: { - id: 'port1', - type: 'input', - }, - port2: { - id: 'port2', - type: 'output', - }, - }, - }, - }, - links: { - link1: { - id: 'link1', - from: { - nodeId: 'node1', - portId: 'port2', - }, - to: { - nodeId: 'node2', - portId: 'port1', - }, - properties: { - label: 'example link label', - }, - }, - link2: { - id: 'link2', - from: { - nodeId: 'node2', - portId: 'port2', - }, - to: { - nodeId: 'node3', - portId: 'port1', - }, - properties: { - label: 'another example link label', - }, - }, - link3: { - id: 'link3', - from: { - nodeId: 'node2', - portId: 'port2', - }, - to: { - nodeId: 'node4', - portId: 'port1', - }, - }, - }, - selected: {}, - hovered: {}, -} - + +... ``` You can also customize the tooltipComponent by adding it to Component props of flowChart: @@ -372,7 +299,7 @@ export class Tooltips extends React.Component { return ( - ‚ Date: Sun, 1 Nov 2020 12:50:26 +0100 Subject: [PATCH 11/17] docs: remove IDE files from gitignore --- .gitignore | 3 --- 1 file changed, 3 deletions(-) diff --git a/.gitignore b/.gitignore index a8d3c88c..7cc2112a 100644 --- a/.gitignore +++ b/.gitignore @@ -61,6 +61,3 @@ typings/ # next.js build output .next - -# IDE files -.idea From e8d43888e12cdaae761e5ac67aaa7242c5502e95 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 13:22:56 +0100 Subject: [PATCH 12/17] docs: make readme more readable --- README.md | 108 +++++++++++++++++------------------------------------- 1 file changed, 34 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index 1df40413..a5fb0dd6 100644 --- a/README.md +++ b/README.md @@ -198,11 +198,13 @@ const Example = ( ### Readonly Mode [stories/ReadonlyMode.tsx](./stories/ReadonlyMode.tsx) -### With Tooltips -[stories/Tooltips.tsx](./stories/ReadonlyMode.tsx) +### Tooltips +[stories/Tooltips.tsx](./stories/Tooltips.tsx) -You can add tooltips by adding tooltipsGlobal into the chartState or tooltip to the node configuration. -tooltipsGlobal will apply for all nodes and tooltip for individual nodes. +You can add tooltips by adding `tooltipsGlobal` into the chartState (`IChart`) or `tooltip` to the node objects. +`tooltipsGlobal` will apply for all nodes and `tooltip` for individual nodes. + +#### Example ```tsx @@ -223,64 +225,26 @@ export const tooltipChart: IChart = { showTooltip: true, text: 'this is the tooltip for node1', }, - id: 'node1', - type: 'output-only', - position: { - x: 300, - y: 100, - }, - ports: { - port1: { - id: 'port1', - type: 'output', - properties: { - value: 'yes', - }, - }, - port2: { - id: 'port2', - type: 'output', - properties: { - value: 'no', - }, - }, - }, +... + node2: { + tooltip: { + showTooltip: true, + toogleOffWhenClicked: 'node', + text: 'this is the tooltip for node2 and will be toggled off when clicked', }, - node2: { - tooltip: { - showTooltip: true, - toogleOffWhenClicked: 'node', - text: 'this is the tooltip for node2 and will be toggled off when clicked', - }, - id: 'node2', - type: 'input-output', - position: { - x: 300, - y: 300, - }, - ports: { - port1: { - id: 'port1', - type: 'input', - }, - port2: { - id: 'port2', - type: 'output', - }, - }, + id: 'node2', +... + node3: { + tooltip: { + showTooltip: false, + text: 'this is the tooltip for node3 but its off', + }, + id: 'node3', + type: 'input-output', + position: { + x: 100, + y: 600, }, - node3: { - tooltip: { - showTooltip: false, - text: 'this is the tooltip for node3 but its off', - }, - id: 'node3', - type: 'input-output', - position: { - x: 100, - y: 600, - }, - ... ``` You can also customize the tooltipComponent by adding it to Component props of flowChart: @@ -288,25 +252,21 @@ You can also customize the tooltipComponent by adding it to Component props of f ```tsx const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => { return ( -
-

{props.tooltip}

-
+
+

{props.tooltip}

+
) } export class Tooltips extends React.Component { ... - return - ( - - - ) + return ( + + + ) } ``` From eea480b78a02405f0557d6b4ecf8ca957ec2d405 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 16:16:57 +0100 Subject: [PATCH 13/17] refactor: remove let --- src/components/FlowChart/FlowChart.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/FlowChart/FlowChart.tsx b/src/components/FlowChart/FlowChart.tsx index 4865fbad..2de0fb02 100644 --- a/src/components/FlowChart/FlowChart.tsx +++ b/src/components/FlowChart/FlowChart.tsx @@ -177,13 +177,10 @@ export const FlowChart = (props: IFlowChartProps) => { const selectedLink = getSelectedLinkForNode(selected, nodeId, links) const hoveredLink = getSelectedLinkForNode(hovered, nodeId, links) - let globalToolTip + const nodeWithGlobalTooltip = { ...nodes[nodeId] } if (chart.tooltipsGlobal && chart.tooltipsGlobal.showTooltip) { - globalToolTip = chart.tooltipsGlobal + nodeWithGlobalTooltip.tooltip = chart.tooltipsGlobal } - const nodeWithGlobalToolTip = globalToolTip ? - { ...nodes[nodeId], ...{ tooltip: globalToolTip } } - : undefined return ( { key={nodeId} Component={Node} TooltipComponent={TooltipComponent} - node={nodeWithGlobalToolTip ? nodeWithGlobalToolTip : nodes[nodeId]} + node={nodeWithGlobalTooltip} offset={chart.offset} isSelected={isSelected} selected={selectedLink ? selected : undefined} From f3de1c6b5141591ddf188a572d000871ce656d27 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 16:39:04 +0100 Subject: [PATCH 14/17] style: fix linting --- src/components/Link/Link.default.tsx | 1 - src/components/Node/Node.wrapper.tsx | 7 ++- .../TooltipComponent.Wrapper.tsx | 19 ++++--- stories/Tooltips.tsx | 55 ++++++++++--------- 4 files changed, 42 insertions(+), 40 deletions(-) diff --git a/src/components/Link/Link.default.tsx b/src/components/Link/Link.default.tsx index fcb625f9..c4f08f22 100644 --- a/src/components/Link/Link.default.tsx +++ b/src/components/Link/Link.default.tsx @@ -37,7 +37,6 @@ export const LinkDefault = (props: ILinkDefaultProps) => { endPos, ...props, } - return config.showArrowHead ? : diff --git a/src/components/Node/Node.wrapper.tsx b/src/components/Node/Node.wrapper.tsx index 85048b36..552f6828 100644 --- a/src/components/Node/Node.wrapper.tsx +++ b/src/components/Node/Node.wrapper.tsx @@ -3,7 +3,8 @@ import Draggable, { DraggableData } from 'react-draggable' import ResizeObserver from 'react-resize-observer' import ReactTooltip from 'react-tooltip' import { - IConfig, IDeleteTooltip, + IConfig, + IDeleteTooltip, ILink, INode, INodeInnerDefaultProps, @@ -23,7 +24,8 @@ import { IPortsDefaultProps, IPosition, ISelectedOrHovered, - ISize, IToggletooltip, + ISize, + IToggletooltip, ITooltipComponentDefaultProps, PortWrapper, TooltipComponentDefault, @@ -130,7 +132,6 @@ export const NodeWrapper = ({ } } if (node.tooltip && node.tooltip.showTooltip) { - switch (node.tooltip.toogleOffWhenClicked) { case 'global': toggleTooltip({ nodeId: 'global' }); break case 'node' : toggleTooltip({ nodeId: node.id }); break diff --git a/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx b/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx index e48c6a7b..6dce7763 100644 --- a/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx +++ b/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx @@ -1,16 +1,17 @@ import * as React from 'react' -import { ITooltipComponentDefaultProps, TooltipComponentDefault} from './TooltipComponent.default' +import { ITooltipComponentDefaultProps, TooltipComponentDefault } from './TooltipComponent.default' -export const TooltipComponentWrapper = ({ +export const TooltipComponentWrapper = + ({ Component = TooltipComponentDefault, tooltip, - }: ITooltipComponentWrapperProps) => { - return ( - <> - - - ) -} + }: ITooltipComponentWrapperProps) => { + return ( + <> + + + ) + } export interface ITooltipComponentWrapperProps { Component: React.FunctionComponent className?: string diff --git a/stories/Tooltips.tsx b/stories/Tooltips.tsx index 171edd1c..cf150fdc 100644 --- a/stories/Tooltips.tsx +++ b/stories/Tooltips.tsx @@ -14,9 +14,9 @@ import { tooltipChart } from './misc/tooltipChartState' const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => { return ( -
-

{props.tooltip}

-
+
+

{props.tooltip}

+
) } @@ -25,34 +25,35 @@ export class Tooltips extends React.Component { public render () { const chart = this.state const stateActions = mapValues(actions, (func: any) => - (...args: any) => this.setState(func(...args))) as typeof actions + (...args: any) => this.setState(func(...args))) as typeof actions return ( -
- +
+ - + - - - - - -
+ + + + + + +
) } } From 3dcf2972f1d8de489ce884fbc7e716b5aa62e77b Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 16:51:57 +0100 Subject: [PATCH 15/17] refactor: use switch case --- src/container/actions.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/container/actions.ts b/src/container/actions.ts index d3d6b8b9..1b56b0b8 100644 --- a/src/container/actions.ts +++ b/src/container/actions.ts @@ -295,12 +295,17 @@ export const onZoomCanvas: IOnZoomCanvas = ({ config, data }) => (chart: IChart) } export const deleteTooltip: IDeleteTooltip = ({ nodeId }) => (chart: IChart): IChart => { - if (nodeId === 'global') { - delete chart.tooltipsGlobal - } - if (nodeId && nodeId !== 'global') { - delete chart.nodes[nodeId].tooltip + switch (nodeId) { + case 'global': + delete chart.tooltipsGlobal + break + case undefined: + break + default: + delete chart.nodes[nodeId].tooltip + break } + return chart } From 9d3736072b235adbb56830dd6243239b33e976d2 Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 16:58:44 +0100 Subject: [PATCH 16/17] Refactor: make undefined check more clear --- src/container/actions.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/container/actions.ts b/src/container/actions.ts index 1b56b0b8..f86589d3 100644 --- a/src/container/actions.ts +++ b/src/container/actions.ts @@ -318,7 +318,8 @@ export const toggleTooltip: IToggletooltip = ({ nodeId }) => (chart: IChart): IC } } if (nodeId && nodeId !== 'global') { - if (chart.nodes[nodeId].tooltip) { + if (chart.nodes[nodeId] && chart.nodes[nodeId].tooltip) { + // typescript doesn't understand, that there is a check for undefined above. // @ts-ignore chart.nodes[nodeId].tooltip.showTooltip ? // @ts-ignore From cf8286771975564c4ef61f23b24a0dbe1401a17c Mon Sep 17 00:00:00 2001 From: Bastin Jafari Date: Sun, 1 Nov 2020 17:04:06 +0100 Subject: [PATCH 17/17] refactor: remove | undefined --- src/types/functions.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/types/functions.ts b/src/types/functions.ts index 544e8b6a..743f7351 100644 --- a/src/types/functions.ts +++ b/src/types/functions.ts @@ -117,6 +117,6 @@ export type IOnCanvasDrop = (input: IOnCanvasDropInput) => void export type IOnZoomCanvas = (input: { config?: IConfig; data: any }) => void -export type IDeleteTooltip = (input: { nodeId: string | undefined }) => void +export type IDeleteTooltip = (input: { nodeId?: string }) => void -export type IToggletooltip = (input: { nodeId: string | undefined }) => void +export type IToggletooltip = (input: { nodeId?: string }) => void