Create an vertical scroll bar and place it under Front Components

src/common/components/front-components/index.ts

@@ -10,3 +10,4 @@ export * from './button-shape';
 export * from './timepickerinput-shape';
 export * from './radiobutton-shape';
 export * from './icon-shape';
+export * from './verticalscrollbar-shape';

src/common/components/front-components/verticalscrollbar-shape.tsx

@@ -0,0 +1,105 @@
+import { Group, Line, Rect } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+
+const VerticalScrollBarShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 100,
+  maxWidth: 20,
+  maxHeight: -1,
+  defaultWidth: 20,
+  defaultHeight: 250,
+};
+
+export const getVerticalScrollBarShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => VerticalScrollBarShapeSizeRestrictions;
+
+export const VerticalScrollBarShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        VerticalScrollBarShapeSizeRestrictions,
+        width,
+        height
+      );
+
+    const arrowHeight = 20;
+    const thumbHeight = restrictedHeight * 0.3; // Ajuste de la altura del thumb al 30% de la barra
+    const thumbY =
+      arrowHeight + (restrictedHeight - thumbHeight - arrowHeight * 2) / 2; // Centrar el thumb dentro del área disponible
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'verticalScrollBar')}
+      >
+        {/* Fondo de la barra de scroll */}
+        <Rect
+          x={0}
+          y={arrowHeight}
+          width={restrictedWidth}
+          height={restrictedHeight - arrowHeight * 2}
+          fill="#D0D0D0"
+          stroke="#A0A0A0"
+          strokeWidth={1}
+        />
+
+        {/* Flecha superior */}
+        <Rect
+          x={0}
+          y={6}
+          width={restrictedWidth}
+          height={arrowHeight}
+          fill="#E0E0E0"
+          stroke="#A0A0A0"
+          strokeWidth={1}
+        />
+
+        <Line
+          x={restrictedWidth / 2}
+          y={arrowHeight - 8}
+          points={[-2, 8, 0, 2, 4, 8]}
+          fill="black"
+          closed={true}
+        />
+
+        {/* Thumb de la barra de scroll */}
+        <Rect
+          x={0}
+          y={thumbY}
+          width={restrictedWidth}
+          height={thumbHeight}
+          fill="#C0C0C0"
+          stroke="#808080"
+          strokeWidth={1}
+        />
+
+        {/* Flecha inferior */}
+        <Rect
+          x={0}
+          y={restrictedHeight - arrowHeight - 6}
+          width={restrictedWidth}
+          height={arrowHeight}
+          fill="#E0E0E0"
+          stroke="#A0A0A0"
+          strokeWidth={1}
+        />
+
+        <Line
+          x={restrictedWidth / 2}
+          y={restrictedHeight - arrowHeight + 8}
+          points={[-4, -8, 0, -2, 4, -8]}
+          fill="black"
+          closed={true}
+        />
+      </Group>
+    );
+  }
+);

src/core/model/index.ts

@@ -47,7 +47,8 @@ export type ShapeType =
   | 'largeArrow'
   | 'bar'
   | 'triangle'
-  | 'image';
+  | 'image'
+  | 'verticalScrollBar';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   combobox: 'Combobox',
@@ -89,6 +90,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   icon: 'Icon',
   bar: 'Bar Chart',
   image: 'Image',
+  verticalScrollBar: 'Vertical Scroll Bar',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/pods/canvas/canvas.model.ts

@@ -19,6 +19,7 @@ import {
   getButtonShapeSizeRestrictions,
   getTimepickerInputShapeSizeRestrictions,
   getIconShapeSizeRestrictions,
+  getVerticalScrollBarShapeSizeRestrictions,
 } from '@/common/components/front-components';
 import {
   getBrowserWindowShapeSizeRestrictions,
@@ -244,6 +245,11 @@ export const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
         width: getImageShapeSizeRestrictions().defaultWidth,
         height: getImageShapeSizeRestrictions().defaultHeight,
       };
+    case 'verticalScrollBar':
+      return {
+        width: getVerticalScrollBarShapeSizeRestrictions().defaultWidth,
+        height: getVerticalScrollBarShapeSizeRestrictions().defaultHeight,
+      };
     default:
       console.warn(
         `** Shape ${shapeType} has not defined default size, check getDefaultSizeFromShape helper function`

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

@@ -15,6 +15,7 @@ import {
   renderLabel,
   renderRadioButton,
   renderIcon,
+  renderVerticalScrollBar,
 } from './simple-component';
 import {
   renderBrowserWindow,
@@ -134,6 +135,8 @@ export const renderShapeComponent = (
       return renderBarChart(shape, shapeRenderedProps);
     case 'image':
       return renderImage(shape, shapeRenderedProps);
+    case 'verticalScrollBar':
+      return renderVerticalScrollBar(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

src/pods/canvas/shape-renderer/simple-component/index.ts

@@ -12,3 +12,4 @@ export * from './timepickerinput.renderer';
 export * from './label.renderer';
 export * from './radiobutton.renderer';
 export * from './icon.renderer';
+export * from './verticalscrollbar.renderer';

src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx

@@ -0,0 +1,30 @@
+import { ShapeModel } from '@/core/model';
+import { ShapeRendererProps } from '../model';
+import { VerticalScrollBarShape } from '@/common/components/front-components';
+
+export const renderVerticalScrollBar = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <VerticalScrollBarShape
+      id={shape.id}
+      key={shape.id}
+      x={shape.x}
+      y={shape.y}
+      width={shape.width}
+      height={shape.height}
+      name="shape"
+      draggable
+      typeOfTransformer={shape.typeOfTransformer}
+      onSelected={handleSelected}
+      ref={shapeRefs.current[shape.id]}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+    />
+  );
+};

src/pods/component-gallery/component-gallery-data/index.ts

@@ -14,4 +14,5 @@ export const mockWidgetCollection: ItemInfo[] = [
   { thumbnailSrc: '/widgets/datepicker.svg', type: 'datepickerinput' },
   { thumbnailSrc: '/widgets/timepicker.svg', type: 'timepickerinput' },
   { thumbnailSrc: '/widgets/radiobutton.svg', type: 'radiobutton' },
+  { thumbnailSrc: '/widgets/verticalscrollbar.svg', type: 'verticalScrollBar' },
 ];