fix(review): address code review findings — tool conflicts, dual inputs, pin animation

1. TEXT and ERASER tool clicks now suppressed during review mode via
   reviewMode flag on ToolContext (read from ref for live value)
2. Object-comment input hidden when draftPin is active — only one
   creation input visible at a time
3. PinOverlay entrance animation removed — focus styling (scale 1.15x,
   alpha changes) no longer fights with fade-in animation loop
This commit is contained in:
Hiren Kangad
2026-03-12 22:09:12 +05:30
parent 16a677dc89
commit 318b7358e1
4 changed files with 14 additions and 28 deletions
+1 -27
View File
@@ -178,11 +178,7 @@ export class PinOverlay extends Container {
this.addChild(container);
// Entrance animation
container.alpha = 0;
container.scale.set(0.6);
this._animateEntrance(container);
// No entrance animation — focus styling must not be overwritten by animation.
return entry;
}
@@ -241,28 +237,6 @@ export class PinOverlay extends Container {
}
}
private _animateEntrance(pin: Container) {
const tick = () => {
if (pin.destroyed) return;
let done = true;
if (pin.alpha < 0.99) {
pin.alpha += (1 - pin.alpha) * 0.3;
done = false;
} else {
pin.alpha = 1;
}
const s = pin.scale.x;
if (s < 0.99) {
pin.scale.set(s + (1 - s) * 0.3);
done = false;
} else {
pin.scale.set(1);
}
if (!done) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
setGhostPin(pin: { objectId: string; pinX: number; pinY: number } | null) {
this._ghostPin = pin;
this._updateGhostPin();
+4
View File
@@ -49,6 +49,8 @@ export interface ToolContext {
textEditor?: TextEditor;
/** Switch back to select tool after placing text. */
switchToSelect?: () => void;
/** When true, destructive/creative tool clicks (TEXT, ERASER) are suppressed. */
reviewMode?: boolean;
}
export function activateTool(
@@ -82,6 +84,7 @@ export function activateTool(
container.style.cursor = 'text';
const onClick = (e: PointerEvent) => {
if (ctx.reviewMode) return; // Review mode suppresses text creation
const rect = container.getBoundingClientRect();
const world = viewport.toWorld(e.clientX - rect.left, e.clientY - rect.top);
@@ -154,6 +157,7 @@ export function activateTool(
selection.transformBox.update([]);
const onClick = (e: PointerEvent) => {
if (ctx.reviewMode) return; // Review mode suppresses eraser
const rect = container.getBoundingClientRect();
const world = viewport.toWorld(e.clientX - rect.left, e.clientY - rect.top);
const hit = selection._hitTest(world.x, world.y);
@@ -323,7 +323,7 @@ export default function FeedbackPanel({
onFilterChange={setFilter}
onSelectThread={updateExpandedThread}
onCollapse={() => setCollapsed(true)}
selectedObjectId={selectedObjectId}
selectedObjectId={draftPin ? null : selectedObjectId}
selectedObjectLabel={selectedLabel}
newCommentText={newCommentText}
onNewCommentChange={setNewCommentText}
+8
View File
@@ -102,6 +102,7 @@ export default function Editor({ isPublicView }: EditorProps) {
const [showMmImport, setShowMmImport] = useState(false);
const [showExport, setShowExport] = useState(false);
const [reviewMode, setReviewMode] = useState(false);
const reviewModeRef = useRef(false);
const [focusedThreadId, setFocusedThreadId] = useState<string | null>(null);
// Pulse signal: threadId to open, or null to collapse detail view
const [expandRequest, setExpandRequest] = useState<{ threadId: string | null; seq: number } | null>(null);
@@ -201,6 +202,11 @@ export default function Editor({ isPublicView }: EditorProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [objectCount]);
// Keep reviewModeRef in sync for tool handlers to read
useEffect(() => {
reviewModeRef.current = reviewMode;
}, [reviewMode]);
// Pins visible only in review mode
useEffect(() => {
if (!pinOverlay) return;
@@ -404,6 +410,8 @@ export default function Editor({ isPublicView }: EditorProps) {
textEditor: textEditor ?? undefined,
switchToSelect: () => setActiveTool(ToolType.SELECT),
};
// reviewMode is read at click time via getter so it stays current
Object.defineProperty(ctx, 'reviewMode', { get: () => reviewModeRef.current });
toolCleanupRef.current = activateTool(ctx, activeTool, { color, strokeWidth, fontSize });
}, [activeTool, color, strokeWidth, fontSize, onCanvasChange, textEditor]);