Change order of annotation tools new property, annotationToolsIds, also persisting the selection of defaultToolId

Author: himon

README.md

@@ -435,6 +435,20 @@ import VanillaFilerobotImageEditor from 'filerobot-image-editor';
 const { TABS, TOOLS } = VanillaFilerobotImageEditor;
 ```
 
+#### `annotationToolsIds`
+
+<u>Type:</u> `string[]`
+
+<u>Supported version:</u> +v4.0.0
+
+<u>Default:</u> `[]`
+
+The provided tools in annotation will be shown to the user, if empty array provided or left by default all tools in annotation will be shown.
+
+```
+['Text', 'Image', 'Rect', 'Ellipse', 'Polygon', 'Pen', 'Line', 'Arrow']
+```
+
 #### `defaultTabId`
 
 <u>Type:</u> `string`

packages/react-filerobot-image-editor/src/actions/selectTab.js

@@ -9,12 +9,12 @@ const selectTab = (state, payload) =>
     : {
         ...state,
         tabId: payload.tabId,
-        toolId: TABS_TOOLS[payload.tabId][0],
+        toolId: TABS_TOOLS[payload.tabId][payload.toolId],
         selectionsIds: [],
         pointerCssIcon:
           payload.tabId === TABS_IDS.ANNOTATE
             ? POINTER_ICONS.DRAW
             : POINTER_ICONS.DEFAULT,
-      };
+};
 
 export default selectTab;

packages/react-filerobot-image-editor/src/actions/selectTool.js

@@ -1,12 +1,14 @@
 export const SELECT_TOOL = 'SELECT_TOOL';
 
-const selectTool = (state, payload) =>
-  state.toolId === payload.toolId
+const selectTool = (state, payload) => {
+  console.log('selectTool', {payload, state});
+  return state.toolId === payload.toolId
     ? state
     : {
         ...state,
         toolId: payload.toolId,
         selectionsIds: payload.keepSelections ? state.selectionsIds : [],
       };
+}
 
 export default selectTool;

packages/react-filerobot-image-editor/src/components/Tabs/index.jsx

@@ -8,22 +8,27 @@ import { useStore } from 'hooks';
 import { SELECT_TAB } from 'actions';
 import TabItem from './TabItem';
 import { AVAILABLE_TABS } from './Tabs.constants';
+import { TABS_TOOLS } from 'components/tools/tools.constants';
 
 const Tabs = ({ toggleMainMenu, isDrawer }) => {
   const {
     t,
     tabId = null,
+    toolId,
     dispatch,
     config: { defaultTabId, tabsIds, useCloudimage },
   } = useStore();
 
   const currentTabId = tabId || defaultTabId;
 
   const selectTab = useCallback((newTabId) => {
+    const annotateToolIdKey = defaultTabId === newTabId ? TABS_TOOLS.Annotate.indexOf(toolId) : 0;
+
     dispatch({
       type: SELECT_TAB,
       payload: {
         tabId: newTabId,
+        toolId: annotateToolIdKey
       },
     });
 

packages/react-filerobot-image-editor/src/components/ToolsBar/index.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 
 /** Internal Depepdencneis */
 import { SELECT_TOOL } from 'actions';
-import { TABS_TOOLS, TOOLS_ITEMS } from 'components/tools/tools.constants';
-import { TABS_IDS } from 'utils/constants';
+import { TABS_TOOLS, TOOLS_ITEMS, AVAILABLE_ANNOTATIONS_TOOLS } from 'components/tools/tools.constants';
+import { TABS_IDS, TOOLS_IDS } from 'utils/constants';
 import { useStore } from 'hooks';
 import Carousel from 'components/common/Carousel';
 import { StyledToolsBar, StyledToolsBarItems } from './ToolsBar.styled';
@@ -21,7 +21,7 @@ const ToolsBar = ({ isPhoneScreen }) => {
     toolId,
     annotations,
     selectionsIds = [],
-    config: { defaultTabId, defaultToolId, useCloudimage },
+    config: { annotationToolsIds, defaultTabId, defaultToolId, useCloudimage },
   } = useStore();
   const currentTabId = tabId || defaultTabId;
   const currentToolId =
@@ -41,25 +41,46 @@ const ToolsBar = ({ isPhoneScreen }) => {
     });
   }, []);
 
-  const items = useMemo(
-    () =>
-      tabTools.map((id) => {
-        const { Item, hideFn } = TOOLS_ITEMS[id];
+  const items = useMemo(() => {
+    console.log({TABS_IDS, TABS_TOOLS: TABS_TOOLS.Annotate, tabTools});
+    const shouldShowTool = (id) =>
+      !TOOLS_ITEMS[id]?.hideFn || !TOOLS_ITEMS[id].hideFn({ useCloudimage });
+  
+    const renderItem = (id) => {
+      const { Item, hideFn } = TOOLS_ITEMS[id];
+      if (!Item || (hideFn && hideFn({ useCloudimage }))) return null;
+  
+      return (
+        <Item
+          key={id}
+          selectTool={selectTool}
+          t={t}
+          isSelected={currentToolId === id}
+        />
+      );
+    };
 
-        return (
-          Item &&
-          (!hideFn || !hideFn({ useCloudimage })) && (
-            <Item
-              key={id}
-              selectTool={selectTool}
-              t={t}
-              isSelected={currentToolId === id}
-            />
-          )
-        );
-      }),
-    [tabTools, currentToolId],
-  );
+    if (currentTabId === TABS_IDS.ANNOTATE) {
+      let orderedToolIds = [];
+  
+      if (annotationToolsIds.length > 0) {
+        orderedToolIds = TABS_TOOLS.Annotate.reduce((acc, id) => {
+          const index = annotationToolsIds.indexOf(id);
+          if (index !== -1) acc[index] = id;
+          return acc;
+        }, []);
+        console.log({orderedToolIds});
+      } else {
+        orderedToolIds = [...TABS_TOOLS.Annotate];
+      }
+  
+      return (orderedToolIds.length ? orderedToolIds : TABS_TOOLS.Annotate)
+        .filter(shouldShowTool)
+        .map(renderItem);
+    }
+  
+    return tabTools.map(renderItem);
+  }, [currentTabId, tabTools, annotationToolsIds, currentToolId, useCloudimage]);
 
   const ToolOptionsComponent = useMemo(() => {
     if (!currentToolId) {

packages/react-filerobot-image-editor/src/context/defaultConfig.js

@@ -92,6 +92,7 @@ export default {
     componentType: 'slider', // slider | buttons
   },
   tabsIds: [],
+  annotationToolsIds: [],
   defaultTabId: TABS_IDS.ADJUST,
   defaultToolId: TOOLS_IDS.CROP,
   onClose: undefined,

packages/react-filerobot-image-editor/src/index.d.ts

@@ -292,6 +292,7 @@ export interface FilerobotImageEditorConfig {
   };
   // TABS_IDS
   tabsIds?: availableTabs[] | [];
+  annotationToolsIds?: availableTools[] | [];
   defaultTabId?: availableTabs;
   defaultToolId?: availableTools;
   onBeforeSave?: (savedImageData: savedImageData) => void | boolean;

public/demo-config.js

@@ -351,6 +351,7 @@ const config = {
   // forceToPngInEllipticalCrop: false, // in case the develop wants to force the saved image to be PNG if there is elliptical crop is done otherwise the provided savedImageType would be used.
   // onClose: () => console.log('Act closing 👅'), // if we have value then close button will be shown unless showBackButton is true then if onClose has value the back button will be shown otherwise nothing will be shown.
   // tabsIds: [TABS.ADJUST, TABS.WATERMARK],
+  // annotationToolsIds: [],
   // savingPixelRatio: 4,
   previewPixelRatio: window.devicePixelRatio * 4,
   // defaultTabId: TABS.ADJUST,

public/init.js

@@ -27,7 +27,7 @@ const copyButtons = document.querySelectorAll('.copy-button');
 const accordions = document.querySelectorAll('[data-accordion]');
 
 let useCloudimage = false;
-const { TABS } = FilerobotImageEditor;
+const { TABS, TOOLS } = FilerobotImageEditor;
 
 const EXAMPLE_CODE_TABS = {
   'js-code-tab': jsCodeWrapper,
@@ -50,6 +50,17 @@ const selectedTabs = [
   TABS.RESIZE,
 ];
 
+const selectedAnnotationTools = [
+  TOOLS.TEXT,
+  TOOLS.IMAGE,
+  TOOLS.RECT,
+  TOOLS.ELLIPSE,
+  TOOLS.POLYGON,
+  TOOLS.PEN,
+  TOOLS.LINE,
+  TOOLS.ARROW,
+];
+
 const IMG_EDITOR_TABS = {
   adjust: TABS.ADJUST,
   finetune: TABS.FINETUNE,
@@ -63,6 +74,7 @@ const pluginConfig = {
   ...config,
   source: 'https://scaleflex.cloudimg.io/v7/demo/river.png',
   tabsIds: selectedTabs,
+  annotationToolsIds: selectedAnnotationTools,
   defaultTabId: TABS.ADJUST,
   defaultToolId: null,
   observePluginContainerSize: true,
@@ -207,7 +219,6 @@ function changeModeHandler() {
 
     useCloudimage = false;
   }
-
   filerobotImageEditor.render({ useCloudimage, tabsIds: [...selectedTabs] });
 }