@searpent/react-image-annotate 2.0.76 → 2.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.76",
+  "version": "2.0.77",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",

package/src/Annotator/index.story.js

@@ -77,6 +77,17 @@ storiesOf("Annotator", module)
               "interview",
               "table",
               "text",
+              "continuation_ref",
+              "cover_clip",
+              "page_id",
+              "continuation_mark",
+              "follow_up_mark",
+              "article_termination_mark",
+              "page_splitting_stripe",
+              "column_id_stripe",
+              "prev_page_reference",
+              "section_subcategory"
+
             ]}
             help={`# Tools\n\n**E** - select tool\n\n**D** - frame tool\n\n**Ctrl** + **click frame** - edit frame\n\n**1**- **9** - change class`}
             onImagesChange={(images) => console.log("[images changed to]:", images)}
@@ -96,6 +107,17 @@ storiesOf("Annotator", module)
               image: "#14deef",
               interview: "#23b20f",
               table: "#02b4ba",
+              continuation_ref: '#FF33CC',
+              cover_clip: '#669966',
+              page_id: '#4433AA',
+              continuation_mark: '#660066',
+              follow_up_mark: '#873e23',
+              article_termination_mark: '#873e23',
+              page_splitting_stripe: '#873e23',
+              column_id_stripe: '#873e23',
+              prev_page_reference: '#f3a864',
+              section_subcategory: '#442c55',
+
             }}
             // groupColors={[
             //   "#3853F1",

package/src/Editor/annotation-plugin/annotation.css

@@ -83,6 +83,26 @@ button.MuiButtonBase-root.expanded {
 
 .ro-table {}
 
+.ro-continuation_ref {}
+
+.ro-cover_clip {}
+
+.ro-page_id {}
+
+.ro-continuation_mark {}
+
+.ro-follow_up_mark {}
+
+.ro-article_termination_mark {}
+
+.ro-page_splitting_stripe {}
+
+.ro-column_id_stripe {}
+
+.ro-prev_page_reference {}
+
+.ro-section_subcategory {}
+
 .instructions {
   height: 100%;
   display: flex;

package/src/Editor/annotation-plugin/annotation.js

@@ -446,7 +446,17 @@ class Annotation {
       { labelName: 'image', tag: 'p', name: 'image', backgroundColor: '#ffffcc' },
       { labelName: 'interview', tag: 'p', name: 'interview', backgroundColor: '#23b20f' },
       { labelName: 'table', tag: 'p', name: 'table', backgroundColor: '#0000bb' },
-      { labelName: 'section', tag: 'p', name: 'section', backgroundColor: '#ffcccc' }
+      { labelName: 'section', tag: 'p', name: 'section', backgroundColor: '#ffcccc' },
+      { labelName: 'continuation_ref', backgroundColor: '#FF33CC', name: 'continuation_ref', tag: 'p' },
+      { labelName: 'cover_clip', backgroundColor: '#669966', name: 'cover_clip', tag: 'p' },
+      { labelName: 'page_id', backgroundColor: '#4433AA', name: 'page_id', tag: 'p' },
+      { labelName: 'continuation_mark', backgroundColor: '#660066', name: 'continuation_mark', tag: 'p' },
+      { labelName: 'follow_up_mark', backgroundColor: '#873e23', name: 'follow_up_mark', tag: 'p' },
+      { labelName: 'article_termination_mark', backgroundColor: '#873e23', name: 'article_termination_mark', tag: 'p' },
+      { labelName: 'page_splitting_stripe', backgroundColor: '#873e23', name: 'page_splitting_stripe', tag: 'p' },
+      { labelName: 'column_id_stripe', backgroundColor: '#873e23', name: 'column_id_stripe', tag: 'p' },
+      { labelName: 'prev_page_reference', backgroundColor: '#f3a864', name: 'prev_page_reference', tag: 'p' },
+      { labelName: 'section_subcategory', backgroundColor: '#442c55', name: 'section_subcategory', tag: 'p' },
     ];
 
     return this._settings.labels

package/src/Editor/readOnly.js

@@ -15,6 +15,16 @@ function ReadOnly({ article }) {
     <p className='ro-unknown' dangerouslySetInnerHTML={{ __html: article.unknown }}></p>
     <p className='ro-table' dangerouslySetInnerHTML={{ __html: article.table }}></p>
     <p className='ro-section' dangerouslySetInnerHTML={{ __html: article.section }}></p>
+    <p className='ro-continuation_ref' dangerouslySetInnerHTML={{ __html: article.continuation_ref }}></p>
+    <p className='ro-cover_clip' dangerouslySetInnerHTML={{ __html: article.cover_clip }}></p>
+    <p className='ro-page_id' dangerouslySetInnerHTML={{ __html: article.page_id }}></p>
+    <p className='ro-continuation_mark' dangerouslySetInnerHTML={{ __html: article.continuation_mark }}></p>
+    <p className='ro-follow_up_mark' dangerouslySetInnerHTML={{ __html: article.follow_up_mark }}></p>
+    <p className='ro-article_termination_mark' dangerouslySetInnerHTML={{ __html: article.article_termination_mark }}></p>
+    <p className='ro-page_splitting_stripe' dangerouslySetInnerHTML={{ __html: article.page_splitting_stripe }}></p>
+    <p className='ro-column_id_stripe' dangerouslySetInnerHTML={{ __html: article.column_id_stripe }}></p>
+    <p className='ro-prev_page_reference' dangerouslySetInnerHTML={{ __html: article.prev_page_reference }}></p>
+    <p className='ro-section_subcategory' dangerouslySetInnerHTML={{ __html: article.section_subcategory }}></p>
   </div>)
 }
 

package/src/hooks/use-colors.js

@@ -34,6 +34,26 @@ function defaultClsColor(cls) {
       return "#02b4ba"
     case 'section':
       return "#ffcccc"
+    case 'continuation_ref':
+      return '#FF33CC'
+    case 'cover_clip':
+      return '#669966'
+    case 'page_id':
+      return '#4433AA'
+    case 'continuation_mark':
+      return '#660066'
+    case 'follow_up_mark':
+      return '#873e23'
+    case 'article_termination_mark':
+      return '#873e23'
+    case 'page_splitting_stripe':
+      return '#873e23'
+    case 'column_id_stripe':
+      return '#873e23'
+    case 'prev_page_reference':
+      return '#f3a864'
+    case 'section_subcategory':
+      return '#442c55'
     default:
       return "#02b4ba"
   }