feat: Exclude Objects

src/components/widgets/exclude-objects/ExcludeObjects.vue

@@ -0,0 +1,151 @@
+<template>
+  <g
+    id="parts"
+    class="layer"
+  >
+    <path
+      v-for="name in outlineNames"
+      :key="`${name}bounds`"
+      :class="isPartExcluded(name) ? 'partOutline partExcluded' : 'partOutline'"
+      :d="partSVG(name)"
+    />
+    <svg
+      v-for="name in iconNames"
+      :key="`${name}icon`"
+      width="7"
+      height="7"
+      viewBox="0 0 24 24"
+      class="partIcon"
+      :x="partPos(name).x - 7/2"
+      :y="partPos(name).y - 7/2"
+    >
+      <path
+        :class="iconClasses(name)"
+        :d="iconCancelled"
+      />
+      <path
+        v-if="!isPartExcluded(name)"
+        :class="iconClasses(name)"
+        :d="iconCircle"
+        class="hitarea"
+        @click="$emit('cancel', name)"
+      />
+    </svg>
+  </g>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import { Icons } from '@/globals'
+
+@Component({})
+export default class ExcludeObjects extends Mixins(StateMixin) {
+  get outlineNames () {
+    const parts = this.$store.getters['parts/getParts']
+    const names = []
+    for (const name in parts) {
+      if (parts[name].outline.length >= 3) {
+        names.push(name)
+      }
+    }
+    return names
+  }
+
+  get iconNames () {
+    const parts = this.$store.getters['parts/getParts']
+    const state = this.$store.getters['parts/getPrintState']
+    const names = []
+    for (const name in parts) {
+      const excluded = this.isPartExcluded(name)
+      if (parts[name].target &&
+        ((state === 'printing' || state === 'paused') ||
+        ((state === 'complete' || state === 'cancelled' || state === 'error') && excluded))) {
+        names.push(name)
+      }
+    }
+    return names
+  }
+
+  iconClasses (name: string) {
+    return this.isPartExcluded(name) ? 'partExcluded' : 'partIncluded'
+  }
+
+  partSVG (name: string) {
+    return this.$store.getters['parts/getPartSVG'](name)
+  }
+
+  get iconCancelled () {
+    return Icons.cancelled
+  }
+
+  get iconCircle () {
+    return Icons.circle
+  }
+
+  partPos (name: string) {
+    return this.$store.getters['parts/getPartPos'](name)
+  }
+
+  isPartCurrent (name: string) {
+    return this.$store.getters['parts/getIsPartCurrent'](name)
+  }
+
+  isPartExcluded (name: string) {
+    return this.$store.getters['parts/getIsPartExcluded'](name)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.layer > path {
+  fill: none;
+  stroke: var(--v-success-base);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.layer .partIcon {
+  filter: brightness(150%);
+  fill-opacity: 15%;
+}
+
+.layer .partIcon .hitarea {
+  pointer-events: all;
+  z-index: -1;
+  stroke-width: 0;
+}
+
+.layer .partIcon .partIncluded:hover {
+  fill-opacity: 50%;
+}
+
+.layer .partIcon.partCurrent {
+  fill: var(--v-info-base);
+  fill-opacity: 30%;
+}
+
+.layer .partIcon .partIncluded {
+  pointer-events: all;
+  fill: var(--v-success-base);
+  stroke: var(--v-success-base);
+  stroke-width: .5;
+}
+
+.layer .partIcon.partExcluded {
+  filter: brightness(75%);
+  pointer-events: none;
+}
+
+.layer .partOutline {
+  filter: opacity(60%);
+  stroke-width: .5;
+}
+
+.layer .partExcluded {
+  filter: opacity(100%);
+  fill: var(--v-error-base);
+  stroke: var(--v-error-base);
+  fill-opacity: 35%;
+}
+</style>

src/components/widgets/exclude-objects/ExcludeObjectsDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-dialog
+    :value="value"
+    max-width="50vw"
+    persistent
+  >
+    <v-card>
+      <v-card-title class="card-heading py-2 px-5">
+        <v-icon left>
+          $cancelled
+        </v-icon>
+        <span class="focus--text">
+          {{ $t('app.gcode.label.exclude_object') }}
+        </span>
+      </v-card-title>
+
+      <v-card-text class="py-3 px-5">
+        <v-simple-table>
+          <tbody>
+            <tr
+              v-for="part in parts"
+              :key="part.name"
+            >
+              <td>{{ part.name }}</td>
+              <td>
+                <app-btn
+                  x-small
+                  fab
+                  :disabled="isPartExcluded(part.name)"
+                  @click="$emit('cancelObject', part.name)"
+                >
+                  <v-icon color="error">
+                    $cancelled
+                  </v-icon>
+                </app-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="py-2 px-5">
+        <v-spacer />
+        <app-btn
+          color="primary"
+          text
+          @click="$emit('close')"
+        >
+          {{ $t('app.general.btn.close') }}
+        </app-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+
+@Component({})
+export default class ExcludeObjectDialog extends Mixins(StateMixin) {
+  @Prop({ type: Boolean, default: false })
+  public value!: boolean
+
+  get parts () {
+    return this.$store.getters['parts/getParts']
+  }
+
+  isPartExcluded (name: string) {
+    return this.$store.getters['parts/getIsPartExcluded'](name)
+  }
+}
+</script>

src/components/widgets/gcode-preview/GcodePreview.vue

@@ -193,6 +193,10 @@
             :stroke-width="extrusionLineWidth"
           />
         </g>
+        <exclude-objects
+          v-if="showExcludeObjects"
+          @cancel="$emit('cancelObject', $event)"
+        />
       </g>
     </svg>
   </div>
@@ -204,8 +208,13 @@ import StateMixin from '@/mixins/state'
 import panzoom, { PanZoom } from 'panzoom'
 import { BBox, LayerNr, LayerPaths } from '@/store/gcodePreview/types'
 import { GcodePreviewConfig } from '@/store/config/types'
+import ExcludeObjects from '@/components/widgets/exclude-objects/ExcludeObjects.vue'
 
-@Component({})
+@Component({
+  components: {
+    ExcludeObjects
+  }
+})
 export default class GcodePreview extends Mixins(StateMixin) {
   @Prop({ type: Boolean, default: true })
   public disabled!: boolean
@@ -276,6 +285,19 @@ export default class GcodePreview extends Mixins(StateMixin) {
     return this.panning ? 'optimizeSpeed' : 'geometricPrecision'
   }
 
+  get showExcludeObjects () {
+    const file = this.$store.getters['gcodePreview/getFile']
+    if (!file) {
+      return true
+    }
+    const printerFile = this.$store.state.printer.printer.current_file
+
+    if (printerFile.filename) {
+      return (file.path + '/' + file.filename) === (printerFile.path + '/' + printerFile.filename)
+    }
+    return false
+  }
+
   get flipX (): boolean {
     return this.$store.state.config.uiSettings.gcodePreview.flip.horizontal
   }

src/components/widgets/gcode-preview/GcodePreviewCard.vue

@@ -17,6 +17,18 @@
         </app-btn>
       </app-btn-collapse-group>
 
+      <app-btn
+        color=""
+        class="ml-1"
+        fab
+        x-small
+        text
+        :disabled="!parts.length"
+        @click="excludeObjectDialog = true"
+      >
+        <v-icon>$cancelled</v-icon>
+      </app-btn>
+
       <app-btn-collapse-group
         :collapsed="true"
         menu-icon="$cog"
@@ -40,6 +52,13 @@
         @cancel="abortParser"
       />
 
+      <ExcludeObjectsDialog
+        v-if="excludeObjectDialog"
+        :value="excludeObjectDialog"
+        @close="excludeObjectDialog = false"
+        @cancelObject="cancelObject($event)"
+      />
+
       <v-row>
         <v-col
           cols="12"
@@ -123,6 +142,7 @@
             :layer="currentLayer"
             :progress="moveProgress"
             :disabled="!fileLoaded"
+            @cancelObject="cancelObject($event)"
           />
         </v-col>
       </v-row>
@@ -141,13 +161,15 @@ import GcodePreviewParserProgressDialog from '@/components/widgets/gcode-preview
 import { MinMax } from '@/store/gcodePreview/types'
 import AppBtnCollapseGroup from '@/components/ui/AppBtnCollapseGroup.vue'
 import { AxiosResponse } from 'axios'
+import ExcludeObjectsDialog from '@/components/widgets/exclude-objects/ExcludeObjectsDialog.vue'
 
 @Component({
   components: {
     AppBtnCollapseGroup,
     GcodePreviewParserProgressDialog,
     GcodePreview,
-    GcodePreviewControls
+    GcodePreviewControls,
+    ExcludeObjectsDialog
   }
 })
 export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin) {
@@ -159,6 +181,7 @@ export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin) {
 
   currentLayer = 0
   moveProgress = 0
+  excludeObjectDialog = false
 
   get visibleLayer () {
     return this.currentLayer + 1
@@ -350,5 +373,22 @@ export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin) {
   get autoLoadOnPrintStart () {
     return this.$store.state.config.uiSettings.gcodePreview.autoLoadOnPrintStart
   }
+
+  async cancelObject (id: string) {
+    const reqId = id.toUpperCase().replace(/\s/g, '_')
+
+    const res = await this.$confirm(
+      this.$tc('app.general.simple_form.msg.confirm_exclude_object'),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (res) {
+      this.sendGcode(`EXCLUDE_OBJECT NAME=${reqId}`)
+    }
+  }
+
+  get parts () {
+    return Object.values(this.$store.getters['parts/getParts'])
+  }
 }
 </script>

src/locales/de.yaml

@@ -110,6 +110,7 @@ app:
       load_current_file: Aktuelle Datei laden
     label:
       current_layer_height: Aktuelle Schichthöhe
+      exclude_object: Objekt ausschließen
       follow_progress: Fortschritt folgen
       layer: Schicht
       layers: Schichten
@@ -292,6 +293,7 @@ app:
           Probe/Bltouch Z-Offset wird aus dem aktuellen Z-Offset berechnet und
           aktualisiert.
         confirm: Sind Sie sicher?
+        confirm_exclude_object: Sind Sie sicher, dass Sie dieses Objekt vom Druck ausschließen wollen?
         confirm_power_device_toggle: Sind Sie sicher? Dies wird das Gerät ein- bzw. ausschalten.
         confirm_reboot_host: Sind Sie sicher? Das Host-System wird neu gestartet.
         confirm_service_restart: Möchten Sie den Dienst %{name} wirklich neu starten?

src/locales/en.yaml

@@ -109,6 +109,7 @@ app:
       load_current_file: Load Current File
     label:
       current_layer_height: Current Layer Height
+      exclude_object: Exclude Object
       follow_progress: Follow progress
       layer: Layer
       layers: Layers
@@ -296,6 +297,7 @@ app:
         required: Required
       msg:
         confirm: Are you sure?
+        confirm_exclude_object: Are you sure you want to exclude this object from printing?
         confirm_reboot_host: Are you sure? This will reboot your host system.
         confirm_shutdown_host: Are you sure? This will shutdown your host system.
         confirm_service_restart: Are you sure you want to restart the %{name} service?