feat: text tool UX, image crop, text format toolbar, double-click focus
- Text tool: click-to-place immediately opens inline editor, auto-switches back to select tool. Empty text cleanup on save. - Crop: select image + press C (or right-click > Crop) to enter crop mode. 8 drag handles with rule-of-thirds grid, dimmed outside area. Enter confirms, Escape cancels. Non-destructive (stored as normalized rect). - Text format toolbar: appears when text items selected, with font size +/-, font family dropdown, and color picker with presets. - Double-click image: zoom-to-fit (PureRef-style focus) - Entrance animation: replaced bounce with simple fade-in (no delay before items become interactive) - TextEditor: allow empty text (caller handles cleanup)
This commit is contained in:
Hiren Kangad
@@ -0,0 +1,270 @@
|
||||
/**
|
||||
* CropOverlay — interactive crop handles over an image.
|
||||
*
|
||||
* Shows a crop rectangle with 8 drag handles and a dimmed area outside.
|
||||
* The overlay is positioned in world-space as a child of the viewport.
|
||||
* All crop values are normalized 0-1 relative to the image's natural dimensions.
|
||||
*/
|
||||
|
||||
import { Container, Graphics, FederatedPointerEvent } from 'pixi.js';
|
||||
import type { Viewport } from 'pixi-viewport';
|
||||
import type { SceneItem } from './SceneManager';
|
||||
import type { ImageObject, CropRect } from './scene-format';
|
||||
import { ImageSprite } from './sprites/ImageSprite';
|
||||
|
||||
const HANDLE_SIZE = 8;
|
||||
const HANDLE_FILL = 0xffffff;
|
||||
const HANDLE_STROKE = 0x4a90d9;
|
||||
const BORDER_COLOR = 0x4a90d9;
|
||||
const DIM_ALPHA = 0.6;
|
||||
const MIN_CROP = 0.05; // minimum 5% of image in each dimension
|
||||
|
||||
type HandleId = 'tl' | 'tc' | 'tr' | 'ml' | 'mr' | 'bl' | 'bc' | 'br';
|
||||
|
||||
export class CropOverlay extends Container {
|
||||
private _item: SceneItem | null = null;
|
||||
private _viewport: Viewport;
|
||||
private _dim: Graphics;
|
||||
private _border: Graphics;
|
||||
private _handles = new Map<HandleId, Graphics>();
|
||||
private _crop: CropRect = { x: 0, y: 0, w: 1, h: 1 };
|
||||
private _drag: { handleId: HandleId; startCrop: CropRect } | null = null;
|
||||
private _onConfirm: ((item: SceneItem, crop: CropRect) => void) | null = null;
|
||||
private _onCancel: (() => void) | null = null;
|
||||
private _keyHandler: ((e: KeyboardEvent) => void) | null = null;
|
||||
|
||||
constructor(viewport: Viewport) {
|
||||
super();
|
||||
this._viewport = viewport;
|
||||
this.label = '__crop_overlay';
|
||||
this.visible = false;
|
||||
this.eventMode = 'static';
|
||||
|
||||
// Dim overlay (darkens area outside crop)
|
||||
this._dim = new Graphics();
|
||||
this._dim.eventMode = 'none';
|
||||
this.addChild(this._dim);
|
||||
|
||||
// Crop border
|
||||
this._border = new Graphics();
|
||||
this._border.eventMode = 'none';
|
||||
this.addChild(this._border);
|
||||
|
||||
// Create handles
|
||||
const ids: HandleId[] = ['tl', 'tc', 'tr', 'ml', 'mr', 'bl', 'bc', 'br'];
|
||||
const cursors: Record<HandleId, string> = {
|
||||
tl: 'nwse-resize', tr: 'nesw-resize', bl: 'nesw-resize', br: 'nwse-resize',
|
||||
tc: 'ns-resize', bc: 'ns-resize', ml: 'ew-resize', mr: 'ew-resize',
|
||||
};
|
||||
for (const id of ids) {
|
||||
const h = new Graphics();
|
||||
h.eventMode = 'static';
|
||||
h.cursor = cursors[id];
|
||||
h.on('pointerdown', (e: FederatedPointerEvent) => this._onDown(e, id));
|
||||
h.on('globalpointermove', (e: FederatedPointerEvent) => this._onMove(e));
|
||||
h.on('pointerup', () => this._onUp());
|
||||
h.on('pointerupoutside', () => this._onUp());
|
||||
this._handles.set(id, h);
|
||||
this.addChild(h);
|
||||
}
|
||||
}
|
||||
|
||||
set onConfirm(fn: (item: SceneItem, crop: CropRect) => void) { this._onConfirm = fn; }
|
||||
set onCancel(fn: () => void) { this._onCancel = fn; }
|
||||
|
||||
/** Start cropping the given image item. */
|
||||
start(item: SceneItem): void {
|
||||
if (item.type !== 'image') return;
|
||||
this._item = item;
|
||||
const imgData = item.data as ImageObject;
|
||||
this._crop = imgData.crop ? { ...imgData.crop } : { x: 0, y: 0, w: 1, h: 1 };
|
||||
this.visible = true;
|
||||
this._draw();
|
||||
|
||||
// Key bindings
|
||||
this._keyHandler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); this.confirm(); }
|
||||
if (e.key === 'Escape') { e.preventDefault(); this.cancel(); }
|
||||
};
|
||||
window.addEventListener('keydown', this._keyHandler);
|
||||
}
|
||||
|
||||
/** Confirm the crop and apply it. */
|
||||
confirm(): void {
|
||||
if (!this._item) return;
|
||||
const item = this._item;
|
||||
const crop = { ...this._crop };
|
||||
// If crop is full image, remove it
|
||||
const isFullImage = crop.x < 0.001 && crop.y < 0.001 && crop.w > 0.999 && crop.h > 0.999;
|
||||
this._cleanup();
|
||||
this._onConfirm?.(item, isFullImage ? { x: 0, y: 0, w: 1, h: 1 } : crop);
|
||||
}
|
||||
|
||||
/** Cancel cropping — restore original state. */
|
||||
cancel(): void {
|
||||
this._cleanup();
|
||||
this._onCancel?.();
|
||||
}
|
||||
|
||||
get isActive(): boolean { return this._item !== null; }
|
||||
|
||||
private _cleanup(): void {
|
||||
this._item = null;
|
||||
this._drag = null;
|
||||
this.visible = false;
|
||||
if (this._keyHandler) {
|
||||
window.removeEventListener('keydown', this._keyHandler);
|
||||
this._keyHandler = null;
|
||||
}
|
||||
}
|
||||
|
||||
private _draw(): void {
|
||||
if (!this._item) return;
|
||||
const data = this._item.data;
|
||||
const zoom = this._viewport.scale.x;
|
||||
|
||||
// Image world rect
|
||||
const ix = data.x;
|
||||
const iy = data.y;
|
||||
const iw = data.w * data.sx;
|
||||
const ih = data.h * data.sy;
|
||||
|
||||
// Crop rect in world space
|
||||
const cx = ix + this._crop.x * iw;
|
||||
const cy = iy + this._crop.y * ih;
|
||||
const cw = this._crop.w * iw;
|
||||
const ch = this._crop.h * ih;
|
||||
|
||||
// Dim: draw full image rect, then cut out the crop area using inverted mask approach
|
||||
// Simpler: draw 4 dim rectangles around the crop area
|
||||
this._dim.clear();
|
||||
// Top
|
||||
if (cy > iy) {
|
||||
this._dim.rect(ix, iy, iw, cy - iy);
|
||||
this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
|
||||
}
|
||||
// Bottom
|
||||
const cropBottom = cy + ch;
|
||||
if (cropBottom < iy + ih) {
|
||||
this._dim.rect(ix, cropBottom, iw, iy + ih - cropBottom);
|
||||
this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
|
||||
}
|
||||
// Left
|
||||
if (cx > ix) {
|
||||
this._dim.rect(ix, cy, cx - ix, ch);
|
||||
this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
|
||||
}
|
||||
// Right
|
||||
const cropRight = cx + cw;
|
||||
if (cropRight < ix + iw) {
|
||||
this._dim.rect(cropRight, cy, ix + iw - cropRight, ch);
|
||||
this._dim.fill({ color: 0x000000, alpha: DIM_ALPHA });
|
||||
}
|
||||
|
||||
// Border around crop area
|
||||
this._border.clear();
|
||||
this._border.rect(cx, cy, cw, ch);
|
||||
this._border.stroke({ color: BORDER_COLOR, width: 1.5 / zoom });
|
||||
|
||||
// Rule of thirds lines
|
||||
const thirdW = cw / 3;
|
||||
const thirdH = ch / 3;
|
||||
for (let i = 1; i <= 2; i++) {
|
||||
this._border.moveTo(cx + thirdW * i, cy);
|
||||
this._border.lineTo(cx + thirdW * i, cy + ch);
|
||||
this._border.moveTo(cx, cy + thirdH * i);
|
||||
this._border.lineTo(cx + cw, cy + thirdH * i);
|
||||
}
|
||||
this._border.stroke({ color: 0xffffff, width: 0.5 / zoom, alpha: 0.3 });
|
||||
|
||||
// Position handles
|
||||
const positions: Record<HandleId, { px: number; py: number }> = {
|
||||
tl: { px: cx, py: cy },
|
||||
tc: { px: cx + cw / 2, py: cy },
|
||||
tr: { px: cx + cw, py: cy },
|
||||
ml: { px: cx, py: cy + ch / 2 },
|
||||
mr: { px: cx + cw, py: cy + ch / 2 },
|
||||
bl: { px: cx, py: cy + ch },
|
||||
bc: { px: cx + cw / 2, py: cy + ch },
|
||||
br: { px: cx + cw, py: cy + ch },
|
||||
};
|
||||
|
||||
const s = HANDLE_SIZE / zoom;
|
||||
const half = s / 2;
|
||||
for (const [id, handle] of this._handles) {
|
||||
const pos = positions[id];
|
||||
handle.clear();
|
||||
handle.rect(-half, -half, s, s);
|
||||
handle.fill(HANDLE_FILL);
|
||||
handle.stroke({ color: HANDLE_STROKE, width: 1 / zoom });
|
||||
handle.position.set(pos.px, pos.py);
|
||||
}
|
||||
}
|
||||
|
||||
// -- Handle drag --
|
||||
|
||||
private _onDown(e: FederatedPointerEvent, id: HandleId): void {
|
||||
e.stopPropagation();
|
||||
this._drag = { handleId: id, startCrop: { ...this._crop } };
|
||||
}
|
||||
|
||||
private _onMove(e: FederatedPointerEvent): void {
|
||||
if (!this._drag || !this._item) return;
|
||||
|
||||
const data = this._item.data;
|
||||
const iw = data.w * data.sx;
|
||||
const ih = data.h * data.sy;
|
||||
const world = this._viewport.toWorld(e.global.x, e.global.y);
|
||||
|
||||
// Convert world position to normalized image coordinates
|
||||
const nx = (world.x - data.x) / iw;
|
||||
const ny = (world.y - data.y) / ih;
|
||||
|
||||
const { handleId, startCrop: sc } = this._drag;
|
||||
const crop = { ...sc };
|
||||
|
||||
switch (handleId) {
|
||||
case 'tl':
|
||||
crop.x = Math.max(0, Math.min(nx, sc.x + sc.w - MIN_CROP));
|
||||
crop.y = Math.max(0, Math.min(ny, sc.y + sc.h - MIN_CROP));
|
||||
crop.w = sc.x + sc.w - crop.x;
|
||||
crop.h = sc.y + sc.h - crop.y;
|
||||
break;
|
||||
case 'tr':
|
||||
crop.w = Math.max(MIN_CROP, Math.min(1 - sc.x, nx - sc.x));
|
||||
crop.y = Math.max(0, Math.min(ny, sc.y + sc.h - MIN_CROP));
|
||||
crop.h = sc.y + sc.h - crop.y;
|
||||
break;
|
||||
case 'bl':
|
||||
crop.x = Math.max(0, Math.min(nx, sc.x + sc.w - MIN_CROP));
|
||||
crop.w = sc.x + sc.w - crop.x;
|
||||
crop.h = Math.max(MIN_CROP, Math.min(1 - sc.y, ny - sc.y));
|
||||
break;
|
||||
case 'br':
|
||||
crop.w = Math.max(MIN_CROP, Math.min(1 - sc.x, nx - sc.x));
|
||||
crop.h = Math.max(MIN_CROP, Math.min(1 - sc.y, ny - sc.y));
|
||||
break;
|
||||
case 'tc':
|
||||
crop.y = Math.max(0, Math.min(ny, sc.y + sc.h - MIN_CROP));
|
||||
crop.h = sc.y + sc.h - crop.y;
|
||||
break;
|
||||
case 'bc':
|
||||
crop.h = Math.max(MIN_CROP, Math.min(1 - sc.y, ny - sc.y));
|
||||
break;
|
||||
case 'ml':
|
||||
crop.x = Math.max(0, Math.min(nx, sc.x + sc.w - MIN_CROP));
|
||||
crop.w = sc.x + sc.w - crop.x;
|
||||
break;
|
||||
case 'mr':
|
||||
crop.w = Math.max(MIN_CROP, Math.min(1 - sc.x, nx - sc.x));
|
||||
break;
|
||||
}
|
||||
|
||||
this._crop = crop;
|
||||
this._draw();
|
||||
}
|
||||
|
||||
private _onUp(): void {
|
||||
this._drag = null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user