bak

src/components/CanvasStage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type Konva from 'konva'
-import { PhCornersIn } from '@phosphor-icons/vue'
+import { PhCornersIn, PhCrop } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
 import { sampleLayer } from '@/lib/interpolate'
 import { loadImage } from '@/lib/fileLoader'
@@ -17,6 +17,7 @@ const transformerRef = ref<{ getNode(): Konva.Transformer } | null>(null)
 const zoom = ref(1)
 const viewX = ref(0)
 const viewY = ref(0)
+const cropObjects = ref(false)
 let didInitialFit = false
 
 const ZOOM_MIN = 0.05
@@ -61,6 +62,18 @@ const viewConfig = computed(() => ({
   scaleY: zoom.value,
 }))
 
+const clipGroupConfig = computed(() => {
+  const w = store.scene.canvas.width
+  const h = store.scene.canvas.height
+  const crop = cropObjects.value
+  return {
+    clipFunc: (ctx: CanvasRenderingContext2D) => {
+      if (crop) ctx.rect(0, 0, w, h)
+      else ctx.rect(-1e6, -1e6, 2e6, 2e6)
+    },
+  }
+})
+
 const backgroundConfig = computed(() => ({
   x: 0,
   y: 0,
@@ -115,6 +128,8 @@ interface RenderedLayer {
 
 const rendered = computed<RenderedLayer[]>(() =>
   store.scene.layers
+    .slice()
+    .reverse()
     .map((layer) => {
       const asset = assetMap.value.get(layer.assetId)
       if (!asset) return null
@@ -513,33 +528,35 @@ onBeforeUnmount(() => {
     <v-stage ref="stageRef" :config="stageConfig" @mousedown="handleStageMouseDown">
       <v-layer>
         <v-group :config="viewConfig">
-          <v-rect :config="backgroundConfig" />
-          <template v-for="item in rendered" :key="item.layer.id">
-            <v-rect
-              v-if="item.asset.kind === 'rect'"
-              :config="rectConfig(item.layer, item.asset, item.props)"
-              @dragend="handleDragEnd"
-              @transformend="handleTransformEnd"
-            />
-            <v-circle
-              v-else-if="item.asset.kind === 'circle'"
-              :config="circleConfig(item.layer, item.asset, item.props)"
-              @dragend="handleDragEnd"
-              @transformend="handleTransformEnd"
-            />
-            <v-text
-              v-else-if="item.asset.kind === 'text'"
-              :config="textConfig(item.layer, item.asset, item.props)"
-              @dragend="handleDragEnd"
-              @transformend="handleTransformEnd"
-            />
-            <v-image
-              v-else-if="item.asset.kind === 'image' && imageConfig(item.layer, item.asset, item.props)"
-              :config="imageConfig(item.layer, item.asset, item.props)!"
-              @dragend="handleDragEnd"
-              @transformend="handleTransformEnd"
-            />
-          </template>
+          <v-group :config="clipGroupConfig">
+            <v-rect :config="backgroundConfig" />
+            <template v-for="item in rendered" :key="item.layer.id">
+              <v-rect
+                v-if="item.asset.kind === 'rect'"
+                :config="rectConfig(item.layer, item.asset, item.props)"
+                @dragend="handleDragEnd"
+                @transformend="handleTransformEnd"
+              />
+              <v-circle
+                v-else-if="item.asset.kind === 'circle'"
+                :config="circleConfig(item.layer, item.asset, item.props)"
+                @dragend="handleDragEnd"
+                @transformend="handleTransformEnd"
+              />
+              <v-text
+                v-else-if="item.asset.kind === 'text'"
+                :config="textConfig(item.layer, item.asset, item.props)"
+                @dragend="handleDragEnd"
+                @transformend="handleTransformEnd"
+              />
+              <v-image
+                v-else-if="item.asset.kind === 'image' && imageConfig(item.layer, item.asset, item.props)"
+                :config="imageConfig(item.layer, item.asset, item.props)!"
+                @dragend="handleDragEnd"
+                @transformend="handleTransformEnd"
+              />
+            </template>
+          </v-group>
           <v-rect :config="canvasBorderConfig" />
           <v-line v-if="rotationArmConfig" :config="rotationArmConfig" />
           <v-group
@@ -573,6 +590,15 @@ onBeforeUnmount(() => {
       <button class="zc-btn" title="An Viewport anpassen" @click="fitToContainer">
         <PhCornersIn :size="13" />
       </button>
+      <div class="zc-sep"></div>
+      <button
+        class="zc-btn crop-btn"
+        :class="{ active: cropObjects }"
+        :title="cropObjects ? 'Alles zeigen' : 'Nur Bühnenausschnitt zeigen (crop)'"
+        @click="cropObjects = !cropObjects"
+      >
+        <PhCrop :size="13" />
+      </button>
     </div>
 
     <div class="dims">{{ store.scene.canvas.width }} × {{ store.scene.canvas.height }}</div>
@@ -637,6 +663,16 @@ onBeforeUnmount(() => {
   font-weight: 500;
 }
 
+.zc-btn.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.zc-btn.active:hover:not(:disabled) {
+  background: var(--accent-soft-strong);
+  color: var(--accent);
+}
+
 .zc-label {
   min-width: 54px;
   height: 24px;