feat: annotation UX overhaul, animated packing, toolbar redesign
- PinOverlay: zero-allocation rendering with in-place Graphics/Text updates, fix WebGL texture crash (addressModeU null) from orphaned Text objects - Pins always visible on media, track during drag via updatePositions() fast path - Replace eraser with Review mode in toolbar tool group (orange gradient) - Add tool instruction hints bar below toolbar (context-sensitive per tool) - Feedback panel: glassmorphism, improved ThreadDetail/CommentItem/ThreadListItem - Timestamps: relative with "ago" suffix, full date on hover tooltip - De-emphasize pin numbers, show status text in thread list - Animated arrangement transitions (easeOutCubic, 320ms) for pack/grid/row/column - Disable snap guides (user requested) - Paste now selects newly created items - Remove eraser keyboard shortcuts, remap tool shortcuts - Orphaned thread cleanup: safe destroy check for deleted media pins
This commit is contained in:
Hiren Kangad
+223
-134
@@ -2,63 +2,64 @@ import { Container, Graphics, Text, TextStyle } from 'pixi.js';
|
||||
import type { Viewport } from 'pixi-viewport';
|
||||
import type { AnnotationStore } from '../stores/annotationStore';
|
||||
import type { SceneManager } from './SceneManager';
|
||||
import { getItemWorldBounds } from './SceneManager';
|
||||
import { getAuthorColorHex, getAuthorInitial } from '../utils/authorColors';
|
||||
|
||||
const PIN_RADIUS = 12;
|
||||
const PIN_RADIUS = 11;
|
||||
const PIN_COLOR_RESOLVED = 0x555555;
|
||||
const TAIL_WIDTH = 6;
|
||||
const TAIL_HEIGHT = 8;
|
||||
|
||||
// Tail direction: 225° (down-left) in standard math coords.
|
||||
// In PixiJS screen coords (+y down), 225° maps to:
|
||||
// cos(225°) = -√2/2 (left)
|
||||
// sin(225°) = +√2/2 (down, because +y is down in screen space)
|
||||
// So the circle center is offset UP-RIGHT from the anchor tip:
|
||||
// cx_offset = +r * √2/2, cy_offset = -r * √2/2
|
||||
const SIN45 = Math.SQRT1_2; // √2/2 ≈ 0.7071
|
||||
function drawBubble(gfx: Graphics, r: number, color: number, alpha: number, scale: number): void {
|
||||
const padding = r * 0.3;
|
||||
const bubbleW = r * 2 + padding * 2;
|
||||
const bubbleH = r * 2 + padding;
|
||||
const cornerR = r * 0.4;
|
||||
const tailW = TAIL_WIDTH * scale;
|
||||
const tailH = TAIL_HEIGHT * scale;
|
||||
const bx = -bubbleW / 2;
|
||||
const by = -tailH - bubbleH;
|
||||
|
||||
/**
|
||||
* Draws a Figma-style teardrop pin whose tip lands at (0, 0).
|
||||
* The circle body is offset up-right; the tail points down-left to (0,0).
|
||||
*
|
||||
* @param gfx Graphics object (drawn in its own local space, tip = origin)
|
||||
* @param r Pin radius (already scaled to world space)
|
||||
* @param color Fill color (0xRRGGBB)
|
||||
* @param alpha Fill alpha
|
||||
*/
|
||||
function drawTeardrop(gfx: Graphics, r: number, color: number, alpha: number): void {
|
||||
// Circle center relative to tip
|
||||
const cx = r * SIN45;
|
||||
const cy = -r * SIN45;
|
||||
|
||||
// Half-angle of the tail aperture from the tip (in radians).
|
||||
// Controls how wide/sharp the tail looks. ~20° gives a nice taper.
|
||||
const tailHalfAngle = (20 * Math.PI) / 180;
|
||||
|
||||
// Angle from circle center toward tip = 225° in screen coords
|
||||
const tipAngle = (225 * Math.PI) / 180;
|
||||
|
||||
// The two "wing" angles on the circle where the tail edges start
|
||||
const wingAngle1 = tipAngle - tailHalfAngle;
|
||||
const wingAngle2 = tipAngle + tailHalfAngle;
|
||||
|
||||
// Build the teardrop as a single filled path:
|
||||
// start at wing1 on circle → arc around (the "long way" CCW past top) → wing2 → line to tip → close
|
||||
gfx.moveTo(cx + r * Math.cos(wingAngle1), cy + r * Math.sin(wingAngle1));
|
||||
// Arc from wingAngle1 to wingAngle2 going CCW (counterclockwise = increasing angle in screen space)
|
||||
// "long way" means going through the top of the circle (not through 225°).
|
||||
// In PixiJS, arc() takes (cx, cy, r, startAngle, endAngle, anticlockwise).
|
||||
// We want the arc that does NOT pass through 225°, so go anticlockwise from wingAngle1 to wingAngle2.
|
||||
gfx.arc(cx, cy, r, wingAngle1, wingAngle2, true);
|
||||
gfx.lineTo(0, 0); // tip at anchor
|
||||
gfx.roundRect(bx, by, bubbleW, bubbleH, cornerR);
|
||||
gfx.fill({ color, alpha });
|
||||
gfx.moveTo(-tailW, -tailH);
|
||||
gfx.lineTo(0, 0);
|
||||
gfx.lineTo(tailW, -tailH);
|
||||
gfx.closePath();
|
||||
gfx.fill({ color, alpha });
|
||||
gfx.roundRect(bx, by, bubbleW, bubbleH, cornerR);
|
||||
gfx.stroke({ color: 0xffffff, width: 1.2 * scale, alpha: alpha * 0.5 });
|
||||
}
|
||||
|
||||
// Shared TextStyle to avoid recreating per pin
|
||||
const sharedStyle = new TextStyle({
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold',
|
||||
fontFamily: 'Inter, system-ui, sans-serif',
|
||||
});
|
||||
|
||||
interface PinData {
|
||||
container: Container;
|
||||
gfx: Graphics;
|
||||
initialText: Text;
|
||||
badge: Graphics | null;
|
||||
badgeText: Text | null;
|
||||
version: string; // tracks thread data changes
|
||||
}
|
||||
|
||||
/**
|
||||
* PinOverlay — comment bubbles in a separate overlay Container.
|
||||
*
|
||||
* Position: uses getItemWorldBounds() which reads item.data.x/y (always current).
|
||||
* Visuals: Graphics redrawn in-place (clear + redraw), Text objects reused.
|
||||
* No objects are created or destroyed during drag — only position.set() calls.
|
||||
*/
|
||||
export class PinOverlay extends Container {
|
||||
private _pins = new Map<string, Container>();
|
||||
private _pool: Container[] = [];
|
||||
private _pins = new Map<string, PinData>();
|
||||
private _viewport: Viewport;
|
||||
private _scene: SceneManager;
|
||||
private _store: AnnotationStore;
|
||||
private _lastScale = -1;
|
||||
|
||||
constructor(viewport: Viewport, scene: SceneManager, store: AnnotationStore) {
|
||||
super();
|
||||
@@ -67,124 +68,212 @@ export class PinOverlay extends Container {
|
||||
this._store = store;
|
||||
}
|
||||
|
||||
private _acquire(): Container {
|
||||
const c = this._pool.pop() || new Container();
|
||||
c.removeChildren();
|
||||
c.visible = true;
|
||||
c.eventMode = 'none';
|
||||
c.cursor = 'default';
|
||||
return c;
|
||||
private _threadVersion(t: { status: string; created_by: string; comment_count: number }): string {
|
||||
return `${t.status}|${t.created_by}|${t.comment_count}`;
|
||||
}
|
||||
|
||||
private _release(c: Container) {
|
||||
c.visible = false;
|
||||
this._pool.push(c);
|
||||
private _getAnchorWorld(thread: { object_id: string; anchor_type: string; pin_x: number | null; pin_y: number | null }): { x: number; y: number } | null {
|
||||
const item = this._scene.items.get(thread.object_id);
|
||||
if (!item) return null;
|
||||
const b = getItemWorldBounds(item);
|
||||
if (thread.anchor_type === 'point' && thread.pin_x != null && thread.pin_y != null) {
|
||||
return { x: b.x + thread.pin_x * b.w, y: b.y + thread.pin_y * b.h };
|
||||
}
|
||||
return { x: b.x + b.w * 0.9, y: b.y };
|
||||
}
|
||||
|
||||
/** Call on every viewport moved/zoomed event and on store change */
|
||||
/**
|
||||
* Fast path: only update positions. Called during drag.
|
||||
* Zero allocations, zero texture work.
|
||||
*/
|
||||
updatePositions() {
|
||||
for (const [threadId, entry] of this._pins) {
|
||||
const thread = this._store.threads.get(threadId);
|
||||
if (!thread) continue;
|
||||
const pos = this._getAnchorWorld(thread);
|
||||
if (pos) {
|
||||
entry.container.position.set(pos.x, pos.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Full refresh: sync pins with store, rebuild visuals on zoom/data change.
|
||||
* Call on zoom, store change, or scene change — NOT during drag (use updatePositions).
|
||||
*/
|
||||
refresh(showResolved = false) {
|
||||
const scale = 1 / this._viewport.scale.x;
|
||||
|
||||
// Return current pins to pool
|
||||
for (const c of this._pins.values()) this._release(c);
|
||||
this._pins.clear();
|
||||
const scaleChanged = Math.abs(scale - this._lastScale) > 0.0001;
|
||||
this._lastScale = scale;
|
||||
|
||||
const r = PIN_RADIUS * scale;
|
||||
const active = new Set<string>();
|
||||
|
||||
for (const thread of this._store.threads.values()) {
|
||||
if (thread.status === 'resolved' && !showResolved) continue;
|
||||
|
||||
const item = this._scene.items.get(thread.object_id);
|
||||
if (!item || !item.displayObject) continue;
|
||||
const pos = this._getAnchorWorld(thread);
|
||||
if (!pos) continue;
|
||||
|
||||
const bounds = item.displayObject.getBounds();
|
||||
let wx: number, wy: number;
|
||||
active.add(thread.id);
|
||||
const version = this._threadVersion(thread);
|
||||
const existing = this._pins.get(thread.id);
|
||||
|
||||
if (thread.anchor_type === 'point' && thread.pin_x != null && thread.pin_y != null) {
|
||||
wx = bounds.x + thread.pin_x * bounds.width;
|
||||
wy = bounds.y + thread.pin_y * bounds.height;
|
||||
} else {
|
||||
// Default: top-right corner of object bounds
|
||||
wx = bounds.x + bounds.width;
|
||||
wy = bounds.y;
|
||||
if (existing) {
|
||||
existing.container.position.set(pos.x, pos.y);
|
||||
|
||||
if (existing.version !== version || scaleChanged) {
|
||||
this._updateVisuals(existing, thread, r, scale);
|
||||
existing.version = version;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// Create new pin — only happens on store change, never during drag
|
||||
const entry = this._createPin(thread, r, scale, pos);
|
||||
this._pins.set(thread.id, entry);
|
||||
}
|
||||
|
||||
// Remove pins whose threads are gone
|
||||
for (const [id, entry] of this._pins) {
|
||||
if (!active.has(id)) {
|
||||
this._destroyPin(entry);
|
||||
this._pins.delete(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _createPin(thread: any, r: number, scale: number, pos: { x: number; y: number }): PinData {
|
||||
const container = new Container();
|
||||
container.position.set(pos.x, pos.y);
|
||||
container.eventMode = 'static';
|
||||
container.cursor = 'pointer';
|
||||
(container as any)._threadId = thread.id;
|
||||
|
||||
const gfx = new Graphics();
|
||||
container.addChild(gfx);
|
||||
|
||||
const initialText = new Text({ text: '', style: sharedStyle.clone() });
|
||||
initialText.anchor.set(0.5);
|
||||
container.addChild(initialText);
|
||||
|
||||
const badge = new Graphics();
|
||||
badge.visible = false;
|
||||
container.addChild(badge);
|
||||
|
||||
const badgeText = new Text({ text: '', style: sharedStyle.clone() });
|
||||
badgeText.anchor.set(0.5);
|
||||
badgeText.visible = false;
|
||||
container.addChild(badgeText);
|
||||
|
||||
const entry: PinData = { container, gfx, initialText, badge, badgeText, version: '' };
|
||||
this._updateVisuals(entry, thread, r, scale);
|
||||
entry.version = this._threadVersion(thread);
|
||||
|
||||
this.addChild(container);
|
||||
|
||||
// Entrance animation
|
||||
container.alpha = 0;
|
||||
container.scale.set(0.6);
|
||||
this._animateEntrance(container);
|
||||
|
||||
return entry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update visuals IN PLACE — no object creation or destruction.
|
||||
* Graphics are cleared and redrawn. Text content/style updated.
|
||||
*/
|
||||
private _updateVisuals(entry: PinData, thread: any, r: number, scale: number) {
|
||||
const isResolved = thread.status === 'resolved';
|
||||
const fillColor = isResolved ? PIN_COLOR_RESOLVED : getAuthorColorHex(thread.created_by);
|
||||
const fillAlpha = isResolved ? 0.5 : 1.0;
|
||||
const fillAlpha = isResolved ? 0.45 : 0.92;
|
||||
|
||||
// Container whose origin = anchor tip
|
||||
const pin = this._acquire();
|
||||
pin.position.set(wx, wy);
|
||||
pin.eventMode = 'static';
|
||||
pin.cursor = 'pointer';
|
||||
(pin as any)._threadId = thread.id;
|
||||
// Redraw bubble — clear() keeps the same GPU buffer
|
||||
entry.gfx.clear();
|
||||
drawBubble(entry.gfx, r, fillColor, fillAlpha, scale);
|
||||
|
||||
// ── Teardrop body ──
|
||||
const gfx = new Graphics();
|
||||
drawTeardrop(gfx, r, fillColor, fillAlpha);
|
||||
// White stroke around the circle part only (drawn as a separate circle stroke)
|
||||
gfx.circle(r * SIN45, -r * SIN45, r);
|
||||
gfx.stroke({ color: 0xffffff, width: 1.5 * scale, alpha: isResolved ? 0.4 : 0.85 });
|
||||
pin.addChild(gfx);
|
||||
|
||||
// ── Author initial ──
|
||||
// Update initial text
|
||||
const authorName = thread.comments[0]?.author_name ?? '';
|
||||
const initial = getAuthorInitial(authorName);
|
||||
const initialText = new Text({
|
||||
text: initial,
|
||||
style: new TextStyle({
|
||||
fontSize: r * 1.1,
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold',
|
||||
fontFamily: 'Inter, system-ui, sans-serif',
|
||||
}),
|
||||
});
|
||||
initialText.anchor.set(0.5);
|
||||
// Center on the circle body
|
||||
initialText.position.set(r * SIN45, -r * SIN45);
|
||||
pin.addChild(initialText);
|
||||
const tailH = TAIL_HEIGHT * scale;
|
||||
const bubbleH = r * 2 + r * 0.3;
|
||||
const bubbleCenterY = -tailH - bubbleH / 2;
|
||||
|
||||
// ── Pin number label (#N) ──
|
||||
const pinNum = this._store.getPinNumber(thread.id);
|
||||
const numLabel = new Text({
|
||||
text: `#${pinNum}`,
|
||||
style: new TextStyle({
|
||||
fontSize: r * 0.75,
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold',
|
||||
fontFamily: 'Inter, system-ui, sans-serif',
|
||||
dropShadow: {
|
||||
color: '#000000',
|
||||
blur: 2 * scale,
|
||||
distance: 0,
|
||||
alpha: 0.6,
|
||||
},
|
||||
}),
|
||||
});
|
||||
numLabel.anchor.set(0, 1);
|
||||
// Place just to the right of the circle top
|
||||
numLabel.position.set(r * SIN45 + r * 1.1, -r * SIN45 - r * 0.9);
|
||||
pin.addChild(numLabel);
|
||||
entry.initialText.text = initial;
|
||||
entry.initialText.style.fontSize = r * 1.05;
|
||||
entry.initialText.position.set(0, bubbleCenterY);
|
||||
|
||||
if (!pin.parent) this.addChild(pin);
|
||||
this._pins.set(thread.id, pin);
|
||||
// Update badge
|
||||
if (thread.comment_count > 1) {
|
||||
const padding = r * 0.3;
|
||||
const bubbleW = r * 2 + padding * 2;
|
||||
const badgeR = r * 0.45;
|
||||
const badgeX = bubbleW / 2 - badgeR * 0.5;
|
||||
const badgeY = -tailH - bubbleH + badgeR * 0.5;
|
||||
|
||||
entry.badge!.clear();
|
||||
entry.badge!.circle(badgeX, badgeY, badgeR);
|
||||
entry.badge!.fill({ color: 0x000000, alpha: 0.6 });
|
||||
entry.badge!.circle(badgeX, badgeY, badgeR);
|
||||
entry.badge!.stroke({ color: 0xffffff, width: 0.8 * scale, alpha: 0.5 });
|
||||
entry.badge!.visible = true;
|
||||
|
||||
entry.badgeText!.text = `${thread.comment_count}`;
|
||||
entry.badgeText!.style.fontSize = r * 0.55;
|
||||
entry.badgeText!.position.set(badgeX, badgeY);
|
||||
entry.badgeText!.visible = true;
|
||||
} else {
|
||||
entry.badge!.visible = false;
|
||||
entry.badgeText!.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
private _destroyPin(entry: PinData) {
|
||||
if (!entry.container.destroyed) {
|
||||
entry.container.destroy({ children: true });
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
getThreadIdAtPoint(worldX: number, worldY: number): string | null {
|
||||
const scale = 1 / this._viewport.scale.x;
|
||||
const r = PIN_RADIUS * scale;
|
||||
// Hit-test against the circle body of each pin (not the tail tip)
|
||||
const cx_off = r * SIN45;
|
||||
const cy_off = -r * SIN45;
|
||||
const tailH = TAIL_HEIGHT * scale;
|
||||
const bubbleH = r * 2 + r * 0.3;
|
||||
|
||||
for (const [threadId, pin] of this._pins) {
|
||||
const circleCx = pin.position.x + cx_off;
|
||||
const circleCy = pin.position.y + cy_off;
|
||||
const dx = circleCx - worldX;
|
||||
const dy = circleCy - worldY;
|
||||
if (dx * dx + dy * dy <= r * r) {
|
||||
for (const [threadId, entry] of this._pins) {
|
||||
const bx = entry.container.position.x;
|
||||
const by = entry.container.position.y;
|
||||
const halfW = r + r * 0.3;
|
||||
|
||||
if (
|
||||
worldX >= bx - halfW &&
|
||||
worldX <= bx + halfW &&
|
||||
worldY >= by - tailH - bubbleH &&
|
||||
worldY <= by
|
||||
) {
|
||||
return threadId;
|
||||
}
|
||||
}
|
||||
@@ -192,10 +281,10 @@ export class PinOverlay extends Container {
|
||||
}
|
||||
|
||||
override destroy(options?: any) {
|
||||
for (const c of this._pins.values()) c.destroy({ children: true });
|
||||
for (const c of this._pool) c.destroy({ children: true });
|
||||
for (const entry of this._pins.values()) {
|
||||
this._destroyPin(entry);
|
||||
}
|
||||
this._pins.clear();
|
||||
this._pool = [];
|
||||
super.destroy(options);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -249,8 +249,8 @@ export class SelectionManager {
|
||||
// Lift shadow + spring scale on all selected image sprites
|
||||
this._applyLift();
|
||||
|
||||
// Begin snap guide session
|
||||
this._snapGuides.beginSession(this.selectedIds);
|
||||
// Snap guides disabled — users found it annoying
|
||||
// this._snapGuides.beginSession(this.selectedIds);
|
||||
}
|
||||
|
||||
if (this._objectDragging) {
|
||||
@@ -266,11 +266,11 @@ export class SelectionManager {
|
||||
prospective.x += ddx;
|
||||
prospective.y += ddy;
|
||||
|
||||
// Snap to alignment guides
|
||||
const snap = this._snapGuides.computeSnap(prospective, this._viewport);
|
||||
ddx += snap.dx;
|
||||
ddy += snap.dy;
|
||||
this._snapGuides.drawGuides(snap.guides, this._viewport);
|
||||
// Snap guides disabled
|
||||
// const snap = this._snapGuides.computeSnap(prospective, this._viewport);
|
||||
// ddx += snap.dx;
|
||||
// ddy += snap.dy;
|
||||
// this._snapGuides.drawGuides(snap.guides, this._viewport);
|
||||
|
||||
// Move all selected items by corrected delta and broadcast all together
|
||||
for (const item of selected) {
|
||||
@@ -311,7 +311,7 @@ export class SelectionManager {
|
||||
if (this._objectDragging) {
|
||||
// End object drag — drop shadow + spring scale back
|
||||
this._applyDrop();
|
||||
this._snapGuides.endSession();
|
||||
// this._snapGuides.endSession();
|
||||
this._objectDragging = false;
|
||||
|
||||
// Resume viewport drag
|
||||
|
||||
@@ -227,9 +227,9 @@ export class TransformBox extends Container {
|
||||
origTransforms,
|
||||
};
|
||||
|
||||
// Begin snap session excluding current items
|
||||
const itemIds = new Set(this._items.map((it) => it.id));
|
||||
this._snapGuides?.beginSession(itemIds);
|
||||
// Snap guides disabled
|
||||
// const itemIds = new Set(this._items.map((it) => it.id));
|
||||
// this._snapGuides?.beginSession(itemIds);
|
||||
}
|
||||
|
||||
private _onHandleMove(e: FederatedPointerEvent): void {
|
||||
@@ -346,21 +346,11 @@ export class TransformBox extends Container {
|
||||
|
||||
this.update(this._items);
|
||||
|
||||
// Snap guides during resize
|
||||
if (this._snapGuides && this._viewport) {
|
||||
const snap = this._snapGuides.computeSnap(this._bounds, this._viewport);
|
||||
if (snap.dx !== 0 || snap.dy !== 0) {
|
||||
// Apply snap correction to all items
|
||||
for (const item of this._items) {
|
||||
item.data.x += snap.dx;
|
||||
item.data.y += snap.dy;
|
||||
item.displayObject.position.set(item.data.x, item.data.y);
|
||||
this._onItemTransform?.(item);
|
||||
}
|
||||
this.update(this._items);
|
||||
}
|
||||
this._snapGuides.drawGuides(snap.guides, this._viewport);
|
||||
}
|
||||
// Snap guides disabled
|
||||
// if (this._snapGuides && this._viewport) {
|
||||
// const snap = this._snapGuides.computeSnap(this._bounds, this._viewport);
|
||||
// ...
|
||||
// }
|
||||
|
||||
// Show dimension label
|
||||
const bounds = this._bounds;
|
||||
@@ -399,7 +389,7 @@ export class TransformBox extends Container {
|
||||
this._drag = null;
|
||||
this._dimLabel.visible = false;
|
||||
this._dimLabelBg.visible = false;
|
||||
this._snapGuides?.endSession();
|
||||
// this._snapGuides?.endSession();
|
||||
// Notify that drag ended — persist/sync the final state
|
||||
this._onDragEnd?.(this._items.map(i => i.id));
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import type { Viewport } from 'pixi-viewport';
|
||||
import type { GroupObject } from './scene-format';
|
||||
import { FrameSprite } from './sprites/FrameSprite';
|
||||
import * as ops from './operations';
|
||||
import { onArrangeAnimationDone } from './operations';
|
||||
|
||||
export interface MenuItem {
|
||||
label: string;
|
||||
@@ -135,11 +136,11 @@ export function buildContextMenuItems(ctx: MenuContext): MenuItem[] {
|
||||
{ label: '', shortcut: '', onClick: () => {}, divider: true },
|
||||
|
||||
// -- Arrangement --
|
||||
{ label: 'Arrange Pack', shortcut: 'Ctrl+Shift+P', onClick: () => { ops.arrangeOptimal(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Arrange Grid', shortcut: '', onClick: () => { ops.arrangeGrid(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Arrange Row', shortcut: '', onClick: () => { ops.arrangeRow(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Arrange Column', shortcut: '', onClick: () => { ops.arrangeColumn(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Stack', shortcut: 'Ctrl+Alt+S', onClick: () => { ops.stackObjects(selected); selection?.transformBox.update(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Arrange Pack', shortcut: 'Ctrl+Shift+P', onClick: () => { onArrangeAnimationDone(() => selection?.transformBox.update(selected)); ops.arrangeOptimal(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Arrange Grid', shortcut: '', onClick: () => { onArrangeAnimationDone(() => selection?.transformBox.update(selected)); ops.arrangeGrid(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Arrange Row', shortcut: '', onClick: () => { onArrangeAnimationDone(() => selection?.transformBox.update(selected)); ops.arrangeRow(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Arrange Column', shortcut: '', onClick: () => { onArrangeAnimationDone(() => selection?.transformBox.update(selected)); ops.arrangeColumn(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: 'Stack', shortcut: 'Ctrl+Alt+S', onClick: () => { onArrangeAnimationDone(() => selection?.transformBox.update(selected)); ops.stackObjects(selected); ctx.onChange(ids); }, disabled: !multiSel },
|
||||
{ label: '', shortcut: '', onClick: () => {}, divider: true },
|
||||
|
||||
// -- Normalize --
|
||||
|
||||
@@ -18,9 +18,66 @@ function scaledH(item: SceneItem): number {
|
||||
return item.data.h * item.data.sy;
|
||||
}
|
||||
|
||||
/** Sync displayObject position from item.data. */
|
||||
// ─── Animated position sync ───
|
||||
|
||||
let _animTargets = new Map<SceneItem, { startX: number; startY: number; endX: number; endY: number; t: number }>();
|
||||
let _animRaf = 0;
|
||||
let _animCallback: ((items: SceneItem[]) => void) | null = null;
|
||||
const ANIM_DURATION = 320; // ms
|
||||
const ANIM_STEP = 1000 / 60;
|
||||
|
||||
function easeOutCubic(t: number): number {
|
||||
return 1 - Math.pow(1 - t, 3);
|
||||
}
|
||||
|
||||
function _animTick() {
|
||||
const dt = ANIM_STEP / ANIM_DURATION;
|
||||
let done = true;
|
||||
|
||||
for (const [item, anim] of _animTargets) {
|
||||
anim.t = Math.min(1, anim.t + dt);
|
||||
const e = easeOutCubic(anim.t);
|
||||
item.displayObject.position.set(
|
||||
anim.startX + (anim.endX - anim.startX) * e,
|
||||
anim.startY + (anim.endY - anim.startY) * e,
|
||||
);
|
||||
if (anim.t < 1) done = false;
|
||||
}
|
||||
|
||||
if (!done) {
|
||||
_animRaf = requestAnimationFrame(_animTick);
|
||||
} else {
|
||||
// Snap to final positions and clean up
|
||||
for (const [item, anim] of _animTargets) {
|
||||
item.displayObject.position.set(anim.endX, anim.endY);
|
||||
}
|
||||
const items = Array.from(_animTargets.keys());
|
||||
_animTargets.clear();
|
||||
_animRaf = 0;
|
||||
_animCallback?.(items);
|
||||
}
|
||||
}
|
||||
|
||||
/** Sync displayObject position from item.data with smooth animation. */
|
||||
function syncPosition(item: SceneItem): void {
|
||||
item.displayObject.position.set(item.data.x, item.data.y);
|
||||
_animTargets.set(item, {
|
||||
startX: item.displayObject.x,
|
||||
startY: item.displayObject.y,
|
||||
endX: item.data.x,
|
||||
endY: item.data.y,
|
||||
t: 0,
|
||||
});
|
||||
if (!_animRaf) {
|
||||
_animRaf = requestAnimationFrame(_animTick);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a callback that fires once when the current arrangement animation finishes.
|
||||
* Use this to persist/broadcast final positions.
|
||||
*/
|
||||
export function onArrangeAnimationDone(cb: (items: SceneItem[]) => void): void {
|
||||
_animCallback = cb;
|
||||
}
|
||||
|
||||
/** Sync displayObject scale from item.data. */
|
||||
|
||||
@@ -99,6 +99,14 @@ async function _pasteInternal(ctx: ShortcutContext): Promise<void> {
|
||||
}
|
||||
ctx.clipboardRef.current = newItems;
|
||||
ctx.scene._applyZOrder();
|
||||
|
||||
// Select the newly pasted items
|
||||
ctx.selection.selectedIds.clear();
|
||||
for (const item of newItems) {
|
||||
ctx.selection.selectedIds.add(item.id);
|
||||
}
|
||||
ctx.selection.transformBox.update(newItems);
|
||||
|
||||
ctx.onChange();
|
||||
}
|
||||
|
||||
@@ -110,6 +118,15 @@ function _opUpdate(ctx: ShortcutContext, op: (items: SceneItem[]) => void): void
|
||||
ctx.onChange(items.map(i => i.id));
|
||||
}
|
||||
|
||||
/** Like _opUpdate but defers transformBox update until animation completes */
|
||||
function _opUpdateAnimated(ctx: ShortcutContext, op: (items: SceneItem[]) => void): void {
|
||||
const items = ctx.selection.getSelectedItems();
|
||||
const { onArrangeAnimationDone } = require('./operations');
|
||||
onArrangeAnimationDone(() => ctx.selection.transformBox.update(items));
|
||||
op(items);
|
||||
ctx.onChange(items.map(i => i.id));
|
||||
}
|
||||
|
||||
export const shortcuts: ShortcutDef[] = [
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
@@ -184,27 +201,27 @@ export const shortcuts: ShortcutDef[] = [
|
||||
{
|
||||
id: 'arrange-optimal', keys: { key: 'p', ctrl: true, shift: true },
|
||||
category: 'arrangement', description: 'Arrange optimal (pack)', needsSelection: true, minSelection: 2,
|
||||
handler: (ctx) => _opUpdate(ctx, ops.arrangeOptimal),
|
||||
handler: (ctx) => _opUpdateAnimated(ctx, ops.arrangeOptimal),
|
||||
},
|
||||
{
|
||||
id: 'arrange-by-name', keys: { key: 'n', ctrl: true, alt: true },
|
||||
category: 'arrangement', description: 'Arrange by name', needsSelection: true, minSelection: 2,
|
||||
handler: (ctx) => _opUpdate(ctx, ops.arrangeByName),
|
||||
handler: (ctx) => _opUpdateAnimated(ctx, ops.arrangeByName),
|
||||
},
|
||||
{
|
||||
id: 'arrange-by-order', keys: { key: 'o', ctrl: true, alt: true },
|
||||
category: 'arrangement', description: 'Arrange by z-order', needsSelection: true, minSelection: 2,
|
||||
handler: (ctx) => _opUpdate(ctx, ops.arrangeByZOrder),
|
||||
handler: (ctx) => _opUpdateAnimated(ctx, ops.arrangeByZOrder),
|
||||
},
|
||||
{
|
||||
id: 'arrange-random', keys: { key: 'r', ctrl: true, alt: true },
|
||||
category: 'arrangement', description: 'Arrange randomly', needsSelection: true, minSelection: 2,
|
||||
handler: (ctx) => _opUpdate(ctx, ops.arrangeRandomly),
|
||||
handler: (ctx) => _opUpdateAnimated(ctx, ops.arrangeRandomly),
|
||||
},
|
||||
{
|
||||
id: 'stack', keys: { key: 's', ctrl: true, alt: true },
|
||||
category: 'arrangement', description: 'Stack (pile on top)', needsSelection: true, minSelection: 2,
|
||||
handler: (ctx) => _opUpdate(ctx, ops.stackObjects),
|
||||
handler: (ctx) => _opUpdateAnimated(ctx, ops.stackObjects),
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
@@ -322,12 +339,12 @@ export const shortcuts: ShortcutDef[] = [
|
||||
{
|
||||
id: 'equal-spacing-h', keys: { key: 'h', ctrl: true, shift: true },
|
||||
category: 'arrangement', description: 'Equal horizontal spacing', needsSelection: true, minSelection: 2,
|
||||
handler: (ctx) => _opUpdate(ctx, ops.equalSpacingH),
|
||||
handler: (ctx) => _opUpdateAnimated(ctx, ops.equalSpacingH),
|
||||
},
|
||||
{
|
||||
id: 'equal-spacing-v', keys: { key: 'v', ctrl: true, shift: true },
|
||||
category: 'arrangement', description: 'Equal vertical spacing', needsSelection: true, minSelection: 2,
|
||||
handler: (ctx) => _opUpdate(ctx, ops.equalSpacingV),
|
||||
handler: (ctx) => _opUpdateAnimated(ctx, ops.equalSpacingV),
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
|
||||
@@ -279,10 +279,8 @@ export const toolShortcuts: Record<string, ToolType> = {
|
||||
h: ToolType.PAN,
|
||||
p: ToolType.PEN,
|
||||
t: ToolType.TEXT,
|
||||
e: ToolType.ERASER,
|
||||
'1': ToolType.SELECT,
|
||||
'2': ToolType.PAN,
|
||||
'3': ToolType.PEN,
|
||||
'4': ToolType.TEXT,
|
||||
'5': ToolType.ERASER,
|
||||
};
|
||||
|
||||
@@ -73,11 +73,13 @@ function IconText() {
|
||||
);
|
||||
}
|
||||
|
||||
function IconEraser() {
|
||||
function IconReview() {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M6.5 14H14M2 10l4.5-4.5 4 4L6 14H3l-1-1v-3z" strokeLinejoin="round" />
|
||||
<path d="M6.5 5.5L14 2" strokeLinecap="round" />
|
||||
<path d="M2.5 3A1.5 1.5 0 014 1.5h8A1.5 1.5 0 0113.5 3v7A1.5 1.5 0 0112 11.5H7l-3.5 3V11.5H4A1.5 1.5 0 012.5 10V3z" />
|
||||
<circle cx="6" cy="6.5" r="0.7" fill="currentColor" stroke="none" />
|
||||
<circle cx="8" cy="6.5" r="0.7" fill="currentColor" stroke="none" />
|
||||
<circle cx="10" cy="6.5" r="0.7" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -118,14 +120,15 @@ function IconLayers() {
|
||||
);
|
||||
}
|
||||
|
||||
const toolButtons: { tool: ToolType; label: string; shortcut: string; numKey: string; Icon: React.FC }[] = [
|
||||
{ tool: ToolType.SELECT, label: 'Select', shortcut: 'V', numKey: '1', Icon: IconSelect },
|
||||
{ tool: ToolType.PAN, label: 'Pan', shortcut: 'H', numKey: '2', Icon: IconPan },
|
||||
{ tool: ToolType.PEN, label: 'Draw', shortcut: 'P', numKey: '3', Icon: IconPen },
|
||||
{ tool: ToolType.TEXT, label: 'Text', shortcut: 'T', numKey: '4', Icon: IconText },
|
||||
{ tool: ToolType.ERASER, label: 'Eraser', shortcut: 'E', numKey: '5', Icon: IconEraser },
|
||||
const toolButtons: { tool: ToolType; label: string; shortcut: string; numKey: string; Icon: React.FC; hint?: string }[] = [
|
||||
{ tool: ToolType.SELECT, label: 'Select', shortcut: 'V', numKey: '1', Icon: IconSelect, hint: 'Click to select, drag to move, Shift+click for multi-select' },
|
||||
{ tool: ToolType.PAN, label: 'Pan', shortcut: 'H', numKey: '2', Icon: IconPan, hint: 'Click and drag to pan the canvas' },
|
||||
{ tool: ToolType.PEN, label: 'Draw', shortcut: 'P', numKey: '3', Icon: IconPen, hint: 'Click and drag to draw freehand' },
|
||||
{ tool: ToolType.TEXT, label: 'Text', shortcut: 'T', numKey: '4', Icon: IconText, hint: 'Click on the canvas to place text' },
|
||||
];
|
||||
|
||||
const REVIEW_HINT = 'Click an image to leave a comment. Press . to toggle.';
|
||||
|
||||
export default function Toolbar({
|
||||
activeTool,
|
||||
onToolChange,
|
||||
@@ -158,26 +161,30 @@ export default function Toolbar({
|
||||
const showStroke = activeTool === ToolType.PEN;
|
||||
const showFontSize = activeTool === ToolType.TEXT;
|
||||
|
||||
// Determine active hint
|
||||
const activeToolDef = toolButtons.find((t) => t.tool === activeTool);
|
||||
const activeHint = reviewMode ? REVIEW_HINT : activeToolDef?.hint || '';
|
||||
|
||||
return (
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '2px',
|
||||
padding: '4px 8px',
|
||||
background: '#1a1a1a',
|
||||
borderBottom: '1px solid #2a2a2a',
|
||||
flexShrink: 0,
|
||||
borderBottom: activeHint ? 'none' : '1px solid #2a2a2a',
|
||||
height: '44px',
|
||||
boxSizing: 'border-box',
|
||||
}}>
|
||||
{/* Tool buttons */}
|
||||
<div style={{ display: 'flex', gap: '1px', background: '#222', borderRadius: '8px', padding: '2px' }}>
|
||||
{toolButtons.map(({ tool, label, shortcut, numKey, Icon }) => {
|
||||
const active = activeTool === tool;
|
||||
const active = activeTool === tool && !reviewMode;
|
||||
return (
|
||||
<button
|
||||
key={tool}
|
||||
onClick={() => onToolChange(tool)}
|
||||
onClick={() => { onToolChange(tool); if (reviewMode && onToggleReview) onToggleReview(); }}
|
||||
title={`${label} (${shortcut} or ${numKey})`}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
@@ -205,6 +212,36 @@ export default function Toolbar({
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{/* Review mode — in tool group */}
|
||||
{onToggleReview && (
|
||||
<button
|
||||
onClick={onToggleReview}
|
||||
title="Review (.)"
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
gap: '4px', height: '32px', padding: '0 10px',
|
||||
background: reviewMode ? 'linear-gradient(135deg, #f97316, #ea580c)' : 'transparent',
|
||||
border: 'none', borderRadius: '6px',
|
||||
color: reviewMode ? '#fff' : '#777',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s ease',
|
||||
boxShadow: reviewMode ? '0 1px 4px rgba(249,115,22,0.3)' : 'none',
|
||||
}}
|
||||
onMouseEnter={(e) => { if (!reviewMode) { e.currentTarget.style.background = '#2a2a2a'; e.currentTarget.style.color = '#bbb'; } }}
|
||||
onMouseLeave={(e) => { if (!reviewMode) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#777'; } }}
|
||||
>
|
||||
<IconReview />
|
||||
<span style={{ fontSize: '11px', fontWeight: reviewMode ? 600 : 400, letterSpacing: '0.2px' }}>Review</span>
|
||||
<span style={{
|
||||
fontSize: '9px', color: reviewMode ? 'rgba(255,255,255,0.5)' : '#555',
|
||||
background: reviewMode ? 'rgba(255,255,255,0.1)' : '#1a1a1a',
|
||||
padding: '1px 4px', borderRadius: '3px', fontWeight: 500,
|
||||
lineHeight: '14px', minWidth: '14px', textAlign: 'center',
|
||||
}}>
|
||||
.
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
@@ -313,15 +350,6 @@ export default function Toolbar({
|
||||
</ActionBtn>
|
||||
)}
|
||||
|
||||
{/* Review / Feedback */}
|
||||
{onToggleReview && (
|
||||
<ActionBtn onClick={onToggleReview} title="Review Mode (.)" active={reviewMode}>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
|
||||
<path d="M2 2.5A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5v6A1.5 1.5 0 0110.5 10H6l-3 3v-3H3.5A1.5 1.5 0 012 8.5v-6z" />
|
||||
</svg>
|
||||
</ActionBtn>
|
||||
)}
|
||||
|
||||
{/* Spacer */}
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
@@ -370,6 +398,21 @@ export default function Toolbar({
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Tool hint bar */}
|
||||
{activeHint && (
|
||||
<div style={{
|
||||
padding: '4px 16px',
|
||||
background: '#141416',
|
||||
borderBottom: '1px solid #2a2a2a',
|
||||
fontSize: '11px',
|
||||
color: '#666',
|
||||
letterSpacing: '0.2px',
|
||||
lineHeight: '16px',
|
||||
}}>
|
||||
{activeHint}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Comment } from '../../stores/annotationStore';
|
||||
import { getAuthorColor, getAuthorInitial } from '../../utils/authorColors';
|
||||
import { relativeTime } from '../../utils/relativeTime';
|
||||
import { TEXT_PRIMARY, TEXT_MUTED, BORDER } from './feedbackStyles';
|
||||
import { relativeTime, fullTimestamp } from '../../utils/relativeTime';
|
||||
import { TEXT_PRIMARY, TEXT_SECONDARY, TEXT_MUTED, BORDER, HOVER_BG } from './feedbackStyles';
|
||||
|
||||
interface CommentItemProps {
|
||||
comment: Comment;
|
||||
@@ -11,13 +11,23 @@ interface CommentItemProps {
|
||||
}
|
||||
|
||||
export default function CommentItem({ comment, isOwn, onDelete }: CommentItemProps) {
|
||||
const [hovered, setHovered] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div style={{ padding: '10px 0', borderBottom: `1px solid ${BORDER}` }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 0',
|
||||
borderBottom: `1px solid ${BORDER}`,
|
||||
transition: 'background 0.1s ease',
|
||||
}}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
|
||||
<span
|
||||
style={{
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '50%',
|
||||
background: getAuthorColor(comment.user_id),
|
||||
display: 'flex',
|
||||
@@ -31,30 +41,31 @@ export default function CommentItem({ comment, isOwn, onDelete }: CommentItemPro
|
||||
>
|
||||
{getAuthorInitial(comment.author_name)}
|
||||
</span>
|
||||
<span style={{ color: TEXT_PRIMARY, fontSize: '12px', fontWeight: 600 }}>
|
||||
<span style={{ color: TEXT_PRIMARY, fontSize: '12px', fontWeight: 600, letterSpacing: '0.2px' }}>
|
||||
{comment.author_name}
|
||||
</span>
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px' }}>
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px' }} title={fullTimestamp(comment.created_at)}>
|
||||
{relativeTime(comment.created_at)}
|
||||
</span>
|
||||
{comment.edited_at && (
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px' }}>(edited)</span>
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px', fontStyle: 'italic' }}>edited</span>
|
||||
)}
|
||||
<div style={{ flex: 1 }} />
|
||||
{isOwn && onDelete && (
|
||||
{isOwn && onDelete && hovered && (
|
||||
<button
|
||||
onClick={onDelete}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: '#633',
|
||||
background: 'rgba(240, 72, 72, 0.08)',
|
||||
border: '1px solid rgba(240, 72, 72, 0.12)',
|
||||
borderRadius: '4px',
|
||||
color: TEXT_MUTED,
|
||||
cursor: 'pointer',
|
||||
fontSize: '10px',
|
||||
opacity: 0.6,
|
||||
transition: 'opacity 0.1s',
|
||||
padding: '2px 6px',
|
||||
transition: 'all 0.1s',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.6')}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.color = '#f04848'; e.currentTarget.style.background = 'rgba(240, 72, 72, 0.15)'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.color = TEXT_MUTED; e.currentTarget.style.background = 'rgba(240, 72, 72, 0.08)'; }}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@@ -62,10 +73,10 @@ export default function CommentItem({ comment, isOwn, onDelete }: CommentItemPro
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
color: '#ccc',
|
||||
color: TEXT_SECONDARY,
|
||||
fontSize: '13px',
|
||||
lineHeight: 1.5,
|
||||
marginLeft: '30px',
|
||||
marginLeft: '32px',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordBreak: 'break-word',
|
||||
}}
|
||||
|
||||
@@ -3,12 +3,13 @@ import { Thread, AnnotationStore } from '../../stores/annotationStore';
|
||||
import CommentItem from './CommentItem';
|
||||
import CommentInput from './CommentInput';
|
||||
import {
|
||||
PANEL_BG,
|
||||
PANEL_WIDTH,
|
||||
panelContainerStyle,
|
||||
BORDER,
|
||||
TEXT_PRIMARY,
|
||||
TEXT_SECONDARY,
|
||||
TEXT_MUTED,
|
||||
ACCENT,
|
||||
HOVER_BG,
|
||||
STATUS_OPEN,
|
||||
STATUS_RESOLVED,
|
||||
} from './feedbackStyles';
|
||||
@@ -58,25 +59,11 @@ export default function ThreadDetail({
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: `${PANEL_WIDTH}px`,
|
||||
background: PANEL_BG,
|
||||
borderLeft: `1px solid ${BORDER}`,
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={panelContainerStyle}>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '10px 14px',
|
||||
padding: '14px 16px',
|
||||
borderBottom: `1px solid ${BORDER}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -90,13 +77,17 @@ export default function ThreadDetail({
|
||||
border: 'none',
|
||||
color: TEXT_MUTED,
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
padding: '2px',
|
||||
fontSize: '16px',
|
||||
padding: '2px 4px',
|
||||
borderRadius: '4px',
|
||||
transition: 'color 0.1s',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = TEXT_PRIMARY)}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = TEXT_MUTED)}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '11px', fontFamily: 'monospace' }}>
|
||||
<span style={{ color: TEXT_SECONDARY, fontSize: '11px', fontFamily: 'monospace', fontWeight: 500 }}>
|
||||
#{pinNumber}
|
||||
</span>
|
||||
<span
|
||||
@@ -105,8 +96,9 @@ export default function ThreadDetail({
|
||||
fontWeight: 600,
|
||||
padding: '2px 8px',
|
||||
borderRadius: '10px',
|
||||
background: isOpen ? '#2a1515' : '#152a15',
|
||||
background: isOpen ? 'rgba(240, 72, 72, 0.1)' : 'rgba(52, 210, 123, 0.1)',
|
||||
color: isOpen ? STATUS_OPEN : STATUS_RESOLVED,
|
||||
letterSpacing: '0.3px',
|
||||
}}
|
||||
>
|
||||
{isOpen ? 'Open' : 'Resolved'}
|
||||
@@ -116,12 +108,17 @@ export default function ThreadDetail({
|
||||
<button
|
||||
onClick={() => onJumpToObject(thread.object_id)}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
background: 'rgba(74, 158, 255, 0.08)',
|
||||
border: `1px solid rgba(74, 158, 255, 0.15)`,
|
||||
borderRadius: '6px',
|
||||
color: ACCENT,
|
||||
cursor: 'pointer',
|
||||
fontSize: '11px',
|
||||
padding: '4px 10px',
|
||||
transition: 'all 0.15s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(74, 158, 255, 0.15)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(74, 158, 255, 0.08)')}
|
||||
>
|
||||
Jump
|
||||
</button>
|
||||
@@ -130,14 +127,18 @@ export default function ThreadDetail({
|
||||
<button
|
||||
onClick={() => onResolve(thread.id, 'resolved')}
|
||||
style={{
|
||||
background: '#152a15',
|
||||
border: 'none',
|
||||
background: 'rgba(52, 210, 123, 0.1)',
|
||||
border: `1px solid rgba(52, 210, 123, 0.15)`,
|
||||
borderRadius: '6px',
|
||||
color: STATUS_RESOLVED,
|
||||
padding: '4px 10px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '11px',
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.15s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(52, 210, 123, 0.18)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(52, 210, 123, 0.1)')}
|
||||
>
|
||||
Resolve
|
||||
</button>
|
||||
@@ -145,14 +146,18 @@ export default function ThreadDetail({
|
||||
<button
|
||||
onClick={() => onResolve(thread.id, 'open')}
|
||||
style={{
|
||||
background: '#1a1a2a',
|
||||
border: 'none',
|
||||
background: 'rgba(74, 158, 255, 0.08)',
|
||||
border: `1px solid rgba(74, 158, 255, 0.15)`,
|
||||
borderRadius: '6px',
|
||||
color: '#88f',
|
||||
color: ACCENT,
|
||||
padding: '4px 10px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '11px',
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.15s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(74, 158, 255, 0.15)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(74, 158, 255, 0.08)')}
|
||||
>
|
||||
Reopen
|
||||
</button>
|
||||
@@ -194,11 +199,16 @@ export default function ThreadDetail({
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: '#633',
|
||||
color: TEXT_MUTED,
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
padding: '2px',
|
||||
fontSize: '14px',
|
||||
padding: '2px 4px',
|
||||
borderRadius: '4px',
|
||||
opacity: 0.6,
|
||||
transition: 'all 0.1s',
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.color = STATUS_OPEN; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.6'; e.currentTarget.style.color = TEXT_MUTED; }}
|
||||
title="Delete thread"
|
||||
>
|
||||
×
|
||||
@@ -207,7 +217,7 @@ export default function ThreadDetail({
|
||||
</div>
|
||||
|
||||
{/* Comments */}
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '0 14px' }}>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '0 16px', scrollbarWidth: 'thin', scrollbarColor: '#2a2a2e transparent' }}>
|
||||
{thread.comments.map((c) => (
|
||||
<CommentItem
|
||||
key={c.id}
|
||||
@@ -219,7 +229,7 @@ export default function ThreadDetail({
|
||||
</div>
|
||||
|
||||
{/* Reply input */}
|
||||
<div style={{ padding: '10px 14px', borderTop: `1px solid ${BORDER}` }}>
|
||||
<div style={{ padding: '12px 16px', borderTop: `1px solid ${BORDER}` }}>
|
||||
<CommentInput
|
||||
value={replyText}
|
||||
onChange={setReplyText}
|
||||
|
||||
@@ -3,13 +3,14 @@ import { Thread, AnnotationStore } from '../../stores/annotationStore';
|
||||
import ThreadListItem from './ThreadListItem';
|
||||
import CommentInput from './CommentInput';
|
||||
import {
|
||||
PANEL_BG,
|
||||
PANEL_WIDTH,
|
||||
panelContainerStyle,
|
||||
BORDER,
|
||||
TEXT_PRIMARY,
|
||||
TEXT_SECONDARY,
|
||||
TEXT_MUTED,
|
||||
STATUS_OPEN,
|
||||
FILTER_ACTIVE_BG,
|
||||
ACCENT,
|
||||
} from './feedbackStyles';
|
||||
|
||||
export type FilterType = 'open' | 'resolved' | 'all' | 'mine';
|
||||
@@ -23,7 +24,6 @@ interface ThreadListProps {
|
||||
onFilterChange: (f: FilterType) => void;
|
||||
onSelectThread: (id: string) => void;
|
||||
onCollapse: () => void;
|
||||
// New comment
|
||||
selectedObjectId: string | null;
|
||||
selectedObjectLabel: string;
|
||||
newCommentText: string;
|
||||
@@ -49,32 +49,21 @@ export default function ThreadList({
|
||||
const [showOrphans, setShowOrphans] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: `${PANEL_WIDTH}px`,
|
||||
background: PANEL_BG,
|
||||
borderLeft: `1px solid ${BORDER}`,
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={panelContainerStyle}>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 14px',
|
||||
padding: '14px 16px',
|
||||
borderBottom: `1px solid ${BORDER}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: TEXT_PRIMARY, fontSize: '14px', fontWeight: 600, flex: 1 }}>
|
||||
<svg width="16" height="16" viewBox="0 0 14 14" fill="none" stroke={TEXT_SECONDARY} strokeWidth="1.2" style={{ flexShrink: 0 }}>
|
||||
<path d="M2 2.5A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5v6A1.5 1.5 0 0110.5 10H6l-3 3v-3H3.5A1.5 1.5 0 012 8.5v-6z" />
|
||||
</svg>
|
||||
<span style={{ color: TEXT_PRIMARY, fontSize: '13px', fontWeight: 600, flex: 1, letterSpacing: '0.3px' }}>
|
||||
Feedback
|
||||
</span>
|
||||
{openCount > 0 && (
|
||||
@@ -82,12 +71,13 @@ export default function ThreadList({
|
||||
style={{
|
||||
background: STATUS_OPEN,
|
||||
color: '#fff',
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
padding: '1px 7px',
|
||||
fontSize: '10px',
|
||||
fontWeight: 700,
|
||||
padding: '2px 7px',
|
||||
borderRadius: '10px',
|
||||
minWidth: '18px',
|
||||
textAlign: 'center',
|
||||
lineHeight: '14px',
|
||||
}}
|
||||
>
|
||||
{openCount}
|
||||
@@ -102,8 +92,12 @@ export default function ThreadList({
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
lineHeight: 1,
|
||||
padding: '2px',
|
||||
padding: '2px 4px',
|
||||
borderRadius: '4px',
|
||||
transition: 'color 0.1s',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = TEXT_PRIMARY)}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = TEXT_MUTED)}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
@@ -112,10 +106,10 @@ export default function ThreadList({
|
||||
{/* Filter bar */}
|
||||
<div
|
||||
style={{
|
||||
padding: '8px 14px',
|
||||
padding: '8px 16px',
|
||||
borderBottom: `1px solid ${BORDER}`,
|
||||
display: 'flex',
|
||||
gap: '6px',
|
||||
gap: '4px',
|
||||
}}
|
||||
>
|
||||
{(['open', 'resolved', 'all', 'mine'] as const).map((f) => (
|
||||
@@ -124,15 +118,16 @@ export default function ThreadList({
|
||||
onClick={() => onFilterChange(f)}
|
||||
style={{
|
||||
background: filter === f ? FILTER_ACTIVE_BG : 'transparent',
|
||||
border: 'none',
|
||||
border: filter === f ? `1px solid ${BORDER}` : '1px solid transparent',
|
||||
borderRadius: '6px',
|
||||
color: filter === f ? '#fff' : TEXT_MUTED,
|
||||
color: filter === f ? TEXT_PRIMARY : TEXT_MUTED,
|
||||
padding: '4px 10px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '11px',
|
||||
fontWeight: filter === f ? 600 : 400,
|
||||
textTransform: 'capitalize',
|
||||
transition: 'all 0.1s ease',
|
||||
transition: 'all 0.15s ease',
|
||||
lineHeight: '16px',
|
||||
}}
|
||||
>
|
||||
{f}
|
||||
@@ -142,9 +137,12 @@ export default function ThreadList({
|
||||
|
||||
{/* New comment input (when object selected) */}
|
||||
{selectedObjectId && (
|
||||
<div style={{ padding: '10px 14px', borderBottom: `1px solid ${BORDER}` }}>
|
||||
<div style={{ color: TEXT_MUTED, fontSize: '10px', marginBottom: '6px' }}>
|
||||
Comment on: <span style={{ color: TEXT_PRIMARY }}>{selectedObjectLabel}</span>
|
||||
<div style={{ padding: '12px 16px', borderBottom: `1px solid ${BORDER}`, background: 'rgba(74, 158, 255, 0.03)' }}>
|
||||
<div style={{ color: TEXT_MUTED, fontSize: '10px', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
|
||||
Comment on
|
||||
</div>
|
||||
<div style={{ color: TEXT_PRIMARY, fontSize: '12px', marginBottom: '10px', fontWeight: 500 }}>
|
||||
{selectedObjectLabel}
|
||||
</div>
|
||||
<CommentInput
|
||||
value={newCommentText}
|
||||
@@ -157,24 +155,23 @@ export default function ThreadList({
|
||||
)}
|
||||
|
||||
{/* Thread list */}
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
<div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'thin', scrollbarColor: '#2a2a2e transparent' }}>
|
||||
{threads.length === 0 && (
|
||||
<div style={{ padding: '32px 20px', textAlign: 'center' }}>
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
stroke="#333"
|
||||
strokeWidth="1"
|
||||
style={{ marginBottom: '12px' }}
|
||||
>
|
||||
<div style={{ padding: '40px 24px', textAlign: 'center' }}>
|
||||
<div style={{
|
||||
width: '48px', height: '48px', borderRadius: '50%',
|
||||
background: 'rgba(74, 158, 255, 0.06)', border: `1px solid rgba(74, 158, 255, 0.1)`,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
margin: '0 auto 16px',
|
||||
}}>
|
||||
<svg width="20" height="20" viewBox="0 0 14 14" fill="none" stroke={TEXT_MUTED} strokeWidth="1">
|
||||
<path d="M2 2.5A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5v6A1.5 1.5 0 0110.5 10H6l-3 3v-3H3.5A1.5 1.5 0 012 8.5v-6z" />
|
||||
</svg>
|
||||
<div style={{ color: TEXT_MUTED, fontSize: '12px', lineHeight: 1.5 }}>
|
||||
</div>
|
||||
<div style={{ color: TEXT_MUTED, fontSize: '12px', lineHeight: 1.6 }}>
|
||||
{selectedObjectId
|
||||
? 'No comments on this item.'
|
||||
: 'No comments yet.\nSelect an image and add a comment.'}
|
||||
: <>No comments yet.<br /><span style={{ color: TEXT_SECONDARY }}>Select an image to leave feedback.</span></>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -193,14 +190,14 @@ export default function ThreadList({
|
||||
<div
|
||||
onClick={() => setShowOrphans(!showOrphans)}
|
||||
style={{
|
||||
padding: '10px 14px',
|
||||
padding: '10px 16px',
|
||||
cursor: 'pointer',
|
||||
color: TEXT_MUTED,
|
||||
fontSize: '11px',
|
||||
borderTop: `1px solid ${BORDER}`,
|
||||
transition: 'background 0.1s ease',
|
||||
transition: 'background 0.15s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = '#151515')}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = '#16161a')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
|
||||
>
|
||||
{showOrphans ? '\u25BE' : '\u25B8'} Deleted items ({orphanedThreads.length})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Thread } from '../../stores/annotationStore';
|
||||
import { getAuthorColor, getAuthorInitial } from '../../utils/authorColors';
|
||||
import { relativeTime } from '../../utils/relativeTime';
|
||||
import { relativeTime, fullTimestamp } from '../../utils/relativeTime';
|
||||
import {
|
||||
TEXT_PRIMARY,
|
||||
TEXT_SECONDARY,
|
||||
@@ -26,7 +26,7 @@ export default function ThreadListItem({ thread, pinNumber, onClick }: ThreadLis
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={{
|
||||
padding: '10px 14px',
|
||||
padding: '12px 16px',
|
||||
borderBottom: `1px solid ${BORDER}`,
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.1s ease',
|
||||
@@ -67,7 +67,7 @@ export default function ThreadListItem({ thread, pinNumber, onClick }: ThreadLis
|
||||
>
|
||||
{firstComment?.author_name || 'Unknown'}
|
||||
</span>
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px', flexShrink: 0 }}>
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px', flexShrink: 0 }} title={fullTimestamp(thread.last_commented_at || thread.created_at)}>
|
||||
{relativeTime(thread.last_commented_at || thread.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -89,7 +89,7 @@ export default function ThreadListItem({ thread, pinNumber, onClick }: ThreadLis
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 3: meta — pin #, replies, status dot */}
|
||||
{/* Row 3: meta — replies, status */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -99,9 +99,6 @@ export default function ThreadListItem({ thread, pinNumber, onClick }: ThreadLis
|
||||
marginLeft: '32px',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px', fontFamily: 'monospace' }}>
|
||||
#{pinNumber}
|
||||
</span>
|
||||
{thread.comment_count > 1 && (
|
||||
<span style={{ color: TEXT_MUTED, fontSize: '10px' }}>
|
||||
{thread.comment_count - 1} {thread.comment_count === 2 ? 'reply' : 'replies'}
|
||||
@@ -109,13 +106,15 @@ export default function ThreadListItem({ thread, pinNumber, onClick }: ThreadLis
|
||||
)}
|
||||
<span
|
||||
style={{
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
borderRadius: '50%',
|
||||
background: isResolved ? STATUS_RESOLVED : STATUS_OPEN,
|
||||
fontSize: '10px',
|
||||
fontWeight: 500,
|
||||
color: isResolved ? STATUS_RESOLVED : STATUS_OPEN,
|
||||
marginLeft: 'auto',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{thread.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,18 +1,40 @@
|
||||
// Design tokens for the feedback/annotation system
|
||||
export const PANEL_WIDTH = 300;
|
||||
export const PANEL_BG = '#0d0d0d';
|
||||
export const BORDER = '#1e1e1e';
|
||||
export const PANEL_WIDTH = 320;
|
||||
export const PANEL_BG = 'rgba(12, 12, 14, 0.95)';
|
||||
export const PANEL_BG_SOLID = '#0c0c0e';
|
||||
export const BORDER = '#1a1a1e';
|
||||
|
||||
export const TEXT_PRIMARY = '#e0e0e0';
|
||||
export const TEXT_SECONDARY = '#999';
|
||||
export const TEXT_MUTED = '#666';
|
||||
export const TEXT_PRIMARY = '#eaeaea';
|
||||
export const TEXT_SECONDARY = '#a0a0a8';
|
||||
export const TEXT_MUTED = '#5a5a64';
|
||||
|
||||
export const ACCENT = '#4a9eff';
|
||||
export const STATUS_OPEN = '#ef4444';
|
||||
export const STATUS_RESOLVED = '#22c55e';
|
||||
export const STATUS_OPEN = '#f04848';
|
||||
export const STATUS_RESOLVED = '#34d27b';
|
||||
|
||||
export const INPUT_BG = '#141414';
|
||||
export const INPUT_BORDER = '#2a2a2a';
|
||||
export const INPUT_BORDER_FOCUS = '#3a3a3a';
|
||||
export const HOVER_BG = '#151515';
|
||||
export const FILTER_ACTIVE_BG = '#2a2a2a';
|
||||
export const INPUT_BG = '#131316';
|
||||
export const INPUT_BORDER = '#26262c';
|
||||
export const INPUT_BORDER_FOCUS = '#4a9eff44';
|
||||
export const HOVER_BG = '#16161a';
|
||||
export const FILTER_ACTIVE_BG = '#1e1e24';
|
||||
|
||||
// Shared panel container style
|
||||
export const panelContainerStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: `${PANEL_WIDTH}px`,
|
||||
background: PANEL_BG,
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
borderLeft: `1px solid ${BORDER}`,
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
userSelect: 'none',
|
||||
fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
|
||||
};
|
||||
|
||||
// Import this in components that need React.CSSProperties type
|
||||
import type React from 'react';
|
||||
|
||||
@@ -135,21 +135,25 @@ export function useCanvasSetup(deps: CanvasSetupDeps) {
|
||||
},
|
||||
});
|
||||
|
||||
// Wire live drag/resize transforms to sync broadcast (batched for multi-select)
|
||||
// Wire live drag/resize transforms to sync broadcast + pin position update
|
||||
// updatePositions() is the fast path — zero allocations, just position.set()
|
||||
selection.onItemsTransform = (items) => {
|
||||
syncRef.current?.broadcastTransform(items);
|
||||
pinOverlayRef.current?.updatePositions();
|
||||
};
|
||||
selection.onItemTransform = (item) => {
|
||||
syncRef.current?.broadcastTransform(item);
|
||||
pinOverlayRef.current?.updatePositions();
|
||||
};
|
||||
selection.transformBox.onItemTransform = (item) => {
|
||||
syncRef.current?.broadcastTransform(item);
|
||||
pinOverlayRef.current?.updatePositions();
|
||||
};
|
||||
selection.onObjectDragEnd = (itemIds) => {
|
||||
onCanvasChange(itemIds); // broadcasts elements + saves + undo + spatial refresh
|
||||
};
|
||||
selection.transformBox.onDragEnd = (itemIds) => {
|
||||
onCanvasChange(itemIds); // broadcasts elements + saves + undo + spatial refresh
|
||||
onCanvasChange(itemIds);
|
||||
};
|
||||
|
||||
socket.on('user:joined', (data: any) => {
|
||||
@@ -335,20 +339,19 @@ export function useCanvasSetup(deps: CanvasSetupDeps) {
|
||||
socket.on('comment:delete', (data: any) => {
|
||||
annotationStoreRef.current?.onCommentDelete(data.threadId, data.commentId);
|
||||
});
|
||||
// ── Pin overlay (hidden by default, shown in Review Mode) ──
|
||||
// ── Pin overlay — separate Container, positions from item.data directly ──
|
||||
const pinOverlay = new PinOverlay(viewport, scene, annotationStoreRef.current!);
|
||||
pinOverlay.visible = false;
|
||||
pinOverlay.visible = true;
|
||||
viewport.addChild(pinOverlay);
|
||||
pinOverlayRef.current = pinOverlay;
|
||||
|
||||
// Refresh overlay on viewport move
|
||||
// Refresh on viewport move (zoom changes scale) and store changes
|
||||
const onViewportMoved = () => {
|
||||
if (pinOverlay.visible) pinOverlay.refresh();
|
||||
pinOverlay.refresh();
|
||||
};
|
||||
viewport.on('moved', onViewportMoved);
|
||||
// Refresh on store change (save unsub for cleanup)
|
||||
const unsubPinOverlay = annotationStoreRef.current!.subscribe(() => {
|
||||
if (pinOverlay.visible) pinOverlay.refresh();
|
||||
pinOverlay.refresh();
|
||||
});
|
||||
(pinOverlay as any)._cleanup = () => {
|
||||
viewport.off('moved', onViewportMoved);
|
||||
|
||||
@@ -176,27 +176,26 @@ export default function Editor({ isPublicView }: EditorProps) {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [objectCount]);
|
||||
|
||||
// Toggle pin overlay visibility with review mode + wire pin clicks
|
||||
// Pins are always visible; review mode just controls the panel + click-to-comment
|
||||
useEffect(() => {
|
||||
if (!pinOverlay) return;
|
||||
pinOverlay.visible = reviewMode;
|
||||
if (reviewMode) pinOverlay.refresh();
|
||||
pinOverlay.visible = true;
|
||||
pinOverlay.refresh();
|
||||
|
||||
// Pin click → expand thread in panel
|
||||
const onClick = (e: any) => {
|
||||
// Pin click → expand thread in panel (listen on viewport since pins are item children)
|
||||
const vp = canvasRef.current?.getViewport();
|
||||
if (!vp) return;
|
||||
const onClick = (e: any) => {
|
||||
const worldPos = vp.toWorld(e.global);
|
||||
const threadId = pinOverlay.getThreadIdAtPoint(worldPos.x, worldPos.y);
|
||||
if (threadId) {
|
||||
if (!reviewMode) setReviewMode(true);
|
||||
setFocusedThreadId(threadId);
|
||||
// Reset so it can be triggered again for the same pin
|
||||
requestAnimationFrame(() => setFocusedThreadId(null));
|
||||
}
|
||||
};
|
||||
pinOverlay.eventMode = 'static';
|
||||
pinOverlay.on('pointerdown', onClick);
|
||||
return () => { pinOverlay.off('pointerdown', onClick); };
|
||||
vp.on('pointerdown', onClick);
|
||||
return () => { vp.off('pointerdown', onClick); };
|
||||
}, [reviewMode, pinOverlay]);
|
||||
|
||||
// Tool activation
|
||||
@@ -386,8 +385,9 @@ export default function Editor({ isPublicView }: EditorProps) {
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh annotation pins so they follow transforms
|
||||
if (pinOverlay?.visible) pinOverlay.refresh();
|
||||
// Pin positions follow media automatically (children of displayObjects).
|
||||
// Only refresh on zoom to update counter-scale.
|
||||
pinOverlay?.refresh();
|
||||
}, [pinOverlay]);
|
||||
|
||||
// Listen to viewport moved event for overlay updates (throttled)
|
||||
|
||||
@@ -1,11 +1,25 @@
|
||||
export function relativeTime(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const date = new Date(iso);
|
||||
const diff = Date.now() - date.getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return 'now';
|
||||
if (mins < 60) return `${mins}m`;
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return `${hrs}h`;
|
||||
if (hrs < 24) return `${hrs}h ago`;
|
||||
const days = Math.floor(hrs / 24);
|
||||
if (days < 7) return `${days}d`;
|
||||
return new Date(iso).toLocaleDateString();
|
||||
if (days < 7) return `${days}d ago`;
|
||||
// Show date for older comments
|
||||
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
/** Full timestamp for tooltip hover */
|
||||
export function fullTimestamp(iso: string): string {
|
||||
const date = new Date(iso);
|
||||
return date.toLocaleString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user