+
{
const newSize = { width: rect.width, height: rect.height }
@@ -189,6 +215,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..6dce7763
--- /dev/null
+++ b/src/components/TooltipComponent/TooltipComponent.Wrapper.tsx
@@ -0,0 +1,20 @@
+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/src/container/actions.ts b/src/container/actions.ts
index abb496d0..f86589d3 100644
--- a/src/container/actions.ts
+++ b/src/container/actions.ts
@@ -1,6 +1,6 @@
import {
IChart,
- IConfig,
+ IConfig, IDeleteTooltip,
identity,
IOnCanvasClick,
IOnCanvasDrop,
@@ -23,7 +23,7 @@ import {
IOnNodeSizeChange,
IOnPortPositionChange,
IOnZoomCanvas,
- IStateCallback,
+ IStateCallback, IToggletooltip,
} from '../'
import { rotate } from './utils/rotate'
@@ -293,3 +293,40 @@ export const onZoomCanvas: IOnZoomCanvas = ({ config, data }) => (chart: IChart)
chart.scale = data.scale
return chart
}
+
+export const deleteTooltip: IDeleteTooltip = ({ nodeId }) => (chart: IChart): IChart => {
+ switch (nodeId) {
+ case 'global':
+ delete chart.tooltipsGlobal
+ break
+ case undefined:
+ break
+ default:
+ delete chart.nodes[nodeId].tooltip
+ break
+ }
+
+ 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] && 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
+ chart.nodes[nodeId].tooltip.showTooltip = false :
+ // @ts-ignore
+ chart.nodes[nodeId].tooltip.showTooltip = true
+ }
+ }
+ return chart
+}
diff --git a/src/types/chart.ts b/src/types/chart.ts
index 61406a32..cca9e566 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,9 @@ export type ILink = {
} : {
properties: LinkProps,
})
+
+interface ITooltipConfig {
+ showTooltip: boolean,
+ toogleOffWhenClicked?: 'global' | 'node'
+ text: string,
+}
diff --git a/src/types/functions.ts b/src/types/functions.ts
index 1db5461d..743f7351 100644
--- a/src/types/functions.ts
+++ b/src/types/functions.ts
@@ -116,3 +116,7 @@ export interface IOnCanvasDropInput {
export type IOnCanvasDrop = (input: IOnCanvasDropInput) => void
export type IOnZoomCanvas = (input: { config?: IConfig; data: any }) => void
+
+export type IDeleteTooltip = (input: { nodeId?: string }) => void
+
+export type IToggletooltip = (input: { nodeId?: string }) => void
diff --git a/stories/Tooltips.tsx b/stories/Tooltips.tsx
new file mode 100644
index 00000000..cf150fdc
--- /dev/null
+++ b/stories/Tooltips.tsx
@@ -0,0 +1,59 @@
+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'
+
+/**
+ * State is external to the Element
+ *
+ * You could easily move this state to Redux or similar by creating your own callback actions.
+ */
+
+const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => {
+ return (
+
+
{props.tooltip}
+
+ )
+}
+
+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 (
+
+
+
+
+
+
+
+
+
+
+
+