Skip to content

Commit b83abbb

Browse files
SpliiTSpliiT
committed
Merge branch 'feat_refacto_components' of https://github.com/Geode-solutions/OpenGeodeWeb-Front into feat_refacto_components
2 parents 1d4c7be + e1c74cb commit b83abbb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+1111
-1112
lines changed

‎components/ContextMenu.vue‎

Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -25,99 +25,99 @@
2525
</template>
2626

2727
<script setup>
28-
const menuStore = useMenuStore();
29-
const dataBaseStore = useDataBaseStore();
28+
const menuStore = useMenuStore()
29+
const dataBaseStore = useDataBaseStore()
3030
31-
const props = defineProps({
32-
id: { type: String, required: true },
33-
x: { type: Number, required: true },
34-
y: { type: Number, required: true },
35-
containerWidth: { type: Number, required: true },
36-
containerHeight: { type: Number, required: true },
37-
});
31+
const props = defineProps({
32+
id: { type: String, required: true },
33+
x: { type: Number, required: true },
34+
y: { type: Number, required: true },
35+
containerWidth: { type: Number, required: true },
36+
containerHeight: { type: Number, required: true },
37+
})
3838
39-
const meta_data = computed(() => {
40-
const itemId = props.id || menuStore.current_id;
41-
return itemId ? dataBaseStore.itemMetaDatas(itemId) : {};
42-
});
43-
const radius = 80;
44-
const show_menu = ref(true);
39+
const meta_data = computed(() => {
40+
const itemId = props.id || menuStore.current_id
41+
return itemId ? dataBaseStore.itemMetaDatas(itemId) : {}
42+
})
43+
const radius = 80
44+
const show_menu = ref(true)
4545
46-
watch(show_menu, (value) => {
47-
if (!value) {
48-
menuStore.closeMenu();
49-
}
50-
});
46+
watch(show_menu, (value) => {
47+
if (!value) {
48+
menuStore.closeMenu()
49+
}
50+
})
5151
52-
const menu_items = computed(() =>
53-
menuStore.getMenuItems(
54-
meta_data.value.object_type,
55-
meta_data.value.geode_object
52+
const menu_items = computed(() =>
53+
menuStore.getMenuItems(
54+
meta_data.value.object_type,
55+
meta_data.value.geode_object,
56+
),
5657
)
57-
);
5858
59-
const menuItemCount = computed(() => menu_items.value.length);
59+
const menuItemCount = computed(() => menu_items.value.length)
6060
61-
function getMenuStyle() {
62-
const x = props.x || menuStore.menuX;
63-
const y = props.y || menuStore.menuY;
64-
const width = props.containerWidth || menuStore.containerWidth;
65-
const height = props.containerHeight || menuStore.containerHeight;
61+
function getMenuStyle() {
62+
const x = props.x || menuStore.menuX
63+
const y = props.y || menuStore.menuY
64+
const width = props.containerWidth || menuStore.containerWidth
65+
const height = props.containerHeight || menuStore.containerHeight
6666
67-
const adjustedX = Math.min(Math.max(x, radius), width - radius);
68-
const adjustedY = Math.min(Math.max(y, radius), height - radius);
67+
const adjustedX = Math.min(Math.max(x, radius), width - radius)
68+
const adjustedY = Math.min(Math.max(y, radius), height - radius)
6969
70-
return {
71-
left: `${adjustedX - radius}px`,
72-
top: `${adjustedY - radius}px`,
73-
};
74-
}
70+
return {
71+
left: `${adjustedX - radius}px`,
72+
top: `${adjustedY - radius}px`,
73+
}
74+
}
7575
76-
function getTooltipLocation(index) {
77-
const angle = (index / menuItemCount.value) * 360;
78-
if (angle < 45 || angle >= 315) return "right";
79-
if (angle >= 45 && angle < 135) return "top";
80-
if (angle >= 135 && angle < 225) return "left";
81-
return "bottom";
82-
}
76+
function getTooltipLocation(index) {
77+
const angle = (index / menuItemCount.value) * 360
78+
if (angle < 45 || angle >= 315) return "right"
79+
if (angle >= 45 && angle < 135) return "top"
80+
if (angle >= 135 && angle < 225) return "left"
81+
return "bottom"
82+
}
8383
84-
function getTooltipOrigin(index) {
85-
const angle = (index / menuItemCount.value) * 360;
86-
if (angle < 45 || angle >= 315) return "left";
87-
if (angle >= 45 && angle < 135) return "bottom";
88-
if (angle >= 135 && angle < 225) return "right";
89-
return "top";
90-
}
84+
function getTooltipOrigin(index) {
85+
const angle = (index / menuItemCount.value) * 360
86+
if (angle < 45 || angle >= 315) return "left"
87+
if (angle >= 45 && angle < 135) return "bottom"
88+
if (angle >= 135 && angle < 225) return "right"
89+
return "top"
90+
}
9191
92-
function getItemStyle(index) {
93-
const angle = (index / menuItemCount.value) * 2 * Math.PI;
94-
return {
95-
transform: `translate(${Math.cos(angle) * radius}px, ${
96-
Math.sin(angle) * radius
97-
}px)`,
98-
transition: "opacity 0.1s ease, transform 0.1s ease",
99-
position: "absolute",
100-
};
101-
}
92+
function getItemStyle(index) {
93+
const angle = (index / menuItemCount.value) * 2 * Math.PI
94+
return {
95+
transform: `translate(${Math.cos(angle) * radius}px, ${
96+
Math.sin(angle) * radius
97+
}px)`,
98+
transition: "opacity 0.1s ease, transform 0.1s ease",
99+
position: "absolute",
100+
}
101+
}
102102
</script>
103103

104104
<style scoped>
105-
.circular-menu {
106-
position: absolute;
107-
border-radius: 50%;
108-
background-color: rgba(0, 0, 0, 0.8);
109-
}
105+
.circular-menu {
106+
position: absolute;
107+
border-radius: 50%;
108+
background-color: rgba(0, 0, 0, 0.8);
109+
}
110110
111-
.circular-menu-items {
112-
position: relative;
113-
display: flex;
114-
align-items: center;
115-
justify-content: center;
116-
}
111+
.circular-menu-items {
112+
position: relative;
113+
display: flex;
114+
align-items: center;
115+
justify-content: center;
116+
}
117117
118-
.menu-item-wrapper {
119-
position: absolute;
120-
transform-origin: center;
121-
will-change: transform, opacity;
122-
}
118+
.menu-item-wrapper {
119+
position: absolute;
120+
transform-origin: center;
121+
will-change: transform, opacity;
122+
}
123123
</style>

‎components/ContextMenuItem.vue‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -34,55 +34,57 @@
3434
</template>
3535

3636
<script setup>
37-
const props = defineProps({
38-
itemProps: { type: Object, required: true },
39-
tooltip: { type: String, required: true },
40-
btn_image: { type: String, required: true },
41-
});
37+
const props = defineProps({
38+
itemProps: { type: Object, required: true },
39+
tooltip: { type: String, required: true },
40+
btn_image: { type: String, required: true },
41+
})
4242
43-
const display_options = ref(false);
43+
const display_options = ref(false)
4444
45-
function toggleOptions() {
46-
display_options.value = !display_options.value;
47-
}
45+
function toggleOptions() {
46+
display_options.value = !display_options.value
47+
}
4848
</script>
4949

5050
<style scoped>
51-
.menu-item {
52-
position: absolute;
53-
display: flex;
54-
flex-direction: column;
55-
align-items: center;
56-
justify-content: center;
57-
cursor: pointer;
58-
transition: transform 0.3s ease, opacity 0.3s ease;
59-
}
51+
.menu-item {
52+
position: absolute;
53+
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
justify-content: center;
57+
cursor: pointer;
58+
transition:
59+
transform 0.3s ease,
60+
opacity 0.3s ease;
61+
}
6062
61-
.menu-options {
62-
position: absolute;
63-
top: 50%;
64-
left: 430%;
65-
transform: translateX(-50%);
66-
display: flex;
67-
flex-direction: column;
68-
background-color: white;
69-
border: 1px solid #ccc;
70-
border-radius: 8px;
71-
z-index: 10;
72-
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
73-
min-width: 150px;
74-
max-width: 320px;
75-
padding: 8px 0;
76-
overflow: hidden;
77-
}
63+
.menu-options {
64+
position: absolute;
65+
top: 50%;
66+
left: 430%;
67+
transform: translateX(-50%);
68+
display: flex;
69+
flex-direction: column;
70+
background-color: white;
71+
border: 1px solid #ccc;
72+
border-radius: 8px;
73+
z-index: 10;
74+
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
75+
min-width: 150px;
76+
max-width: 320px;
77+
padding: 8px 0;
78+
overflow: hidden;
79+
}
7880
79-
.menu-options ::v-deep(v-list-item) {
80-
padding: 10px 16px;
81-
white-space: nowrap; /* Empêche les retours à la ligne */
82-
}
81+
.menu-options ::v-deep(v-list-item) {
82+
padding: 10px 16px;
83+
white-space: nowrap; /* Empêche les retours à la ligne */
84+
}
8385
84-
.menu-options ::v-deep(v-list-item:hover) {
85-
background-color: #f5f5f5;
86-
cursor: pointer;
87-
}
86+
.menu-options ::v-deep(v-list-item:hover) {
87+
background-color: #f5f5f5;
88+
cursor: pointer;
89+
}
8890
</style>

‎components/Viewer/EdgedCurve/EdgesOptions.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
</template>
77

88
<script setup>
9-
import EdgedCurveEdges from "@ogw_f/assets/viewer_svgs/edged_curve_edges.svg";
9+
import EdgedCurveEdges from "@ogw_f/assets/viewer_svgs/edged_curve_edges.svg"
1010
11-
const props = defineProps({
12-
itemProps: { type: Object, required: true },
13-
});
11+
const props = defineProps({
12+
itemProps: { type: Object, required: true },
13+
})
1414
</script>

‎components/Viewer/EdgedCurve/PointsOptions.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
</template>
77

88
<script setup>
9-
import EdgedCurvePoints from "@ogw_f/assets/viewer_svgs/edged_curve_points.svg";
9+
import EdgedCurvePoints from "@ogw_f/assets/viewer_svgs/edged_curve_points.svg"
1010
11-
const props = defineProps({
12-
itemProps: { type: Object, required: true },
13-
});
11+
const props = defineProps({
12+
itemProps: { type: Object, required: true },
13+
})
1414
</script>

‎components/Viewer/Generic/Mesh/EdgesOptions.vue‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,31 +18,31 @@
1818
</template>
1919

2020
<script setup>
21-
const props = defineProps({
22-
itemProps: { type: Object, required: true },
23-
btn_image: { type: String, required: true },
24-
});
21+
const props = defineProps({
22+
itemProps: { type: Object, required: true },
23+
btn_image: { type: String, required: true },
24+
})
2525
26-
const id = toRef(() => props.itemProps.id);
26+
const id = toRef(() => props.itemProps.id)
2727
28-
const dataStyleStore = useDataStyleStore();
28+
const dataStyleStore = useDataStyleStore()
2929
30-
const visibility = computed({
31-
get: () => dataStyleStore.edgesVisibility(id.value),
32-
set: (newValue) => dataStyleStore.setEdgesVisibility(id.value, newValue),
33-
});
34-
const size = computed({
35-
get: () => dataStyleStore.edgesSize(id.value),
36-
set: (newValue) => dataStyleStore.setEdgesSize(id.value, newValue),
37-
});
38-
const coloring_style_key = computed({
39-
get: () => dataStyleStore.edgesActiveColoring(id.value),
40-
set: (newValue) => {
41-
dataStyleStore.setEdgesActiveColoring(id.value, newValue);
42-
},
43-
});
44-
const color = computed({
45-
get: () => dataStyleStore.edgesColor(id.value),
46-
set: (newValue) => dataStyleStore.setEdgesColor(id.value, newValue),
47-
});
30+
const visibility = computed({
31+
get: () => dataStyleStore.edgesVisibility(id.value),
32+
set: (newValue) => dataStyleStore.setEdgesVisibility(id.value, newValue),
33+
})
34+
const size = computed({
35+
get: () => dataStyleStore.edgesSize(id.value),
36+
set: (newValue) => dataStyleStore.setEdgesSize(id.value, newValue),
37+
})
38+
const coloring_style_key = computed({
39+
get: () => dataStyleStore.edgesActiveColoring(id.value),
40+
set: (newValue) => {
41+
dataStyleStore.setEdgesActiveColoring(id.value, newValue)
42+
},
43+
})
44+
const color = computed({
45+
get: () => dataStyleStore.edgesColor(id.value),
46+
set: (newValue) => dataStyleStore.setEdgesColor(id.value, newValue),
47+
})
4848
</script>

0 commit comments

Comments
 (0)