diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index affc9d0f8c2d6efbc18eaebe2dde292925caf362..8d24cb4f876ca1b51be22ec5214c05789f092c97 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -108,6 +108,7 @@ function AnnotationCreation(props) {
tstart,
valueTime: [0, 1],
valuetextTime: '',
+ textBody: '',
};
});
@@ -115,7 +116,7 @@ function AnnotationCreation(props) {
const [isMouseOverSave, setIsMouseOverSave] = useState(false);
const [scale, setScale] = useState(1);
- const [value, setValue] = useState(TARGET_VIEW);
+ const [viewTool, setViewTool] = useState(TARGET_VIEW);
const { height, width } = props.mediaVideo ? props.mediaVideo : 0;
// TODO Check the effect to keep and remove the other
@@ -182,7 +183,7 @@ function AnnotationCreation(props) {
}));
};
const tabHandler = (event, TabIndex) => {
- setValue(TabIndex);
+ setViewTool(TabIndex);
};
/**
* Change from slider
@@ -269,7 +270,7 @@ function AnnotationCreation(props) {
*/
const getSvg = async () => {
const stage = window.Konva.stages.find((s) => s.attrs.id === props.windowId);
- const svg = await exportStageSVG(stage); // TODO clean
+ const svg = await exportStageSVG(stage, false); // TODO clean
return svg;
};
@@ -302,7 +303,7 @@ function AnnotationCreation(props) {
// TODO Possibly problem of syncing
// TODO Improve this code
// If we are in edit mode, we have the transformer on the stage saved in the annotation
- if (state.activeTool === 'edit') {
+ if (viewTool === OVERLAY_VIEW && state.activeTool === 'edit') {
setState((prevState) => ({
...prevState,
activeTool: 'cursor',
@@ -316,24 +317,45 @@ function AnnotationCreation(props) {
receiveAnnotation,
config,
} = props;
+ // const svg = <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle fill="red" cx="50" cy="50" r="50" /></svg>;
+
+ // const dummyAnnot = {
+ // title: 'dummyTitle',
+ // textBody:'dummyTextBody',
+ // image:{
+ // id: null,
+ // svg: svg
+ // },
+ // tags: null,
+ // xywh:"220,470,450,50",
+ // tstart: 1880,
+ // tend:1905,
+ // textEditorStateBustingKey:0,
+ // konvaThing: ['SOME KONVA THING', 'AND ANOTHER KONVA THING', {thirdKonvaThing:'Third Konva thing here'}]
+ // }
+ // const title = dummyAnnot.title
+ const dumbIimage = {
+ id: null,
+ svg,
+ };
+ //
+ // const konvaThing = dummyAnnot.konvaThing;
+ state.image = dumbIimage;
+ state.konvaThing = ['SOME KONVA THING', 'AND ANOTHER KONVA THING', { thirdKonvaThing: 'Third Konva thing here' }];
const {
- title,
textBody,
- image,
tags,
xywh,
tstart,
tend,
- textEditorStateBustingKey,
+ image,
+ konvaThing,
} = state;
-
// TODO rename variable for better comprenhension
const svg = await getSvg();
-
const t = (tstart && tend) ? `${tstart},${tend}` : null;
const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody };
-
// TODO promises not handled. Use promiseAll ?
canvases.forEach(async (canvas) => {
const storageAdapter = config.annotation.adapter(canvas.id);
@@ -349,7 +371,7 @@ function AnnotationCreation(props) {
manifestId: canvas.options.resource.id,
svg,
tags,
- title,
+ konvaThing,
}).toJson();
if (annotation) {
@@ -364,15 +386,17 @@ function AnnotationCreation(props) {
});
}
});
-
- // TODO check if we need other thing in state
+ props.closeCompanionWindow('annotationCreation', {
+ id,
+ position: 'right',
+ });
+ // TODO this create a re-render too soon for react and crash the app
setState({
image: { id: null },
svg: null,
tend: 0,
textBody: '',
textEditorStateBustingKey: textEditorStateBustingKey + 1,
- title: '',
tstart: 0,
xywh: null,
});
@@ -403,9 +427,8 @@ function AnnotationCreation(props) {
imageEvent,
} = toolState;
- // TODO : Vérifier ce code, c'est étrange de comprarer un typeof à une chaine de caractère.
const mediaIsVideo = props.mediaVideo !== 'undefined';
- if (mediaIsVideo) {
+ if (mediaIsVideo && valueTime) {
valueTime[0] = tstart;
valueTime[1] = tend;
}
@@ -466,8 +489,8 @@ function AnnotationCreation(props) {
<StyledForm
onSubmit={submitForm}
>
- <TabContext value={value}>
- <TabList value={value} onChange={tabHandler} aria-label="icon tabs">
+ <TabContext value={viewTool}>
+ <TabList value={viewTool} onChange={tabHandler} aria-label="icon tabs">
<StyledTab
icon={<HighlightAltIcon />}
aria-label="TargetSelector"
diff --git a/src/LocalStorageAdapter.js b/src/LocalStorageAdapter.js
index 245d98d01e1e4ce81adb91e1518d51970da93326..25975131c474a87f5f834c86e6d6f377f6eace23 100644
--- a/src/LocalStorageAdapter.js
+++ b/src/LocalStorageAdapter.js
@@ -15,6 +15,7 @@ export default class LocalStorageAdapter {
const annotationPage = await this.all() || emptyAnnoPage;
annotationPage.items.push(annotation);
localStorage.setItem(this.annotationPageId, JSON.stringify(annotationPage));
+ console.log('CREATE ANNOTATION', annotationPage)
return annotationPage;
}
@@ -25,6 +26,7 @@ export default class LocalStorageAdapter {
const currentIndex = annotationPage.items.findIndex((item) => item.id === annotation.id);
annotationPage.items.splice(currentIndex, 1, annotation);
localStorage.setItem(this.annotationPageId, JSON.stringify(annotationPage));
+ console.log('UPDATE ANNOTATION', annotationPage)
return annotationPage;
}
return null;
diff --git a/src/WebAnnotation.js b/src/WebAnnotation.js
index 55a4d80f5292381ae5226436bfa81605af7c4ae2..6a2135af367b45b17aa7115b52060f88826f13fa 100644
--- a/src/WebAnnotation.js
+++ b/src/WebAnnotation.js
@@ -2,9 +2,8 @@
export default class WebAnnotation {
/** */
constructor({
- canvasId, id, fragsel, image, body, tags, svg, manifestId, title
+ canvasId, id, fragsel, image, body, tags, svg, manifestId, konvaThing
}) {
- this.title = title,
this.id = id;
this.canvasId = canvasId;
this.fragsel = fragsel;
@@ -13,6 +12,7 @@ export default class WebAnnotation {
this.svg = svg;
this.image = image;
this.manifestId = manifestId;
+ this.konvaThing = konvaThing;
}
/** */
@@ -23,6 +23,7 @@ export default class WebAnnotation {
motivation: 'commenting',
target: this.target(),
type: 'Annotation',
+ konvaThing: this.konvaThing
};
}
@@ -45,13 +46,6 @@ export default class WebAnnotation {
};
bodies.push(imgBody);
}
- if(this.title){
- const title={
- type: 'AnnotationTitle',
- value: this.title,
- }
- bodies.push(title)
- }
if (this.tags) {
bodies = bodies.concat(this.tags.map((tag) => ({
diff --git a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js
index eb8cc45fc057b9d59ea3c78c69a962d80c991622..f6b18863d42da790ae0bca71ace53d16707658f1 100644
--- a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js
+++ b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js
@@ -9,7 +9,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import StrokeColorIcon from '@mui/icons-material/BorderColor';
import LineWeightIcon from '@mui/icons-material/LineWeight';
import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
import ClosedPolygonIcon from '@mui/icons-material/ChangeHistory';
import OpenPolygonIcon from '@mui/icons-material/ShowChart';
import PropTypes from 'prop-types';
@@ -62,6 +62,9 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
popoverLineWeightAnchorEl: null,
});
+ useEffect(()=>{
+ //TODO: This useEffect fix the bug on konva to svg but may be useless
+ },[])
// Set unused default color to avoid error on render
const currentColor = toolOptions.currentColorType ? rgbaToObj(toolState[toolOptions.currentColorType]) : 'rgba(255, 0, 0, 0.5)';