Addressed warnings/performance fixes
mellobacon committed
Nov 27, 2022 at 18:05 UTC
373de695ee9c08576289968ff7eef9ad0f72a312
8 files changed
+59
-42
src/components/ContextMenu/ContextMenu.svelte
+8
-12
@@ -1,14 +1,9 @@
1
-<script>
1
+<script lang="ts">
2
/**
3
* @event {HTMLElement} open
4
*/
5
-
6
- /**
7
- * Specify an element or list of elements to trigger the context menu.
8
- * If no element is specified, the context menu applies to the entire window
9
- * @type {null | ReadonlyArray<null | HTMLElement>}
10
- */
11
- export let target = null;
5
+
6
+ export let target: HTMLElement = null;
7
8
/**
9
* Set to `true` to open the menu
@@ -88,12 +83,13 @@
83
openDetail = e.target;
84
}
85
91
- $: if (target != null) {
86
+ $: if (target !== null) {
87
if (Array.isArray(target)) {
88
target.forEach((node) =>
89
node?.addEventListener("contextmenu", openMenu)
90
);
91
} else {
92
+
93
target.addEventListener("contextmenu", openMenu);
94
}
95
}
@@ -146,7 +142,7 @@
142
143
<svelte:window
144
on:contextmenu|preventDefault={(e) => {
149
- if (target != null) return;
145
+ if (target !== null) return;
146
if (level > 1) return;
147
if (!ref) return;
148
openMenu(e);
@@ -173,8 +169,8 @@
169
{...$$restProps}
170
style="left: {x}px; top: {y}px; {$$restProps.style}"
171
on:click
176
- on:click={({ target }) => {
177
- const closestOption = target.closest("[tabindex]");
172
+ on:click={({ currentTarget }) => {
173
+ const closestOption = currentTarget.closest("[tabindex]");
174
if (
175
closestOption &&
176
closestOption.getAttribute("role") !== "menuitem"
src/components/FileTree/LeafNodeMenu.svelte
+2
@@ -50,7 +50,9 @@
50
</ContextMenuOption>
51
</ContextMenu>
52
53
+{#if open}
54
<RenameModel bind:open bind:filename={filename} bind:path={filepath} />
55
+{/if}
56
57
<style>
58
.contextshortcut {
src/components/FileTree/ParentNodeMenu.svelte
+2
@@ -51,7 +51,9 @@
51
</ContextMenuOption>
52
</ContextMenu>
53
54
+{#if open}
55
<RenameModel bind:open bind:filename={filename} bind:path={filepath} />
56
+{/if}
57
58
<style>
59
.contextshortcut {
src/components/FileTree/TreeView.svelte
+5
-2
@@ -1,4 +1,4 @@
1
-<script>
1
+<script lang="ts">
2
/**
3
* @typedef {string | number} TreeNodeId
4
* @typedef {{ id: TreeNodeId; name: string; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; expanded?: boolean; path?: string; }} TreeNode
@@ -87,6 +87,9 @@
87
selectNode: (node) => {
88
selectedIds = [node.id];
89
},
90
+ rightClickNode: (node) => {
91
+ dispatch("rightclick", node);
92
+ },
93
expandNode: (node, expanded) => {
94
if (expanded) {
95
expandedIds = [...expandedIds, node.id];
@@ -132,7 +135,7 @@
135
$: expandedNodeIds.set(expandedIds);
136
$: if (ref) {
137
treeWalker = document.createTreeWalker(ref, NodeFilter.SHOW_ELEMENT, {
135
- acceptNode: (node) => {
138
+ acceptNode: (node: Element) => {
139
if (node.classList.contains("bx--tree-node--disabled"))
140
return NodeFilter.FILTER_REJECT;
141
if (node.matches("li.bx--tree-node")) return NodeFilter.FILTER_ACCEPT;
src/components/FileTree/TreeViewNode.svelte
+14
-20
@@ -27,8 +27,6 @@
27
*/
28
29
export let leaf = false;
30
-
31
- /** @type {TreeNodeId} */
30
export let id = "";
31
export let name = "";
32
export let disabled = false;
@@ -42,14 +40,13 @@
40
export let icon = undefined;
41
42
import { afterUpdate, getContext } from "svelte";
45
- import RenameModel from "../Modal/RenameModel.svelte";
46
- import LeafNodeMenu from "./LeafNodeMenu.svelte";
47
-
43
+ import RenameModel from "../Modal/RenameModel.svelte";
44
+ import LeafNodeMenu from "./LeafNodeMenu.svelte";
45
let ref = null;
46
let refLabel = null;
47
let prevActiveId = undefined;
48
52
- const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode } =
49
+ const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode, rightClickNode } =
50
getContext("TreeView");
51
const offset = () =>
52
computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);
@@ -67,10 +64,10 @@
64
refLabel.style.marginLeft = `-${offset()}rem`;
65
refLabel.style.paddingLeft = `${offset()}rem`;
66
}
70
-
71
- let open = false;
67
+ let contextmenu = false;
68
</script>
69
70
+
71
<li
72
bind:this={ref}
73
role="treeitem"
@@ -94,22 +91,18 @@
91
if (disabled || !dblclick) return;
92
clickNode(node);
93
}}
97
- on:keydown={(e) => {
98
- if (
99
- e.key === "ArrowLeft" ||
100
- e.key === "ArrowRight" ||
101
- e.key === "F2"
102
- ) {
103
- e.stopPropagation();
94
+ on:mousedown|stopPropagation={(e) => {
95
+ if (e.button === 2) {
96
+ selectNode(node);
97
+ rightClickNode(node);
98
+ contextmenu = true;
99
}
100
+ }}
101
+ on:keydown|stopPropagation={(e) => {
102
if (e.key === "ArrowLeft") {
103
const parentNode = findParentTreeNode(ref.parentNode);
104
if (parentNode) parentNode.focus();
105
}
109
- if (e.key === "F2") {
110
- e.preventDefault();
111
- open = true;
112
- }
106
}}
107
on:focus={() => {
108
focusNode(node);
@@ -120,8 +113,9 @@
113
{name}
114
</div>
115
</li>
116
+{#if contextmenu}
117
<LeafNodeMenu target={ref} filename={name} filepath={path}></LeafNodeMenu>
124
-<RenameModel bind:open bind:filename={name} bind:path={path} />
118
+{/if}
119
120
<style>
121
:global(.bx--tree-node__label) {
src/components/FileTree/TreeViewNodeList.svelte
+17
-6
@@ -1,7 +1,6 @@
1
<script>
2
/**
3
- * @typedef {string | number} TreeNodeId
4
- * @typedef {{ id: TreeNodeId; name: string; disabled?: boolean; expanded?: boolean; path?: string; }} TreeNode
3
+ * @typedef {{ id: string; name: string; disabled?: boolean; expanded?: boolean; path?: string; }} TreeNode
4
*/
5
6
/** @type {Array<TreeNode & { children?: TreeNode[] }>} */
@@ -9,7 +8,6 @@
8
export let expanded = false;
9
export let root = false;
10
12
- /** @type {string | number} */
11
export let id = "";
12
export let name = "";
13
export let disabled = false;
@@ -25,7 +23,7 @@
23
import { afterUpdate, getContext } from "svelte";
24
import CaretDown from "carbon-icons-svelte/lib/CaretDown.svelte";
25
import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
28
- import ParentNodeMenu from "./ParentNodeMenu.svelte";
26
+ import ParentNodeMenu from "./ParentNodeMenu.svelte";
27
28
29
let ref = null;
@@ -37,6 +35,7 @@
35
selectedNodeIds,
36
expandedNodeIds,
37
clickNode,
38
+ rightClickNode,
39
selectNode,
40
expandNode,
41
focusNode,
@@ -66,6 +65,7 @@
65
refLabel.style.paddingLeft = `${offset()}rem`;
66
}
67
$: expanded = $expandedNodeIds.includes(id);
68
+ let contextmenu = false;
69
</script>
70
71
{#if root}
@@ -125,7 +125,16 @@
125
expanded = !expanded;
126
expandNode(node, expanded);
127
toggleNode(node);
128
- }}>
128
+ }}
129
+ on:mousedown={(e) => {
130
+ if (disabled) return;
131
+ if (e.button === 2) {
132
+ selectNode(node);
133
+ rightClickNode(node);
134
+ contextmenu = true;
135
+ }
136
+ }}
137
+ >
138
<span class:bx--tree-parent-node__toggle={true} {disabled}>
139
<CaretDown
140
class="bx--tree-parent-node__toggle-icon {expanded &&
@@ -151,4 +160,6 @@
160
</li>
161
{/if}
162
154
-<ParentNodeMenu target={[refLabel]} filename={name} filepath={path}></ParentNodeMenu>
\ No newline at end of file
163
+{#if contextmenu}
164
+<ParentNodeMenu target={[refLabel]} filename={name} filepath={path}></ParentNodeMenu>
165
+{/if}
\ No newline at end of file
src/components/Input/Input.svelte
+2
-1
@@ -1,4 +1,4 @@
1
-<script>
1
+<script lang="ts">
2
/**
3
* @event {null | number | string} change
4
* @event {null | number | string} input
@@ -101,6 +101,7 @@
101
</script>
102
103
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
104
+<!-- svelte-ignore a11y-click-events-have-key-events -->
105
<div
106
class:bx--form-item={true}
107
class:bx--text-input-wrapper={true}
src/components/Tabs/Tab.svelte
+9
-1
@@ -7,6 +7,7 @@
7
export let active = false;
8
export let unsaved = false;
9
let tab;
10
+ let contextmenu = false;
11
</script>
12
<div bind:this={tab} title={path} id={`tab-${id}`} class="tab" class:tab-active={active} class:unsaved={unsaved}>
13
<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -14,7 +15,12 @@
15
() => {
16
setActive(id);
17
}
17
- }>
18
+ }
19
+ on:mousedown={(e) => {
20
+ if (e.button === 2) {
21
+ contextmenu = true;
22
+ }
23
+ }}>
24
<span class="tab-label">{label}</span>
25
{#if unsaved}
26
<span></span>
@@ -28,7 +34,9 @@
34
</div>
35
</div>
36
37
+{#if contextmenu}
38
<TabMenu target={tab} id={id} filename={label} filepath={path} />
39
+{/if}
40
41
<style lang="scss">
42
.tab {