fix: fix order of objects to visible small parts in bigger parts

Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Dec 26, 2023 · e92faa0 · e92faa0
1 parent 6b9f923
commit e92faa0
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 35 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>