Add drop shadow system with animated lift/drop during drag

DropShadowFilter applied to all ImageSprites for photos-on-a-desk feel.
SelectionManager now handles object dragging with shadow lift/drop and
spring-animated scale (1.0 <-> 1.03). Replaced incompatible @pixi/filter-drop-shadow
v5 with pixi-filters v6 for PixiJS v8 compatibility.
This commit is contained in:
Hiren Kangad
2026-03-09 23:35:02 +05:30
parent 7f6c9cd409
commit 9e4a427f97
4 changed files with 148 additions and 297 deletions
@@ -1,4 +1,5 @@
import { Sprite, Texture, Graphics } from "pixi.js";
import { DropShadowFilter } from "pixi-filters";
import { TextureManager, LODTier } from "../TextureManager";
/**
@@ -6,8 +7,14 @@ import { TextureManager, LODTier } from "../TextureManager";
* Shows a placeholder shimmer rect until the first texture tier loads,
* then swaps textures as zoom level changes.
*/
// Shadow defaults (resting state)
const SHADOW_REST = { offsetX: 3, offsetY: 3, blur: 4, alpha: 0.25 };
// Shadow lifted state (during drag)
const SHADOW_LIFT = { offsetX: 6, offsetY: 8, blur: 8, alpha: 0.35 };
export class ImageSprite extends Sprite {
readonly assetKey: string;
readonly shadow: DropShadowFilter;
private textures: TextureManager;
private currentTier: LODTier | null = null;
@@ -32,6 +39,15 @@ export class ImageSprite extends Sprite {
this.width = w;
this.height = h;
// Drop shadow for photos-on-a-desk feel
this.shadow = new DropShadowFilter({
offset: { x: SHADOW_REST.offsetX, y: SHADOW_REST.offsetY },
blur: SHADOW_REST.blur,
alpha: SHADOW_REST.alpha,
color: 0x000000,
});
this.filters = [this.shadow];
// Create placeholder: dark rect shown until first texture loads
const placeholder = new Graphics();
placeholder.rect(0, 0, w, h).fill(0x2a2a2a);
@@ -42,6 +58,20 @@ export class ImageSprite extends Sprite {
this.loadTier("thumb");
}
/** Expand shadow for drag-lift effect. */
liftShadow(): void {
this.shadow.offset = { x: SHADOW_LIFT.offsetX, y: SHADOW_LIFT.offsetY };
this.shadow.blur = SHADOW_LIFT.blur;
this.shadow.alpha = SHADOW_LIFT.alpha;
}
/** Restore shadow to resting state. */
dropShadow(): void {
this.shadow.offset = { x: SHADOW_REST.offsetX, y: SHADOW_REST.offsetY };
this.shadow.blur = SHADOW_REST.blur;
this.shadow.alpha = SHADOW_REST.alpha;
}
/**
* Load a specific LOD tier texture for this sprite.
* Skips if already at the requested tier or currently loading.