Merge pull request #778 from Lemoncode/feature/#713-add-adorner-to-mobile-device

Feature/#713 add adorner to mobile device

Author: brauliodiez

public/containers/mobile.svg

@@ -1,12 +1,14 @@
-import { forwardRef } from 'react';
-import { Group, Rect, Circle } from 'react-konva';
+import { forwardRef, useEffect, useState } from 'react';
+import { Group, Rect, Circle, Image, Text } from 'react-konva';
 import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { useGroupShapeProps } from '../mock-components.utils';
+import { loadSvgWithFill } from '@/common/utils/svg.utils';
+import { BASIC_SHAPE } from '../front-components/shape.const';
 
 const mobilePhoneShapeSizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 150,
+  minWidth: 200,
   minHeight: 150,
   maxWidth: 1000,
   maxHeight: 1000,
@@ -37,13 +39,68 @@ export const MobilePhoneShape = forwardRef<any, ShapeProps>((props, ref) => {
   const speakerRadius = 2;
   const buttonRadius = 9;
 
+  const [wifiIcon, setWifiIcon] = useState<HTMLImageElement | null>(null);
+  const [batteryIcon, setBatteryIcon] = useState<HTMLImageElement | null>(null);
+  const [signalIcon, setSignalIcon] = useState<HTMLImageElement | null>(null);
+  const [currentTime, setCurrentTime] = useState('');
+
+  const adornerIconSize = 20;
+  const adornerPadding = 5;
+  const adornerTotalWidth = adornerIconSize * 3 + 17 * 2 + 30;
+
+  // Calculate inner screen coordinates (excluding frame margins)
+  const screenX = margin + screenMargin; // Left edge of inner screen
+  const screenY = screenMargin * 3; // Top edge of inner screen
+  const screenWidth = restrictedWidth - 2 * margin - 2 * screenMargin; // Available width inside screen
+
+  // Position adorner in top-right corner of inner screen
+  const adornerStartX = screenX + screenWidth - adornerTotalWidth; // Right-aligned positioning
+  const adornerY = screenY + adornerPadding; // Top-aligned with padding
+
+  // Individual icon positions within the adorner
+  const wifiX = adornerStartX;
+  const signalX = adornerStartX + 17;
+  const batteryX = adornerStartX + 20 * 2;
+
+  const timeX = adornerStartX + 23 * 3;
+  const timeY = adornerY + 4;
+  const timeWidth = 40;
+
   const commonGroupProps = useGroupShapeProps(
     props,
     restrictedSize,
     shapeType,
     ref
   );
 
+  useEffect(() => {
+    loadSvgWithFill('/icons/wifi.svg', 'black').then(img => setWifiIcon(img));
+    loadSvgWithFill('/icons/cellsignal.svg', 'black').then(img =>
+      setSignalIcon(img)
+    );
+    loadSvgWithFill('/icons/batteryfull.svg', 'black').then(img =>
+      setBatteryIcon(img)
+    );
+  }, []);
+
+  useEffect(() => {
+    const updateTime = () => {
+      const now = new Date();
+      setCurrentTime(
+        now.toLocaleTimeString('es-ES', {
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: false,
+        })
+      );
+    };
+
+    updateTime();
+    const timer = setInterval(updateTime, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       {/* Mobile Frame */}
@@ -82,6 +139,53 @@ export const MobilePhoneShape = forwardRef<any, ShapeProps>((props, ref) => {
         fill="white"
       />
 
+      {/* Adorner */}
+
+      {/* Wifi */}
+      {wifiIcon && (
+        <Image
+          image={wifiIcon}
+          x={wifiX}
+          y={adornerY - 2}
+          width={adornerIconSize}
+          height={adornerIconSize}
+        />
+      )}
+
+      {/* Cell signal */}
+      {signalIcon && (
+        <Image
+          image={signalIcon}
+          x={signalX}
+          y={adornerY}
+          width={adornerIconSize}
+          height={adornerIconSize}
+        />
+      )}
+
+      {/* Battery */}
+      {batteryIcon && (
+        <Image
+          image={batteryIcon}
+          x={batteryX}
+          y={adornerY}
+          width={adornerIconSize}
+          height={adornerIconSize}
+        />
+      )}
+
+      {/* Current time */}
+      <Text
+        x={timeX}
+        y={timeY}
+        width={timeWidth}
+        height={adornerIconSize}
+        text={currentTime}
+        fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+        fontSize={14}
+        wrap="none"
+      />
+
       {/* Init button */}
       <Circle
         x={restrictedWidth / 2}