get svg in annotation creation

src/AnnotationCreation.js

@@ -36,6 +36,8 @@ import ImageFormField from './ImageFormField';
 import { secondsToHMS } from './utils';
 import TextField from '@mui/material/TextField';
 
+import { exportStageSVG } from 'react-konva-to-svg';
+
 /** Extract time information from annotation target */
 function timeFromAnnoTarget(annotarget) {
   console.info('TODO proper time extraction from: ', annotarget);
@@ -303,8 +305,22 @@ class AnnotationCreation extends Component {
     });
   }
 
+
+  getSvg = async () => {
+    const stage = window.Konva.stages.find((stage) => stage.attrs.id === this.props.windowId);
+
+    const svg = await exportStageSVG(stage);
+
+    return svg;
+
+
+  }
+
+
+
+
   /** */
-  submitForm(e) {
+  async submitForm(e) {
     e.preventDefault();
     const {
       annotation,
@@ -313,13 +329,16 @@ class AnnotationCreation extends Component {
       config,
 
     } = this.props;
+
+
+
     const {
       title,
       textBody,
       image,
       tags,
       xywh,
-      svg,
+  //    svg,
       tstart,
       tend,
       textEditorStateBustingKey,
@@ -327,8 +346,11 @@ class AnnotationCreation extends Component {
 
     console.log('submitting form', this.state);
 
+    const svg = await this.getSvg();
 
 
+    console.log('svg', svg);
+
     const t = (tstart && tend) ? `${tstart},${tend}` : null;
     const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody };
     canvases.forEach(async (canvas) => {
@@ -345,7 +367,7 @@ class AnnotationCreation extends Component {
         id: (annotation && annotation.id) || `${uuid()}`,
         image,
         manifestId: canvas.options.resource.id,
-        svg,
+        svg,//<------
         tags,
       }).toJson();
 

src/AnnotationDrawing.js

@@ -308,15 +308,7 @@ class AnnotationDrawing extends Component {
       };
 
 
-      exportStageSVG=(stage)=>{
 
-        const svg = exportStageSVG({
-            container: stage,
-            width: 1920,
-            height: 1080,
-            });
-            console.log('svg',svg);
-        }