added translation to category

README.md

@@ -22,7 +22,7 @@ import ReactImageAnnotate from "react-image-annotate";
 const App = () => (
   <ReactImageAnnotate
     labelImages
-    regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+    regionClsList={[{name:"alpha", tranlation: "Alpha"}, {name:"beta", translation: "Beta"}, {name: "charlie", translation: "Charlie"}, {name:"delta", translation:"Delta"}]}
     regionTagList={["tag1", "tag2", "tag3"]}
     images={[
       {
@@ -54,9 +54,9 @@ All of the following properties can be defined on the Annotator...
 | `taskDescription`        | \*`string`                                       | Markdown description for what to do in the image.                                       |               |
 | `allowedArea`            | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation.                                                  | Entire image. |
 | `regionTagList`          | `Array<string>`                                  | Allowed "tags" (mutually inclusive classifications) for regions.                        |               |
-| `regionClsList`          | `Array<string>`                                  | Allowed "classes" (mutually exclusive classifications) for regions.           
+| `regionClsList`          | `Array{name: <string>, translation: <string>`    | Allowed "classes" (mutually exclusive classifications) for regions.           
 | `regionColorList`        | `Array<string>`                                  | Custom color list for regions. Default colors are used if not specified.
-| `preselectCls`          | `string`                                          |  Put in the class that should be preselected when creating a new Box/Polygon etc.           |               |
+| `preselectCls`          | `string`                                          |  Put in the class that should be preselected when creating a new Box/Polygon etc.       |               |
 | `imageTagList`           | `Array<string>`                                  | Allowed tags for entire image.                                                          |               |
 | `imageClsList`           | `Array<string>`                                  | Allowed classes for entire image.                                                       |               |
 | `enabledTools`           | `Array<string>`                                  | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything.   |

src/Annotator/index.jsx

@@ -172,11 +172,20 @@ Annotator.propTypes = {
   enabledTools: PropTypes.arrayOf(PropTypes.string),
   selectedTool: PropTypes.string,
   regionTagList: PropTypes.arrayOf(PropTypes.string),
-  regionClsList: PropTypes.arrayOf(PropTypes.string),
+  regionClsList: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string,
+})),
   regionColorList: PropTypes.arrayOf(PropTypes.string),
-  preselectCls: PropTypes.string,
+  preselectCls: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string
+}),
   imageTagList: PropTypes.arrayOf(PropTypes.string),
-  imageClsList: PropTypes.arrayOf(PropTypes.string),
+  imageClsList: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string
+}),
   keyframes: PropTypes.object,
   taskDescription: PropTypes.string,
   RegionEditLabel: PropTypes.node,

src/Annotator/reducers/general-reducer.js

@@ -25,11 +25,11 @@ export default (state, action) => {
     action.y = clamp(action.y, aa.y, aa.y + aa.h)
   }
 
