splitted broadcast

SysCV · Feb 22, 2024 · 6d4693d · 6d4693d
1 parent 88d75de
commit 6d4693d
Show file tree

Hide file tree

Showing 14 changed files with 422 additions and 300 deletions.
diff --git a/app/frontend/src/component/panel/entity/Card.tsx b/app/frontend/src/component/panel/entity/Card.tsx
@@ -19,7 +19,7 @@ import type {EntityId} from 'type/annotation';
 import type {ProjectSpec} from 'type/project_spec';
 import {ColorPalette} from './display';
 import {useEntityCategories} from 'common/hook';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useDeleteEntities} from 'state/annotate/annotation-broadcast';
 
 const {Paragraph, Text} = Typography;
 
@@ -74,7 +74,7 @@ export const EntityCard: FC<{
     return Object.keys(g.slices).map(s => parseInt(s));
   }, shallow);
 
-  const {deleteEntities} = useAnnoBroadcast();
+  const {deleteEntities} = useDeleteEntities();
 
   const isSelected = useRenderStore(s => s.select.ids.has(entityId));
   const isHovered = useRenderStore(s => s.mouse.hover?.entityId === entityId);

diff --git a/app/frontend/src/component/panel/entity/Form.tsx b/app/frontend/src/component/panel/entity/Form.tsx
@@ -3,13 +3,13 @@ import intl from 'react-intl-universal';
 import {Form, TreeSelect, TreeSelectProps, Space, Tag} from 'antd';
 
 import {useStore as useRenderStore} from 'state/annotate/render';
