Optimize editor performance and coverup animations

2025-06-26 13:00:39 +03:00 · 2024-04-30 16:49:08 +03:00 · 2024-04-30 16:49:08 +03:00 · 66be97d0a6
commit 66be97d0a6
parent 266db4933a
5 changed files with 117 additions and 97 deletions
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@ -127,7 +127,7 @@ function FormConstituenta({
  }

  return (
-    <div>
+    <AnimateFade>
      <ControlsOverlay
        disabled={disabled}
        modified={isModified}
@ -242,7 +242,7 @@ function FormConstituenta({
          ) : null}
        </AnimatePresence>
      </form>
-    </div>
+    </AnimateFade>
  );
 }

--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
@ -5,6 +5,7 @@ import clsx from 'clsx';
 import InfoLibraryItem from '@/components/info/InfoLibraryItem';
 import Divider from '@/components/ui/Divider';
 import FlexColumn from '@/components/ui/FlexColumn';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useAuth } from '@/context/AuthContext';
 import { useRSForm } from '@/context/RSFormContext';
 import { globals } from '@/utils/constants';
@ -49,7 +50,11 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
        onSubmit={initiateSubmit}
        onDestroy={onDestroy}
      />
-      <div tabIndex={-1} onKeyDown={handleInput} className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}>
+      <AnimateFade
+        tabIndex={-1}
+        onKeyDown={handleInput}
+        className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}
+      >
        <FlexColumn className='px-4 pb-2'>
          <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />

@ -59,7 +64,7 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
        </FlexColumn>

        <RSFormStats stats={schema?.stats} />
-      </div>
+      </AnimateFade>
    </>
  );
 }
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
@ -5,6 +5,7 @@ import { useLayoutEffect, useMemo, useState } from 'react';

 import SelectedCounter from '@/components/info/SelectedCounter';
 import { type RowSelectionState } from '@/components/ui/DataTable';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import { ConstituentaID, CstType } from '@/models/rsform';

@ -94,33 +95,35 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
  const tableHeight = useMemo(() => calculateHeight('4.05rem + 5px'), [calculateHeight]);

  return (
-    <div tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
-      {controller.isContentEditable ? (
-        <SelectedCounter
-          totalCount={controller.schema?.stats?.count_all ?? 0}
-          selectedCount={controller.selected.length}
-          position='top-[0.3rem] left-2'
-        />
-      ) : null}
-
+    <>
      {controller.isContentEditable ? <RSListToolbar /> : null}
-      <div
-        className={clsx('border-b', {
-          'pt-[2.3rem]': controller.isContentEditable,
-          'relative top-[-1px]': !controller.isContentEditable
-        })}
-      />
+      <AnimateFade tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
+        {controller.isContentEditable ? (
+          <SelectedCounter
+            totalCount={controller.schema?.stats?.count_all ?? 0}
+            selectedCount={controller.selected.length}
+            position='top-[0.3rem] left-2'
+          />
+        ) : null}

-      <RSTable
-        items={controller.schema?.items}
-        maxHeight={tableHeight}
-        enableSelection={controller.isContentEditable}
-        selected={rowSelection}
-        setSelected={handleRowSelection}
-        onEdit={onOpenEdit}
-        onCreateNew={() => controller.createCst(undefined, false)}
-      />
-    </div>
+        <div
+          className={clsx('border-b', {
+            'pt-[2.3rem]': controller.isContentEditable,
+            'relative top-[-1px]': !controller.isContentEditable
+          })}
+        />
+
+        <RSTable
+          items={controller.schema?.items}
+          maxHeight={tableHeight}
+          enableSelection={controller.isContentEditable}
+          selected={rowSelection}
+          setSelected={handleRowSelection}
+          onEdit={onOpenEdit}
+          onCreateNew={() => controller.createCst(undefined, false)}
+        />
+      </AnimateFade>
+    </>
  );
 }

--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
@ -11,6 +11,7 @@ import SelectedCounter from '@/components/info/SelectedCounter';
 import SelectGraphToolbar from '@/components/select/SelectGraphToolbar';
 import { GraphCanvasRef, GraphEdge, GraphLayout, GraphNode } from '@/components/ui/GraphUI';
 import Overlay from '@/components/ui/Overlay';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import DlgGraphParams from '@/dialogs/DlgGraphParams';
 import useLocalStorage from '@/hooks/useLocalStorage';
@ -146,15 +147,18 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
    controller.deleteCst();
  }

-  function handleChangeLayout(newLayout: GraphLayout) {
-    if (newLayout === layout) {
-      return;
-    }
-    setLayout(newLayout);
-    setTimeout(() => {
-      setToggleResetView(prev => !prev);
-    }, PARAMETER.graphRefreshDelay);
-  }
+  const handleChangeLayout = useCallback(
+    (newLayout: GraphLayout) => {
+      if (newLayout === layout) {
+        return;
+      }
+      setLayout(newLayout);
+      setTimeout(() => {
+        setToggleResetView(prev => !prev);
+      }, PARAMETER.graphRefreshDelay);
+    },
+    [layout, setLayout]
+  );

  const handleChangeParams = useCallback(
    (params: GraphFilterParams) => {
@ -253,25 +257,36 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
    ]
  );

