105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
|
import React, { useMemo } from 'react';
|
||
|
|
import { Layer, Rect } from 'react-konva';
|
||
|
|
import ColorPolygon from './ColorPolygon';
|
||
|
|
import { Window1, WindowSep } from './Window';
|
||
|
|
import { TopRoomHeight } from './consts';
|
||
|
|
import { ControlPts, mirror } from './coordinates';
|
||
|
|
|
||
|
|
|
||
|
|
const Topper1: React.FC<{
|
||
|
|
pts: ControlPts;
|
||
|
|
type: number;
|
||
|
|
}> = ({ pts, type }) => {
|
||
|
|
|
||
|
|
const windows = useMemo<{
|
||
|
|
w: number[][];
|
||
|
|
h: number[][];
|
||
|
|
}>(() => {
|
||
|
|
const x1 = pts.TopRectLB.x;
|
||
|
|
const y0 = pts.TopRectLB.y - TopRoomHeight
|
||
|
|
const y1 = pts.TopRectLB.y - TopRoomHeight * 0.75;
|
||
|
|
const x2 = pts.TopRectRB.x;
|
||
|
|
const y2 = pts.TopRectLB.y - TopRoomHeight * 0.25;
|
||
|
|
if (type === 1) {
|
||
|
|
const u = (x2 - x1) / 10;
|
||
|
|
return {
|
||
|
|
w: [
|
||
|
|
[x1 + u, y1, x1 + 3 * u, y2],
|
||
|
|
[x1 + 4 * u, y1, x1 + 6 * u, y2],
|
||
|
|
[x1 + 7 * u, y1, x1 + 9 * u, y2],
|
||
|
|
],
|
||
|
|
h: []
|
||
|
|
}
|
||
|
|
} else if (type === 2) {
|
||
|
|
const u = (x2 - x1 - 8) / 14;
|
||
|
|
return {
|
||
|
|
w: [
|
||
|
|
[x1 + u, y1, x1 + 3 * u, y2],
|
||
|
|
[x1 + 4 * u, y1, x1 + 6 * u, y2],
|
||
|
|
[x1 + 8 * u + 8, y1, x1 + 10 * u + 8, y2],
|
||
|
|
[x1 + 11 * u + 8, y1, x1 + 13 * u + 8, y2],
|
||
|
|
],
|
||
|
|
h: [
|
||
|
|
[x1 + 7 * u, y0, x1 + 7 * u + 8, pts.TopRectLB.y],
|
||
|
|
],
|
||
|
|
}
|
||
|
|
} else if (type === 3) {
|
||
|
|
const xc = (x2 - x1) * 0.5;
|
||
|
|
const u = (xc - 8) / 8;
|
||
|
|
return {
|
||
|
|
w: [
|
||
|
|
[x1 + u, y1, x1 + 3 * u, y2],
|
||
|
|
[x1 + 5 * u + 8, y1, x1 + 7 * u + 8, y2],
|
||
|
|
[x1 + u + xc, y1, x1 + 3 * u + xc, y2],
|
||
|
|
[x1 + 5 * u + 8 + xc, y1, x1 + 7 * u + 8 + xc, y2],
|
||
|
|
],
|
||
|
|
h: [
|
||
|
|
[x1 + 4 * u, y0, x1 + 4 * u + 8, pts.TopRectLB.y],
|
||
|
|
[x1 + 4 * u + xc, y0, x1 + 4 * u + 8 + xc, pts.TopRectLB.y],
|
||
|
|
]
|
||
|
|
}
|
||
|
|
} else if (type > 3) {
|
||
|
|
const xc1 = (x2 - x1) / 3;
|
||
|
|
const xc2 = xc1 * 2;
|
||
|
|
const u = (xc1 - 8) / 8;
|
||
|
|
return {
|
||
|
|
w: [
|
||
|
|
[x1 + u, y1, x1 + 3 * u, y2],
|
||
|
|
[x1 + 5 * u + 8, y1, x1 + 7 * u + 8, y2],
|
||
|
|
[x1 + u + xc1, y1, x1 + 3 * u + xc1, y2],
|
||
|
|
[x1 + 5 * u + 8 + xc1, y1, x1 + 7 * u + 8 + xc1, y2],
|
||
|
|
[x1 + u + xc2, y1, x1 + 3 * u + xc2, y2],
|
||
|
|
[x1 + 5 * u + 8 + xc2, y1, x1 + 7 * u + 8 + xc2, y2],
|
||
|
|
],
|
||
|
|
h: [
|
||
|
|
[x1 + 4 * u, y0, x1 + 4 * u + 8, pts.TopRectLB.y],
|
||
|
|
[x1 + 4 * u + xc1, y0, x1 + 4 * u + 8 + xc1, pts.TopRectLB.y],
|
||
|
|
[x1 + 4 * u + xc2, y0, x1 + 4 * u + 8 + xc2, pts.TopRectLB.y],
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
w: [], h: []
|
||
|
|
}
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layer>
|
||
|
|
<Rect fill='#738b8b' x={pts.TopRectLB.x} y={pts.TopRectLB.y - TopRoomHeight} width={pts.TopRectRB.x - pts.TopRectLB.x} height={TopRoomHeight} />
|
||
|
|
<ColorPolygon fill='#4a5c5e' pts={[pts.TopRectLB, pts.RoomRBFar, mirror(pts.RoomRBFar), pts.TopRectRB]} />
|
||
|
|
{
|
||
|
|
pts.SepsLTLBRBRT.map((s, index) => (
|
||
|
|
<ColorPolygon key={'a' + index} fill='#334648' pts={s} />
|
||
|
|
))
|
||
|
|
}
|
||
|
|
{
|
||
|
|
windows.w.map((o, index) => <Window1 rect={o} key={'w' + index} />)
|
||
|
|
}
|
||
|
|
{
|
||
|
|
windows.h.map((o, index) => <WindowSep rect={o} key={'h' + index} />)
|
||
|
|
}
|
||
|
|
</Layer>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default React.memo(Topper1);
|