diff --git a/wax-prosemirror-components/src/components/comments/CommentComponent.js b/wax-prosemirror-components/src/components/comments/CommentComponent.js
index 7c305d7ee86ee35339710452d409c8c8c89f4c68..299632185b584afad2953034c0224ad2e05a7b96 100644
--- a/wax-prosemirror-components/src/components/comments/CommentComponent.js
+++ b/wax-prosemirror-components/src/components/comments/CommentComponent.js
@@ -3,23 +3,113 @@ import React, {
useState,
useEffect,
useMemo,
- Fragment
+ Fragment,
+ useCallback
} from "react";
import styled from "styled-components";
import { groupBy } from "lodash";
import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
import { DocumentHelpers } from "wax-prosemirror-utilities";
import CommentsBoxList from "./CommentsBoxList";
+import { each } from "lodash";
export default ({ area }) => {
- const { view: { main }, activeView } = useContext(WaxContext);
+ const { view: { main } } = useContext(WaxContext);
const [comments, setComments] = useState([]);
+ const [position, setPosition] = useState();
+
+ const setTops = useCallback(() => {
+ const result = [];
+ const boxes = [];
+ let commentEl = null;
+ let annotationTop = 0;
+ let boxHeight = 0;
+ let top = 0;
+ const allCommentsTop = {};
+
+ each(comments[area], (comment, pos) => {
+ const WaxSurface = main.dom.getBoundingClientRect();
+ const { attrs: { id } } = comment;
+ let isActive = false;
+ // if (comment.id === active) isActive = true
+
+ //annotation top
+ if (area === "main") {
+ commentEl = document.querySelector(`span[data-id="${id}"]`);
+ annotationTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
+ } else {
+ const panelWrapper = document.getElementsByClassName("panelWrapper");
+ const panelWrapperHeight = panelWrapper[0].getBoundingClientRect()
+ .height;
+ commentEl = document
+ .querySelector("#notes-container")
+ .querySelector(`span[data-id="${id}"]`);
+ annotationTop =
+ commentEl.getBoundingClientRect().top - panelWrapperHeight - 50;
+ }
+
+ // get height of this comment box
+ const boxEl = document.querySelector(`div[data-comment="comment-${id}"]`);
+ if (boxEl) boxHeight = parseInt(boxEl.offsetHeight);
+
+ // keep the elements to add the tops to at the end
+ boxes.push(boxEl);
+
+ // where the box should move to
+ top = annotationTop;
+
+ // if the above comment box has already taken up the height, move down
+ if (pos > 0) {
+ const previousBox = comments[area][pos - 1];
+ const previousEndHeight = previousBox.endHeight;
+ if (annotationTop < previousEndHeight) {
+ top = previousEndHeight + 2;
+ }
+ }
+ // store where the box ends to be aware of overlaps in the next box
+ comment.endHeight = top + boxHeight + 2;
+ result[pos] = top;
+
+ // if active, move as many boxes above as needed to bring it to the annotation's height
+ if (isActive) {
+ comment.endHeight = annotationTop + boxHeight + 2;
+ result[pos] = annotationTop;
+
+ let b = true;
+ let i = pos;
+
+ // first one active, none above
+ if (i === 0) b = false;
+
+ while (b) {
+ const boxAbove = comments[area][i - 1];
+ const boxAboveEnds = boxAbove.endHeight;
+ const currentTop = result[i];
+
+ const doesOverlap = boxAboveEnds > currentTop;
+ if (doesOverlap) {
+ const overlap = boxAboveEnds - currentTop;
+ result[i - 1] -= overlap;
+ }
+
+ if (!doesOverlap) b = false;
+ if (i <= 1) b = false;
+ i -= 1;
+ }
+ }
+
+ allCommentsTop[id] = top;
+ });
+ return allCommentsTop;
+ });
+
useEffect(
() => {
setComments(updateComments(main));
+ setPosition(setTops());
},
- [JSON.stringify(updateComments(main))]
+ [JSON.stringify(updateComments(main)), JSON.stringify(setTops())]
);
const CommentComponent = useMemo(
@@ -28,9 +118,10 @@ export default ({ area }) => {
comments={comments[area] || []}
area={area}
view={main}
+ position={position}
/>
),
- [comments[area] || []]
+ [comments[area] || [], position]
);
return <Fragment>{CommentComponent}</Fragment>;
};
diff --git a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
index 88e6b209593a43eadc4a7d3df5820091949ee9d2..31b19d42940e8fd9bb0b964841af142039d99a7c 100644
--- a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+++ b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
@@ -1,103 +1,7 @@
-import React, { Fragment, useState, useEffect, useCallback } from "react";
-import { each } from "lodash";
+import React, { Fragment } from "react";
import CommentBox from "./CommentBox";
-export default ({ comments, view, area }) => {
- const [position, setPosition] = useState();
-
- const setTops = useCallback(() => {
- const result = [];
- const boxes = [];
- let commentEl = null;
- let annotationTop = 0;
- let boxHeight = 0;
- let top = 0;
- const allCommentsTop = {};
-
- each(comments, (comment, pos) => {
- const WaxSurface = view.dom.getBoundingClientRect();
- const { attrs: { id } } = comment;
- let isActive = false;
- // if (comment.id === active) isActive = true
-
- //annotation top
- if (area === "main") {
- commentEl = document.querySelector(`span[data-id="${id}"]`);
- annotationTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
- } else {
- const panelWrapper = document.getElementsByClassName("panelWrapper");
- const panelWrapperHeight = panelWrapper[0].getBoundingClientRect()
- .height;
- commentEl = document
- .querySelector("#notes-container")
- .querySelector(`span[data-id="${id}"]`);
- annotationTop =
- commentEl.getBoundingClientRect().top - panelWrapperHeight - 50;
- }
-
- // get height of this comment box
- const boxEl = document.querySelector(`div[data-comment="comment-${id}"]`);
- if (boxEl) boxHeight = parseInt(boxEl.offsetHeight);
-
- // keep the elements to add the tops to at the end
- boxes.push(boxEl);
-
- // where the box should move to
- top = annotationTop;
-
- // if the above comment box has already taken up the height, move down
- if (pos > 0) {
- const previousBox = comments[pos - 1];
- const previousEndHeight = previousBox.endHeight;
- if (annotationTop < previousEndHeight) {
- top = previousEndHeight + 2;
- }
- }
- // store where the box ends to be aware of overlaps in the next box
- comment.endHeight = top + boxHeight + 2;
- result[pos] = top;
-
- // if active, move as many boxes above as needed to bring it to the annotation's height
- if (isActive) {
- comment.endHeight = annotationTop + boxHeight + 2;
- result[pos] = annotationTop;
-
- let b = true;
- let i = pos;
-
- // first one active, none above
- if (i === 0) b = false;
-
- while (b) {
- const boxAbove = comments[i - 1];
- const boxAboveEnds = boxAbove.endHeight;
- const currentTop = result[i];
-
- const doesOverlap = boxAboveEnds > currentTop;
- if (doesOverlap) {
- const overlap = boxAboveEnds - currentTop;
- result[i - 1] -= overlap;
- }
-
- if (!doesOverlap) b = false;
- if (i <= 1) b = false;
- i -= 1;
- }
- }
-
- allCommentsTop[id] = top;
- });
-
- return allCommentsTop;
- });
-
- useEffect(
- () => {
- setPosition(setTops());
- },
- [JSON.stringify(setTops())]
- );
-
+export default ({ comments, view, position }) => {
return (
<Fragment>
{comments.map(comment => {
diff --git a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
index fa78e434fdac68ad12716a77b63492ee726a37bc..6657c7ed2845804a7301e4ca68be8fe643923098 100644
--- a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
+++ b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
@@ -6,7 +6,7 @@ import NoteNumber from "./NoteNumber";
const NoteEditorContainerStyled = styled.div`
display: flex;
flex-direction: row;
- min-height: 40px;
+ min-height: 28px;
width: 100%;
position: relative;
`;
@@ -17,7 +17,7 @@ const NoteStyled = styled.div`
width: 100%;
min-height: 20px;
margin-top: 10px;
- height: 59%;
+ height: 100%;
border-bottom: 1px solid black;
&:focus {
outline: none;