Skip to content

Commit 5bb0d20

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #803 from Lemoncode/dev
input stepper
2 parents e5b64f7 + 6456c57 commit 5bb0d20

File tree

13 files changed

+213
-19
lines changed

13 files changed

+213
-19
lines changed

‎public/rich-components/input-stepper.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
splitCSVContentIntoRows,
1111
} from '@/common/utils/active-element-selector.utils';
1212
import { useGroupShapeProps } from '../../mock-components.utils';
13-
import { useResizeOnFontSizeChange } from '../../front-text-components/front-text-hooks/resize-fontsize-change.hook';
1413

1514
const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
1615
minWidth: 200,
@@ -42,7 +41,7 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
4241
const csvData = splitCSVContentIntoRows(text);
4342
const headers = extractCSVHeaders(csvData[0]);
4443
const itemLabels = headers.map(header => header.text);
45-
const verticalPadding = 8;
44+
4645
const numberOfItems = itemLabels.length;
4746
const itemSpacing = 10;
4847

@@ -55,15 +54,10 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
5554
const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1);
5655
const itemWidth = totalMargins / numberOfItems;
5756

58-
const {
59-
stroke,
60-
strokeStyle,
61-
fill,
62-
textColor,
63-
borderRadius,
64-
fontSize,
65-
fontVariant,
66-
} = useShapeProps(otherProps, BASIC_SHAPE);
57+
const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
58+
otherProps,
59+
BASIC_SHAPE
60+
);
6761

6862
const itemVerticalPadding = 4;
6963

@@ -75,7 +69,7 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
7569
shapeType,
7670
ref
7771
);
78-
useResizeOnFontSizeChange(id, { x, y }, text, fontSize, fontVariant);
72+
7973
return (
8074
<Group {...commonGroupProps} {...shapeProps}>
8175
<Rect
@@ -96,21 +90,20 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
9690
x={itemSpacing * (index + 1) + itemWidth * index}
9791
y={itemVerticalPadding}
9892
width={itemWidth}
99-
height={restrictedHeight - verticalPadding}
93+
height={restrictedHeight - 2 * itemVerticalPadding}
10094
fill={index === activeSelected ? 'lightblue' : fill}
10195
/>
10296
<Text
10397
x={itemSpacing * (index + 1) + itemWidth * index}
104-
y={restrictedHeight / 2 - fontSize / 2}
98+
y={restrictedHeight / 2 - 8}
10599
text={header}
106100
fontFamily="Arial"
107-
fontSize={fontSize}
101+
fontSize={16}
108102
fill={textColor}
109103
width={itemWidth}
110104
align="center"
111105
wrap="none"
112106
ellipsis={true}
113-
fontVariant={fontVariant}
114107
/>
115108
</Group>
116109
))}

‎src/common/components/mock-components/front-rich-components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from './accordion';
22
export * from './breadcrumb/breadcrumb';
33
export * from './pie-chart';
44
export * from './horizontal-menu/horizontal-menu';
5+
export * from './input-stepper';
56
export * from './map-chart';
67
export * from './video-player';
78
export * from './bar-chart';

