-
-
Notifications
You must be signed in to change notification settings - Fork 279
/
summary.ts
246 lines (230 loc) · 7.36 KB
/
summary.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
import type { MindElixirInstance, Topic } from '.'
import { generateUUID, getOffsetLT, setAttributes } from './utils'
import { findEle } from './utils/dom'
import { editSvgText } from './utils/svg'
export type Summary = {
id: string
text: string
parent: string
start: number
end: number
}
export type SummarySvgGroup = SVGGElement & {
children: [SVGPathElement, SVGTextElement]
summaryObj: Summary
}
const calcRange = function (nodes: Topic[]) {
if (nodes.length === 0) throw new Error('No selected node.')
if (nodes.length === 1) {
const obj = nodes[0].nodeObj
const parent = nodes[0].nodeObj.parent
if (!parent) throw new Error('Can not select root node.')
const i = parent.children!.findIndex(child => obj === child)
return {
parent: parent.id,
start: i,
end: i,
}
}
let maxLen = 0
const parentChains = nodes.map(item => {
let node = item.nodeObj
const parentChain = []
while (node.parent) {
const parent = node.parent
const siblings = parent.children
const index = siblings?.indexOf(node)
node = parent
parentChain.unshift({ node, index })
}
if (parentChain.length > maxLen) maxLen = parentChain.length
return parentChain
})
let index = 0
// find minimum common parent
findMcp: for (; index < maxLen; index++) {
const base = parentChains[0][index]?.node
for (let i = 1; i < parentChains.length; i++) {
const parentChain = parentChains[i]
if (parentChain[index]?.node !== base) {
break findMcp
}
}
}
if (!index) throw new Error('Can not select root node.')
const range = parentChains.map(chain => chain[index - 1].index).sort()
const min = range[0] || 0
const max = range[range.length - 1] || 0
const parent = parentChains[0][index - 1].node
if (parent.root) throw new Error('Please select nodes in the same main topic.')
return {
parent: parent.id,
start: min,
end: max,
}
}
const creatGroup = function (id: string) {
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g') as SummarySvgGroup
group.setAttribute('id', id)
return group
}
const createPath = function (d: string, color?: string) {
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
setAttributes(path, {
d,
stroke: color || '#666',
fill: 'none',
'stroke-linecap': 'round',
'stroke-width': '2',
})
return path
}
const createText = function (string: string, x: number, y: number, anchor: 'start' | 'end', color?: string) {
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
setAttributes(text, {
'text-anchor': anchor,
x: x + '',
y: y + '',
fill: color || '#666',
})
text.innerHTML = string
return text
}
const getWrapper = (id: string) => findEle(id).parentElement.parentElement
const getDirection = function ({ parent, start }: Summary) {
const parentEl = findEle(parent)
const parentObj = parentEl.nodeObj
let side: 'lhs' | 'rls'
if (parentObj.root === true) {
side = findEle(parentObj.children![start].id).closest('me-main')?.className as 'lhs' | 'rls'
} else {
side = parentEl.closest('me-main')?.className as 'lhs' | 'rls'
}
return side
}
const drawSummary = function (mei: MindElixirInstance, summary: Summary) {
const { id, text: summaryText, parent, start, end } = summary
const container = mei.nodes
const parentEl = findEle(parent)
const parentObj = parentEl.nodeObj
const side = getDirection(summary)
let left = Infinity
let right = 0
let startTop = 0
let endBottom = 0
for (let i = start; i <= end; i++) {
const child = parentObj.children?.[i]
if (!child) {
console.warn('Child not found')
mei.removeSummary(id)
return null
}
const wrapper = getWrapper(child.id)
const { offsetLeft, offsetTop } = getOffsetLT(container, wrapper)
if (i === start) startTop = offsetTop
if (i === end) endBottom = offsetTop + wrapper.offsetHeight
if (offsetLeft < left) left = offsetLeft
if (wrapper.offsetWidth + offsetLeft > right) right = wrapper.offsetWidth + offsetLeft
}
let path
let text
const top = startTop + 10
const bottom = endBottom + 10
const md = (top + bottom) / 2
const color = mei.theme.cssVar['--color']
if (side === 'lhs') {
path = createPath(`M ${left + 10} ${top} c -5 0 -10 5 -10 10 L ${left} ${bottom - 10} c 0 5 5 10 10 10 M ${left} ${md} h -10`, color)
text = createText(summaryText, left - 20, md + 6, 'end', color)
} else {
path = createPath(`M ${right - 10} ${top} c 5 0 10 5 10 10 L ${right} ${bottom - 10} c 0 5 -5 10 -10 10 M ${right} ${md} h 10`, color)
text = createText(summaryText, right + 20, md + 6, 'start', color)
}
const group = creatGroup('s-' + id)
group.appendChild(path)
group.appendChild(text)
group.summaryObj = summary
mei.summarySvg.appendChild(group)
return group
}
export const createSummary = function (this: MindElixirInstance) {
let nodes: Topic[] = []
if (this.currentNode) {
nodes = [this.currentNode]
} else if (this.currentNodes) {
nodes = this.currentNodes
}
const { parent, start, end } = calcRange(nodes)
const summary = { id: generateUUID(), parent, start, end, text: 'summary' }
const g = drawSummary(this, summary) as SummarySvgGroup
this.summaries.push(summary)
this.editSummary(g)
this.bus.fire('operation', {
name: 'createSummary',
obj: summary,
})
}
export const removeSummary = function (this: MindElixirInstance, id: string) {
const index = this.summaries.findIndex(summary => summary.id === id)
if (index > -1) {
this.summaries.splice(index, 1)
document.querySelector('#s-' + id)?.remove()
}
this.bus.fire('operation', {
name: 'removeSummary',
obj: { id },
})
}
export const selectSummary = function (this: MindElixirInstance, el: SummarySvgGroup) {
const box = el.children[1].getBBox()
const padding = 6
const radius = 3
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
setAttributes(rect, {
x: box.x - padding + '',
y: box.y - padding + '',
width: box.width + padding * 2 + '',
height: box.height + padding * 2 + '',
rx: radius + '',
stroke: this.theme.cssVar['--selected'] || '#4dc4ff',
'stroke-width': '2',
fill: 'none',
})
rect.classList.add('selected')
el.appendChild(rect)
this.currentSummary = el
}
export const unselectSummary = function (this: MindElixirInstance) {
this.currentSummary?.querySelector('rect')?.remove()
this.currentSummary = null
}
export const renderSummary = function (this: MindElixirInstance) {
this.summarySvg.innerHTML = ''
this.summaries.forEach(summary => {
try {
drawSummary(this, summary)
} catch (e) {
console.warn('Node may not be expanded')
}
})
this.nodes.insertAdjacentElement('beforeend', this.summarySvg)
}
export const editSummary = function (this: MindElixirInstance, el: SummarySvgGroup) {
console.time('editSummary')
if (!el) return
const textEl = el.childNodes[1] as SVGTextElement
editSvgText(this, textEl, div => {
const node = el.summaryObj
const text = div.textContent?.trim() || ''
if (text === '') node.text = origin
else node.text = text
div.remove()
if (text === origin) return
textEl.innerHTML = node.text
this.linkDiv()
this.bus.fire('operation', {
name: 'finishEditSummary',
obj: node,
})
})
console.timeEnd('editSummary')
}