-  return (
-    <div tabIndex={-1} onKeyDown={handleKeyDown}>
-      <AnimatePresence>
-        {showParamsDialog ? (
-          <DlgGraphParams
-            hideWindow={() => setShowParamsDialog(false)}
-            initial={filterParams}
-            onConfirm={handleChangeParams}
-          />
-        ) : null}
-      </AnimatePresence>
-
-      <SelectedCounter
-        hideZero
-        totalCount={controller.schema?.stats?.count_all ?? 0}
-        selectedCount={controller.selected.length}
-        position='top-[4.3rem] sm:top-[0.3rem] left-0'
+  const selectors = useMemo(
+    () => (
+      <GraphSelectors
+        coloring={coloring}
+        layout={layout}
+        sizing={sizing}
+        setLayout={handleChangeLayout}
+        setColoring={setColoring}
+        setSizing={setSizing}
      />
+    ),
+    [coloring, layout, sizing, handleChangeLayout, setColoring, setSizing]
+  );
+  const viewHidden = useMemo(
+    () => (
+      <ViewHidden
+        items={hidden}
+        selected={controller.selected}
+        schema={controller.schema}
+        coloringScheme={coloring}
+        toggleSelection={controller.toggleSelect}
+        setFocus={handleSetFocus}
+        onEdit={onOpenEdit}
+      />
+    ),
+    [hidden, controller.selected, controller.schema, coloring, controller.toggleSelect, handleSetFocus, onOpenEdit]
+  );

+  return (
+    <>
      <Overlay
        position='top-0 pt-1 right-1/2 translate-x-1/2'
        className='flex flex-col items-center rounded-b-2xl cc-blur'
@ -323,41 +338,44 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
          />
        ) : null}
      </Overlay>
+      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
+        <AnimatePresence>
+          {showParamsDialog ? (
+            <DlgGraphParams
+              hideWindow={() => setShowParamsDialog(false)}
+              initial={filterParams}
+              onConfirm={handleChangeParams}
+            />
+          ) : null}
+        </AnimatePresence>

-      {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
-        <Overlay
-          layer='z-tooltip'
-          position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
-          className={clsx('w-[25rem]', 'px-3', 'overflow-y-auto', 'border shadow-md', 'clr-app')}
-        >
-          <InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
+        <SelectedCounter
+          hideZero
+          totalCount={controller.schema?.stats?.count_all ?? 0}
+          selectedCount={controller.selected.length}
+          position='top-[4.3rem] sm:top-[0.3rem] left-0'
+        />
+
+        {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
+          <Overlay
+            layer='z-tooltip'
+            position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
+            className={clsx('w-[25rem]', 'px-3', 'overflow-y-auto', 'border shadow-md', 'clr-app')}
+          >
+            <InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
+          </Overlay>
+        ) : null}
+
+        <Overlay position='top-[6.25rem] sm:top-9 left-0' className='flex gap-1'>
+          <div className='flex flex-col ml-2 w-[13.5rem]'>
+            {selectors}
+            {viewHidden}
+          </div>
        </Overlay>
-      ) : null}

-      <Overlay position='top-[6.25rem] sm:top-9 left-0' className='flex gap-1'>
-        <div className='flex flex-col ml-2 w-[13.5rem]'>
-          <GraphSelectors
-            coloring={coloring}
-            layout={layout}
-            sizing={sizing}
-            setLayout={handleChangeLayout}
-            setColoring={setColoring}
-            setSizing={setSizing}
-          />
-          <ViewHidden
-            items={hidden}
-            selected={controller.selected}
-            schema={controller.schema}
-            coloringScheme={coloring}
-            toggleSelection={controller.toggleSelect}
-            setFocus={handleSetFocus}
-            onEdit={onOpenEdit}
-          />
-        </div>
-      </Overlay>
-
-      {graph}
-    </div>
+        {graph}
+      </AnimateFade>
+    </>
  );
 }

--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@ -221,19 +221,13 @@ function RSTabs() {
          </TabList>

          <AnimateFade className='overflow-y-auto' style={{ maxHeight: panelHeight }}>
-            <TabPanel forceRender style={{ display: activeTab === RSTabID.CARD ? '' : 'none' }}>
-              {cardPanel}
-            </TabPanel>
+            <TabPanel>{cardPanel}</TabPanel>

-            <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_LIST ? '' : 'none' }}>
-              {listPanel}
-            </TabPanel>
+            <TabPanel>{listPanel}</TabPanel>

-            <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_EDIT ? '' : 'none' }}>
-              {editorPanel}
-            </TabPanel>
+            <TabPanel>{editorPanel}</TabPanel>

-            <TabPanel style={{ display: activeTab === RSTabID.TERM_GRAPH ? '' : 'none' }}>
+            <TabPanel>
              <EditorTermGraph onOpenEdit={onOpenCst} />
            </TabPanel>
          </AnimateFade>