Merge remote-tracking branch 'origin/v4-dev' into dependabot/npm_and_…

…yarn/loader-utils-2.0.4
scaleflex · Feb 10, 2023 · d8ab2c7 · d8ab2c7
2 parents 9a70d7b + e57225c
commit d8ab2c7
Show file tree

Hide file tree

Showing 61 changed files with 254 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -359,6 +359,7 @@ The image url or an `HTMLImageElement` for the image which the operations/edits
 Theme from [@scaleflex/ui](https://github.com/scaleflex/ui/blob/1617f8b19ade7199110df6e2ceff77dacefd75bd/packages/ui/src/theme/entity/default-theme.ts#L43) deep merged with following overrides
 
 ```
+// Overrides
 {
   palette: {
     'bg-primary-active': '#ECF3FF',
@@ -367,6 +368,28 @@ Theme from [@scaleflex/ui](https://github.com/scaleflex/ui/blob/1617f8b19ade7199
     fontFamily: 'Roboto, Arial',
   },
 }
+
+// Used properties in case you need to provide your custom colors/theme, you should customize those properties (all or any of them) with your color hex/name string values.
+{
+  palette: {
+    'bg-secondary': '....',
+    'bg-primary': : '....',
+    'bg-primary-active': : '....',
+    'accent-primary': : '....',
+    'accent-primary-active': : '....',
+    'icons-primary': : '....',
+    'icons-secondary': : '....',
+    'borders-secondary': : '....',
+    'borders-primary': : '....',
+    'borders-strong': : '....',
+    'light-shadow': : '....',
+    'warning': : '....',
+
+  },
+  typography: {
+    fontFamily: : '....', // Font family string value, you should import this font in your app.
+  },
+}
 ```
 
 Almost you would need those 2 objects ([**palette**](https://github.com/scaleflex/ui/blob/master/packages/ui/src/utils/types/palette/color.ts#L1) _values are the possible keys for palette object_ & [**typograpghy**](https://github.com/scaleflex/ui/blob/master/packages/ui/src/theme/entity/default-theme.ts#L52)) to have the proper theme you want.

diff --git a/packages/react-filerobot-image-editor/package.json b/packages/react-filerobot-image-editor/package.json
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@scaleflex/icons": "1.0.0-beta.80",
-    "@scaleflex/ui": "1.0.0-beta.80",
-    "konva": "8.3.2",
+    "@scaleflex/icons": "1.0.0-beta.99",
+    "@scaleflex/ui": "1.0.0-beta.99",
+    "konva": "8.4.2",
     "prop-types": "15.7.2",
-    "react-konva": "18.1.1"
+    "react-konva": "18.2.4"
   },
   "peerDependencies": {
     "react": "18.2.0",
@@ -43,4 +43,4 @@
   "scripts": {
     "build:lib": "rimraf lib && cross-env BABEL_ENV=production NODE_ENV=production babel src -d lib --config-file ../../babel.config.json -D"
   }
-}
+}
diff --git a/packages/react-filerobot-image-editor/src/actions/setLatestColor.js b/packages/react-filerobot-image-editor/src/actions/setLatestColor.js
@@ -1,11 +1,11 @@
 export const SET_LATEST_COLOR = 'SET_LATEST_COLOR';
 
-const setLatestColor = (state, payload) =>
-  state.latestColor === payload.latestColor
-    ? state
-    : {
-        ...state,
-        latestColor: payload.latestColor,
-      };
+const setLatestColor = (state, payload) => ({
+  ...state,
+  latestColors: {
+    ...state.latestColors,
+    ...payload.latestColors,
+  },
+});
 
 export default setLatestColor;
diff --git a/...bot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx b/...bot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx
@@ -11,6 +11,7 @@ const MemoizedAnnotation = ({
   selectionsIds,
 }) => {
   const AnnotationComponent = ANNOTATION_NAMES_TO_COMPONENT[annotation.name];
+  if (!AnnotationComponent) return null;
 
   return (
     <AnnotationComponent

diff --git a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx
@@ -15,6 +15,7 @@ import AnnotationNodes from './AnnotationNodes';
 import PreviewGroup from './PreviewGroup';
 
 const CANVAS_TO_IMG_SPACING = getProperImageToCanvasSpacing();
+const MIN_SPACED_WIDTH = 10; // As sometimes the spaced width is less than that and it might be hard to view the image initially.
 
 const DesignLayer = () => {
   const designLayerRef = useRef();
@@ -43,7 +44,10 @@ const DesignLayer = () => {
   );
 
   const spacedOriginalImg = useMemo(() => {
-    const spacedWidth = originalImage.width - CANVAS_TO_IMG_SPACING;
+    const spacedWidth = Math.max(
+      MIN_SPACED_WIDTH,
+      originalImage.width - CANVAS_TO_IMG_SPACING,
+    );
     const imgRatio = originalImage.width / originalImage.height;
 
     return {

diff --git a/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx b/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
@@ -1,5 +1,5 @@
 /** External Dependencies */
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 /** Internal Dependencies */
 import { DesignLayer, TransformersLayer } from 'components/Layers';
@@ -13,6 +13,7 @@ import { CanvasContainer, StyledOrignalImage } from './MainCanvas.styled';
 const MainCanvas = () => {
   const [observeResize] = useResizeObserver();
   const providedAppContext = useStore();
+  const canvasContainerRef = useRef(null);
 
   const setNewCanvasSize = useCallback(
     ({ width: containerWidth, height: containerHeight }) => {
@@ -27,15 +28,12 @@ const MainCanvas = () => {
     [],
   );
 
-  const observeCanvasContainerResizing = useCallback((element) => {
-    observeResize(element, setNewCanvasSize);
+  useEffect(() => {
+    observeResize(canvasContainerRef.current, setNewCanvasSize);
   }, []);
 
   return (
-    <CanvasContainer
-      className="FIE_canvas-container"
-      ref={observeCanvasContainerResizing}
-    >
+    <CanvasContainer className="FIE_canvas-container" ref={canvasContainerRef}>
       {!providedAppContext.textIdOfEditableContent && <NodeControls />}
       {providedAppContext.isShowOriginalImage && (
         <StyledOrignalImage

diff --git a/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx b/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx
@@ -267,7 +267,7 @@ const SaveButton = () => {
             onChange={changeFileName}
             size="sm"
             placeholder={t('name')}
-            error={Boolean(imageFileInfo.name)}
+            error={!imageFileInfo.name}
             focusOnMount
           />
           <StyledFileExtensionSelect

diff --git a/...ges/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx b/...ges/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx
@@ -84,7 +84,11 @@ const ShadowFields = ({ annotation, updateAnnotation, t }) => {
           />
         </StyledColumn>
       </StyledTwoColumnsContainer>
-      <ColorInput color={shadowColor} onChange={changeShadowColor} />
+      <ColorInput
+        color={shadowColor}
+        onChange={changeShadowColor}
+        colorFor="shadow"
+      />
     </StyledSpacedOptionFields>
   );
 };

diff --git a/...ges/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx b/...ges/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx
@@ -37,7 +37,11 @@ const StrokeFields = ({ annotation, updateAnnotation, t }) => {
         onChange={changeStrokeWidth}
         value={strokeWidth}
       />
-      <ColorInput color={stroke} onChange={changeStrokeColor} />
+      <ColorInput
+        color={stroke}
+        onChange={changeStrokeColor}
+        colorFor="stroke"
+      />
     </StyledSpacedOptionFields>
   );
 };

diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx
@@ -97,7 +97,11 @@ const AnnotationOptions = ({
       className={`FIE_annotations-options${className ? ` ${className}` : ''}`}
     >
       {!hideFillOption && (
-        <ColorInput color={annotation.fill} onChange={changeAnnotationFill} />
+        <ColorInput
+          color={annotation.fill}
+          onChange={changeAnnotationFill}
+          colorFor="fill"
+        />
       )}
       {children}
       {options.map(
@@ -149,8 +153,8 @@ AnnotationOptions.propTypes = {
   updateAnnotation: PropTypes.func.isRequired,
   children: PropTypes.node,
   hideFillOption: PropTypes.bool,
-  morePoppableOptionsPrepended: PropTypes.arrayOf(PropTypes.object),
-  morePoppableOptionsAppended: PropTypes.arrayOf(PropTypes.object),
+  morePoppableOptionsPrepended: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
+  morePoppableOptionsAppended: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
   moreOptionsPopupComponentsObj: PropTypes.instanceOf(Object),
   hidePositionField: PropTypes.bool,
   className: PropTypes.string,

diff --git a/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx b/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx
@@ -10,13 +10,15 @@ import { StyledColorPicker, StyledPickerTrigger } from './ColorInput.styled';
 
 const pinnedColorsKey = 'FIE_pinnedColors';
 
-const ColorInput = ({ position = 'top', onChange, color }) => {
+// colorFor is used to save the latest color for a specific purpose (e.g. fill/shadow/stroke)
+const ColorInput = ({ position = 'top', onChange, color, colorFor }) => {
   const {
     selectionsIds = [],
     config: { annotationsCommon = {} },
     dispatch,
-    latestColor,
+    latestColors = {},
   } = useStore();
+  const latestColor = latestColors[colorFor];
   const [anchorEl, setAnchorEl] = useState();
   const [currentColor, setCurrentColor] = useState(
     () => latestColor || color || annotationsCommon.fill,
@@ -53,7 +55,9 @@ const ColorInput = ({ position = 'top', onChange, color }) => {
       dispatch({
         type: SET_LATEST_COLOR,
         payload: {
-          latestColor: rgba,
+          latestColors: {
+            [colorFor]: rgba,
+          },
         },
       });
     }
@@ -104,6 +108,7 @@ ColorInput.defaultProps = {
 
 ColorInput.propTypes = {
   onChange: PropTypes.func.isRequired,
+  colorFor: PropTypes.string.isRequired,
   position: PropTypes.string,
   color: PropTypes.string,
 };

diff --git a/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx b/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx
@@ -10,8 +10,8 @@ import {
   FilterItemLabel,
 } from './Filters.styled';
 
-const FILTER_PREVIEW_WIDTH = 60;
-const FILTER_PREVIEW_HEIGHT = 45;
+const MAX_FILTER_PREVIEW_WIDTH = 60;
+const MAX_FILTER_PREVIEW_HEIGHT = 45;
 
 const FilterItem = ({
   filterLabel,
@@ -43,6 +43,15 @@ const FilterItem = ({
     };
   }, [image]);
 
+  const imgRatio = image.width / image.height;
+  const isVerticalImg = imgRatio < 1;
+  const filterImgPreviewWidth = isVerticalImg
+    ? MAX_FILTER_PREVIEW_WIDTH
+    : MAX_FILTER_PREVIEW_HEIGHT * imgRatio;
+  const filterImgPreviewHeight = isVerticalImg
+    ? MAX_FILTER_PREVIEW_WIDTH / imgRatio
+    : MAX_FILTER_PREVIEW_HEIGHT;
+
   return (
     <StyledFilterItem
       className="FIE_filters-item"
@@ -51,17 +60,17 @@ const FilterItem = ({
     >
       <FilterItemPreview
         className="FIE_filters-item-preview"
-        width={FILTER_PREVIEW_WIDTH}
-        height={FILTER_PREVIEW_HEIGHT}
+        width={MAX_FILTER_PREVIEW_WIDTH}
+        height={MAX_FILTER_PREVIEW_HEIGHT}
       >
         <Layer onTap={handleFilterApplying}>
           <Image
             image={image}
             filters={filterFn ? [filterFn] : []}
-            width={FILTER_PREVIEW_WIDTH}
-            height={FILTER_PREVIEW_HEIGHT}
-            x={0}
-            y={0}
+            width={filterImgPreviewWidth}
+            height={filterImgPreviewHeight}
+            x={-(filterImgPreviewWidth - MAX_FILTER_PREVIEW_WIDTH) / 2}
+            y={-(filterImgPreviewHeight - MAX_FILTER_PREVIEW_HEIGHT) / 2}
             ref={imageNodeRef}
           />
         </Layer>

diff --git a/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx b/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx
@@ -43,7 +43,7 @@ const PenOptions = ({ t }) => {
       pos.offsetX - (designLayer.attrs.xPadding || 0),
       pos.offsetY - (designLayer.attrs.yPadding || 0),
     ];
-  }, []);
+  }, [designLayer]);
 
   const handlePointerMove = useCallback(() => {
     if (!updatedPen.current.moved) {
@@ -72,7 +72,7 @@ const PenOptions = ({ t }) => {
         },
       });
     }
-  }, []);
+  }, [getPointerPosition]);
 
   const handlePointerUp = useCallback(() => {
     if (updatedPen.current.id) {
@@ -91,23 +91,26 @@ const PenOptions = ({ t }) => {
     document.removeEventListener('touchend', handlePointerUp, eventsOptions);
     document.removeEventListener('mouseleave', handlePointerUp, eventsOptions);
     document.removeEventListener('touchcancel', handlePointerUp, eventsOptions);
-  }, []);
+  }, [handlePointerMove]);
 
-  const handlePointerDown = useCallback((e) => {
-    if (e.target.attrs.draggable) {
-      return;
-    }
-    e.evt.preventDefault();
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (e.target.attrs.draggable) {
+        return;
+      }
+      e.evt.preventDefault();
 
-    updatedPen.current = { points: getPointerPosition() };
+      updatedPen.current = { points: getPointerPosition() };
 
-    canvasRef.current.on('mousemove touchmove', handlePointerMove);
-    canvasRef.current.on('mouseleave touchcancel', handlePointerUp);
-    document.addEventListener('mouseup', handlePointerUp, eventsOptions);
-    document.addEventListener('touchend', handlePointerUp, eventsOptions);
-    document.addEventListener('mouseleave', handlePointerUp, eventsOptions);
-    document.addEventListener('touchcancel', handlePointerUp, eventsOptions);
-  }, []);
+      canvasRef.current.on('mousemove touchmove', handlePointerMove);
+      canvasRef.current.on('mouseleave touchcancel', handlePointerUp);
+      document.addEventListener('mouseup', handlePointerUp, eventsOptions);
+      document.addEventListener('touchend', handlePointerUp, eventsOptions);
+      document.addEventListener('mouseleave', handlePointerUp, eventsOptions);
+      document.addEventListener('touchcancel', handlePointerUp, eventsOptions);
+    },
+    [getPointerPosition, handlePointerMove, handlePointerUp],
+  );
 
   useEffect(() => {
     canvasRef.current = designLayer?.getStage();
@@ -120,7 +123,7 @@ const PenOptions = ({ t }) => {
         canvasRef.current.off('mousedown touchstart', handlePointerDown);
       }
     };
-  }, []);
+  }, [designLayer]);
 
   return (
     <AnnotationOptions

diff --git a/packages/react-filerobot-image-editor/src/context/getInitialAppState.js b/packages/react-filerobot-image-editor/src/context/getInitialAppState.js
@@ -66,7 +66,7 @@ const getInitialAppState = (config = {}) => {
     futureDesignStates: [],
     isResetted: true,
     haveNotSavedChanges: false,
-    latestColor: undefined,
+    latestColors: {},
   };
 };
 

diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Aden.js b/packages/react-filerobot-image-editor/src/custom/filters/Aden.js
@@ -27,4 +27,6 @@ function Aden(imageData) {
   }
 }
 
+Aden.filterName = 'Aden'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Aden;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js b/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js
@@ -28,4 +28,6 @@ function Amaro(imageData) {
   }
 }
 
+Amaro.filterName = 'Amaro'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Amaro;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js b/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js
@@ -28,4 +28,6 @@ function Ashby(imageData) {
   }
 }
 
+Ashby.filterName = 'Ashby'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Ashby;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js b/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js
@@ -21,4 +21,6 @@ function BlackAndWhite(imageData) {
   }
 }
 
+BlackAndWhite.filterName = 'BlackAndWhite'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default BlackAndWhite;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js b/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js
@@ -28,4 +28,6 @@ function Brannan(imageData) {
   }
 }
 
+Brannan.filterName = 'Brannan'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Brannan;