60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import { Line, Rect } from 'react-konva';
|
||
|
|
import { Horizontal, ViewCenter } from './consts';
|
||
|
|
import { XY } from './coordinates'
|
||
|
|
|
||
|
|
const INTERVALS = [0, 1, 2];
|
||
|
|
|
||
|
|
const ZmDec: React.FC<{
|
||
|
|
tl: XY;
|
||
|
|
rb: XY;
|
||
|
|
}> = ({ tl, rb }) => {
|
||
|
|
|
||
|
|
const ux = (rb.x - tl.x) / 12;
|
||
|
|
const uy = (rb.y - tl.y) / 12;
|
||
|
|
|
||
|
|
const ox = tl.x + 3 * ux;
|
||
|
|
const oy = tl.y + 3 * uy;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{
|
||
|
|
INTERVALS.map(y => (
|
||
|
|
<React.Fragment key={y}>
|
||
|
|
{
|
||
|
|
INTERVALS.map(x => {
|
||
|
|
const cx = ox + x * 3 * ux;
|
||
|
|
const cy = oy + y * 3 * uy;
|
||
|
|
const l = cx - ux;
|
||
|
|
const r = cx + ux;
|
||
|
|
const t = cy - uy;
|
||
|
|
const b = cy + uy;
|
||
|
|
return (
|
||
|
|
<React.Fragment key={x}>
|
||
|
|
<Rect fill="323737" x={l} y={t} width={2 * ux} height={2 * uy} />
|
||
|
|
{
|
||
|
|
cx < ViewCenter.x ? (
|
||
|
|
<Line points={[l, t, l, b]} stroke="#afb5b5" strokeWidth={1} />
|
||
|
|
) : (
|
||
|
|
<Line points={[r, t, r, b]} stroke="#afb5b5" strokeWidth={1} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
{
|
||
|
|
cy < Horizontal ? (
|
||
|
|
<Line points={[l, t, r, t]} stroke="#afb5b5" strokeWidth={1} />
|
||
|
|
) : (
|
||
|
|
<Line points={[l, b, r, b]} stroke="#afb5b5" strokeWidth={1} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</React.Fragment>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</React.Fragment>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ZmDec
|