From 927d5ddd055fdb73857afa8452fe2cdee8624720 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 2 Apr 2019 02:05:07 +0800 Subject: [PATCH] refactor: move all props builder to external file --- .../react_canvas/area_geometries.test.tsx | 98 -------- .../react_canvas/area_geometries.tsx | 93 +------- .../react_canvas/bar_geometries.test.tsx | 35 --- .../react_canvas/bar_geometries.tsx | 42 +--- .../react_canvas/line_geometries.test.tsx | 80 ------- .../react_canvas/line_geometries.tsx | 70 +----- .../utils/rendering_props_utils.test.ts | 218 ++++++++++++++++++ .../utils/rendering_props_utils.ts | 181 +++++++++++++++ 8 files changed, 409 insertions(+), 408 deletions(-) delete mode 100644 src/components/react_canvas/area_geometries.test.tsx delete mode 100644 src/components/react_canvas/bar_geometries.test.tsx delete mode 100644 src/components/react_canvas/line_geometries.test.tsx create mode 100644 src/components/react_canvas/utils/rendering_props_utils.test.ts create mode 100644 src/components/react_canvas/utils/rendering_props_utils.ts diff --git a/src/components/react_canvas/area_geometries.test.tsx b/src/components/react_canvas/area_geometries.test.tsx deleted file mode 100644 index 1bcd989d7e..0000000000 --- a/src/components/react_canvas/area_geometries.test.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { buildAreaLineProps, buildAreaPointProps, buildAreaProps } from './area_geometries'; - -describe('[canvas] Area Geometries', () => { - test('can build area point props', () => { - const props = buildAreaPointProps({ - areaIndex: 1, - pointIndex: 2, - x: 10, - y: 20, - radius: 30, - strokeWidth: 2, - color: 'red', - opacity: 0.5, - }); - expect(props).toEqual({ - key: 'area-point-1-2', - x: 10, - y: 20, - radius: 30, - strokeWidth: 2, - strokeEnabled: true, - stroke: 'red', - fill: 'white', - opacity: 0.5, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - }); - - const propsNoStroke = buildAreaPointProps({ - areaIndex: 1, - pointIndex: 2, - x: 10, - y: 20, - radius: 30, - strokeWidth: 0, - color: 'red', - opacity: 0.5, - }); - expect(propsNoStroke).toEqual({ - key: 'area-point-1-2', - x: 10, - y: 20, - radius: 30, - strokeWidth: 0, - strokeEnabled: false, - stroke: 'red', - fill: 'white', - opacity: 0.5, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - }); - }); - test('can build area path props', () => { - const props = buildAreaProps({ - index: 1, - areaPath: 'M0,0L10,10Z', - color: 'red', - opacity: 0.5, - }); - expect(props).toEqual({ - key: 'area-1', - data: 'M0,0L10,10Z', - fill: 'red', - lineCap: 'round', - lineJoin: 'round', - opacity: 0.5, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - }); - }); - test('can build area line path props', () => { - const props = buildAreaLineProps({ - index: 1, - linePath: 'M0,0L10,10Z', - color: 'red', - strokeWidth: 1, - geometryStyle: { - opacity: 0.5, - }, - }); - expect(props).toEqual({ - key: `area-line-1`, - data: 'M0,0L10,10Z', - stroke: 'red', - strokeWidth: 1, - lineCap: 'round', - lineJoin: 'round', - opacity: 0.5, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - }); - expect(props.fill).toBeFalsy(); - }); -}); diff --git a/src/components/react_canvas/area_geometries.tsx b/src/components/react_canvas/area_geometries.tsx index 92142502d9..6dfcb000bb 100644 --- a/src/components/react_canvas/area_geometries.tsx +++ b/src/components/react_canvas/area_geometries.tsx @@ -3,14 +3,13 @@ import React from 'react'; import { Circle, Group, Path } from 'react-konva'; import { animated, Spring } from 'react-spring/renderprops-konva.cjs'; import { LegendItem } from '../../lib/series/legend'; -import { - AreaGeometry, - GeometryStyle, - getGeometryStyle, - PointGeometry, -} from '../../lib/series/rendering'; +import { AreaGeometry, getGeometryStyle, PointGeometry } from '../../lib/series/rendering'; import { AreaSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme'; -import { GlobalKonvaElementProps } from './globals'; +import { + buildAreaLineProps, + buildAreaPointProps, + buildAreaProps, +} from './utils/rendering_props_utils'; interface AreaGeometriesDataProps { animated?: boolean; @@ -176,83 +175,3 @@ export class AreaGeometries extends React.PureComponent< }); } } - -export function buildAreaPointProps({ - areaIndex, - pointIndex, - x, - y, - radius, - strokeWidth, - color, - opacity, -}: { - areaIndex: number; - pointIndex: number; - x: number; - y: number; - radius: number; - strokeWidth: number; - color: string; - opacity: number; -}) { - return { - key: `area-point-${areaIndex}-${pointIndex}`, - x, - y, - radius, - strokeWidth, - strokeEnabled: strokeWidth !== 0, - stroke: color, - fill: 'white', - opacity, - ...GlobalKonvaElementProps, - }; -} - -export function buildAreaProps({ - index, - areaPath, - color, - opacity, -}: { - index: number; - areaPath: string; - color: string; - opacity: number; -}) { - return { - key: `area-${index}`, - data: areaPath, - fill: color, - lineCap: 'round', - lineJoin: 'round', - opacity, - ...GlobalKonvaElementProps, - }; -} - -export function buildAreaLineProps({ - index, - linePath, - color, - strokeWidth, - geometryStyle, -}: { - index: number; - linePath: string; - color: string; - strokeWidth: number; - geometryStyle: GeometryStyle; -}) { - return { - key: `area-line-${index}`, - data: linePath, - stroke: color, - strokeWidth, - lineCap: 'round', - lineJoin: 'round', - ...geometryStyle, - ...GlobalKonvaElementProps, - }; -} diff --git a/src/components/react_canvas/bar_geometries.test.tsx b/src/components/react_canvas/bar_geometries.test.tsx deleted file mode 100644 index dcddcf2d78..0000000000 --- a/src/components/react_canvas/bar_geometries.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { buildBarProps } from './bar_geometries'; - -describe('[canvas] Bar Geometries', () => { - test('can build bar props', () => { - const props = buildBarProps({ - index: 1, - x: 10, - y: 20, - width: 30, - height: 40, - fill: 'red', - stroke: 'blue', - strokeWidth: 1, - borderEnabled: true, - geometryStyle: { - opacity: 0.5, - }, - }); - expect(props).toEqual({ - key: `bar-1`, - x: 10, - y: 20, - width: 30, - height: 40, - fill: 'red', - stroke: 'blue', - strokeWidth: 1, - strokeEnabled: true, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - opacity: 0.5, - }); - }); -}); diff --git a/src/components/react_canvas/bar_geometries.tsx b/src/components/react_canvas/bar_geometries.tsx index bfefab2e2e..d088ad03f5 100644 --- a/src/components/react_canvas/bar_geometries.tsx +++ b/src/components/react_canvas/bar_geometries.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { Group, Rect } from 'react-konva'; import { animated, Spring } from 'react-spring/renderprops-konva.cjs'; import { LegendItem } from '../../lib/series/legend'; -import { BarGeometry, GeometryStyle, getGeometryStyle } from '../../lib/series/rendering'; +import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering'; import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme'; -import { GlobalKonvaElementProps } from './globals'; +import { buildBarProps } from './utils/rendering_props_utils'; interface BarGeometriesDataProps { animated?: boolean; @@ -108,41 +108,3 @@ export class BarGeometries extends React.PureComponent< }); } } - -export function buildBarProps({ - index, - x, - y, - width, - height, - fill, - stroke, - strokeWidth, - borderEnabled, - geometryStyle, -}: { - index: number; - x: number; - y: number; - width: number; - height: number; - fill: string; - stroke: string; - strokeWidth: number; - borderEnabled: boolean; - geometryStyle: GeometryStyle; -}) { - return { - key: `bar-${index}`, - x, - y, - width, - height, - fill, - strokeWidth, - stroke, - strokeEnabled: borderEnabled, - ...GlobalKonvaElementProps, - ...geometryStyle, - }; -} diff --git a/src/components/react_canvas/line_geometries.test.tsx b/src/components/react_canvas/line_geometries.test.tsx deleted file mode 100644 index bad42d42b7..0000000000 --- a/src/components/react_canvas/line_geometries.test.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { buildLinePointProps, buildLineProps } from './line_geometries'; - -describe('[canvas] Line Geometries', () => { - test('can build area point props', () => { - const props = buildLinePointProps({ - lineIndex: 1, - pointIndex: 2, - x: 10, - y: 20, - radius: 30, - strokeWidth: 2, - color: 'red', - opacity: 0.5, - }); - expect(props).toEqual({ - key: 'line-point-1-2', - x: 10, - y: 20, - radius: 30, - strokeWidth: 2, - strokeEnabled: true, - stroke: 'red', - fill: 'white', - opacity: 0.5, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - }); - - const propsNoStroke = buildLinePointProps({ - lineIndex: 1, - pointIndex: 2, - x: 10, - y: 20, - radius: 30, - strokeWidth: 0, - color: 'red', - opacity: 0.5, - }); - expect(propsNoStroke).toEqual({ - key: 'line-point-1-2', - x: 10, - y: 20, - radius: 30, - strokeWidth: 0, - strokeEnabled: false, - stroke: 'red', - fill: 'white', - opacity: 0.5, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - }); - }); - test('can build area line path props', () => { - const props = buildLineProps({ - index: 1, - linePath: 'M0,0L10,10Z', - color: 'red', - strokeWidth: 1, - opacity: 0.3, - geometryStyle: { - opacity: 0.5, - }, - }); - expect(props).toEqual({ - key: `line-1`, - data: 'M0,0L10,10Z', - stroke: 'red', - strokeWidth: 1, - lineCap: 'round', - lineJoin: 'round', - opacity: 0.5, - strokeHitEnabled: false, - perfectDrawEnabled: false, - listening: false, - }); - expect(props.fill).toBeFalsy(); - }); -}); diff --git a/src/components/react_canvas/line_geometries.tsx b/src/components/react_canvas/line_geometries.tsx index f166a09ae8..62d35438ec 100644 --- a/src/components/react_canvas/line_geometries.tsx +++ b/src/components/react_canvas/line_geometries.tsx @@ -3,14 +3,9 @@ import React from 'react'; import { Circle, Group, Path } from 'react-konva'; import { animated, Spring } from 'react-spring/renderprops-konva.cjs'; import { LegendItem } from '../../lib/series/legend'; -import { - GeometryStyle, - getGeometryStyle, - LineGeometry, - PointGeometry, -} from '../../lib/series/rendering'; +import { getGeometryStyle, LineGeometry, PointGeometry } from '../../lib/series/rendering'; import { LineSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme'; -import { GlobalKonvaElementProps } from './globals'; +import { buildLinePointProps, buildLineProps } from './utils/rendering_props_utils'; interface LineGeometriesDataProps { animated?: boolean; @@ -145,64 +140,3 @@ export class LineGeometries extends React.PureComponent< }); } } - -export function buildLinePointProps({ - lineIndex, - pointIndex, - x, - y, - radius, - strokeWidth, - color, - opacity, -}: { - lineIndex: number; - pointIndex: number; - x: number; - y: number; - radius: number; - strokeWidth: number; - color: string; - opacity: number; -}) { - return { - key: `line-point-${lineIndex}-${pointIndex}`, - x, - y, - radius, - stroke: color, - strokeWidth, - strokeEnabled: strokeWidth !== 0, - fill: 'white', - opacity, - ...GlobalKonvaElementProps, - }; -} - -export function buildLineProps({ - index, - linePath, - color, - strokeWidth, - opacity, - geometryStyle, -}: { - index: number; - linePath: string; - color: string; - strokeWidth: number; - opacity: number; - geometryStyle: GeometryStyle; -}) { - return { - key: `line-${index}`, - data: linePath, - stroke: color, - strokeWidth, - opacity, - lineCap: 'round', - lineJoin: 'round', - ...geometryStyle, - ...GlobalKonvaElementProps, - }; -} diff --git a/src/components/react_canvas/utils/rendering_props_utils.test.ts b/src/components/react_canvas/utils/rendering_props_utils.test.ts new file mode 100644 index 0000000000..1829601a5f --- /dev/null +++ b/src/components/react_canvas/utils/rendering_props_utils.test.ts @@ -0,0 +1,218 @@ +import { + buildAreaLineProps, + buildAreaPointProps, + buildAreaProps, + buildBarProps, + buildLinePointProps, + buildLineProps, +} from './rendering_props_utils'; + +describe('[canvas] Area Geometries props', () => { + test('can build area point props', () => { + const props = buildAreaPointProps({ + areaIndex: 1, + pointIndex: 2, + x: 10, + y: 20, + radius: 30, + strokeWidth: 2, + color: 'red', + opacity: 0.5, + }); + expect(props).toEqual({ + key: 'area-point-1-2', + x: 10, + y: 20, + radius: 30, + strokeWidth: 2, + strokeEnabled: true, + stroke: 'red', + fill: 'white', + opacity: 0.5, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + }); + + const propsNoStroke = buildAreaPointProps({ + areaIndex: 1, + pointIndex: 2, + x: 10, + y: 20, + radius: 30, + strokeWidth: 0, + color: 'red', + opacity: 0.5, + }); + expect(propsNoStroke).toEqual({ + key: 'area-point-1-2', + x: 10, + y: 20, + radius: 30, + strokeWidth: 0, + strokeEnabled: false, + stroke: 'red', + fill: 'white', + opacity: 0.5, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + }); + }); + test('can build area path props', () => { + const props = buildAreaProps({ + index: 1, + areaPath: 'M0,0L10,10Z', + color: 'red', + opacity: 0.5, + }); + expect(props).toEqual({ + key: 'area-1', + data: 'M0,0L10,10Z', + fill: 'red', + lineCap: 'round', + lineJoin: 'round', + opacity: 0.5, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + }); + }); + test('can build area line path props', () => { + const props = buildAreaLineProps({ + index: 1, + linePath: 'M0,0L10,10Z', + color: 'red', + strokeWidth: 1, + geometryStyle: { + opacity: 0.5, + }, + }); + expect(props).toEqual({ + key: `area-line-1`, + data: 'M0,0L10,10Z', + stroke: 'red', + strokeWidth: 1, + lineCap: 'round', + lineJoin: 'round', + opacity: 0.5, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + }); + expect(props.fill).toBeFalsy(); + }); +}); + +describe('[canvas] Line Geometries', () => { + test('can build line point props', () => { + const props = buildLinePointProps({ + lineIndex: 1, + pointIndex: 2, + x: 10, + y: 20, + radius: 30, + strokeWidth: 2, + color: 'red', + opacity: 0.5, + }); + expect(props).toEqual({ + key: 'line-point-1-2', + x: 10, + y: 20, + radius: 30, + strokeWidth: 2, + strokeEnabled: true, + stroke: 'red', + fill: 'white', + opacity: 0.5, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + }); + + const propsNoStroke = buildLinePointProps({ + lineIndex: 1, + pointIndex: 2, + x: 10, + y: 20, + radius: 30, + strokeWidth: 0, + color: 'red', + opacity: 0.5, + }); + expect(propsNoStroke).toEqual({ + key: 'line-point-1-2', + x: 10, + y: 20, + radius: 30, + strokeWidth: 0, + strokeEnabled: false, + stroke: 'red', + fill: 'white', + opacity: 0.5, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + }); + }); + test('can build line path props', () => { + const props = buildLineProps({ + index: 1, + linePath: 'M0,0L10,10Z', + color: 'red', + strokeWidth: 1, + opacity: 0.3, + geometryStyle: { + opacity: 0.5, + }, + }); + expect(props).toEqual({ + key: `line-1`, + data: 'M0,0L10,10Z', + stroke: 'red', + strokeWidth: 1, + lineCap: 'round', + lineJoin: 'round', + opacity: 0.5, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + }); + expect(props.fill).toBeFalsy(); + }); +}); + +describe('[canvas] Bar Geometries', () => { + test('can build bar props', () => { + const props = buildBarProps({ + index: 1, + x: 10, + y: 20, + width: 30, + height: 40, + fill: 'red', + stroke: 'blue', + strokeWidth: 1, + borderEnabled: true, + geometryStyle: { + opacity: 0.5, + }, + }); + expect(props).toEqual({ + key: `bar-1`, + x: 10, + y: 20, + width: 30, + height: 40, + fill: 'red', + stroke: 'blue', + strokeWidth: 1, + strokeEnabled: true, + strokeHitEnabled: false, + perfectDrawEnabled: false, + listening: false, + opacity: 0.5, + }); + }); +}); diff --git a/src/components/react_canvas/utils/rendering_props_utils.ts b/src/components/react_canvas/utils/rendering_props_utils.ts new file mode 100644 index 0000000000..4cc23101a9 --- /dev/null +++ b/src/components/react_canvas/utils/rendering_props_utils.ts @@ -0,0 +1,181 @@ +import { GeometryStyle } from '../../../lib/series/rendering'; +import { GlobalKonvaElementProps } from '../globals'; + +export function buildAreaPointProps({ + areaIndex, + pointIndex, + x, + y, + radius, + strokeWidth, + color, + opacity, +}: { + areaIndex: number; + pointIndex: number; + x: number; + y: number; + radius: number; + strokeWidth: number; + color: string; + opacity: number; +}) { + return { + key: `area-point-${areaIndex}-${pointIndex}`, + x, + y, + radius, + strokeWidth, + strokeEnabled: strokeWidth !== 0, + stroke: color, + fill: 'white', + opacity, + ...GlobalKonvaElementProps, + }; +} + +export function buildAreaProps({ + index, + areaPath, + color, + opacity, +}: { + index: number; + areaPath: string; + color: string; + opacity: number; +}) { + return { + key: `area-${index}`, + data: areaPath, + fill: color, + lineCap: 'round', + lineJoin: 'round', + opacity, + ...GlobalKonvaElementProps, + }; +} + +export function buildAreaLineProps({ + index, + linePath, + color, + strokeWidth, + geometryStyle, +}: { + index: number; + linePath: string; + color: string; + strokeWidth: number; + geometryStyle: GeometryStyle; +}) { + return { + key: `area-line-${index}`, + data: linePath, + stroke: color, + strokeWidth, + lineCap: 'round', + lineJoin: 'round', + ...geometryStyle, + ...GlobalKonvaElementProps, + }; +} + +export function buildBarProps({ + index, + x, + y, + width, + height, + fill, + stroke, + strokeWidth, + borderEnabled, + geometryStyle, +}: { + index: number; + x: number; + y: number; + width: number; + height: number; + fill: string; + stroke: string; + strokeWidth: number; + borderEnabled: boolean; + geometryStyle: GeometryStyle; +}) { + return { + key: `bar-${index}`, + x, + y, + width, + height, + fill, + strokeWidth, + stroke, + strokeEnabled: borderEnabled, + ...GlobalKonvaElementProps, + ...geometryStyle, + }; +} + +export function buildLinePointProps({ + lineIndex, + pointIndex, + x, + y, + radius, + strokeWidth, + color, + opacity, +}: { + lineIndex: number; + pointIndex: number; + x: number; + y: number; + radius: number; + strokeWidth: number; + color: string; + opacity: number; +}) { + return { + key: `line-point-${lineIndex}-${pointIndex}`, + x, + y, + radius, + stroke: color, + strokeWidth, + strokeEnabled: strokeWidth !== 0, + fill: 'white', + opacity, + ...GlobalKonvaElementProps, + }; +} + +export function buildLineProps({ + index, + linePath, + color, + strokeWidth, + opacity, + geometryStyle, +}: { + index: number; + linePath: string; + color: string; + strokeWidth: number; + opacity: number; + geometryStyle: GeometryStyle; +}) { + return { + key: `line-${index}`, + data: linePath, + stroke: color, + strokeWidth, + opacity, + lineCap: 'round', + lineJoin: 'round', + ...geometryStyle, + ...GlobalKonvaElementProps, + }; +}