jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support for middle-clicking (and double-clicking) the document tab bar to create a new document (#3363)

This commit is contained in:
Keavon Chambers 2025-11-10 00:45:08 -08:00
parent f5ef1a94fe
commit e42950b4be
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/window/workspace/Panel.svelte
View File

@ -19,7 +19,6 @@
import type { Editor } from "@graphite/editor"; import type { Editor } from "@graphite/editor";
import { type LayoutKeysGroup, type Key } from "@graphite/messages"; import { type LayoutKeysGroup, type Key } from "@graphite/messages";
import { platformIsMac, isEventSupported } from "@graphite/utility-functions/platform"; import { platformIsMac, isEventSupported } from "@graphite/utility-functions/platform";
import { extractPixelData } from "@graphite/utility-functions/rasterization"; import { extractPixelData } from "@graphite/utility-functions/rasterization";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte"; import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@ -30,6 +29,7 @@
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte"; import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte"; import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
const BUTTON_LEFT = 0;
const BUTTON_MIDDLE = 1; const BUTTON_MIDDLE = 1;
const editor = getContext<Editor>("editor"); const editor = getContext<Editor>("editor");
@ -41,6 +41,7 @@
export let panelType: PanelType | undefined = undefined; export let panelType: PanelType | undefined = undefined;
export let clickAction: ((index: number) => void) | undefined = undefined; export let clickAction: ((index: number) => void) | undefined = undefined;
export let closeAction: ((index: number) => void) | undefined = undefined; export let closeAction: ((index: number) => void) | undefined = undefined;
export let emptySpaceAction: (() => void) | undefined = undefined;
let className = ""; let className = "";
export { className as class }; export { className as class };
@ -93,6 +94,11 @@
}); });
} }
function onEmptySpaceAction(e: MouseEvent) {
if (e.target !== e.currentTarget) return;
if (e.button === BUTTON_MIDDLE || (e.button === BUTTON_LEFT && e.detail === 2)) emptySpaceAction?.();
}
export async function scrollTabIntoView(newIndex: number) { export async function scrollTabIntoView(newIndex: number) {
await tick(); await tick();
tabElements[newIndex]?.div?.()?.scrollIntoView(); tabElements[newIndex]?.div?.()?.scrollIntoView();
@ -101,7 +107,7 @@
<LayoutCol on:pointerdown={() => panelType && editor.handle.setActivePanel(panelType)} class={`panel ${className}`.trim()} {classes} style={styleName} {styles}> <LayoutCol on:pointerdown={() => panelType && editor.handle.setActivePanel(panelType)} class={`panel ${className}`.trim()} {classes} style={styleName} {styles}>
<LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}> <LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}>
<LayoutRow class="tab-group" scrollableX={true}> <LayoutRow class="tab-group" scrollableX={true} on:click={onEmptySpaceAction} on:auxclick={onEmptySpaceAction}>
{#each tabLabels as tabLabel, tabIndex} {#each tabLabels as tabLabel, tabIndex}
<LayoutRow <LayoutRow
class="tab" class="tab"

1
frontend/src/components/window/workspace/Workspace.svelte
View File

@ -142,6 +142,7 @@
tabCloseButtons={true} tabCloseButtons={true}
tabMinWidths={true} tabMinWidths={true}
tabLabels={documentTabLabels} tabLabels={documentTabLabels}
emptySpaceAction={() => editor.handle.newDocumentDialog()}
clickAction={(tabIndex) => editor.handle.selectDocument($portfolio.documents[tabIndex].id)} clickAction={(tabIndex) => editor.handle.selectDocument($portfolio.documents[tabIndex].id)}
closeAction={(tabIndex) => editor.handle.closeDocumentWithConfirmation($portfolio.documents[tabIndex].id)} closeAction={(tabIndex) => editor.handle.closeDocumentWithConfirmation($portfolio.documents[tabIndex].id)}
tabActiveIndex={$portfolio.activeDocumentIndex} tabActiveIndex={$portfolio.activeDocumentIndex}