From 36ee3ba712d3e0f38236fe7c2f91f604d345185b Mon Sep 17 00:00:00 2001
From: Igor Zinken <730069+igorski@users.noreply.github.com>
Date: Wed, 22 Apr 2026 23:05:54 +0200
Subject: [PATCH] Add to-timeline support to grid slicing window

---
 .../grid-to-layers-window.vue                 | 19 +++++++++++++++++--
 .../grid-to-layers-window/messages.json       |  1 +
 src/model/actions/slice-grid-to-layers.ts     | 17 +++++++++++++++--
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/grid-to-layers-window/grid-to-layers-window.vue b/src/components/grid-to-layers-window/grid-to-layers-window.vue
index 1b06073..bcf5173 100644
--- a/src/components/grid-to-layers-window/grid-to-layers-window.vue
+++ b/src/components/grid-to-layers-window/grid-to-layers-window.vue
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2022-2025 - https://www.igorski.nl
+ * Igor Zinken 2022-2026 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -56,6 +56,14 @@
                         name="allVisible"
                     />
                 </div>
+                <div class="wrapper wrapper--toggle">
+                    <label v-t="'convertToTimeline'"></label>
+                    <toggle-button
+                        v-model="toTimeline"
+                        name="toTimeline"
+                        :disabled="!canConvertToTimeline"
+                    />
+                </div>
             </div>
         </template>
         <template #actions>
@@ -80,6 +88,7 @@
 import { mapGetters, mapMutations } from "vuex";
 import ToggleButton from "@/components/third-party/vue-js-toggle-button/ToggleButton.vue";
 import Modal from "@/components/modal/modal.vue";
+import { canExportAsAnimation } from "@/definitions/editor-properties";
 import { sliceGridToLayers } from "@/model/actions/slice-grid-to-layers";
 import { focus } from "@/utils/environment-util";
 
@@ -95,6 +104,7 @@ export default {
         width      : 0,
         height     : 0,
         allVisible : true,
+        toTimeline : false,
     }),
     computed: {
         ...mapGetters([
@@ -105,6 +115,9 @@ export default {
             return this.width > 0 && this.height > 0 &&
                    ( this.width !== this.activeDocument.width || this.height !== this.activeDocument.height );
         },
+        canConvertToTimeline(): boolean {
+            return canExportAsAnimation({ width: this.width, height: this.height });
+        },
     },
     created(): void {
         this.width  = Math.round( this.activeDocument.width  / 2 );
@@ -121,7 +134,9 @@ export default {
         ]),
         async requestSlice(): Promise<void> {
             this.setLoading( "slice" );
-            await sliceGridToLayers( this.$store, this.activeDocument, this.width, this.height, this.allVisible, this.$t( "slice" ));
+            await sliceGridToLayers(
+                this.$store, this.activeDocument, this.width, this.height, this.allVisible, this.$t( "slice" ), this.toTimeline,
+            );
             this.unsetLoading( "slice" );
             this.closeModal();
         },
diff --git a/src/components/grid-to-layers-window/messages.json b/src/components/grid-to-layers-window/messages.json
index cb34201..4a05331 100644
--- a/src/components/grid-to-layers-window/messages.json
+++ b/src/components/grid-to-layers-window/messages.json
@@ -7,6 +7,7 @@
         "height": "Height",
         "layerVisibilityExpl": "Enable if all sliced layers should by default be visible (not recommended for transparent content). When disabled, only the last new layer will be visible.",
         "allLayersVisible": "All layers visible",
+        "convertToTimeline": "Convert to timeline",
         "slice": "Slice",
         "cancel": "Cancel"
     }
diff --git a/src/model/actions/slice-grid-to-layers.ts b/src/model/actions/slice-grid-to-layers.ts
index ce2d64c..81cb2a1 100644
--- a/src/model/actions/slice-grid-to-layers.ts
+++ b/src/model/actions/slice-grid-to-layers.ts
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2022-2025 - https://www.igorski.nl
+ * Igor Zinken 2022-2026 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -29,7 +29,8 @@ import { resizeImage } from "@/utils/canvas-util";
 import { createSyncSnapshot, sliceTiles } from "@/utils/document-util";
 
 export const sliceGridToLayers = async (
-    store: Store<BitMapperyState>, activeDocument: Document, tileWidth: number, tileHeight: number, allVisible: boolean, sliceName: string
+    store: Store<BitMapperyState>, activeDocument: Document,
+    tileWidth: number, tileHeight: number, allVisible: boolean, sliceName: string, toTimeline = false,
 ): Promise<void> => {
     // collect existing layers
     const originalLayers = [ ...activeDocument.layers ];
@@ -44,6 +45,8 @@ export const sliceGridToLayers = async (
     // create layers from slices created from the flattened document
     const slicedTiles  = await sliceTiles( flattenedLayer, tileWidth, tileHeight );
 
+    const orgType = activeDocument.type;
+
     const slicedLayers = slicedTiles.map(( bitmap, index ) => {
         return LayerFactory.create({
             name    : `${sliceName} #${index + 1}`,
@@ -51,11 +54,18 @@ export const sliceGridToLayers = async (
             visible : allVisible ? true : index === slicedTiles.length - 1,
             width   : tileWidth,
             height  : tileHeight,
+            rel: toTimeline ? {
+                type: "tile",
+                id: index,
+            } : undefined,
         });
     });
 
     // commit changes, add to state history
     const commit = async (): Promise<void> => {
+        if ( toTimeline ) {
+            activeDocument.type = "timeline";
+        }
         store.commit( "replaceLayers", slicedLayers );
         store.commit( "setActiveDocumentSize", { width: tileWidth, height: tileHeight });
     };
@@ -63,6 +73,9 @@ export const sliceGridToLayers = async (
     
     enqueueState( "slice-to-layers", {
         undo(): void {
+            if ( toTimeline ) {
+                activeDocument.type = orgType;
+            }
             store.commit( "replaceLayers", originalLayers );
             store.commit( "setActiveDocumentSize", { width: originalWidth, height: originalHeight });
         },