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

package/src/sprite-editor-toolbar.css

@@ -0,0 +1,108 @@
+.tw-plus-sprite-toolbar {
+    --tw-plus-toolbar-height: 28px;
+    --tw-plus-toolbar-radius: 999px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+    padding: 6px;
+    color: var(--text-primary, #2c3650);
+    background: var(--dv-activegroup-visiblepanel-tab-background-color, var(--ui-white, #fff));
+    border-block-end: 1px solid var(--ui-black-transparent, #d5dbe3);
+}
+
+.tw-plus-sprite-toolbar[data-active-group="false"] {
+    background: var(--dv-inactivegroup-visiblepanel-tab-background-color, var(--ui-tertiary, #e8ecf5));
+}
+
+.tw-plus-sprite-toolbar-sections {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-width: 0;
+}
+
+.tw-plus-sprite-toolbar-sections button,
+.tw-plus-sprite-search input {
+    box-sizing: border-box;
+    min-height: var(--tw-plus-toolbar-height);
+    border: 1px solid var(--ui-black-transparent, #c6cfda);
+    border-radius: var(--tw-plus-toolbar-radius);
+    color: inherit;
+    font: inherit;
+}
+
+.tw-plus-sprite-toolbar-sections button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 8px;
+    background: var(--ui-secondary, #edf0f7);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.tw-plus-sprite-toolbar-sections button:hover { background: var(--ui-tertiary, #dce4f1); }
+.tw-plus-sprite-toolbar-sections button[aria-selected="true"] {
+    border-color: var(--looks-secondary-dark, #6747a8);
+    background: var(--looks-secondary-dark, #6747a8);
+    color: #fff;
+}
+
+.tw-plus-sprite-toolbar-sections button:focus-visible,
+.tw-plus-sprite-search input:focus-visible {
+    outline: 2px solid var(--looks-secondary, #855cd6);
+    outline-offset: 1px;
+}
+
+.tw-plus-sprite-toolbar svg { width: 16px; height: 16px; flex: none; }
+
+.tw-plus-sprite-search {
+    position: relative;
+    flex: 0 1 132px;
+    min-width: 0;
+    margin-inline-start: auto;
+}
+
+.tw-plus-sprite-search-field { position: relative; }
+.tw-plus-sprite-search-field svg {
+    position: absolute;
+    inset-inline-start: 8px;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.tw-plus-sprite-search input {
+    display: block;
+    width: 100%;
+    padding-inline: 28px 8px;
+    background: var(--input-background, var(--ui-white, #fff));
+    color-scheme: var(--color-scheme, light);
+    font-size: 12px;
+}
+
+.tw-plus-sprite-search input::placeholder { color: inherit; opacity: 0.75; }
+
+.tw-plus-sprite-search ul {
+    position: absolute;
+    z-index: 5;
+    inset-inline-end: 0;
+    inset-block-start: 100%;
+    width: max(100%, 12rem);
+    max-width: calc(100cqw - 12px);
+    max-height: min(250px, 40vh);
+    margin: 4px 0 0;
+    padding: 4px;
+    overflow: auto;
+    border: 1px solid var(--ui-black-transparent, #c6cfda);
+    border-radius: 6px;
+    background: var(--popover-background, var(--ui-white, #fff));
+    box-shadow: 0 4px 12px #0003;
+    list-style: none;
+}
+
+.tw-plus-sprite-search li { padding: 4px 6px; overflow-wrap: anywhere; cursor: pointer; }
+.tw-plus-sprite-search li:hover,
+.tw-plus-sprite-search li[aria-selected="true"] { background: var(--looks-light-transparent, #e6dff3); }

package/src/sprite-editor-toolbar.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+
+export const spriteEditorSections = ['code', 'costumes', 'sounds', 'variables'] as const;
+export type SpriteEditorSection = typeof spriteEditorSections[number];
+
+export interface SpriteSearchResult {
+    id: string;
+    label: string;
+}
+
+export interface SpriteEditorSearch {
+    find(query: string, section: SpriteEditorSection): readonly SpriteSearchResult[];
+    select(result: SpriteSearchResult, section: SpriteEditorSection): void;
+    onFocus?(): void;
+}
+
+interface SpriteEditorToolbarProps {
+    viewId: string;
+    locale: string;
+    section: SpriteEditorSection;
+    onSectionChange(section: SpriteEditorSection): void;
+    isStage?: boolean;
+    activeGroup?: boolean;
+    search?: SpriteEditorSearch;
+    availableSections?: readonly SpriteEditorSection[];
+    actions?: React.ReactNode;
+}
+
+const glyphs: Record<SpriteEditorSection | 'search', string> = {
+    code: 'm5.5 4-4 4 4 4m5-8 4 4-4 4',
+    costumes: 'm6 9 5.5-6.5a1.4 1.4 0 0 1 2 2L7.5 11m-2-2a2.5 2.5 0 0 0-3 2.5L2 14c2.7 0 5-1 5-3a2 2 0 0 0-1.5-2Z',
+    sounds: 'M2 6h3l4-3v10l-4-3H2Zm9.5 0a3 3 0 0 1 0 4m2-6a5.5 5.5 0 0 1 0 8',
+    variables: 'M5 2H3v12h2m6-12h2v12h-2M6 6l4 4m0-4-4 4',
+    search: 'M10 10l3 3M11 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z'
+};
+
+function Icon({kind}: {kind: keyof typeof glyphs}) {
+    return <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"
+        strokeLinecap="round" strokeLinejoin="round"><path d={glyphs[kind]} /></svg>;
+}
+
+function SearchBox({viewId, section, japanese, search}: {
+    viewId: string; section: SpriteEditorSection; japanese: boolean; search: SpriteEditorSearch;
+}) {
+    const [query, setQuery] = React.useState('');
+    const [open, setOpen] = React.useState(false);
+    const [index, setIndex] = React.useState(-1);
+    const [focused, setFocused] = React.useState(false);
+    const results = open && focused && query.trim() ? search.find(query.trim(), section) : [];
+    const listId = viewId + '-search-results';
+    const selected = results[index];
+    const expanded = results.length > 0;
+    const optionId = (position: number) => listId + '-' + position;
+
+    function choose(result: SpriteSearchResult) {
+        setOpen(false);
+        setIndex(-1);
+        search.select(result, section);
+    }
+
+    return <div className="tw-plus-sprite-search">
+        <div className="tw-plus-sprite-search-field">
+            <Icon kind="search" />
+            <input type="search" role="combobox" autoComplete="off" aria-autocomplete="list"
+                aria-label={japanese ? 'スプライト内を検索' : 'Search within this sprite'}
+                aria-controls={expanded ? listId : undefined} aria-expanded={expanded}
+                aria-activedescendant={selected ? optionId(index) : undefined}
+                placeholder={japanese ? '検索' : 'Search'} value={query}
+                onFocus={() => {setFocused(true); setOpen(true); search.onFocus?.();}}
+                onBlur={() => {setFocused(false); setIndex(-1);}}
+                onChange={event => {setQuery(event.currentTarget.value); setOpen(true); setIndex(-1);}}
+                onKeyDown={event => {
+                    if (event.key === 'Escape' && expanded) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setOpen(false);
+                        setIndex(-1);
+                    } else if (expanded && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                        event.preventDefault();
+                        const offset = event.key === 'ArrowDown' ? 1 : -1;
+                        setIndex(selected ? (index + offset + results.length) % results.length :
+                            offset === 1 ? 0 : results.length - 1);
+                    } else if (event.key === 'Enter' && selected) {
+                        event.preventDefault();
+                        choose(selected);
+                    }
+                }} />
+        </div>
+        {expanded && <ul role="listbox" id={listId} aria-label={japanese ? '検索結果' : 'Search results'}>
+            {results.map((result, position) => <li key={result.id} id={optionId(position)} role="option"
+                aria-selected={position === index} onPointerDown={event => event.preventDefault()}
+                onClick={() => choose(result)}>{result.label}</li>)}
+        </ul>}
+    </div>;
+}
+
+export function SpriteEditorToolbar({viewId, locale, section, onSectionChange, isStage, activeGroup, search,
+    availableSections = spriteEditorSections, actions}: SpriteEditorToolbarProps) {
+    const japanese = /^ja(?:-|$)/i.test(locale);
+    const labels = japanese ? {code: 'コード', costumes: isStage ? '背景' : 'コスチューム', sounds: '音', variables: '変数'} :
+        {code: 'Code', costumes: isStage ? 'Backdrops' : 'Costumes', sounds: 'Sounds', variables: 'Variables'};
+    return <div className="tw-plus-sprite-toolbar" data-active-group={activeGroup}>
+        <div className="tw-plus-sprite-toolbar-sections" role="tablist"
+            aria-label={japanese ? 'スプライトの編集内容' : 'Sprite editor sections'}>
+            {availableSections.map((id, index) => <button key={id} type="button" role="tab"
+                id={viewId + '-section-' + id} aria-selected={section === id} tabIndex={section === id ? 0 : -1}
+                aria-controls={viewId + '-content'} onClick={() => onSectionChange(id)} onKeyDown={event => {
+                    const direction = event.currentTarget.ownerDocument.dir === 'rtl' ? -1 : 1;
+                    const next = {ArrowLeft: index - direction, ArrowRight: index + direction,
+                        Home: 0, End: availableSections.length - 1}[event.key];
+                    if (next === undefined) return;
+                    event.preventDefault();
+                    const position = (next + availableSections.length) % availableSections.length;
+                    onSectionChange(availableSections[position]);
+                    event.currentTarget.parentElement.querySelectorAll<HTMLButtonElement>('button')[position]?.focus();
+                }}>
+                <Icon kind={id} />
+                {labels[id]}
+            </button>)}
+        </div>
+        {search && <SearchBox {...{viewId, section, japanese, search}} />}
+        {actions}
+    </div>;
+}

package/src/sprite-layout-menu.css

@@ -0,0 +1,54 @@
+.tw-plus-sprite-layout-menu {
+    align-self: center;
+    padding-inline: 4px;
+}
+
+.tw-plus-sprite-layout-menu-trigger {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+    color: var(--text-primary, #263247);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.tw-plus-sprite-layout-menu-trigger svg { width: 16px; height: 16px; }
+.tw-plus-sprite-layout-menu-trigger:hover { background: var(--ui-black-transparent, #e2e7f0); }
+
+.tw-plus-sprite-layout-menu-popup {
+    position: fixed;
+    z-index: 1000;
+    inset: auto;
+    box-sizing: border-box;
+    max-width: calc(100vw - 8px);
+    margin: 0;
+    padding: 4px;
+    color: var(--text-primary, #263247);
+    background: var(--popover-background, var(--ui-white, #fff));
+    border: 1px solid var(--ui-black-transparent, #c6cfda);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px #0003;
+    font: 13px system-ui, sans-serif;
+}
+
+.tw-plus-sprite-layout-menu-popup button {
+    display: block;
+    width: 100%;
+    padding: 6px 8px;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 4px;
+    text-align: start;
+    font: inherit;
+    cursor: pointer;
+}
+
+.tw-plus-sprite-layout-menu-popup button:disabled { opacity: 0.55; cursor: default; }
+.tw-plus-sprite-layout-menu-popup button:enabled:is(:hover, :focus-visible) {
+    background: var(--looks-light-transparent, #e6dff3);
+}

package/src/sprite-layout-menu.ts

@@ -0,0 +1,119 @@
+interface SpriteLayoutCommands {
+    splitRight(): void;
+    splitBelow(): void;
+    close(): void;
+    canClose(): boolean;
+}
+
+const labels = {
+    ja: ['編集パネルのレイアウト', 'パネルを横に分割', 'パネルを縦に分割', 'この分割パネルを閉じる'],
+    en: ['Editor panel layout', 'Split right', 'Split below', 'Close this split']
+};
+
+export function createSpriteLayoutMenu(document: Document, locale: string, commands: SpriteLayoutCommands) {
+    const [title, right, below, closeLabel] = /^ja(?:-|$)/i.test(locale) ? labels.ja : labels.en;
+    const element = document.createElement('div');
+    element.className = 'tw-plus-sprite-layout-menu';
+    const trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'tw-plus-sprite-layout-menu-trigger';
+    trigger.title = title;
+    trigger.setAttribute('aria-label', title);
+    trigger.setAttribute('aria-haspopup', 'menu');
+    trigger.setAttribute('aria-expanded', 'false');
+    const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    icon.setAttribute('viewBox', '0 0 16 16');
+    icon.setAttribute('aria-hidden', 'true');
+    icon.setAttribute('fill', 'none');
+    icon.setAttribute('stroke', 'currentColor');
+    icon.setAttribute('stroke-width', '1.4');
+    const shape = document.createElementNS(icon.namespaceURI, 'path');
+    shape.setAttribute('d', 'M2.5 3.5h11v9h-11zM2.5 6.5h11m-7 0v6');
+    icon.append(shape);
+    trigger.append(icon);
+    element.append(trigger);
+
+    const popup = document.createElement('div');
+    popup.className = 'tw-plus-sprite-layout-menu-popup';
+    popup.setAttribute('role', 'menu');
+    popup.setAttribute('aria-label', title);
+    const buttons = [[right, commands.splitRight], [below, commands.splitBelow], [closeLabel, commands.close]].map(
+        ([label, run]: [string, () => void]) => {
+            const item = document.createElement('button');
+            item.type = 'button';
+            item.textContent = label;
+            item.tabIndex = -1;
+            item.setAttribute('role', 'menuitem');
+            item.addEventListener('click', () => {
+                close(true);
+                run();
+            });
+            return item;
+        });
+    popup.append(...buttons);
+    let openedIn: Document | undefined;
+    let topLayer = false;
+
+    function close(restoreFocus = false) {
+        if (!openedIn) return;
+        openedIn.removeEventListener('pointerdown', dismiss, true);
+        openedIn = undefined;
+        if (topLayer && popup.matches(':popover-open')) popup.hidePopover();
+        popup.remove();
+        trigger.setAttribute('aria-expanded', 'false');
+        if (restoreFocus) trigger.focus({preventScroll: true});
+    }
+
+    function dismiss(event: PointerEvent) {
+        const node = event.target as Node;
+        if (!trigger.contains(node) && !popup.contains(node)) close();
+    }
+
+    function open(last = false) {
+        if (openedIn) return;
+        openedIn = trigger.ownerDocument;
+        buttons[2].disabled = !commands.canClose();
+        topLayer = typeof popup.showPopover === 'function';
+        if (topLayer) {
+            popup.setAttribute('popover', 'manual');
+            element.append(popup);
+            popup.showPopover();
+        } else {
+            openedIn.body.append(popup);
+        }
+        const anchor = trigger.getBoundingClientRect();
+        const viewport = openedIn.documentElement;
+        const {width, height} = popup.getBoundingClientRect();
+        popup.style.left = Math.max(4, Math.min(anchor.right - width, viewport.clientWidth - width - 4)) + 'px';
+        popup.style.top = (anchor.bottom + height + 8 <= viewport.clientHeight ? anchor.bottom + 4 :
+            Math.max(4, anchor.top - height - 4)) + 'px';
+        trigger.setAttribute('aria-expanded', 'true');
+        openedIn.addEventListener('pointerdown', dismiss, true);
+        const enabled = buttons.filter(button => !button.disabled);
+        enabled[last ? enabled.length - 1 : 0]?.focus({preventScroll: true});
+    }
+
+    trigger.addEventListener('click', () => openedIn ? close(true) : open());
+    trigger.addEventListener('keydown', event => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+        event.preventDefault();
+        open(event.key === 'ArrowUp');
+    });
+    popup.addEventListener('focusout', event => {
+        if (!popup.contains(event.relatedTarget as Node)) close();
+    });
+    popup.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            close(true);
+            return;
+        }
+        const enabled = buttons.filter(button => !button.disabled);
+        const index = enabled.indexOf(event.target as HTMLButtonElement);
+        const next = {ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: enabled.length - 1}[event.key];
+        if (next === undefined) return;
+        event.preventDefault();
+        enabled[(next + enabled.length) % enabled.length]?.focus({preventScroll: true});
+    });
+    return {element, dispose: () => close()};
+}