Merge pull request #708 from Lemoncode/dev

loading indicator

Author: brauliodiez

public/assets/iria-carballo.jpeg

@@ -14,5 +14,6 @@ export * from './appBar';
 export * from './buttonBar/buttonBar';
 export * from './tabsbar';
 export * from './audio-player';
+export * from './loading-indicator';
 export * from './videoconference';
 export * from './togglelightdark-shape';

public/rich-components/loading-indicator.svg

@@ -0,0 +1,91 @@
+import { useRef, forwardRef } from 'react';
+import { Group, Rect, Text, Circle } from 'react-konva';
+import Konva from 'konva';
+import { ShapeProps } from '../shape.model';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const LoadIndicatorSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 200,
+  minHeight: 100,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 200,
+  defaultHeight: 100,
+};
+
+const shapeType: ShapeType = 'loading-indicator';
+
+export const getLoadIndicatorSizeRestrictions = (): ShapeSizeRestrictions =>
+  LoadIndicatorSizeRestrictions;
+
+export const LoadIndicator = forwardRef<any, ShapeProps>((props, ref) => {
+  const { x, y, width, height, otherProps, ...shapeProps } = props;
+
+  const restrictedSize = {
+    width: width || LoadIndicatorSizeRestrictions.defaultWidth,
+    height: height || LoadIndicatorSizeRestrictions.defaultHeight,
+  };
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const colors = ['#666', '#888', '#aaa', '#ccc'];
+  const circlesRef = useRef<Array<Konva.Circle | null>>([]);
+
+  const { textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  const circleRadius = Math.min(restrictedWidth / 10, 15);
+  const circleSpacing = restrictedWidth / (colors.length + 1);
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps} draggable>
+      {/* Load Indicator Background */}
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+      />
+
+      {/* Animated Circles */}
+      {colors.map((color, index) => (
+        <Circle
+          key={index}
+          ref={el => (circlesRef.current[index] = el)}
+          x={circleSpacing * (index + 1)}
+          y={restrictedHeight / 2}
+          radius={circleRadius}
+          fill={color}
+          stroke="#000"
+          strokeWidth={2}
+        />
+      ))}
+
+      {/* Loading Text */}
+      <Text
+        x={0}
+        y={restrictedHeight - 25}
+        width={restrictedWidth}
+        text={props.text || 'Loading...'}
+        fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+        fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE}
+        fill={textColor}
+        align="center"
+        ellipsis={true}
+        wrap="none"
+      />
+    </Group>
+  );
+});
+
+export default LoadIndicator;

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

@@ -71,6 +71,8 @@ export type ShapeType =
   | 'slider'
   | 'link'
   | 'cilinder'
+  | 'richtext'
+  | 'loading-indicator'
   | 'videoconference'
   | 'richtext';
 
@@ -134,6 +136,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   slider: 'Slider',
   richtext: 'Rich Text',
   cilinder: 'Cilinder',
+  'loading-indicator': 'Loading',
   videoconference: 'Videoconference',
 };
 

src/common/components/mock-components/front-rich-components/loading-indicator.tsx

@@ -136,17 +136,23 @@ export const memberList: Member[] = [
     urlLinkedin: 'https://www.linkedin.com/in/sergioelmoreno/',
     image: './assets/sergio-del-campo.jpg',
   },
-
   {
     id: '18',
+    name: 'Iria',
+    surname: 'Carballo',
+    urlLinkedin: 'https://www.linkedin.com/in/iria-carballo/',
+    image: './assets/iria-carballo.jpeg',
+  },
+  {
+    id: '19',
     name: 'Gabriel',
     surname: 'Ionut',
     urlLinkedin: 'https://www.linkedin.com/in/gabriel-ionut-birsan-b14816307/',
     image: './assets/gabriel-ionut.jpeg',
   },
 
   {
-    id: '19',
+    id: '20',
     name: 'Antonio',
     surname: 'Contreras',
     urlLinkedin:
@@ -155,7 +161,7 @@ export const memberList: Member[] = [
   },
 
   {
-    id: '20',
+    id: '21',
     name: 'Braulio',
     surname: 'Diez',
     urlLinkedin: 'https://www.linkedin.com/in/brauliodiez/',

src/core/model/index.ts

@@ -36,6 +36,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'datepickerinput',
   'browser',
   'modalDialog',
+  'loading-indicator',
 ]);
 
 // Check if a shape type allows inline editing
@@ -76,6 +77,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'datepickerinput',
   'browser',
   'modalDialog',
+  'loading-indicator',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -113,6 +115,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   datepickerinput: new Date().toLocaleDateString(),
   browser: 'https://example.com',
   modalDialog: 'Title here...',
+  'loading-indicator': 'Loading...',
 };
 
 export const generateDefaultTextValue = (

src/pods/about/members.ts

@@ -52,6 +52,7 @@ import {
   getCalendarShapeSizeRestrictions,
   getHorizontalMenuShapeSizeRestrictions,
   getLineChartShapeSizeRestrictions,
+  getLoadIndicatorSizeRestrictions,
   getMapChartShapeSizeRestrictions,
   getModalShapeSizeRestrictions,
   getPieChartShapeSizeRestrictions,
@@ -145,6 +146,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   slider: getSliderShapeSizeRestrictions,
   audioPlayer: getAudioPlayerShapeSizeRestrictions,
   cilinder: getCilinderShapeSizeRestrictions,
+  'loading-indicator': getLoadIndicatorSizeRestrictions,
   videoconference: getVideoconferenceShapeSizeRestrictions,
 };
 

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

@@ -64,6 +64,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'link':
     case 'horizontalScrollBar':
     case 'appBar':
+    case 'loading-indicator':
     case 'buttonBar':
     case 'slider':
       return ['middle-left', 'middle-right'];

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

@@ -70,6 +70,7 @@ import { renderSmalltext } from './simple-text-components/smalltext.renderer';
 import { renderImage } from './simple-basic-shapes/image.renderer';
 import { renderCalendar } from './simple-rich-components/calendar.renderer';
 import { renderAppBar } from './simple-rich-components/appBar.renderer';
+import { renderLoadingIndicator } from './simple-rich-components/loading-indicator.renderer';
 
 export const renderShapeComponent = (
   shape: ShapeModel,
@@ -192,6 +193,8 @@ export const renderShapeComponent = (
       return renderSlider(shape, shapeRenderedProps);
     case 'cilinder':
       return renderCilinder(shape, shapeRenderedProps);
+    case 'loading-indicator':
+      return renderLoadingIndicator(shape, shapeRenderedProps);
     case 'videoconference':
       return renderVideoconference(shape, shapeRenderedProps);
     default: