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"
/>
+
+
+
+
@@ -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 {
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, activeDocument: Document, tileWidth: number, tileHeight: number, allVisible: boolean, sliceName: string
+ store: Store, activeDocument: Document,
+ tileWidth: number, tileHeight: number, allVisible: boolean, sliceName: string, toTimeline = false,
): Promise => {
// 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 => {
+ 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 });
},