Skip to content

Commit 5ae570a

Browse files
kishikawakatsumikishikawakatsumi
authored
Merge pull request #189 from SwiftFiddle/refactor2
Refactor
2 parents 899250b + 3b33bee commit 5ae570a

File tree

3 files changed

+217
-210
lines changed

3 files changed

+217
-210
lines changed

‎Public/js/app.js‎

Lines changed: 6 additions & 210 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
"use strict";
22

33
import { Tooltip } from "bootstrap";
4-
import { TreeView } from "./tree_view.js";
4+
import { StructureView } from "./structure_view.js";
55
import { SyntaxView } from "./syntax_view.js";
66
import { StatisticsView } from "./statistics_view.js";
7-
import { Popover } from "./popover.js";
87
import { WebSocketClient } from "./websocket.js";
98
import { debounce } from "./debounce.js";
109

1110
import "../css/editor.css";
12-
import "../css/syntax.css";
1311

1412
import "ace-builds/src-min-noconflict/ace";
1513
import "ace-builds/src-min-noconflict/ext-language_tools";
@@ -50,9 +48,9 @@ export class App {
5048
showPrintMargin: false,
5149
});
5250

53-
this.treeViewContainer = document.getElementById("structure");
54-
this.popover = new Popover();
55-
51+
this.structureView = new StructureView(
52+
document.getElementById("structure")
53+
);
5654
this.syntaxView = new SyntaxView(
5755
document.getElementById("syntax-container")
5856
);
@@ -202,11 +200,8 @@ export class App {
202200
}
203201

