Image Conponent Enhancements v1

FalkWolsky · FalkWolsky · commit 02d04c0538aa · 2025-01-11T13:33:38.000+01:00
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -34,23 +34,58 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { StringControl } from "../controls/codeControl";
+import { PositionControl } from "comps/controls/dropdownControl";
 
-const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
+const Container = styled.div<{ 
+  $style: ImageStyleType | undefined, 
+  $animationStyle: AnimationStyleType,
+  $clipPath: string,
+  $enableOverflow: boolean,
+  $overflow: string,
+  $positionX: string,
+  $positionY: string,
+  $aspectRatio: string | undefined,
+  $placement: string // New property to control image placement
+}>`
   height: 100%;
   width: 100%;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  .ant-image,
-  img {
-    width: 100%;
-    height: 100%;
-  }
+  align-items: ${(props) =>
+    props.$placement.includes("bottom")
+      ? "flex-end"
+      : props.$placement.includes("top")
+      ? "flex-start"
+      : "center"};
+  justify-content: ${(props) =>
+    props.$placement.includes("right")
+      ? "flex-end"
+      : props.$placement.includes("left")
+      ? "flex-start"
+      : "center"};
+  overflow: ${(props) => (props.$enableOverflow ? props.$overflow : "hidden")};
 
+  .ant-image,
   img {
-    object-fit: contain;
-    pointer-events: auto;
-    ${props=>props.$animationStyle}
+    ${(props) =>
+      props.$enableOverflow
+        ? `
+        aspect-ratio: ${props.$aspectRatio};
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      `
+        : `
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      `}
+    
+    object-position: ${(props) => `${props.$positionX} ${props.$positionY}`};
+    ${props => props.$clipPath && `clip-path: ${props.$clipPath};`};
+    ${props => props.$style?.opacity !== undefined && `opacity: ${props.$style?.opacity};`};
+    ${props => props.$animationStyle};
   }
 
   ${(props) => props.$style && getStyle(props.$style)}
@@ -60,6 +95,7 @@ const getStyle = (style: ImageStyleType) => {
   return css`
     img {
       border: ${(props) => (style.borderWidth ? style.borderWidth : "1px")} solid ${style.border};
+      box-shadow: ${props=>`${style?.boxShadow} ${style?.boxShadowColor}`};
       border-radius: ${style.radius};
       margin: ${style.margin};
       padding: ${style.padding};
@@ -107,8 +143,6 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
 
   // on safari
   const setStyle = (height: string, width: string) => {
-    // console.log(width, height);
-
     const img = imgRef.current;
     const imgDiv = img?.getElementsByTagName("div")[0];
     const imgCurrent = img?.getElementsByTagName("img")[0];
@@ -123,7 +157,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
   const onResize = () => {
     const img = imgRef.current;
     const container = conRef.current;
-    if (!img?.clientWidth || !img?.clientHeight || props.autoHeight || !width) {
+    if (!props.enableOverflow && (!img?.clientWidth || !img?.clientHeight || props.autoHeight || !width)) {
       return;
     }
     // fixme border style bug on safari
@@ -136,11 +170,23 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
       setStyle("auto", "100%");
     }
   };
+
   return (
     <ReactResizeDetector
       onResize={onResize}
       render={() => (
-        <Container ref={conRef} $style={props.style} $animationStyle={props.animationStyle}>
+        <Container 
+          ref={conRef}
+          $style={props.style}
+          $animationStyle={props.animationStyle}
+          $clipPath={props.clipPath}
+          $overflow={props.enableOverflow ? props.overflow : "hidden"}
+          $positionX={props.positionX}
+          $positionY={props.positionY}
+          $enableOverflow={props.enableOverflow}
+          $aspectRatio={props.aspectRatio || "16 / 9"}
+          $placement={props.placement}
+        >
           <div
             ref={imgRef}
             style={
@@ -168,10 +214,17 @@ const childrenMap = {
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(ImageStyle , 'style'),
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+  clipPath: withDefault(StringControl, "none"),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
   previewSrc: StringControl,
-  restrictPaddingOnRotation:withDefault(StringControl, 'image')
+  restrictPaddingOnRotation:withDefault(StringControl, 'image'),
+  enableOverflow: withDefault(BoolControl, false),
+  aspectRatio: withDefault(StringControl, "16 / 9"),
+  placement: withDefault(PositionControl, "top"),
+  overflow: withDefault(StringControl, "hidden"),
+  positionX: withDefault(StringControl, "center"),
+  positionY: withDefault(StringControl, "center"),
 };
 
 let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
@@ -204,10 +257,52 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <>
             <Section name={sectionNames.layout}>
+
               {children.autoHeight.getPropertyView()}
+
+              {children.autoHeight.getView() == false && (
+                children.placement.propertyView({
+                  label: trans("image.placement"),
+                  radioButton: true
+              }))}
+  
+              {children.autoHeight.getView() == false  && (
+                children.enableOverflow.propertyView({
+                  label: trans("image.enableOverflow"),
+                  tooltip: trans("image.enableOverflowTip")
+              }))}
+  
+              {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && (
+                children.overflow.propertyView({
+                  label: trans("image.overflow"),
+                  tooltip: trans("image.overflowTip")
+              }))}
+
+              {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && (
+                children.positionX.propertyView({
+                  label: trans("image.positionX"),
+                  tooltip: trans("image.positionXTip")
+              }))}
+
+              {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && (
+                children.positionY.propertyView({
+                  label: trans("image.positionY"),
+                  tooltip: trans("image.positionYTip")
+              }))}
+
+              {children.autoHeight.getView() == false && children.enableOverflow.getView() == true && (
+                  children.aspectRatio.propertyView({
+                    label: trans("image.aspectRatio"),
+                    tooltip: trans("image.aspectRatioTip")
+              }))}
             </Section>
+
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
+              {children.clipPath.propertyView({
+                label: trans("image.clipPath"),
+                tooltip: trans("image.clipPathTip")
+              })}
             </Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>
               {children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1887,11 +1887,16 @@ export const NavigationStyle = [
 ] as const;
 
 export const ImageStyle = [
-  getStaticBorder("#00000000"),
-  RADIUS,
-  BORDER_WIDTH,
+  // getStaticBorder("#00000000"),
   MARGIN,
   PADDING,
+  BORDER,
+  BORDER_STYLE,
+  RADIUS,
+  BORDER_WIDTH,
+  OPACITY,
+  BOXSHADOW,
+  BOXSHADOWCOLOR,
   ROTATION
 ] as const;
 
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2059,7 +2059,21 @@ export const en = {
     "srcDesc": "The Image Source. Can be an URL, Path or Base64 String. for Example: data:image/png;base64, AAA... CCC",
     "supportPreview": "Support Zoom Preview (on Click)",
     "supportPreviewTip": "Effective When the Image Source is Valid",
-    "previewSrc": "HighRes Image Source"
+    "previewSrc": "HighRes Image Source",
+    "clipPath" : "Image Clipping Path",
+    "clipPathTip" : "Use clip-path to define a custom shape for your element based on CSS definition, referencing an SVG mask (via source URL) or using predefined shapes like circle(), ellipse(), polygon(), or inset() for clipping.",
+    "enableOverflow": "Enable Overflow",
+    "enableOverflowTip": "Allows the image to overflow its container, enabling cropping beyond the container's bounds. Useful for maintaining focus on specific parts of the image.",
+    "overflow": "Overflow Behavior (CSS)",
+    "overflowTip": "Defines how the content should behave when overflowing the container. Options like 'hidden', 'scroll', or 'visible' determine visibility of cropped content.",
+    "positionX": "Horizontal Position",
+    "positionXTip": "Specifies the horizontal alignment of the image within its container. Examples: 'left', 'center', 'right', or percentage values.",
+    "positionY": "Vertical Position",
+    "positionYTip": "Specifies the vertical alignment of the image within its container. Examples: 'top', 'center', 'bottom', or percentage values.",
+    "aspectRatio": "Aspect Ratio (CSS)",
+    "aspectRatioTip": "Maintains a consistent width-to-height ratio for the image, such as '16/9' for widescreen or '1/1' for square. Leave blank for natural image dimensions.",
+    "placement": "Image Placement",
+    "placementTip": "Determines where and how the image is displayed within the layout or container. Options include specific alignment or placement logic."
   },
   "progress": {
     "value": "Value",
