diff --git a/rsconcept/frontend/src/components/flow/diagram-flow.tsx b/rsconcept/frontend/src/components/flow/diagram-flow.tsx index 0c0008e8..deb171bf 100644 --- a/rsconcept/frontend/src/components/flow/diagram-flow.tsx +++ b/rsconcept/frontend/src/components/flow/diagram-flow.tsx @@ -5,6 +5,8 @@ import { Background, ReactFlow, type ReactFlowProps } from 'reactflow'; export { useReactFlow, useStoreApi } from 'reactflow'; +import { withPreventDefault } from '@/utils/utils'; + import { cn } from '../utils'; type DiagramFlowProps = { @@ -48,9 +50,7 @@ export function DiagramFlow({ function handleKeyDown(event: React.KeyboardEvent) { if (event.code === 'Space') { - event.preventDefault(); - event.stopPropagation(); - setSpaceMode(true); + withPreventDefault(() => setSpaceMode(true))(event); } onKeyDown?.(event); } diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx index 41046bcb..49667176 100644 --- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx +++ b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx @@ -9,6 +9,7 @@ import { useDialogsStore } from '@/stores/dialogs'; import { usePreferencesStore } from '@/stores/preferences'; import { PARAMETER } from '@/utils/constants'; import { promptText } from '@/utils/labels'; +import { withPreventDefault } from '@/utils/utils'; import { useDeleteBlock } from '../../../backend/use-delete-block'; import { useMutatingOss } from '../../../backend/use-mutating-oss'; @@ -149,36 +150,26 @@ export function OssFlow() { return; } if (event.key === 'Escape') { - event.preventDefault(); - event.stopPropagation(); - resetSelectedElements(); + withPreventDefault(resetSelectedElements)(event); return; } if (!isMutable) { return; } if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') { - event.preventDefault(); - event.stopPropagation(); - handleSavePositions(); + withPreventDefault(handleSavePositions)(event); return; } if (event.altKey && event.code === 'Key1') { - event.preventDefault(); - event.stopPropagation(); - handleCreateBlock(); + withPreventDefault(handleCreateBlock)(event); return; } if (event.altKey && event.code === 'Key2') { - event.preventDefault(); - event.stopPropagation(); - handleCreateOperation(); + withPreventDefault(handleCreateOperation)(event); return; } if (event.key === 'Delete') { - event.preventDefault(); - event.stopPropagation(); - handleDeleteSelected(); + withPreventDefault(handleDeleteSelected)(event); return; } } diff --git a/rsconcept/frontend/src/features/rsform/components/refs-input/refs-input.tsx b/rsconcept/frontend/src/features/rsform/components/refs-input/refs-input.tsx index 3b5d67f6..3745c2b9 100644 --- a/rsconcept/frontend/src/features/rsform/components/refs-input/refs-input.tsx +++ b/rsconcept/frontend/src/features/rsform/components/refs-input/refs-input.tsx @@ -18,6 +18,7 @@ import { usePreferencesStore } from '@/stores/preferences'; import { APP_COLORS } from '@/styling/colors'; import { CodeMirrorWrapper } from '@/utils/codemirror'; import { PARAMETER } from '@/utils/constants'; +import { withPreventDefault } from '@/utils/utils'; import { type IReferenceInputState } from '../../dialogs/dlg-edit-reference/dlg-edit-reference'; import { ReferenceType } from '../../models/language'; @@ -117,6 +118,53 @@ export const RefsInput = forwardRef( if (onBlur) onBlur(event); } + function onEditRef() { + const wrap = new CodeMirrorWrapper(thisRef.current as Required); + wrap.fixSelection(ReferenceTokens); + const nodes = wrap.getEnvelopingNodes(ReferenceTokens); + + const data: IReferenceInputState = { + type: ReferenceType.ENTITY, + refRaw: '', + text: '', + mainRefs: [], + basePosition: 0 + }; + + if (nodes.length !== 1) { + data.text = wrap.getSelectionText(); + } else { + data.type = nodes[0].type.id === RefEntity ? ReferenceType.ENTITY : ReferenceType.SYNTACTIC; + data.refRaw = wrap.getSelectionText(); + } + + const selection = wrap.getSelection(); + const mainNodes = wrap + .getAllNodes([RefEntity]) + .filter(node => node.from >= selection.to || node.to <= selection.from); + data.mainRefs = mainNodes.map(node => wrap.getText(node.from, node.to)); + data.basePosition = mainNodes.filter(node => node.to <= selection.from).length; + + setIsEditing(true); + showEditReference({ + schema: schema, + initial: data, + onCancel: () => { + setIsEditing(false); + setTimeout(() => { + thisRef.current?.view?.focus(); + }, PARAMETER.minimalTimeout); + }, + onSave: ref => { + wrap.replaceWith(referenceToString(ref)); + setIsEditing(false); + setTimeout(() => { + thisRef.current?.view?.focus(); + }, PARAMETER.minimalTimeout); + } + }); + } + function handleInput(event: React.KeyboardEvent) { if (!thisRef.current?.view) { event.preventDefault(); @@ -124,53 +172,8 @@ export const RefsInput = forwardRef( return; } if ((event.ctrlKey || event.metaKey) && event.code === 'Space') { - event.preventDefault(); - event.stopPropagation(); - - const wrap = new CodeMirrorWrapper(thisRef.current as Required); - wrap.fixSelection(ReferenceTokens); - const nodes = wrap.getEnvelopingNodes(ReferenceTokens); - - const data: IReferenceInputState = { - type: ReferenceType.ENTITY, - refRaw: '', - text: '', - mainRefs: [], - basePosition: 0 - }; - - if (nodes.length !== 1) { - data.text = wrap.getSelectionText(); - } else { - data.type = nodes[0].type.id === RefEntity ? ReferenceType.ENTITY : ReferenceType.SYNTACTIC; - data.refRaw = wrap.getSelectionText(); - } - - const selection = wrap.getSelection(); - const mainNodes = wrap - .getAllNodes([RefEntity]) - .filter(node => node.from >= selection.to || node.to <= selection.from); - data.mainRefs = mainNodes.map(node => wrap.getText(node.from, node.to)); - data.basePosition = mainNodes.filter(node => node.to <= selection.from).length; - - setIsEditing(true); - showEditReference({ - schema: schema, - initial: data, - onCancel: () => { - setIsEditing(false); - setTimeout(() => { - thisRef.current?.view?.focus(); - }, PARAMETER.minimalTimeout); - }, - onSave: ref => { - wrap.replaceWith(referenceToString(ref)); - setIsEditing(false); - setTimeout(() => { - thisRef.current?.view?.focus(); - }, PARAMETER.minimalTimeout); - } - }); + withPreventDefault(onEditRef)(event); + return; } } diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rslist/editor-rslist.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rslist/editor-rslist.tsx index 7c48cc76..bce9c761 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rslist/editor-rslist.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rslist/editor-rslist.tsx @@ -10,7 +10,7 @@ import { IconCSV } from '@/components/icons'; import { SearchBar } from '@/components/input'; import { useFitHeight } from '@/stores/app-layout'; import { infoMsg } from '@/utils/labels'; -import { convertToCSV } from '@/utils/utils'; +import { convertToCSV, withPreventDefault } from '@/utils/utils'; import { CstType } from '../../../backend/types'; import { useMutatingRSForm } from '../../../backend/use-mutating-rsform'; @@ -34,7 +34,6 @@ export function EditorRSList() { moveUp, moveDown, cloneCst, - canDeleteSelected, promptDeleteCst, navigateCst } = useRSEdit(); @@ -74,27 +73,22 @@ export function EditorRSList() { function handleKeyDown(event: React.KeyboardEvent) { if (event.key === 'Escape') { - event.preventDefault(); - event.stopPropagation(); - deselectAll(); + withPreventDefault(deselectAll)(event); return; } if (!isContentEditable || isProcessing) { return; } - if (event.key === 'Delete' && canDeleteSelected) { - event.preventDefault(); - event.stopPropagation(); - promptDeleteCst(); + if (event.key === 'Delete') { + withPreventDefault(promptDeleteCst)(event); return; } - if (!event.altKey || event.shiftKey) { - return; - } - if (processAltKey(event.code)) { - event.preventDefault(); - event.stopPropagation(); - return; + if (event.altKey && !event.shiftKey) { + if (processAltKey(event.code)) { + event.preventDefault(); + event.stopPropagation(); + return; + } } } diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx index a1937c9b..5feac084 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx @@ -6,6 +6,7 @@ import { type Edge, MarkerType, type Node, useEdgesState, useNodesState, useOnSe import { DiagramFlow, useReactFlow, useStoreApi } from '@/components/flow/diagram-flow'; import { useMainHeight } from '@/stores/app-layout'; import { PARAMETER } from '@/utils/constants'; +import { withPreventDefault } from '@/utils/utils'; import { useMutatingRSForm } from '../../../backend/use-mutating-rsform'; import { ToolbarGraphSelection } from '../../../components/toolbar-graph-selection'; @@ -39,17 +40,8 @@ export function TGFlow() { const store = useStoreApi(); const { addSelectedNodes } = store.getState(); const isProcessing = useMutatingRSForm(); - const { - isContentEditable, - schema, - selected, - setSelected, - canDeleteSelected, - promptDeleteCst, - focusCst, - setFocus, - deselectAll - } = useRSEdit(); + const { isContentEditable, schema, selected, setSelected, promptDeleteCst, focusCst, setFocus, deselectAll } = + useRSEdit(); const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges] = useEdgesState([]); @@ -140,20 +132,14 @@ export function TGFlow() { return; } if (event.key === 'Escape') { - event.preventDefault(); - event.stopPropagation(); - setFocus(null); + withPreventDefault(() => setFocus(null))(event); return; } if (!isContentEditable) { return; } if (event.key === 'Delete') { - event.preventDefault(); - event.stopPropagation(); - if (canDeleteSelected) { - promptDeleteCst(); - } + withPreventDefault(promptDeleteCst)(event); return; } } diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx index a379932d..2e1e6dc0 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx @@ -2,6 +2,7 @@ import { useReactFlow } from 'reactflow'; import { HelpTopic } from '@/features/help'; import { BadgeHelp } from '@/features/help/components/badge-help'; +import { type ILibraryItemReference } from '@/features/library'; import { MiniSelectorOSS } from '@/features/library/components/mini-selector-oss'; import { MiniButton } from '@/components/control'; @@ -61,7 +62,7 @@ export function ToolbarTermGraph() { } function handleDeleteCst() { - if (!canDeleteSelected || isProcessing) { + if (isProcessing) { return; } promptDeleteCst(); @@ -94,14 +95,13 @@ export function ToolbarTermGraph() { }); } + function handleSelectOss(event: React.MouseEvent, newValue: ILibraryItemReference) { + navigateOss(newValue.id, event.ctrlKey || event.metaKey); + } + return (
- {schema.oss.length > 0 ? ( - navigateOss(value.id, event.ctrlKey || event.metaKey)} - /> - ) : null} + {schema.oss.length > 0 ? : null} } diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/rsedit-state.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/rsedit-state.tsx index 96bc954d..71594ed3 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/rsedit-state.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/rsedit-state.tsx @@ -241,6 +241,9 @@ export const RSEditState = ({ } function promptDeleteCst() { + if (!canDeleteSelected) { + return; + } showDeleteCst({ schema: schema, selected: selected,