Skip to content

Commit 13ae7a2

Browse files
JulienChampagnolJulienChampagnol
committed
fix(removeEventListener): 2 args
1 parent 7390b4b commit 13ae7a2

File tree

1 file changed

+121
-140
lines changed

1 file changed

+121
-140
lines changed

‎components/Viewer/Tree/ObjectTree.vue‎

Lines changed: 121 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,18 @@
11
<template>
2-
<v-container
3-
class="treeview-container"
4-
:style="{ width: `${treeviewStore.panelWidth}px` }"
5-
>
6-
<v-row
7-
class="resizable-panel"
8-
:style="{ width: `${treeviewStore.panelWidth}px` }"
9-
>
2+
<v-container class="treeview-container" :style="{ width: `${treeviewStore.panelWidth}px` }">
3+
<v-row class="resizable-panel" :style="{ width: `${treeviewStore.panelWidth}px` }">
104
<div class="scrollable-wrapper">
11-
<v-sheet
12-
style="max-height: calc(90vh)"
13-
class="transparent-treeview scrollbar-hover"
14-
>
5+
<v-sheet style="max-height: calc(90vh)" class="transparent-treeview scrollbar-hover">
156
<v-row v-if="treeviewStore.items.length > 0">
167
<v-col>
17-
<ViewerBreadCrumb
18-
:selectedTree="selectedTree"
19-
:treeOptions="treeOptions"
20-
@update:selectedTree="selectedTree = $event"
21-
/>
8+
<ViewerBreadCrumb :selectedTree="selectedTree" :treeOptions="treeOptions"
9+
@update:selectedTree="selectedTree = $event" />
2210
</v-col>
2311
</v-row>
2412
<v-row>
2513
<v-col>
26-
<ViewerTreeObject
27-
v-if="!treeviewStore.isAdditionnalTreeDisplayed"
28-
@show-menu="handleTreeMenu"
29-
/>
30-
<ViewerTreeComponent
31-
v-else
32-
@show-menu="handleTreeMenu"
33-
:id="treeviewStore.model_id"
34-
/>
14+
<ViewerTreeObject v-if="!treeviewStore.isAdditionnalTreeDisplayed" @show-menu="handleTreeMenu" />
15+
<ViewerTreeComponent v-else @show-menu="handleTreeMenu" :id="treeviewStore.model_id" />
3516
</v-col>
3617
</v-row>
3718
</v-sheet>
@@ -42,129 +23,129 @@
4223
</template>
4324

4425
<script setup>
45-
const treeviewStore = use_treeview_store()
46-
const menuStore = useMenuStore()
47-
const cardContainer = useTemplateRef("cardContainer")
48-
const containerWidth = ref(window.innerWidth)
49-
const containerHeight = ref(window.innerHeight)
50-
51-
const menuX = ref(0)
52-
const menuY = ref(0)
53-
const id = ref(null)
54-
55-
const emit = defineEmits(["show-menu", "position-menu"])
56-
57-
function handleTreeMenu({ event, itemId }) {
58-
menuX.value = event.clientX
59-
menuY.value = event.clientY
60-
id.value = itemId
61-
62-
menuStore.openMenu(itemId, event.clientX, event.clientY)
26+
const treeviewStore = use_treeview_store()
27+
const menuStore = useMenuStore()
28+
const cardContainer = useTemplateRef("cardContainer")
29+
const containerWidth = ref(window.innerWidth)
30+
const containerHeight = ref(window.innerHeight)
31+
32+
const menuX = ref(0)
33+
const menuY = ref(0)
34+
const id = ref(null)
35+
36+
const emit = defineEmits(["show-menu", "position-menu"])
37+
38+
function handleTreeMenu({ event, itemId }) {
39+
menuX.value = event.clientX
40+
menuY.value = event.clientY
41+
id.value = itemId
42+
43+
menuStore.openMenu(itemId, event.clientX, event.clientY)
44+
}
45+
46+
function onResizeStart(event) {
47+
const startWidth = treeviewStore.panelWidth
48+
const startX = event.clientX
49+
50+
const resize = (e) => {
51+
const deltaX = e.clientX - startX
52+
const newWidth = Math.max(
53+
150,
54+
Math.min(startWidth + deltaX, window.innerWidth),
55+
)
56+
treeviewStore.setPanelWidth(newWidth)
57+
document.body.style.userSelect = "none"
6358
}
6459
65-
function onResizeStart(event) {
66-
const startWidth = treeviewStore.panelWidth
67-
const startX = event.clientX
68-
69-
const resize = (e) => {
70-
const deltaX = e.clientX - startX
71-
const newWidth = Math.max(
72-
150,
73-
Math.min(startWidth + deltaX, window.innerWidth),
74-
)
75-
treeviewStore.setPanelWidth(newWidth)
76-
document.body.style.userSelect = "none"
77-
}
78-
79-
const stopResize = () => {
80-
document.removeEventListener("mousemove", resize)
81-
document.removeEventListener("mouseup", stopResize)
82-
document.body.style.userSelect = ""
83-
}
84-
85-
document.addEventListener("mousemove", resize)
86-
document.addEventListener("mouseup", stopResize)
60+
const stopResize = () => {
61+
document.removeEventListener("mousemove", resize)
62+
document.removeEventListener("mouseup", stopResize)
63+
document.body.style.userSelect = ""
8764
}
8865
89-
onMounted(() => {
66+
document.addEventListener("mousemove", resize)
67+
document.addEventListener("mouseup", stopResize)
68+
}
69+
70+
onMounted(() => {
71+
containerWidth.value = window.innerWidth
72+
containerHeight.value = window.innerHeight
73+
74+
window.addEventListener("resize", () => {
9075
containerWidth.value = window.innerWidth
9176
containerHeight.value = window.innerHeight
92-
93-
window.addEventListener("resize", () => {
94-
containerWidth.value = window.innerWidth
95-
containerHeight.value = window.innerHeight
96-
})
9777
})
78+
})
9879
99-
onUnmounted(() => {
100-
window.removeEventListener("resize")
101-
})
80+
onUnmounted(() => {
81+
window.removeEventListener("resize", () => { })
82+
})
10283
</script>
10384

10485
<style scoped>
105-
.treeview-container {
106-
position: absolute;
107-
z-index: 2;
108-
left: 0;
109-
top: 0;
110-
background-color: transparent;
111-
border-radius: 16px;
112-
padding: 8px;
113-
display: flex;
114-
box-sizing: border-box;
115-
}
116-
117-
.resizable-panel {
118-
display: flex;
119-
height: 100%;
120-
position: relative;
121-
box-sizing: border-box;
122-
}
123-
124-
.scrollable-wrapper {
125-
overflow-y: auto;
126-
padding-right: 6px;
127-
flex: 1;
128-
}
129-
130-
.resizer {
131-
position: absolute;
132-
top: 0;
133-
right: 0;
134-
width: 6px;
135-
height: 100%;
136-
cursor: ew-resize;
137-
background-color: transparent;
138-
z-index: 15;
139-
}
140-
141-
.resizer:hover {
142-
background-color: #999;
143-
}
144-
145-
.resizer:active {
146-
background-color: #666;
147-
}
148-
149-
.transparent-treeview {
150-
background-color: transparent;
151-
margin: 4px 0;
152-
}
153-
154-
.scrollbar-hover {
155-
overflow-x: hidden;
156-
}
157-
158-
.scrollbar-hover::-webkit-scrollbar {
159-
width: 5px;
160-
}
161-
162-
.scrollbar-hover::-webkit-scrollbar-thumb {
163-
background-color: transparent;
164-
}
165-
166-
.scrollbar-hover:hover::-webkit-scrollbar-thumb {
167-
background-color: rgba(0, 0, 0, 0.3);
168-
border-radius: 10px;
169-
}
86+
.treeview-container {
87+
position: absolute;
88+
z-index: 2;
89+
left: 0;
90+
top: 0;
91+
background-color: transparent;
92+
border-radius: 16px;
93+
padding: 8px;
94+
display: flex;
95+
box-sizing: border-box;
96+
}
97+
98+
.resizable-panel {
99+
display: flex;
100+
height: 100%;
101+
position: relative;
102+
box-sizing: border-box;
103+
}
104+
105+
.scrollable-wrapper {
106+
overflow-y: auto;
107+
padding-right: 6px;
108+
flex: 1;
109+
}
110+
111+
.resizer {
112+
position: absolute;
113+
top: 0;
114+
right: 0;
115+
width: 6px;
116+
height: 100%;
117+
cursor: ew-resize;
118+
background-color: transparent;
119+
z-index: 15;
120+
}
121+
122+
.resizer:hover {
123+
background-color: #999;
124+
}
125+
126+
.resizer:active {
127+
background-color: #666;
128+
}
129+
130+
.transparent-treeview {
131+
background-color: transparent;
132+
margin: 4px 0;
133+
}
134+
135+
.scrollbar-hover {
136+
overflow-x: hidden;
137+
}
138+
139+
.scrollbar-hover::-webkit-scrollbar {
140+
width: 5px;
141+
}
142+
143+
.scrollbar-hover::-webkit-scrollbar-thumb {
144+
background-color: transparent;
145+
}
146+
147+
.scrollbar-hover:hover::-webkit-scrollbar-thumb {
148+
background-color: rgba(0, 0, 0, 0.3);
149+
border-radius: 10px;
150+
}
170151
</style>

0 commit comments

Comments
 (0)