Add Tiled Import and Export functionality by wernerbihl · Pull Request #15 · 2dtiler/app

wernerbihl · 2026-05-05T19:00:22Z

Introduce comprehensive import and export capabilities for Tiled projects, enhancing support for various map and tileset formats. Implement improved error handling, resource management, and user dialogs for missing resources. Update related utilities and add tests to ensure functionality and coverage. Refactor existing code for better maintainability and clarity.

- Refactor useTiledProjectImport hook to support both zip and raw Tiled project files. - Implement directory file selection for linked resources. - Add validation for Tiled project files and improve error handling. - Introduce a dialog for resolving missing resources during import. - Update import-export action utilities to handle directory file picking. - Create a new function to prepare Tiled project imports with better resource management. - Add tests for the new import functionality and ensure coverage for missing resource handling. - Refactor project creation logic to use a dedicated function for initializing empty projects.

…nality

…r test logic

…ayer rendering

…ated animation note from TODO

Copilot

Pull request overview

Adds Tiled project-level import/export support to the app’s import/export layer and wires file-based import entry points into the editor UI. It also refactors a few map-canvas helpers and expands test coverage around the new flows.

Changes:

Adds Tiled project archive import/export, missing-resource resolution, and imported-project session replacement.
Extends map/tileset UI to support file-based import from dialogs and drag-and-drop.
Refactors map canvas rendering helpers and adds tests for project import/export behavior.

Reviewed changes

Copilot reviewed 47 out of 47 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
TODO.txt	Updates roadmap items.
tests/features/project-management/lib/project.test.ts	Adds coverage for empty-project creation.
tests/features/map-editor/components/MapCanvas/draw-layer-entries.test.ts	Adds active-layer redraw regression coverage.
tests/features/import-export/lib/imported-tiled-project-session.test.ts	Tests imported Tiled project replacement flow.
tests/features/import-export/lib/import-export-tiled-project.test.ts	Adds Tiled project import/export tests.
tests/features/import-export/lib/import-export-gamemaker.test.ts	Expands GameMaker export coverage for GMX.
tests/features/import-export/lib/import-export-action-utils.test.ts	Tests picker helpers, including directory selection.
tests/features/import-export/lib/gamemaker-map-import.test.ts	Expands GameMaker GMX import coverage.
tests/features/import-export/hooks/use-tiled-map-import.test.ts	Adds hook tests for Tiled project import UX.
src/features/project-management/lib/project.ts	Extracts reusable empty-project factory.
src/features/project-management/components/ProjectDialog.tsx	Switches project creation to shared helper.
src/features/map-editor/types/map-panel.ts	Threads map-file import callbacks through panel props.
src/features/map-editor/types/map-canvas-rendering.ts	Adds paint-buffer input to active-layer rendering params.
src/features/map-editor/types/dialogs.ts	Extends new-map dialog props for file import.
src/features/map-editor/dialogs/NewMapDialog.tsx	Adds “From File” tab with picker/drop-zone import.
src/features/map-editor/components/TilesetPanel.tsx	Enables tileset import from non-image files and drag-drop.
src/features/map-editor/components/MapPanel/MapPanelWorkspace.tsx	Adds map-file drag-drop import surface.
src/features/map-editor/components/MapPanel/MapPanelDialogs.tsx	Passes new map import callback into dialog layer.
src/features/map-editor/components/MapPanel.tsx	Wires map-file import callback through panel.
src/features/map-editor/components/MapCanvas/use-map-canvas-imperative-handle.ts	Extracts imperative paint-canvas helpers.
src/features/map-editor/components/MapCanvas/use-animation-elapsed-ms.ts	Extracts animated-tile timer hook.
src/features/map-editor/components/MapCanvas/index.tsx	Adopts extracted hooks and paint-buffer redraw path.
src/features/map-editor/components/MapCanvas/draw-layer-entries.ts	Merges live paint buffer into active-layer redraws.
src/features/import-export/types/index.ts	Adds Tiled project import state/dialog/result types.
src/features/import-export/lib/tiled-project-action-utils.ts	Adds project-level Tiled export helper.
src/features/import-export/lib/imported-tiled-project-session.ts	Replaces current editor session with imported Tiled project data.
src/features/import-export/lib/import-export-tiled-project.ts	Implements Tiled project import/export bundle logic.
src/features/import-export/lib/import-export-options.ts	Marks Tiled project option as supported.
src/features/import-export/lib/import-export-action-utils.ts	Refactors picker helpers and adds directory picker support.
src/features/import-export/index.ts	Re-exports new Tiled project dialog.
src/features/import-export/hooks/use-unity-tileset-import.ts	Allows preselected Unity tileset files.
src/features/import-export/hooks/use-unity-map-import.ts	Allows preselected Unity map files.
src/features/import-export/hooks/use-tiled-tileset-import.ts	Allows preselected Tiled tileset files.
src/features/import-export/hooks/use-tiled-project-import.ts	Adds Tiled project import hook and dialog state flow.
src/features/import-export/hooks/use-tiled-map-import.ts	Allows preselected Tiled map files.
src/features/import-export/hooks/use-tide-map-import.ts	Allows preselected tIDE map files.
src/features/import-export/hooks/use-mappy-map-import.ts	Allows preselected Mappy map files.
src/features/import-export/hooks/use-import-export-actions.ts	Integrates Tiled project flows and generic file-based map/tileset import routing.
src/features/import-export/hooks/use-godot-tileset-import.ts	Allows preselected Godot tileset files.
src/features/import-export/hooks/use-godot-map-import.ts	Allows preselected Godot map files.
src/features/import-export/hooks/use-gamemaker-map-import.ts	Allows preselected GameMaker map files.
src/features/import-export/hooks/use-defold-tileset-import.ts	Allows preselected Defold tileset files.
src/features/import-export/hooks/use-defold-map-import.ts	Allows preselected Defold map files.
src/features/import-export/components/TiledProjectFilesDialog.tsx	Adds folder-selection dialog for raw Tiled project imports.
src/features/import-export/components/TiledMissingResourcesDialog.tsx	Allows custom dialog description text.
src/features/app-shell/components/AppShell.tsx	Wires new import handlers and lazy-loaded Tiled project dialog into the shell.
AGENTS.md	Adds code-search/workflow guidance.

