260 lines
10 KiB
JavaScript
260 lines
10 KiB
JavaScript
// 通用拖拽分割条工厂
|
||
// ============================================================================
|
||
//
|
||
// 起源（Stage 4d 抽出）：src/app.js 里有三段几乎一模一样的 mountSplitter*：
|
||
// - mountSplitter (editor ↔ viewer，3480-3640)
|
||
// - mountSidebarSplitter (sidebar，3652-3850)
|
||
// - mountAiSplitter (AI panel，3865-3984)
|
||
//
|
||
// 三段共享的样板：
|
||
// - 鼠标 + 触屏 drag 状态机（dragging / pointerId / startX / startWidth）
|
||
// - cursor: col-resize + userSelect: none 切换
|
||
// - is-dragging class 切换
|
||
// - 命中区扩展（仅 sidebar / AI：±HIT_RADIUS 像素也算命中）
|
||
// - document 级 mousemove / touchmove / mouseup / touchend / touchcancel
|
||
//
|
||
// 不共享的部分（由调用方注入）：
|
||
// - 边界 clamp：editor 走 frSpace 动态算，sidebar/AI 走静态 [MIN, MAX]
|
||
// - 持久化：splitRatio / sidebarWidth / aiWidth 三个字段
|
||
// - 命中区距离计算：sidebar 缓存中线（Phase M-H6），AI 每次重读
|
||
//
|
||
// 设计：
|
||
// - createSplitter(opts) 接受 handle / setSize / getSize / clampSize / onDragEnd
|
||
// 等回调；工厂不耦合业务（不知道是 px 还是 ratio，不知道写到 :root 还是
|
||
// .appShell），保持单一职责。
|
||
// - 内部维护自己挂的 listener 列表，dispose() 一次性解除 —— 调用方在 pagehide
|
||
// 兜底调一次，避免 15 个 document 级 listener 长期持有闭包。
|
||
// ============================================================================
|
||
|
||
/**
|
||
* @typedef {Object} HitZoneOpts
|
||
* @property {number} radius - 鼠标距 splitter 中线 ± radius 像素都算命中
|
||
* @property {() => boolean} [isAvailable] - 当前是否启用命中区（AI 关闭时返回 false）
|
||
* 默认 true
|
||
* @property {(coord: number) => number} distanceTo - 鼠标坐标 → 到 splitter 中线的距离
|
||
* （sidebar 缓存中线版本由调用方实现，工厂不关心怎么算）
|
||
* @property {(inZone: boolean) => void} [onHover] - 进/出命中区的视觉反馈
|
||
* 默认：改 document.body.style.cursor（仅 axis='x' → col-resize）
|
||
*/
|
||
|
||
/**
|
||
* @typedef {Object} SplitterOpts
|
||
* @property {HTMLElement} handle - 拖拽条元素
|
||
* @property {'x' | 'y'} [axis='x'] - 'x' = 水平拖动改宽度；'y' = 垂直拖动改高度
|
||
* @property {() => number} getSize - 当前目标元素的尺寸（px）
|
||
* 拖动期间会读多次（每次 mousemove 都会读）；mount 时也会读一次确认初值
|
||
* @property {(px: number) => void} setSize - 把 px 写到目标（CSS 变量 / inline style）
|
||
* 调用方负责写哪儿（:root / .appShell / 元素自身）
|
||
* @property {(px: number) => number} clampSize - clamp 到合法范围（动态边界由调用方负责）
|
||
* @property {(px: number) => void} onDragEnd - 拖完调一次，参数是已 clamp 的 px
|
||
* 调用方负责持久化 / 反算 ratio / 弹错误提示
|
||
* @property {() => number} [initialSize] - 启动初始化。mount 时会用 setSize 应用一次
|
||
* @property {HTMLElement} [body] - 设 cursor/userSelect 的元素，默认 document.body
|
||
* @property {HitZoneOpts} [hitZone] - 扩展命中区（不传 = 不启用）
|
||
* @property {Array<{type: string, listener: Function, options?: AddEventListenerOptions|boolean}>} [windowListeners]
|
||
* 额外挂在 window 上的监听器（如 sidebar 的 resize/scroll 用来失效命中区中线缓存）。
|
||
* dispose() 时一并解除 —— 与 handle / document 监听器同走同一张表，单点真理。
|
||
*/
|
||
|
||
/**
|
||
* 创建通用拖拽分割条。
|
||
*
|
||
* 鼠标 / 触屏 拖拽的语义与原三段实现一致：
|
||
* - mouse / touch 都能起拖；触屏用 touch.identifier 关联 touchmove/touchend
|
||
* - 拖动期间：document.body.style.cursor = 'col-resize' 或 'row-resize'，
|
||
* userSelect = 'none'；拖完恢复
|
||
* - 拖完一次：调 onDragEnd(clampSize(getSize()))，由调用方持久化
|
||
*
|
||
* 命中区扩展（hitZone）语义：
|
||
* - document 级 capture mousedown：鼠标在 ±radius 内且目标不是 handle 自己，
|
||
* 启动拖动（capture 阶段确保在 file-list / editor 等之前拿到事件）
|
||
* - document 级 mousemove：拖动中按 axis 改尺寸；空闲时按 distanceTo 算 inZone，
|
||
* 通知 onHover 做视觉反馈（默认 cursor）
|
||
* - 调用方传 isAvailable 返回 false 时，整个命中区逻辑跳过（AI 关闭时）
|
||
*
|
||
* @param {SplitterOpts} opts
|
||
* @returns {{
|
||
* dispose: () => void,
|
||
* rebalance?: () => void,
|
||
* }}
|
||
* dispose 解除挂载的所有 listener（document 级 + handle 级 + window 级）
|
||
* rebalance 仅当传了 initialSize 时返回 —— 调用方在 window resize / layout 变化
|
||
* 时调，按最新 frSpace / DPI 重算尺寸（不影响持久化值）
|
||
*/
|
||
export function createSplitter(opts) {
|
||
const {
|
||
handle,
|
||
axis = 'x',
|
||
getSize,
|
||
setSize,
|
||
clampSize,
|
||
onDragEnd,
|
||
initialSize,
|
||
body = (typeof document !== 'undefined' ? document.body : null),
|
||
hitZone = null,
|
||
windowListeners = null,
|
||
} = opts;
|
||
|
||
if (!handle) throw new Error('[splitter] handle 必须是 DOM 元素');
|
||
if (typeof getSize !== 'function') throw new Error('[splitter] getSize 必须是函数');
|
||
if (typeof setSize !== 'function') throw new Error('[splitter] setSize 必须是函数');
|
||
if (typeof clampSize !== 'function') throw new Error('[splitter] clampSize 必须是函数');
|
||
if (typeof onDragEnd !== 'function') throw new Error('[splitter] onDragEnd 必须是函数');
|
||
|
||
const cursor = axis === 'x' ? 'col-resize' : 'row-resize';
|
||
// axis 对应的 clientX/Y 字段名
|
||
const coordKey = axis === 'x' ? 'clientX' : 'clientY';
|
||
// 触屏坐标取 touches[i[]. 的 clientX/Y，命名与 coordKey 一致
|
||
|
||
/** 当前挂的所有 listener，dispose 时一次性解除 */
|
||
const listeners = [];
|
||
|
||
function addListener(target, type, listener, options) {
|
||
target.addEventListener(type, listener, options);
|
||
listeners.push({ target, type, listener, options });
|
||
}
|
||
|
||
// 拖拽状态机 —— 与原三段实现语义一致
|
||
let dragging = false;
|
||
let pointerId = null;
|
||
let startCoord = 0;
|
||
let startSize = 0;
|
||
|
||
function coordOf(eventLike) {
|
||
return eventLike[coordKey];
|
||
}
|
||
|
||
function startDrag(coord, id) {
|
||
dragging = true;
|
||
pointerId = id;
|
||
handle.classList.add('is-dragging');
|
||
startCoord = coord;
|
||
startSize = getSize();
|
||
if (body) {
|
||
body.style.cursor = cursor;
|
||
body.style.userSelect = 'none';
|
||
}
|
||
}
|
||
|
||
function applyDrag(coord) {
|
||
const dCoord = coord - startCoord;
|
||
setSize(clampSize(startSize + dCoord));
|
||
}
|
||
|
||
function endDrag() {
|
||
if (!dragging) return;
|
||
dragging = false;
|
||
pointerId = null;
|
||
handle.classList.remove('is-dragging');
|
||
if (body) {
|
||
body.style.cursor = '';
|
||
body.style.userSelect = '';
|
||
}
|
||
onDragEnd(clampSize(getSize()));
|
||
}
|
||
|
||
// ----- 自身 handle 上的 mousedown / touchstart -----
|
||
addListener(handle, 'mousedown', (e) => {
|
||
startDrag(coordOf(e), null);
|
||
e.preventDefault();
|
||
});
|
||
|
||
addListener(handle, 'touchstart', (e) => {
|
||
const t = e.touches[0];
|
||
if (!t) return;
|
||
startDrag(coordOf(t), t.identifier);
|
||
}, { passive: true });
|
||
|
||
// ----- document 级 mousemove / touchmove / ----end -----
|
||
addListener(document, 'mousemove', (e) => {
|
||
if (!dragging || pointerId !== null) return;
|
||
applyDrag(coordOf(e));
|
||
});
|
||
|
||
addListener(document, 'touchmove', (e) => {
|
||
if (!dragging || pointerId === null) return;
|
||
const t = Array.from(e.touches).find((x) => x.identifier === pointerId);
|
||
if (!t) return;
|
||
applyDrag(coordOf(t));
|
||
}, { passive: true });
|
||
|
||
addListener(document, 'mouseup', endDrag);
|
||
addListener(document, 'touchend', endDrag);
|
||
addListener(document, 'touchcancel', endDrag);
|
||
|
||
// ----- 命中区扩展（可选）-----
|
||
if (hitZone) {
|
||
const { radius, isAvailable = () => true, distanceTo, onHover } = hitZone;
|
||
|
||
// document 级 capture mousedown：捕获阶段拿到事件，避免被 file-list 等吞掉
|
||
addListener(document, 'mousedown', (e) => {
|
||
if (dragging) return;
|
||
if (e.button !== 0) return; // 只接左键
|
||
if (!isAvailable()) return;
|
||
// handle 自己 / handle 内子节点（含 reset 按钮等）不重入 —— 子节点自己
|
||
// 处理 mousedown（一般带 stopPropagation），否则会出现「点了按钮又拖动」。
|
||
if (handle.contains(e.target)) return;
|
||
if (distanceTo(coordOf(e)) > radius) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
startDrag(coordOf(e), null);
|
||
}, true);
|
||
|
||
// 拖动中 + 空闲命中区视觉反馈（合并到一个监听器，少派发一次）
|
||
let lastHover = null;
|
||
addListener(document, 'mousemove', (e) => {
|
||
if (dragging) {
|
||
if (pointerId === null) applyDrag(coordOf(e));
|
||
return;
|
||
}
|
||
if (!isAvailable()) return;
|
||
const inZone = distanceTo(coordOf(e)) <= radius;
|
||
if (inZone !== lastHover) {
|
||
lastHover = inZone;
|
||
if (onHover) onHover(inZone);
|
||
else if (body) body.style.cursor = inZone ? cursor : '';
|
||
}
|
||
});
|
||
}
|
||
|
||
// ----- 扩展 window 监听器（可选）-----
|
||
// 例如 sidebar splitter 用 resize / scroll 失效命中区中线缓存。
|
||
// 走 addListener 同一张表，dispose() 一次性解除。
|
||
if (windowListeners && windowListeners.length) {
|
||
for (const { type, listener, options } of windowListeners) {
|
||
addListener(window, type, listener, options);
|
||
}
|
||
}
|
||
|
||
// ----- 启动初始化 -----
|
||
if (typeof initialSize === 'function') {
|
||
setSize(clampSize(initialSize()));
|
||
}
|
||
|
||
// ----- 返回 -----
|
||
const result = {
|
||
/** 解除所有挂载的 listener。可重复调用。 */
|
||
dispose() {
|
||
for (const { target, type, listener, options } of listeners) {
|
||
try { target.removeEventListener(type, listener, options); } catch { /* ignore */ }
|
||
}
|
||
listeners.length = 0;
|
||
if (body) {
|
||
body.style.cursor = '';
|
||
body.style.userSelect = '';
|
||
}
|
||
handle.classList.remove('is-dragging');
|
||
},
|
||
};
|
||
|
||
// 仅当调用方传 initialSize 时才暴露 rebalance —— 让"窗口 resize 时按 frSpace 重算"
|
||
// 这类外部触发走单点真理（避免多个 mountSplitter 都各自挂 resize 监听器）。
|
||
if (typeof initialSize === 'function') {
|
||
result.rebalance = () => {
|
||
if (dragging) return;
|
||
setSize(clampSize(initialSize()));
|
||
};
|
||
}
|
||
|
||
return result;
|
||
} |