broadcast only

app/frontend/src/common/yjs/event.ts

@@ -28,10 +28,6 @@ function useComponentsListener() {
 
   useEffect(() => {
     const fn = (e: Y.YMapEvent<ComponentYjs>) => {
-      if (e.transaction.local) {
-        return;
-      }
-
       for (const [cid, cc] of e.changes.keys) {
         switch (cc.action) {
           case 'add': {
@@ -84,10 +80,6 @@ function useRectangleAnchorsListener() {
 
   useEffect(() => {
     const fn = (e: Y.YMapEvent<RectangleAnchors>) => {
-      if (e.transaction.local) {
-        return;
-      }
-
       for (const cid of e.keysChanged) {
         const info = comps.get(cid);
         if (info) {
@@ -116,10 +108,6 @@ function usePolychainVerticesListener() {
 
   useEffect(() => {
     const fn = (e: Y.YMapEvent<Y.Array<Vertex>>) => {
-      if (e.transaction.local) {
-        return;
-      }
-
       for (const cid of e.keysChanged) {
         const info = comps.get(cid);
         if (!info) {
@@ -143,9 +131,6 @@ function usePolychainVerticesListener() {
   useEffect(() => {
     const fn = (es: Y.YEvent<Y.Array<Vertex>>[]) => {
       for (const e of es) {
-        if (e.transaction.local) {
-          continue;
-        }
         if (e.path.length !== 1) {
           continue;
         }

app/frontend/src/component/panel/entity/Card.tsx

@@ -19,6 +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';
 
 const {Paragraph, Text} = Typography;
 
@@ -73,7 +74,7 @@ export const EntityCard: FC<{
     return Object.keys(g.slices).map(s => parseInt(s));
   }, shallow);
 
-  const deleteEntities = useAnnoStore(s => s.deleteEntities);
+  const {deleteEntities} = useAnnoBroadcast();
 
   const isSelected = useRenderStore(s => s.select.ids.has(entityId));
   const isHovered = useRenderStore(s => s.mouse.hover?.entityId === entityId);

app/frontend/src/component/panel/entity/Form.tsx

@@ -9,7 +9,7 @@ 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 {useAnnoStore} from 'state/annotate/annotation-provider';
+import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
 
 export function makeTreeNode(
   entry: Entry,
@@ -30,8 +30,7 @@ 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 = useAnnoStore(s => s.setEntityCategory);
-  const clearEntityCategory = useAnnoStore(s => s.clearEntityCategory);
+  const {setEntityCategory, clearEntityCategory} = useAnnoBroadcast();
 
   return (
     <Form layout="vertical" style={{width: 200}}>

app/frontend/src/component/panel/layer/Hover.tsx

@@ -28,6 +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';
 
 const FullSize: CSSProperties = {position: 'absolute', left: 0, top: 0, width: '100%', height: '100%'};
 
@@ -173,8 +174,7 @@ const TopLevelHover: FC<HTMLAttributes<HTMLDivElement>> = ({...divProps}) => {
       [manipulation]
     )
   );
-  const transferComponent = useAnnoStore(s => s.transferComponent);
-  const addComponents = useAnnoStore(s => s.addComponents);
+  const {addComponents, transferComponent} = useAnnoBroadcast();
 
   const {isControlOrMetaPressed, isShiftPressed} = useControlMetaShiftPressed();
 

app/frontend/src/component/panel/layer/Idle.tsx

@@ -4,7 +4,6 @@ import intl from 'react-intl-universal';
 import {v4 as uuidv4} from 'uuid';
 import {message} from 'antd';
 
-import {useAnnoStore} from 'state/annotate/annotation-provider';
 import {useTemporalAnnoStore} from 'state/annotate/annotation-temporal';
 import {EntityComponentId, useStore as useRenderStore} from 'state/annotate/render';
 import {useStore as useUIStore} from 'state/annotate/ui';
@@ -22,6 +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';
 
 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 = useAnnoStore(s => s.paste);
+  const {paste} = useAnnoBroadcast();
 
   useHotkeys(
     'ctrl+v, meta+v',

app/frontend/src/component/panel/layer/Translate.tsx

@@ -13,6 +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';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   data: TranslateData;
@@ -31,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 = useAnnoStore(s => s.translate);
+  const {translate} = useAnnoBroadcast();
 
   const ecs = useAnnoStore(
     useCallback(

app/frontend/src/component/panel/layer/mask/common.ts

@@ -4,14 +4,14 @@ import shallow from 'zustand/shallow';
 import {coordinatesImageToCanvas} from 'common/geometry';
 import {ViewportTransform} from 'state/annotate/render/viewport';
 import {useStore as useRenderStore} from 'state/annotate/render';
-import {useAnnoStore} from 'state/annotate/annotation-provider';
 import {ComponentId, EntityId, MaskComponent} from 'type/annotation';
 import {editStyle} from 'common/constant';
 import {ColorPalette} from 'component/panel/entity/display';
 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';
 
 // 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 = useAnnoStore(s => s.updateSliceMasks);
+  const {updateSliceMasks} = useAnnoBroadcast();
 
   return useCallback(() => {
     const currMasks: EntityComponentMask[] = collectLocalMasks(imageContext).map(m => {

app/frontend/src/component/panel/layer/polychain/Draw.tsx

@@ -23,6 +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';
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   width: number;
@@ -88,7 +89,7 @@ const LayerWithEntityId: FC<Props & {entityId: EntityId}> = ({entityId, width, h
     )
   );
 
-  const addComponent = useAnnoStore(s => s.addComponent);
+  const {addComponent} = useAnnoBroadcast();
 
   const drawPolychain = useDrawPolychain(transform);
   const drawAnnoVertex = useDrawVertex(transform);

app/frontend/src/component/panel/layer/polychain/Edit.tsx

@@ -13,6 +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';
 
 const Canvas: FC<CanvasHTMLAttributes<HTMLCanvasElement> & {data: EditData}> = ({data, ...canvasProps}) => {
   const {width: imw, height: imh} = useRenderStore(s => s.sliceSize!, shallow);
@@ -67,12 +68,12 @@ const Canvas: FC<CanvasHTMLAttributes<HTMLCanvasElement> & {data: EditData}> = (
     )
   );
 
-  const updateVertices = useAnnoStore(s => s.updatePolychainVertices);
+  const {updatePolychainVertices} = useAnnoBroadcast();
   const finishEdit = useEditStore(s => s.finish);
   const finish = useCallback(() => {
-    updateVertices({sliceIndex, entityId: eid, componentId: cid, vertices});
+    updatePolychainVertices({sliceIndex, entityId: eid, componentId: cid, vertices});
     finishEdit();
-  }, [cid, eid, finishEdit, sliceIndex, updateVertices, vertices]);
+  }, [cid, eid, finishEdit, sliceIndex, updatePolychainVertices, vertices]);
 
   return (
     <canvas

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 {useAnnoStore} from 'state/annotate/annotation-provider';
+import {useAnnoBroadcast} 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 = useAnnoStore(s => s.addComponent);
+  const {addComponent} = useAnnoBroadcast();
   useHotkeys(
     'esc',
     useCallback(() => finish(), [finish])

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 {useAnnoStore} from 'state/annotate/annotation-provider';
+import {useAnnoBroadcast} 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 updateAnchors = useAnnoStore(s => s.updateRectangleAnchors);
+  const {updateRectangleAnchors} = useAnnoBroadcast();
   const finishEdit = useEditStore(s => s.finish);
   const finish = useCallback(() => {
     const {p, q} = anchors;
@@ -45,9 +45,9 @@ const Canvas: FC<{data: Data} & CanvasHTMLAttributes<HTMLCanvasElement>> = ({dat
     const x2 = Math.max(p.x, q.x);
     const y2 = Math.max(p.y, q.y);
 
-    updateAnchors({sliceIndex, entityId, componentId, topLeft: {x: x1, y: y1}, bottomRight: {x: x2, y: y2}});
+    updateRectangleAnchors({sliceIndex, entityId, componentId, topLeft: {x: x1, y: y1}, bottomRight: {x: x2, y: y2}});
     finishEdit();
-  }, [anchors, componentId, entityId, finishEdit, sliceIndex, updateAnchors]);
+  }, [anchors, componentId, entityId, finishEdit, sliceIndex, updateRectangleAnchors]);
 
   return (
     <canvas

app/frontend/src/component/panel/menu/common.ts

@@ -8,6 +8,7 @@ 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';
 
 export type Action = {
   title: string;
@@ -23,8 +24,7 @@ export type Action = {
 export function useComponentActions(entityId: EntityId, componentId: ComponentId): Action[] {
   const sliceIndex = useRenderStore(s => s.sliceIndex);
 
-  const separateComponent = useAnnoStore(s => s.separateComponent);
-  const deleteComponents = useAnnoStore(s => s.deleteComponents);
+  const {separateComponent, deleteComponents} = useAnnoBroadcast();
   const startManipulation = useRenderStore(s => s.manipulate.start);
 
   const nc = useAnnoStore(
@@ -72,9 +72,7 @@ export function useEntityActions(): Action[] {
   const selectIds = useRenderStore(s => s.select.ids);
   const sliceIndex = useRenderStore(s => s.sliceIndex);
 
-  const deleteComponents = useAnnoStore(s => s.deleteComponents);
-  const deleteEntities = useAnnoStore(s => s.deleteEntities);
-  const truncateEntities = useAnnoStore(s => s.truncateEntities);
+  const {deleteEntities, deleteComponents, truncateEntities} = useAnnoBroadcast();
 
   // copy
   const copy = useRenderStore(s => s.copy);
@@ -91,7 +89,7 @@ export function useEntityActions(): Action[] {
   }, [entities, sliceIndex, selectIds]);
 
   // paste
-  const paste = useAnnoStore(s => s.paste);
+  const {paste} = useAnnoBroadcast();
   const actions: Action[] = [
     {
       title: intl.get('paste'),

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 {useAnnoStore} from 'state/annotate/annotation-provider';
+import {useAnnoBroadcast} 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 = useAnnoStore(s => s.addComponents);
+  const {addComponents} = useAnnoBroadcast();
 
   const track = useCallback(
     (mask: MaskComponent) => {

app/frontend/src/component/panel/menu/polychain.ts

@@ -4,11 +4,10 @@ import {useStore as useRenderStore} from 'state/annotate/render';
 import {PolychainComponent} from 'type/annotation';
 
 import {Action} from './common';
-import {useAnnoStore} from 'state/annotate/annotation-provider';
+import {useAnnoBroadcast} from 'state/annotate/annotation-broadcast';
 
 export function useActions(component: PolychainComponent): Action[] {
-  const setPolychainVertexBezier = useAnnoStore(s => s.setPolychainVertexBezier);
-  const deletePolychainVertex = useAnnoStore(s => s.deletePolychainVertex);
+  const {deletePolychainVertex, setPolychainVertexBezier} = useAnnoBroadcast();
 
   const sidx = useRenderStore(s => s.sliceIndex);
   const hover = useRenderStore(s => s.mouse.hover, shallow);