@ngenux/ngage-whiteboarding
Version:
A collaborative whiteboard React component with real-time synchronization
135 lines • 3.14 kB
TypeScript
import React from 'react';
import { ShapeProps, WhiteboardState, ToolType, DrawingAction, StrokeStyle, WhiteboardSyncState } from '../types';
type WhiteboardAction = {
type: 'SET_TOOL';
payload: ToolType;
} | {
type: 'SET_COLOR';
payload: string;
} | {
type: 'SET_BACKGROUND_COLOR';
payload: string;
} | {
type: 'SET_STROKE_WIDTH';
payload: number;
} | {
type: 'SET_STROKE_STYLE';
payload: StrokeStyle;
} | {
type: 'SET_OPACITY';
payload: number;
} | {
type: 'SET_USER_ID';
payload: string;
} | {
type: 'ADD_SHAPE';
payload: ShapeProps;
} | {
type: 'UPDATE_SHAPE';
payload: ShapeProps;
} | {
type: 'UPDATE_TEMP_SHAPE';
payload: ShapeProps;
} | {
type: 'SET_ACTIVE_DRAWING';
payload: ShapeProps;
} | {
type: 'REMOVE_ACTIVE_DRAWING';
payload: string;
} | {
type: 'CLEAR_ACTIVE_DRAWINGS';
} | {
type: 'SET_CLEAR_TIMESTAMP';
payload: number;
} | {
type: 'DELETE_SHAPE';
payload: string;
} | {
type: 'SELECT_SHAPE';
payload: string;
} | {
type: 'DESELECT_ALL';
} | {
type: 'SET_DRAWING';
payload: boolean;
} | {
type: 'SET_CAPTURE_ENABLED';
payload: boolean;
} | {
type: 'SET_CANVAS_SIZE';
payload: {
width: number;
height: number;
};
} | {
type: 'SET_CURRENT_DRAWING_SHAPE';
payload: ShapeProps | undefined;
} | {
type: 'CLEAR_CANVAS';
}
/** Empty local board when entering a room with no persisted data — does NOT bump lastClearTimestamp (unlike CLEAR_CANVAS), so sync_state from peers is not filtered out as "stale". */
| {
type: 'RESET_EMPTY_ROOM';
} | {
type: 'UNDO';
} | {
type: 'REDO';
} | {
type: 'SET_SHAPES';
payload: ShapeProps[];
} | {
type: 'USER_UNDO';
payload: string;
} | {
type: 'USER_REDO';
payload: string;
} | {
type: 'USER_CLEAR';
payload: string;
} | {
type: 'ERASE';
payload: {
shapeId: string;
erasePath: {
x: number;
y: number;
}[];
normalizedErasePath?: {
x: number;
y: number;
}[];
};
};
type WhiteboardContextType = {
state: WhiteboardState;
dispatch: React.Dispatch<WhiteboardAction>;
applyDrawingAction: (action: DrawingAction) => void;
getCurrentSyncState: () => WhiteboardSyncState;
requestStateFromPeers: () => void;
setQueueAction: (queueAction: (action: DrawingAction) => void) => void;
setCurrentRoomId: (roomId: string) => void;
normalizePoint: (point: {
x: number;
y: number;
}) => {
x: number;
y: number;
};
denormalizePoint: (normalizedPoint: {
x: number;
y: number;
}) => {
x: number;
y: number;
};
webSocketUrl?: string;
};
export declare const clearPersistedState: (roomId?: string) => void;
export declare const WhiteboardProvider: React.FC<{
children: React.ReactNode;
webSocketUrl?: string;
roomId?: string;
}>;
export declare const useWhiteboard: () => WhiteboardContextType;
export {};
//# sourceMappingURL=WhiteboardContext.d.ts.map