All files / src/components/sprites MetaspriteGrid.tsx

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
115
116
117
118
119
120
121
122
123
124
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
 
interface MetaspriteGridProps {
  originX: number;
  originY: number;
  width: number;
  height: number;
  showGrid: boolean;
  gridSize: number;
  zoom: number;
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}
 
export const generateGridBackground = (
  zoom: number,
  lineColor = "#efefef",
  borderColor = "#d4d4d4",
): string => {
  Iif (zoom < 8) {
    return `linear-gradient(to right, ${lineColor} 1px, transparent 1px), 
            linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)`;
  }
 
  const pixelLines = Array.from({ length: 8 }, (_, i) => {
    const start = i * zoom;
    return `${lineColor} ${start + 0}px, transparent ${start + 0}px, transparent ${start + zoom - 1}px`;
  }).join(", ");
 
  return `linear-gradient(to right, ${borderColor} 1px, ${pixelLines}), 
          linear-gradient(to bottom, ${borderColor} 1px, ${pixelLines})`;
};
 
const MetaspriteGrid = ({
  originX,
  originY,
  width,
  height,
  gridSize,
  showGrid,
  zoom,
  onClick,
  children,
}: MetaspriteGridProps) => {
  // When canvas width is not 8 or a multiple of 16 then
  // an offset is needed to align grid lines correctly
  const offsetGridX = width % 16 !== 0 && width !== 8 ? `${4 * zoom}px` : "0";
  return (
    <div
      style={{
        position: "relative",
        width: width * zoom,
        height: height * zoom,
        background: "#fff",
      }}
    >
      {showGrid && (
        <div
          style={{
            pointerEvents: "none",
            position: "absolute",
            left: (Math.max(0, width / 2 - 8) + originX) * zoom,
            bottom: (8 - originY - 8) * zoom,
            width: (width < 16 ? 8 : 16) * zoom,
            height: 8 * zoom,
            background: "rgba(0, 188, 212, 0.4)",
          }}
        />
      )}
      <div
        style={{
          pointerEvents: "none",
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          border: `${1 / zoom}px solid #d4d4d4`,
          backgroundSize: `${gridSize * zoom}px ${gridSize * zoom}px`,
          backgroundPositionX: offsetGridX,
          backgroundImage: showGrid ? generateGridBackground(zoom) : "none",
        }}
      />
      <div
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        }}
        onMouseDown={onClick}
      />
      <div
        style={{
          position: "relative",
          width,
          transform: `translate3d(${Math.max(0, width / 2 - 8) * zoom}px, ${
            height * zoom
          }px, 0) scale(${zoom})`,
          transformOrigin: "top left",
        }}
      >
        {children}
      </div>
      {showGrid && (
        <div
          style={{
            pointerEvents: "none",
            position: "absolute",
            left: (Math.max(0, width / 2 - 8) + originX - 1) * zoom,
            bottom: (8 - originY - 1) * zoom,
            width: 2 * zoom,
            height: 2 * zoom,
            background: "rgba(255, 0, 0, 0.6)",
          }}
        />
      )}
    </div>
  );
};
 
export default MetaspriteGrid;