From df2d7257a1ced59cd600ba8b43126dbc8a35ba47 Mon Sep 17 00:00:00 2001 From: manugallegob Date: Tue, 20 Aug 2024 16:07:51 +0200 Subject: [PATCH] Create an vertical scroll bar and place it under Front Components --- public/widgets/verticalscrollbar.svg | 15 +++ .../components/front-components/index.ts | 1 + .../verticalscrollbar-shape.tsx | 105 ++++++++++++++++++ src/core/model/index.ts | 4 +- src/pods/canvas/canvas.model.ts | 6 + src/pods/canvas/shape-renderer/index.tsx | 3 + .../shape-renderer/simple-component/index.ts | 1 + .../verticalscrollbar.renderer.tsx | 30 +++++ .../component-gallery-data/index.ts | 1 + 9 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 public/widgets/verticalscrollbar.svg create mode 100644 src/common/components/front-components/verticalscrollbar-shape.tsx create mode 100644 src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx diff --git a/public/widgets/verticalscrollbar.svg b/public/widgets/verticalscrollbar.svg new file mode 100644 index 00000000..c76dfe86 --- /dev/null +++ b/public/widgets/verticalscrollbar.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/common/components/front-components/index.ts b/src/common/components/front-components/index.ts index 0c13f468..f102f3e4 100644 --- a/src/common/components/front-components/index.ts +++ b/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'; diff --git a/src/common/components/front-components/verticalscrollbar-shape.tsx b/src/common/components/front-components/verticalscrollbar-shape.tsx new file mode 100644 index 00000000..256d10dd --- /dev/null +++ b/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( + ({ 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 ( + onSelected(id, 'verticalScrollBar')} + > + {/* Fondo de la barra de scroll */} + + + {/* Flecha superior */} + + + + + {/* Thumb de la barra de scroll */} + + + {/* Flecha inferior */} + + + + + ); + } +); diff --git a/src/core/model/index.ts b/src/core/model/index.ts index 4cb1f5a5..f26fcf5c 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -47,7 +47,8 @@ export type ShapeType = | 'largeArrow' | 'bar' | 'triangle' - | 'image'; + | 'image' + | 'verticalScrollBar'; export const ShapeDisplayName: Record = { combobox: 'Combobox', @@ -89,6 +90,7 @@ export const ShapeDisplayName: Record = { icon: 'Icon', bar: 'Bar Chart', image: 'Image', + verticalScrollBar: 'Vertical Scroll Bar', }; export type EditType = 'input' | 'textarea' | 'imageupload'; diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts index 56901576..062df9b4 100644 --- a/src/pods/canvas/canvas.model.ts +++ b/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` diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx index 8fe4ca30..4b637544 100644 --- a/src/pods/canvas/shape-renderer/index.tsx +++ b/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); } diff --git a/src/pods/canvas/shape-renderer/simple-component/index.ts b/src/pods/canvas/shape-renderer/simple-component/index.ts index e7873033..401e9fa5 100644 --- a/src/pods/canvas/shape-renderer/simple-component/index.ts +++ b/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'; diff --git a/src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx new file mode 100644 index 00000000..08b69084 --- /dev/null +++ b/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 ( + + ); +}; diff --git a/src/pods/component-gallery/component-gallery-data/index.ts b/src/pods/component-gallery/component-gallery-data/index.ts index 44ca81e0..0b7c680f 100644 --- a/src/pods/component-gallery/component-gallery-data/index.ts +++ b/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' }, ];