@kubohiroya/turbowarp-plus-editor-layout 0.1.6 → 0.1.7

package/dist/sprite-asset-pane.d.ts

@@ -1,4 +1,49 @@
 import React from 'react';
+import type { SpriteAssetPreviewItem } from './sprite-tabs.ts';
+interface NativeAssetPanelProps {
+    children?: React.ReactNode;
+    buttons: readonly {
+        title: string;
+        img: string;
+        onClick(): void;
+    }[];
+    items: readonly {
+        dragPayload?: object;
+        name: string;
+        url?: string;
+        details?: React.ReactNode;
+    }[];
+    isRtl?: boolean;
+    listActions?: React.ElementType;
+    selectedItemIndex: number;
+    onItemClick(index: number): void;
+}
+interface NativeSelectorProps extends NativeAssetPanelProps {
+    wrapperAttributes?: Record<string, string>;
+    listRef?(node: HTMLElement | null): void;
+    onListScroll?(event: React.UIEvent<HTMLElement>): void;
+    draggingType?: null;
+    onAddSortable?(): void;
+    onRemoveSortable?(): void;
+}
+export type NativeAssetSelector = React.ComponentType<NativeSelectorProps>;
+export type NativeAssetPanelRenderer = (props: NativeAssetPanelProps, options: {
+    panelAttributes: Record<string, string>;
+    detailAttributes: Record<string, string>;
+    renderSelector(Component: NativeAssetSelector, props: NativeSelectorProps): React.ReactNode;
+}) => React.ReactNode;
+export type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number, detail: React.ReactNode, scrollTop: number) => React.ReactNode;
+interface PanelState {
+    rememberLayout(render: SpriteAssetLayout): void;
+    getScrollTop(): number;
+    rememberScrollTop(position: number): void;
+}
+export declare function NativeAssetPanel({ render, previewSelector, panel, state }: {
+    render: NativeAssetPanelRenderer;
+    previewSelector: NativeAssetSelector;
+    panel: NativeAssetPanelProps;
+    state: PanelState;
+}): React.JSX.Element;
 export interface SpriteMediaAsset {
     /** Host identity for this item within its target, independent of the list order. */
     id: string;

package/dist/sprite-asset-pane.js

@@ -1,4 +1,47 @@
 import React from 'react';
+const noop = () => { };
+function NativeAssetPanelSurface({ render, panel, state, previewSelector, scrollTop }) {
+    const list = React.useRef(null);
+    const setList = React.useCallback((node) => {
+        list.current = node;
+    }, []);
+    React.useLayoutEffect(() => {
+        const position = state?.getScrollTop() ?? scrollTop;
+        if (list.current && position !== undefined)
+            list.current.scrollTop = position;
+    }, [state, scrollTop]);
+    return render(panel, {
+        panelAttributes: { 'data-layout-asset-panel': '' },
+        detailAttributes: { 'data-layout-asset-detail': '' },
+        renderSelector(Component, props) {
+            const selectorProps = { ...props, listRef: setList, wrapperAttributes: { 'data-layout-asset-list': '' } };
+            if (previewSelector) {
+                return React.createElement("div", { inert: '', style: { display: 'contents' } }, React.createElement(previewSelector, {
+                    ...selectorProps, draggingType: null, onAddSortable: noop, onRemoveSortable: noop
+                }));
+            }
+            return React.createElement(Component, { ...selectorProps, onListScroll: event => {
+                    state?.rememberScrollTop(event.currentTarget.scrollTop);
+                } });
+        }
+    });
+}
+export function NativeAssetPanel({ render, previewSelector, panel, state }) {
+    const { items, buttons, isRtl, listActions } = panel;
+    React.useLayoutEffect(() => {
+        const previousItems = new Map(items.map(item => [item.dragPayload, item]));
+        const readOnlyButtons = buttons.map(({ title, img }) => ({ title, img, onClick: noop }));
+        state.rememberLayout((previewItems, selectedItemIndex, detail, scrollTop) => React.createElement(NativeAssetPanelSurface, { render: render, previewSelector: previewSelector, scrollTop: scrollTop, panel: {
+                isRtl, listActions, selectedItemIndex, buttons: readOnlyButtons,
+                onItemClick: noop, children: detail,
+                items: previewItems.map(item => {
+                    const previous = previousItems.get(item.asset);
+                    return { name: item.name, url: item.imageUrl || previous?.url, details: previous?.details };
+                })
+            } }));
+    }, [state, render, previewSelector, items, buttons, isRtl, listActions]);
+    return React.createElement(NativeAssetPanelSurface, { render: render, panel: panel, state: state });
+}
 const english = {
     costumes: 'Costumes', sounds: 'Sounds', variables: 'Variables', name: 'Name', value: 'Value',
     local: 'Sprite', global: 'Project', emptyCostumes: 'No costumes', emptySounds: 'No sounds',

package/dist/sprite-tabs.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { NativeAssetPanel } from './sprite-asset-pane.tsx';
+import type { NativeAssetPanelRenderer, NativeAssetSelector, SpriteAssetLayout } from './sprite-asset-pane.tsx';
 import type { SpriteVariable } from './sprite-asset-pane.tsx';
 import type { SpriteSearchResult } from './sprite-editor-toolbar.tsx';
 import type { DockviewStagePane } from './dockview-stage.ts';
@@ -49,6 +51,7 @@ export interface SpriteTabAdapter<Snapshot = unknown> {
 export interface SpriteAssetSelection {
     restore(target: object, assets: readonly object[]): number | undefined;
     remember(target: object, asset: object | undefined, select?: (index: number) => void): void;
+    renderPanel?(render: NativeAssetPanelRenderer, previewSelector: NativeAssetSelector, panel: React.ComponentProps<typeof NativeAssetPanel>['panel']): React.ReactNode;
     rememberLayout?(render: SpriteAssetLayout): void;
     getScrollTop?(): number;
     rememberScrollTop?(position: number): void;
@@ -62,7 +65,6 @@ export interface SpriteAssetPreviewItem {
     buffer?: AudioBuffer;
     duration?: number;
 }
-type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number, detail: React.ReactNode, scrollTop: number) => React.ReactNode;
 export interface SpriteAssetPreviewData {
     items: readonly SpriteAssetPreviewItem[];
     defaultAsset?: object;

package/dist/sprite-tabs.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { createDockview, DefaultTab, themeLight } from 'dockview';
 import { createSpriteLayoutMenu } from "./sprite-layout-menu.js";
-import { SpriteAssetPane } from "./sprite-asset-pane.js";
+import { NativeAssetPanel, SpriteAssetPane } from "./sprite-asset-pane.js";
 import { SpriteEditorToolbar, spriteEditorSections } from "./sprite-editor-toolbar.js";
 import { getDocumentWorkspace } from "./document-workspace.js";
 import { readWorkspaceLayout } from "./workspace-layout.js";
@@ -14,32 +14,38 @@ function createAssetSelections(target, source) {
     const layouts = new Map(source?.layouts);
     const scroll = new Map(source?.scroll);
     const selectors = new Map();
-    const forKind = (kind) => ({
-        restore(current, assets) {
-            if (current !== target)
-                return;
-            const index = assets.indexOf(selected.get(kind));
-            if (index >= 0)
-                return index;
-        },
-        remember(current, asset, select) {
-            if (current !== target)
-                return;
-            if (asset)
-                selected.set(kind, asset);
-            else
-                selected.delete(kind);
-            if (select)
-                selectors.set(kind, select);
-        },
-        rememberLayout(render) {
-            layouts.set(kind, render);
-        },
-        getScrollTop: () => scroll.get(kind) ?? 0,
-        rememberScrollTop(position) {
-            scroll.set(kind, position);
-        }
-    });
+    const forKind = (kind) => {
+        const state = {
+            rememberLayout(render) {
+                layouts.set(kind, render);
+            },
+            getScrollTop: () => scroll.get(kind) ?? 0,
+            rememberScrollTop(position) {
+                scroll.set(kind, position);
+            }
+        };
+        return {
+            ...state,
+            renderPanel: (render, previewSelector, panel) => React.createElement(NativeAssetPanel, { render, previewSelector, panel, state }),
+            restore(current, assets) {
+                if (current !== target)
+                    return;
+                const index = assets.indexOf(selected.get(kind));
+                if (index >= 0)
+                    return index;
+            },
+            remember(current, asset, select) {
+                if (current !== target)
+                    return;
+                if (asset)
+                    selected.set(kind, asset);
+                else
+                    selected.delete(kind);
+                if (select)
+                    selectors.set(kind, select);
+            },
+        };
+    };
     const ports = { costumes: forKind('costumes'), sounds: forKind('sounds') };
     return { selected, ports, layouts, selectors, scroll };
 }

package/package.json

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

package/src/sprite-asset-pane.tsx

@@ -1,4 +1,100 @@
 import React from 'react';
+import type {SpriteAssetPreviewItem} from './sprite-tabs.ts';
+
+interface NativeAssetPanelProps {
+    children?: React.ReactNode;
+    buttons: readonly {title: string; img: string; onClick(): void}[];
+    items: readonly {dragPayload?: object; name: string; url?: string; details?: React.ReactNode}[];
+    isRtl?: boolean;
+    listActions?: React.ElementType;
+    selectedItemIndex: number;
+    onItemClick(index: number): void;
+}
+
+interface NativeSelectorProps extends NativeAssetPanelProps {
+    wrapperAttributes?: Record<string, string>;
+    listRef?(node: HTMLElement | null): void;
+    onListScroll?(event: React.UIEvent<HTMLElement>): void;
+    draggingType?: null;
+    onAddSortable?(): void;
+    onRemoveSortable?(): void;
+}
+
+export type NativeAssetSelector = React.ComponentType<NativeSelectorProps>;
+export type NativeAssetPanelRenderer = (props: NativeAssetPanelProps, options: {
+    panelAttributes: Record<string, string>;
+    detailAttributes: Record<string, string>;
+    renderSelector(Component: NativeAssetSelector, props: NativeSelectorProps): React.ReactNode;
+}) => React.ReactNode;
+
+export type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number,
+    detail: React.ReactNode, scrollTop: number) => React.ReactNode;
+
+interface PanelState {
+    rememberLayout(render: SpriteAssetLayout): void;
+    getScrollTop(): number;
+    rememberScrollTop(position: number): void;
+}
+
+const noop = () => {};
+
+function NativeAssetPanelSurface({render, panel, state, previewSelector, scrollTop}: {
+    render: NativeAssetPanelRenderer;
+    panel: NativeAssetPanelProps;
+    state?: PanelState;
+    previewSelector?: NativeAssetSelector;
+    scrollTop?: number;
+}) {
+    const list = React.useRef<HTMLElement | null>(null);
+    const setList = React.useCallback((node: HTMLElement | null) => {
+        list.current = node;
+    }, []);
+    React.useLayoutEffect(() => {
+        const position = state?.getScrollTop() ?? scrollTop;
+        if (list.current && position !== undefined) list.current.scrollTop = position;
+    }, [state, scrollTop]);
+
+    return render(panel, {
+        panelAttributes: {'data-layout-asset-panel': ''},
+        detailAttributes: {'data-layout-asset-detail': ''},
+        renderSelector(Component, props) {
+            const selectorProps = {...props, listRef: setList, wrapperAttributes: {'data-layout-asset-list': ''}};
+            if (previewSelector) {
+                return <div {...{inert: ''}} style={{display: 'contents'}}>
+                    {React.createElement(previewSelector, {
+                        ...selectorProps, draggingType: null, onAddSortable: noop, onRemoveSortable: noop
+                    })}
+                </div>;
+            }
+            return <Component {...selectorProps} onListScroll={event => {
+                state?.rememberScrollTop(event.currentTarget.scrollTop);
+            }} />;
+        }
+    });
+}
+
+export function NativeAssetPanel({render, previewSelector, panel, state}: {
+    render: NativeAssetPanelRenderer;
+    previewSelector: NativeAssetSelector;
+    panel: NativeAssetPanelProps;
+    state: PanelState;
+}) {
+    const {items, buttons, isRtl, listActions} = panel;
+    React.useLayoutEffect(() => {
+        const previousItems = new Map(items.map(item => [item.dragPayload, item]));
+        const readOnlyButtons = buttons.map(({title, img}) => ({title, img, onClick: noop}));
+        state.rememberLayout((previewItems, selectedItemIndex, detail, scrollTop) => <NativeAssetPanelSurface
+            render={render} previewSelector={previewSelector} scrollTop={scrollTop} panel={{
+                isRtl, listActions, selectedItemIndex, buttons: readOnlyButtons,
+                onItemClick: noop, children: detail,
+                items: previewItems.map(item => {
+                    const previous = previousItems.get(item.asset);
+                    return {name: item.name, url: item.imageUrl || previous?.url, details: previous?.details};
+                })
+            }} />);
+    }, [state, render, previewSelector, items, buttons, isRtl, listActions]);
+    return <NativeAssetPanelSurface render={render} panel={panel} state={state} />;
+}
 
 export interface SpriteMediaAsset {
     /** Host identity for this item within its target, independent of the list order. */

package/src/sprite-tabs.ts

@@ -3,7 +3,8 @@ import {createPortal} from 'react-dom';
 import {createDockview, DefaultTab, themeLight} from 'dockview';
 import type {DockviewGroupPanel, GroupPanelPartInitParameters, IDockviewPanel, SerializedDockview} from 'dockview';
 import {createSpriteLayoutMenu} from './sprite-layout-menu.ts';
-import {SpriteAssetPane} from './sprite-asset-pane.tsx';
+import {NativeAssetPanel, SpriteAssetPane} from './sprite-asset-pane.tsx';
+import type {NativeAssetPanelRenderer, NativeAssetSelector, SpriteAssetLayout} from './sprite-asset-pane.tsx';
 import type {SpriteVariable} from './sprite-asset-pane.tsx';
 import {SpriteEditorToolbar, spriteEditorSections} from './sprite-editor-toolbar.tsx';
 import type {SpriteSearchResult} from './sprite-editor-toolbar.tsx';
@@ -61,6 +62,8 @@ export interface SpriteTabAdapter<Snapshot = unknown> {
 export interface SpriteAssetSelection {
     restore(target: object, assets: readonly object[]): number | undefined;
     remember(target: object, asset: object | undefined, select?: (index: number) => void): void;
+    renderPanel?(render: NativeAssetPanelRenderer, previewSelector: NativeAssetSelector,
+        panel: React.ComponentProps<typeof NativeAssetPanel>['panel']): React.ReactNode;
     rememberLayout?(render: SpriteAssetLayout): void;
     getScrollTop?(): number;
     rememberScrollTop?(position: number): void;
@@ -77,7 +80,6 @@ export interface SpriteAssetPreviewItem {
     duration?: number;
 }
 
-type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number, detail: React.ReactNode, scrollTop: number) => React.ReactNode;
 const variableSection = spriteEditorSections.indexOf('variables');
 
 export interface SpriteAssetPreviewData {
@@ -95,26 +97,33 @@ function createAssetSelections(target: Target, source?: {
     const layouts = new Map(source?.layouts);
     const scroll = new Map(source?.scroll);
     const selectors = new Map<AssetKind, (index: number) => void>();
-    const forKind = (kind: AssetKind): SpriteAssetSelection => ({
-        restore(current, assets) {
-            if (current !== target) return;
-            const index = assets.indexOf(selected.get(kind));
-            if (index >= 0) return index;
-        },
-        remember(current, asset, select) {
-            if (current !== target) return;
-            if (asset) selected.set(kind, asset);
-            else selected.delete(kind);
-            if (select) selectors.set(kind, select);
-        },
-        rememberLayout(render) {
-            layouts.set(kind, render);
-        },
-        getScrollTop: () => scroll.get(kind) ?? 0,
-        rememberScrollTop(position) {
-            scroll.set(kind, position);
-        }
-    });
+    const forKind = (kind: AssetKind): SpriteAssetSelection => {
+        const state = {
+            rememberLayout(render: SpriteAssetLayout) {
+                layouts.set(kind, render);
+            },
+            getScrollTop: () => scroll.get(kind) ?? 0,
+            rememberScrollTop(position: number) {
+                scroll.set(kind, position);
+            }
+        };
+        return {
+            ...state,
+            renderPanel: (render, previewSelector, panel) =>
+                React.createElement(NativeAssetPanel, {render, previewSelector, panel, state}),
+            restore(current, assets) {
+                if (current !== target) return;
+                const index = assets.indexOf(selected.get(kind));
+                if (index >= 0) return index;
+            },
+            remember(current, asset, select) {
+                if (current !== target) return;
+                if (asset) selected.set(kind, asset);
+                else selected.delete(kind);
+                if (select) selectors.set(kind, select);
+            },
+        };
+    };
     const ports: AssetSelections = {costumes: forKind('costumes'), sounds: forKind('sounds')};
     return {selected, ports, layouts, selectors, scroll};
 }