shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Unify toolbox drag and drop reorder behavior
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-01 20:00:47 +02:00
parent a6d35c6e6b
commit 1879b245fb
17 changed files with 1258 additions and 929 deletions
Download patch file Download diff file Expand all files Collapse all files

14
website/src/features/toolboxes/ToolboxCard.jsx
View file

@ -20,25 +20,23 @@ export function formatDate(value) {
return new Intl.DateTimeFormat("fr-FR", { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
}
export function ToolboxCard({ toolbox, game, actions, draggingToolboxId, dropTarget, onDragStart }) {
export function ToolboxCard({ toolbox, game, actions, reorder }) {
const gameCoverImage = getGameCardCover(game);
const coverImage = gameCoverImage || toolbox.icon || DEFAULT_TOOLBOX_ICON;
const isDragging = draggingToolboxId === toolbox.id;
const isDropTarget = dropTarget.id === toolbox.id;
const className = [
"card",
"toolbox-card",
isDragging ? "is-dragging" : "",
isDropTarget ? "is-drop-target" : "",
isDropTarget && dropTarget.placement === "after" ? "drop-after" : ""
reorder.isItemDragging(toolbox.id) ? "is-dragging" : "",
reorder.isItemDropTarget(toolbox.id) ? "is-drop-target" : "",
reorder.getDropPlacement("item", toolbox.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<article className={className} data-toolbox-id={toolbox.id}>
<article className={className} {...reorder.getItemProps({ itemId: toolbox.id })}>
<button
className="toolbox-card-drag-handle"
type="button"
onPointerDown={(event) => onDragStart(event, toolbox.id)}
onPointerDown={(event) => reorder.itemReorder.startDrag(event, toolbox.id)}
aria-label={`Déplacer ${toolbox.name}`}
title="Déplacer"
>

30
website/src/features/toolboxes/ToolboxPages.jsx
View file

@ -4,7 +4,7 @@ import { Icon } from "../../components/Icon.jsx";
import { ImportButton } from "../../components/ImportButton.jsx";
import { StorageQuota } from "../../components/StorageQuota.jsx";
import { ToastPositionSwitch } from "../../components/ToastPositionSwitch.jsx";
import { usePointerReorder } from "../../hooks/usePointerReorder.js";
import { useGroupedReorder } from "../../hooks/useGroupedReorder.js";
import { compressImage } from "../../utils/imageCompression.js";
import { getSetting as dbGetSetting, setSetting as dbSetSetting } from "../../utils/indexedDbStorage.js";
import { getGameCardCover, ToolboxCard, ToolboxGameIcon, ToolboxIconPicker } from "./ToolboxCard.jsx";
@ -40,20 +40,24 @@ async function copyText(value) {
export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions, storageUsage, toastPosition, setToastPosition }) {
const content = siteContent.toolboxes;
const {
draggingId: draggingToolboxId,
dropTarget,
startDrag: startToolboxDrag
} = usePointerReorder({
targetSelector: ".toolbox-card",
getTargetId: (target) => target.dataset.toolboxId,
itemReorder,
getItemProps,
isItemDragging,
isItemDropTarget,
getDropPlacement
} = useGroupedReorder({
namespace: "toolbox-cards",
items: toolboxes,
getItemId: (toolbox) => toolbox.id,
orientation: "horizontal",
getPlacement: (event, target) => {
const rect = target.getBoundingClientRect();
return event.clientY > rect.top + rect.height / 2 || event.clientX > rect.left + rect.width / 2 ? "after" : "before";
},
onMove: (draggingId, targetId, placement) => {
const nextIds = toolboxes.map((toolbox) => toolbox.id).filter((id) => id !== draggingId);
const targetIndex = nextIds.indexOf(targetId);
nextIds.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, draggingId);
onItemMove: (operation) => {
const nextIds = toolboxes.map((toolbox) => toolbox.id).filter((id) => id !== operation.sourceId);
const targetIndex = nextIds.indexOf(operation.targetId);
nextIds.splice(operation.placement === "after" ? targetIndex + 1 : targetIndex, 0, operation.sourceId);
actions.updateToolboxOrder(nextIds);
}
});
@ -100,9 +104,7 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
toolbox={toolbox}
game={getToolboxGame(toolbox)}
actions={actions}
draggingToolboxId={draggingToolboxId}
dropTarget={dropTarget}
onDragStart={startToolboxDrag}
reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
/>
)) : (
<div className="empty"><h2>{content.emptyTitle}</h2><p>{content.emptyText}</p></div>

45
website/src/features/toolboxes/modules/CalculatorModule.jsx
View file

@ -1,6 +1,7 @@
// Rôle : fournit l'outil calculateur avec résultats enregistrés en arborescence.
import { useLayoutEffect, useMemo, useRef, useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
function calculateExpression(expression) {
const normalized = String(expression || "").replaceAll(",", ".").trim();
@ -43,6 +44,17 @@ export function CalculatorModule({ toolboxId, moduleId, context }) {
const calculatorCardRef = useRef(null);
const result = useMemo(() => calculateExpression(expression), [expression]);
const activeParent = data.entries.find((entry) => entry.id === activeParentId);
const scopeParentId = (parentId = "") => `${moduleId}:${parentId}`;
const reorder = useGroupedReorder({
namespace: "calculator",
items: data.entries,
getItemId: (entry) => entry.id,
getParentId: (entry) => scopeParentId(entry.parentId || ""),
onItemMove: (operation) => {
save(moveItem(data.entries, operation.sourceId, operation.targetId, operation.placement));
},
hierarchy: { enabled: true, stickyParents: true }
});
useLayoutEffect(() => {
const element = calculatorCardRef.current;
@ -165,7 +177,7 @@ export function CalculatorModule({ toolboxId, moduleId, context }) {
</div>
<div className={`tool-split-tree calculator-tree ${data.scrollResults ? "is-scrollable legacy-scrollbar" : ""}`}>
{data.entries.length ? (
<CalculatorEntries entries={data.entries} parentId="" activeParentId={activeParentId} textContent={textContent} onUse={useEntry} onRename={renameEntry} onDelete={deleteEntry} />
<CalculatorEntries entries={data.entries} parentId="" getScopedParentId={scopeParentId} activeParentId={activeParentId} textContent={textContent} reorder={reorder} onUse={useEntry} onRename={renameEntry} onDelete={deleteEntry} />
) : (
<p className="muted">{textContent.emptyResults || "Aucun résultat enregistré."}</p>
)}
@ -175,16 +187,34 @@ export function CalculatorModule({ toolboxId, moduleId, context }) {
);
}
function CalculatorEntries({ entries, parentId, activeParentId, textContent, onUse, onRename, onDelete }) {
function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentId, textContent, reorder, onUse, onRename, onDelete }) {
const children = getChildren(entries, parentId);
const [editingId, setEditingId] = useState("");
if (!children.length) return null;
return (
<ul className="tool-split-entry-list calculator-entry-list">
{children.map((entry) => (
<li className={`${entry.id === activeParentId ? "active" : ""} ${entry.id === editingId ? "is-editing" : ""}`} key={entry.id}>
<div className="tool-split-entry calculator-entry">
{children.map((entry) => {
const className = [
entry.id === activeParentId ? "active" : "",
entry.id === editingId ? "is-editing" : "",
reorder.isItemDragging(entry.id) ? "is-dragging" : "",
reorder.isItemDropTarget(entry.id) ? "is-drop-target" : "",
reorder.getDropPlacement("item", entry.id, parentId) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<li className={className} key={entry.id} {...reorder.getItemProps({ itemId: entry.id, parentId: getScopedParentId(parentId) })}>
<div className="tool-split-entry calculator-entry has-drag-handle">
<button
className="calculator-drag-handle"
type="button"
onPointerDown={(event) => reorder.itemReorder.startDrag(event, entry.id)}
aria-label={`${textContent.reorderTitle || "Déplacer"} ${entry.label || formatResult(entry.value)}`}
title={textContent.reorderTitle || "Déplacer"}
>
<Icon name="drag" />
</button>
{entry.id === editingId ? (
<>
<span className="tool-split-entry-value is-readonly" title={textContent.readonlyValueTitle || "Quantité non modifiable"}>
@ -204,9 +234,10 @@ function CalculatorEntries({ entries, parentId, activeParentId, textContent, onU
<Icon name="trash" />
</button>
</div>
<CalculatorEntries entries={entries} parentId={entry.id} activeParentId={activeParentId} textContent={textContent} onUse={onUse} onRename={onRename} onDelete={onDelete} />
<CalculatorEntries entries={entries} parentId={entry.id} getScopedParentId={getScopedParentId} activeParentId={activeParentId} textContent={textContent} reorder={reorder} onUse={onUse} onRename={onRename} onDelete={onDelete} />
</li>
))}
);
})}
</ul>
);
}

512
website/src/features/toolboxes/modules/CombosModule.jsx
View file

@ -1,11 +1,11 @@
// Rôle : fournit l'outil Combos avec palettes d'inputs et rendu visuel par périphérique.
import { useEffect, useMemo, useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
const UNCATEGORIZED_DROP_ID = "combos:uncategorized";
const CATEGORY_SECTION_PREFIX = "combos:category";
const CATEGORY_BOUNDARY_DROP_PREFIX = "combos:category-boundary";
import {
applyGroupedReorderOperation,
getGroupedEntries,
useGroupedReorder
} from "../../../hooks/useGroupedReorder.js";
const DEVICE_OPTIONS = [
{ value: "playstation", label: "PlayStation" },
@ -142,358 +142,13 @@ function getComboCategory(combo) {
return String(combo?.category || "").trim();
}
function getCategoryGroups(combos, categoryOrder) {
const categories = [];
combos.forEach((combo) => {
const category = getComboCategory(combo);
if (category && !categories.includes(category)) categories.push(category);
});
const orderedCategories = [
...categoryOrder.filter((category) => categories.includes(category)),
...categories.filter((category) => !categoryOrder.includes(category))
];
const groups = orderedCategories.map((category) => ({
category,
combos: combos.filter((combo) => getComboCategory(combo) === category)
})).filter((group) => group.combos.length);
const renderedCategories = new Set();
return combos.map((combo) => {
const category = getComboCategory(combo);
if (!category) return { type: "combo", combo };
if (renderedCategories.has(category)) return null;
renderedCategories.add(category);
return { type: "category", group: groups.find((group) => group.category === category) };
}).filter(Boolean);
function setComboCategory(combo, category) {
const nextCombo = { ...combo };
if (category) nextCombo.category = category;
else delete nextCombo.category;
return nextCombo;
}
function getCategoryComboIds(combos, category) {
return combos.filter((combo) => getComboCategory(combo) === category).map((combo) => combo.id);
}
function getAllCategories(combos) {
const categories = [];
combos.forEach((combo) => {
const category = getComboCategory(combo);
if (category && !categories.includes(category)) categories.push(category);
});
return categories;
}
function getCompleteCategoryOrder(categoryOrder, categories) {
return [
...categoryOrder.filter((category) => categories.includes(category)),
...categories.filter((category) => !categoryOrder.includes(category))
];
}
function getCategorySectionId(category) {
return `${CATEGORY_SECTION_PREFIX}\n${category}`;
}
function parseCategorySectionId(id) {
const parts = String(id || "").split("\n");
if (parts[0] !== CATEGORY_SECTION_PREFIX) return "";
return parts.slice(1).join("\n");
}
function isCategorySectionId(id) {
return String(id || "").startsWith(`${CATEGORY_SECTION_PREFIX}\n`);
}
function getCategoryBoundaryDropId(category, placement) {
return `${CATEGORY_BOUNDARY_DROP_PREFIX}\n${category}\n${placement}`;
}
function parseCategoryBoundaryDropId(id) {
const parts = String(id || "").split("\n");
if (parts[0] !== CATEGORY_BOUNDARY_DROP_PREFIX) return { category: "", placement: "" };
return {
category: parts[1] || "",
placement: parts[2] === "after" ? "after" : "before"
};
}
function isCategoryBoundaryDropId(id) {
return String(id || "").startsWith(`${CATEGORY_BOUNDARY_DROP_PREFIX}\n`);
}
function isUncategorizedDropId(id) {
return id === UNCATEGORIZED_DROP_ID;
}
function moveComboGroup(combos, movingIds, targetComboId, placement = "before") {
const movingSet = new Set(movingIds);
if (!movingSet.size || movingSet.has(targetComboId)) return combos;
const movingCombos = combos.filter((combo) => movingSet.has(combo.id));
const remainingCombos = combos.filter((combo) => !movingSet.has(combo.id));
const targetIndex = remainingCombos.findIndex((combo) => combo.id === targetComboId);
if (targetIndex < 0) return combos;
remainingCombos.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, ...movingCombos);
return remainingCombos;
}
function getBoundaryComboId(combos, comboIds, placement) {
const ids = new Set(comboIds);
const orderedCombos = combos.filter((combo) => ids.has(combo.id));
return placement === "after" ? orderedCombos.at(-1)?.id || "" : orderedCombos[0]?.id || "";
}
function moveCategoryOrder(categoryOrder, categories, fromCategory, toCategory, placement = "before") {
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories);
const index = nextOrder.indexOf(fromCategory);
const targetIndex = nextOrder.indexOf(toCategory);
if (index < 0 || targetIndex < 0 || fromCategory === toCategory) return nextOrder;
const [moved] = nextOrder.splice(index, 1);
const nextTargetIndex = nextOrder.indexOf(toCategory);
nextOrder.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, moved);
return nextOrder;
}
function moveCategoryOrderToStart(categoryOrder, categories, fromCategory) {
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
return [fromCategory, ...nextOrder];
}
function moveCategoryOrderToEnd(categoryOrder, categories, fromCategory) {
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
return [...nextOrder, fromCategory];
}
function moveComboToCategory(combos, comboId, category) {
return combos.map((combo) => {
if (combo.id !== comboId) return combo;
const nextCombo = { ...combo };
if (category) nextCombo.category = category;
else delete nextCombo.category;
return nextCombo;
});
}
function getFirstComboIdOutsideCategory(combos, category, excludedIds = []) {
const excluded = new Set(excludedIds);
return combos.find((combo) => !excluded.has(combo.id) && getComboCategory(combo) !== category)?.id || "";
}
function getLastComboIdOutsideCategory(combos, category, excludedIds = []) {
const excluded = new Set(excludedIds);
return [...combos].reverse().find((combo) => !excluded.has(combo.id) && getComboCategory(combo) !== category)?.id || "";
}
function insertCategoryGroupAtBoundary(data, fromCategory, boundary, movingIds) {
const allCategories = getAllCategories(data.combos);
const targetIds = getCategoryComboIds(data.combos, boundary.category);
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, boundary.placement);
if (!boundaryComboId) return data;
return {
...data,
combos: moveComboGroup(data.combos, movingIds, boundaryComboId, boundary.placement),
categoryOrder: moveCategoryOrder(data.categoryOrder, allCategories, fromCategory, boundary.category, boundary.placement)
};
}
function moveCategoryGroupToEdge(data, fromCategory, edge) {
const movingIds = getCategoryComboIds(data.combos, fromCategory);
if (!movingIds.length) return data;
const allCategories = getAllCategories(data.combos);
const boundaryComboId = edge === "start"
? getFirstComboIdOutsideCategory(data.combos, fromCategory, movingIds)
: getLastComboIdOutsideCategory(data.combos, fromCategory, movingIds);
const combos = boundaryComboId
? moveComboGroup(data.combos, movingIds, boundaryComboId, edge === "start" ? "before" : "after")
: data.combos;
return {
...data,
combos,
categoryOrder: edge === "start"
? moveCategoryOrderToStart(data.categoryOrder, allCategories, fromCategory)
: moveCategoryOrderToEnd(data.categoryOrder, allCategories, fromCategory)
};
}
function moveComboToEdge(data, comboId, edge, category = "") {
const nextCombosWithCategory = moveComboToCategory(data.combos, comboId, category);
const boundaryComboId = edge === "start"
? nextCombosWithCategory.find((combo) => combo.id !== comboId)?.id || ""
: [...nextCombosWithCategory].reverse().find((combo) => combo.id !== comboId)?.id || "";
const combos = boundaryComboId
? moveComboGroup(nextCombosWithCategory, [comboId], boundaryComboId, edge === "start" ? "before" : "after")
: nextCombosWithCategory;
return { ...data, combos };
}
function moveComboBeforeCategoryBoundary(data, comboId, boundary) {
const nextCombosWithCategory = moveComboToCategory(data.combos, comboId, "");
const targetIds = getCategoryComboIds(data.combos, boundary.category).filter((id) => id !== comboId);
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, boundary.placement);
return {
...data,
combos: boundaryComboId ? moveComboGroup(nextCombosWithCategory, [comboId], boundaryComboId, boundary.placement) : nextCombosWithCategory
};
}
function addCategoryToOrder(categoryOrder, category) {
return category && !categoryOrder.includes(category) ? [...categoryOrder, category] : categoryOrder;
}
function cleanCategoryOrder(categoryOrder, combos) {
const categories = getAllCategories(combos);
return getCompleteCategoryOrder(categoryOrder, categories);
}
function getCategoryEdge(categoryDropTarget, comboDropTarget, category, edge) {
const dropId = getCategoryBoundaryDropId(category, edge === "start" ? "before" : "after");
return categoryDropTarget.id === dropId || comboDropTarget.id === dropId;
}
function getDropEdgeClass(categoryDropTarget, comboDropTarget, category, edge) {
return getCategoryEdge(categoryDropTarget, comboDropTarget, category, edge) ? "is-drop-target" : "";
}
function getEdgeFromPlacement(placement) {
return placement === "after" ? "end" : "start";
}
function insertComboIntoCategory(data, comboId, category, placement) {
const nextCombos = moveComboToCategory(data.combos, comboId, category);
const targetIds = getCategoryComboIds(data.combos, category).filter((id) => id !== comboId);
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, placement);
return {
...data,
combos: boundaryComboId ? moveComboGroup(nextCombos, [comboId], boundaryComboId, placement) : nextCombos,
categoryOrder: addCategoryToOrder(data.categoryOrder, category),
collapsedCategories: data.collapsedCategories.filter((item) => item !== category)
};
}
function moveCategoryGroupAroundCombo(data, fromCategory, targetComboId, placement, movingIds) {
return {
...data,
combos: moveComboGroup(data.combos, movingIds, targetComboId, placement)
};
}
function getCategoryOrderAfterComboMove(categoryOrder, combos) {
return cleanCategoryOrder(categoryOrder, combos);
}
function moveComboAroundCombo(data, fromComboId, targetComboId, placement) {
const targetCombo = data.combos.find((combo) => combo.id === targetComboId);
if (!targetCombo) return data;
const targetCategory = getComboCategory(targetCombo);
const nextCombos = moveComboToCategory(data.combos, fromComboId, targetCategory);
const movedCombos = moveComboGroup(nextCombos, [fromComboId], targetComboId, placement);
return {
...data,
combos: movedCombos,
categoryOrder: getCategoryOrderAfterComboMove(data.categoryOrder, movedCombos)
};
}
function isBoundaryEdgeTarget(toId, edge) {
if (!isCategoryBoundaryDropId(toId)) return false;
return parseCategoryBoundaryDropId(toId).placement === (edge === "start" ? "before" : "after");
}
function moveCategoryBoundary(data, fromCategory, toId) {
if (isUncategorizedDropId(toId)) return moveCategoryGroupToEdge(data, fromCategory, "start");
if (!isCategoryBoundaryDropId(toId)) return data;
const boundary = parseCategoryBoundaryDropId(toId);
if (!boundary.category || boundary.category === fromCategory) return data;
if (isBoundaryEdgeTarget(toId, "start") && getCompleteCategoryOrder(data.categoryOrder, getAllCategories(data.combos))[0] === boundary.category) {
return moveCategoryGroupToEdge(data, fromCategory, "start");
}
if (isBoundaryEdgeTarget(toId, "end")) {
const order = getCompleteCategoryOrder(data.categoryOrder, getAllCategories(data.combos));
if (order.at(-1) === boundary.category) return moveCategoryGroupToEdge(data, fromCategory, "end");
}
const movingIds = getCategoryComboIds(data.combos, fromCategory);
return insertCategoryGroupAtBoundary(data, fromCategory, boundary, movingIds);
}
function moveCategoryOrderAroundTarget(categoryOrder, combos, fromCategory, toCategory, placement) {
return moveCategoryOrder(categoryOrder, getAllCategories(combos), fromCategory, toCategory, placement);
}
function moveCategoryAroundCategory(data, fromCategory, toCategory, placement) {
const movingIds = getCategoryComboIds(data.combos, fromCategory);
const targetIds = getCategoryComboIds(data.combos, toCategory);
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, placement);
if (!boundaryComboId) return data;
return {
...data,
combos: moveComboGroup(data.combos, movingIds, boundaryComboId, placement),
categoryOrder: moveCategoryOrderAroundTarget(data.categoryOrder, data.combos, fromCategory, toCategory, placement)
};
}
function removeComboCategoryAtBoundary(data, comboId, boundary) {
const nextData = moveComboBeforeCategoryBoundary(data, comboId, boundary);
return {
...nextData,
categoryOrder: cleanCategoryOrder(nextData.categoryOrder, nextData.combos)
};
}
function moveComboByBoundary(data, fromComboId, toId) {
const boundary = parseCategoryBoundaryDropId(toId);
if (!boundary.category) return data;
return removeComboCategoryAtBoundary(data, fromComboId, boundary);
}
function removeComboCategory(data, comboId, placement) {
return moveComboToEdge(data, comboId, getEdgeFromPlacement(placement), "");
}
function insertAfterCategory(data, comboId, category, placement) {
return insertComboIntoCategory(data, comboId, category, placement);
}
function getCategoryTargetId(target) {
if (target.dataset.dropId) return target.dataset.dropId;
if (target.classList.contains("combos-category")) return getCategorySectionId(target.dataset.category || "");
return target.dataset.comboId || "";
}
function getComboTargetId(target) {
if (target.dataset.dropId) return target.dataset.dropId;
if (target.classList.contains("combo-card")) return target.dataset.comboId || "";
return getCategorySectionId(target.dataset.category || "");
}
function canDropComboOnTarget(target, draggingId, combos) {
const draggingCombo = combos.find((combo) => combo.id === draggingId);
if (!draggingCombo) return false;
const draggingCategory = getComboCategory(draggingCombo);
if (target.classList.contains("combos-root-drop-zone")) return Boolean(draggingCategory);
if (target.classList.contains("combos-category-boundary-drop-zone")) return true;
if (target.classList.contains("combos-category")) return target.dataset.category !== draggingCategory;
if (target.classList.contains("combo-card")) return target.dataset.comboId !== draggingId;
return false;
}
function canDropCategoryOnTarget(target, draggingId) {
const draggingCategory = parseCategorySectionId(draggingId);
if (!draggingCategory) return false;
if (target.classList.contains("combos-root-drop-zone")) return true;
if (target.classList.contains("combos-category-boundary-drop-zone")) {
const boundary = parseCategoryBoundaryDropId(target.dataset.dropId);
return boundary.category && boundary.category !== draggingCategory;
}
if (target.classList.contains("combos-category")) return target.dataset.category && target.dataset.category !== draggingCategory;
return !target.dataset.comboCategory;
}
function getCategoryDropPlacement(event, target) {
if (target.classList.contains("combos-category-boundary-drop-zone") || target.classList.contains("combos-root-drop-zone")) return "before";
const rect = target.getBoundingClientRect();
return event.clientY > rect.top + rect.height / 2 ? "after" : "before";
}
function getComboDropPlacement(event, target) {
if (target.classList.contains("combos-category-boundary-drop-zone") || target.classList.contains("combos-root-drop-zone")) return "before";
const rect = target.getBoundingClientRect();
return event.clientY > rect.top + rect.height / 2 ? "after" : "before";
}
function ComboInputToken({ input, device, palette = false, onClick, onDragStart }) {
const label = getInputLabel(input);
@ -629,28 +284,46 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
const paletteGroups = useMemo(() => getPaletteGroups(data.device, keyboardLayout), [data.device, keyboardLayout]);
const paletteColumns = useMemo(() => getPaletteColumns(paletteGroups), [paletteGroups]);
const cleanDraftInputs = draftInputs.map((step) => step.filter(Boolean)).filter((step) => step.length);
const entries = getCategoryGroups(data.combos, data.categoryOrder);
const {
draggingId: draggingCategoryId,
dropTarget: categoryDropTarget,
startDrag: startCategoryDrag
} = usePointerReorder({
targetSelector: ".combos-category, .combo-card, .combos-root-drop-zone, .combos-category-boundary-drop-zone",
getTargetId: getCategoryTargetId,
canDropOn: canDropCategoryOnTarget,
getPlacement: getCategoryDropPlacement,
onMove: moveCategory
const entries = getGroupedEntries(data.combos, {
groupOrder: data.categoryOrder,
getItemGroup: getComboCategory,
groupIdKey: "category",
groupItemKey: "combos"
});
const {
draggingId: draggingComboId,
dropTarget: comboDropTarget,
startDrag: startComboDrag
} = usePointerReorder({
targetSelector: ".combo-card, .combos-category, .combos-root-drop-zone, .combos-category-boundary-drop-zone",
getTargetId: getComboTargetId,
canDropOn: (target, draggingId) => canDropComboOnTarget(target, draggingId, data.combos),
getPlacement: getComboDropPlacement,
onMove: moveCombo
itemReorder,
groupReorder,
getItemProps,
getGroupProps,
getGroupBoundaryProps,
isItemDragging,
isItemDropTarget,
isGroupDragging,
isGroupDropTarget,
isBoundaryDropTarget,
getDropPlacement,
shouldShowGroupBoundaries
} = useGroupedReorder({
namespace: "combos",
items: data.combos,
getItemId: (combo) => combo.id,
getItemGroup: getComboCategory,
reorderFeatures: {
item: {
groupChange: true,
boundaryDrop: true,
ungroupedDrop: true
},
group: {
reorder: true,
boundaryDrop: true,
ungroupedDrop: true,
itemDrop: true
}
},
onItemMove: applyComboReorder,
onGroupMove: applyComboReorder,
hierarchy: { enabled: false, stickyParents: false }
});
function save(nextData) {
@ -666,39 +339,15 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
});
}
function moveCategory(fromId, toId, placement) {
const fromCategory = parseCategorySectionId(fromId);
const movingIds = getCategoryComboIds(data.combos, fromCategory);
if (!movingIds.length) return;
if (isUncategorizedDropId(toId) || isCategoryBoundaryDropId(toId)) {
save(moveCategoryBoundary(data, fromCategory, toId));
return;
}
if (isCategorySectionId(toId)) {
save(moveCategoryAroundCategory(data, fromCategory, parseCategorySectionId(toId), placement));
return;
}
if (data.combos.some((combo) => combo.id === toId)) {
save(moveCategoryGroupAroundCombo(data, fromCategory, toId, placement, movingIds));
}
}
function moveCombo(fromComboId, targetId, placement) {
const movedCombo = data.combos.find((combo) => combo.id === fromComboId);
if (!movedCombo) return;
if (isUncategorizedDropId(targetId)) {
save(removeComboCategory(data, fromComboId, placement));
return;
}
if (isCategoryBoundaryDropId(targetId)) {
save(moveComboByBoundary(data, fromComboId, targetId));
return;
}
if (isCategorySectionId(targetId)) {
save(insertAfterCategory(data, fromComboId, parseCategorySectionId(targetId), placement));
return;
}
save(moveComboAroundCombo(data, fromComboId, targetId, placement));
function applyComboReorder(operation) {
save(applyGroupedReorderOperation(data, {
operation,
itemsKey: "combos",
groupOrderKey: "categoryOrder",
collapsedGroupsKey: "collapsedCategories",
getItemGroup: getComboCategory,
setItemGroup: setComboCategory
}));
}
function addInputToStep(kind, value, stepIndex) {
@ -880,16 +529,16 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
const comboClassName = [
"combo-card",
"is-editing",
draggingComboId === combo.id ? "is-dragging" : "",
comboDropTarget.id === combo.id || categoryDropTarget.id === combo.id ? "is-drop-target" : "",
(comboDropTarget.id === combo.id && comboDropTarget.placement === "after") || (categoryDropTarget.id === combo.id && categoryDropTarget.placement === "after") ? "drop-after" : ""
isItemDragging(combo.id) ? "is-dragging" : "",
isItemDropTarget(combo.id) ? "is-drop-target" : "",
getDropPlacement("item", combo.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<article className={comboClassName} key={combo.id} data-combo-id={combo.id} data-combo-category={category}>
<article className={comboClassName} key={combo.id} {...getItemProps({ itemId: combo.id, groupId: category })}>
<button
className="task-planner-drag-handle combo-drag-handle"
type="button"
onPointerDown={(event) => startComboDrag(event, combo.id)}
onPointerDown={(event) => itemReorder.startDrag(event, combo.id)}
aria-label={`${textContent.reorderComboTitle || "Déplacer le combo"} ${combo.name}`}
title={textContent.reorderComboTitle || "Déplacer le combo"}
>
@ -918,41 +567,38 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
function renderCategory(group) {
const category = group.category;
const categoryId = getCategorySectionId(category);
const beforeDropId = getCategoryBoundaryDropId(category, "before");
const afterDropId = getCategoryBoundaryDropId(category, "after");
const isCollapsed = data.collapsedCategories.includes(category);
const categoryClassName = [
"combos-category checklist-section is-grouped",
isCollapsed ? "is-collapsed" : "",
draggingCategoryId === categoryId ? "is-dragging" : "",
categoryDropTarget.id === categoryId || comboDropTarget.id === categoryId ? "is-drop-target" : "",
(categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after") || (comboDropTarget.id === categoryId && comboDropTarget.placement === "after") ? "drop-after" : ""
isGroupDragging(category) ? "is-dragging" : "",
isGroupDropTarget(category) ? "is-drop-target" : "",
getDropPlacement("group", category) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
const showBoundaryDropZones = Boolean(draggingComboId || draggingCategoryId);
const showBoundaryDropZones = shouldShowGroupBoundaries();
const beforeDropZone = showBoundaryDropZones ? (
<div
className={`combos-category-boundary-drop-zone ${getDropEdgeClass(categoryDropTarget, comboDropTarget, category, "start")}`}
className={`combos-category-boundary-drop-zone ${isBoundaryDropTarget({ groupId: category, placement: "before" }) ? "is-drop-target" : ""}`}
key={`${category}:before-drop`}
data-drop-id={beforeDropId}
{...getGroupBoundaryProps({ groupId: category, placement: "before" })}
/>
) : null;
const afterDropZone = showBoundaryDropZones ? (
<div
className={`combos-category-boundary-drop-zone ${getDropEdgeClass(categoryDropTarget, comboDropTarget, category, "end")}`}
className={`combos-category-boundary-drop-zone ${isBoundaryDropTarget({ groupId: category, placement: "after" }) ? "is-drop-target" : ""}`}
key={`${category}:after-drop`}
data-drop-id={afterDropId}
{...getGroupBoundaryProps({ groupId: category, placement: "after" })}
/>
) : null;
return [
beforeDropZone,
<section className={categoryClassName} key={category} data-category={category}>
<section className={categoryClassName} key={category} {...getGroupProps({ groupId: category })}>
<div className="checklist-section-header combos-category-header">
<div className="combos-category-title">
<button
className="task-planner-category-drag-handle"
type="button"
onPointerDown={(event) => startCategoryDrag(event, categoryId)}
onPointerDown={(event) => groupReorder.startDrag(event, { groupId: category })}
aria-label={`${textContent.reorderCategoryTitle || "Déplacer la catégorie"} ${category}`}
title={textContent.reorderCategoryTitle || "Déplacer la catégorie"}
>
@ -984,17 +630,6 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
];
}
function renderUncategorizedDropZone() {
const draggingCombo = draggingComboId ? data.combos.find((combo) => combo.id === draggingComboId) : null;
const draggingCategory = parseCategorySectionId(draggingCategoryId);
if ((!draggingCombo || !getComboCategory(draggingCombo)) && !draggingCategory) return null;
return (
<div className={`combos-root-drop-zone is-visible ${comboDropTarget.id === UNCATEGORIZED_DROP_ID || categoryDropTarget.id === UNCATEGORIZED_DROP_ID ? "is-drop-target" : ""}`} data-drop-id={UNCATEGORIZED_DROP_ID}>
{textContent.noCategoryLabel || "Sans catégorie"}
</div>
);
}
return (
<div className="combos-module">
{(editing || editingComboId) && (
@ -1115,8 +750,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
)}
<div className="combos-category-list">
{renderUncategorizedDropZone()}
{entries.map((entry) => entry.type === "category" ? renderCategory(entry.group) : renderCombo(entry.combo))}
{entries.map((entry) => entry.type === "group" ? renderCategory(entry.group) : renderCombo(entry.item))}
</div>
</div>
);

40
website/src/features/toolboxes/modules/CountersModule.jsx
View file

@ -1,11 +1,27 @@
// Rôle : fournit l'outil compteurs personnalisables.
import { useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
export function CountersModule({ toolboxId, moduleId, context, editing }) {
const data = context.normalizeCountersData(context.getModuleData(toolboxId, moduleId, { counters: [] }));
const textContent = context.moduleText?.counters || {};
const [label, setLabel] = useState("");
const {
itemReorder,
getItemProps,
isItemDragging,
isItemDropTarget,
getDropPlacement
} = useGroupedReorder({
namespace: "counters",
items: data.counters,
getItemId: (counter) => counter.id,
getParentId: () => moduleId,
orientation: "horizontal",
onItemMove: (operation) => save(moveItem(data.counters, operation.sourceId, operation.targetId, operation.placement)),
hierarchy: { enabled: true, stickyParents: true }
});
function save(counters) {
context.setModuleData(toolboxId, moduleId, { counters });
@ -33,8 +49,25 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
</form>
)}
<div className="counters-grid">
{data.counters.map((counter) => (
<article className="counter-item" key={counter.id}>
{data.counters.map((counter) => {
const className = [
"counter-item",
isItemDragging(counter.id) ? "is-dragging" : "",
isItemDropTarget(counter.id) ? "is-drop-target" : "",
getDropPlacement("item", counter.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<article className={className} key={counter.id} {...getItemProps({ itemId: counter.id, parentId: moduleId })}>
<button
className="counter-drag-handle"
type="button"
onPointerDown={(event) => itemReorder.startDrag(event, counter.id)}
aria-label={`${textContent.reorderTitle || "Déplacer"} ${counter.label}`}
title={textContent.reorderTitle || "Déplacer"}
>
<Icon name="drag" />
</button>
<div>
<strong>{counter.value}</strong>
<span>{counter.label}</span>
@ -50,7 +83,8 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
</button>
</div>
</article>
))}
);
})}
</div>
</>
);

47
website/src/features/toolboxes/modules/ImagesModule.jsx
View file

@ -1,7 +1,7 @@
// Rôle : fournit l'outil images avec import, collage, libellés et annotation rapide.
import { useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
export function ImagesModule({ toolboxId, moduleId, context, editing }) {
const data = context.getModuleData(toolboxId, moduleId, { images: [] });
@ -9,24 +9,23 @@ export function ImagesModule({ toolboxId, moduleId, context, editing }) {
const [dragOver, setDragOver] = useState(false);
const pastePlaceholder = textContent.pastePlaceholder || "Coller une image ici";
const {
draggingId: draggingImageId,
dropTarget,
startDrag
} = usePointerReorder({
targetSelector: "[data-image-id]",
getTargetId: (target) => target.dataset.imageId,
canDropOn: (target) => target.dataset.imageModuleId === moduleId,
getPlacement: (event, target) => {
const rect = target.getBoundingClientRect();
return event.clientX > rect.left + rect.width / 2 ? "after" : "before";
itemReorder,
getItemProps,
isItemDragging,
isItemDropTarget,
getDropPlacement
} = useGroupedReorder({
namespace: "images",
items: data.images,
getItemId: (image) => image.id,
getParentId: () => moduleId,
orientation: "horizontal",
onItemMove: (operation) => {
context.setModuleData(toolboxId, moduleId, {
images: moveItem(data.images, operation.sourceId, operation.targetId, operation.placement)
});
},
onMove: (draggingId, targetId, placement) => {
const nextImages = data.images.filter((image) => image.id !== draggingId);
const targetIndex = nextImages.findIndex((image) => image.id === targetId);
if (targetIndex === -1) return;
nextImages.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, data.images.find((image) => image.id === draggingId));
context.setModuleData(toolboxId, moduleId, { images: nextImages.filter(Boolean) });
}
hierarchy: { enabled: true, stickyParents: true }
});
async function addFiles(files) {
@ -90,20 +89,18 @@ export function ImagesModule({ toolboxId, moduleId, context, editing }) {
)}
<div className="images">
{data.images.map((image) => {
const isDragging = draggingImageId === image.id;
const isDropTarget = dropTarget.id === image.id;
const className = [
isDragging ? "is-dragging" : "",
isDropTarget ? "is-drop-target" : "",
isDropTarget && dropTarget.placement === "after" ? "drop-after" : ""
isItemDragging(image.id) ? "is-dragging" : "",
isItemDropTarget(image.id) ? "is-drop-target" : "",
getDropPlacement("item", image.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<figure key={image.id} className={className} data-image-id={image.id} data-image-module-id={moduleId}>
<figure key={image.id} className={className} {...getItemProps({ itemId: image.id, parentId: moduleId })}>
<button
className="image-drag-handle"
type="button"
onPointerDown={(event) => startDrag(event, image.id)}
onPointerDown={(event) => itemReorder.startDrag(event, image.id)}
aria-label={textContent.reorderAriaLabel || "Déplacer l'image"}
title={textContent.reorderTitle || "Déplacer"}
>

39
website/src/features/toolboxes/modules/LinksModule.jsx
View file

@ -1,6 +1,7 @@
// Rôle : fournit l'outil liens avec ajout manuel et import texte.
import { useCallback, useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
import { TextImportModal } from "./TextImportModal.jsx";
import { parseColonImportLines } from "./textImport.js";
@ -13,6 +14,20 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
const [importOpen, setImportOpen] = useState(false);
const [copiedId, setCopiedId] = useState("");
const closeImportModal = useCallback(() => setImportOpen(false), []);
const {
itemReorder,
getItemProps,
isItemDragging,
isItemDropTarget,
getDropPlacement
} = useGroupedReorder({
namespace: "links",
items: data.links,
getItemId: (link) => link.id,
getParentId: () => moduleId,
onItemMove: (operation) => save(moveItem(data.links, operation.sourceId, operation.targetId, operation.placement)),
hierarchy: { enabled: true, stickyParents: true }
});
function save(links) {
context.setModuleData(toolboxId, moduleId, { links });
@ -88,8 +103,25 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
/>
)}
<ul className="links-list">
{data.links.map((link) => (
<li className="link-item" key={link.id}>
{data.links.map((link) => {
const className = [
"link-item",
isItemDragging(link.id) ? "is-dragging" : "",
isItemDropTarget(link.id) ? "is-drop-target" : "",
getDropPlacement("item", link.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<li className={className} key={link.id} {...getItemProps({ itemId: link.id, parentId: moduleId })}>
<button
className="link-drag-handle"
type="button"
onPointerDown={(event) => itemReorder.startDrag(event, link.id)}
aria-label={`${textContent.reorderTitle || "Déplacer"} ${link.title || link.url}`}
title={textContent.reorderTitle || "Déplacer"}
>
<Icon name="drag" />
</button>
<a href={link.url} target="_blank" rel="noreferrer" title={link.url}>
<strong>{link.title || context.hostnameFromUrl(link.url)}</strong>
<span>{link.url}</span>
@ -103,7 +135,8 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
</button>
</div>
</li>
))}
);
})}
</ul>
</>
);

356
website/src/features/toolboxes/modules/TaskPlannerModule.jsx
View file

@ -2,11 +2,9 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { InlineNotice } from "../../../components/AppOverlays.jsx";
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
import { applyGroupedReorderOperation, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
const TASK_TYPES = ["daily", "weekly", "unique"];
const UNCATEGORIZED_DROP_ID = "task-planner:uncategorized";
const CATEGORY_BOUNDARY_DROP_PREFIX = "task-planner:category-boundary";
const WEEK_DAYS = [
{ value: 1, label: "Lundi" },
{ value: 2, label: "Mardi" },
@ -78,56 +76,12 @@ function moveTask(tasks, fromTaskId, toTaskId, placement = "before") {
return nextTasks;
}
function moveTaskGroup(tasks, fromTaskIds, toTaskId, placement = "before") {
const movingIds = new Set(fromTaskIds);
if (!movingIds.size || movingIds.has(toTaskId)) return tasks;
const targetIndex = tasks.findIndex((task) => task.id === toTaskId);
if (targetIndex < 0) return tasks;
const movingTasks = tasks.filter((task) => movingIds.has(task.id));
const remainingTasks = tasks.filter((task) => !movingIds.has(task.id));
const nextTargetIndex = remainingTasks.findIndex((task) => task.id === toTaskId);
remainingTasks.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, ...movingTasks);
return remainingTasks;
}
function getBoundaryTaskId(tasks, taskIds, placement) {
const ids = new Set(taskIds);
const orderedTasks = tasks.filter((task) => ids.has(task.id));
return placement === "after" ? orderedTasks.at(-1)?.id || "" : orderedTasks[0]?.id || "";
}
function getRootCategories(tasks, parentMap) {
const categories = [];
tasks.forEach((task) => {
if (parentMap.get(task.id) || !getTaskCategory(task) || categories.includes(task.category)) return;
categories.push(task.category);
});
return categories;
}
function getCompleteCategoryOrder(categoryOrder, categories) {
return [
...categoryOrder.filter((category) => categories.includes(category)),
...categories.filter((category) => !categoryOrder.includes(category))
];
}
function moveCategory(categoryOrder, categories, fromCategory, toCategory, placement = "before") {
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories);
const index = nextOrder.indexOf(fromCategory);
const targetIndex = nextOrder.indexOf(toCategory);
if (index < 0 || targetIndex < 0 || fromCategory === toCategory) return nextOrder;
const [moved] = nextOrder.splice(index, 1);
const nextTargetIndex = nextOrder.indexOf(toCategory);
nextOrder.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, moved);
return nextOrder;
}
function moveCategoryToStart(categoryOrder, categories, fromCategory) {
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
return [fromCategory, ...nextOrder.filter(Boolean)];
}
function getTaskTitle(tasks, taskId) {
return tasks.find((task) => task.id === taskId)?.title || "Tâche supprimée";
}
@ -258,57 +212,12 @@ function getTaskCategoryGroups(tasks, parentMap, parentId, categoryOrder) {
};
}
function getCategorySectionId(parentId, category) {
return `category\n${parentId || ""}\n${category}`;
}
function parseCategorySectionId(id) {
const parts = String(id || "").split("\n");
if (parts[0] !== "category") return { parentId: "", category: "" };
return {
parentId: parts[1] || "",
category: parts.slice(2).join("\n")
};
}
function isCategorySectionId(id) {
return String(id || "").startsWith("category\n");
}
function isUncategorizedDropId(id) {
return id === UNCATEGORIZED_DROP_ID;
}
function getCategoryBoundaryDropId(parentId, category, placement) {
return `${CATEGORY_BOUNDARY_DROP_PREFIX}\n${parentId || ""}\n${category}\n${placement}`;
}
function parseCategoryBoundaryDropId(id) {
const parts = String(id || "").split("\n");
if (parts[0] !== CATEGORY_BOUNDARY_DROP_PREFIX) return { parentId: "", category: "", placement: "" };
return {
parentId: parts[1] || "",
category: parts[2] || "",
placement: parts[3] === "after" ? "after" : "before"
};
}
function isCategoryBoundaryDropId(id) {
return String(id || "").startsWith(`${CATEGORY_BOUNDARY_DROP_PREFIX}\n`);
}
function getRootTaskIdsForCategory(tasks, parentMap, category) {
return tasks
.filter((task) => !parentMap.get(task.id) && getTaskCategory(task) === category)
.map((task) => task.id);
}
function getRootTaskIds(tasks, parentMap) {
return tasks
.filter((task) => !parentMap.get(task.id))
.map((task) => task.id);
}
export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
const data = context.normalizeTaskPlannerData(context.getModuleData(toolboxId, moduleId, { tasks: [] }));
const textContent = context.moduleText?.taskPlanner || {};
@ -322,32 +231,40 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
const prerequisiteNoticeTimeouts = useRef(new Map());
const parentMap = useMemo(() => getTaskParentMap(data.tasks, data.relations), [data.tasks, data.relations]);
const {
draggingId,
dropTarget,
startDrag
} = usePointerReorder({
targetSelector: ".task-planner-item, .task-planner-category-section, .task-planner-uncategorized-drop-zone, .task-planner-category-boundary-drop-zone",
getTargetId: (target) => target.dataset.dropId || target.dataset.taskId || getCategorySectionId(target.dataset.parentId || "", target.dataset.category || ""),
canDropOn: (target, draggingTaskId) => {
const draggingTask = data.tasks.find((task) => task.id === draggingTaskId);
if (!draggingTask) return false;
const draggingParentId = parentMap.get(draggingTaskId) || "";
const draggingCategory = getTaskCategoryDataset(draggingTask, data.tasks, parentMap);
if (target.classList.contains("task-planner-category-boundary-drop-zone")) {
const boundary = parseCategoryBoundaryDropId(target.dataset.dropId);
return !draggingParentId && !boundary.parentId && Boolean(boundary.category);
itemReorder,
groupReorder,
getItemProps,
getGroupProps,
getGroupBoundaryProps,
isItemDragging,
isItemDropTarget,
isGroupDragging,
isGroupDropTarget,
isBoundaryDropTarget,
getDropPlacement,
shouldShowGroupBoundaries
} = useGroupedReorder({
namespace: "task-planner",
items: data.tasks,
getItemId: (task) => task.id,
getParentId: (task) => parentMap.get(task.id) || "",
getItemGroup: (task) => getTaskCategoryDataset(task, data.tasks, parentMap),
getEffectiveGroup: (task) => getTaskCategoryDataset(task, data.tasks, parentMap),
reorderFeatures: {
item: {
groupChange: true,
boundaryDrop: true,
rootOnly: true
},
group: {
reorder: true,
boundaryDrop: true,
itemDrop: true,
rootOnly: true
}
if (target.classList.contains("task-planner-uncategorized-drop-zone")) {
return !draggingParentId && Boolean(draggingCategory);
}
if (target.classList.contains("task-planner-category-section")) {
return !draggingParentId && !target.dataset.parentId && Boolean(target.dataset.category) && target.dataset.category !== draggingCategory;
}
if (target.dataset.parentId !== draggingParentId) return false;
if (target.dataset.category === draggingCategory) return true;
return !draggingParentId;
},
onMove: (fromTaskId, toId, placement) => {
onItemMove: (operation) => {
const fromTaskId = operation.sourceId;
const fromTask = data.tasks.find((task) => task.id === fromTaskId);
if (!fromTask) return;
function setRootTaskCategory(tasks, category) {
@ -359,7 +276,7 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
return nextTask;
});
}
function moveToCategory(category) {
function moveToCategory(category, placement = operation.placement) {
const nextTasks = setRootTaskCategory(data.tasks, category);
const targetIds = category
? getRootTaskIdsForCategory(data.tasks, parentMap, category).filter((taskId) => taskId !== fromTaskId)
@ -367,108 +284,59 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement);
save({ ...data, tasks: boundaryTaskId ? moveTask(nextTasks, fromTaskId, boundaryTaskId, placement) : nextTasks });
}
if (isUncategorizedDropId(toId)) {
moveToCategory("");
return;
}
if (isCategoryBoundaryDropId(toId)) {
const boundary = parseCategoryBoundaryDropId(toId);
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, boundary.category);
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, boundary.placement);
if (operation.targetType === "boundary") {
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, operation.targetGroup);
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, operation.placement);
if (!boundaryTaskId) return;
const sourceCategory = getTaskCategoryDataset(fromTask, data.tasks, parentMap);
const tasks = sourceCategory ? setRootTaskCategory(data.tasks, "") : data.tasks;
save({ ...data, tasks: moveTask(tasks, fromTaskId, boundaryTaskId, boundary.placement) });
save({ ...data, tasks: moveTask(tasks, fromTaskId, boundaryTaskId, operation.placement) });
return;
}
if (isCategorySectionId(toId)) {
const targetCategory = parseCategorySectionId(toId).category;
if (operation.targetType === "group") {
const targetCategory = operation.targetGroup;
const sourceCategory = getTaskCategoryDataset(fromTask, data.tasks, parentMap);
if (!sourceCategory) {
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, targetCategory);
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement);
if (boundaryTaskId) save({ ...data, tasks: moveTask(data.tasks, fromTaskId, boundaryTaskId, placement) });
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, operation.placement);
if (boundaryTaskId) save({ ...data, tasks: moveTask(data.tasks, fromTaskId, boundaryTaskId, operation.placement) });
return;
}
moveToCategory(targetCategory);
return;
}
const targetTask = data.tasks.find((task) => task.id === toId);
const targetTask = data.tasks.find((task) => task.id === operation.targetId);
const targetCategory = targetTask ? getTaskCategoryDataset(targetTask, data.tasks, parentMap) : "";
const sourceCategory = getTaskCategoryDataset(fromTask, data.tasks, parentMap);
const shouldChangeRootCategory = !parentMap.get(fromTaskId) && targetTask && !parentMap.get(toId) && targetCategory !== sourceCategory;
const shouldChangeRootCategory = !parentMap.get(fromTaskId) && targetTask && !parentMap.get(operation.targetId) && targetCategory !== sourceCategory;
const tasks = shouldChangeRootCategory ? setRootTaskCategory(data.tasks, targetCategory) : data.tasks;
save({ ...data, tasks: moveTask(tasks, fromTaskId, toId, placement) });
}
});
const {
draggingId: draggingCategoryId,
dropTarget: categoryDropTarget,
startDrag: startCategoryDrag
} = usePointerReorder({
targetSelector: ".task-planner-category-section, .task-planner-item, .task-planner-uncategorized-drop-zone, .task-planner-category-boundary-drop-zone",
getTargetId: (target) => target.dataset.dropId || target.dataset.taskId || getCategorySectionId(target.dataset.parentId || "", target.dataset.category || ""),
canDropOn: (target, draggingIdValue) => {
const draggingCategory = parseCategorySectionId(draggingIdValue);
if (!draggingCategory.category) return false;
if (target.classList.contains("task-planner-uncategorized-drop-zone")) return !draggingCategory.parentId;
if (target.classList.contains("task-planner-category-boundary-drop-zone")) {
const boundary = parseCategoryBoundaryDropId(target.dataset.dropId);
return boundary.parentId === draggingCategory.parentId && boundary.category && boundary.category !== draggingCategory.category;
}
if (target.dataset.parentId !== draggingCategory.parentId) return false;
if (target.classList.contains("task-planner-category-section")) return Boolean(target.dataset.category);
return !target.dataset.category;
save({ ...data, tasks: moveTask(tasks, fromTaskId, operation.targetId, operation.placement) });
},
onMove: (fromId, toId, placement) => {
const fromCategory = parseCategorySectionId(fromId).category;
const movingIds = getRootTaskIdsForCategory(data.tasks, parentMap, fromCategory);
if (!movingIds.length) return;
const rootCategories = getRootCategories(data.tasks, parentMap);
if (isUncategorizedDropId(toId)) {
const targetIds = data.tasks
.filter((task) => !parentMap.get(task.id) && !getTaskCategory(task) && !movingIds.includes(task.id))
.map((task) => task.id);
const rootIds = getRootTaskIds(data.tasks, parentMap).filter((taskId) => !movingIds.includes(taskId));
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement) || getBoundaryTaskId(data.tasks, rootIds, "before");
if (boundaryTaskId) {
save({
...data,
tasks: moveTaskGroup(data.tasks, movingIds, boundaryTaskId, "before"),
categoryOrder: moveCategoryToStart(data.categoryOrder, rootCategories, fromCategory)
});
}
return;
}
if (isCategoryBoundaryDropId(toId)) {
const boundary = parseCategoryBoundaryDropId(toId);
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, boundary.category);
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, boundary.placement);
if (boundaryTaskId) {
save({
...data,
tasks: moveTaskGroup(data.tasks, movingIds, boundaryTaskId, boundary.placement),
categoryOrder: moveCategory(data.categoryOrder, rootCategories, fromCategory, boundary.category, boundary.placement)
});
}
return;
}
if (isCategorySectionId(toId)) {
const toCategory = parseCategorySectionId(toId).category;
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, toCategory);
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement);
if (boundaryTaskId) {
save({
...data,
tasks: moveTaskGroup(data.tasks, movingIds, boundaryTaskId, placement),
categoryOrder: moveCategory(data.categoryOrder, rootCategories, fromCategory, toCategory, placement)
});
}
return;
}
save({ ...data, tasks: moveTaskGroup(data.tasks, movingIds, toId, placement) });
}
onGroupMove: (operation) => {
save(applyGroupedReorderOperation(data, {
operation,
itemsKey: "tasks",
groupOrderKey: "categoryOrder",
getItemGroup: (task) => parentMap.get(task.id) ? "" : getTaskCategory(task),
setItemGroup: (task) => task
}));
},
hierarchy: { enabled: true, stickyParents: true }
});
const reorder = {
itemReorder,
groupReorder,
getItemProps,
getGroupProps,
getGroupBoundaryProps,
isItemDragging,
isItemDropTarget,
isGroupDragging,
isGroupDropTarget,
isBoundaryDropTarget,
getDropPlacement,
shouldShowGroupBoundaries
};
function save(nextData) {
context.setModuleData(toolboxId, moduleId, nextData, "taskPlanner");
@ -684,16 +552,11 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
parentMap={parentMap}
tasks={data.tasks}
data={data}
draggingId={draggingId}
dropTarget={dropTarget}
draggingCategoryId={draggingCategoryId}
categoryDropTarget={categoryDropTarget}
reorder={reorder}
textContent={textContent}
openDescriptions={openDescriptions}
openTaskSettings={openTaskSettings}
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
onDragStart={startDrag}
onCategoryDragStart={startCategoryDrag}
onToggleDescription={(taskId) => toggleSet(setOpenDescriptions, taskId)}
onToggleSettings={(taskId) => toggleSet(setOpenTaskSettings, taskId)}
onPrerequisiteNotice={showPrerequisiteNotice}
@ -718,16 +581,11 @@ function TaskPlannerBranch({
parentMap,
tasks,
data,
draggingId,
dropTarget,
draggingCategoryId,
categoryDropTarget,
reorder,
textContent,
openDescriptions,
openTaskSettings,
prerequisiteNoticeTaskIds,
onDragStart,
onCategoryDragStart,
onToggleDescription,
onToggleSettings,
onPrerequisiteNotice,
@ -744,16 +602,7 @@ function TaskPlannerBranch({
const children = [...groupedTasks.uncategorized, ...groupedTasks.categories.flatMap((group) => group.tasks)].filter((task) => !visited.has(task.id));
if (!children.length) return null;
const nextVisited = new Set([...visited, ...children.map((task) => task.id)]);
const draggingTask = draggingId ? getTaskById(tasks, draggingId) : null;
const draggingCategory = parseCategorySectionId(draggingCategoryId);
const showUncategorizedDropZone = !parentId && (
(draggingTask && !parentMap.get(draggingTask.id) && Boolean(getTaskCategoryDataset(draggingTask, tasks, parentMap)))
|| Boolean(draggingCategory.category && !draggingCategory.parentId)
);
const showCategoryBoundaryDropZones = !parentId && (
(draggingTask && !parentMap.get(draggingTask.id))
|| Boolean(draggingCategory.category && !draggingCategory.parentId)
);
const showCategoryBoundaryDropZones = !parentId && reorder.shouldShowGroupBoundaries({ parentId });
function hasVisibleDescendants(taskId, seen = new Set()) {
if (seen.has(taskId)) return false;
@ -769,16 +618,11 @@ function TaskPlannerBranch({
parentMap={parentMap}
tasks={tasks}
data={data}
draggingId={draggingId}
dropTarget={dropTarget}
draggingCategoryId={draggingCategoryId}
categoryDropTarget={categoryDropTarget}
reorder={reorder}
textContent={textContent}
openDescriptions={openDescriptions}
openTaskSettings={openTaskSettings}
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
onDragStart={onDragStart}
onCategoryDragStart={onCategoryDragStart}
onToggleDescription={onToggleDescription}
onToggleSettings={onToggleSettings}
onPrerequisiteNotice={onPrerequisiteNotice}
@ -808,14 +652,11 @@ function TaskPlannerBranch({
data={data}
parentMap={parentMap}
parentId={parentId}
draggingId={draggingId}
dropTarget={dropTarget}
categoryDropTarget={categoryDropTarget}
reorder={reorder}
textContent={textContent}
descriptionOpen={openDescriptions.has(task.id)}
settingsOpen={openTaskSettings.has(task.id)}
prerequisiteNoticeVisible={prerequisiteNoticeTaskIds.has(task.id)}
onDragStart={onDragStart}
onToggleDescription={() => onToggleDescription(task.id)}
onToggleSettings={() => onToggleSettings(task.id)}
onPrerequisiteNotice={onPrerequisiteNotice}
@ -837,41 +678,38 @@ function TaskPlannerBranch({
if (data.hideCompleted && isTaskTreeComplete(groupTasks.map((task) => task.id), tasks, parentMap)) return null;
const groupCount = countTaskTree(groupTasks.map((task) => task.id), tasks, parentMap);
const groupCompletedCount = countCompletedTaskTree(groupTasks.map((task) => task.id), tasks, parentMap);
const categoryId = getCategorySectionId(parentId, group.category);
const beforeDropId = getCategoryBoundaryDropId(parentId, group.category, "before");
const afterDropId = getCategoryBoundaryDropId(parentId, group.category, "after");
const isCollapsed = data.collapsedCategories.includes(group.category);
const sectionClassName = [
"task-planner-category-section",
groupCompletedCount === groupCount ? "is-complete" : "",
isCollapsed ? "is-collapsed" : "",
draggingCategoryId === categoryId ? "is-dragging" : "",
categoryDropTarget.id === categoryId || dropTarget.id === categoryId ? "is-drop-target" : "",
(categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after") || (dropTarget.id === categoryId && dropTarget.placement === "after") ? "drop-after" : ""
reorder.isGroupDragging(group.category, parentId) ? "is-dragging" : "",
reorder.isGroupDropTarget(group.category, parentId) ? "is-drop-target" : "",
reorder.getDropPlacement("group", group.category, parentId) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
const beforeDropZone = showCategoryBoundaryDropZones ? (
<li
className={`task-planner-category-boundary-drop-zone ${dropTarget.id === beforeDropId || categoryDropTarget.id === beforeDropId ? "is-drop-target" : ""}`}
className={`task-planner-category-boundary-drop-zone ${reorder.isBoundaryDropTarget({ groupId: group.category, parentId, placement: "before" }) ? "is-drop-target" : ""}`}
key={`${parentId || "root"}:${group.category}:before-drop`}
data-drop-id={beforeDropId}
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "before" })}
/>
) : null;
const afterDropZone = showCategoryBoundaryDropZones ? (
<li
className={`task-planner-category-boundary-drop-zone ${dropTarget.id === afterDropId || categoryDropTarget.id === afterDropId ? "is-drop-target" : ""}`}
className={`task-planner-category-boundary-drop-zone ${reorder.isBoundaryDropTarget({ groupId: group.category, parentId, placement: "after" }) ? "is-drop-target" : ""}`}
key={`${parentId || "root"}:${group.category}:after-drop`}
data-drop-id={afterDropId}
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "after" })}
/>
) : null;
return [
beforeDropZone,
<li className={sectionClassName} key={`${parentId || "root"}:${group.category}`} data-parent-id={parentId} data-category={group.category}>
<li className={sectionClassName} key={`${parentId || "root"}:${group.category}`} {...reorder.getGroupProps({ groupId: group.category, parentId })}>
<div className="checklist-section-header task-planner-category-header">
<div className="task-planner-category-title">
<button
className="task-planner-category-drag-handle"
type="button"
onPointerDown={(event) => onCategoryDragStart(event, categoryId)}
onPointerDown={(event) => reorder.groupReorder.startDrag(event, { groupId: group.category, parentId })}
aria-label={`${textContent.categoryReorderTitle || "Déplacer la catégorie"} ${group.category}`}
title={textContent.categoryReorderTitle || "Déplacer la catégorie"}
>
@ -907,18 +745,7 @@ function TaskPlannerBranch({
if (entry.type === "task") return visited.has(entry.task.id) ? null : renderTask(entry.task);
return renderCategory(entry.group);
}).filter(Boolean);
if (!showUncategorizedDropZone) return entries;
const dropZoneClassName = [
"task-planner-uncategorized-drop-zone",
dropTarget.id === UNCATEGORIZED_DROP_ID ? "is-drop-target" : "",
dropTarget.id === UNCATEGORIZED_DROP_ID && dropTarget.placement === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return [
<li className={dropZoneClassName} key={UNCATEGORIZED_DROP_ID} data-drop-id={UNCATEGORIZED_DROP_ID}>
{textContent.uncategorizedDropTitle || "Sans catégorie"}
</li>,
...entries
];
return entries;
}
function TaskPlannerItem({
@ -927,14 +754,11 @@ function TaskPlannerItem({
data,
parentMap,
parentId,
draggingId,
dropTarget,
categoryDropTarget,
reorder,
textContent,
descriptionOpen,
settingsOpen,
prerequisiteNoticeVisible,
onDragStart,
onToggleDescription,
onToggleSettings,
onPrerequisiteNotice,
@ -961,9 +785,9 @@ function TaskPlannerItem({
"task-planner-item",
task.checked ? "is-complete" : "",
missingPrerequisites.length ? "has-missing-prerequisite" : "",
draggingId === task.id ? "is-dragging" : "",
dropTarget.id === task.id || categoryDropTarget.id === task.id ? "is-drop-target" : "",
(dropTarget.id === task.id && dropTarget.placement === "after") || (categoryDropTarget.id === task.id && categoryDropTarget.placement === "after") ? "drop-after" : ""
reorder.isItemDragging(task.id) ? "is-dragging" : "",
reorder.isItemDropTarget(task.id) ? "is-drop-target" : "",
reorder.getDropPlacement("item", task.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
function updateChecked(event) {
@ -1005,12 +829,12 @@ function TaskPlannerItem({
}
return (
<li className={className} data-task-id={task.id} data-parent-id={parentId} data-category={getTaskCategoryDataset(task, tasks, parentMap)}>
<li className={className} {...reorder.getItemProps({ itemId: task.id, groupId: getTaskCategoryDataset(task, tasks, parentMap), parentId })}>
<div className="task-planner-line">
<button
className="task-planner-drag-handle"
type="button"
onPointerDown={(event) => onDragStart(event, task.id)}
onPointerDown={(event) => reorder.itemReorder.startDrag(event, task.id)}
aria-label={`${textContent.reorderTitle || "Déplacer"} ${task.title}`}
title={textContent.reorderTitle || "Déplacer"}
>

42
website/src/features/toolboxes/modules/TimerModule.jsx
View file

@ -2,6 +2,7 @@
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { Tabs } from "../../../components/Tabs.jsx";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
import {
formatDuration,
formatDurationWithCentiseconds,
@ -93,6 +94,18 @@ export function TimerModule({ toolboxId, moduleId, context }) {
if (!data.sortResults) return countdowns;
return [...countdowns].sort((a, b) => (a.targetMs || Number.POSITIVE_INFINITY) - (b.targetMs || Number.POSITIVE_INFINITY));
}, [data.countdowns, data.sortResults, nowMs]);
const countdownReorder = useGroupedReorder({
namespace: "timer-countdowns",
items: data.countdowns,
getItemId: (countdown) => countdown.id,
getParentId: () => moduleId,
canMoveItem: () => !data.sortResults,
onItemMove: (operation) => {
if (data.sortResults) return;
save({ ...data, countdowns: moveItem(data.countdowns, operation.sourceId, operation.targetId, operation.placement) });
},
hierarchy: { enabled: true, stickyParents: true }
});
function save(nextData) {
context.setModuleData(toolboxId, moduleId, nextData);
@ -300,7 +313,7 @@ export function TimerModule({ toolboxId, moduleId, context }) {
{activeTab === "stopwatch" ? (
<StopwatchLapList laps={data.stopwatch.laps} textContent={textContent} onRename={renameLap} onDelete={deleteLap} />
) : (
<CountdownList countdowns={visibleCountdowns} nowMs={nowMs} textContent={textContent} onRename={renameCountdown} onAlertModeChange={setCountdownAlertMode} onReset={resetCountdown} onDelete={deleteCountdown} />
<CountdownList countdowns={visibleCountdowns} nowMs={nowMs} textContent={textContent} reorder={countdownReorder} reorderEnabled={!data.sortResults} parentId={moduleId} onRename={renameCountdown} onAlertModeChange={setCountdownAlertMode} onReset={resetCountdown} onDelete={deleteCountdown} />
)}
</div>
</section>
@ -471,7 +484,7 @@ function StopwatchLapList({ laps, textContent, onRename, onDelete }) {
);
}
function CountdownList({ countdowns, nowMs, textContent, onRename, onAlertModeChange, onReset, onDelete }) {
function CountdownList({ countdowns, nowMs, textContent, reorder, reorderEnabled, parentId, onRename, onAlertModeChange, onReset, onDelete }) {
const [editingId, setEditingId] = useState("");
if (!countdowns.length) return <p className="muted">{textContent.emptyCountdowns || "Aucun compte à rebours configuré."}</p>;
return (
@ -482,9 +495,30 @@ function CountdownList({ countdowns, nowMs, textContent, onRename, onAlertModeCh
const canReset = countdown.type === "duration"
|| countdown.type === "interval"
|| (countdown.type === "daily_time" && expired);
const className = [
"timer-list-item",
expired ? "is-expired" : "",
editingId === countdown.id ? "is-editing" : "",
reorderEnabled && reorder.isItemDragging(countdown.id) ? "is-dragging" : "",
reorderEnabled && reorder.isItemDropTarget(countdown.id) ? "is-drop-target" : "",
reorderEnabled && reorder.getDropPlacement("item", countdown.id) === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
const reorderProps = reorderEnabled ? reorder.getItemProps({ itemId: countdown.id, parentId }) : {};
return (
<li key={countdown.id} className={`timer-list-item ${expired ? "is-expired" : ""} ${editingId === countdown.id ? "is-editing" : ""}`}>
<div className={`tool-split-entry timer-entry has-single-action ${editingId !== countdown.id ? "has-inline-controls" : ""} ${canReset && editingId !== countdown.id ? "has-inline-reset" : ""}`}>
<li key={countdown.id} className={className} {...reorderProps}>
<div className={`tool-split-entry timer-entry has-single-action ${reorderEnabled ? "has-drag-handle" : ""} ${editingId !== countdown.id ? "has-inline-controls" : ""} ${canReset && editingId !== countdown.id ? "has-inline-reset" : ""}`}>
{reorderEnabled && (
<button
className="timer-drag-handle"
type="button"
onPointerDown={(event) => reorder.itemReorder.startDrag(event, countdown.id)}
aria-label={`${textContent.reorderTitle || "Déplacer"} ${countdown.label}`}
title={textContent.reorderTitle || "Déplacer"}
>
<Icon name="drag" />
</button>
)}
{editingId === countdown.id ? (
<EditableTimerLabel
value={countdown.label}

45
website/src/features/toolboxes/modules/index.jsx
View file

@ -3,7 +3,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { CompactDropdown } from "../../../components/CompactDropdown.jsx";
import { Icon } from "../../../components/Icon.jsx";
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
import { useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
import { lockBodyScroll } from "../../../utils/bodyScrollLock.js";
import { CalculatorModule } from "./CalculatorModule.jsx";
import { ChecklistModule } from "./ChecklistModule.jsx";
@ -180,14 +180,18 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
const moduleElementsRef = useRef(new Map());
const moduleIdSignature = useMemo(() => toolbox.modules.map((module) => module.id).join("|"), [toolbox.modules]);
const {
draggingId: draggingModuleId,
dropTarget,
startDrag: startModuleDrag
} = usePointerReorder({
targetSelector: ".module",
getTargetId: (target) => target.dataset.moduleId,
canDropOn: (target) => target.dataset.toolboxId === toolbox.id,
onMove
itemReorder,
getItemProps,
isItemDragging,
isItemDropTarget,
getDropPlacement
} = useGroupedReorder({
namespace: "toolbox-modules",
items: toolbox.modules,
getItemId: (module) => module.id,
getParentId: () => toolbox.id,
onItemMove: (operation) => onMove(operation.sourceId, operation.targetId, operation.placement),
hierarchy: { enabled: true, stickyParents: true }
});
useEffect(() => {
@ -246,9 +250,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
toolbox={toolbox}
module={module}
context={context}
draggingModuleId={draggingModuleId}
dropTarget={dropTarget}
onDragStart={startModuleDrag}
reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
onRename={onRename}
onUpdateModule={onUpdateModule}
onDelete={onDelete}
@ -273,9 +275,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
toolbox={toolbox}
module={module}
context={context}
draggingModuleId={draggingModuleId}
dropTarget={dropTarget}
onDragStart={startModuleDrag}
reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
onRename={onRename}
onUpdateModule={onUpdateModule}
onDelete={onDelete}
@ -289,27 +289,24 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
);
}
function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, onDragStart, onRename, onUpdateModule, onDelete, registerModuleElement }) {
function ModuleShell({ toolbox, module, context, reorder, onRename, onUpdateModule, onDelete, registerModuleElement }) {
const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
const Component = definition.Component;
const label = definition.label || module.type;
const [editing, setEditing] = useState(false);
const scrollable = definition.scrollable && module.scrollable === true;
const isDragging = draggingModuleId === module.id;
const isDropTarget = dropTarget.id === module.id;
const className = [
"module",
isDragging ? "is-dragging" : "",
isDropTarget ? "is-drop-target" : "",
isDropTarget && dropTarget.placement === "after" ? "drop-after" : "",
reorder.isItemDragging(module.id) ? "is-dragging" : "",
reorder.isItemDropTarget(module.id) ? "is-drop-target" : "",
reorder.getDropPlacement("item", module.id) === "after" ? "drop-after" : "",
scrollable ? "is-scrollable" : ""
].filter(Boolean).join(" ");
return (
<article
className={className}
data-toolbox-id={toolbox.id}
data-module-id={module.id}
{...reorder.getItemProps({ itemId: module.id, parentId: toolbox.id })}
ref={(element) => registerModuleElement?.(module.id, element)}
>
<header>
@ -317,7 +314,7 @@ function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, o
<button
className="module-drag-handle"
type="button"
onPointerDown={(event) => onDragStart(event, module.id)}
onPointerDown={(event) => reorder.itemReorder.startDrag(event, module.id)}
aria-label={`Déplacer ${module.title || label}`}
title="Déplacer"
>

590
website/src/hooks/useGroupedReorder.js Normal file
View file

@ -0,0 +1,590 @@
// Rôle : fournit la couche applicative de réorganisation pour items, groupes,
// catégories, boundaries, parent/enfant et orientations verticale/horizontale.
// S'appuie sur usePointerReorder pour le suivi bas niveau du pointeur.
import { useMemo } from "react";
import { usePointerReorder } from "./usePointerReorder.js";
const TARGET_ITEM = "item";
const TARGET_GROUP = "group";
const TARGET_BOUNDARY = "boundary";
const TARGET_UNGROUPED = "ungrouped";
const DEFAULT_HIERARCHY = { enabled: false, stickyParents: false };
const DEFAULT_CAN_MOVE = () => true;
function cleanText(value) {
return String(value || "");
}
function encodeTarget(target) {
return JSON.stringify({
kind: cleanText(target.kind),
itemId: cleanText(target.itemId),
groupId: cleanText(target.groupId),
parentId: cleanText(target.parentId),
placement: cleanText(target.placement)
});
}
function parseTarget(value) {
try {
const target = JSON.parse(String(value || "{}"));
return {
kind: cleanText(target.kind),
itemId: cleanText(target.itemId),
groupId: cleanText(target.groupId),
parentId: cleanText(target.parentId),
placement: cleanText(target.placement)
};
} catch {
return { kind: "", itemId: "", groupId: "", parentId: "", placement: "" };
}
}
function getElementTargetId(target) {
return encodeTarget({
kind: target.dataset.reorderTarget,
itemId: target.dataset.reorderItemId,
groupId: target.dataset.reorderGroupId,
parentId: target.dataset.reorderParentId,
placement: target.dataset.reorderPlacement
});
}
function getPointerPlacement(event, target, orientation = "vertical") {
const placement = target.dataset.reorderPlacement;
if (placement === "before" || placement === "after") return placement;
const rect = target.getBoundingClientRect();
if (orientation === "horizontal") return event.clientX > rect.left + rect.width / 2 ? "after" : "before";
return event.clientY > rect.top + rect.height / 2 ? "after" : "before";
}
function getConfiguredPlacement(target) {
const placement = target.dataset.reorderPlacement;
return placement === "after" ? "after" : "before";
}
function targetId(target) {
if (target.kind === TARGET_ITEM) return target.itemId;
if (target.kind === TARGET_GROUP || target.kind === TARGET_BOUNDARY) return target.groupId;
return "";
}
function buildOperation(kind, sourceId, targetIdValue, placement) {
const source = parseTarget(sourceId);
const target = parseTarget(targetIdValue);
return {
type: kind,
sourceId: kind === TARGET_ITEM ? source.itemId : source.groupId,
targetId: targetId(target),
targetType: target.kind,
placement: target.placement || placement,
sourceGroup: source.groupId,
targetGroup: target.kind === TARGET_UNGROUPED ? "" : target.groupId,
sourceParentId: source.parentId,
targetParentId: target.parentId
};
}
function sameParent(target, parentId = "") {
return target.parentId === cleanText(parentId);
}
function canMoveWithinHierarchy(operation, hierarchy) {
if (!hierarchy?.enabled || !hierarchy?.stickyParents) return true;
return operation.sourceParentId === operation.targetParentId;
}
function canMoveToDistinctTarget(operation) {
if (operation.type === TARGET_ITEM && operation.targetType === TARGET_ITEM) return operation.sourceId !== operation.targetId;
if (operation.type === TARGET_GROUP && (operation.targetType === TARGET_GROUP || operation.targetType === TARGET_BOUNDARY)) {
return operation.sourceGroup && operation.sourceGroup !== operation.targetGroup;
}
return true;
}
const DEFAULT_REORDER_FEATURES = {
item: {
reorder: true,
groupChange: false,
boundaryDrop: false,
ungroupedDrop: false,
rootOnly: false
},
group: {
reorder: false,
boundaryDrop: false,
ungroupedDrop: false,
itemDrop: false,
itemDropRequiresUngroupedTarget: true,
rootOnly: false
}
};
function getReorderFeatures(features = {}) {
return {
item: { ...DEFAULT_REORDER_FEATURES.item, ...(features.item || {}) },
group: { ...DEFAULT_REORDER_FEATURES.group, ...(features.group || {}) }
};
}
function isRootScoped(operation) {
return !operation.sourceParentId && !operation.targetParentId;
}
function canMoveByFeatures(operation, features) {
if (operation.type === TARGET_ITEM) {
const item = features.item;
const rootAllowed = !item.rootOnly || isRootScoped(operation);
if (!rootAllowed) return false;
if (operation.targetType === TARGET_ITEM) {
return item.reorder && (operation.targetGroup === operation.sourceGroup || item.groupChange);
}
if (operation.targetType === TARGET_GROUP) {
return item.groupChange && Boolean(operation.targetGroup) && operation.targetGroup !== operation.sourceGroup;
}
if (operation.targetType === TARGET_BOUNDARY) {
return item.boundaryDrop && Boolean(operation.targetGroup);
}
if (operation.targetType === TARGET_UNGROUPED) {
return item.ungroupedDrop && Boolean(operation.sourceGroup);
}
return false;
}
if (operation.type === TARGET_GROUP) {
const group = features.group;
const rootAllowed = !group.rootOnly || isRootScoped(operation);
if (!rootAllowed || !operation.sourceGroup) return false;
if (operation.targetType === TARGET_GROUP) {
return group.reorder && Boolean(operation.targetGroup);
}
if (operation.targetType === TARGET_BOUNDARY) {
return group.boundaryDrop && Boolean(operation.targetGroup);
}
if (operation.targetType === TARGET_UNGROUPED) {
return group.ungroupedDrop;
}
if (operation.targetType === TARGET_ITEM) {
return group.itemDrop && (!group.itemDropRequiresUngroupedTarget || !operation.targetGroup);
}
return false;
}
return false;
}
export function completeGroupOrder(groupOrder = [], groups = []) {
return [
...groupOrder.filter((group) => groups.includes(group)),
...groups.filter((group) => !groupOrder.includes(group))
];
}
export function getGroupedEntries(items, { groupOrder = [], getItemGroup, groupItemKey = "items", groupIdKey = "id" } = {}) {
const groups = [];
const itemsByGroup = new Map();
items.forEach((item) => {
const group = cleanText(getItemGroup?.(item));
if (!group) return;
if (!itemsByGroup.has(group)) {
groups.push(group);
itemsByGroup.set(group, []);
}
itemsByGroup.get(group).push(item);
});
const orderedGroups = completeGroupOrder(groupOrder, groups);
const groupEntries = new Map(orderedGroups.map((group) => [group, {
[groupIdKey]: group,
[groupItemKey]: itemsByGroup.get(group) || []
}]));
const renderedGroups = new Set();
return items.map((item) => {
const group = cleanText(getItemGroup?.(item));
if (!group) return { type: "item", item };
if (renderedGroups.has(group)) return null;
renderedGroups.add(group);
return { type: "group", group: groupEntries.get(group) };
}).filter(Boolean);
}
export function moveItem(items, fromItemId, toItemId, placement = "before", getItemId = (item) => item.id) {
const nextItems = [...items];
const fromIndex = nextItems.findIndex((item) => getItemId(item) === fromItemId);
const toIndex = nextItems.findIndex((item) => getItemId(item) === toItemId);
if (fromIndex < 0 || toIndex < 0 || fromItemId === toItemId) return items;
const [moved] = nextItems.splice(fromIndex, 1);
const targetIndex = nextItems.findIndex((item) => getItemId(item) === toItemId);
nextItems.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, moved);
return nextItems;
}
export function moveItemGroup(items, movingItemIds, toItemId, placement = "before", getItemId = (item) => item.id) {
const movingIds = new Set(movingItemIds);
if (!movingIds.size || movingIds.has(toItemId)) return items;
const movingItems = items.filter((item) => movingIds.has(getItemId(item)));
const remainingItems = items.filter((item) => !movingIds.has(getItemId(item)));
const targetIndex = remainingItems.findIndex((item) => getItemId(item) === toItemId);
if (targetIndex < 0) return items;
remainingItems.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, ...movingItems);
return remainingItems;
}
export function getBoundaryItemId(items, itemIds, placement = "before", getItemId = (item) => item.id) {
const ids = new Set(itemIds);
const orderedItems = items.filter((item) => ids.has(getItemId(item)));
return placement === "after" ? getItemId(orderedItems.at(-1) || {}) || "" : getItemId(orderedItems[0] || {}) || "";
}
export function moveGroupOrder(groupOrder, groups, fromGroup, toGroup, placement = "before") {
const nextOrder = completeGroupOrder(groupOrder, groups);
const index = nextOrder.indexOf(fromGroup);
const targetIndex = nextOrder.indexOf(toGroup);
if (index < 0 || targetIndex < 0 || fromGroup === toGroup) return nextOrder;
const [moved] = nextOrder.splice(index, 1);
const nextTargetIndex = nextOrder.indexOf(toGroup);
nextOrder.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, moved);
return nextOrder;
}
export function moveGroupOrderToStart(groupOrder, groups, fromGroup) {
return [fromGroup, ...completeGroupOrder(groupOrder, groups).filter((group) => group !== fromGroup)];
}
export function moveGroupOrderToEnd(groupOrder, groups, fromGroup) {
return [...completeGroupOrder(groupOrder, groups).filter((group) => group !== fromGroup), fromGroup];
}
function getGroupsFromItems(items, getItemGroup) {
const groups = [];
items.forEach((item) => {
const group = cleanText(getItemGroup(item));
if (group && !groups.includes(group)) groups.push(group);
});
return groups;
}
function getGroupItemIds(items, group, getItemId, getItemGroup) {
return items.filter((item) => cleanText(getItemGroup(item)) === group).map(getItemId);
}
function setItemGroup(items, itemId, group, getItemId, setItemGroupValue) {
return items.map((item) => (getItemId(item) === itemId ? setItemGroupValue(item, group) : item));
}
function getItemGroupById(items, itemId, getItemId, getItemGroup) {
const item = items.find((entry) => getItemId(entry) === itemId);
return item ? cleanText(getItemGroup(item)) : "";
}
function moveItemsToEdge(items, movingIds, edge, getItemId) {
const movingSet = new Set(movingIds);
const movingItems = items.filter((item) => movingSet.has(getItemId(item)));
const remainingItems = items.filter((item) => !movingSet.has(getItemId(item)));
return edge === "start" ? [...movingItems, ...remainingItems] : [...remainingItems, ...movingItems];
}
function compactGroupOrder(groupOrder, items, getItemGroup) {
return completeGroupOrder(groupOrder, getGroupsFromItems(items, getItemGroup));
}
export function applyGroupedReorderOperation(data, {
operation,
itemsKey = "items",
groupOrderKey = "groupOrder",
collapsedGroupsKey = "",
getItemId = (item) => item.id,
getItemGroup,
setItemGroup: setItemGroupValue
}) {
const items = Array.isArray(data?.[itemsKey]) ? data[itemsKey] : [];
const groupOrder = Array.isArray(data?.[groupOrderKey]) ? data[groupOrderKey] : [];
const getGroup = getItemGroup || (() => "");
const setGroup = setItemGroupValue || ((item) => item);
const allGroups = () => getGroupsFromItems(items, getGroup);
function withItems(nextItems, nextGroupOrder = compactGroupOrder(groupOrder, nextItems, getGroup), openedGroup = "") {
const nextData = {
...data,
[itemsKey]: nextItems,
[groupOrderKey]: nextGroupOrder
};
if (collapsedGroupsKey && openedGroup && Array.isArray(data?.[collapsedGroupsKey])) {
nextData[collapsedGroupsKey] = data[collapsedGroupsKey].filter((group) => group !== openedGroup);
}
return nextData;
}
function moveItemToEdge(group = "") {
const groupedItems = setItemGroup(items, operation.sourceId, group, getItemId, setGroup);
const movedItems = moveItemsToEdge(groupedItems, [operation.sourceId], operation.placement === "after" ? "end" : "start", getItemId);
return withItems(movedItems, compactGroupOrder(groupOrder, movedItems, getGroup), group);
}
function moveItemAroundItem() {
const targetGroup = getItemGroupById(items, operation.targetId, getItemId, getGroup);
const groupedItems = setItemGroup(items, operation.sourceId, targetGroup, getItemId, setGroup);
const movedItems = moveItemGroup(groupedItems, [operation.sourceId], operation.targetId, operation.placement, getItemId);
return withItems(movedItems, compactGroupOrder(groupOrder, movedItems, getGroup), targetGroup);
}
function moveItemIntoGroup(group, placement) {
if (!group) return moveItemToEdge("");
const groupedItems = setItemGroup(items, operation.sourceId, group, getItemId, setGroup);
const targetIds = getGroupItemIds(items, group, getItemId, getGroup).filter((id) => id !== operation.sourceId);
const boundaryItemId = getBoundaryItemId(items, targetIds, placement, getItemId);
const movedItems = boundaryItemId ? moveItemGroup(groupedItems, [operation.sourceId], boundaryItemId, placement, getItemId) : groupedItems;
return withItems(movedItems, compactGroupOrder(groupOrder, movedItems, getGroup), group);
}
function moveItemOutsideGroup() {
const groupedItems = setItemGroup(items, operation.sourceId, "", getItemId, setGroup);
const targetIds = getGroupItemIds(items, operation.targetGroup, getItemId, getGroup).filter((id) => id !== operation.sourceId);
const boundaryItemId = getBoundaryItemId(items, targetIds, operation.placement, getItemId);
const movedItems = boundaryItemId ? moveItemGroup(groupedItems, [operation.sourceId], boundaryItemId, operation.placement, getItemId) : groupedItems;
return withItems(movedItems, compactGroupOrder(groupOrder, movedItems, getGroup));
}
function moveGroupToEdge() {
const movingIds = getGroupItemIds(items, operation.sourceGroup, getItemId, getGroup);
if (!movingIds.length) return data;
const movedItems = moveItemsToEdge(items, movingIds, operation.placement === "after" ? "end" : "start", getItemId);
const nextGroupOrder = operation.placement === "after"
? moveGroupOrderToEnd(groupOrder, allGroups(), operation.sourceGroup)
: moveGroupOrderToStart(groupOrder, allGroups(), operation.sourceGroup);
return withItems(movedItems, nextGroupOrder);
}
function moveGroupAroundGroup(targetGroup) {
if (!operation.sourceGroup || !targetGroup || operation.sourceGroup === targetGroup) return data;
const movingIds = getGroupItemIds(items, operation.sourceGroup, getItemId, getGroup);
const targetIds = getGroupItemIds(items, targetGroup, getItemId, getGroup);
const boundaryItemId = getBoundaryItemId(items, targetIds, operation.placement, getItemId);
if (!movingIds.length || !boundaryItemId) return data;
return withItems(
moveItemGroup(items, movingIds, boundaryItemId, operation.placement, getItemId),
moveGroupOrder(groupOrder, allGroups(), operation.sourceGroup, targetGroup, operation.placement)
);
}
function moveGroupAroundItem() {
const movingIds = getGroupItemIds(items, operation.sourceGroup, getItemId, getGroup);
if (!movingIds.length || !operation.targetId) return data;
return withItems(moveItemGroup(items, movingIds, operation.targetId, operation.placement, getItemId));
}
if (operation.type === TARGET_ITEM) {
if (operation.targetType === TARGET_ITEM) return moveItemAroundItem();
if (operation.targetType === TARGET_GROUP) return moveItemIntoGroup(operation.targetGroup, operation.placement);
if (operation.targetType === TARGET_BOUNDARY) return moveItemOutsideGroup();
if (operation.targetType === TARGET_UNGROUPED) return moveItemToEdge("");
}
if (operation.type === TARGET_GROUP) {
if (operation.targetType === TARGET_GROUP || operation.targetType === TARGET_BOUNDARY) return moveGroupAroundGroup(operation.targetGroup);
if (operation.targetType === TARGET_ITEM) return moveGroupAroundItem();
if (operation.targetType === TARGET_UNGROUPED) return moveGroupToEdge();
}
return data;
}
export function useGroupedReorder({
namespace,
items = [],
getItemId = (item) => item.id,
getItemGroup = () => "",
getParentId = () => "",
getEffectiveGroup = getItemGroup,
reorderFeatures = {},
canMoveItem = DEFAULT_CAN_MOVE,
canMoveGroup = DEFAULT_CAN_MOVE,
orientation = "vertical",
getPlacement = (event, target) => getPointerPlacement(event, target, orientation),
onItemMove,
onGroupMove,
hierarchy = DEFAULT_HIERARCHY
}) {
const targetSelector = useMemo(() => `[data-reorder-namespace="${namespace}"]`, [namespace]);
const features = useMemo(() => getReorderFeatures(reorderFeatures), [reorderFeatures]);
const itemById = useMemo(() => new Map(items.map((item) => [getItemId(item), item])), [getItemId, items]);
const itemReorder = usePointerReorder({
targetSelector,
getTargetId: getElementTargetId,
getPlacement,
canDropOn: (target, draggingId) => {
const source = parseTarget(draggingId);
const targetIdValue = getElementTargetId(target);
const targetValue = parseTarget(targetIdValue);
if (source.kind !== TARGET_ITEM) return false;
const operation = buildOperation(TARGET_ITEM, draggingId, targetIdValue, getConfiguredPlacement(target));
if (!canMoveToDistinctTarget(operation)) return false;
if (!canMoveWithinHierarchy(operation, hierarchy)) return false;
if (!canMoveByFeatures(operation, features)) return false;
return canMoveItem(operation, { source, target: targetValue, features, hierarchy });
},
onMove: (sourceId, targetIdValue, placement) => {
onItemMove?.(buildOperation(TARGET_ITEM, sourceId, targetIdValue, placement));
}
});
const groupReorder = usePointerReorder({
targetSelector,
getTargetId: getElementTargetId,
getPlacement,
canDropOn: (target, draggingId) => {
const source = parseTarget(draggingId);
const targetIdValue = getElementTargetId(target);
const targetValue = parseTarget(targetIdValue);
if (source.kind !== TARGET_GROUP) return false;
const operation = buildOperation(TARGET_GROUP, draggingId, targetIdValue, getConfiguredPlacement(target));
if (!canMoveToDistinctTarget(operation)) return false;
if (!canMoveByFeatures(operation, features)) return false;
return canMoveGroup(operation, { source, target: targetValue, features, hierarchy });
},
onMove: (sourceId, targetIdValue, placement) => {
onGroupMove?.(buildOperation(TARGET_GROUP, sourceId, targetIdValue, placement));
}
});
function getItemProps({ itemId, groupId = "", parentId = "" }) {
return {
"data-reorder-namespace": namespace,
"data-reorder-target": TARGET_ITEM,
"data-reorder-item-id": itemId,
"data-reorder-group-id": groupId,
"data-reorder-parent-id": parentId,
"data-reorder-orientation": orientation
};
}
function getGroupProps({ groupId, parentId = "" }) {
return {
"data-reorder-namespace": namespace,
"data-reorder-target": TARGET_GROUP,
"data-reorder-group-id": groupId,
"data-reorder-parent-id": parentId,
"data-reorder-orientation": orientation
};
}
function getGroupBoundaryProps({ groupId, parentId = "", placement }) {
return {
"data-reorder-namespace": namespace,
"data-reorder-target": TARGET_BOUNDARY,
"data-reorder-group-id": groupId,
"data-reorder-parent-id": parentId,
"data-reorder-placement": placement,
"data-reorder-orientation": orientation
};
}
function getUngroupedDropProps({ parentId = "" } = {}) {
return {
"data-reorder-namespace": namespace,
"data-reorder-target": TARGET_UNGROUPED,
"data-reorder-parent-id": parentId,
"data-reorder-orientation": orientation
};
}
function startItemDrag(event, itemId) {
const item = itemById.get(itemId);
itemReorder.startDrag(event, encodeTarget({
kind: TARGET_ITEM,
itemId,
groupId: cleanText(item ? getEffectiveGroup(item) : ""),
parentId: cleanText(item ? getParentId(item) : "")
}));
}
function startGroupDrag(event, { groupId, parentId = "" }) {
groupReorder.startDrag(event, encodeTarget({ kind: TARGET_GROUP, groupId, parentId }));
}
function isItemDragging(itemId) {
const target = parseTarget(itemReorder.draggingId);
return target.kind === TARGET_ITEM && target.itemId === itemId;
}
function isGroupDragging(groupId, parentId = "") {
const target = parseTarget(groupReorder.draggingId);
return target.kind === TARGET_GROUP && target.groupId === groupId && sameParent(target, parentId);
}
function isItemDropTarget(itemId) {
return [itemReorder.dropTarget, groupReorder.dropTarget].some((dropTarget) => {
const target = parseTarget(dropTarget.id);
return target.kind === TARGET_ITEM && target.itemId === itemId;
});
}
function isGroupDropTarget(groupId, parentId = "") {
return [itemReorder.dropTarget, groupReorder.dropTarget].some((dropTarget) => {
const target = parseTarget(dropTarget.id);
return target.kind === TARGET_GROUP && target.groupId === groupId && sameParent(target, parentId);
});
}
function isBoundaryDropTarget({ groupId, parentId = "", placement }) {
return [itemReorder.dropTarget, groupReorder.dropTarget].some((dropTarget) => {
const target = parseTarget(dropTarget.id);
return target.kind === TARGET_BOUNDARY && target.groupId === groupId && target.placement === placement && sameParent(target, parentId);
});
}
function isUngroupedDropTarget(parentId = "") {
return [itemReorder.dropTarget, groupReorder.dropTarget].some((dropTarget) => {
const target = parseTarget(dropTarget.id);
return target.kind === TARGET_UNGROUPED && sameParent(target, parentId);
});
}
function getDropPlacement(targetType, id, parentId = "") {
const dropTarget = [itemReorder.dropTarget, groupReorder.dropTarget].find((currentTarget) => {
const target = parseTarget(currentTarget.id);
if (target.kind !== targetType) return false;
if (targetType === TARGET_ITEM) return target.itemId === id;
return target.groupId === id && sameParent(target, parentId);
});
return dropTarget?.placement || "";
}
function shouldShowUngroupedDropZone({ parentId = "" } = {}) {
const draggingItem = parseTarget(itemReorder.draggingId);
const draggingGroup = parseTarget(groupReorder.draggingId);
return (
draggingItem.kind === TARGET_ITEM && draggingItem.groupId && sameParent(draggingItem, parentId)
) || (
draggingGroup.kind === TARGET_GROUP && draggingGroup.groupId && sameParent(draggingGroup, parentId)
);
}
function shouldShowGroupBoundaries({ parentId = "" } = {}) {
const draggingItem = parseTarget(itemReorder.draggingId);
const draggingGroup = parseTarget(groupReorder.draggingId);
return (
draggingItem.kind === TARGET_ITEM && sameParent(draggingItem, parentId)
) || (
draggingGroup.kind === TARGET_GROUP && sameParent(draggingGroup, parentId)
);
}
return {
itemReorder: { ...itemReorder, startDrag: startItemDrag },
groupReorder: { ...groupReorder, startDrag: startGroupDrag },
getItemProps,
getGroupProps,
getGroupBoundaryProps,
getUngroupedDropProps,
isItemDragging,
isItemDropTarget,
isGroupDragging,
isGroupDropTarget,
isBoundaryDropTarget,
isUngroupedDropTarget,
getDropPlacement,
shouldShowUngroupedDropZone,
shouldShowGroupBoundaries
};
}

14
website/src/hooks/usePointerReorder.js
View file

@ -1,4 +1,6 @@
// Rôle : fournit la réorganisation par pointeur pour listes et grilles locales.
// Rôle : fournit le moteur bas niveau de drag par pointeur.
// Gère uniquement la cible DOM, before/after et le cycle pointer down/move/up.
// Préférer useGroupedReorder pour les réorganisations applicatives d'outils.
import { useEffect, useRef, useState } from "react";
function getDefaultPlacement(event, element) {
@ -28,11 +30,15 @@ export function usePointerReorder({
const { getTargetId, canDropOn, getPlacement } = optionsRef.current;
const element = document.elementFromPoint(event.clientX, event.clientY);
const target = element?.closest?.(targetSelector);
if (!target || !canDropOn(target, draggingId) || getTargetId(target) === draggingId) {
if (!target || !canDropOn(target, draggingId)) {
return { id: "", placement: "before" };
}
const targetId = getTargetId(target);
if (targetId === draggingId) {
return { id: "", placement: "before" };
}
return {
id: getTargetId(target),
id: targetId,
placement: getPlacement(event, target)
};
}
@ -44,7 +50,7 @@ export function usePointerReorder({
function handlePointerUp(event) {
const { onMove } = optionsRef.current;
const target = getDropTarget(event);
if (target.id) onMove(draggingId, target.id, target.placement);
if (target.id) onMove?.(draggingId, target.id, target.placement);
setDraggingId("");
setDropTarget({ id: "", placement: "before" });
}

20
website/src/styles/_cards.scss
View file

@ -148,6 +148,8 @@
}
.toolbox-card {
--reorder-drop-shadow: var(--shadow-sm);
position: relative;
display: flex;
min-height: 292px;
@ -225,24 +227,6 @@
cursor: grabbing;
}
.toolbox-card.is-dragging {
cursor: grabbing;
opacity: 0.58;
transform: scale(0.99);
}
.toolbox-card.is-drop-target {
box-shadow:
var(--shadow-sm),
inset 3px 0 0 rgba(246, 196, 83, 0.82);
}
.toolbox-card.is-drop-target.drop-after {
box-shadow:
var(--shadow-sm),
inset -3px 0 0 rgba(246, 196, 83, 0.82);
}
.toolbox-page {
display: flex;
min-height: calc(100vh - 68px - var(--space-8) - var(--space-12));

205
website/src/styles/_toolboxes.scss
View file

@ -423,6 +423,8 @@
}
.module {
--reorder-drop-shadow: var(--shadow-sm);
position: relative;
contain: paint;
overflow: hidden;
@ -459,23 +461,33 @@
linear-gradient(180deg, transparent 0 30%, rgba(139, 92, 246, 0.08) 42%, rgba(139, 92, 246, 0.32) 72%, rgba(196, 181, 253, 0.5) 100%);
}
.module.is-dragging {
[data-reorder-target="item"].is-dragging,
[data-reorder-target="group"].is-dragging {
cursor: grabbing;
opacity: 0.58;
transform: scale(0.99);
}
.module.is-drop-target {
[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target,
[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
box-shadow:
var(--shadow-sm),
inset 0 3px 0 rgba(246, 196, 83, 0.8);
box-shadow: var(--reorder-drop-shadow, none), inset 0 3px 0 rgba(246, 196, 83, 0.8);
}
.module.is-drop-target.drop-after {
box-shadow:
var(--shadow-sm),
inset 0 -3px 0 rgba(246, 196, 83, 0.8);
[data-reorder-target="item"][data-reorder-orientation="vertical"].is-drop-target.drop-after,
[data-reorder-target="group"][data-reorder-orientation="vertical"].is-drop-target.drop-after {
box-shadow: var(--reorder-drop-shadow, none), inset 0 -3px 0 rgba(246, 196, 83, 0.8);
}
[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target,
[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
box-shadow: var(--reorder-drop-shadow, none), inset 3px 0 0 rgba(246, 196, 83, 0.86);
}
[data-reorder-target="item"][data-reorder-orientation="horizontal"].is-drop-target.drop-after,
[data-reorder-target="group"][data-reorder-orientation="horizontal"].is-drop-target.drop-after {
box-shadow: var(--reorder-drop-shadow, none), inset -3px 0 0 rgba(246, 196, 83, 0.86);
}
.module header {
@ -1857,31 +1869,6 @@ textarea:focus {
text-align: center;
}
.task-planner-uncategorized-drop-zone {
padding: 9px 12px;
border: 1px dashed rgba(165, 180, 252, 0.22);
border-radius: var(--radius-md);
background: rgba(15, 23, 42, 0.26);
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 900;
text-align: center;
text-transform: uppercase;
}
.task-planner-uncategorized-drop-zone.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.08), transparent 56%),
rgba(15, 23, 42, 0.34);
color: var(--color-accent-gold);
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
}
.task-planner-uncategorized-drop-zone.is-drop-target.drop-after {
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
}
.task-planner-category-boundary-drop-zone {
min-height: 10px;
border: 1px dashed rgba(165, 180, 252, 0.16);
@ -1987,21 +1974,6 @@ textarea:focus {
rgba(5, 7, 17, 0.36);
}
.task-planner-item.is-dragging {
cursor: grabbing;
opacity: 0.58;
transform: scale(0.99);
}
.task-planner-item.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
}
.task-planner-item.is-drop-target.drop-after {
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
}
.task-planner-line {
display: grid;
grid-template-columns: 30px 24px minmax(0, 1fr) 134px auto auto;
@ -2486,33 +2458,6 @@ textarea:focus {
gap: 6px;
}
.combos-root-drop-zone {
display: none;
padding: 9px 12px;
border: 1px dashed rgba(165, 180, 252, 0.22);
border-radius: var(--radius-md);
background: rgba(15, 23, 42, 0.26);
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 900;
text-align: center;
text-transform: uppercase;
}
.combos-root-drop-zone.is-visible,
.combos-root-drop-zone.is-drop-target {
display: block;
}
.combos-root-drop-zone.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.08), transparent 56%),
rgba(15, 23, 42, 0.34);
color: var(--color-accent-gold);
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
}
.combos-category-boundary-drop-zone {
min-height: 6px;
border-radius: 999px;
@ -2546,24 +2491,6 @@ textarea:focus {
grid-template-columns: 30px minmax(0, 1fr) auto;
}
.combo-card.is-dragging,
.combos-category.is-dragging {
cursor: grabbing;
opacity: 0.58;
transform: scale(0.99);
}
.combo-card.is-drop-target,
.combos-category.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
}
.combo-card.is-drop-target.drop-after,
.combos-category.is-drop-target.drop-after {
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
}
.combo-drag-handle {
align-self: start;
}
@ -2971,9 +2898,10 @@ button.combo-input-token.combo-input-mouse {
}
.counter-item {
position: relative;
display: grid;
gap: 12px;
padding: 12px;
padding: 12px 52px 12px 12px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background:
@ -2981,6 +2909,22 @@ button.combo-input-token.combo-input-mouse {
rgba(7, 10, 24, 0.42);
}
.counter-drag-handle {
position: absolute;
top: 10px;
right: 10px;
display: inline-grid;
width: 34px;
min-width: 34px;
min-height: 34px;
place-items: center;
padding: 0;
color: var(--color-text-muted);
cursor: grab;
touch-action: none;
user-select: none;
}
.counter-item > div:first-child {
display: grid;
gap: 3px;
@ -3340,10 +3284,29 @@ button.combo-input-token.combo-input-mouse {
grid-template-columns: minmax(0, 1fr) 34px;
}
.timer-entry.has-drag-handle {
grid-template-columns: 30px minmax(0, 1fr) 34px;
}
.tool-split-entry-list li.is-editing > .timer-entry.has-single-action {
grid-template-columns: auto minmax(0, 1fr) 34px;
}
.tool-split-entry-list li.is-editing > .timer-entry.has-drag-handle {
grid-template-columns: 30px auto minmax(0, 1fr) 34px;
}
.timer-drag-handle {
width: 30px;
min-width: 30px;
min-height: 36px;
padding: 0;
color: var(--color-text-muted);
cursor: grab;
touch-action: none;
user-select: none;
}
.timer-inline-reset {
width: 26px;
min-width: 26px;
@ -3428,6 +3391,25 @@ button.combo-input-token.combo-input-mouse {
max-width: 100%;
}
.calculator-entry.has-drag-handle {
grid-template-columns: 30px minmax(0, 1fr) 34px 34px;
}
.tool-split-entry-list li.is-editing > .calculator-entry.has-drag-handle {
grid-template-columns: 30px auto minmax(0, 1fr) 34px 34px;
}
.calculator-drag-handle {
width: 30px;
min-width: 30px;
min-height: 36px;
padding: 0;
color: var(--color-text-muted);
cursor: grab;
touch-action: none;
user-select: none;
}
.calculator-form label span,
.calculator-result span,
.tool-split-root-button {
@ -4073,7 +4055,7 @@ button.combo-input-token.combo-input-mouse {
.link-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px;
@ -4082,6 +4064,17 @@ button.combo-input-token.combo-input-mouse {
background: rgba(7, 10, 24, 0.42);
}
.link-drag-handle {
width: 34px;
min-width: 34px;
min-height: 34px;
padding: 0;
color: var(--color-text-muted);
cursor: grab;
touch-action: none;
user-select: none;
}
.link-item a {
display: grid;
min-width: 0;
@ -4116,6 +4109,12 @@ button.combo-input-token.combo-input-mouse {
min-height: 40px;
}
.link-item .link-drag-handle {
width: 34px;
min-width: 34px;
min-height: 34px;
}
.dropzone {
display: grid;
min-height: 74px;
@ -4327,18 +4326,8 @@ button.combo-input-token.combo-input-mouse {
background: rgba(5, 7, 17, 0.38);
}
.images figure.is-dragging {
opacity: 0.42;
}
.images figure.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.26), 0 0 18px rgba(246, 196, 83, 0.12);
}
.images figure.is-drop-target.drop-after {
border-color: rgba(112, 89, 255, 0.82);
box-shadow: 0 0 0 1px rgba(164, 124, 255, 0.3), 0 0 18px rgba(112, 89, 255, 0.16);
.images figure {
--reorder-drop-shadow: 0 0 18px rgba(246, 196, 83, 0.12);
}
.image-drag-handle {