mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-17 15:28:04 +08:00
e0212ca4b9
* Remove the svelte-preprocess dev dependency, keeping global styles with a custom Vite plugin * More robust style tag detection * Fix CSS regressions
402 lines
11 KiB
Svelte
402 lines
11 KiB
Svelte
<script lang="ts">
|
|
import { getContext, onDestroy, tick } from "svelte";
|
|
import LayoutCol from "/src/components/layout/LayoutCol.svelte";
|
|
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
|
|
import Data from "/src/components/panels/Data.svelte";
|
|
import Document from "/src/components/panels/Document.svelte";
|
|
import Layers from "/src/components/panels/Layers.svelte";
|
|
import Properties from "/src/components/panels/Properties.svelte";
|
|
import Welcome from "/src/components/panels/Welcome.svelte";
|
|
import IconButton from "/src/components/widgets/buttons/IconButton.svelte";
|
|
import TextLabel from "/src/components/widgets/labels/TextLabel.svelte";
|
|
import type { EditorWrapper } from "/wrapper/pkg/graphite_wasm_wrapper";
|
|
|
|
type PanelType = keyof typeof PANEL_COMPONENTS;
|
|
|
|
const PANEL_COMPONENTS = {
|
|
Welcome,
|
|
Document,
|
|
Layers,
|
|
Properties,
|
|
Data,
|
|
};
|
|
const BUTTON_LEFT = 0;
|
|
const BUTTON_MIDDLE = 1;
|
|
const BUTTON_RIGHT = 2;
|
|
const DRAG_ACTIVATION_DISTANCE = 5;
|
|
|
|
const editor = getContext<EditorWrapper>("editor");
|
|
|
|
export let tabMinWidths = false;
|
|
export let tabCloseButtons = false;
|
|
export let tabLabels: { name: string; unsaved?: boolean; tooltipLabel?: string; tooltipDescription?: string; tooltipShortcut?: string }[];
|
|
export let tabActiveIndex: number;
|
|
export let panelType: PanelType | undefined = undefined;
|
|
export let clickAction: ((index: number) => void) | undefined = undefined;
|
|
export let closeAction: ((index: number) => void) | undefined = undefined;
|
|
export let reorderAction: ((oldIndex: number, newIndex: number) => void) | undefined = undefined;
|
|
export let emptySpaceAction: (() => void) | undefined = undefined;
|
|
|
|
let className = "";
|
|
export { className as class };
|
|
export let classes: Record<string, boolean> = {};
|
|
let styleName = "";
|
|
export { styleName as style };
|
|
export let styles: Record<string, string | number | undefined> = {};
|
|
|
|
let tabElements: (LayoutRow | undefined)[] = [];
|
|
|
|
// Tab drag-and-drop state
|
|
let dragStartState: { tabIndex: number; pointerX: number; pointerY: number } | undefined = undefined;
|
|
let dragging = false;
|
|
let insertionIndex: number | undefined = undefined;
|
|
let insertionMarkerLeft: number | undefined = undefined;
|
|
let lastPointerX = 0;
|
|
let tabGroupElement: LayoutRow | undefined = undefined;
|
|
|
|
onDestroy(() => {
|
|
removeDragListeners();
|
|
});
|
|
|
|
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) {
|
|
await tick();
|
|
tabElements[newIndex]?.div?.()?.scrollIntoView();
|
|
}
|
|
|
|
// Tab drag-and-drop handlers
|
|
|
|
function tabPointerDown(e: PointerEvent, tabIndex: number) {
|
|
if (e.button !== BUTTON_LEFT) return;
|
|
if (e.target instanceof Element && e.target.closest("[data-close-button]")) return;
|
|
|
|
// Activate the tab upon pointer down
|
|
clickAction?.(tabIndex);
|
|
|
|
if (!reorderAction || tabLabels.length < 2) return;
|
|
|
|
dragStartState = { tabIndex, pointerX: e.clientX, pointerY: e.clientY };
|
|
dragging = false;
|
|
insertionIndex = undefined;
|
|
insertionMarkerLeft = undefined;
|
|
|
|
addDragListeners();
|
|
}
|
|
|
|
function dragPointerMove(e: PointerEvent) {
|
|
if (!dragStartState) return;
|
|
|
|
// Activate drag after moving beyond threshold
|
|
if (!dragging) {
|
|
const deltaX = Math.abs(e.clientX - dragStartState.pointerX);
|
|
const deltaY = Math.abs(e.clientY - dragStartState.pointerY);
|
|
if (deltaX < DRAG_ACTIVATION_DISTANCE && deltaY < DRAG_ACTIVATION_DISTANCE) return;
|
|
dragging = true;
|
|
}
|
|
|
|
lastPointerX = e.clientX;
|
|
|
|
// Only show insertion line while the cursor is within the tab bar
|
|
if (pointerIsInsideTabBar(e)) {
|
|
calculateInsertionIndex(lastPointerX);
|
|
} else {
|
|
insertionIndex = undefined;
|
|
insertionMarkerLeft = undefined;
|
|
}
|
|
}
|
|
|
|
function dragPointerUp() {
|
|
if (dragging && dragStartState && insertionIndex !== undefined) {
|
|
const oldIndex = dragStartState.tabIndex;
|
|
|
|
// Adjust for the fact that removing the dragged tab shifts indices
|
|
let newIndex = insertionIndex;
|
|
if (newIndex > oldIndex) newIndex -= 1;
|
|
|
|
if (oldIndex !== newIndex) {
|
|
reorderAction?.(oldIndex, newIndex);
|
|
}
|
|
}
|
|
|
|
endDrag();
|
|
}
|
|
|
|
function dragAbort(e: MouseEvent | KeyboardEvent) {
|
|
if (e instanceof MouseEvent && e.button === BUTTON_RIGHT) endDrag();
|
|
if (e instanceof KeyboardEvent && e.key === "Escape") endDrag();
|
|
}
|
|
|
|
function dragScroll() {
|
|
if (dragging && insertionIndex !== undefined) {
|
|
calculateInsertionIndex(lastPointerX);
|
|
}
|
|
}
|
|
|
|
function endDrag() {
|
|
dragStartState = undefined;
|
|
dragging = false;
|
|
insertionIndex = undefined;
|
|
insertionMarkerLeft = undefined;
|
|
removeDragListeners();
|
|
}
|
|
|
|
function pointerIsInsideTabBar(e: PointerEvent): boolean {
|
|
const groupDiv = tabGroupElement?.div?.();
|
|
if (!groupDiv) return false;
|
|
|
|
const rect = groupDiv.getBoundingClientRect();
|
|
return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
|
|
}
|
|
|
|
function calculateInsertionIndex(pointerX: number) {
|
|
const groupDiv = tabGroupElement?.div?.();
|
|
if (!dragStartState || !groupDiv) return;
|
|
|
|
const groupRect = groupDiv.getBoundingClientRect();
|
|
let bestIndex = 0;
|
|
let bestMarkerLeft = 0;
|
|
|
|
// Walk through each tab to find the insertion point closest to the pointer
|
|
for (let i = 0; i < tabLabels.length; i++) {
|
|
const tabDiv = tabElements[i]?.div?.();
|
|
if (!tabDiv) continue;
|
|
|
|
const tabRect = tabDiv.getBoundingClientRect();
|
|
const tabMidpoint = tabRect.left + tabRect.width / 2;
|
|
|
|
if (pointerX > tabMidpoint) {
|
|
bestIndex = i + 1;
|
|
bestMarkerLeft = tabRect.right - groupRect.left;
|
|
} else {
|
|
bestIndex = i;
|
|
bestMarkerLeft = tabRect.left - groupRect.left;
|
|
break;
|
|
}
|
|
}
|
|
|
|
insertionIndex = bestIndex;
|
|
insertionMarkerLeft = Math.max(2, bestMarkerLeft);
|
|
}
|
|
|
|
function addDragListeners() {
|
|
document.addEventListener("pointermove", dragPointerMove);
|
|
document.addEventListener("pointerup", dragPointerUp);
|
|
document.addEventListener("mousedown", dragAbort);
|
|
document.addEventListener("keydown", dragAbort);
|
|
tabGroupElement?.div?.()?.addEventListener("scroll", dragScroll);
|
|
}
|
|
|
|
function removeDragListeners() {
|
|
document.removeEventListener("pointermove", dragPointerMove);
|
|
document.removeEventListener("pointerup", dragPointerUp);
|
|
document.removeEventListener("mousedown", dragAbort);
|
|
document.removeEventListener("keydown", dragAbort);
|
|
tabGroupElement?.div?.()?.removeEventListener("scroll", dragScroll);
|
|
}
|
|
</script>
|
|
|
|
<LayoutCol on:pointerdown={() => panelType && editor.setActivePanel(panelType)} class={`panel ${className}`.trim()} {classes} style={styleName} {styles}>
|
|
<LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}>
|
|
<LayoutRow class="tab-group" scrollableX={true} on:click={onEmptySpaceAction} on:auxclick={onEmptySpaceAction} bind:this={tabGroupElement}>
|
|
{#each tabLabels as tabLabel, tabIndex}
|
|
<LayoutRow
|
|
class="tab"
|
|
classes={{ active: tabIndex === tabActiveIndex }}
|
|
tooltipLabel={tabLabel.tooltipLabel}
|
|
tooltipDescription={tabLabel.tooltipDescription}
|
|
on:pointerdown={(e) => tabPointerDown(e, tabIndex)}
|
|
on:click={(e) => e.stopPropagation()}
|
|
on:auxclick={(e) => {
|
|
// Middle mouse button click
|
|
if (e.button === BUTTON_MIDDLE) {
|
|
e.stopPropagation();
|
|
closeAction?.(tabIndex);
|
|
}
|
|
}}
|
|
bind:this={tabElements[tabIndex]}
|
|
>
|
|
<LayoutRow class="name">
|
|
<TextLabel class="text">{tabLabel.name}</TextLabel>
|
|
{#if tabLabel.unsaved}
|
|
<TextLabel>*</TextLabel>
|
|
{/if}
|
|
</LayoutRow>
|
|
{#if tabCloseButtons}
|
|
<IconButton
|
|
action={(e) => {
|
|
e?.stopPropagation();
|
|
closeAction?.(tabIndex);
|
|
}}
|
|
icon="CloseX"
|
|
size={16}
|
|
data-close-button
|
|
/>
|
|
{/if}
|
|
</LayoutRow>
|
|
{/each}
|
|
</LayoutRow>
|
|
{#if dragging && insertionMarkerLeft !== undefined}
|
|
<div class="tab-insertion-mark" style:left={`${insertionMarkerLeft}px`}></div>
|
|
{/if}
|
|
</LayoutRow>
|
|
<LayoutCol class="panel-body">
|
|
{#if panelType}
|
|
<svelte:component this={PANEL_COMPONENTS[panelType]} />
|
|
{/if}
|
|
</LayoutCol>
|
|
</LayoutCol>
|
|
|
|
<style lang="scss">
|
|
.panel {
|
|
background: var(--color-1-nearblack);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
|
|
.tab-bar {
|
|
position: relative;
|
|
height: 28px;
|
|
min-height: auto;
|
|
background: var(--color-1-nearblack); // Needed for the viewport hole punch on desktop
|
|
flex-shrink: 0;
|
|
|
|
&.min-widths .tab-group .tab {
|
|
min-width: 120px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.tab-group {
|
|
flex: 1 1 100%;
|
|
position: relative;
|
|
|
|
// This always hangs out at the end of the last tab, providing 16px (15px plus the 1px reserved for the separator line) to the right of the tabs.
|
|
// When the last tab is selected, its bottom rounded fillet adds 16px to the width, which stretches the scrollbar width allocation in only that situation.
|
|
// This pseudo-element ensures we always reserve that space to prevent the scrollbar from jumping when the last tab is selected.
|
|
// There is unfortunately no apparent way to remove that 16px gap from the end of the scroll container, since negative margin does not reduce the scrollbar allocation.
|
|
&::after {
|
|
content: "";
|
|
width: 15px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.tab {
|
|
flex: 0 1 auto;
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
&.active {
|
|
background: var(--color-3-darkgray);
|
|
border-radius: 6px 6px 0 0;
|
|
position: relative;
|
|
|
|
&:not(:first-child)::before,
|
|
&::after {
|
|
content: "";
|
|
width: 16px;
|
|
height: 8px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
&:not(:first-child)::before {
|
|
left: -16px;
|
|
border-bottom-right-radius: 8px;
|
|
box-shadow: 8px 0 0 0 var(--color-3-darkgray);
|
|
}
|
|
|
|
&::after {
|
|
right: -16px;
|
|
border-bottom-left-radius: 8px;
|
|
box-shadow: -8px 0 0 0 var(--color-3-darkgray);
|
|
}
|
|
}
|
|
|
|
.name {
|
|
flex: 1 1 100%;
|
|
|
|
.text-label {
|
|
// Height and line-height required because https://stackoverflow.com/a/21611191/775283
|
|
height: 28px;
|
|
line-height: 28px;
|
|
flex: 0 0 auto;
|
|
|
|
&.text {
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-button {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
& + .tab {
|
|
margin-left: 1px;
|
|
}
|
|
|
|
&:not(.active) + .tab:not(.active)::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1px;
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--color-5-dullgray);
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-right: 1px;
|
|
|
|
&:not(.active)::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -1px;
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--color-5-dullgray);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:has(.tab-insertion-mark) .tab .icon-button {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tab-insertion-mark {
|
|
position: absolute;
|
|
top: 4px;
|
|
bottom: 4px;
|
|
width: 3px;
|
|
margin-left: -2px;
|
|
z-index: 1;
|
|
background: var(--color-e-nearwhite);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.panel-body {
|
|
background: var(--color-3-darkgray);
|
|
flex: 1 1 100%;
|
|
flex-direction: column;
|
|
|
|
> div {
|
|
padding-bottom: 4px;
|
|
}
|
|
}
|
|
|
|
// Needed for the viewport hole punch on desktop
|
|
.viewport-hole-punch &.document-panel,
|
|
.viewport-hole-punch &.document-panel .panel-body:not(:has(.welcome-panel)) {
|
|
background: none;
|
|
}
|
|
}
|
|
</style>
|