@kubohiroya/turbowarp-plus-editor-layout 0.1.1 → 0.1.3

package/src/stage-surface.ts

@@ -0,0 +1,104 @@
+import type {Context, ElementType} from 'react';
+import {createDockview, themeLight} from 'dockview';
+
+interface StageWindowConnection<Target> {
+    ready: Promise<Target>;
+    disconnected: AbortSignal;
+    close(): void;
+}
+
+interface StageWindowHost<Request, Target> {
+    open(request: Request): StageWindowConnection<Target> | null;
+}
+
+export function createStagePopoutHost<Request, Target extends {mount: HTMLElement}>(
+    host: StageWindowHost<Request, Target>, title: string
+): StageWindowHost<Request, Target> {
+    return {
+        open(request) {
+            const connection = host.open(request);
+            if (!connection) return null;
+
+            const disconnected = new AbortController();
+            const disconnect = () => disconnected.abort();
+            connection.disconnected.addEventListener('abort', disconnect, {once: true});
+            if (connection.disconnected.aborted) disconnect();
+
+            let dockview: ReturnType<typeof createDockview> | undefined;
+            let removed: {dispose(): void} | undefined;
+            let closed = false;
+            const ready = connection.ready.then(target => {
+                if (closed || disconnected.signal.aborted) throw new Error('Stage window closed');
+                const content = target.mount.ownerDocument.createElement('div');
+                Object.assign(content.style, {width: '100%', height: '100%'});
+                dockview = createDockview(target.mount, {
+                    createComponent: () => ({element: content, init() {}}),
+                    theme: themeLight,
+                    disableDnd: true,
+                    disableFloatingGroups: true
+                });
+                dockview.addPanel({id: 'stage', component: 'stage', title});
+                removed = dockview.onDidRemovePanel(disconnect);
+                return {...target, mount: content};
+            });
+
+            return {
+                ready,
+                disconnected: disconnected.signal,
+                close() {
+                    if (closed) return;
+                    closed = true;
+                    connection.disconnected.removeEventListener('abort', disconnect);
+                    try {
+                        removed?.dispose();
+                        dockview?.dispose();
+                    } finally {
+                        connection.close();
+                    }
+                }
+            };
+        }
+    };
+}
+
+const isJapanese = (locale: string) => /^ja(?:-|$)/i.test(locale);
+
+export function stageDockActionLabel(locale: string, {drawer, detached, external}: {
+    drawer?: boolean;
+    detached: boolean;
+    external?: boolean;
+}) {
+    const japanese = isJapanese(locale);
+    if (detached) return japanese ? 'ドックに戻す' : 'Dock stage';
+    if (external) return japanese ? (drawer ? '別窓で開く' : '別ウィンドウで開く') : 'Open in a separate window';
+    return japanese ? 'アンドック' : 'Undock stage';
+}
+
+export function createStageSurface(React: typeof import('react'), {
+    context, EdgeDrawer, Panel
+}: {
+    context: Context<{locale: string; stageDrawer?: boolean; setStageDrawerOpen?: (open: boolean) => void}>;
+    EdgeDrawer: ElementType;
+    Panel: ElementType;
+}) {
+    return function StageSurface({externalHost, onDockActionChange, ...props}) {
+        const {locale, stageDrawer, setStageDrawerOpen} = React.useContext(context);
+        const japanese = isJapanese(locale);
+        const title = japanese ? 'ステージ' : 'Stage';
+        const host = React.useMemo(() => stageDrawer && externalHost ?
+            createStagePopoutHost(externalHost, title) : externalHost, [stageDrawer, externalHost, title]);
+        const panel = React.createElement(Panel, {
+            ...props,
+            id: 'stage',
+            title,
+            externalHost: host,
+            externalOnly: stageDrawer,
+            onDockActionChange: stageDrawer && !host ? undefined : onDockActionChange
+        });
+        return stageDrawer ? React.createElement(EdgeDrawer, {
+            edge: 'right',
+            label: japanese ? 'ステージを展開' : 'Reveal stage',
+            onOpenChange: setStageDrawerOpen
+        }, panel) : panel;
+    };
+}

package/src/standard-layout.ts

@@ -14,11 +14,13 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
     const targetTools = React.createContext(null);
 
     function StandardLayout({
-        enabled, splitter, windowLayout, stageActionEnabled, onPaletteModeChange, windowTools, Container, render, ...props
+        enabled, splitter, windowLayout, stageActionEnabled, stageDrawer = false,
+        onPaletteModeChange, windowTools, Container, render, ...props
     }) {
         const [showUndock, setShowUndock] = useState(false);
         const [targetsPinned, setTargetsPinned] = useState(false);
         const [showStage, setShowStage] = useState(true);
+        const [stageDrawerOpen, setStageDrawerOpen] = useState(false);
         const [size, setSize] = useState(null);
         const [targetRatio, setTargetRatio] = useState(null);
         const [preferredStageWidth, setPreferredStageWidth] = useState(null);
@@ -94,10 +96,11 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
             };
             if (!plusLayout) return shared;
             const stageOverlap = `${stageWidth + 20}px`;
+            const stageOverlaps = showStage && (!stageDrawer || stageDrawerOpen);
             const bodyStyle = {
                 display: 'grid',
-                '--plus-stage-overlap': showStage ? stageOverlap : '0px',
-                '--plus-stage-tab-inset': showStage ? stageOverlap : '3rem'
+                '--plus-stage-overlap': stageOverlaps ? stageOverlap : '0px',
+                '--plus-stage-tab-inset': stageOverlaps ? stageOverlap : '3rem'
             };
             if (resizable) {
                 bodyStyle['--plus-target-width'] = `${targetSplit.first}px`;
@@ -117,7 +120,7 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
                 columnSplitter,
                 editorStyle: {gridArea: 'editor', minWidth: 0, minHeight: 0},
                 stageColumnStyle: {display: 'contents'},
-                stageClassName: `${styles.stagePanel} ${styles.floatingStage}${stageHidden ? ` ${styles.stageHidden}` : ''}`,
+                stageClassName: `${styles.stagePanel} ${styles.floatingStage}${stageDrawer ? ` ${styles.stageDrawer}` : ''}${stageHidden ? ` ${styles.stageHidden}` : ''}`,
                 targetClassName: targetsPinned ? styles.standardTargets :
                     `${styles.standardTargets} ${styles.retractedTargets}`,
                 stageDisplayWidth: stageWidth,
@@ -142,7 +145,8 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
             render: slots => render(applyStandardLayout(slots), showUndock)
         });
         return element(context.Provider, {value: {
-            showUndock, plusLayout, targetsPinned, setTargetsPinned, stageHidden, setStageVisible: setShowStage, stageResize, stageActionMount, locale: props.locale
+            showUndock, plusLayout, targetsPinned, setTargetsPinned, stageHidden, setStageVisible: setShowStage, stageResize, stageActionMount,
+            stageDrawer: plusLayout && stageDrawer, setStageDrawerOpen, locale: props.locale
         }},
             Container ? element(Container, {locale: props.locale}, layout) : layout);
     }
@@ -192,7 +196,7 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
                     if (panel.current && !panel.current.hidden) panel.current.focus({preventScroll: true});
                 });
             }
-        }, edge === 'left' ? '›' : '⌃'),
+        }, {left: '›', right: '‹', bottom: '⌃'}[edge]),
         element('div', {className: styles.edgePanel, ref: panel, tabIndex: -1, hidden: !open}, children));
     }