Hiren Kangad
a2eea8f22f
- Make PixiJS canvas background transparent so SVG dot grid shows through - Move dot grid SVG before canvas in DOM with zIndex 0 (behind images) - Set wrapper div background to #1e1e1e - Remove 600px cap on pasted images — preserve native dimensions
419 lines
13 KiB
TypeScript
419 lines
13 KiB
TypeScript
/**
|
|
* PixiCanvas — main React component wrapping PixiJS v8 + pixi-viewport.
|
|
*
|
|
* Drop-in replacement for FabricCanvas.tsx. Manages the Application lifecycle,
|
|
* viewport (pan/zoom), scene loading, and exposes an imperative handle for
|
|
* parent components.
|
|
*/
|
|
|
|
import {
|
|
forwardRef,
|
|
useEffect,
|
|
useImperativeHandle,
|
|
useRef,
|
|
useCallback,
|
|
useState,
|
|
} from 'react';
|
|
import { Application } from 'pixi.js';
|
|
import { Viewport } from 'pixi-viewport';
|
|
import { SceneManager, getItemWorldBounds } from './SceneManager';
|
|
import { TextureManager } from './TextureManager';
|
|
import { SpringManager } from './spring';
|
|
import { convertFabricToV2 } from './scene-format';
|
|
import type { SceneData } from './scene-format';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Public interfaces
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export interface PixiCanvasHandle {
|
|
getViewport: () => Viewport | null;
|
|
getScene: () => SceneManager | null;
|
|
getApp: () => Application | null;
|
|
fitAll: () => void;
|
|
getZoom: () => number;
|
|
setZoom: (zoom: number) => void;
|
|
}
|
|
|
|
export interface PixiCanvasProps {
|
|
canvasState?: string | object | null;
|
|
currentTool: string;
|
|
boardId?: string;
|
|
onChange?: () => void;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Viewport persistence helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface ViewportState {
|
|
x: number;
|
|
y: number;
|
|
scale: number;
|
|
}
|
|
|
|
function vpStorageKey(boardId: string): string {
|
|
return `refboard:viewport:${boardId}`;
|
|
}
|
|
|
|
function loadViewportState(boardId: string): ViewportState | null {
|
|
try {
|
|
const raw = localStorage.getItem(vpStorageKey(boardId));
|
|
if (!raw) return null;
|
|
const parsed = JSON.parse(raw);
|
|
if (
|
|
typeof parsed.x === 'number' &&
|
|
typeof parsed.y === 'number' &&
|
|
typeof parsed.scale === 'number'
|
|
) {
|
|
return parsed as ViewportState;
|
|
}
|
|
} catch {
|
|
// ignore malformed data
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function saveViewportState(boardId: string, vp: Viewport): void {
|
|
const center = vp.center;
|
|
const state: ViewportState = {
|
|
x: center.x,
|
|
y: center.y,
|
|
scale: vp.scale.x,
|
|
};
|
|
try {
|
|
localStorage.setItem(vpStorageKey(boardId), JSON.stringify(state));
|
|
} catch {
|
|
// storage full — not critical
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const PixiCanvas = forwardRef<PixiCanvasHandle, PixiCanvasProps>(
|
|
function PixiCanvas({ canvasState, currentTool, boardId, onChange }, ref) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const appRef = useRef<Application | null>(null);
|
|
const viewportRef = useRef<Viewport | null>(null);
|
|
const sceneRef = useRef<SceneManager | null>(null);
|
|
const initialLoadDone = useRef(false);
|
|
const spaceHeld = useRef(false);
|
|
const onChangeRef = useRef(onChange);
|
|
const [pixiReady, setPixiReady] = useState(false);
|
|
|
|
// Keep onChange ref current without re-running effects
|
|
onChangeRef.current = onChange;
|
|
|
|
// ── Initialization (runs once) ────────────────────────────────────
|
|
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
if (!container) return;
|
|
|
|
let destroyed = false;
|
|
const app = new Application();
|
|
const textures = new TextureManager();
|
|
const springs = new SpringManager();
|
|
|
|
(async () => {
|
|
await app.init({
|
|
backgroundAlpha: 0,
|
|
resizeTo: container,
|
|
antialias: true,
|
|
autoDensity: true,
|
|
resolution: window.devicePixelRatio,
|
|
preserveDrawingBuffer: true,
|
|
});
|
|
|
|
if (destroyed) {
|
|
app.destroy(true, { children: true });
|
|
return;
|
|
}
|
|
|
|
container.appendChild(app.canvas as HTMLCanvasElement);
|
|
|
|
// -- Viewport -------------------------------------------------------
|
|
|
|
const viewport = new Viewport({
|
|
screenWidth: container.clientWidth,
|
|
screenHeight: container.clientHeight,
|
|
worldWidth: 4000,
|
|
worldHeight: 4000,
|
|
events: app.renderer.events,
|
|
});
|
|
|
|
viewport
|
|
.drag({ mouseButtons: 'middle' })
|
|
.pinch()
|
|
.wheel({ smooth: 5, percent: 0.08 })
|
|
.decelerate({ friction: 0.92 })
|
|
.clampZoom({ minScale: 0.1, maxScale: 5 });
|
|
|
|
app.stage.addChild(viewport);
|
|
|
|
// -- Scene Manager ---------------------------------------------------
|
|
|
|
const scene = new SceneManager(viewport, textures, springs);
|
|
scene.onChange = () => onChangeRef.current?.();
|
|
|
|
// -- Spring ticker ---------------------------------------------------
|
|
|
|
app.ticker.add((ticker) => {
|
|
springs.tick(ticker.deltaMS / 1000);
|
|
});
|
|
|
|
// -- Visibility culling ticker (runs every 200ms, not every frame) --
|
|
|
|
let lastCullCheck = 0;
|
|
app.ticker.add((ticker) => {
|
|
lastCullCheck += ticker.deltaMS;
|
|
if (lastCullCheck < 200) return;
|
|
lastCullCheck = 0;
|
|
|
|
const bounds = viewport.getVisibleBounds();
|
|
const margin = 200;
|
|
|
|
for (const item of scene.getAllItems()) {
|
|
if (item.type === 'video' && 'onVisibilityChange' in item.displayObject) {
|
|
const { x: ix, y: iy, w: iw, h: ih } = getItemWorldBounds(item);
|
|
const inView =
|
|
ix + iw > bounds.x - margin &&
|
|
ix < bounds.x + bounds.width + margin &&
|
|
iy + ih > bounds.y - margin &&
|
|
iy < bounds.y + bounds.height + margin;
|
|
(item.displayObject as any).onVisibilityChange(inView);
|
|
}
|
|
}
|
|
});
|
|
|
|
// -- Store refs ------------------------------------------------------
|
|
|
|
appRef.current = app;
|
|
viewportRef.current = viewport;
|
|
sceneRef.current = scene;
|
|
|
|
// -- Viewport persistence --------------------------------------------
|
|
|
|
if (boardId) {
|
|
const saved = loadViewportState(boardId);
|
|
if (saved) {
|
|
viewport.scale.set(saved.scale);
|
|
viewport.moveCenter(saved.x, saved.y);
|
|
}
|
|
|
|
viewport.on('moved', () => {
|
|
saveViewportState(boardId, viewport);
|
|
});
|
|
}
|
|
|
|
// -- ResizeObserver --------------------------------------------------
|
|
|
|
const ro = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
const { width, height } = entry.contentRect;
|
|
if (width > 0 && height > 0) {
|
|
app.renderer.resize(width, height);
|
|
viewport.resize(width, height);
|
|
}
|
|
}
|
|
});
|
|
ro.observe(container);
|
|
|
|
// Store observer for cleanup
|
|
(container as any).__pixiRO = ro;
|
|
|
|
// Signal that PixiJS is ready for scene loading
|
|
setPixiReady(true);
|
|
|
|
// -- Prevent Ctrl+wheel browser zoom on canvas -----------------------
|
|
const preventBrowserZoom = (e: WheelEvent) => {
|
|
if (e.ctrlKey) {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
container.addEventListener('wheel', preventBrowserZoom, { passive: false });
|
|
(container as any).__pixiWheelHandler = preventBrowserZoom;
|
|
})();
|
|
|
|
// -- Cleanup ---------------------------------------------------------
|
|
|
|
return () => {
|
|
destroyed = true;
|
|
|
|
const ro = (container as any).__pixiRO as ResizeObserver | undefined;
|
|
if (ro) {
|
|
ro.disconnect();
|
|
delete (container as any).__pixiRO;
|
|
}
|
|
|
|
const wheelHandler = (container as any).__pixiWheelHandler;
|
|
if (wheelHandler) {
|
|
container.removeEventListener('wheel', wheelHandler);
|
|
delete (container as any).__pixiWheelHandler;
|
|
}
|
|
|
|
textures.clear();
|
|
|
|
if (appRef.current) {
|
|
appRef.current.destroy(true, { children: true });
|
|
}
|
|
|
|
appRef.current = null;
|
|
viewportRef.current = null;
|
|
sceneRef.current = null;
|
|
initialLoadDone.current = false;
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
// ── Initial canvas state load ─────────────────────────────────────
|
|
|
|
useEffect(() => {
|
|
if (initialLoadDone.current) return;
|
|
if (!canvasState || !sceneRef.current) return;
|
|
|
|
// canvasState may be a JSON string or already-parsed object
|
|
let parsed: any;
|
|
if (typeof canvasState === 'string') {
|
|
try {
|
|
parsed = JSON.parse(canvasState);
|
|
} catch {
|
|
return;
|
|
}
|
|
} else {
|
|
parsed = canvasState;
|
|
}
|
|
|
|
let sceneData: SceneData;
|
|
if (parsed.v === 2) {
|
|
sceneData = parsed as SceneData;
|
|
} else {
|
|
sceneData = convertFabricToV2(parsed);
|
|
}
|
|
|
|
initialLoadDone.current = true;
|
|
sceneRef.current.loadScene(sceneData, false);
|
|
}, [canvasState, pixiReady]);
|
|
|
|
// ── Space key for pan mode ────────────────────────────────────────
|
|
|
|
useEffect(() => {
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (e.code !== 'Space' || spaceHeld.current) return;
|
|
if ((e.target as HTMLElement)?.tagName === 'INPUT' || (e.target as HTMLElement)?.tagName === 'TEXTAREA') return;
|
|
|
|
spaceHeld.current = true;
|
|
const vp = viewportRef.current;
|
|
if (!vp) return;
|
|
|
|
e.preventDefault();
|
|
vp.plugins.remove('drag');
|
|
vp.drag({ mouseButtons: 'left' });
|
|
const container = containerRef.current;
|
|
if (container) container.style.cursor = 'grab';
|
|
};
|
|
|
|
const onKeyUp = (e: KeyboardEvent) => {
|
|
if (e.code !== 'Space') return;
|
|
|
|
spaceHeld.current = false;
|
|
const vp = viewportRef.current;
|
|
if (!vp) return;
|
|
|
|
vp.plugins.remove('drag');
|
|
vp.drag({ mouseButtons: 'middle' });
|
|
const container = containerRef.current;
|
|
if (container) container.style.cursor = '';
|
|
};
|
|
|
|
window.addEventListener('keydown', onKeyDown);
|
|
window.addEventListener('keyup', onKeyUp);
|
|
|
|
return () => {
|
|
window.removeEventListener('keydown', onKeyDown);
|
|
window.removeEventListener('keyup', onKeyUp);
|
|
};
|
|
}, []);
|
|
|
|
// ── Imperative handle ─────────────────────────────────────────────
|
|
|
|
const fitAll = useCallback(() => {
|
|
const vp = viewportRef.current;
|
|
const scene = sceneRef.current;
|
|
if (!vp || !scene) return;
|
|
|
|
const items = scene.getAllItems();
|
|
if (items.length === 0) return;
|
|
|
|
let minX = Infinity;
|
|
let minY = Infinity;
|
|
let maxX = -Infinity;
|
|
let maxY = -Infinity;
|
|
|
|
for (const item of items) {
|
|
const { x: ix, y: iy, w: iw, h: ih } = getItemWorldBounds(item);
|
|
if (ix < minX) minX = ix;
|
|
if (iy < minY) minY = iy;
|
|
if (ix + iw > maxX) maxX = ix + iw;
|
|
if (iy + ih > maxY) maxY = iy + ih;
|
|
}
|
|
|
|
const padding = 40;
|
|
const contentW = maxX - minX + padding * 2;
|
|
const contentH = maxY - minY + padding * 2;
|
|
const centerX = (minX + maxX) / 2;
|
|
const centerY = (minY + maxY) / 2;
|
|
|
|
const scaleX = vp.screenWidth / contentW;
|
|
const scaleY = vp.screenHeight / contentH;
|
|
const targetScale = Math.min(scaleX, scaleY, 5);
|
|
|
|
vp.animate({
|
|
position: { x: centerX, y: centerY },
|
|
scale: targetScale,
|
|
time: 300,
|
|
ease: 'easeOutQuad',
|
|
});
|
|
}, []);
|
|
|
|
useImperativeHandle(
|
|
ref,
|
|
() => ({
|
|
getViewport: () => viewportRef.current,
|
|
getScene: () => sceneRef.current,
|
|
getApp: () => appRef.current,
|
|
fitAll,
|
|
getZoom: () => viewportRef.current?.scale.x ?? 1,
|
|
setZoom: (zoom: number) => {
|
|
const vp = viewportRef.current;
|
|
if (!vp) return;
|
|
vp.animate({
|
|
scale: zoom,
|
|
time: 150,
|
|
ease: 'easeOutQuad',
|
|
});
|
|
},
|
|
}),
|
|
[fitAll],
|
|
);
|
|
|
|
// ── Render ────────────────────────────────────────────────────────
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default PixiCanvas;
|