R: Apply withPreventDefault utility

2025-08-14 04:40:36 +03:00 · 2025-07-08 12:37:35 +03:00 · 2025-07-08 12:37:35 +03:00 · 4f54c59130
commit 4f54c59130
parent b95952a5e5
7 changed files with 84 additions and 107 deletions
--- 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<HTMLDivElement>) {
    if (event.code === 'Space') {
-      event.preventDefault();
-      event.stopPropagation();
-      setSpaceMode(true);
+      withPreventDefault(() => setSpaceMode(true))(event);
    }
    onKeyDown?.(event);
  }
--- 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;
    }
  }
--- 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<ReactCodeMirrorRef, RefsInputInputProps>(
      if (onBlur) onBlur(event);
    }

+    function onEditRef() {
+      const wrap = new CodeMirrorWrapper(thisRef.current as Required<ReactCodeMirrorRef>);
+      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<HTMLDivElement>) {
      if (!thisRef.current?.view) {
        event.preventDefault();
@ -124,53 +172,8 @@ export const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
        return;
      }
      if ((event.ctrlKey || event.metaKey) && event.code === 'Space') {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const wrap = new CodeMirrorWrapper(thisRef.current as Required<ReactCodeMirrorRef>);
-        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;
      }
    }

--- 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<HTMLDivElement>) {
    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;
+      }
    }
  }

--- 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;
    }
  }
--- 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<HTMLElement>, newValue: ILibraryItemReference) {
+    navigateOss(newValue.id, event.ctrlKey || event.metaKey);
+  }
+
  return (
    <div className='cc-icons'>
-      {schema.oss.length > 0 ? (
-        <MiniSelectorOSS
-          items={schema.oss}
-          onSelect={(event, value) => navigateOss(value.id, event.ctrlKey || event.metaKey)}
-        />
-      ) : null}
+      {schema.oss.length > 0 ? <MiniSelectorOSS items={schema.oss} onSelect={handleSelectOss} /> : null}
      <MiniButton
        title='Настройки фильтрации узлов и связей'
        icon={<IconFilter size='1.25rem' className='icon-primary' />}
--- 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,