diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 88baed3..bb2284b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "@dnd-kit/core": "^6.3.1", + "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/utilities": "^3.2.2", "@fontsource-variable/noto-sans-jp": "^5.2.9", "@radix-ui/react-dialog": "^1.1.14", @@ -400,6 +401,20 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@dnd-kit/modifiers": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz", + "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==", + "license": "MIT", + "dependencies": { + "@dnd-kit/utilities": "^3.2.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@dnd-kit/core": "^6.3.0", + "react": ">=16.8.0" + } + }, "node_modules/@dnd-kit/utilities": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 69c112e..57a13d9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@dnd-kit/core": "^6.3.1", + "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/utilities": "^3.2.2", "@fontsource-variable/noto-sans-jp": "^5.2.9", "@radix-ui/react-dialog": "^1.1.14", diff --git a/frontend/src/components/DraggableDroppableTagRow.tsx b/frontend/src/components/DraggableDroppableTagRow.tsx index c12ab09..af8d390 100644 --- a/frontend/src/components/DraggableDroppableTagRow.tsx +++ b/frontend/src/components/DraggableDroppableTagRow.tsx @@ -54,7 +54,7 @@ export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef }: Pro data: { kind: 'tag', tagId: tag.id } }) const style: CSSProperties = { transform: CSS.Translate.toString (transform), - opacity: dragging ? .5 : 1 } + visibility: dragging ? 'hidden' : 'visible' } return (
{ + const [activeTagId, setActiveTagId] = useState (null) const [dragging, setDragging] = useState (false) const [saving, setSaving] = useState (false) const [tags, setTags] = useState ({ } as TagByCategory) @@ -304,7 +308,9 @@ export default (({ post }: Props) => { { + onDragStart={e => { + if (e.active.data.current?.kind === 'tag') + setActiveTagId (e.active.data.current?.tagId ?? null) setDragging (true) suppressClickRef.current = true document.body.style.userSelect = 'none' @@ -316,15 +322,18 @@ export default (({ post }: Props) => { }, { capture: true, once: true }) }} onDragCancel={() => { + setActiveTagId (null) setDragging (false) document.body.style.userSelect = '' suppressClickRef.current = false }} - onDragEnd={e => { + onDragEnd={async e => { + setActiveTagId (null) setDragging (false) - onDragEnd (e) + await onDragEnd (e) document.body.style.userSelect = '' - }}> + }} + modifiers={[restrictToWindowEdges]}> {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && ( @@ -385,6 +394,15 @@ export default (({ post }: Props) => {
)} + + +
+ {activeTagId != null && (() => { + const tag = findTag (tags, activeTagId) + return tag && + }) ()} +
+
) }) satisfies FC