wip save svg

mirador @ 1a9ef869

-Subproject commit 3956139233904c4666e611a2b3aa09143cb67b57
+Subproject commit 1a9ef869f8868c6983ba5e465da63598b14d2d8e

src/AnnotationCreation.js

@@ -311,6 +311,7 @@ class AnnotationCreation extends Component {
       canvases,
       receiveAnnotation,
       config,
+
     } = this.props;
     const {
       title,
@@ -323,9 +324,14 @@ class AnnotationCreation extends Component {
       tend,
       textEditorStateBustingKey,
     } = this.state;
+
+    console.log('submitting form',this.state);
+
+
+
     const t = (tstart && tend) ? `${tstart},${tend}` : null;
     const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody };
-    canvases.forEach((canvas) => {
+    canvases.forEach(async(canvas) => {
       const storageAdapter = config.annotation.adapter(canvas.id);
 
       const anno = new WebAnnotation({
@@ -339,9 +345,12 @@ class AnnotationCreation extends Component {
         id: (annotation && annotation.id) || `${uuid()}`,
         image,
         manifestId: canvas.options.resource.id,
-        svg,
+        svg:svg,
         tags,
       }).toJson();
+
+      console.log(anno);
+
       if (annotation) {
         storageAdapter.update(anno)
           .then((annoPage) => {
@@ -418,7 +427,7 @@ class AnnotationCreation extends Component {
       strokeWidth,
       closedMode,
       textBody,
-      svg,
+      
       tstart,
       tend,
       textEditorStateBustingKey,
@@ -452,6 +461,8 @@ class AnnotationCreation extends Component {
           updateGeometry={this.updateGeometry}
           windowId={windowId}
           player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}
+          width={mediaIsVideo ? VideosReferences.get(windowId).video.videoWidth : OSDReferences.get(windowId).viewer.world.getItemAt(0).source.dimensions.x}
+          height={mediaIsVideo ? VideosReferences.get(windowId).video.videoHeight : OSDReferences.get(windowId).viewer.world.getItemAt(0).source.dimensions.y}
         />
         <StyledForm
           onSubmit={this.submitForm}

src/AnnotationDrawing.js

@@ -10,7 +10,7 @@ import {
     , Ellipse, Transformer,Shape
 
 } from 'react-konva';
-
+import { exportStageSVG } from 'react-konva-to-svg';
 
 class FreeHand extends React.Component {
 
@@ -469,7 +469,7 @@ class AnnotationDrawing extends Component {
 
 
         this.paper = null;
-        this.konvas = null;
+    
 
 
         // this.addPath = this.addPath.bind(this);
@@ -479,17 +479,41 @@ class AnnotationDrawing extends Component {
             newShape: null,
             currentShape: null,
             isDrawing: false,
+            svg:  async () => {
+                // Your function implementation here
+          
+                
+    
+                // stage is the one with same windowId
+    
+                const stage = window.Konva.stages.find((stage) => stage.attrs.id === this.props.windowId);
+            
+                const svg = await exportStageSVG(stage);
+                   
+            
+                console.log('svg',svg);
+                    return svg;
+            
+            
+              },
         };
         this.shapeRefs = {};
         this.transformerRefs = {};
 
 
+
+
+        
+        
+      
+
+
     }
 
 
     onShapeClick = (shape) => {
 
-
+        this.svg();
         this.setState({ selectedShapeId: shape.id });
         const id = shape.id;
         // find shape by id 
@@ -725,6 +749,16 @@ class AnnotationDrawing extends Component {
       };
 
 
+      exportStageSVG=(stage)=>{
+
+        const svg = exportStageSVG({
+            container: stage,
+            width: 1920,
+            height: 1080,
+            });
+            console.log('svg',svg);
+        }
+
 
 
     drawKonvas() {
@@ -733,13 +767,15 @@ class AnnotationDrawing extends Component {
 
 
         const { shapes, newShape } = this.state;
+        const { windowId } = this.props;
+        console.log(windowId)
 
 
-
+// potentiellement videoRef et windowId
         return (
             <Stage
-                width={1920}
-                height={1080}
+                width={this.props.width || 1920}
+                height={this.props.height || 1080}
                 style={{
                     height: '100%', left: 0, position: 'absolute', top: 0, width: '100%',
                 }}
@@ -747,6 +783,8 @@ class AnnotationDrawing extends Component {
                    onMouseUp={this.handleMouseUp}
                    onMouseMove={this.handleMouseMove}
                    onDblClick={this.handleKonvasDblClick}
+                   id={windowId}
+                   svg={this.svg}
 
 
             >
@@ -797,7 +835,7 @@ AnnotationDrawing.propTypes = {
     fillColor: PropTypes.string,
     strokeColor: PropTypes.string,
     strokeWidth: PropTypes.number,
-    svg: PropTypes.string,
+    svg: PropTypes.func.isRequired,
     updateGeometry: PropTypes.func.isRequired,
     windowId: PropTypes.string.isRequired,
 };
@@ -812,4 +850,5 @@ AnnotationDrawing.defaultProps = {
     svg: null,
 };
 
+
 export default AnnotationDrawing;