Skip to content
Snippets Groups Projects
Commit 3b3f3e4a authored by Anthony's avatar Anthony
Browse files

Merge branch '48-sauvegarder-une-annotation' into 'mui5-tetras-main-stable' 

Resolve "Sauvegarder une annotation"

Closes #48

See merge request !28
parents 181ffcca f50f2a18
Branches
No related tags found
2 merge requests!28Resolve "Sauvegarder une annotation",!10Draft: MigratingAnnotationCreation to MUI5.
Pipeline #1893 failed
Stage: test
Show whitespace changes
Inline Side-by-side
src/AnnotationCreation.js
+ 41
− 18
View file @ 3b3f3e4a
......@@ -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"
......
src/LocalStorageAdapter.js
+ 2
− 0
View file @ 3b3f3e4a
......@@ -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;
......
src/WebAnnotation.js
+ 3
− 9
View file @ 3b3f3e4a
......@@ -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) => ({
......
src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js
+ 4
− 1
View file @ 3b3f3e4a
......@@ -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)';
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment