added some undo

SysCV · Feb 22, 2024 · 7f0c128 · 7f0c128
1 parent 6d4693d
commit 7f0c128
Show file tree

Hide file tree

Showing 8 changed files with 368 additions and 112 deletions.
diff --git a/app/frontend/src/common/yjs/event.ts b/app/frontend/src/common/yjs/event.ts
@@ -28,6 +28,7 @@ function useComponentsListener() {
 
   useEffect(() => {
     const fn = (e: Y.YMapEvent<ComponentYjs>) => {
+      console.log(e);
       for (const [cid, cc] of e.changes.keys) {
         switch (cc.action) {
           case 'add': {
@@ -53,8 +54,8 @@ function useComponentsListener() {
               return;
             }
 
-            const {sliceIndex, entityId} = cc.oldValue;
-            transferComponent({sliceIndex, entityId, componentId: cid, targetEntityId: comp.eid});
+            const {sidx, eid} = cc.oldValue as ComponentYjs;
+            transferComponent({sliceIndex: sidx, entityId: eid, componentId: cid, targetEntityId: comp.eid});
             break;
           }
           case 'delete': {

diff --git a/app/frontend/src/component/panel/ActionBar.tsx b/app/frontend/src/component/panel/ActionBar.tsx
@@ -28,7 +28,7 @@ import {ConfigContext} from 'common/context';
 import {rectFitTransform} from 'common/geometry';
 import {useInvertSelection, useFocusAreas, useDrawing} from 'common/hook';
 import {useCanvasSize, leftSidebarWidth} from './layout';
-import {useTemporalAnnoStore} from 'state/annotate/annotation-temporal';
+import {useAnnoHistoryStore} from 'state/annotate/annotation-provider';
 
 const ActionButton: FC<{helpCode: string; icon: React.ReactNode; hotKey?: string} & ButtonProps> = ({
   helpCode,
@@ -136,7 +136,10 @@ export const ActionBar: FC<Props> = ({...baseProps}) => {
   const focusAreas = useFocusAreas(canvasSize);
 
   // redo and undo
-  const {undoCount, redoCount, redo, undo} = useTemporalAnnoStore();
+  const redo = useAnnoHistoryStore(s => s.redo);
+  const undo = useAnnoHistoryStore(s => s.undo);
+  const undoCount = useAnnoHistoryStore(s => s.index);
+  const redoCount = useAnnoHistoryStore(s => s.actions.length - s.index - 1);
 
   return (
     <div {...baseProps}>

diff --git a/app/frontend/src/component/panel/AnnotateLayer.tsx b/app/frontend/src/component/panel/AnnotateLayer.tsx
@@ -5,7 +5,7 @@ import intl from 'react-intl-universal';
 import {useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useUIStore} from 'state/annotate/ui';
 
-import {useTemporalAnnoStore} from 'state/annotate/annotation-temporal';
+import {useAnnoHistoryStore} from 'state/annotate/annotation-provider';
 import {useStore as useDrawPolyStore} from 'state/annotate/polychain/draw';
 import {useStore as useEditPolyStore} from 'state/annotate/polychain/edit';
 import {useStore as useDrawRectStore} from 'state/annotate/rectangle/draw';
@@ -45,7 +45,7 @@ export const AnnotateLayer: FC<HTMLAttributes<HTMLDivElement>> = ({...divProps})
 
 const Loaded: FC<HTMLAttributes<HTMLDivElement>> = ({...divProps}) => {
   // Reset history when a new annotation is started.
-  const {clear} = useTemporalAnnoStore();
+  const clear = useAnnoHistoryStore(s => s.reset);
   useEffect(() => clear(), [clear]);
 
   const isDrawingPoly = useDrawPolyStore(s => s.vertices.length > 0);

diff --git a/app/frontend/src/component/panel/layer/Idle.tsx b/app/frontend/src/component/panel/layer/Idle.tsx
@@ -4,7 +4,7 @@ import intl from 'react-intl-universal';
 import {v4 as uuidv4} from 'uuid';
 import {message} from 'antd';
 
-import {useTemporalAnnoStore} from 'state/annotate/annotation-temporal';
+import {useAnnoHistoryStore} from 'state/annotate/annotation-provider';
 import {EntityComponentId, useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useUIStore} from 'state/annotate/ui';
 import {useStore as useEditPolyStore} from 'state/annotate/polychain/edit';
@@ -160,7 +160,8 @@ function useRenderSettings(): RenderSetting[] {
 }
 
 const IdleLayerTemporal: FC = () => {
-  const {undo, redo} = useTemporalAnnoStore();
+  const undo = useAnnoHistoryStore(s => s.undo);
+  const redo = useAnnoHistoryStore(s => s.redo);
   useHotkeys('ctrl+z, meta+z', () => undo());
   useHotkeys('ctrl+shift+z, meta+shift+z', () => redo());
   return <></>;