Skip to content
Snippets Groups Projects
Commit 13dc74b7 authored by chris's avatar chris
Browse files

move setTops calculation

parent 4a44c8ef
No related branches found
No related tags found
1 merge request!82Comments areas
Hide whitespace changes
Inline Side-by-side
wax-prosemirror-components/src/components/comments/CommentComponent.js
+ 95
− 4
View file @ 13dc74b7
......@@ -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>;
};
......
wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+ 2
− 98
View file @ 13dc74b7
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 => {
......
wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
+ 2
− 2
View file @ 13dc74b7
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment