highlight-background.helpers.ts ➔ getButtonDimension - Code Metrics - Inspection of "Moves most of helper functions to separate modules..." - HLTech/judge-d-ui - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — master (#37)

unknown

created 2020-03-06 09:06 UTC

B

↳ Parent: src/overview/highlight-background/highlight-background.helpers.ts

Complexity

Conditions

Size

Total Lines	39
Code Lines	37

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	37
dl	0
loc	39
rs	8.9919
c	0
b	0
f	0
cc	2

import {
    selectDetailsButtonRect,
    selectDetailsButtonText,
    selectDetailsButtonWrapper,
    selectHighlightBackground,
    selectHighLightedNodes,
} from '../../utils/helpers/Selectors';
import { selectAll } from 'd3-selection';
import { BACKGROUND_HIGHLIGHT_OPACITY, BASE_FONT_SIZE, TRANSITION_DURATION } from '../../utils/AppConsts';
import { ZoomScaleStorage } from '../../utils/helpers/UserEventHelpers';
import { centerScreenToDimension, findGroupBackgroundDimension } from '../overview.helpers';

export function hideHighlightBackground() {
    const detailsButtonRectSelection = selectDetailsButtonRect();
    const detailsButtonTextSelection = selectDetailsButtonText();
    selectAll([selectHighlightBackground().node(), detailsButtonRectSelection.node(), detailsButtonTextSelection.node()])
        .transition()
        .duration(TRANSITION_DURATION)
        .style('opacity', 0)
        .end()
        .then(() => {
            selectDetailsButtonWrapper().lower();
        });
}

export function getButtonDimension(dimension: ReturnType<typeof findGroupBackgroundDimension>, scale: number) {
    if (!dimension) {
        return {
            buttonWidth: 0,
            buttonHeight: 0,
            buttonMarginBottom: 0,
            buttonMarginRight: 0,
            buttonX: 0,
            buttonY: 0,
            buttonRadius: 0,
            buttonTextFontSize: 0,
            buttonTextPositionX: 0,
            buttonTextPositionY: 0,
        };
    }
    const scaleMultiplier = 1 / scale;

    const buttonWidth = 100 * scaleMultiplier;
    const buttonHeight = 60 * scaleMultiplier;
    const buttonMarginBottom = 10 * scaleMultiplier;
    const buttonMarginRight = 40 * scaleMultiplier;
    const buttonX = dimension.x + dimension.width - buttonWidth - buttonMarginRight;
    const buttonY = dimension.y + dimension.height - buttonHeight - buttonMarginBottom;
    const buttonRadius = 5 * scaleMultiplier;
    const buttonTextFontSize = BASE_FONT_SIZE * scaleMultiplier;
    const buttonTextPositionX = dimension.x + dimension.width - buttonWidth / 2 - buttonMarginRight;
    const buttonTextPositionY = dimension.y + dimension.height - buttonHeight / 2 + 6 * scaleMultiplier - buttonMarginBottom;
    return {
        buttonWidth,
        buttonHeight,
        buttonMarginBottom,
        buttonMarginRight,
        buttonX,
        buttonY,
        buttonRadius,
        buttonTextFontSize,
        buttonTextPositionX,
        buttonTextPositionY,
    };
}

function showHighlightBackground(dimension: ReturnType<typeof findGroupBackgroundDimension>) {
    if (!dimension) {
        return;
    }
    const highlightBackground = selectHighlightBackground();
    const detailsButtonRectSelection = selectDetailsButtonRect();
    const detailsButtonTextSelection = selectDetailsButtonText();

    const isBackgroundActive = highlightBackground.style('opacity') === String(BACKGROUND_HIGHLIGHT_OPACITY);

    const scale = ZoomScaleStorage.getScale();

    const {
        buttonWidth,
        buttonHeight,
        buttonX,
        buttonY,
        buttonRadius,
        buttonTextFontSize,
        buttonTextPositionX,
        buttonTextPositionY,
    } = getButtonDimension(dimension, scale);

    const elementsNextAttributes = [
        {
            x: dimension.x,
            y: dimension.y,
            width: dimension.width,
            height: dimension.height,
            opacity: BACKGROUND_HIGHLIGHT_OPACITY,
        },
        {
            x: buttonX,
            y: buttonY,
            rx: buttonRadius,
            ry: buttonRadius,
            width: buttonWidth,
            height: buttonHeight,
            opacity: 1,
        },
        {
            fontSize: buttonTextFontSize,
            x: buttonTextPositionX,
            y: buttonTextPositionY,
            opacity: 1,
        },
    ];

    if (isBackgroundActive) {
        selectAll([highlightBackground.node(), detailsButtonRectSelection.node(), detailsButtonTextSelection.node()])
            .data(elementsNextAttributes)
            .transition()
            .duration(TRANSITION_DURATION)
            .attr('x', data => data.x)
            .attr('y', data => data.y)
            .attr('rx', data => data.rx || 0)
            .attr('ry', data => data.ry || 0)
            .attr('width', data => data.width || 0)
            .attr('height', data => data.height || 0)
            .attr('font-size', data => data.fontSize || 0);
    } else {
        selectDetailsButtonWrapper().raise();
        selectAll([highlightBackground.node(), detailsButtonRectSelection.node(), detailsButtonTextSelection.node()])
            .data(elementsNextAttributes)
            .attr('x', data => data.x)
            .attr('y', data => data.y)
            .attr('rx', data => data.rx || 0)
            .attr('ry', data => data.ry || 0)
            .attr('width', data => data.width || 0)
            .attr('height', data => data.height || 0)
            .attr('font-size', data => data.fontSize || 0)
            .transition()
            .duration(TRANSITION_DURATION)
            .style('opacity', data => data.opacity);
    }
}

export function zoomToHighLightedNodes() {
    const highlightedNodes = selectHighLightedNodes();
    const dimension = findGroupBackgroundDimension(highlightedNodes.data());

    centerScreenToDimension(dimension);
    showHighlightBackground(dimension);
}


1			import {
2			selectDetailsButtonRect,
3			selectDetailsButtonText,
4			selectDetailsButtonWrapper,
5			selectHighlightBackground,
6			selectHighLightedNodes,
7			} from '../../utils/helpers/Selectors';
8			import { selectAll } from 'd3-selection';
9			import { BACKGROUND_HIGHLIGHT_OPACITY, BASE_FONT_SIZE, TRANSITION_DURATION } from '../../utils/AppConsts';
10			import { ZoomScaleStorage } from '../../utils/helpers/UserEventHelpers';
11			import { centerScreenToDimension, findGroupBackgroundDimension } from '../overview.helpers';
12
13			export function hideHighlightBackground() {
14			const detailsButtonRectSelection = selectDetailsButtonRect();
15			const detailsButtonTextSelection = selectDetailsButtonText();
16			selectAll([selectHighlightBackground().node(), detailsButtonRectSelection.node(), detailsButtonTextSelection.node()])
17			.transition()
18			.duration(TRANSITION_DURATION)
19			.style('opacity', 0)
20			.end()
21			.then(() => {
22			selectDetailsButtonWrapper().lower();
23			});
24			}
25
26			export function getButtonDimension(dimension: ReturnType<typeof findGroupBackgroundDimension>, scale: number) {
27			if (!dimension) {
28			return {
29			buttonWidth: 0,
30			buttonHeight: 0,
31			buttonMarginBottom: 0,
32			buttonMarginRight: 0,
33			buttonX: 0,
34			buttonY: 0,
35			buttonRadius: 0,
36			buttonTextFontSize: 0,
37			buttonTextPositionX: 0,
38			buttonTextPositionY: 0,
39			};
40			}
41			const scaleMultiplier = 1 / scale;
42
43			const buttonWidth = 100 * scaleMultiplier;
44			const buttonHeight = 60 * scaleMultiplier;
45			const buttonMarginBottom = 10 * scaleMultiplier;
46			const buttonMarginRight = 40 * scaleMultiplier;
47			const buttonX = dimension.x + dimension.width - buttonWidth - buttonMarginRight;
48			const buttonY = dimension.y + dimension.height - buttonHeight - buttonMarginBottom;
49			const buttonRadius = 5 * scaleMultiplier;
50			const buttonTextFontSize = BASE_FONT_SIZE * scaleMultiplier;
51			const buttonTextPositionX = dimension.x + dimension.width - buttonWidth / 2 - buttonMarginRight;
52			const buttonTextPositionY = dimension.y + dimension.height - buttonHeight / 2 + 6 * scaleMultiplier - buttonMarginBottom;
53			return {
54			buttonWidth,
55			buttonHeight,
56			buttonMarginBottom,
57			buttonMarginRight,
58			buttonX,
59			buttonY,
60			buttonRadius,
61			buttonTextFontSize,
62			buttonTextPositionX,
63			buttonTextPositionY,
64			};
65			}
66
67			function showHighlightBackground(dimension: ReturnType<typeof findGroupBackgroundDimension>) {
68			if (!dimension) {
69			return;
70			}
71			const highlightBackground = selectHighlightBackground();
72			const detailsButtonRectSelection = selectDetailsButtonRect();
73			const detailsButtonTextSelection = selectDetailsButtonText();
74
75			const isBackgroundActive = highlightBackground.style('opacity') === String(BACKGROUND_HIGHLIGHT_OPACITY);
76
77			const scale = ZoomScaleStorage.getScale();
78
79			const {
80			buttonWidth,
81			buttonHeight,
82			buttonX,
83			buttonY,
84			buttonRadius,
85			buttonTextFontSize,
86			buttonTextPositionX,
87			buttonTextPositionY,
88			} = getButtonDimension(dimension, scale);
89
90			const elementsNextAttributes = [
91			{
92			x: dimension.x,
93			y: dimension.y,
94			width: dimension.width,
95			height: dimension.height,
96			opacity: BACKGROUND_HIGHLIGHT_OPACITY,
97			},
98			{
99			x: buttonX,
100			y: buttonY,
101			rx: buttonRadius,
102			ry: buttonRadius,
103			width: buttonWidth,
104			height: buttonHeight,
105			opacity: 1,
106			},
107			{
108			fontSize: buttonTextFontSize,
109			x: buttonTextPositionX,
110			y: buttonTextPositionY,
111			opacity: 1,
112			},
113			];
114
115			if (isBackgroundActive) {
116			selectAll([highlightBackground.node(), detailsButtonRectSelection.node(), detailsButtonTextSelection.node()])
117			.data(elementsNextAttributes)
118			.transition()
119			.duration(TRANSITION_DURATION)
120			.attr('x', data => data.x)
121			.attr('y', data => data.y)
122			.attr('rx', data => data.rx \|\| 0)
123			.attr('ry', data => data.ry \|\| 0)
124			.attr('width', data => data.width \|\| 0)
125			.attr('height', data => data.height \|\| 0)
126			.attr('font-size', data => data.fontSize \|\| 0);
127			} else {
128			selectDetailsButtonWrapper().raise();
129			selectAll([highlightBackground.node(), detailsButtonRectSelection.node(), detailsButtonTextSelection.node()])
130			.data(elementsNextAttributes)
131			.attr('x', data => data.x)
132			.attr('y', data => data.y)
133			.attr('rx', data => data.rx \|\| 0)
134			.attr('ry', data => data.ry \|\| 0)
135			.attr('width', data => data.width \|\| 0)
136			.attr('height', data => data.height \|\| 0)
137			.attr('font-size', data => data.fontSize \|\| 0)
138			.transition()
139			.duration(TRANSITION_DURATION)
140			.style('opacity', data => data.opacity);
141			}
142			}
143
144			export function zoomToHighLightedNodes() {
145			const highlightedNodes = selectHighLightedNodes();
146			const dimension = findGroupBackgroundDimension(highlightedNodes.data());
147
148			centerScreenToDimension(dimension);
149			showHighlightBackground(dimension);
150			}
151

HLTech / judge-d-ui

Pull Request — master (#37)

B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like