‎src/common/components/mock-components/front-rich-components/input-stepper.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { forwardRef } from 'react';
2+
import { Group, Rect, Text } from 'react-konva';
3+
import { ShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
4+
import { useGroupShapeProps } from '../mock-components.utils';
5+
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
6+
import { ShapeType } from '@/core/model';
7+
import { ShapeProps } from '../shape.model';
8+
import { useShapeProps } from '../../shapes/use-shape-props.hook';
9+
import { INPUT_SHAPE } from '../front-components/shape.const';
10+
11+
// Size restrictions (igual patrón que file-tree)
12+
export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
13+
minWidth: 80,
14+
minHeight: 24,
15+
maxWidth: -1,
16+
maxHeight: -1,
17+
defaultWidth: 120,
18+
defaultHeight: 32,
19+
};
20+
21+
export const getInputStepperShapeSizeRestrictions = (): ShapeSizeRestrictions =>
22+
inputStepperShapeRestrictions;
23+
24+
export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
25+
const { x, y, width, height, text, onSelect, otherProps, id, ...shapeProps } =
26+
props;
27+
28+
const inputWidth = width - 30; // Reservar espacio para el stepper
29+
const buttonHeight = height / 2;
30+
31+
const restrictedSize = fitSizeToShapeSizeRestrictions(
32+
inputStepperShapeRestrictions,
33+
width,
34+
height
35+
);
36+
37+
const shapeType: ShapeType = 'input-stepper';
38+
39+
const commonGroupProps = useGroupShapeProps(
40+
props,
41+
restrictedSize,
42+
shapeType,
43+
ref
44+
);
45+
const { stroke, textColor, strokeStyle, fill, strokeWidth } = useShapeProps(
46+
otherProps,
47+
INPUT_SHAPE
48+
);
49+
50+
const { width: restrictedWidth } = restrictedSize;
51+
52+
return (
53+
<Group {...commonGroupProps} {...shapeProps}>
54+
{/* Caja del input */}
55+
<Rect
56+
x={0}
57+
y={0}
58+
width={restrictedWidth}
59+
height={height}
60+
fill={fill}
61+
stroke={stroke}
62+
strokeWidth={strokeWidth}
63+
dash={strokeStyle}
64+
cornerRadius={0} // Sin bordes redondeados
65+
/>
66+
67+
{/* Texto del input */}
68+
<Text
69+
x={0} // Alinear a la derecha
70+
y={height / 2 - 8} // Centrar verticalmente
71+
width={restrictedWidth}
72+
text={text}
73+
fontFamily="Arial"
74+
fontSize={16}
75+
fill={textColor}
76+
align="center"
77+
wrap="none"
78+
/>
79+
80+
{/* Botón de incremento (flecha arriba) */}
81+
<Group x={inputWidth} y={0}>
82+
<Rect
83+
x={0}
84+
y={0}
85+
width={30}
86+
height={buttonHeight}
87+
fill="lightgrey"
88+
stroke={stroke}
89+
strokeWidth={strokeWidth}
90+
dash={strokeStyle}
91+
/>
92+
<Text
93+
x={10}
94+
y={buttonHeight / 2 - 8}
95+
text="▲"
96+
fontFamily="Arial"
97+
fontSize={14}
98+
fill={textColor}
99+
/>
100+
</Group>
101+
102+
{/* Botón de decremento (flecha abajo) */}
103+
<Group x={inputWidth} y={buttonHeight}>
104+
<Rect
105+
x={0}
106+
y={0}
107+
width={30}
108+
height={buttonHeight}
109+
fill="lightgrey"
110+
stroke={stroke}
111+
strokeWidth={strokeWidth}
112+
dash={strokeStyle}
113+
/>
114+
<Text
115+
x={10}
116+
y={buttonHeight / 2 - 8}
117+
text="▼"
118+
fontFamily="Arial"
119+
fontSize={14}
120+
fill={textColor}
121+
/>
122+
</Group>
123+
</Group>
124+
);
125+
});
126+
127+
export default InputWithStepper;

‎src/core/model/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export type ShapeType =
3838
| 'accordion'
3939
| 'pie'
4040
| 'horizontal-menu'
41+
| 'input-stepper'
4142
| 'breadcrumb'
4243
| 'map'
4344
| 'circle'
@@ -130,6 +131,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
130131
link: 'Link',
131132
triangle: 'Triangle',
132133
'horizontal-menu': 'Horizontal Menu',
134+
'input-stepper': 'Input Stepper',
133135
largeArrow: 'Large Arrow',
134136
icon: 'Icon',
135137
bar: 'Bar Chart',
@@ -238,3 +240,8 @@ export interface ShapeModel {
238240
text?: string;
239241
otherProps?: OtherProps;
240242
}
243+
244+
export interface inputStepper {
245+
id: string;
246+
min: number;
247+
}

‎src/pods/canvas/model/inline-editable.model.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const inlineEditableShapes = new Set<ShapeType>([
4040
'gauge',
4141
'loading-indicator',
4242
'fileTree',
43+
'input-stepper',
4344
]);
4445

4546
// Check if a shape type allows inline editing
@@ -62,6 +63,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
6263
'listbox',
6364
'horizontal-menu',
6465
'vertical-menu',
66+
'input-stepper',
6567
'heading1',
6668
'heading2',
6769
'heading3',
@@ -125,6 +127,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
125127
browser: 'https://example.com',
126128
modalDialog: 'Title here...',
127129
'loading-indicator': 'Loading...',
130+
'input-stepper': '0',
128131
};
129132

130133
export const generateDefaultTextValue = (

‎src/pods/canvas/model/shape-other-props.utils.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,13 @@ export const generateDefaultOtherProps = (
4848
strokeStyle: [],
4949
borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`,
5050
activeElement: 0,
51-
fontSize: FONT_SIZE_VALUES.NORMALTEXT,
52-
fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
51+
};
52+
case 'input-stepper':
53+
return {
54+
stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
55+
backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
56+
textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
57+
strokeStyle: [],
5358
};
5459
case 'datepickerinput':
5560
case 'timepickerinput':

‎src/pods/canvas/model/shape-size.mapper.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// src/common/shape-utils/shapeSizeMap.ts
22
import { ShapeType, ShapeSizeRestrictions } from '@/core/model';
3+
import { getInputStepperShapeSizeRestrictions } from '@/common/components/mock-components/front-rich-components/input-stepper';
34
import {
45
getButtonShapeSizeRestrictions,
56
getCheckboxShapeSizeRestrictions,
@@ -128,6 +129,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
128129
postit: getPostItShapeSizeRestrictions,
129130
pie: getPieChartShapeSizeRestrictions,
130131
'horizontal-menu': getHorizontalMenuShapeSizeRestrictions,
132+
'input-stepper': getInputStepperShapeSizeRestrictions,
131133
'vertical-menu': getVerticalMenuShapeSizeRestrictions,
132134
breadcrumb: getBreadcrumbShapeSizeRestrictions,
133135
map: getMapChartShapeSizeRestrictions,
@@ -172,9 +174,9 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
172174
rectangleLow: getRectangleLowShapeRestrictions,
173175
circleLow: getCircleLowShapeSizeRestrictions,
174176
textScribbled: getTextScribbledShapeRestrictions,
175-
paragraphScribbled: getParagraphScribbledShapeRestrictions,
176177
fabButton: getFabButtonShapeSizeRestrictions,
177178
fileTree: getFileTreeShapeSizeRestrictions,
179+
paragraphScribbled: getParagraphScribbledShapeRestrictions,
178180
};
179181

180182
export default shapeSizeMap;

‎src/pods/canvas/model/transformer.model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
7171
case 'buttonBar':
7272
case 'slider':
7373
case 'chip':
74+
case 'input-stepper':
7475
return ['middle-left', 'middle-right'];
7576
case 'verticalLine':
7677
case 'verticalScrollBar':

‎src/pods/canvas/shape-renderer/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
} from './simple-container';
3030
import {
3131
renderVideoPlayer,
32+
renderInputStepper,
3233
renderAccordion,
3334
renderHorizontalMenu,
3435
renderPieChart,
@@ -153,6 +154,8 @@ export const renderShapeComponent = (
153154
return renderTriangle(shape, shapeRenderedProps);
154155
case 'horizontal-menu':
155156
return renderHorizontalMenu(shape, shapeRenderedProps);
157+
case 'input-stepper':
158+
return renderInputStepper(shape, shapeRenderedProps);
156159
case 'vertical-menu':
157160
return renderVerticalMenuShape(shape, shapeRenderedProps);
158161
case 'breadcrumb':

0 commit comments

Comments
 (0)