Skip to content

Commit ee071a1

Browse files
claremacraeclaremacrae
authored
Merge pull request #3668 from obsidian-tasks-group/refactor-renderedListItems
refactor: Simplify interface of rendering code
2 parents 97d61ff + f3f50f1 commit ee071a1

5 files changed

+512
-65
lines changed

‎src/Renderer/HtmlQueryResultsRenderer.ts‎

Lines changed: 17 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export class HtmlQueryResultsRenderer {
4343
public content: HTMLDivElement | null = null;
4444

4545
private readonly ulElementStack: HTMLUListElement[] = [];
46+
private readonly renderedListItems: Set<ListItem> = new Set<ListItem>();
4647

4748
constructor(
4849
renderMarkdown: (
@@ -185,12 +186,12 @@ export class HtmlQueryResultsRenderer {
185186
// will be empty, and no headings will be added.
186187
await this.addGroupHeadings(group.groupHeadings);
187188

188-
const renderedListItems: Set<ListItem> = new Set();
189+
this.renderedListItems.clear();
189190
// TODO re-extract the method to include this back
190191
const taskList = createAndAppendElement('ul', this.getContent());
191192
this.ulElementStack.push(taskList);
192193
try {
193-
await this.createTaskList(group.tasks, queryRendererParameters, renderedListItems);
194+
await this.createTaskList(group.tasks, queryRendererParameters);
194195
} finally {
195196
this.ulElementStack.pop();
196197
}
@@ -200,7 +201,6 @@ export class HtmlQueryResultsRenderer {
200201
private async createTaskList(
201202
listItems: ListItem[],
202203
queryRendererParameters: QueryRendererParameters,
203-
renderedListItems: Set<ListItem>,
204204
): Promise<void> {
205205
const taskList = this.currentULElement();
206206
taskList.classList.add(
@@ -231,14 +231,7 @@ export class HtmlQueryResultsRenderer {
231231
* - Tasks are rendered in the order specified in 'sort by' instructions and default sort order.
232232
*/
233233
if (listItem instanceof Task) {
234-
await this.addTask(
235-
taskLineRenderer,
236-
listItem,
237-
listItemIndex,
238-
queryRendererParameters,
239-
[],
240-
renderedListItems,
241-
);
234+
await this.addTask(taskLineRenderer, listItem, listItemIndex, queryRendererParameters, []);
242235
}
243236
} else {
244237
/* New-style rendering of tasks:
@@ -257,19 +250,18 @@ export class HtmlQueryResultsRenderer {
257250
listItemIndex,
258251
queryRendererParameters,
259252
listItems,
260-
renderedListItems,
261253
);
262254
}
263255
}
264256
}
265257

266-
private willBeRenderedLater(listItem: ListItem, renderedListItems: Set<ListItem>, listItems: ListItem[]) {
258+
private willBeRenderedLater(listItem: ListItem, listItems: ListItem[]) {
267259
const closestParentTask = listItem.findClosestParentTask();
268260
if (!closestParentTask) {
269261
return false;
270262
}
271263

272-
if (!renderedListItems.has(closestParentTask)) {
264+
if (!this.renderedListItems.has(closestParentTask)) {
273265
// This task is a direct or indirect child of another task that we are waiting to draw,
274266
// so don't draw it yet, it will be done recursively later.
275267
if (listItems.includes(closestParentTask)) {
@@ -280,8 +272,8 @@ export class HtmlQueryResultsRenderer {
280272
return false;
281273
}
282274

283-
private alreadyRendered(listItem: ListItem, renderedListItems: Set<ListItem>) {
284-
return renderedListItems.has(listItem);
275+
private alreadyRendered(listItem: ListItem) {
276+
return this.renderedListItems.has(listItem);
285277
}
286278

287279
private async addTaskOrListItemAndChildren(
@@ -290,27 +282,20 @@ export class HtmlQueryResultsRenderer {
290282
taskIndex: number,
291283
queryRendererParameters: QueryRendererParameters,
292284
listItems: ListItem[],
293-
renderedListItems: Set<ListItem>,
294285
) {
295-
if (this.alreadyRendered(listItem, renderedListItems)) {
286+
if (this.alreadyRendered(listItem)) {
296287
return;
297288
}
298289

299-
if (this.willBeRenderedLater(listItem, renderedListItems, listItems)) {
290+
if (this.willBeRenderedLater(listItem, listItems)) {
300291
return;
301292
}
302293

303-
await this.createTaskOrListItem(
304-
taskLineRenderer,
305-
listItem,
306-
taskIndex,
307-
queryRendererParameters,
308-
renderedListItems,
309-
);
310-
renderedListItems.add(listItem);
294+
await this.createTaskOrListItem(taskLineRenderer, listItem, taskIndex, queryRendererParameters);
295+
this.renderedListItems.add(listItem);
311296

312297
for (const childTask of listItem.children) {
313-
renderedListItems.add(childTask);
298+
this.renderedListItems.add(childTask);
314299
}
315300
}
316301

@@ -319,26 +304,11 @@ export class HtmlQueryResultsRenderer {
319304
listItem: ListItem,
320305
taskIndex: number,
321306
queryRendererParameters: QueryRendererParameters,
322-
renderedListItems: Set<ListItem>,
323307
): Promise<void> {
324308
if (listItem instanceof Task) {
325-
await this.addTask(
326-
taskLineRenderer,
327-
listItem,
328-
taskIndex,
329-
queryRendererParameters,
330-
listItem.children,
331-
renderedListItems,
332-
);
309+
await this.addTask(taskLineRenderer, listItem, taskIndex, queryRendererParameters, listItem.children);
333310
} else {
334-
await this.addListItem(
335-
taskLineRenderer,
336-
listItem,
337-
taskIndex,
338-
listItem.children,
339-
queryRendererParameters,
340-
renderedListItems,
341-
);
311+
await this.addListItem(taskLineRenderer, listItem, taskIndex, listItem.children, queryRendererParameters);
342312
}
343313
}
344314

@@ -348,7 +318,6 @@ export class HtmlQueryResultsRenderer {
348318
listItemIndex: number,
349319
children: ListItem[],
350320
queryRendererParameters: QueryRendererParameters,
351-
renderedListItems: Set<ListItem>,
352321
): Promise<void> {
353322
const listItemElement = await taskLineRenderer.renderListItem(this.currentULElement(), listItem, listItemIndex);
354323

@@ -357,7 +326,7 @@ export class HtmlQueryResultsRenderer {
357326
const taskList1 = createAndAppendElement('ul', listItemElement);
358327
this.ulElementStack.push(taskList1);
359328
try {
360-
await this.createTaskList(children, queryRendererParameters, renderedListItems);
329+
await this.createTaskList(children, queryRendererParameters);
361330
} finally {
362331
this.ulElementStack.pop();
363332
}
@@ -370,7 +339,6 @@ export class HtmlQueryResultsRenderer {
370339
taskIndex: number,
371340
queryRendererParameters: QueryRendererParameters,
372341
children: ListItem[],
373-
renderedListItems: Set<ListItem>,
374342
): Promise<void> {
375343
const isFilenameUnique = this.isFilenameUnique({ task }, queryRendererParameters.allMarkdownFiles);
376344
const listItem = await taskLineRenderer.renderTaskLine({
@@ -412,7 +380,7 @@ export class HtmlQueryResultsRenderer {
412380
const taskList1 = createAndAppendElement('ul', listItem);
413381
this.ulElementStack.push(taskList1);
414382
try {
415-
await this.createTaskList(children, queryRendererParameters, renderedListItems);
383+
await this.createTaskList(children, queryRendererParameters);
416384
} finally {
417385
this.ulElementStack.pop();
418386
}

‎tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_should_allow_a_task_to_be_in_multiple_groups.approved.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!--
2+
- [ ] Do exercises #todo #health 🆔 abcdef ⛔ 123456,abc123 🔼 🔁 every day when done 🏁 delete ➕ 2023-07-01 🛫 2023-07-02 ⏳ 2023-07-03 📅 2023-07-04 ❌ 2023-07-06 ✅ 2023-07-05 ^dcf64c
3+
-->
4+
5+
<div>
6+
<button class="plugin-tasks-copy-button">Copy results</button>
7+
<h4 class="tasks-group-heading">For test purposes: heading a</h4>
8+
<ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency" data-task-group-by="function">
9+
<li
10+
class="task-list-item plugin-tasks-list-item"
11+
data-task-priority="medium"
12+
data-task-created="past-4d"
13+
data-task-start="past-3d"
14+
data-task-scheduled="past-2d"
15+
data-task-due="past-1d"
16+
data-task-cancelled="future-1d"
17+
data-task-done="today"
18+
data-task=""
19+
data-line="0"
20+
data-task-status-name="Todo"
21+
data-task-status-type="TODO">
22+
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
23+
<span class="tasks-list-text">
24+
<span class="task-description"><span>Do exercises #todo #health</span></span>
25+
<span class="task-id"><span>🆔 abcdef</span></span>
26+
<span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
27+
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
28+
<span class="task-recurring"><span>🔁 every day when done</span></span>
29+
<span class="task-onCompletion"><span>🏁 delete</span></span>
30+
<span
31+
class="task-created"
32+
data-task-created="past-4d"
33+
title="Click to edit created date, Right-click for more options">
34+
<span>➕ 2023-07-01</span>
35+
</span>
36+
<span
37+
class="task-start"
38+
data-task-start="past-3d"
39+
title="Click to edit start date, Right-click for more options">
40+
<span>🛫 2023-07-02</span>
41+
</span>
42+
<span
43+
class="task-scheduled"
44+
data-task-scheduled="past-2d"
45+
title="Click to edit scheduled date, Right-click for more options">
46+
<span>⏳ 2023-07-03</span>
47+
</span>
48+
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
49+
<span>📅 2023-07-04</span>
50+
</span>
51+
<span
52+
class="task-cancelled"
53+
data-task-cancelled="future-1d"
54+
title="Click to edit cancelled date, Right-click for more options">
55+
<span>❌ 2023-07-06</span>
56+
</span>
57+
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
58+
<span>✅ 2023-07-05</span>
59+
</span>
60+
<span class="task-block-link"><span>^dcf64c</span></span>
61+
</span>
62+
<span class="task-extras">
63+
<span class="tasks-backlink">
64+
(
65+
<a rel="noopener" target="_blank" class="internal-link">fileName &gt; My Header</a>
66+
)
67+
</span>
68+
<a class="tasks-edit" title="Edit task" href="#"></a>
69+
<a class="tasks-postpone" title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
70+
</span>
71+
</li>
72+
</ul>
73+
<h4 class="tasks-group-heading">For test purposes: heading b</h4>
74+
<ul class="contains-task-list plugin-tasks-query-result tasks-layout-hide-urgency" data-task-group-by="function">
75+
<li
76+
class="task-list-item plugin-tasks-list-item"
77+
data-task-priority="medium"
78+
data-task-created="past-4d"
79+
data-task-start="past-3d"
80+
data-task-scheduled="past-2d"
81+
data-task-due="past-1d"
82+
data-task-cancelled="future-1d"
83+
data-task-done="today"
84+
data-task=""
85+
data-line="0"
86+
data-task-status-name="Todo"
87+
data-task-status-type="TODO">
88+
<input class="task-list-item-checkbox" type="checkbox" title="Right-click for options" data-line="0" />
89+
<span class="tasks-list-text">
90+
<span class="task-description"><span>Do exercises #todo #health</span></span>
91+
<span class="task-id"><span>🆔 abcdef</span></span>
92+
<span class="task-dependsOn"><span>⛔ 123456,abc123</span></span>
93+
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
94+
<span class="task-recurring"><span>🔁 every day when done</span></span>
95+
<span class="task-onCompletion"><span>🏁 delete</span></span>
96+
<span
97+
class="task-created"
98+
data-task-created="past-4d"
99+
title="Click to edit created date, Right-click for more options">
100+
<span>➕ 2023-07-01</span>
101+
</span>
102+
<span
103+
class="task-start"
104+
data-task-start="past-3d"
105+
title="Click to edit start date, Right-click for more options">
106+
<span>🛫 2023-07-02</span>
107+
</span>
108+
<span
109+
class="task-scheduled"
110+
data-task-scheduled="past-2d"
111+
title="Click to edit scheduled date, Right-click for more options">
112+
<span>⏳ 2023-07-03</span>
113+
</span>
114+
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
115+
<span>📅 2023-07-04</span>
116+
</span>
117+
<span
118+
class="task-cancelled"
119+
data-task-cancelled="future-1d"
120+
title="Click to edit cancelled date, Right-click for more options">
121+
<span>❌ 2023-07-06</span>
122+
</span>
123+
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
124+
<span>✅ 2023-07-05</span>
125+
</span>
126+
<span class="task-block-link"><span>^dcf64c</span></span>
127+
</span>
128+
<span class="task-extras">
129+
<span class="tasks-backlink">
130+
(
131+
<a rel="noopener" target="_blank" class="internal-link">fileName &gt; My Header</a>
132+
)
133+
</span>
134+
<a class="tasks-edit" title="Edit task" href="#"></a>
135+
<a class="tasks-postpone" title="ℹ️ Due tomorrow, on Thu 6th Jul (right-click for more options)"></a>
136+
</span>
137+
</li>
138+
</ul>
139+
<div class="task-count">1 task</div>
140+
</div>

0 commit comments

Comments
 (0)