mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-09-20 18:51:26 -03:00
feat(frontend): one grip reorder affordance for tags and trigger words
Model tags could already be reordered by dragging a chip, but the only hint was a `cursor: grab` on `.metadata-item` — a hover-only, mouse-only signal that also leaked into the bulk add-tags modal, where the chips are not sortable at all. Trigger words could not be reordered, and their order matters: "Copy Trigger Words" and the insert-into-node action join the array as-is to build a prompt. Both editors now share one vocabulary: a `⠿` grip that appears whenever the list has something to order, plus `Alt + arrow` keyboard moves with an aria-live announcement. Whether the chip body is draggable is a property of the item rather than of the feature: - tags have no click action of their own, so the whole chip stays draggable (`handleSelector: null`), with a 5px threshold so a click on the grip only focuses it - trigger words keep click-to-edit on the body, so a drag starts from the grip only - the grip is the element that opts out of touch scrolling (`touch-action: none`), so touch users drag by the grip in both editors - reordering is offered only while editing: trigger words reveal the grip from `.edit-mode`, tags from the edit container, which stays hidden outside edit mode The drag engine moves out of ModelTags.js into shared/pointerSort.js, which now marks sortable containers with `pointer-sort-enabled` so only lists that really sort show the grab cursor. Labels, the sortable flag, the keyboard handler and the live region live in shared/reorderSupport.js, and both editors render the same three `common.reorder.*` keys (translations follow in the next commit). Two inherited engine bugs are fixed on the way: the drop position was only settled when an animation frame was still pending, so a fast drag (or one that started by crossing the threshold) fell back into its original slot; and the guard that stops a drop from triggering the chip's own click handler was removed on a timer, swallowing unrelated clicks until the next task.
This commit is contained in:
Will Miao
@@ -0,0 +1,196 @@
|
||||
import { beforeEach, describe, expect, it } from "vitest";
|
||||
|
||||
const POINTER_SORT_MODULE = new URL(
|
||||
'../../../static/js/components/shared/pointerSort.js',
|
||||
import.meta.url,
|
||||
).pathname;
|
||||
|
||||
describe("pointerSort", () => {
|
||||
let enablePointerSort;
|
||||
let disablePointerSort;
|
||||
let moveItemWithinContainer;
|
||||
|
||||
beforeEach(async () => {
|
||||
document.body.innerHTML = '';
|
||||
const module = await import(POINTER_SORT_MODULE);
|
||||
enablePointerSort = module.enablePointerSort;
|
||||
disablePointerSort = module.disablePointerSort;
|
||||
moveItemWithinContainer = module.moveItemWithinContainer;
|
||||
});
|
||||
|
||||
function buildList(words) {
|
||||
document.body.innerHTML = `
|
||||
<div class="list">
|
||||
${words.map((word) => `
|
||||
<div class="item" data-id="${word}">
|
||||
<span class="handle">::</span>
|
||||
<span class="label">${word}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
return {
|
||||
container: document.querySelector('.list'),
|
||||
items: Array.from(document.querySelectorAll('.item')),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Explicit class names so the assertions test the configurable engine
|
||||
* rather than the metadata-* defaults used by the tag editor.
|
||||
*/
|
||||
function sortOptions(extra = {}) {
|
||||
return {
|
||||
itemSelector: '.item',
|
||||
draggingClass: 'item-dragging',
|
||||
placeholderClass: 'item-placeholder',
|
||||
containerSortingClass: 'list-sorting',
|
||||
bodySortingClass: 'drag-active',
|
||||
...extra,
|
||||
};
|
||||
}
|
||||
|
||||
function order() {
|
||||
return Array.from(document.querySelectorAll('.item')).map((el) => el.dataset.id);
|
||||
}
|
||||
|
||||
function firePointer(type, target, init = {}) {
|
||||
target.dispatchEvent(new PointerEvent(type, {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
...init,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* jsdom reports zero-sized rects for every element, which makes the engine
|
||||
* treat a high clientY as "past the last item".
|
||||
*/
|
||||
function dragToEnd(target) {
|
||||
firePointer('pointerdown', target);
|
||||
firePointer('pointermove', target, { clientY: 999 });
|
||||
firePointer('pointerup', target, { clientY: 999 });
|
||||
}
|
||||
|
||||
it("reorders items when the whole item is draggable", () => {
|
||||
const { container } = buildList(['a', 'b', 'c']);
|
||||
enablePointerSort(container, sortOptions());
|
||||
|
||||
const first = document.querySelector('.item');
|
||||
dragToEnd(first);
|
||||
|
||||
expect(order()).toEqual(['b', 'c', 'a']);
|
||||
});
|
||||
|
||||
it("keeps the metadata-* defaults the tag editor relies on", () => {
|
||||
document.body.innerHTML = `
|
||||
<div class="metadata-items">
|
||||
<div class="metadata-item" data-id="a">a</div>
|
||||
<div class="metadata-item" data-id="b">b</div>
|
||||
</div>
|
||||
`;
|
||||
const container = document.querySelector('.metadata-items');
|
||||
|
||||
// No options at all: ModelTags.js calls the engine exactly like this
|
||||
enablePointerSort(container);
|
||||
|
||||
const first = container.querySelector('.metadata-item');
|
||||
firePointer('pointerdown', first);
|
||||
firePointer('pointermove', first, { clientY: 999 });
|
||||
firePointer('pointerup', first, { clientY: 999 });
|
||||
|
||||
expect(
|
||||
Array.from(container.querySelectorAll('.metadata-item')).map((el) => el.dataset.id),
|
||||
).toEqual(['b', 'a']);
|
||||
expect(container.classList.contains('pointer-sort-enabled')).toBe(true);
|
||||
expect(document.querySelector('.reorder-placeholder')).toBeNull();
|
||||
});
|
||||
|
||||
it("only starts a drag from the configured handle", () => {
|
||||
const { container } = buildList(['a', 'b', 'c']);
|
||||
enablePointerSort(container, sortOptions({ handleSelector: '.handle' }));
|
||||
|
||||
// Pressing the item body must not start a drag
|
||||
dragToEnd(document.querySelector('.item .label'));
|
||||
expect(order()).toEqual(['a', 'b', 'c']);
|
||||
expect(document.querySelector('.item-dragging')).toBeNull();
|
||||
|
||||
// Pressing the handle does
|
||||
dragToEnd(document.querySelector('.item .handle'));
|
||||
expect(order()).toEqual(['b', 'c', 'a']);
|
||||
});
|
||||
|
||||
it("never drags items matching the blocked selector or the ignore selector", () => {
|
||||
const { container } = buildList(['a', 'b']);
|
||||
enablePointerSort(container, sortOptions({ blockedItemSelector: '.locked' }));
|
||||
|
||||
document.querySelector('.item').classList.add('locked');
|
||||
dragToEnd(document.querySelector('.item'));
|
||||
expect(order()).toEqual(['a', 'b']);
|
||||
|
||||
document.querySelector('.item').classList.remove('locked');
|
||||
enablePointerSort(container, sortOptions({ ignoreSelector: '.label' }));
|
||||
dragToEnd(document.querySelector('.item .label'));
|
||||
expect(order()).toEqual(['a', 'b']);
|
||||
});
|
||||
|
||||
it("waits for the drag threshold before lifting an item", () => {
|
||||
const { container } = buildList(['a', 'b']);
|
||||
enablePointerSort(container, sortOptions({ dragThreshold: 10 }));
|
||||
|
||||
const first = document.querySelector('.item');
|
||||
firePointer('pointerdown', first, { clientX: 10, clientY: 10 });
|
||||
|
||||
firePointer('pointermove', first, { clientX: 15, clientY: 10 });
|
||||
expect(document.querySelector('.item-dragging')).toBeNull();
|
||||
|
||||
firePointer('pointermove', first, { clientX: 60, clientY: 10 });
|
||||
expect(document.querySelector('.item-dragging')).not.toBeNull();
|
||||
|
||||
firePointer('pointerup', first, { clientX: 60, clientY: 10 });
|
||||
expect(order()).toEqual(['b', 'a']);
|
||||
});
|
||||
|
||||
it("calls onSorted once a drop completes", () => {
|
||||
const { container } = buildList(['a', 'b']);
|
||||
const onSorted = [];
|
||||
enablePointerSort(container, sortOptions({
|
||||
onSorted: (item) => onSorted.push(item.dataset.id),
|
||||
}));
|
||||
|
||||
dragToEnd(document.querySelector('.item'));
|
||||
expect(onSorted).toEqual(['a']);
|
||||
});
|
||||
|
||||
it("stops handling drags after disablePointerSort", () => {
|
||||
const { container } = buildList(['a', 'b']);
|
||||
enablePointerSort(container, sortOptions());
|
||||
|
||||
disablePointerSort(container, sortOptions());
|
||||
dragToEnd(document.querySelector('.item'));
|
||||
|
||||
expect(order()).toEqual(['a', 'b']);
|
||||
});
|
||||
|
||||
it("moveItemWithinContainer moves items within bounds only", () => {
|
||||
const { container } = buildList(['a', 'b', 'c']);
|
||||
const items = Array.from(document.querySelectorAll('.item'));
|
||||
|
||||
expect(moveItemWithinContainer(items[0], 1, sortOptions()))
|
||||
.toEqual({ index: 1, total: 3 });
|
||||
expect(order()).toEqual(['b', 'a', 'c']);
|
||||
|
||||
expect(moveItemWithinContainer(items[2], -1, sortOptions()))
|
||||
.toEqual({ index: 1, total: 3 });
|
||||
expect(order()).toEqual(['b', 'c', 'a']);
|
||||
|
||||
// Out of range / unknown item moves are refused
|
||||
const currentFirst = document.querySelector('.item');
|
||||
expect(moveItemWithinContainer(currentFirst, -1, sortOptions())).toBeNull();
|
||||
expect(moveItemWithinContainer(currentFirst, 3, sortOptions())).toBeNull();
|
||||
expect(moveItemWithinContainer(document.createElement('div'), 1, {
|
||||
...sortOptions(),
|
||||
container,
|
||||
})).toBeNull();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user