204202
updateStructure(structureData) {
205-
this.treeViewContainer.innerHTML = "";
206-
this.treeView = new TreeView(this.treeViewContainer, structureData);
207-
208-
let mouseoverCancel = undefined;
209-
this.treeView.onmouseover = (event, target, data) => {
203+
this.structureView.update(structureData);
204+
this.structureView.onmouseover = (event, target, data) => {
210205
this.editor.selection.setRange(
211206
new Range(
212207
data.range.startRow,
@@ -215,189 +210,6 @@ export class App {
215210
data.range.endColumn
216211
)
217212
);
218-
219-
if (mouseoverCancel) {
220-
cancelAnimationFrame(mouseoverCancel);
221-
}
222-
mouseoverCancel = requestAnimationFrame(() => {
223-
if (!data.structure.length && !data.token) {
224-
return;
225-
}
226-
if (data.structure.length > 0) {
227-
const container = document.createElement("div");
228-
229-
const title = document.createElement("div");
230-
title.classList.add("title");
231-
title.innerText = `${data.text}Syntax`;
232-
container.appendChild(title);
233-
234-
switch (data.type) {
235-
case "decl": {
236-
const label = document.createElement("span");
237-
label.classList.add("badge", "text-bg-light");
238-
label.innerText = "DeclSyntax";
239-
title.appendChild(label);
240-
break;
241-
}
242-
case "expr": {
243-
const label = document.createElement("span");
244-
label.classList.add("badge", "text-bg-light");
245-
label.innerText = "ExprSyntax";
246-
title.appendChild(label);
247-
break;
248-
}
249-
case "pattern": {
250-
const label = document.createElement("span");
251-
label.classList.add("badge", "text-bg-light");
252-
label.innerText = "PatternSyntax";
253-
title.appendChild(label);
254-
break;
255-
}
256-
case "type": {
257-
const label = document.createElement("span");
258-
label.classList.add("badge", "text-bg-light");
259-
label.innerText = "TypeSyntax";
260-
title.appendChild(label);
261-
break;
262-
}
263-
default:
264-
break;
265-
}
266-
267-
const dl = document.createElement("dl");
268-
269-
const dt = document.createElement("dt");
270-
const dd = document.createElement("dd");
271-
272-
dt.innerHTML = "Source Range";
273-
const range = data.range;
274-
// prettier-ignore
275-
dd.innerHTML = `Ln ${range.startRow + 1}, Col ${range.startColumn + 1} - Ln ${range.endRow + 1}, Col ${range.endColumn + 1}`;
276-
277-
dl.appendChild(dt);
278-
dl.appendChild(dd);
279-
280-
for (const property of data.structure) {
281-
const dt = document.createElement("dt");
282-
const dd = document.createElement("dd");
283-
284-
const name = property.name;
285-
const value = property.value;
286-
if (value && value.text && value.kind) {
287-
const text = stripHTMLTag(value.text);
288-
const kind = stripHTMLTag(value.kind);
289-
dt.innerHTML = `${name}`;
290-
dd.innerHTML = `${text}<span class="badge rounded-pill">${kind}</span>`;
291-
} else if (value && value.text) {
292-
const text = stripHTMLTag(value.text);
293-
dt.innerHTML = `${name}`;
294-
dd.innerHTML = `${text}`;
295-
}
296-
dl.appendChild(dt);
297-
dl.appendChild(dd);
298-
}
299-
container.appendChild(dl);
300-
301-
this.popover.content = container.innerHTML;
302-
}
303-
if (data.token) {
304-
const container = document.createElement("div");
305-
306-
const title = document.createElement("div");
307-
title.classList.add("title");
308-
title.innerText = "TokenSyntax";
309-
container.appendChild(title);
310-
311-
const dl = document.createElement("dl");
312-
313-
{
314-
const dt = document.createElement("dt");
315-
const dd = document.createElement("dd");
316-
317-
dt.innerHTML = "Source Range";
318-
const range = data.range;
319-
// prettier-ignore
320-
dd.innerHTML = `Ln ${range.startRow + 1}, Col ${range.startColumn + 1} - Ln ${range.endRow + 1}, Col ${range.endColumn + 1}`;
321-
322-
dl.appendChild(dt);
323-
dl.appendChild(dd);
324-
}
325-
326-
{
327-
const dt = document.createElement("dt");
328-
dt.innerHTML = "kind";
329-
dl.appendChild(dt);
330-
331-
const dd = document.createElement("dd");
332-
dd.innerHTML = stripHTMLTag(data.token.kind);
333-
dl.appendChild(dd);
334-
}
335-
{
336-
const dt = document.createElement("dt");
337-
dt.innerHTML = "leadingTrivia";
338-
dl.appendChild(dt);
339-
340-
const dd = document.createElement("dd");
341-
dd.innerHTML = stripHTMLTag(data.token.leadingTrivia);
342-
dl.appendChild(dd);
343-
}
344-
{
345-
const dt = document.createElement("dt");
346-
dt.innerHTML = "text";
347-
dl.appendChild(dt);
348-
349-
const dd = document.createElement("dd");
350-
dd.innerHTML = stripHTMLTag(data.text);
351-
dl.appendChild(dd);
352-
}
353-
{
354-
const dt = document.createElement("dt");
355-
dt.innerHTML = "trailingTrivia";
356-
dl.appendChild(dt);
357-
358-
const dd = document.createElement("dd");
359-
dd.innerHTML = stripHTMLTag(data.token.trailingTrivia);
360-
361-
dl.appendChild(dd);
362-
}
363-
container.appendChild(dl);
364-
365-
this.popover.content = container.innerHTML;
366-
}
367-
368-
const tabContainerRect = document
369-
.querySelector(".tab-content")
370-
.getBoundingClientRect();
371-
372-
const parent = target.parentElement;
373-
const caret = parent.querySelector(":scope > div > .caret");
374-
this.popover.show(caret || target, {
375-
lowerLimit: tabContainerRect.top + tabContainerRect.height,
376-
offsetX: caret ? 0 : 24,
377-
});
378-
});
379-
};
380-
381-
let mouseoutCancel = undefined;
382-
this.treeView.onmouseout = (event, target, data) => {
383-
if (mouseoutCancel) {
384-
cancelAnimationFrame(mouseoutCancel);
385-
}
386-
mouseoutCancel = requestAnimationFrame(() => {
387-
if (!event.relatedTarget.classList.contains("popover-content")) {
388-
this.popover.hide();
389-
}
390-
});
391-
};
392-
393-
let mouseoutCancel2 = undefined;
394-
this.popover.onmouseout = (event) => {
395-
if (mouseoutCancel2) {
396-
cancelAnimationFrame(mouseoutCancel2);
397-
}
398-
mouseoutCancel2 = requestAnimationFrame(() => {
399-
this.popover.hide();
400-
});
401213
};
402214
}
403215

@@ -452,19 +264,3 @@ function hideLoading() {
452264
document.getElementById("run-button-icon").classList.remove("d-none");
453265
document.getElementById("run-button-spinner").classList.add("d-none");
454266
}
455-
456-
function stripHTMLTag(text) {
457-
const div = document.createElement("div");
458-
div.innerHTML = text
459-
.replace(/&lt;/g, "<")
460-
.replace(/&gt;/g, ">")
461-
.replace(/&#039;/g, "'")
462-
.replace(/&amp;/g, "&");
463-
return escapeHTML(div.textContent || div.innerText || "");
464-
}
465-
466-
function escapeHTML(text) {
467-
const div = document.createElement("div");
468-
div.appendChild(document.createTextNode(text));
469-
return div.innerHTML;
470-
}

0 commit comments

Comments
 (0)