Skip to content

Commit 356f820

Browse files
seveibarseveibar
committed
relationship arrows initial rendering
1 parent 9c60242 commit 356f820

File tree

10 files changed

+692
-109
lines changed

10 files changed

+692
-109
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"dependencies": {
66
"react-hotkeys": "^2.0.0",
77
"react-material-workspace-layout": "^0.1.6",
8+
"react-measure": "^2.3.0",
89
"use-event-callback": "^0.1.0"
910
},
1011
"scripts": {

‎src/components/Document/index.js‎

Lines changed: 111 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,60 @@
11
// @flow
22

3-
import React, { useState } from "react"
4-
import type { SequenceItem } from "../../types"
5-
import { makeStyles } from "@material-ui/styles"
3+
import React, { useState, useRef } from "react"
4+
import type {
5+
SequenceItem as SequenceItemData,
6+
Relationship
7+
} from "../../types"
8+
import { styled } from "@material-ui/styles"
69
import stringToSequence from "../../string-to-sequence.js"
710
import Tooltip from "@material-ui/core/Tooltip"
11+
import Measure from "react-measure"
812

9-
const useStyles = makeStyles({})
13+
const Container = styled("div")(({ relationshipsOn }) => ({
14+
lineHeight: 1.5,
15+
marginTop: 64,
16+
display: "flex",
17+
flexWrap: "wrap"
18+
}))
19+
20+
const SequenceItem = styled("span")(({ color, relationshipsOn }) => ({
21+
display: "inline-flex",
22+
backgroundColor: color,
23+
color: "#fff",
24+
padding: 4,
25+
margin: 4,
26+
marginBottom: relationshipsOn ? 64 : 4,
27+
paddingLeft: 10,
28+
paddingRight: 10,
29+
borderRadius: 4,
30+
userSelect: "none",
31+
"&.unlabeled": {
32+
color: "#333",
33+
paddingTop: 4,
34+
paddingBottom: 4,
35+
paddingLeft: 2,
36+
paddingRight: 2
37+
}
38+
}))
39+
40+
const LabeledText = styled("div")({
41+
display: "inline-flex",
42+
cursor: "pointer",
43+
alignSelf: "center",
44+
fontSize: 11,
45+
width: 18,
46+
height: 18,
47+
alignItems: "center",
48+
justifyContent: "center",
49+
marginLeft: 4,
50+
borderRadius: 9,
51+
color: "#fff",
52+
backgroundColor: "rgba(0,0,0,0.2)"
53+
})
1054

1155
type Props = {
12-
sequence: Array<SequenceItem>,
56+
sequence: Array<SequenceItemData>,
57+
relationships: Array<Relationship>,
1358
canModifySequence?: boolean,
1459
onSequenceChange?: (Array<SequenceItem>) => any,
1560
onHighlightedChanged?: (Array<number>) => any,
@@ -19,11 +64,13 @@ type Props = {
1964

2065
export default function Document({
2166
sequence,
67+
relationships,
2268
onHighlightedChanged = () => null,
2369
onSequenceChange = () => null,
2470
nothingHighlighted = false,
2571
colorLabelMap = {}
2672
}: Props) {
73+
const sequenceItemPositionsRef = useRef({})
2774
const [mouseDown, changeMouseDown] = useState()
2875
const [
2976
[firstSelected, lastSelected],
@@ -46,95 +93,76 @@ export default function Document({
4693
highlightedItems.push(i)
4794
}
4895

96+
console.log(sequenceItemPositionsRef.current)
97+
4998
return (
50-
<div
99+
<Container
100+
relationshipsOn={Boolean(relationships)}
51101
onMouseDown={() => changeMouseDown(true)}
52102
onMouseUp={() => changeMouseDown(false)}
53103
>
54104
{sequence.map((seq, i) => (
55-
<span
56-
key={i}
57-
onMouseDown={() => {
58-
if (seq.label) return
59-
changeHighlightedRange([i, i])
60-
}}
61-
onMouseMove={() => {
62-
if (seq.label) return
63-
if (mouseDown && i !== lastSelected) {
64-
changeHighlightedRange([
65-
firstSelected === null ? i : firstSelected,
66-
i
67-
])
68-
}
105+
<Measure
106+
offset
107+
key={seq.textId || i}
108+
onResize={contentRect => {
109+
if (!sequenceItemPositionsRef.current) return
110+
sequenceItemPositionsRef.current[seq.textId] = contentRect
69111
}}
70-
style={
71-
seq.label
72-
? {
73-
display: "inline-flex",
74-
backgroundColor:
75-
seq.color || colorLabelMap[seq.label] || "#333",
76-
color: "#fff",
77-
padding: 4,
78-
margin: 4,
79-
paddingLeft: 10,
80-
paddingRight: 10,
81-
borderRadius: 4,
82-
userSelect: "none"
83-
}
84-
: {
85-
display: "inline-flex",
86-
backgroundColor:
87-
seq.text !== " " && highlightedItems.includes(i)
88-
? "#ccc"
89-
: "inherit",
90-
color: "#333",
91-
marginTop: 4,
92-
marginBottom: 4,
93-
paddingTop: 4,
94-
paddingBottom: 4,
95-
paddingLeft: 2,
96-
paddingRight: 2,
97-
userSelect: "none"
98-
}
99-
}
100-
key={i}
101112
>
102-
{seq.label ? (
103-
<Tooltip title={seq.label} placement="bottom">
104-
<div>{seq.text}</div>
105-
</Tooltip>
106-
) : (
107-
<div>{seq.text}</div>
108-
)}
109-
{seq.label && (
110-
<div
111-
onClick={() => {
112-
onSequenceChange(
113-
sequence
114-
.flatMap(s => (s !== seq ? s : stringToSequence(s.text)))
115-
.filter(s => s.text.length > 0)
116-
)
113+
{({ measureRef }) => (
114+
<SequenceItem
115+
ref={measureRef}
116+
relationshipsOn={Boolean(relationships)}
117+
onMouseDown={() => {
118+
if (seq.label) return
119+
changeHighlightedRange([i, i])
117120
}}
118-
style={{
119-
display: "inline-flex",
120-
cursor: "pointer",
121-
alignSelf: "center",
122-
fontSize: 11,
123-
width: 18,
124-
height: 18,
125-
alignItems: "center",
126-
justifyContent: "center",
127-
marginLeft: 4,
128-
borderRadius: 9,
129-
color: "#fff",
130-
backgroundColor: "rgba(0,0,0,0.2)"
121+
onMouseMove={() => {
122+
if (seq.label) return
123+
if (mouseDown && i !== lastSelected) {
124+
changeHighlightedRange([
125+
firstSelected === null ? i : firstSelected,
126+
i
127+
])
128+
}
131129
}}
130+
className={seq.label ? "label" : "unlabeled"}
131+
color={
132+
seq.label
133+
? seq.color || colorLabelMap[seq.label] || "#333"
134+
: seq.text !== " " && highlightedItems.includes(i)
135+
? "#ccc"
136+
: "inherit"
137+
}
138+
key={i}
132139
>
133-
<span>{"\u2716"}</span>
134-
</div>
140+
{seq.label ? (
141+
<Tooltip title={seq.label} placement="bottom">
142+
<div>{seq.text}</div>
143+
</Tooltip>
144+
) : (
145+
<div>{seq.text}</div>
146+
)}
147+
{seq.label && (
148+
<LabeledText
149+
onClick={() => {
150+
onSequenceChange(
151+
sequence
152+
.flatMap(s =>
153+
s !== seq ? s : stringToSequence(s.text)
154+
)
155+
.filter(s => s.text.length > 0)
156+
)
157+
}}
158+
>
159+
<span>{"\u2716"}</span>
160+
</LabeledText>
161+
)}
162+
</SequenceItem>
135163
)}
136-
</span>
164+
</Measure>
137165
))}
138-
</div>
166+
</Container>
139167
)
140168
}

‎src/components/Document/index.story.js‎

Lines changed: 51 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,54 @@ import { action } from "@storybook/addon-actions"
77

88
import Document from "./"
99

10-
storiesOf("Document", module).add("Basic", () => (
11-
<Document
12-
onSequenceChange={action("onSequenceChange")}
13-
onHighlightedChanged={action("onHighlightedChanged")}
14-
sequence={`Barack Hussein Obama II (born August 4, 1961) is an American attorney and politician who served as the 44th President of the United States from January 20, 2009, to January 20, 2017. A member of the Democratic Party, he was the first African American to serve as president. He was previously a United States Senator from Illinois and a member of the Illinois State Senate.`
15-
.split(" ")
16-
.map(text =>
17-
Math.random() < 0.9
18-
? { text: text + " " }
19-
: {
20-
text: text + " ",
21-
label:
22-
"somelabel" +
23-
Math.random()
24-
.toString()
25-
.slice(-4),
26-
color: "#9638F9"
27-
}
28-
)}
29-
/>
30-
))
10+
storiesOf("Document", module)
11+
.add("Basic", () => (
12+
<Document
13+
onSequenceChange={action("onSequenceChange")}
14+
onHighlightedChanged={action("onHighlightedChanged")}
15+
sequence={`Barack Hussein Obama II (born August 4, 1961) is an American attorney and politician who served as the 44th President of the United States from January 20, 2009, to January 20, 2017. A member of the Democratic Party, he was the first African American to serve as president. He was previously a United States Senator from Illinois and a member of the Illinois State Senate.`
16+
.split(" ")
17+
.map(text =>
18+
Math.random() < 0.9
19+
? { text: text + " " }
20+
: {
21+
text: text + " ",
22+
label:
23+
"somelabel" +
24+
Math.random()
25+
.toString()
26+
.slice(-4),
27+
color: "#9638F9"
28+
}
29+
)}
30+
/>
31+
))
32+
.add("Relationships", () => (
33+
<Document
34+
onSequenceChange={action("onSequenceChange")}
35+
onHighlightedChanged={action("onHighlightedChanged")}
36+
sequence={`Barack Hussein Obama II (born August 4, 1961) is an American attorney and politician`
37+
.split(" ")
38+
.map((text, i) =>
39+
Math.random() < 0.9
40+
? { text: text + " ", textId: `l${i}` }
41+
: {
42+
text: text + " ",
43+
textId: `l${i}`,
44+
label:
45+
"somelabel" +
46+
Math.random()
47+
.toString()
48+
.slice(-4),
49+
color: "#9638F9"
50+
}
51+
)}
52+
relationships={[
53+
{
54+
from: "l0",
55+
to: "l4",
56+
label: "was eaten by"
57+
}
58+
]}
59+
/>
60+
))

0 commit comments

Comments
 (0)