Skip to content

Commit 72cf941

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #760 from Lemoncode/feature/#757-Add-stroke-style-properties
Feature/#757 add stroke style properties
2 parents 823e5d4 + 1c31323 commit 72cf941

17 files changed

Lines changed: 715 additions & 45 deletions

‎src/common/components/mock-components/front-components/shape.const.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const BASIC_SHAPE: DefaultStyleShape = {
6161
};
6262

6363
export const LOW_WIREFRAME_SHAPE = {
64-
DEFAULT_STROKE_WIDTH: 6,
64+
DEFAULT_STROKE_WIDTH: 4,
6565
};
6666

6767
export const INPUT_SHAPE: DefaultStyleShape = {

‎src/common/components/mock-components/front-low-wireframes-components/circle-low-shape.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
22
import { forwardRef } from 'react';
33
import { ShapeProps } from '../shape.model';
4-
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
4+
import {
5+
fitSizeToShapeSizeRestrictions,
6+
calculateShapeAdjustedDimensionsBasedOnStrokeHeight,
7+
} from '@/common/utils/shapes';
58
import { Circle, Group } from 'react-konva';
69
import { useShapeProps } from '../../shapes/use-shape-props.hook';
7-
import {
8-
BASIC_SHAPE,
9-
LOW_WIREFRAME_SHAPE,
10-
} from '../front-components/shape.const';
10+
import { BASIC_SHAPE } from '../front-components/shape.const';
1111
import { useGroupShapeProps } from '../mock-components.utils';
1212

1313
const circleLowShapeRestrictions: ShapeSizeRestrictions = {
@@ -36,9 +36,18 @@ export const CircleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
3636

3737
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
3838

39-
const radius = Math.min(restrictedWidth, restrictedHeight) / 2;
39+
const { stroke, fill, strokeStyle, strokeWidth } = useShapeProps(
40+
otherProps,
41+
BASIC_SHAPE
42+
);
4043

41-
const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
44+
const adjustedDimensions =
45+
calculateShapeAdjustedDimensionsBasedOnStrokeHeight(
46+
strokeWidth,
47+
restrictedWidth,
48+
restrictedHeight,
49+
shapeType
50+
);
4251

4352
const commonGroupProps = useGroupShapeProps(
4453
props,
@@ -49,15 +58,17 @@ export const CircleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
4958

5059
return (
5160
<Group {...commonGroupProps} {...shapeProps}>
52-
<Circle
53-
x={restrictedWidth / 2}
54-
y={restrictedHeight / 2}
55-
radius={radius}
56-
stroke={stroke}
57-
strokeWidth={LOW_WIREFRAME_SHAPE.DEFAULT_STROKE_WIDTH}
58-
fill={fill}
59-
dash={strokeStyle}
60-
/>
61+
{adjustedDimensions.type === 'circleLow' && (
62+
<Circle
63+
x={adjustedDimensions.centerX}
64+
y={adjustedDimensions.centerY}
65+
radius={adjustedDimensions.adjustedRadius}
66+
stroke={stroke}
67+
strokeWidth={strokeWidth}
68+
fill={fill}
69+
dash={strokeStyle}
70+
/>
71+
)}
6172
</Group>
6273
);
6374
});

‎src/common/components/mock-components/front-low-wireframes-components/ellipse-low-shape.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
44
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
55
import { ShapeProps } from '../shape.model';
66
import { useGroupShapeProps } from '../mock-components.utils';
7-
import {
8-
BASIC_SHAPE,
9-
LOW_WIREFRAME_SHAPE,
10-
} from '../front-components/shape.const';
7+
import { BASIC_SHAPE } from '../front-components/shape.const';
118
import { useShapeProps } from '../../shapes/use-shape-props.hook';
9+
import { calculateShapeAdjustedDimensionsBasedOnStrokeHeight } from '@/common/utils/shapes';
1210

1311
const EllipseLowShapeRestrictions: ShapeSizeRestrictions = {
1412
minWidth: 10,
@@ -44,7 +42,18 @@ export const EllipseLowShape = forwardRef<any, ShapeProps>((props, ref) => {
4442

4543
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
4644

47-
const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
45+
const { stroke, strokeStyle, strokeWidth } = useShapeProps(
46+
otherProps,
47+
BASIC_SHAPE
48+
);
49+
50+
const adjustedDimensions =
51+
calculateShapeAdjustedDimensionsBasedOnStrokeHeight(
52+
strokeWidth,
53+
restrictedWidth,
54+
restrictedHeight,
55+
shapeType
56+
);
4857

4958
const commonGroupProps = useGroupShapeProps(
5059
props,
@@ -55,15 +64,17 @@ export const EllipseLowShape = forwardRef<any, ShapeProps>((props, ref) => {
5564

5665
return (
5766
<Group {...commonGroupProps} {...shapeProps}>
58-
<Ellipse
59-
x={0}
60-
y={0}
61-
radiusX={restrictedWidth}
62-
radiusY={restrictedHeight}
63-
stroke={stroke}
64-
strokeWidth={LOW_WIREFRAME_SHAPE.DEFAULT_STROKE_WIDTH}
65-
dash={strokeStyle}
66-
/>
67+
{adjustedDimensions.type === 'ellipseLow' && (
68+
<Ellipse
69+
x={adjustedDimensions.centerX}
70+
y={adjustedDimensions.centerY}
71+
radiusX={adjustedDimensions.adjustedRadiusX}
72+
radiusY={adjustedDimensions.adjustedRadiusY}
73+
stroke={stroke}
74+
strokeWidth={strokeWidth}
75+
dash={strokeStyle}
76+
/>
77+
)}
6778
</Group>
6879
);
6980
});

‎src/common/components/mock-components/front-low-wireframes-components/horizontal-line-low-shape.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@ export const HorizontalLineLowShape = forwardRef<any, ShapeProps>(
4242

4343
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
4444

45-
const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
45+
const { stroke, strokeStyle, strokeWidth } = useShapeProps(
46+
otherProps,
47+
BASIC_SHAPE
48+
);
4649

4750
const commonGroupProps = useGroupShapeProps(
4851
props,
@@ -65,7 +68,7 @@ export const HorizontalLineLowShape = forwardRef<any, ShapeProps>(
6568
y={restrictedHeight / 2}
6669
points={[0, 0, restrictedWidth, 0]}
6770
stroke={stroke}
68-
strokeWidth={4}
71+
strokeWidth={strokeWidth}
6972
dash={strokeStyle}
7073
/>
7174
</Group>

‎src/common/components/mock-components/front-low-wireframes-components/rectangle-low-shape.tsx‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
22
import { forwardRef } from 'react';
33
import { ShapeProps } from '../shape.model';
4-
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
4+
import {
5+
calculateShapeAdjustedDimensionsBasedOnStrokeHeight,
6+
fitSizeToShapeSizeRestrictions,
7+
} from '@/common/utils/shapes';
58
import { Group, Rect } from 'react-konva';
69
import { useGroupShapeProps } from '../mock-components.utils';
710
import { useShapeProps } from '../../shapes/use-shape-props.hook';
@@ -42,7 +45,18 @@ export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
4245

4346
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
4447

45-
const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
48+
const { stroke, strokeStyle, strokeWidth } = useShapeProps(
49+
otherProps,
50+
BASIC_SHAPE
51+
);
52+
53+
const adjustedDimensions =
54+
calculateShapeAdjustedDimensionsBasedOnStrokeHeight(
55+
strokeWidth,
56+
restrictedWidth,
57+
restrictedHeight,
58+
shapeType
59+
);
4660

4761
const commonGroupProps = useGroupShapeProps(
4862
props,
@@ -53,14 +67,18 @@ export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
5367

5468
return (
5569
<Group {...commonGroupProps} {...shapeProps}>
56-
<Rect
57-
width={restrictedWidth}
58-
height={restrictedHeight}
59-
stroke={stroke}
60-
dash={strokeStyle}
61-
strokeWidth={6}
62-
fill="white"
63-
/>
70+
{adjustedDimensions.type === 'rectangleLow' && (
71+
<Rect
72+
x={adjustedDimensions.adjustedX}
73+
y={adjustedDimensions.adjustedY}
74+
width={adjustedDimensions.adjustedWidth}
75+
height={adjustedDimensions.adjustedHeight}
76+
stroke={stroke}
77+
dash={strokeStyle}
78+
strokeWidth={strokeWidth}
79+
fill="white"
80+
/>
81+
)}
6482
</Group>
6583
);
6684
});

‎src/common/components/mock-components/front-low-wireframes-components/vertical-line-low-shape.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@ export const VerticalLineLowShape = forwardRef<any, ShapeProps>(
4242

4343
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
4444

45-
const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
45+
const { stroke, strokeStyle, strokeWidth } = useShapeProps(
46+
otherProps,
47+
BASIC_SHAPE
48+
);
4649

4750
const commonGroupProps = useGroupShapeProps(
4851
props,
@@ -65,7 +68,7 @@ export const VerticalLineLowShape = forwardRef<any, ShapeProps>(
6568
y={0}
6669
points={[0, 0, 0, restrictedHeight]}
6770
stroke={stroke}
68-
strokeWidth={4}
71+
strokeWidth={strokeWidth}
6972
dash={strokeStyle}
7073
/>
7174
</Group>

‎src/common/components/shapes/use-shape-props.hook.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ export const useShapeProps = (
6363
[otherProps?.strokeStyle]
6464
);
6565

66+
const strokeWidth = useMemo(
67+
() => otherProps?.strokeWidth ?? defaultStyleShape.DEFAULT_STROKE_WIDTH,
68+
[otherProps?.strokeWidth]
69+
);
70+
6671
const borderRadius = useMemo(() => {
6772
const radius = Number(otherProps?.borderRadius);
6873
return isNaN(radius) ? defaultStyleShape.DEFAULT_CORNER_RADIUS : radius;
@@ -93,6 +98,7 @@ export const useShapeProps = (
9398
fill,
9499
textColor,
95100
strokeStyle,
101+
strokeWidth,
96102
borderRadius,
97103
isOn,
98104
progress,

‎src/common/utils/shapes/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './on-click-keyboard';
22
export * from './shape-restrictions';
3+
export * from './shape-adjusted-dimensions';

0 commit comments

Comments
 (0)