Merge pull request #760 from Lemoncode/feature/#757-Add-stroke-style-properties

Feature/#757 add stroke style properties

Author: brauliodiez

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

@@ -61,7 +61,7 @@ export const BASIC_SHAPE: DefaultStyleShape = {
 };
 
 export const LOW_WIREFRAME_SHAPE = {
-  DEFAULT_STROKE_WIDTH: 6,
+  DEFAULT_STROKE_WIDTH: 4,
 };
 
 export const INPUT_SHAPE: DefaultStyleShape = {

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

@@ -1,13 +1,13 @@
 import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
-import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import {
+  fitSizeToShapeSizeRestrictions,
+  calculateShapeAdjustedDimensionsBasedOnStrokeHeight,
+} from '@/common/utils/shapes';
 import { Circle, Group } from 'react-konva';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import {
-  BASIC_SHAPE,
-  LOW_WIREFRAME_SHAPE,
-} from '../front-components/shape.const';
+import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const circleLowShapeRestrictions: ShapeSizeRestrictions = {
@@ -36,9 +36,18 @@ export const CircleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const radius = Math.min(restrictedWidth, restrictedHeight) / 2;
+  const { stroke, fill, strokeStyle, strokeWidth } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
 
-  const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+  const adjustedDimensions =
+    calculateShapeAdjustedDimensionsBasedOnStrokeHeight(
+      strokeWidth,
+      restrictedWidth,
+      restrictedHeight,
+      shapeType
+    );
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -49,15 +58,17 @@ export const CircleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   return (
     <Group {...commonGroupProps} {...shapeProps}>
-      <Circle
-        x={restrictedWidth / 2}
-        y={restrictedHeight / 2}
-        radius={radius}
-        stroke={stroke}
-        strokeWidth={LOW_WIREFRAME_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
-        dash={strokeStyle}
-      />
+      {adjustedDimensions.type === 'circleLow' && (
+        <Circle
+          x={adjustedDimensions.centerX}
+          y={adjustedDimensions.centerY}
+          radius={adjustedDimensions.adjustedRadius}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          fill={fill}
+          dash={strokeStyle}
+        />
+      )}
     </Group>
   );
 });

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

@@ -4,11 +4,9 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { ShapeProps } from '../shape.model';
 import { useGroupShapeProps } from '../mock-components.utils';
-import {
-  BASIC_SHAPE,
-  LOW_WIREFRAME_SHAPE,
-} from '../front-components/shape.const';
+import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { calculateShapeAdjustedDimensionsBasedOnStrokeHeight } from '@/common/utils/shapes';
 
 const EllipseLowShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 10,
@@ -44,7 +42,18 @@ export const EllipseLowShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { stroke, strokeStyle, strokeWidth } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
+
+  const adjustedDimensions =
+    calculateShapeAdjustedDimensionsBasedOnStrokeHeight(
+      strokeWidth,
+      restrictedWidth,
+      restrictedHeight,
+      shapeType
+    );
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -55,15 +64,17 @@ export const EllipseLowShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   return (
     <Group {...commonGroupProps} {...shapeProps}>
-      <Ellipse
-        x={0}
-        y={0}
-        radiusX={restrictedWidth}
-        radiusY={restrictedHeight}
-        stroke={stroke}
-        strokeWidth={LOW_WIREFRAME_SHAPE.DEFAULT_STROKE_WIDTH}
-        dash={strokeStyle}
-      />
+      {adjustedDimensions.type === 'ellipseLow' && (
+        <Ellipse
+          x={adjustedDimensions.centerX}
+          y={adjustedDimensions.centerY}
+          radiusX={adjustedDimensions.adjustedRadiusX}
+          radiusY={adjustedDimensions.adjustedRadiusY}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          dash={strokeStyle}
+        />
+      )}
     </Group>
   );
 });

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

@@ -42,7 +42,10 @@ export const HorizontalLineLowShape = forwardRef<any, ShapeProps>(
 
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+    const { stroke, strokeStyle, strokeWidth } = useShapeProps(
+      otherProps,
+      BASIC_SHAPE
+    );
 
     const commonGroupProps = useGroupShapeProps(
       props,
@@ -65,7 +68,7 @@ export const HorizontalLineLowShape = forwardRef<any, ShapeProps>(
           y={restrictedHeight / 2}
           points={[0, 0, restrictedWidth, 0]}
           stroke={stroke}
-          strokeWidth={4}
+          strokeWidth={strokeWidth}
           dash={strokeStyle}
         />
       </Group>

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

@@ -1,7 +1,10 @@
 import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
-import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import {
+  calculateShapeAdjustedDimensionsBasedOnStrokeHeight,
+  fitSizeToShapeSizeRestrictions,
+} from '@/common/utils/shapes';
 import { Group, Rect } from 'react-konva';
 import { useGroupShapeProps } from '../mock-components.utils';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
@@ -42,7 +45,18 @@ export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { stroke, strokeStyle, strokeWidth } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
+
+  const adjustedDimensions =
+    calculateShapeAdjustedDimensionsBasedOnStrokeHeight(
+      strokeWidth,
+      restrictedWidth,
+      restrictedHeight,
+      shapeType
+    );
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -53,14 +67,18 @@ export const RectangleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   return (
     <Group {...commonGroupProps} {...shapeProps}>
-      <Rect
-        width={restrictedWidth}
-        height={restrictedHeight}
-        stroke={stroke}
-        dash={strokeStyle}
-        strokeWidth={6}
-        fill="white"
-      />
+      {adjustedDimensions.type === 'rectangleLow' && (
+        <Rect
+          x={adjustedDimensions.adjustedX}
+          y={adjustedDimensions.adjustedY}
+          width={adjustedDimensions.adjustedWidth}
+          height={adjustedDimensions.adjustedHeight}
+          stroke={stroke}
+          dash={strokeStyle}
+          strokeWidth={strokeWidth}
+          fill="white"
+        />
+      )}
     </Group>
   );
 });

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

@@ -42,7 +42,10 @@ export const VerticalLineLowShape = forwardRef<any, ShapeProps>(
 
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+    const { stroke, strokeStyle, strokeWidth } = useShapeProps(
+      otherProps,
+      BASIC_SHAPE
+    );
 
     const commonGroupProps = useGroupShapeProps(
       props,
@@ -65,7 +68,7 @@ export const VerticalLineLowShape = forwardRef<any, ShapeProps>(
           y={0}
           points={[0, 0, 0, restrictedHeight]}
           stroke={stroke}
-          strokeWidth={4}
+          strokeWidth={strokeWidth}
           dash={strokeStyle}
         />
       </Group>

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

@@ -63,6 +63,11 @@ export const useShapeProps = (
     [otherProps?.strokeStyle]
   );
 
+  const strokeWidth = useMemo(
+    () => otherProps?.strokeWidth ?? defaultStyleShape.DEFAULT_STROKE_WIDTH,
+    [otherProps?.strokeWidth]
+  );
+
   const borderRadius = useMemo(() => {
     const radius = Number(otherProps?.borderRadius);
     return isNaN(radius) ? defaultStyleShape.DEFAULT_CORNER_RADIUS : radius;
@@ -93,6 +98,7 @@ export const useShapeProps = (
     fill,
     textColor,
     strokeStyle,
+    strokeWidth,
     borderRadius,
     isOn,
     progress,

src/common/utils/shapes/index.ts

@@ -1,2 +1,3 @@
 export * from './on-click-keyboard';
 export * from './shape-restrictions';
+export * from './shape-adjusted-dimensions';