@kubohiroya/turbowarp-plus-editor-layout 0.1.4 → 0.1.5

package/dist/document-workspace.d.ts

@@ -0,0 +1,15 @@
+export interface DocumentPanelRequest {
+    reference: {
+        providerId: string;
+        documentId: string;
+    };
+    filename: string;
+    mount(element: HTMLElement, close: () => void): {
+        requestClose(): void;
+        dispose(): void;
+    };
+}
+export declare function getDocumentWorkspace(vm: object): {
+    open(request: DocumentPanelRequest): boolean;
+    connect(handler: NonNullable<(request: DocumentPanelRequest) => void>): () => void;
+};

package/dist/document-workspace.js

@@ -0,0 +1,25 @@
+function createDocumentWorkspace() {
+    let open;
+    return {
+        open(request) {
+            if (!open)
+                return false;
+            open(request);
+            return true;
+        },
+        connect(handler) {
+            open = handler;
+            return () => { if (open === handler)
+                open = undefined; };
+        }
+    };
+}
+const workspaces = new WeakMap();
+export function getDocumentWorkspace(vm) {
+    let workspace = workspaces.get(vm);
+    if (!workspace) {
+        workspace = createDocumentWorkspace();
+        workspaces.set(vm, workspace);
+    }
+    return workspace;
+}

package/dist/sprite-tabs.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { SpriteVariable } from './sprite-asset-pane.tsx';
 import type { SpriteSearchResult } from './sprite-editor-toolbar.tsx';
 import type { DockviewStagePane } from './dockview-stage.ts';
+export { getDocumentWorkspace } from './document-workspace.ts';
 export { useDockviewStage } from './dockview-stage.ts';
 interface CostumeAsset {
     encodeDataURI(): string;

package/dist/sprite-tabs.js

@@ -4,6 +4,8 @@ import { createDockview, DefaultTab, themeLight } from 'dockview';
 import { createSpriteLayoutMenu } from "./sprite-layout-menu.js";
 import { SpriteAssetPane } from "./sprite-asset-pane.js";
 import { SpriteEditorToolbar, spriteEditorSections } from "./sprite-editor-toolbar.js";
+import { getDocumentWorkspace } from "./document-workspace.js";
+export { getDocumentWorkspace } from "./document-workspace.js";
 export { useDockviewStage } from "./dockview-stage.js";
 const variableSection = spriteEditorSections.indexOf('variables');
 function createAssetSelections(target, source) {
@@ -41,6 +43,7 @@ function createAssetSelections(target, source) {
     return { selected, ports, layouts, selectors, scroll };
 }
 const stagePanelId = 'tw-plus-stage-display';
+const documentComponent = 'tw-plus-document';
 const renameLabels = {
     en: { title: 'Rename sprite', name: 'Sprite name', cancel: 'Cancel', save: 'Rename' },
     ja: { title: 'スプライト名の変更', name: 'スプライト名', cancel: 'キャンセル', save: '変更' }
@@ -76,6 +79,7 @@ export function mountSpriteTabs(root, content, options) {
     const editLabel = /^ja(?:-|$)/i.test(locale) ? 'クリックしてこのビューで編集' : 'Activate this view to edit';
     const slots = new Map();
     const views = new Map();
+    const documents = new Map();
     const costumeIcons = new WeakMap();
     const remembered = new WeakMap();
     const lastUsed = new WeakMap();
@@ -98,8 +102,17 @@ export function mountSpriteTabs(root, content, options) {
                 return [];
             return [{ label: text.title, action: () => openRenameDialog(target) }];
         },
-        createComponent: ({ name }) => {
+        createComponent: ({ name, id: componentId }) => {
             const element = document.createElement('div');
+            if (name === documentComponent) {
+                element.className = 'tw-plus-document-slot';
+                return { element, init({ api }) {
+                        const item = documents.get(componentId);
+                        element.dataset.providerId = item.request.reference.providerId;
+                        element.dataset.documentId = item.request.reference.documentId;
+                        item.session = item.request.mount(element, () => api.close());
+                    } };
+            }
             if (name === stagePanelId) {
                 element.className = 'tw-plus-dockview-stage-slot';
                 return { element, init() { stagePane.attach(element); } };
@@ -189,7 +202,7 @@ export function mountSpriteTabs(root, content, options) {
                 split('below', group.activePanel.id); },
             close: () => { if (group.activePanel)
                 closeSplit(group.activePanel.id); },
-            canClose: () => dockview.groups.length > 1,
+            canClose: () => canCloseGroup(group),
             canSplit: () => views.has(group.activePanel?.id)
         });
         return { ...menu, init() { } };
@@ -328,8 +341,8 @@ export function mountSpriteTabs(root, content, options) {
         view.snapshots.set(view.section, { snapshot, view: descriptor });
     }
     function show(panel) {
-        if (panel?.id === stagePanelId) {
-            // Displaying the Stage does not select the Stage target or interrupt the sprite editor.
+        if (panel?.id === stagePanelId || documents.has(panel?.id)) {
+            // Utility panels do not change the VM editing target.
             refreshSurfaces();
             return;
         }
@@ -368,7 +381,7 @@ export function mountSpriteTabs(root, content, options) {
     }
     function add(target, splitPosition, section) {
         let id = target.id;
-        if (splitPosition || views.has(id) || id === stagePanelId) {
+        if (splitPosition || views.has(id) || id === stagePanelId || documents.has(id)) {
             do {
                 id = 'sprite-view-' + ++nextView;
             } while (views.has(id) || vm.runtime.targets.some(item => item.id === id));
@@ -407,6 +420,46 @@ export function mountSpriteTabs(root, content, options) {
             [...views.values()].find(item => item.target === target);
         activateView(view?.id ?? add(target).id);
     }
+    function openDocument(request) {
+        const { providerId, documentId } = request.reference;
+        for (const [id, { request: opened }] of documents) {
+            if (opened.reference.providerId === providerId && opened.reference.documentId === documentId) {
+                dockview.getPanel(id)?.api.setActive();
+                return;
+            }
+        }
+        let id;
+        do {
+            id = 'document-view-' + ++nextView;
+        } while (views.has(id) || documents.has(id) || vm.runtime.targets.some(target => target.id === id));
+        const title = request.filename + ' (' + providerId + ' / ' + documentId + ')';
+        documents.set(id, { request });
+        try {
+            dockview.addPanel({ id, title, component: documentComponent, renderer: 'always' });
+        }
+        catch (error) {
+            documents.get(id)?.session?.dispose();
+            documents.delete(id);
+            throw error;
+        }
+    }
+    function guardDocumentClose(event) {
+        const element = event.target;
+        const tab = element.closest('[data-tab-panel-id]');
+        const item = documents.get(tab?.dataset.tabPanelId);
+        if (!item)
+            return;
+        const close = event.type === 'click' ? Boolean(element.closest('.dv-default-tab-action')) :
+            event.target === tab && ['Delete', 'Backspace'].includes(event.key);
+        if (!close)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        item.session?.requestClose();
+    }
+    function canCloseGroup(group) {
+        return dockview.groups.length > 1 && group.panels.every(panel => !documents.has(panel.id));
+    }
     function openStage() {
         if (!stagePane)
             return;
@@ -433,7 +486,7 @@ export function mountSpriteTabs(root, content, options) {
     }
     function closeSplit(id = active?.id) {
         const panel = dockview.getPanel(id);
-        if (!multiView || !panel || dockview.groups.length <= 1)
+        if (!multiView || !panel || !canCloseGroup(panel.api.group))
             return false;
         syncing = true;
         try {
@@ -526,6 +579,12 @@ export function mountSpriteTabs(root, content, options) {
         }
     });
     const removal = dockview.onDidRemovePanel(panel => {
+        const item = documents.get(panel.id);
+        if (item) {
+            documents.delete(panel.id);
+            item.session?.dispose();
+            return;
+        }
         if (panel.id === stagePanelId) {
             stagePane?.attach(null);
             return;
@@ -540,6 +599,9 @@ export function mountSpriteTabs(root, content, options) {
             closed.add(view.target);
     });
     const layout = multiView && dockview.onDidLayoutChange(refreshSurfaces);
+    const disconnectDocuments = multiView && getDocumentWorkspace(vm).connect(openDocument);
+    root.addEventListener('click', guardDocumentClose, true);
+    root.addEventListener('keydown', guardDocumentClose, true);
     vm.on('targetsUpdate', refresh);
     refresh();
     return {
@@ -552,6 +614,13 @@ export function mountSpriteTabs(root, content, options) {
         currentView: () => active && describe(active),
         views: () => [...views.values()].map(view => describe(view)),
         dispose() {
+            if (disconnectDocuments)
+                disconnectDocuments();
+            root.removeEventListener('click', guardDocumentClose, true);
+            root.removeEventListener('keydown', guardDocumentClose, true);
+            for (const item of documents.values())
+                item.session?.dispose();
+            documents.clear();
             stagePane?.attach(null);
             renameDialog?.remove();
             renameDialog = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-layout",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Resizable panes and layout for TurboWarp Plus Editor",
   "type": "module",
   "license": "GPL-3.0-or-later",

package/src/document-workspace.ts

@@ -0,0 +1,31 @@
+export interface DocumentPanelRequest {
+    reference: {providerId: string; documentId: string};
+    filename: string;
+    mount(element: HTMLElement, close: () => void): {requestClose(): void; dispose(): void};
+}
+
+function createDocumentWorkspace() {
+    let open: ((request: DocumentPanelRequest) => void) | undefined;
+    return {
+        open(request: DocumentPanelRequest) {
+            if (!open) return false;
+            open(request);
+            return true;
+        },
+        connect(handler: NonNullable<typeof open>) {
+            open = handler;
+            return () => { if (open === handler) open = undefined; };
+        }
+    };
+}
+
+const workspaces = new WeakMap<object, ReturnType<typeof createDocumentWorkspace>>();
+
+export function getDocumentWorkspace(vm: object) {
+    let workspace = workspaces.get(vm);
+    if (!workspace) {
+        workspace = createDocumentWorkspace();
+        workspaces.set(vm, workspace);
+    }
+    return workspace;
+}

package/src/editor.css

@@ -774,3 +774,10 @@ details.layout-menu button {
 .floating-stage:has([data-stage-in-workspace]:empty) {
     pointer-events: none;
 }
+
+:global(.tw-plus-document-slot) {
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+}

package/src/sprite-tabs.ts

@@ -8,6 +8,10 @@ import type {SpriteVariable} from './sprite-asset-pane.tsx';
 import {SpriteEditorToolbar, spriteEditorSections} from './sprite-editor-toolbar.tsx';
 import type {SpriteSearchResult} from './sprite-editor-toolbar.tsx';
 import type {DockviewStagePane} from './dockview-stage.ts';
+import {getDocumentWorkspace} from './document-workspace.ts';
+import type {DocumentPanelRequest} from './document-workspace.ts';
+
+export {getDocumentWorkspace} from './document-workspace.ts';
 
 export {useDockviewStage} from './dockview-stage.ts';
 
@@ -115,6 +119,7 @@ function createAssetSelections(target: Target, source?: {
 export type SpriteSplitDirection = 'right' | 'below';
 
 const stagePanelId = 'tw-plus-stage-display';
+const documentComponent = 'tw-plus-document';
 
 interface TabOptions<Snapshot = unknown> {
     vm: Project;
@@ -210,6 +215,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
     const editLabel = /^ja(?:-|$)/i.test(locale) ? 'クリックしてこのビューで編集' : 'Activate this view to edit';
     const slots = new Map<string, TabSlot>();
     const views = new Map<string, View<Snapshot>>();
+    const documents = new Map<string, {request: DocumentPanelRequest; session?: ReturnType<DocumentPanelRequest['mount']>}>();
     const costumeIcons = new WeakMap<CostumeAsset, string>();
     const remembered = new WeakMap<Target, number>();
     const lastUsed = new WeakMap<Target, View<Snapshot>>();
@@ -232,8 +238,17 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
             if (!target || target.isStage || !vm.renameSprite) return [];
             return [{label: text.title, action: () => openRenameDialog(target)}];
         },
-        createComponent: ({name}) => {
+        createComponent: ({name, id: componentId}) => {
             const element = document.createElement('div');
+            if (name === documentComponent) {
+                element.className = 'tw-plus-document-slot';
+                return {element, init({api}) {
+                    const item = documents.get(componentId);
+                    element.dataset.providerId = item.request.reference.providerId;
+                    element.dataset.documentId = item.request.reference.documentId;
+                    item.session = item.request.mount(element, () => api.close());
+                }};
+            }
             if (name === stagePanelId) {
                 element.className = 'tw-plus-dockview-stage-slot';
                 return {element, init() { stagePane.attach(element); }};
@@ -312,7 +327,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
             splitRight: () => { if (group.activePanel) split('right', group.activePanel.id); },
             splitBelow: () => { if (group.activePanel) split('below', group.activePanel.id); },
             close: () => { if (group.activePanel) closeSplit(group.activePanel.id); },
-            canClose: () => dockview.groups.length > 1,
+            canClose: () => canCloseGroup(group),
             canSplit: () => views.has(group.activePanel?.id)
         });
         return {...menu, init() {}};
@@ -444,8 +459,8 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
     }
 
     function show(panel: IDockviewPanel | undefined) {
-        if (panel?.id === stagePanelId) {
-            // Displaying the Stage does not select the Stage target or interrupt the sprite editor.
+        if (panel?.id === stagePanelId || documents.has(panel?.id)) {
+            // Utility panels do not change the VM editing target.
             refreshSurfaces();
             return;
         }
@@ -478,7 +493,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
 
     function add(target: Target, splitPosition?: {referencePanel: string; direction: SpriteSplitDirection}, section?: number) {
         let id = target.id;
-        if (splitPosition || views.has(id) || id === stagePanelId) {
+        if (splitPosition || views.has(id) || id === stagePanelId || documents.has(id)) {
             do {
                 id = 'sprite-view-' + ++nextView;
             } while (views.has(id) || vm.runtime.targets.some(item => item.id === id));
@@ -517,6 +532,46 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         activateView(view?.id ?? add(target).id);
     }
 
+    function openDocument(request: DocumentPanelRequest) {
+        const {providerId, documentId} = request.reference;
+        for (const [id, {request: opened}] of documents) {
+            if (opened.reference.providerId === providerId && opened.reference.documentId === documentId) {
+                dockview.getPanel(id)?.api.setActive();
+                return;
+            }
+        }
+        let id: string;
+        do {
+            id = 'document-view-' + ++nextView;
+        } while (views.has(id) || documents.has(id) || vm.runtime.targets.some(target => target.id === id));
+        const title = request.filename + ' (' + providerId + ' / ' + documentId + ')';
+        documents.set(id, {request});
+        try {
+            dockview.addPanel({id, title, component: documentComponent, renderer: 'always'});
+        } catch (error) {
+            documents.get(id)?.session?.dispose();
+            documents.delete(id);
+            throw error;
+        }
+    }
+
+    function guardDocumentClose(event: MouseEvent | KeyboardEvent) {
+        const element = event.target as HTMLElement;
+        const tab = element.closest<HTMLElement>('[data-tab-panel-id]');
+        const item = documents.get(tab?.dataset.tabPanelId);
+        if (!item) return;
+        const close = event.type === 'click' ? Boolean(element.closest('.dv-default-tab-action')) :
+            event.target === tab && ['Delete', 'Backspace'].includes((event as KeyboardEvent).key);
+        if (!close) return;
+        event.preventDefault();
+        event.stopPropagation();
+        item.session?.requestClose();
+    }
+
+    function canCloseGroup(group: DockviewGroupPanel) {
+        return dockview.groups.length > 1 && group.panels.every(panel => !documents.has(panel.id));
+    }
+
     function openStage() {
         if (!stagePane) return;
         const existing = dockview.getPanel(stagePanelId);
@@ -544,7 +599,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
 
     function closeSplit(id = active?.id) {
         const panel = dockview.getPanel(id);
-        if (!multiView || !panel || dockview.groups.length <= 1) return false;
+        if (!multiView || !panel || !canCloseGroup(panel.api.group)) return false;
         syncing = true;
         try {
             dockview.removeGroup(panel.api.group);
@@ -628,6 +683,12 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         }
     });
     const removal = dockview.onDidRemovePanel(panel => {
+        const item = documents.get(panel.id);
+        if (item) {
+            documents.delete(panel.id);
+            item.session?.dispose();
+            return;
+        }
         if (panel.id === stagePanelId) {
             stagePane?.attach(null);
             return;
@@ -639,6 +700,9 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         if (![...views.values()].some(item => item.target === view.target)) closed.add(view.target);
     });
     const layout = multiView && dockview.onDidLayoutChange(refreshSurfaces);
+    const disconnectDocuments = multiView && getDocumentWorkspace(vm).connect(openDocument);
+    root.addEventListener('click', guardDocumentClose, true);
+    root.addEventListener('keydown', guardDocumentClose, true);
     vm.on('targetsUpdate', refresh);
     refresh();
     return {
@@ -651,6 +715,11 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         currentView: () => active && describe(active),
         views: () => [...views.values()].map(view => describe(view)),
         dispose() {
+            if (disconnectDocuments) disconnectDocuments();
+            root.removeEventListener('click', guardDocumentClose, true);
+            root.removeEventListener('keydown', guardDocumentClose, true);
+            for (const item of documents.values()) item.session?.dispose();
+            documents.clear();
             stagePane?.attach(null);
             renameDialog?.remove();
             renameDialog = undefined;