ReactのSpreadSheet的なコンポーネントを探す

export interface Color {
    r: number;
    g: number;
    b: number;
}

export const isColor = (item: unknown): item is Color => {
    if (item && typeof item === 'object') {
        const temp = item as Record<string, unknown>;
        return (
            typeof temp.r === 'number' && typeof temp.g === 'number' && typeof temp.b === 'number'
        );
    }
    return false;
};

export interface Point {
    id: string;
    x: number;
    y: number;
    z: number;
    color: Color;
}

export const isPoint = (item: unknown): item is Point => {
    if (item && typeof item === 'object') {
        const temp = item as Record<string, unknown>;
        return (
            typeof temp.id === 'string' &&
            typeof temp.x === 'number' &&
            typeof temp.y === 'number' &&
            typeof temp.z === 'number' &&
            isColor(temp.color)
        );
    }
    return false;
};

export interface Line {
    id: string;
    start: string;
    end: string;
    color: Color;
}

export const isLine = (item: unknown): item is Line => {
    if (item && typeof item === 'object') {
        const temp = item as Record<string, unknown>;
        return (
            typeof temp.id === 'string' &&
            typeof temp.start === 'string' &&
            typeof temp.end === 'string' &&
            isColor(temp.color)
        );
    }
    return false;
};

export interface Solid {
    id: string;
    points: Point[];
    lines: Line[];
}

export const isSolid = (item: unknown): item is Solid => {
    if (item && typeof item === 'object') {
        const temp = item as Record<string, unknown>;
        return (
            typeof temp.id === 'string' &&
            Array.isArray(temp.points) &&
            Array.isArray(temp.lines) &&
            temp.points.every(isPoint) &&
            temp.lines.every(isLine)
        );
    }
    return false;
};

export const defaultColor: Color = {
    r: 0,
    g: 0,
    b: 0,
};

export const data: Solid[] = [
    // 立方体
    {
        id: 'solid1',
        points: [
            {
                id: 'p1',
                x: 0,
                y: 0,
                z: 0,
                color: defaultColor,
            },
            {
                id: 'p2',
                x: 6,
                y: 0,
                z: 0,
                color: defaultColor,
            },
            {
                id: 'p3',
                x: 6,
                y: 0,
                z: 6,
                color: defaultColor,
            },
            {
                id: 'p4',
                x: 0,
                y: 0,
                z: 6,
                color: defaultColor,
            },
            {
                id: 'p5',
                x: 0,
                y: 6,
                z: 0,
                color: defaultColor,
            },
            {
                id: 'p6',
                x: 6,
                y: 6,
                z: 0,
                color: defaultColor,
            },
            {
                id: 'p7',
                x: 6,
                y: 6,
                z: 6,
                color: defaultColor,
            },
            {
                id: 'p8',
                x: 0,
                y: 6,
                z: 6,
                color: defaultColor,
            },
        ],
        lines: [
            {
                id: 'l1',
                start: 'p1',
                end: 'p2',
                color: defaultColor,
            },
            {
                id: 'l2',
                start: 'p2',
                end: 'p3',
                color: defaultColor,
            },
            {
                id: 'l3',
                start: 'p3',
                end: 'p4',
                color: defaultColor,
            },
            {
                id: 'l4',
                start: 'p1',
                end: 'p4',
                color: defaultColor,
            },
            {
                id: 'l5',
                start: 'p1',
                end: 'p5',
                color: defaultColor,
            },
            {
                id: 'l6',
                start: 'p2',
                end: 'p6',
                color: defaultColor,
            },
            {
                id: 'l7',
                start: 'p3',
                end: 'p7',
                color: defaultColor,
            },
            {
                id: 'l8',
                start: 'p4',
                end: 'p8',
                color: defaultColor,
            },
            {
                id: 'l9',
                start: 'p5',
                end: 'p6',
                color: defaultColor,
            },
            {
                id: 'l10',
                start: 'p6',
                end: 'p7',
                color: defaultColor,
            },
            {
                id: 'l11',
                start: 'p7',
                end: 'p8',
                color: defaultColor,
            },
            {
                id: 'l12',
                start: 'p5',
                end: 'p8',
                color: defaultColor,
            },
        ],
    },
];