preview SpriteSliceCanvas.tsx

0% Statements 0/38

0% Branches 0/14

0% Functions 0/6

0% Lines 0/37

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

import React, { useCallback, useEffect, useState } from "react";
import { useAppSelector } from "store/hooks";
import { DMG_PALETTE } from "consts";
import { spriteSheetSelectors } from "store/features/entities/entitiesState";
import { ObjPalette, Palette } from "shared/lib/entities/entitiesTypes";
import SpriteSliceCanvasWorker, {
  SpriteSliceCanvasResult,
} from "./SpriteSliceCanvas.worker";
import { assetURL } from "shared/lib/helpers/assets";
 
interface SpriteSliceCanvasProps {
  spriteSheetId: string;
  offsetX: number;
  offsetY: number;
  width: number;
  height: number;
  flipX?: boolean;
  flipY?: boolean;
  objPalette: ObjPalette;
  palette?: Palette;
}
 
const worker = new SpriteSliceCanvasWorker();
 
export const SpriteSliceCanvas = ({
  spriteSheetId,
  offsetX,
  offsetY,
  width,
  height,
  flipX,
  flipY,
  objPalette,
  palette,
}: SpriteSliceCanvasProps) => {
  const [workerId] = useState(Math.random());
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const spriteSheet = useAppSelector((state) =>
    spriteSheetSelectors.selectById(state, spriteSheetId)
  );
 
  const onWorkerComplete = useCallback(
    (e: MessageEvent<SpriteSliceCanvasResult>) => {
      Iif (e.data.id === workerId) {
        const offscreenCanvas = document.createElement("canvas");
        const offscreenCtx = offscreenCanvas.getContext("bitmaprenderer");
        Iif (!canvasRef.current || !spriteSheet || !offscreenCtx) {
          return;
        }
        const ctx = canvasRef.current.getContext("2d");
        Iif (!ctx) {
          return;
        }
        offscreenCtx.transferFromImageBitmap(e.data.canvasImage);
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(offscreenCanvas, 0, 0);
      }
    },
    [height, spriteSheet, width, workerId]
  );
 
  useEffect(() => {
    worker.addEventListener("message", onWorkerComplete);
    return () => {
      worker.removeEventListener("message", onWorkerComplete);
    };
  }, [width, height, onWorkerComplete]);
 
  useEffect(() => {
    Iif (!canvasRef.current || !spriteSheet) {
      return;
    }
    const ctx = canvasRef.current.getContext("2d");
    Iif (!ctx) {
      return;
    }
    const spriteURL = assetURL("sprites", spriteSheet);
 
    worker.postMessage({
      id: workerId,
      src: spriteURL,
      offsetX,
      offsetY,
      width,
      height,
      flipX,
      flipY,
      objPalette: palette ? "OBP0" : objPalette,
      palette: (palette || DMG_PALETTE).colors,
    });
  }, [
    canvasRef,
    spriteSheet,
    offsetX,
    offsetY,
    width,
    height,
    flipX,
    flipY,
    objPalette,
    palette,
    workerId,
  ]);
 
  return (
    <canvas
      ref={canvasRef}
      width={width}
      height={height}
      style={{ imageRendering: "pixelated" }}
    />
  );
};