+import {useClearEntityCategory, useSetEntityCategory} from 'state/annotate/annotation-broadcast';
 
 import {CategoryAbbreviation} from 'component/panel/entity/display';
 
 import type {EntityId} from 'type/annotation';
 import type {ProjectSpec, Entry} from 'type/project_spec';
 import {useEntityCategories} from 'common/hook';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
 
 export function makeTreeNode(
   entry: Entry,
@@ -30,7 +30,8 @@ export function makeTreeNode(
 export const EntityForm: FC<{entityId: EntityId; projectSpec: ProjectSpec}> = ({entityId, projectSpec}) => {
   const sidx = useRenderStore(s => s.sliceIndex);
   const categories = useEntityCategories(entityId, sidx);
-  const {setEntityCategory, clearEntityCategory} = useAnnoBroadcast();
+  const {setEntityCategory} = useSetEntityCategory();
+  const {clearEntityCategory} = useClearEntityCategory();
 
   return (
     <Form layout="vertical" style={{width: 200}}>

diff --git a/app/frontend/src/component/panel/layer/Hover.tsx b/app/frontend/src/component/panel/layer/Hover.tsx
@@ -28,7 +28,7 @@ import {ComponentProximity} from 'state/annotate/render/mouse';
 import {ColorPalette} from '../entity/display';
 import {editStyle} from 'common/constant';
 import {getComponent} from 'state/annotate/annotation';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useAddComponents, useTransferComponent} from 'state/annotate/annotation-broadcast';
 
 const FullSize: CSSProperties = {position: 'absolute', left: 0, top: 0, width: '100%', height: '100%'};
 
@@ -174,7 +174,8 @@ const TopLevelHover: FC<HTMLAttributes<HTMLDivElement>> = ({...divProps}) => {
       [manipulation]
     )
   );
-  const {addComponents, transferComponent} = useAnnoBroadcast();
+  const {addComponents} = useAddComponents();
+  const {transferComponent} = useTransferComponent();
 
   const {isControlOrMetaPressed, isShiftPressed} = useControlMetaShiftPressed();
 

diff --git a/app/frontend/src/component/panel/layer/Idle.tsx b/app/frontend/src/component/panel/layer/Idle.tsx
@@ -21,7 +21,7 @@ import {editStyle, idleStyle} from 'common/constant';
 import {convertRGBA2Hex, isLightBackground} from 'common/color';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {coordinatesImageToCanvas} from 'common/geometry';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {usePaste} from 'state/annotate/annotation-broadcast';
 
 export const IdleLayer: FC<HTMLAttributes<HTMLDivElement>> = ({...divProps}) => {
   console.debug('render IdleLayer');
@@ -88,7 +88,7 @@ const PasteLoaded: FC<{copying: {ecids: EntityComponentId[]; sliceIndex: SliceIn
   copying: {ecids, sliceIndex},
 }) => {
   const sidx = useRenderStore(s => s.sliceIndex);
-  const {paste} = useAnnoBroadcast();
+  const {paste} = usePaste();
 
   useHotkeys(
     'ctrl+v, meta+v',

diff --git a/app/frontend/src/component/panel/layer/Translate.tsx b/app/frontend/src/component/panel/layer/Translate.tsx
@@ -13,7 +13,7 @@ import {createComponentSVG} from 'common/svg';
 import {editStyle} from 'common/constant';
 import {ColorPalette} from '../entity/display';
 import {getComponent} from 'state/annotate/annotation';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useTranslate} from 'state/annotate/annotation-broadcast';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   data: TranslateData;
@@ -32,7 +32,7 @@ export const TranslateLayer: FC<Props> = ({data, ...divProps}) => {
 
   const clearSelect = useRenderStore(s => s.select.clear);
   const finish = useRenderStore(s => s.translate.finish);
-  const {translate} = useAnnoBroadcast();
+  const {translate} = useTranslate();
 
   const ecs = useAnnoStore(
     useCallback(

diff --git a/app/frontend/src/component/panel/layer/mask/common.ts b/app/frontend/src/component/panel/layer/mask/common.ts
@@ -11,7 +11,7 @@ import {newComponentAdapter} from 'common/adapter';
 import {encodeRLE} from 'common/algorithm/rle';
 import {useVisibleEntities} from 'common/render';
 import {UpdateSliceMasksInput} from 'state/annotate/annotation';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useUpdateSliceMasks} from 'state/annotate/annotation-broadcast';
 
 // WARN(hxu): consider re-drawing only the updated part when running into performance issue.
 export function updateImageRendering(
@@ -101,7 +101,7 @@ export function useImageContext(init?: (ctx: CanvasRenderingContext2D) => void)
 
 export function useUpdateMask(imageContext: CanvasRenderingContext2D, prevMasks: EntityComponentMask[]) {
   const sliceIndex = useRenderStore(s => s.sliceIndex);
-  const {updateSliceMasks} = useAnnoBroadcast();
+  const {updateSliceMasks} = useUpdateSliceMasks();
 
   return useCallback(() => {
     const currMasks: EntityComponentMask[] = collectLocalMasks(imageContext).map(m => {

diff --git a/app/frontend/src/component/panel/layer/polychain/Draw.tsx b/app/frontend/src/component/panel/layer/polychain/Draw.tsx
@@ -23,7 +23,7 @@ import {ColorPalette} from 'component/panel/entity/display';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {useKeyPressed} from 'common/keyboard';
 import {getComponent} from 'state/annotate/annotation';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useAddComponent} from 'state/annotate/annotation-broadcast';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   width: number;
@@ -89,7 +89,7 @@ const LayerWithEntityId: FC<Props & {entityId: EntityId}> = ({entityId, width, h
     )
   );
 
-  const {addComponent} = useAnnoBroadcast();
+  const {addComponent} = useAddComponent();
 
   const drawPolychain = useDrawPolychain(transform);
   const drawAnnoVertex = useDrawVertex(transform);

diff --git a/app/frontend/src/component/panel/layer/polychain/Edit.tsx b/app/frontend/src/component/panel/layer/polychain/Edit.tsx
@@ -13,7 +13,7 @@ import {useDrawPolychain, useDrawDashedLine, useDrawVertex} from 'common/render'
 import type {Data as EditData} from 'state/annotate/polychain/edit';
 import {ColorPalette} from 'component/panel/entity/display';
 import {editStyle} from 'common/constant';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useUpdatePolychainVertices} from 'state/annotate/annotation-broadcast';
 
 const Canvas: FC<CanvasHTMLAttributes<HTMLCanvasElement> & {data: EditData}> = ({data, ...canvasProps}) => {
   const {width: imw, height: imh} = useRenderStore(s => s.sliceSize!, shallow);
@@ -68,7 +68,7 @@ const Canvas: FC<CanvasHTMLAttributes<HTMLCanvasElement> & {data: EditData}> = (
     )
   );
 
-  const {updatePolychainVertices} = useAnnoBroadcast();
+  const {updatePolychainVertices} = useUpdatePolychainVertices();
   const finishEdit = useEditStore(s => s.finish);
   const finish = useCallback(() => {
     updatePolychainVertices({sliceIndex, entityId: eid, componentId: cid, vertices});

diff --git a/app/frontend/src/component/panel/layer/rectangle/Draw.tsx b/app/frontend/src/component/panel/layer/rectangle/Draw.tsx
@@ -14,7 +14,7 @@ import {EntityId} from 'type/annotation';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {Button, Space, Tag, Tooltip} from 'antd';
 import {ClearOutlined} from '@ant-design/icons';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useAddComponent} from 'state/annotate/annotation-broadcast';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   width: number;
@@ -50,7 +50,7 @@ const LayerWithEntityId: FC<Props & {entityId: EntityId}> = ({entityId, width, h
     )
   );
 
-  const {addComponent} = useAnnoBroadcast();
+  const {addComponent} = useAddComponent();
   useHotkeys(
     'esc',
     useCallback(() => finish(), [finish])

diff --git a/app/frontend/src/component/panel/layer/rectangle/Edit.tsx b/app/frontend/src/component/panel/layer/rectangle/Edit.tsx
@@ -9,7 +9,7 @@ import {coordinatesCanvasToImage, limitCoordinates} from 'common/geometry';
 import {useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useEditStore, Data} from 'state/annotate/rectangle/edit';
 import {ColorPalette} from 'component/panel/entity/display';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useUpdateRectangleAnchors} from 'state/annotate/annotation-broadcast';
 
 const Canvas: FC<{data: Data} & CanvasHTMLAttributes<HTMLCanvasElement>> = ({data, ...canvasProps}) => {
   const {width: imw, height: imh} = useRenderStore(s => s.sliceSize!, shallow);
@@ -36,7 +36,7 @@ const Canvas: FC<{data: Data} & CanvasHTMLAttributes<HTMLCanvasElement>> = ({dat
   );
 
   const sliceIndex = useRenderStore(s => s.sliceIndex);
-  const {updateRectangleAnchors} = useAnnoBroadcast();
+  const {updateRectangleAnchors} = useUpdateRectangleAnchors();
   const finishEdit = useEditStore(s => s.finish);
   const finish = useCallback(() => {
     const {p, q} = anchors;

diff --git a/app/frontend/src/component/panel/menu/common.ts b/app/frontend/src/component/panel/menu/common.ts
@@ -8,7 +8,13 @@ import {useStore as useRenderStore} from 'state/annotate/render';
 
 import type {EntityId, ComponentId} from 'type/annotation';
 import {getSlice} from 'state/annotate/annotation';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {
+  useDeleteComponents,
+  useDeleteEntities,
+  usePaste,
+  useSeparateComponent,
+  useTruncateEntities,
+} from 'state/annotate/annotation-broadcast';
 
 export type Action = {
   title: string;
@@ -24,7 +30,8 @@ export type Action = {
 export function useComponentActions(entityId: EntityId, componentId: ComponentId): Action[] {
   const sliceIndex = useRenderStore(s => s.sliceIndex);
 
-  const {separateComponent, deleteComponents} = useAnnoBroadcast();
+  const {separateComponent} = useSeparateComponent();
+  const {deleteComponents} = useDeleteComponents();
   const startManipulation = useRenderStore(s => s.manipulate.start);
 
   const nc = useAnnoStore(
@@ -72,7 +79,9 @@ export function useEntityActions(): Action[] {
   const selectIds = useRenderStore(s => s.select.ids);
   const sliceIndex = useRenderStore(s => s.sliceIndex);
 
-  const {deleteEntities, deleteComponents, truncateEntities} = useAnnoBroadcast();
+  const {deleteEntities} = useDeleteEntities();
+  const {deleteComponents} = useDeleteComponents();
+  const {truncateEntities} = useTruncateEntities();
 
   // copy
   const copy = useRenderStore(s => s.copy);
@@ -89,7 +98,7 @@ export function useEntityActions(): Action[] {
   }, [entities, sliceIndex, selectIds]);
 
   // paste
-  const {paste} = useAnnoBroadcast();
+  const {paste} = usePaste();
   const actions: Action[] = [
     {
       title: intl.get('paste'),

diff --git a/app/frontend/src/component/panel/menu/mask.ts b/app/frontend/src/component/panel/menu/mask.ts
@@ -9,7 +9,7 @@ import {ConfigContext} from 'common/context';
 import {expand, rleCountsFromStringCOCO, rleCountsToStringCOCO, shrink} from 'common/algorithm/rle';
 import {Mask, TrackReq} from 'openapi/nutsh';
 import {correctSliceUrl} from 'common/route';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useAddComponents} from 'state/annotate/annotation-broadcast';
 
 export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
   const config = useContext(ConfigContext);
@@ -22,7 +22,7 @@ export function useActions(mask: MaskComponent, eid: EntityId): Action[] {
   const currentSliceIndex = useRenderStore(s => s.sliceIndex);
   const currentSliceUrl = useRenderStore(s => correctSliceUrl(s.sliceUrls[s.sliceIndex]));
   const subsequentSliceUrls = useRenderStore(s => s.sliceUrls.slice(s.sliceIndex + 1).map(correctSliceUrl));
-  const {addComponents} = useAnnoBroadcast();
+  const {addComponents} = useAddComponents();
 
   const track = useCallback(
     (mask: MaskComponent) => {

diff --git a/app/frontend/src/component/panel/menu/polychain.ts b/app/frontend/src/component/panel/menu/polychain.ts
@@ -4,10 +4,11 @@ import {useStore as useRenderStore} from 'state/annotate/render';
 import {PolychainComponent} from 'type/annotation';
 
 import {Action} from './common';
-import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
+import {useDeletePolychainVertex, useSetPolychainVertexBezier} from 'state/annotate/annotation-broadcast';
 
 export function useActions(component: PolychainComponent): Action[] {
-  const {deletePolychainVertex, setPolychainVertexBezier} = useAnnoBroadcast();
+  const {deletePolychainVertex} = useDeletePolychainVertex();
+  const {setPolychainVertexBezier} = useSetPolychainVertexBezier();
 
   const sidx = useRenderStore(s => s.sliceIndex);
   const hover = useRenderStore(s => s.mouse.hover, shallow);