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

package/dist/stage-surface.d.ts

@@ -0,0 +1,31 @@
+import type { Context, ElementType } from 'react';
+interface StageWindowConnection<Target> {
+    ready: Promise<Target>;
+    disconnected: AbortSignal;
+    close(): void;
+}
+interface StageWindowHost<Request, Target> {
+    open(request: Request): StageWindowConnection<Target> | null;
+}
+export declare function createStagePopoutHost<Request, Target extends {
+    mount: HTMLElement;
+}>(host: StageWindowHost<Request, Target>, title: string): StageWindowHost<Request, Target>;
+export declare function stageDockActionLabel(locale: string, { drawer, detached, external }: {
+    drawer?: boolean;
+    detached: boolean;
+    external?: boolean;
+}): "ドックに戻す" | "Dock stage" | "別窓で開く" | "別ウィンドウで開く" | "Open in a separate window" | "アンドック" | "Undock stage";
+export declare function createStageSurface(React: typeof import('react'), { context, EdgeDrawer, Panel }: {
+    context: Context<{
+        locale: string;
+        stageDrawer?: boolean;
+        setStageDrawerOpen?: (open: boolean) => void;
+    }>;
+    EdgeDrawer: ElementType;
+    Panel: ElementType;
+}): ({ externalHost, onDockActionChange, ...props }: {
+    [x: string]: any;
+    externalHost: any;
+    onDockActionChange: any;
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/stage-surface.js

@@ -0,0 +1,81 @@
+import { createDockview, themeLight } from 'dockview';
+export function createStagePopoutHost(host, title) {
+    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;
+            let removed;
+            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) => /^ja(?:-|$)/i.test(locale);
+export function stageDockActionLabel(locale, { drawer, detached, external }) {
+    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, { context, EdgeDrawer, Panel }) {
+    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/dist/standard-layout.d.ts

@@ -4,12 +4,13 @@ export declare function createStandardLayout(React: any, { styles, targetStyles,
     context: any;
     LayoutMenu: any;
 }): {
-    StandardLayout: ({ enabled, splitter, windowLayout, stageActionEnabled, onPaletteModeChange, windowTools, Container, render, ...props }: {
+    StandardLayout: ({ enabled, splitter, windowLayout, stageActionEnabled, stageDrawer, onPaletteModeChange, windowTools, Container, render, ...props }: {
         [x: string]: any;
         enabled: any;
         splitter: any;
         windowLayout: any;
         stageActionEnabled: any;
+        stageDrawer?: boolean;
         onPaletteModeChange: any;
         windowTools: any;
         Container: any;

package/dist/standard-layout.js

@@ -10,10 +10,11 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
     const targets = createTargetList(React, targetStyles);
     const targetSearch = React.createContext('');
     const targetTools = React.createContext(null);
-    function StandardLayout({ enabled, splitter, windowLayout, stageActionEnabled, onPaletteModeChange, windowTools, Container, render, ...props }) {
+    function StandardLayout({ 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);
@@ -83,10 +84,11 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
             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`;
@@ -106,7 +108,7 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
                 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,
@@ -130,7 +132,8 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
             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);
     }
     function EdgeDrawer({ edge, label, pinned = false, onOpenChange, children }) {
@@ -180,7 +183,7 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
                         panel.current.focus({ preventScroll: true });
                 });
             }
-        }, edge === 'left' ? '›' : '⌃'), element('div', { className: styles.edgePanel, ref: panel, tabIndex: -1, hidden: !open }, children));
+        }, { left: '›', right: '‹', bottom: '⌃' }[edge]), element('div', { className: styles.edgePanel, ref: panel, tabIndex: -1, hidden: !open }, children));
     }
     function TargetLayout({ compact, render }) {
         const { plusLayout, targetsPinned, locale } = useContext(context);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-layout",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Resizable panes and layout for TurboWarp Plus Editor",
   "type": "module",
   "license": "GPL-3.0-or-later",
@@ -13,6 +13,10 @@
       "types": "./dist/standard-layout.d.ts",
       "default": "./dist/standard-layout.js"
     },
+    "./stage-surface": {
+      "types": "./dist/stage-surface.d.ts",
+      "default": "./dist/stage-surface.js"
+    },
     "./editor.css": "./src/editor.css",
     "./targets.css": "./src/targets.css",
     "./sprite-properties": {

package/src/editor.css

@@ -327,6 +327,10 @@
     z-index: 90;
 }
 
+.standard-body .stage-drawer {
+    right: 0;
+}
+
 .standard-body {
     --plus-extension-button-width: 2.75rem;
     --plus-extension-button-gap: 0.75rem;
@@ -470,6 +474,25 @@ details.layout-menu button {
     pointer-events: none;
 }
 
+.edge-drawer[data-edge="right"] {
+    flex-direction: row-reverse;
+    pointer-events: none;
+}
+
+[dir="rtl"] .edge-drawer[data-edge="right"] {
+    flex-direction: row;
+}
+
+.edge-drawer[data-edge="right"] .edge-trigger {
+    width: 0.625rem;
+    min-height: 3rem;
+    visibility: visible;
+}
+
+.edge-drawer[data-edge="right"] .edge-panel {
+    background: transparent;
+}
+
 .edge-drawer[data-edge="bottom"] {
     z-index: var(--plus-docked-utility-layer);
     flex: none;

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));
     }