fix: initial style didn't give any effect (#2504)

berviantoleo · Jan 12, 2024 · 657e8d9 · 657e8d9
1 parent d1fb811
commit 657e8d9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/examples/demo/src/components/Default.tsx b/examples/demo/src/components/Default.tsx
@@ -22,6 +22,9 @@ export default function Default(): JSX.Element {
                 id: "1",
                 rect: { x1: 0.0, y1: 0.0, x2: 0.2, y2: 0.2 },
                 rectPx: {},
+                style: {
+                  borderColor: "green",
+                },
               },
             ],
           }}

diff --git a/packages/react-multi-crop/src/ReactMultiCrop/ReactMultiCrop.tsx b/packages/react-multi-crop/src/ReactMultiCrop/ReactMultiCrop.tsx
@@ -312,6 +312,26 @@ class ReactMultiCrop extends Component<IReactMultiCropProps, IReactMultiCropStat
         };
         let totalRendered = 0;
         for (const coord of inputObject) {
+          if (coord.style) {
+            if (coord.style.cropBackgroundColor) {
+              attribute.cropBackgroundColor = coord.style.cropBackgroundColor;
+            }
+            if (coord.style.cropBackgroundOpacity) {
+              attribute.cropBackgroundOpacity = coord.style.cropBackgroundOpacity;
+            }
+            if (coord.style.borderColor) {
+              attribute.borderColor = coord.style.borderColor;
+            }
+            if (coord.style.cornerColor) {
+              attribute.cornerColor = coord.style.cornerColor;
+            }
+            if (coord.style.cornerSize) {
+              attribute.cornerSize = coord.style.cornerSize;
+            }
+            if (coord.style.transparentCorners) {
+              attribute.transparentCorners = coord.style.transparentCorners;
+            }
+          }
           const rect = this.createObject(canvas, coord, attribute, readonly || false);
           if (rect) {
             canvas.add(rect);