svelte-log-view 6.2.0 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -4
- package/src/LogView.svelte +33 -23
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-log-view",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"provenance": true
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
|
46
46
|
"documentation": "^14.0.3",
|
|
47
47
|
"mf-styling": "^3.1.7",
|
|
48
|
-
"npm-pkgbuild": "^15.3.
|
|
48
|
+
"npm-pkgbuild": "^15.3.29",
|
|
49
49
|
"reader-line-iterator": "^1.2.0",
|
|
50
50
|
"semantic-release": "^24.0.0",
|
|
51
|
-
"svelte": "^5.0.0-next.
|
|
51
|
+
"svelte": "^5.0.0-next.208",
|
|
52
52
|
"testcafe": "^3.6.2",
|
|
53
53
|
"vite": "^5.3.5",
|
|
54
54
|
"vite-plugin-compression2": "^1.1.3"
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
"optionalDependencies": {
|
|
60
60
|
"mf-hosting-cloudflare": "^1.0.6",
|
|
61
|
-
"mf-hosting-frontend": "^3.2.
|
|
61
|
+
"mf-hosting-frontend": "^3.2.2"
|
|
62
62
|
},
|
|
63
63
|
"repository": {
|
|
64
64
|
"type": "git",
|
package/src/LogView.svelte
CHANGED
|
@@ -1,17 +1,29 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { onDestroy } from "svelte";
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* line 1 |
|
|
6
|
+
* line 2 | -> offsetRows
|
|
7
|
+
* ----------
|
|
8
|
+
* | line 4 | |
|
|
9
|
+
* | line 5 | | -> visibleRows
|
|
10
|
+
* | line 5 | |
|
|
11
|
+
* ----------
|
|
12
|
+
* line 6
|
|
13
|
+
*/
|
|
14
|
+
|
|
4
15
|
let {
|
|
5
|
-
source,
|
|
6
|
-
visibleRows =
|
|
7
|
-
|
|
8
|
-
visible = entries,
|
|
16
|
+
source, /** data source */
|
|
17
|
+
visibleRows = 24, /** number of rows in the dom */
|
|
18
|
+
offsetRows = $bindable(0), /** number of rows from the top to the 1st. visible */
|
|
9
19
|
follow = $bindable(true),
|
|
10
20
|
selected = $bindable(0),
|
|
11
|
-
|
|
21
|
+
fetchAboveRows = 2, /** number of rows to fetch if scrolling upwards into the void */
|
|
12
22
|
row
|
|
13
23
|
} = $props();
|
|
14
24
|
|
|
25
|
+
let entries = [];
|
|
26
|
+
let visible = $state(entries);
|
|
15
27
|
let content;
|
|
16
28
|
|
|
17
29
|
onDestroy(() => source.abort());
|
|
@@ -39,7 +51,7 @@
|
|
|
39
51
|
visible = entries;
|
|
40
52
|
} else {
|
|
41
53
|
if (!follow) {
|
|
42
|
-
visible = entries.slice(
|
|
54
|
+
visible = entries.slice(offsetRows, visibleRows);
|
|
43
55
|
}
|
|
44
56
|
}
|
|
45
57
|
|
|
@@ -57,40 +69,37 @@
|
|
|
57
69
|
|
|
58
70
|
if (selected > entries.length - 1) {
|
|
59
71
|
selected = entries.length - 1;
|
|
60
|
-
|
|
72
|
+
offsetRows = entries.length - visibleRows;
|
|
61
73
|
}
|
|
62
74
|
|
|
63
75
|
if (selected < 0) {
|
|
64
76
|
const cursor = entries[0];
|
|
65
77
|
|
|
66
|
-
let
|
|
67
|
-
|
|
68
|
-
for (let i = 0; i < number; i++) {
|
|
78
|
+
for (let i = 0; i < fetchAboveRows; i++) {
|
|
69
79
|
entries.unshift();
|
|
70
80
|
}
|
|
71
81
|
|
|
72
|
-
selected +=
|
|
73
|
-
|
|
82
|
+
selected += fetchAboveRows;
|
|
83
|
+
offsetRows += fetchAboveRows;
|
|
74
84
|
|
|
75
85
|
let i = 0;
|
|
76
|
-
for await (const entry of source.fetch(cursor, -
|
|
86
|
+
for await (const entry of source.fetch(cursor, -fetchAboveRows, fetchAboveRows)) {
|
|
77
87
|
entries[i++] = entry;
|
|
78
|
-
if (i >=
|
|
88
|
+
if (i >= fetchAboveRows) {
|
|
79
89
|
break;
|
|
80
90
|
}
|
|
81
|
-
visible = entries.slice(start, start + visibleRows);
|
|
82
91
|
}
|
|
83
92
|
}
|
|
84
93
|
|
|
85
|
-
if (selected <
|
|
86
|
-
|
|
94
|
+
if (selected < offsetRows) {
|
|
95
|
+
offsetRows = selected;
|
|
87
96
|
}
|
|
88
97
|
|
|
89
|
-
if (selected >=
|
|
90
|
-
|
|
98
|
+
if (selected >= offsetRows + visibleRows) {
|
|
99
|
+
offsetRows = selected - visibleRows + 1;
|
|
91
100
|
}
|
|
92
101
|
|
|
93
|
-
visible = entries.slice(
|
|
102
|
+
visible = entries.slice(offsetRows, offsetRows + visibleRows);
|
|
94
103
|
}
|
|
95
104
|
|
|
96
105
|
function setFollow(flag) {
|
|
@@ -141,8 +150,9 @@
|
|
|
141
150
|
|
|
142
151
|
function onclick(event) {
|
|
143
152
|
setFollow(false);
|
|
144
|
-
const
|
|
145
|
-
|
|
153
|
+
const totalHeight = content.getBoundingClientRect().height;
|
|
154
|
+
const rowHeight = totalHeight / visibleRows;
|
|
155
|
+
setSelected(offsetRows + Math.floor(event.clientY / rowHeight));
|
|
146
156
|
}
|
|
147
157
|
</script>
|
|
148
158
|
|
|
@@ -150,7 +160,7 @@
|
|
|
150
160
|
<log-content bind:this={content}>
|
|
151
161
|
{#each visible as entry, i (i)}
|
|
152
162
|
<log-row {onclick} {onkeydown} role="none">
|
|
153
|
-
{@render row(entry,selected,
|
|
163
|
+
{@render row(entry, selected, offsetRows + i, follow)}
|
|
154
164
|
</log-row>
|
|
155
165
|
{/each}
|
|
156
166
|
</log-content>
|