${t('sortTitle')}
-${t('sortHint')}
- ${sortState.items.map((it, i) => { const c = srcColor(it.src);
+ ${sortState.lanes.map(l => l.models[0]).map(it => { const c = srcColor(it.src);
return `${esc(it.src)}`; })
.filter((v, i, a) => a.indexOf(v) === i).join('') || ''}
+ ${isFirst ? '' : ''}
${esc(srcShort(it.src))}
- ${esc(it.src)}
${esc(it.id)}
-
- ⠿
+
`;
}
-function paintSort() {
+function paintSort(affected) {
const cv = $('#scr-canvas');
if (!cv) return;
- const srcIdx = sortState.items.map((it, i) => i);
- const html = [];
- for (let i = 0; i <= sortState.items.length; i++) {
- html.push(``);
- if (i < sortState.items.length) html.push(scrBlockHtml(sortState.items[i], i === 0));
- }
- cv.innerHTML = html.join('');
- cv.querySelectorAll('.scr-prio').forEach(inp => {
- inp.addEventListener('input', () => {
- const blk = inp.closest('.scr-block');
- const idx = sortState.items.findIndex(x => x.src + '|' + x.id === blk.dataset.key);
- if (idx >= 0) { const v = parseInt(inp.value, 10); sortState.items[idx].prio = isFinite(v) ? v : 0; }
- });
- inp.addEventListener('pointerdown', e => e.stopPropagation());
+ // compute the next lane-leaders so we can retract the outgoing ones first
+ const nextFirst = new Set();
+ sortState.lanes.forEach(lane => {
+ if (lane.models.length) nextFirst.add(lane.models[0].src + '|' + lane.models[0].id);
});
- cv.querySelectorAll('.scr-block').forEach(block => {
- block.addEventListener('pointerdown', e => {
- if (e.target.classList.contains('scr-prio')) return;
+ // outgoing leaders: currently first in their row but no longer first post-move
+ const outgoing = [];
+ cv.querySelectorAll('.scr-row').forEach(row => {
+ const blk = row.querySelector('.scr-block');
+ if (blk && !nextFirst.has(blk.dataset.key)) outgoing.push(blk);
+ });
+ if (outgoing.length) {
+ // clone old tenons/sockets as detached overlays, shrink them away, and
+ // rebuild the DOM immediately so nothing stalls
+ outgoing.forEach(b => {
+ b.querySelectorAll('.scr-knob, .scr-slot').forEach(el => {
+ const rect = el.getBoundingClientRect();
+ const ghost = el.cloneNode(true);
+ const cs = getComputedStyle(el);
+ ghost.style.cssText = 'position:fixed;left:' + rect.left + 'px;top:' + rect.top +
+ 'px;width:' + rect.width + 'px;height:' + rect.height + 'px;margin:0;' +
+ 'background:' + cs.background + ';border-radius:' + cs.borderRadius +
+ ';box-shadow:' + cs.boxShadow + ';pointer-events:none;';
+ document.body.appendChild(ghost);
+ ghost.animate(
+ [{ transform: 'scaleY(1)', opacity: 1 }, { transform: 'scaleY(.4)', opacity: 0 }],
+ { duration: 220, easing: 'ease-in' }).finished.then(() => ghost.remove());
+ });
+ });
+ }
+ paintSortNow(affected);
+}
+function paintSortNow(affected) {
+ const cv = $('#scr-canvas');
+ if (!cv) return;
+ // FLIP: capture old positions of lanes and blocks before repaint
+ const prev = new Map();
+ const prevFirst = new Set(); // keys that used to be the first block of their lane
+ const prevLast = new Set(); // keys that used to be the last block of their lane
+ cv.querySelectorAll('.scr-row').forEach(row => {
+ const blks = row.querySelectorAll('.scr-block');
+ if (blks[0]) prevFirst.add(blks[0].dataset.key);
+ if (blks.length) prevLast.add(blks[blks.length - 1].dataset.key);
+ });
+ cv.querySelectorAll('.scr-lane').forEach(l => prev.set('lane:' + l.dataset.lane, l.getBoundingClientRect()));
+ cv.querySelectorAll('.scr-block').forEach(b => prev.set('blk:' + b.dataset.key, b.getBoundingClientRect()));
+ const html = [];
+ sortState.lanes.forEach((lane, li) => {
+ const n = sortState.lanes.length - li;
+ const cls = 'scr-lane' + (li === 0 ? ' scr-top' : '') + (li === sortState.lanes.length - 1 ? ' scr-last' : '');
+ html.push(``);
+ html.push(`
+
`);
+ });
+ html.push(``);
+ cv.innerHTML = html.join('');
+ // FLIP: animate lanes near the affected area (and follow-up rows sliding up);
+ // only animate lanes listed in `affected` (or all movable ones when a lane
+ // vanishes, since every row below shifts).
+ requestAnimationFrame(() => {
+ const animLanes = new Set(affected === undefined ? [] : affected);
+ if (affected === undefined) {
+ // initial render / reset: no animation at all
+ return;
+ }
+ prev.forEach((r0, key) => {
+ const isLane = key.startsWith('lane:');
+ const el = isLane
+ ? cv.querySelector(`.scr-lane[data-lane="${key.slice(5)}"]`)
+ : cv.querySelector(`.scr-block[data-key="${CSS.escape(key.slice(4))}"]`);
+ if (!el) return;
+ // blocks/slide-up for any lane below a removed lane must still animate
+ let laneIdx = isLane ? +key.slice(5) : null;
+ if (laneIdx === null) {
+ const lane = el.closest('.scr-lane');
+ if (lane) laneIdx = +lane.dataset.lane;
+ }
+ if (laneIdx !== null && animLanes.has(laneIdx)) {
+ const r1 = el.getBoundingClientRect();
+ const dx = r0.left - r1.left, dy = r0.top - r1.top;
+ if (dx || dy) {
+ el.animate([{ transform: `translate(${dx}px,${dy}px)` }, { transform: 'none' }],
+ { duration: 240, easing: 'ease-out' });
+ }
+ }
+ });
+ // grow-in animations, scheduled AFTER the 240ms slide so the block settles
+ // into place first, then its knobs pop out:
+ // grow-t/b : brand-new lane-leader gets its top knob / bottom socket
+ // grow-l : block leaves the leader slot, now gains a left tenon
+ // grow-r : block reaches the lane tail, now gains the right notch end
+ cv.querySelectorAll('.scr-lane .scr-block').forEach(b => {
+ const lane = b.closest('.scr-lane');
+ if (!lane || !animLanes.has(+lane.dataset.lane)) return;
+ const key = b.dataset.key;
+ const blks = b.parentElement.querySelectorAll('.scr-block');
+ const isFirst = blks[0] === b;
+ const isLast = blks[blks.length - 1] === b;
+ if (isFirst && !prevFirst.has(key)) {
+ b.classList.add('grow-t'); b.classList.add('grow-b');
+ // the vertical joint is shared across rows: re-etch the socket of the
+ // leader above (receives this knob) and the knob of the leader below
+ // (rises into this socket), so the whole chain animates together
+ const li = +lane.dataset.lane;
+ const peer = cv.querySelector(`.scr-lane[data-lane="${li - 1}"] .scr-block`);
+ if (peer) peer.classList.add('grow-b');
+ const peer2 = cv.querySelector(`.scr-lane[data-lane="${li + 1}"] .scr-block`);
+ if (peer2) peer2.classList.add('grow-t');
+ }
+ if (!isFirst && prevFirst.has(key)) b.classList.add('grow-l');
+ if (!isLast && prevLast.has(key)) b.classList.add('grow-r');
+ });
+ });
+ cv.querySelectorAll('.scr-grip').forEach(grip => {
+ grip.addEventListener('pointerdown', e => {
+ const block = grip.closest('.scr-block');
+ if (!block) return;
e.preventDefault();
- const idx = sortState.items.findIndex(x => x.src + '|' + x.id === block.dataset.key);
- if (idx < 0) return;
- sortState.drag = { idx, key: block.dataset.key };
+ e.stopPropagation();
+ const key = block.dataset.key;
+ const li = cv.querySelector(`.scr-lane .scr-block[data-key="${CSS.escape(key)}"]`).closest('.scr-lane').dataset.lane;
+ sortState.drag = { key, li: +li, px: e.clientX, py: e.clientY };
block.classList.add('drag-src');
makeGhost(block, e.clientX, e.clientY);
- const move = ev => onSortMove(ev);
+ const mv = ev => onSortMove(ev);
const up = ev => {
- block.removeEventListener('pointermove', move);
- block.removeEventListener('pointerup', up);
- block.removeEventListener('pointercancel', up);
+ window.removeEventListener('pointermove', mv);
+ window.removeEventListener('pointerup', up);
+ window.removeEventListener('pointercancel', up);
onSortUp(ev);
};
- block.addEventListener('pointermove', move);
- block.addEventListener('pointerup', up);
- block.addEventListener('pointercancel', up);
+ window.addEventListener('pointermove', mv);
+ window.addEventListener('pointerup', up);
+ window.addEventListener('pointercancel', up);
try { block.setPointerCapture(e.pointerId); } catch (err) {}
});
});
}
function onSortMove(e) {
- if (!sortState.drag) return;
+ const d = sortState.drag;
+ if (!d) return;
const cv = document.getElementById('scr-canvas');
if (!cv) return;
- let toLine = sortState.items.length;
- cv.querySelectorAll('.scr-block').forEach(b => {
- const idx = sortState.items.findIndex(x => x.src + '|' + x.id === b.dataset.key);
- if (idx < 0 || idx === sortState.drag.idx) return;
- const r = b.getBoundingClientRect();
- if (e.clientY < r.top + r.height / 2) { if (idx < toLine) toLine = idx; }
- else { if (idx + 1 > toLine) toLine = idx + 1; }
- });
- cv.querySelectorAll('.sort-dropline').forEach(l => l.style.display = 'none');
- const line = cv.querySelector(`[data-line="${Math.max(0, Math.min(toLine, sortState.items.length))}"]`);
- if (line) line.style.display = 'block';
- if (gEl) { gEl.style.left = (e.clientX + 12) + 'px'; gEl.style.top = (e.clientY - 40) + 'px'; }
+ const laneEls = [...cv.querySelectorAll('.scr-lane')];
+ const gapEls = [...cv.querySelectorAll('.scr-gap')];
+ const y = e.clientY, x = e.clientX;
+ const laneRect = laneEls.map(el => el.getBoundingClientRect());
+ const gapRect = gapEls.map(el => el.getBoundingClientRect());
+ // 1) drop in a gap -> new priority lane between rows
+ // narrow hit zone: only the middle band of the gap counts, so a pointer
+ // sweeping near a row edge stays committed to that row
+ let gapIdx = -1;
+ for (let i = 0; i < gapRect.length; i++) {
+ const r = gapRect[i];
+ const midY = (r.top + r.bottom) / 2;
+ if (Math.abs(y - midY) <= 5 && x >= r.left && x <= r.right) { gapIdx = +gapEls[i].dataset.gap; break; }
+ }
+ // 2) drop inside a lane -> reorder within that lane / move between lanes
+ let li = -1;
+ if (gapIdx < 0) {
+ for (let i = 0; i < laneRect.length; i++) {
+ const r = laneRect[i];
+ if (y >= r.top && y <= r.bottom) { li = +laneEls[i].dataset.lane; break; }
+ }
+ }
+ // 3) else: nearest lane edge (top/bottom half of canvas) -> gap around it
+ if (gapIdx < 0 && li < 0 && laneRect.length) {
+ const first = laneRect[0], last = laneRect[laneRect.length - 1];
+ if (y < first.top) gapIdx = 0;
+ else if (y > last.bottom) gapIdx = laneRect.length;
+ }
+ // 4) outside the canvas -> cancel target, block snaps back
+ const cvr = cv.getBoundingClientRect();
+ if (y < cvr.top || y > cvr.bottom) { gapIdx = -1; li = -1; }
+ // clear previous hover state
+ cv.querySelectorAll('.scr-gap, .scr-lane').forEach(el => { el.classList.remove('hover', 'drophere'); });
+ const hline = $('#scr-blockline'); if (hline) hline.remove();
+ if (gapIdx >= 0) {
+ const gap = cv.querySelector(`.scr-gap[data-gap="${gapIdx}"]`);
+ if (gap) gap.classList.add('drophere');
+ d.gap = gapIdx; d.li = undefined; d.ins = undefined;
+ } else if (li >= 0) {
+ const laneEl = cv.querySelector(`.scr-lane[data-lane="${li}"]`);
+ laneEl.classList.add('hover');
+ const rowEl = laneEl.querySelector('.scr-row');
+ const blocks = rowEl.querySelectorAll('.scr-block');
+ let ins = 0; // insertion index inside lane
+ if (blocks.length) {
+ const targets = [...blocks].filter(b => b.dataset.key !== d.key);
+ // find insertion point by x position among visible blocks
+ let idx = 0;
+ for (const b of targets) {
+ const r = b.getBoundingClientRect();
+ if (x > r.left + r.width / 2) idx++; else break;
+ }
+ ins = idx;
+ }
+ d.li = li;
+ d.ins = ins;
+ d.gap = undefined;
+ // vertical guide line at insertion point
+ const before = [...blocks][ins]; const after = [...blocks][ins - 1];
+ const g = document.createElement('div');
+ g.id = 'scr-blockline'; g.className = 'scr-blockline';
+ let gx;
+ if (before) gx = before.getBoundingClientRect().left - 6;
+ else if (after) gx = after.getBoundingClientRect().right + 6;
+ else { const wr = rowEl.getBoundingClientRect(); gx = wr.left; }
+ g.style.left = gx + 'px';
+ const laneR = laneEl.getBoundingClientRect();
+ g.style.top = laneR.top + 'px'; g.style.height = laneR.height + 'px';
+ document.body.appendChild(g);
+ } else if (typeof d.ins === 'number') {
+ // lost between rows: drop the previous target so the block snaps back
+ d.li = undefined; d.ins = undefined; d.gap = undefined;
+ }
+ d.px = x; d.py = y;
+ placeGhostXY(x, y);
}
function onSortUp(e) {
const d = sortState.drag;
if (!d) return;
- const line = document.querySelector('#scr-canvas .sort-dropline[style*="display: block"]');
- let to = d.idx;
- if (line) {
- to = +line.dataset.line;
- if (d.idx < to) to -= 1;
- to = Math.max(0, Math.min(to, sortState.items.length - 1));
+ const line = document.getElementById('scr-blockline'); if (line) line.remove();
+ const cv = document.getElementById('scr-canvas');
+ cv.querySelectorAll('.scr-gap, .scr-lane').forEach(el => el.classList.remove('hover', 'drophere'));
+ const item = findLaneItem(d.key);
+ if (!item) { removeGhost(); sortState.drag = null; return; }
+ let minLi = item.li, maxLi = item.li;
+ if (d.gap !== undefined) {
+ // move to a new lane positioned at that gap
+ sortState.lanes[item.li].models.splice(item.idx, 1);
+ let dst = d.gap;
+ if (!sortState.lanes[item.li].models.length) {
+ sortState.lanes.splice(item.li, 1);
+ if (item.li < dst) dst -= 1;
+ }
+ sortState.lanes.splice(dst, 0, { models: [{ src: item.src, id: item.id }] });
+ minLi = Math.min(item.li, dst);
+ maxLi = Math.max(item.li, dst);
+ } else if (typeof d.ins === 'number') {
+ // reorder within lane li
+ const srcL = item.li;
+ const m = sortState.lanes[srcL].models.splice(item.idx, 1)[0];
+ let tgt = (d.li === undefined) ? srcL : d.li;
+ if (!sortState.lanes[srcL].models.length && srcL !== tgt) {
+ // source lane became empty: remove it, target index shifts accordingly
+ sortState.lanes.splice(srcL, 1);
+ if (srcL < tgt) tgt -= 1;
+ }
+ sortState.lanes[tgt].models.splice(d.ins, 0, m);
+ minLi = Math.min(srcL, tgt);
+ maxLi = Math.max(srcL, tgt);
}
- const [moved] = sortState.items.splice(d.idx, 1);
- sortState.items.splice(to, 0, moved);
+ // affected lane range: from the earliest changed lane to the very end
+ // (rows below an emptied lane slide up to re-seal the chain)
+ const affected = [];
+ for (let i = minLi; i < sortState.lanes.length; i++) affected.push(i);
removeGhost();
sortState.drag = null;
- paintSort();
+ paintSort(affected);
+}
+function findLaneItem(key) {
+ for (let i = 0; i < sortState.lanes.length; i++) {
+ const idx = sortState.lanes[i].models.findIndex(m => m.src + '|' + m.id === key);
+ if (idx >= 0) return { li: i, idx, src: sortState.lanes[i].models[idx].src, id: sortState.lanes[i].models[idx].id };
+ }
+ return null;
}
let gEl = null;
function makeGhost(block, x, y) {
removeGhost();
gEl = block.cloneNode(true);
+ gEl.classList.remove('drag-src');
gEl.classList.add('scr-ghost');
gEl.style.position = 'fixed';
- gEl.style.left = (x + 12) + 'px';
- gEl.style.top = (y - 40) + 'px';
gEl.style.width = block.offsetWidth + 'px';
gEl.style.margin = '0';
+ gEl.style.left = (x - 20) + 'px';
+ gEl.style.top = (y - 20) + 'px';
gEl.style.pointerEvents = 'none';
document.body.appendChild(gEl);
+ const br = block.getBoundingClientRect();
+ gEl.dataset.dx = x - br.left; gEl.dataset.dy = y - br.top;
+}
+function placeGhostXY(x, y) {
+ if (!gEl) return;
+ gEl.style.left = (x - gEl.dataset.dx) + 'px';
+ gEl.style.top = (y - gEl.dataset.dy) + 'px';
}
function removeGhost() { if (gEl) { gEl.remove(); gEl = null; } }
function sortReset() {
- if (sortState.origin) sortState.items = JSON.parse(sortState.origin);
+ if (sortState.origin) sortState.lanes = JSON.parse(sortState.origin);
sortState.drag = null; removeGhost();
- paintSort();
+ const all = [];
+ for (let i = 0; i < sortState.lanes.length; i++) all.push(i);
+ paintSort(all);
}
async function saveSort() {
const snap = await api('/api/sources');
const byName = {}; snap.sources.forEach(x => byName[x.name] = x);
const groups = {};
- sortState.items.forEach(it => (groups[it.src] = groups[it.src] || []).push(it));
+ sortState.lanes.forEach((lane, li) => lane.models.forEach(it => {
+ (groups[it.src] = groups[it.src] || []).push({ id: it.id, priority: (sortState.lanes.length - li) * 10 });
+ }));
let dirty = 0;
for (const name of Object.keys(groups)) {
const base = byName[name];
if (!base) continue;
const seen = new Set();
const ordered = groups[name].filter(it => { if (seen.has(it.id)) return false; seen.add(it.id); return true; })
- .map(it => ({ id: it.id, priority: it.prio, kind: 'chat' }));
+ .map(it => ({ id: it.id, priority: it.priority, kind: 'chat' }));
(base.models || []).forEach(x => {
if (seen.has(x.id)) return;
ordered.push({ id: x.id, priority: x.priority || 0, kind: x.kind === 'image' ? 'image' : 'chat' });
@@ -940,7 +1187,7 @@ async function saveSort() {
}
}
toast(dirty ? t('sortSaved') : t('sortNoChange'));
- sortState.origin = JSON.stringify(sortState.items);
+ sortState.origin = JSON.stringify(sortState.lanes);
}
/* ---------- adapters tab ---------- */
${Array.from({ length: n }, () => '').join('')}
+ ${lane.models.map((m, i) => scrBlockHtml(m, i === 0)).join('')}
+