+    for (const entry of entries) {
+      if (entry.path === expectedMapPath) {
+        const uniquePath = getUniqueArchivePath(entry.path, seenPaths);
+        archiveEntries.push({ path: uniquePath, data: entry.data });
+      } else if (!seenPaths.has(entry.path)) {
+        seenPaths.add(entry.path);
+        archiveEntries.push(entry);
+      }


+function detectMapFormat(fileName: string): TiledMapFormat | null {
+  const lower = fileName.toLowerCase();
+  if (lower.endsWith(".tmx") || lower.endsWith(".xml")) return "xml";
+  if (lower.endsWith(".tmj")) return "json";
+  if (lower.endsWith(".js")) return "js";
+  if (lower.endsWith(".lua")) return "lua";
+  return null;
+}


+
+export async function prepareTiledProjectImport(
+  entries: readonly ImportExportArchiveEntry[],
+): Promise<TiledProjectImportPreparationResult> {
+  const mapPaths = entries
+    .map((entry) => entry.path)
+    .filter((path) => {
+      if (isTilesetOrImageEntry(path)) return false;
+      if (path.toLowerCase().endsWith(".tiled-project")) return false;


+): Promise<void> {
+  const targetProject = createEmptyProject(
+    suggestedProjectName,
+    result.maps[0]?.map.tileSize ?? 32,


+    for (const mapImport of result.maps) {
+      mergeImportedMapData(
+        mapImport,
+        targetProject,
+        targetMapGroupId,
+        targetTilesetGroupId,
+        setState,
+      );


+  async function handleImportFile(file: File) {
+    await onImportMapFromFile(file);
+    onOpenChange(false);


      label: "Tiled Project (.tiled-project)",
      description: "Tiled multi-map project container.",


+`bash
+semble search "authentication flow" ./my-project
+semble search "save_pretrained" ./my-project
+semble search "save model to disk" ./my-project --top-k 10
+`


+`bash
+semble find-related src/auth.py 42 ./my-project
+`


+            <div
+              className={`flex min-h-32 cursor-pointer flex-col items-center justify-center gap-3 rounded-md border-2 border-dashed p-6 transition-colors ${
+                isDroppingFile
+                  ? "border-primary bg-primary/10"
+                  : "border-muted-foreground/30 hover:border-muted-foreground/50"
+              }`}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => void handleDrop(e)}
+              onClick={() => importFileInputRef.current?.click()}
+            >


wernerbihl · 2026-05-05T19:13:19Z

@copilot apply changes based on the comments in this thread

Agent-Logs-Url: https://github.com/2dtiler/app/sessions/53dde639-c91f-49c7-b8a2-54f06f55b600 Co-authored-by: wernerbihl <1950410+wernerbihl@users.noreply.github.com>

Copilot · 2026-05-05T19:28:18Z

@copilot apply changes based on the comments in this thread

Applied all 9 fixes from the review thread in commit cb23220:

Export path collision — asset entries with the same path but different data now get a unique path via getUniqueArchivePath, and the map file's asset references are rewritten to match.
.json map extension — detectMapFormat now recognises .json alongside .tmj as a JSON-format map.
Extension scripts — prepareTiledProjectImport reads extensionsPath from the .tiled-project file and excludes any files under that path from map detection.
Invalid tile size — the imported tileSize is now snapped to the nearest value in TILE_SIZES before creating the project.
Shared tileset deduplication — after all maps are merged, deduplicateProjectTilesets removes duplicate tilesets (matched by name + tileSize + dimensions) and rewrites tile-layer references to the canonical ID.
Dialog close on failure — handleImportFile now only closes the dialog when onImportMapFromFile returns true.
Label mismatch — the project-tiled option label and description now say .tiled-project.zip to match the actual exported archive.
AGENTS.md code fences — replaced the hidden zero-width-space + single-backtick markers with proper triple-backtick fences.
Drop-zone accessibility — the import drop zone is now a <button type="button"> with an aria-label, so it is reachable and activatable via keyboard and assistive technology.

wernerbihl added 10 commits May 4, 2026 19:20

Added Tiled Import and Export

116005c

Add import functionality for various map and tileset formats

7d824de

refactor: Simplify callback parameters and improve test mock structure

e6920af

feat: Implement Tiled project files dialog and enhance import functio…

ffcb609

…nality

fix: Remove outdated Tiled project import note and improve file picke…

fcd56f6

…r test logic

feat: Add tests for GameMaker map import and export functionality

f19162c

feat: Implement paint buffer functionality and add tests for active l…

e02554c

…ayer rendering

fix: Ensure newline at end of file in multiple TypeScript files

247169a

feat: Enhance documentation for code search and workflow; remove outd…

cc0ed5c

…ated animation note from TODO

Copilot AI review requested due to automatic review settings May 5, 2026 19:00

Copilot started reviewing on behalf of wernerbihl May 5, 2026 19:01 View session

Copilot AI reviewed May 5, 2026

View reviewed changes

Copilot started work on behalf of wernerbihl May 5, 2026 19:13 View session

Copilot AI and others added 2 commits May 5, 2026 19:27

fix: apply all PR review fixes for tiled import/export and dialog UX

cb23220

Agent-Logs-Url: https://github.com/2dtiler/app/sessions/53dde639-c91f-49c7-b8a2-54f06f55b600 Co-authored-by: wernerbihl <1950410+wernerbihl@users.noreply.github.com>

chore: remove accidentally committed package-lock.json

810d6aa

Agent-Logs-Url: https://github.com/2dtiler/app/sessions/53dde639-c91f-49c7-b8a2-54f06f55b600 Co-authored-by: wernerbihl <1950410+wernerbihl@users.noreply.github.com>

Copilot finished work on behalf of wernerbihl May 5, 2026 19:29

wernerbihl merged commit 9536e0d into main May 5, 2026
4 checks passed

wernerbihl deleted the feature/2026-05-04 branch May 5, 2026 19:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Tiled Import and Export functionality#15

Add Tiled Import and Export functionality#15
wernerbihl merged 12 commits intomainfrom
feature/2026-05-04

wernerbihl commented May 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

wernerbihl commented May 5, 2026

Uh oh!

Copilot AI commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		label: "Tiled Project (.tiled-project)",
		description: "Tiled multi-map project container.",

Conversation

wernerbihl commented May 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

wernerbihl commented May 5, 2026

Uh oh!

Copilot AI commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants