Change order and selections of annotation tools new property, annotationToolsIds

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

@@ -1,5 +1,5 @@
-import { TABS_TOOLS } from 'components/tools/tools.constants';
 import { POINTER_ICONS, TABS_IDS } from 'utils/constants';
+import { TABS_TOOLS } from 'components/tools/tools.constants'
 
 export const SELECT_TAB = 'SELECT_TAB';
 
@@ -9,12 +9,12 @@ const selectTab = (state, payload) =>
     : {
         ...state,
         tabId: payload.tabId,
-        toolId: TABS_TOOLS[payload.tabId][0],
+        toolId: payload.toolId || TABS_TOOLS[payload.tabId][0],
         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

@@ -9,4 +9,5 @@ const selectTool = (state, payload) =>
         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_IDS } from 'utils/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 = newTabId === TABS_IDS.ANNOTATE ? toolId : null;
+
     dispatch({
       type: SELECT_TAB,
       payload: {
         tabId: newTabId,
+        toolId: annotateToolIdKey,
       },
     });
 

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

@@ -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,35 @@ const ToolsBar = ({ isPhoneScreen }) => {
     });
   }, []);
 
-  const items = useMemo(
-    () =>
-      tabTools.map((id) => {
-        const { Item, hideFn } = TOOLS_ITEMS[id];
-
-        return (
-          Item &&
-          (!hideFn || !hideFn({ useCloudimage })) && (
-            <Item
-              key={id}
-              selectTool={selectTool}
-              t={t}
-              isSelected={currentToolId === id}
-            />
-          )
-        );
-      }),
-    [tabTools, currentToolId],
-  );
+  const items = useMemo(() => {
+    const isToolVisible = (id) => {
+      const tool = TOOLS_ITEMS[id];
+      return tool?.Item && (!tool.hideFn || !tool.hideFn({ useCloudimage }));
+    };
+
+    const renderItem = (id) => {
+      const { Item } = TOOLS_ITEMS[id];
+
+      return (
+        <Item
+          key={id}
+          selectTool={selectTool}
+          t={t}
+          isSelected={currentToolId === id}
+        />
+      );
+    };
+
+    if (currentTabId === TABS_IDS.ANNOTATE) {
+      const annotateToolIds = annotationToolsIds.length
+        ? annotationToolsIds.filter((toolId) =>TABS_TOOLS.Annotate.includes(toolId))
+        : TABS_TOOLS.Annotate;
+
+      return annotateToolIds.filter(isToolVisible).map(renderItem);
+    }
+
+    return tabTools.filter(isToolVisible).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

@@ -37,12 +37,26 @@ declare const TOOLS = {
   RESIZE: 'Resize',
 } as const;
 
+declare const ANNOTATION_TOOLS = {
+  TEXT: 'Text',
+  IMAGE: 'Image',
+  RECT: 'Rect',
+  ELLIPSE: 'Ellipse',
+  POLYGON: 'Polygon',
+  PEN: 'Pen',
+  LINE: 'Line',
+  ARROW: 'Arrow',
+} as const;
+
 // TABS_IDS
 type availableTabs = typeof TABS[keyof typeof TABS];
 
 // TOOLS_IDS
 type availableTools = typeof TOOLS[keyof typeof TOOLS];
 
+// ANNOTATION_TOOLS_IDS
+type availableAnnotationTools = typeof ANNOTATION_TOOLS[keyof typeof ANNOTATION_TOOLS];
+
 type lineCap = 'butt' | 'round' | 'square';
 
 // CLOSING_REASONS
@@ -292,6 +306,7 @@ export interface FilerobotImageEditorConfig {
   };
   // TABS_IDS
   tabsIds?: availableTabs[] | [];
+  annotationToolsIds?: availableAnnotationTools[] | [];
   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] });
 }