phase 5
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { Panel, ResizeHandle } from 'mpr-ui-framework'
|
import { Panel, ResizeHandle, SplitPane } from 'mpr-ui-framework'
|
||||||
import 'mpr-ui-framework/src/tokens.css'
|
import 'mpr-ui-framework/src/tokens.css'
|
||||||
import LogPanel from './panels/LogPanel.vue'
|
import LogPanel from './panels/LogPanel.vue'
|
||||||
import FunnelPanel from './panels/FunnelPanel.vue'
|
import FunnelPanel from './panels/FunnelPanel.vue'
|
||||||
@@ -55,35 +55,6 @@ function onJobStarted(newJobId: string) {
|
|||||||
sseJobStarted(newJobId)
|
sseJobStarted(newJobId)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Resizable splits
|
|
||||||
const pipelineWidth = ref(320)
|
|
||||||
const detectionsFlex = ref(3)
|
|
||||||
const viewerHeight = ref(240)
|
|
||||||
const timelineFlex = ref(1)
|
|
||||||
const tableFlex = ref(1)
|
|
||||||
const slidersWidth = ref(210)
|
|
||||||
|
|
||||||
function onPipelineResize(delta: number) {
|
|
||||||
pipelineWidth.value = Math.max(200, Math.min(500, pipelineWidth.value + delta))
|
|
||||||
}
|
|
||||||
|
|
||||||
function onViewerResize(delta: number) {
|
|
||||||
viewerHeight.value = Math.max(120, Math.min(400, viewerHeight.value + delta))
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDetectionsResize(delta: number) {
|
|
||||||
detectionsFlex.value = Math.max(1, Math.min(6, detectionsFlex.value + delta * 0.01))
|
|
||||||
}
|
|
||||||
|
|
||||||
function onTimelineResize(delta: number) {
|
|
||||||
const shift = delta * 0.02
|
|
||||||
timelineFlex.value = Math.max(0.3, Math.min(3, timelineFlex.value + shift))
|
|
||||||
tableFlex.value = Math.max(0.3, Math.min(3, tableFlex.value - shift))
|
|
||||||
}
|
|
||||||
|
|
||||||
function onSlidersResize(delta: number) {
|
|
||||||
slidersWidth.value = Math.max(210, Math.min(350, slidersWidth.value - delta))
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -108,138 +79,134 @@ function onSlidersResize(delta: number) {
|
|||||||
<span class="job-id">job: {{ jobId || '—' }}</span>
|
<span class="job-id">job: {{ jobId || '—' }}</span>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="main-layout">
|
<SplitPane direction="horizontal" :initial-size="320" size-mode="px" :min="200" :max="500">
|
||||||
<!-- Left column: Pipeline control (full height) -->
|
<template #first>
|
||||||
<div class="pipeline-col" :style="{ width: pipelineWidth + 'px' }">
|
|
||||||
<PipelineGraphPanel :source="source" :status="status" />
|
<PipelineGraphPanel :source="source" :status="status" />
|
||||||
</div>
|
</template>
|
||||||
<ResizeHandle direction="horizontal" @resize="onPipelineResize" />
|
<template #second>
|
||||||
|
|
||||||
<!-- Right area: mode-dependent content -->
|
|
||||||
<div class="content-col">
|
|
||||||
|
|
||||||
<!-- === NORMAL MODE === -->
|
<!-- === NORMAL MODE === -->
|
||||||
<template v-if="pipeline.layoutMode === 'normal'">
|
<SplitPane v-if="pipeline.layoutMode === 'normal'" direction="vertical" :initial-size="240" size-mode="px" :min="120" :max="400">
|
||||||
<div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
|
<template #first>
|
||||||
<FramePanel :source="source" :status="status" />
|
<SplitPane direction="horizontal" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
|
||||||
<FunnelPanel :source="source" :status="status" />
|
<template #first>
|
||||||
</div>
|
<FramePanel :source="source" :status="status" />
|
||||||
<ResizeHandle direction="vertical" @resize="onViewerResize" />
|
</template>
|
||||||
|
<template #second>
|
||||||
<div class="detections-stats-row">
|
<FunnelPanel :source="source" :status="status" />
|
||||||
<div class="detections-col" :style="{ flex: detectionsFlex }">
|
</template>
|
||||||
<Panel title="Detections" :status="status">
|
</SplitPane>
|
||||||
<div class="detections-stack">
|
</template>
|
||||||
<div class="timeline-section" :style="{ flex: timelineFlex }">
|
<template #second>
|
||||||
<TimelinePanel :source="source" :status="status" :embedded="true" />
|
<SplitPane direction="horizontal" :initial-size="3" size-mode="ratio" :min="1" :max="6">
|
||||||
</div>
|
<template #first>
|
||||||
<ResizeHandle direction="vertical" @resize="onTimelineResize" />
|
<Panel title="Detections" :status="status">
|
||||||
<div class="table-section" :style="{ flex: tableFlex }">
|
<SplitPane direction="vertical" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
|
||||||
<BrandTablePanel :source="source" :status="status" :embedded="true" />
|
<template #first>
|
||||||
</div>
|
<TimelinePanel :source="source" :status="status" :embedded="true" />
|
||||||
|
</template>
|
||||||
|
<template #second>
|
||||||
|
<BrandTablePanel :source="source" :status="status" :embedded="true" />
|
||||||
|
</template>
|
||||||
|
</SplitPane>
|
||||||
|
</Panel>
|
||||||
|
</template>
|
||||||
|
<template #second>
|
||||||
|
<div class="stats-col">
|
||||||
|
<Panel title="Pipeline" :status="status">
|
||||||
|
<div class="pipeline-stats">
|
||||||
|
<div class="stat" v-for="s in [
|
||||||
|
{ label: 'Frames', value: stats?.frames_extracted ?? '—' },
|
||||||
|
{ label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
|
||||||
|
{ label: 'Regions', value: stats?.regions_detected ?? '—' },
|
||||||
|
{ label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
|
||||||
|
{ label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
|
||||||
|
{ label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
|
||||||
|
]" :key="s.label">
|
||||||
|
<span class="label">{{ s.label }}</span>
|
||||||
|
<span class="value">{{ s.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
<CostStatsPanel :source="source" :status="status" />
|
||||||
</div>
|
</div>
|
||||||
</Panel>
|
</template>
|
||||||
</div>
|
</SplitPane>
|
||||||
<ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
|
</template>
|
||||||
<div class="stats-col">
|
</SplitPane>
|
||||||
<Panel title="Pipeline" :status="status">
|
|
||||||
<div class="pipeline-stats">
|
|
||||||
<div class="stat" v-for="s in [
|
|
||||||
{ label: 'Frames', value: stats?.frames_extracted ?? '—' },
|
|
||||||
{ label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
|
|
||||||
{ label: 'Regions', value: stats?.regions_detected ?? '—' },
|
|
||||||
{ label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
|
|
||||||
{ label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
|
|
||||||
{ label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
|
|
||||||
]" :key="s.label">
|
|
||||||
<span class="label">{{ s.label }}</span>
|
|
||||||
<span class="value">{{ s.value }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
<CostStatsPanel :source="source" :status="status" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- === BBOX EDITOR MODE === -->
|
<!-- === BBOX EDITOR MODE === -->
|
||||||
<template v-else-if="pipeline.layoutMode === 'bbox_editor'">
|
<div v-else-if="pipeline.layoutMode === 'bbox_editor'" class="editor-layout">
|
||||||
<div class="editor-layout">
|
<div class="editor-top">
|
||||||
<!-- Top: frame + sliders side by side -->
|
<SplitPane direction="horizontal" :initial-size="210" size-mode="px" :min="210" :max="350" anchor="second">
|
||||||
<div class="editor-top">
|
<template #first>
|
||||||
<div class="editor-frame">
|
|
||||||
<FramePanel :source="source" :status="status" :overlays="editorOverlays" :frame-image="currentFrameImage" :editor-boxes="editorBoxes" />
|
<FramePanel :source="source" :status="status" :overlays="editorOverlays" :frame-image="currentFrameImage" :editor-boxes="editorBoxes" />
|
||||||
</div>
|
</template>
|
||||||
<ResizeHandle direction="horizontal" @resize="onSlidersResize" />
|
<template #second>
|
||||||
<div class="editor-sliders" :style="{ width: slidersWidth + 'px' }">
|
<div class="editor-sliders">
|
||||||
<StageConfigSliders
|
<StageConfigSliders
|
||||||
v-if="pipeline.editorStage"
|
v-if="pipeline.editorStage"
|
||||||
:stage="pipeline.editorStage"
|
:stage="pipeline.editorStage"
|
||||||
:job-id="jobId"
|
:job-id="jobId"
|
||||||
:frame-image="currentFrameImage"
|
:frame-image="currentFrameImage"
|
||||||
:frame-ref="currentFrameRef"
|
:frame-ref="currentFrameRef"
|
||||||
:frames="checkpointFrames"
|
:frames="checkpointFrames"
|
||||||
:selection-start="stripSelStart"
|
:selection-start="stripSelStart"
|
||||||
:selection-end="stripSelEnd"
|
:selection-end="stripSelEnd"
|
||||||
@replay-result="onReplayResult"
|
@replay-result="onReplayResult"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
</SplitPane>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FrameStrip
|
||||||
|
v-if="checkpointFrames.length > 0"
|
||||||
|
:frames="checkpointFrames"
|
||||||
|
:current-index="checkpointFrameIndex"
|
||||||
|
:selection-start="stripSelStart"
|
||||||
|
:selection-end="stripSelEnd"
|
||||||
|
@frame-click="setCheckpointFrame"
|
||||||
|
@selection-change="(s, e) => { stripSelStart.value = s; stripSelEndOverride.value = e }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="editor-bottom">
|
||||||
|
<div class="overlay-controls">
|
||||||
|
<template v-if="editorOverlays.length > 0">
|
||||||
|
<label v-for="(overlay, idx) in editorOverlays" :key="idx" class="overlay-toggle">
|
||||||
|
<input type="checkbox" v-model="overlay.visible" />
|
||||||
|
<span class="overlay-label">{{ overlay.label }}</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0" max="1" step="0.05"
|
||||||
|
:value="overlay.opacity ?? 0.5"
|
||||||
|
@input="(e: Event) => overlay.opacity = Number((e.target as HTMLInputElement).value)"
|
||||||
|
class="opacity-slider"
|
||||||
|
/>
|
||||||
|
<span class="opacity-value">{{ Math.round((overlay.opacity ?? 0.5) * 100) }}%</span>
|
||||||
|
</label>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Frame strip: thumbnails + selection handles -->
|
<!-- === STAGE EDITOR MODE === -->
|
||||||
<FrameStrip
|
<Panel v-else-if="pipeline.layoutMode === 'stage_editor'" :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
|
||||||
v-if="checkpointFrames.length > 0"
|
<div class="editor-placeholder">
|
||||||
:frames="checkpointFrames"
|
<div class="editor-config">
|
||||||
:current-index="checkpointFrameIndex"
|
<p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
|
||||||
:selection-start="stripSelStart"
|
<p>Config fields will be auto-generated from stage registry</p>
|
||||||
:selection-end="stripSelEnd"
|
|
||||||
@frame-click="setCheckpointFrame"
|
|
||||||
@selection-change="(s, e) => { stripSelStart.value = s; stripSelEndOverride.value = e }"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Bottom: debug overlays + close -->
|
|
||||||
<div class="editor-bottom">
|
|
||||||
<div class="overlay-controls">
|
|
||||||
<template v-if="editorOverlays.length > 0">
|
|
||||||
<label v-for="(overlay, idx) in editorOverlays" :key="idx" class="overlay-toggle">
|
|
||||||
<input type="checkbox" v-model="overlay.visible" />
|
|
||||||
<span class="overlay-label">{{ overlay.label }}</span>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="0" max="1" step="0.05"
|
|
||||||
:value="overlay.opacity ?? 0.5"
|
|
||||||
@input="(e: Event) => overlay.opacity = Number((e.target as HTMLInputElement).value)"
|
|
||||||
class="opacity-slider"
|
|
||||||
/>
|
|
||||||
<span class="opacity-value">{{ Math.round((overlay.opacity ?? 0.5) * 100) }}%</span>
|
|
||||||
</label>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</Panel>
|
||||||
|
|
||||||
<!-- === STAGE EDITOR MODE === -->
|
|
||||||
<template v-else-if="pipeline.layoutMode === 'stage_editor'">
|
|
||||||
<Panel :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
|
|
||||||
<div class="editor-placeholder">
|
|
||||||
<div class="editor-config">
|
|
||||||
<p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
|
|
||||||
<p>Config fields will be auto-generated from stage registry</p>
|
|
||||||
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- === SOURCE SELECTOR MODE === -->
|
<!-- === SOURCE SELECTOR MODE === -->
|
||||||
<template v-else-if="pipeline.layoutMode === 'source_selector'">
|
<SourceSelector v-else-if="pipeline.layoutMode === 'source_selector'" @job-started="onJobStarted" />
|
||||||
<SourceSelector @job-started="onJobStarted" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</SplitPane>
|
||||||
|
|
||||||
<!-- Bottom bar: Log or Blob viewer depending on mode -->
|
<!-- Bottom bar: Log or Blob viewer depending on mode -->
|
||||||
<div class="log-row">
|
<div class="log-row">
|
||||||
@@ -328,54 +295,6 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
|||||||
|
|
||||||
.job-id { color: var(--text-dim); font-size: var(--font-size-sm); margin-left: auto; }
|
.job-id { color: var(--text-dim); font-size: var(--font-size-sm); margin-left: auto; }
|
||||||
|
|
||||||
/* Main layout: pipeline left, content right — both same height */
|
|
||||||
.main-layout {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-2);
|
|
||||||
min-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pipeline-col {
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pipeline-col > * { flex: 1; }
|
|
||||||
|
|
||||||
.content-col {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-2);
|
|
||||||
min-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Content rows */
|
|
||||||
.viewer-row {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-2);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.viewer-row > * { flex: 1; overflow: hidden; }
|
|
||||||
|
|
||||||
/* Detections (75%) + Stats (25%) side by side, bottom-aligned with pipeline */
|
|
||||||
.detections-stats-row {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-2);
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detections-col {
|
|
||||||
flex: 3;
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.detections-col > * { flex: 1; display: flex; flex-direction: column; }
|
|
||||||
|
|
||||||
.stats-col {
|
.stats-col {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -385,24 +304,6 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
|||||||
}
|
}
|
||||||
.stats-col > * { flex: 1; }
|
.stats-col > * { flex: 1; }
|
||||||
|
|
||||||
.detections-stack {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-section {
|
|
||||||
min-height: 60px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-section {
|
|
||||||
min-height: 60px;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pipeline stats list */
|
/* Pipeline stats list */
|
||||||
.pipeline-stats {
|
.pipeline-stats {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -427,7 +328,7 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
|||||||
|
|
||||||
.empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
|
.empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
|
||||||
|
|
||||||
/* Editor layout — frame maximized, sliders right, overlays bottom */
|
/* Editor layout */
|
||||||
.editor-layout {
|
.editor-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -437,32 +338,17 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
.editor-top {
|
.editor-top {
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-frame {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.editor-frame > * {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-sliders {
|
.editor-sliders {
|
||||||
flex-shrink: 0;
|
|
||||||
min-width: 210px;
|
|
||||||
padding: var(--space-2);
|
padding: var(--space-2);
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-bottom {
|
.editor-bottom {
|
||||||
|
|||||||
155
ui/framework/src/components/SplitPane.vue
Normal file
155
ui/framework/src/components/SplitPane.vue
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
/** Split direction */
|
||||||
|
direction?: 'horizontal' | 'vertical'
|
||||||
|
/** Initial size of the sized pane (px or flex ratio) */
|
||||||
|
initialSize?: number
|
||||||
|
/** Size mode: 'px' = sized pane fixed in pixels, 'ratio' = flex ratio */
|
||||||
|
sizeMode?: 'px' | 'ratio'
|
||||||
|
/** Which pane is sized: 'first' or 'second'. Default: 'first'. */
|
||||||
|
anchor?: 'first' | 'second'
|
||||||
|
/** Min size (px in px-mode, ratio in ratio-mode) */
|
||||||
|
min?: number
|
||||||
|
/** Max size (px in px-mode, ratio in ratio-mode) */
|
||||||
|
max?: number
|
||||||
|
/** Whether the divider is draggable */
|
||||||
|
resizable?: boolean
|
||||||
|
}>(), {
|
||||||
|
direction: 'horizontal',
|
||||||
|
initialSize: 1,
|
||||||
|
sizeMode: 'ratio',
|
||||||
|
anchor: 'first',
|
||||||
|
min: 0.1,
|
||||||
|
max: 10,
|
||||||
|
resizable: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
const size = ref(props.initialSize)
|
||||||
|
const dragging = ref(false)
|
||||||
|
let startPos = 0
|
||||||
|
|
||||||
|
function onPointerDown(e: PointerEvent) {
|
||||||
|
if (!props.resizable) return
|
||||||
|
dragging.value = true
|
||||||
|
startPos = props.direction === 'horizontal' ? e.clientX : e.clientY
|
||||||
|
const el = e.target as HTMLElement
|
||||||
|
el.setPointerCapture(e.pointerId)
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPointerMove(e: PointerEvent) {
|
||||||
|
if (!dragging.value) return
|
||||||
|
const currentPos = props.direction === 'horizontal' ? e.clientX : e.clientY
|
||||||
|
let delta = currentPos - startPos
|
||||||
|
startPos = currentPos
|
||||||
|
|
||||||
|
// Dragging right/down grows first pane, shrinks second.
|
||||||
|
// If anchor is 'second', invert so dragging grows the second pane.
|
||||||
|
if (props.anchor === 'second') delta = -delta
|
||||||
|
|
||||||
|
if (props.sizeMode === 'px') {
|
||||||
|
size.value = Math.max(props.min, Math.min(props.max, size.value + delta))
|
||||||
|
} else {
|
||||||
|
const scale = props.direction === 'horizontal' ? 0.01 : 0.02
|
||||||
|
size.value = Math.max(props.min, Math.min(props.max, size.value + delta * scale))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPointerUp() {
|
||||||
|
dragging.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const isHorizontal = computed(() => props.direction === 'horizontal')
|
||||||
|
|
||||||
|
const sizedStyle = computed(() => {
|
||||||
|
if (props.sizeMode === 'px') {
|
||||||
|
return isHorizontal.value
|
||||||
|
? { width: size.value + 'px', flexShrink: '0' }
|
||||||
|
: { height: size.value + 'px', flexShrink: '0' }
|
||||||
|
}
|
||||||
|
return { flex: String(size.value) }
|
||||||
|
})
|
||||||
|
|
||||||
|
const flexStyle = computed(() => ({ flex: '1' }))
|
||||||
|
|
||||||
|
const firstStyle = computed(() => props.anchor === 'first' ? sizedStyle.value : flexStyle.value)
|
||||||
|
const secondStyle = computed(() => props.anchor === 'second' ? sizedStyle.value : flexStyle.value)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="split-pane" :class="[direction]">
|
||||||
|
<div class="split-first" :style="firstStyle">
|
||||||
|
<slot name="first" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="resizable"
|
||||||
|
class="split-divider"
|
||||||
|
:class="[direction, { dragging }]"
|
||||||
|
@pointerdown="onPointerDown"
|
||||||
|
@pointermove="onPointerMove"
|
||||||
|
@pointerup="onPointerUp"
|
||||||
|
/>
|
||||||
|
<div class="split-second" :style="secondStyle">
|
||||||
|
<slot name="second" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.split-pane {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-pane.horizontal {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-pane.vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-first,
|
||||||
|
.split-second {
|
||||||
|
min-height: 0;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Children must fill their pane */
|
||||||
|
.split-first > :deep(*),
|
||||||
|
.split-second > :deep(*) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-divider {
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: transparent;
|
||||||
|
transition: background 0.15s;
|
||||||
|
touch-action: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-divider:hover,
|
||||||
|
.split-divider.dragging {
|
||||||
|
background: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-divider.horizontal {
|
||||||
|
width: 4px;
|
||||||
|
cursor: col-resize;
|
||||||
|
margin: 0 -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-divider.vertical {
|
||||||
|
height: 4px;
|
||||||
|
cursor: row-resize;
|
||||||
|
margin: -2px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -8,6 +8,7 @@ export { useDataSource } from './composables/useDataSource'
|
|||||||
export { default as Panel } from './components/Panel.vue'
|
export { default as Panel } from './components/Panel.vue'
|
||||||
export { default as LayoutGrid } from './components/LayoutGrid.vue'
|
export { default as LayoutGrid } from './components/LayoutGrid.vue'
|
||||||
export { default as ResizeHandle } from './components/ResizeHandle.vue'
|
export { default as ResizeHandle } from './components/ResizeHandle.vue'
|
||||||
|
export { default as SplitPane } from './components/SplitPane.vue'
|
||||||
|
|
||||||
// Renderers
|
// Renderers
|
||||||
export { default as LogRenderer } from './renderers/LogRenderer.vue'
|
export { default as LogRenderer } from './renderers/LogRenderer.vue'
|
||||||
|
|||||||
Reference in New Issue
Block a user