Fix: added outline to image on select

Author: Akalanka47000

src/components/controls/image.tsx

@@ -16,8 +16,8 @@ const ImageControls = () => {
   const onUpload = async (e) => {
     const f = e.target.files[0];
     if (!f) return;
-    if (f.size > 300000) {
-      alert("Image size should be less than 300kb");
+    if (f.size > 1024000) {
+      alert("Image size should be less than 1MB");
       return;
     }
     setFile(await toBase64(f));

src/components/workspace/elements/image.tsx

@@ -11,7 +11,7 @@ export interface IImageProps extends IImage {
 
 const Image: React.FC<IImageProps> = forwardRef(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ({ x, y, id, href, width, height, consumer, isSelected: _, element: __, ...props }, ref: any) => {
+  ({ x, y, id, href, width, height, consumer, isSelected, element: _, ...props }, ref: any) => {
     return (
       <image
         ref={ref}
@@ -23,8 +23,9 @@ const Image: React.FC<IImageProps> = forwardRef(
         height={height}
         {...props}
         className={twMerge(
-          props.className,
           "resizable fill-transparent object-cover",
+          isSelected && "outline outline-2 outline-blue-500 -outline-offset-2",
+          props.className,
           consumer.styles?.elements?.image?.base?.className
         )}
         preserveAspectRatio="none"

src/store/reducers/editor/index.ts

@@ -241,6 +241,7 @@ export const slice = createSlice({
       state.location = name ?? state.location;
       state.sections = sections ? [noSection, ...sections] : state.sections;
       state.initialViewBoxScale = data.workspace?.initialViewBoxScale;
+      state.initialViewBoxScaleForWidth = data.workspace?.initialViewBoxScaleForWidth;
       state.visibilityOffset = data.workspace?.visibilityOffset ?? state.visibilityOffset;
       Object.keys(data).forEach((key) => {
         state[key] = data[key] ?? state[key];