-  if (action.type === "ON_CLS_ADDED" && action.cls && action.cls !== "") {
+  if (action.type === "ON_CLS_ADDED" && action.cls && action.cls.name !== "") {
     const oldRegionClsList = state.regionClsList
     const newState = {
       ...state,
-      regionClsList: oldRegionClsList.concat(action.cls),
+      regionClsList: oldRegionClsList.concat(action.cls.name),
     }
     return newState
   }

src/ClassSelectionMenu/index.jsx

@@ -84,15 +84,15 @@ export const ClassSelectionMenu = ({
       >
         {regionClsList.map((label, index) => (
           <LabelContainer
-            key={"regionCls" + label}
+            key={"regionCls" + label.name}
             className={classnames({selected: label === selectedCls})}
             onClick={() => onSelectCls(label)}
           >
             <Circle
               style={{backgroundColor: index < regionColorList.length ? regionColorList[index] : colors[index % colors.length]}}
             />
             <Label className={classnames({selected: label === selectedCls})}>
-              {capitalize(label)}
+              {capitalize(label.translation != null ? label.translation : label.name)}
             </Label>
             <DashSep />
           </LabelContainer>

src/DemoSite/Examples.jsx

@@ -4,11 +4,11 @@ import {setIn} from 'seamless-immutable';
 const userReducer = (state, action) => {
   switch (action.type) {
     case "SELECT_CLASSIFICATION": {
-      switch (action.cls) {
-        case "Line-Crossing": {
+      switch (action.cls?.name) {
+        case "name.lightbarrier": {
           return setIn(state, ["selectedTool"], "create-line");
         }
-        case "Area-Occupancy": {
+        case "name.parkingarea": {
           return setIn(state, ["selectedTool"], "create-polygon");
         }
       }
@@ -33,7 +33,7 @@ export const examples = {
     // regionTagList: [],
     // regionClsList: ["hotdog"],
     regionTagList: ["has-bun"],
-    regionClsList: ["hotdog", "not-hotdog"],
+    regionClsList: [{name: "hotdog"}, {name: "not-hotdog"}],
     regionColorList: ["#4d0c89", "#55d68d"],
     preselectCls: "not-hotdog",
     enabledTools: ["create-point", "create-box", "create-polygon", "create-line", "create-expanding-line"],
@@ -56,8 +56,8 @@ export const examples = {
     // regionTagList: [],
     // regionClsList: ["hotdog"],
     regionTagList: ["has-bun"],
-    regionClsList: ["Line-Crossing", "Area-Occupancy"],
-    preselectCls: "not-hotdog",
+    regionClsList: [{name: "name.lightbarrier", translation: "Light Barrier"}, {name: "name.parkingarea", translation: "Parking Area"}],
+    preselectCls: {name: "name.lightbarrier", translation: "Light Barrier"},
     // showTags: true,
     images: [
       {
@@ -71,7 +71,7 @@ export const examples = {
   "Simple Segmentation": () => ({
     taskDescription:
       "Annotate each image according to this _markdown_ specification.",
-    regionClsList: ["car", "truck"],
+    regionClsList: [{name: "car"}, {name: "truck"}],
     enabledTools: ["select", "create-polygon"],
     images: [
       {

src/DemoSite/simple-segmentation-example.json

@@ -559,8 +559,8 @@
   ],
   "labelImages": false,
   "regionClsList": [
-    "car",
-    "truck"
+    { "name": "car"},
+    { "name": "truck"}
   ],
   "regionTagList": [],
   "imageClsList": [],

src/ImageCanvas/index.jsx

@@ -415,7 +415,10 @@ ImageCanvas.propTypes = {
   showHighlightBox: PropTypes.bool,
   showPointDistances: PropTypes.bool,
   pointDistancePrecision: PropTypes.number,
-  regionClsList: PropTypes.arrayOf(PropTypes.string),
+  regionClsList: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string,
+  })),
   regionTagList: PropTypes.arrayOf(PropTypes.string),
   allowedArea: PropTypes.shape({x: PropTypes.number, y: PropTypes.number, w: PropTypes.number, h: PropTypes.number}),
   RegionEditLabel: PropTypes.element,

src/MainLayout/index.jsx

@@ -240,12 +240,6 @@ export const MainLayout = ({
                     expandedByDefault
                   />
                 ),
-                // (state.images?.length || 0) > 1 && (
-                //   <ImageSelector
-                //     onSelect={action("SELECT_REGION", "region")}
-                //     images={state.images}
-                //   />
-                // ),
                 <RegionSelector
                   key={"activeImage" + activeImage.id}
                   regions={activeImage ? activeImage.regions : emptyArr}

src/RegionLabel/index.jsx

@@ -123,10 +123,10 @@ export const RegionLabel = ({
                     })
                   }}
                   value={
-                    region.cls ? {label: region.cls, value: region.cls} : null
+                    region.cls ? {label: region.cls.translation, value: region.cls} : null
                   }
                   options={asMutable(
-                    allowedClasses.map((c) => ({value: c, label: c}))
+                    allowedClasses.map((c) => ({value: c, label: c.translation}))
                   )}
                 />
               </div>