diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js index 8d24cb4f876ca1b51be22ec5214c05789f092c97..3558617fa7bf8a3548399f01e0ae056e916c338b 100644 --- a/src/AnnotationCreation.js +++ b/src/AnnotationCreation.js @@ -74,11 +74,13 @@ function AnnotationCreation(props) { if (Array.isArray(props.annotation.target.selector)) { props.annotation.target.selector.forEach((selector) => { if (selector.type === 'SvgSelector') { + console.log('SVG SELECTOR ', selector.value); annoState.svg = selector.value; } else if (selector.type === 'FragmentSelector') { // TODO proper fragment selector extraction annoState.xywh = geomFromAnnoTarget(selector.value); [tstart, tend] = timeFromAnnoTarget(selector.value); + console.log('FRAGMENT SELECTOR', selector.value); } }); } else { @@ -86,9 +88,13 @@ function AnnotationCreation(props) { // TODO does this happen ? when ? where are fragments selectors ? } } else if (typeof props.annotation.target === 'string') { + console.log('props.annotation.target', props.annotation.target); annoState.xywh = geomFromAnnoTarget(props.annotation.target); [tstart, tend] = timeFromAnnoTarget(props.annotation.target); } + console.log('props.annotation.target', props.annotation.target); + + console.log('ANNOSTATE', annoState); } // If we don't have tstart setted, we are creating a new annotation. @@ -231,12 +237,10 @@ function AnnotationCreation(props) { }; /** */ - const updateGeometry = ({ svg, xywh }) => { - setState((prevState) => ({ - ...prevState, - svg, - xywh, - })); + const updateGeometry = ({ xywh }) => { + console.log(xywh) + setState({...state, xywh: xywh}) + console.log(xywh) }; /** */ @@ -269,8 +273,11 @@ function AnnotationCreation(props) { * This image will be put in overlay of the iiif media */ const getSvg = async () => { + console.log('ENTER GET SVG'); const stage = window.Konva.stages.find((s) => s.attrs.id === props.windowId); + console.log('STAGE', stage); const svg = await exportStageSVG(stage, false); // TODO clean + console.log('svg', svg); return svg; }; @@ -300,6 +307,8 @@ function AnnotationCreation(props) { */ const submitForm = async (e) => { e.preventDefault(); + + console.log('ENTER SUBMIT FORM'); // 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 @@ -308,7 +317,6 @@ function AnnotationCreation(props) { ...prevState, activeTool: 'cursor', })); - return; } const { @@ -353,6 +361,7 @@ function AnnotationCreation(props) { konvaThing, } = state; // TODO rename variable for better comprenhension + console.log('CALL GET SVG INTO SUBMIT FORM'); const svg = await getSvg(); const t = (tstart && tend) ? `${tstart},${tend}` : null; const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody }; @@ -373,7 +382,7 @@ function AnnotationCreation(props) { tags, konvaThing, }).toJson(); - + console.log('anno', anno); if (annotation) { storageAdapter.update(anno) .then((annoPage) => { diff --git a/src/AnnotationCreationUtils.js b/src/AnnotationCreationUtils.js index 387fbeab8ad3493ac6500962376324791237e69b..b57a82f3e18852257dcaea4fe65ff9f7bd1c9fe7 100644 --- a/src/AnnotationCreationUtils.js +++ b/src/AnnotationCreationUtils.js @@ -12,10 +12,13 @@ export function timeFromAnnoTarget(annotarget) { /** Extract xywh from annotation target */ export function geomFromAnnoTarget(annotarget) { console.info('TODO proper xywh extraction from: ', annotarget); + console.log(annotarget) const r = /xywh=((-?[0-9]+,?)+)/.exec(annotarget); if (!r || r.length !== 3) { + console.log('QUE DALLE') return ''; } + console.log(r[1]) return r[1]; } diff --git a/src/WebAnnotation.js b/src/WebAnnotation.js index 6a2135af367b45b17aa7115b52060f88826f13fa..d5a4a51a655db6659230eabb2e69a056cf5e4732 100644 --- a/src/WebAnnotation.js +++ b/src/WebAnnotation.js @@ -23,7 +23,7 @@ export default class WebAnnotation { motivation: 'commenting', target: this.target(), type: 'Annotation', - konvaThing: this.konvaThing + konvaThing: this.konvaThing, }; } diff --git a/src/annotationForm/AnnotationDrawing.js b/src/annotationForm/AnnotationDrawing.js index faa59e856674486bf9404c4ac32c4d4bd34425d4..748eabe1f7a5711785fa31607062d8d4c070f286 100644 --- a/src/annotationForm/AnnotationDrawing.js +++ b/src/annotationForm/AnnotationDrawing.js @@ -217,6 +217,10 @@ function AnnotationDrawing(props) { setIsDrawing(true); setShapes([...shapes, shape]); setCurrentShape(shape); + console.log('UPDATE GEO') + const xywh = {x: shape.x, y: shape.y, w: shape.width, h: shape.height} + console.log(xywh) + props.updateGeometry(xywh) break; case SHAPES_TOOL.ELLIPSE: shape = { diff --git a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js index f6b18863d42da790ae0bca71ace53d16707658f1..aad70440532faa7bc0e1c0060f4f294b3816b599 100644 --- a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js +++ b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js @@ -62,9 +62,6 @@ 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)'; @@ -131,6 +128,9 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) { /** Update color : fillColor or strokeColor */ const updateColor = (color) => { + console.log('color', color) + console.log('color.rgb', color.rgb) + console.log(window.Konva.stages) updateToolState({ ...toolState, [toolOptions.currentColorType]: objToRgba(color.rgb),