fix(exclude_objects): fix order of objects in map (#1716)

* refactor: refactor StatusPanel.vue Signed-off-by: Stefan Dej <[email protected]> * fix: fix order of objects to visible small parts in bigger parts Signed-off-by: Stefan Dej <[email protected]> --------- Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Dec 30, 2023 · 74d4a48 · 74d4a48
1 parent 2088693
commit 74d4a48
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 45 deletions.
diff --git a/src/components/panels/Status/ExcludeObject.vue b/src/components/panels/Status/ExcludeObject.vue
@@ -21,7 +21,7 @@
                 </div>
             </div>
         </v-container>
-        <v-divider class="mt-0 mb-0"></v-divider>
+        <v-divider class="mt-0 mb-0" />
         <v-dialog v-model="boolShowExcludeObjectDialog" max-width="400">
             <v-card>
                 <v-toolbar flat dense>
@@ -36,7 +36,7 @@
                     {{ $t('Panels.StatusPanel.ExcludeObject.ExcludeObjectText', { name: excludeObjectDialogName }) }}
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn text @click="boolShowExcludeObjectDialog = false">
                         {{ $t('Panels.StatusPanel.ExcludeObject.Cancel') }}
                     </v-btn>
@@ -51,7 +51,7 @@
             :exclude-object-dialog-name.sync="excludeObjectDialogName"
             :exclude-object-dialog-bool.sync="boolShowExcludeObjectDialog"
             @update:name="updateExcludeObjectDialogName"
-            @update:bool="updateExcludeObjectDialogBool"></status-panel-exclude-object-dialog>
+            @update:bool="updateExcludeObjectDialogBool" />
     </div>
 </template>
 

diff --git a/src/components/panels/Status/ExcludeObjectDialogMap.vue b/src/components/panels/Status/ExcludeObjectDialogMap.vue
@@ -1,35 +1,6 @@
-<style scoped>
-svg {
-    border: 2px solid #888;
-}
-
-#tooltipObjectMap {
-    display: none;
-    position: absolute;
-    background: black;
-    border-radius: 3px;
-    color: white;
-    padding: 3px 7px;
-    z-index: 100;
-
-    &:before {
-        display: block;
-        content: ' ';
-        width: 0;
-        height: 0;
-        position: absolute;
-        bottom: -10px;
-        left: 10px;
-        border-top: 10px solid black;
-        border-left: 10px solid transparent;
-        border-right: 10px solid transparent;
-    }
-}
-</style>
-
 <template>
     <div style="position: relative">
-        <div id="tooltipObjectMap" ref="tooltipObjectMap"></div>
+        <div id="tooltipObjectMap" ref="tooltipObjectMap" />
         <svg
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
@@ -120,11 +91,34 @@ export default class StatusPanelObjectsDialogMap extends Mixins(BaseMixin) {
     }
 
     get printing_objects() {
-        return this.$store.state.printer.exclude_object?.objects ?? []
+        return (
+            (this.$store.state.printer.exclude_object?.objects ?? [])
+                .map((object: any) => {
+                    let total = 0
+
+                    if ('polygon' in object) {
+                        for (let i = 0; i < object.polygon.length; i++) {
+                            const pointA = object.polygon[i]
+                            const pointB = i === object.polygon.length - 1 ? object.polygon[0] : object.polygon[i + 1]
+
+                            total += pointA[0] * pointB[1] - pointA[1] * pointB[0]
+                        }
+                    }
+
+                    return {
+                        center: object.center,
+                        name: object.name,
+                        polygon: object.polygon,
+                        size: Math.abs(total),
+                    }
+                })
+                // sort all objects by size
+                .sort((a: any, b: any) => b.size - a.size)
+        )
     }
 
     get printing_objects_with_polygons() {
-        return this.printing_objects.filter((eobject: any) => 'polygon' in eobject)
+        return this.printing_objects.filter((object: any) => 'polygon' in object)
     }
 
     get current_object() {
@@ -249,3 +243,32 @@ export default class StatusPanelObjectsDialogMap extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style scoped>
+svg {
+    border: 2px solid #888;
+}
+
+#tooltipObjectMap {
+    display: none;
+    position: absolute;
+    background: black;
+    border-radius: 3px;
+    color: white;
+    padding: 3px 7px;
+    z-index: 100;
+
+    &:before {
+        display: block;
+        content: ' ';
+        width: 0;
+        height: 0;
+        position: absolute;
+        bottom: -10px;
+        left: 10px;
+        border-top: 10px solid black;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+    }
+}
+</style>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <min-settings-panel></min-settings-panel>
-        <klippy-state-panel></klippy-state-panel>
+        <min-settings-panel />
+        <klippy-state-panel />
         <panel
             v-if="klipperReadyForGui"
             :icon="mdiInformation"
@@ -16,7 +16,7 @@
                     :width="5"
                     :value="printPercent"
                     color="primary"
-                    class="mr-3"></v-progress-circular>
+                    class="mr-3" />
             </template>
             <template #buttons>
                 <v-btn
@@ -52,10 +52,8 @@
                     </v-list>
                 </v-menu>
             </template>
-            <status-panel-printstatus-thumbnail></status-panel-printstatus-thumbnail>
-            <status-panel-exclude-object
-                :show-dialog.sync="boolShowObjects"
-                @update:showDialog="updateShowDialog"></status-panel-exclude-object>
+            <status-panel-printstatus-thumbnail />
+            <status-panel-exclude-object :show-dialog.sync="boolShowObjects" @update:showDialog="updateShowDialog" />
             <status-panel-pause-at-layer-dialog :show-dialog.sync="boolShowPauseAtLayer" />
             <template v-if="print_stats_message">
                 <v-container>
@@ -68,7 +66,7 @@
                         </v-col>
                     </v-row>
                 </v-container>
-                <v-divider class="mt-0 mb-0"></v-divider>
+                <v-divider class="mt-0 mb-0" />
             </template>
             <template v-if="display_message">
                 <v-container>
@@ -86,7 +84,7 @@
                         </v-col>
                     </v-row>
                 </v-container>
-                <v-divider class="mt-0 mb-0"></v-divider>
+                <v-divider class="mt-0 mb-0" />
             </template>
             <v-tabs v-model="activeTab" fixed-tabs>
                 <v-tab v-if="current_filename" href="#status">{{ $t('Panels.StatusPanel.Status') }}</v-tab>
@@ -97,7 +95,7 @@
                     </v-badge>
                 </v-tab>
             </v-tabs>
-            <v-divider class="my-0"></v-divider>
+            <v-divider class="my-0" />
             <v-tabs-items v-model="activeTab" class="_border-radius">
                 <v-tab-item v-if="current_filename" value="status">
                     <status-panel-printstatus />