Как нарисовать бесконечную сетку?

Question

[sudo rm -rf /]

Использую React + react-konva.
И имею вот такой результат

Результат

С таким кодом модуля

Код

import React, { Component } from 'react';
import { Stage, Layer, Line, Text, Rect, Circle, Group, Label, Tag } from 'react-konva';


export default class Grid extends Component {
    constructor(...props) {
        super(...props);

        this.xOffset = this.props.xOffset || 0;
        this.yOffset = this.props.yOffset || 0;


        this.state = {
            verticalLines: [],
            horizontalLines: []
        }

    }

    render () {

        // this.mainVLine = this.textLine(this.props.width / 2, 0, this.props.width / 2, this.props.height);
        // this.mainHLine = this.textLine(0, this.props.height / 2, this.props.width, this.props.height / 2);

        // const vLines = [this.mainVLine];
        // for (let i = 1; this.mainVLine.x1 - i * this.props.step > 0; ++i) {
        //     vLines.push(this.textLine(this.mainVLine.x1 - i * this.props.step, this.mainVLine.y1, this.mainVLine.x2 - i * this.props.step, this.mainVLine.y2));
        // }
        // for (let i = 1; this.mainVLine.x1 + i * this.props.step < this.props.width; ++i) {
        //     vLines.push(this.textLine(this.mainVLine.x1 + i * this.props.step, this.mainVLine.y1, this.mainVLine.x2 + i * this.props.step, this.mainVLine.y2));
        // }

        // const hLines = [this.mainHLine];
        // for (let i = 1; this.mainHLine.y1 - i * this.props.step > 0; ++i) {
        //     hLines.push(this.textLine(this.mainHLine.x1, this.mainHLine.y1 - i * this.props.step, this.mainHLine.x2, this.mainHLine.y2 - i * this.props.step));
        // }
        // for (let i = 1; this.mainHLine.y1 + i * this.props.step < this.props.height; ++i) {
        //     hLines.push(this.textLine(this.mainHLine.x1, this.mainHLine.y1 + i * this.props.step, this.mainHLine.x2, this.mainHLine.y2 + i * this.props.step));
        // }

        this.mainVLine = this.textLine(0-this.xOffset, 0-this.yOffset, 0-this.xOffset, this.props.height-this.yOffset);
        this.mainHLine = this.textLine(0-this.xOffset, 0-this.yOffset, this.props.width-this.xOffset, 0-this.yOffset);

        const vLines = [this.mainVLine];
        for (let i = 1; this.mainVLine.x1 + i * this.props.step < this.props.width; ++i) {
            vLines.push(this.textLine(this.mainVLine.x1 + i * this.props.step, this.mainVLine.y1, this.mainVLine.x2 + i * this.props.step, this.mainVLine.y2));
        }

        const hLines = [this.mainHLine];
        for (let i = 1; this.mainHLine.y1 + i * this.props.step < this.props.height; ++i) {
            hLines.push(this.textLine(this.mainHLine.x1, this.mainHLine.y1 + i * this.props.step, this.mainHLine.x2, this.mainHLine.y2 + i * this.props.step));
        }

        this.state = {
            verticalLines: vLines,
            horizontalLines: hLines,
        };

        return (
            <Group>
                {this.state.verticalLines.map((el, i) => (
                    <Line points={[el.x1 + this.props.xOffset, el.y1 + this.props.yOffset, el.x2 + this.props.xOffset, el.y2 + this.props.yOffset]} stroke={this.props.stroke} key={`grid_v_line${i}`} />
                ))}
                {this.state.horizontalLines.map((el, i) => (
                    <Line points={[el.x1 + this.props.xOffset, el.y1 + this.props.yOffset, el.x2 + this.props.xOffset, el.y2 + this.props.yOffset]} stroke={this.props.stroke} key={`grid_h_line${i}`} />
                ))}
            </Group>
        );
    }

    textLine(x1, y1, x2, y2) {
        return {x1: x1, y1: y1, x2: x2, y2: y2};
    }
}

Призывается этот шайтан так:

<Grid step={30} xOffset={this.state.offsetX} yOffset={this.state.offsetY} stroke={'gray'} width={this.width} height={this.height} />

Ожидалось что при изменении offsetX и offsetY будет вызываться render(), перерассчитывать координаты остальных линий и это создаст иллюзию бесконечной сетки.

На деле получилось вот это

вот это

Где ошибка в моих рассуждениях и какой путь верный? Хотелось бы следовать именно подходу React - изучаю его.

Answer 1

[hzzzzl]

this.state = {
            verticalLines: vLines,
            horizontalLines: hLines,
        };

так нельзя, реакт не узнает, что стейт изменился (пишется же в консоли предупреждение об этом, не?)

для начала попробуй

this.setState( {
            verticalLines: vLines,
            horizontalLines: hLines,
        } );

а дальше не знаю, сложно сказать без работающего кода в песочнице :)

Comments

[sudo rm -rf /]

this.setState( {
     verticalLines: vLines,
     horizontalLines: hLines,
} );

Такая штука решила бы все проблемы. Только она не работает.
Если ты напишешь так, то словишь stack overflow, так как setState() побуждает render()

[hzzzzl]

при изменении offsetX и offsetY будет вызываться render()

да, но constructor(...props) {} выполняется только при первой отрисовке компонента, то есть ты один раз ставишь this.offsetX из пропсов, и потом уже при смене пропсов this.offsetX остается первоначальным

// this.mainVLine = this.textLine(0-this.xOffset, 0-this.yOffset, 0-this.xOffset, this.props.height-this.yOffset);
const { xOffset, yOffset } = this.props; // всегда актуальное значение из пропсов
this.mainVLine = this.textLine(0-xOffset, 0-yOffset, 0-xOffset, this.props.height-yOffset);

[hzzzzl]

sudo rm -rf /,

Такая штука решила бы все проблемы. Только она не работает.
Если ты напишешь так, то словишь stack overflow, так как setState() побуждает render()

да, я не дочитал до фазы рендера
так зачем это держать в стейте?

// где то считаем vLines
{vLines.map((el, i) => (....

[sudo rm -rf /]

hzzzzl,

да, я не дочитал до фазы рендера
так зачем это держать в стейте?

Да нам без разницы, так как setState все равно не вызывается.

да, но constructor(...props) {} выполняется только при первой отрисовке компонента, то есть ты один раз ставишь this.offsetX из пропсов, и потом уже при смене пропсов this.offsetX остается первоначальным

Вот оно! Завелось!

render(){...

render () {

        this.xOffset = (this.props.xOffset || 0)
        this.yOffset = (this.props.yOffset || 0)

        this.mainVLine = this.textLine(this.props.width/2 +this.xOffset, 0-this.yOffset, this.props.width/2 +this.xOffset, this.props.height-this.yOffset);
        this.mainHLine = this.textLine(0-this.xOffset, this.props.height/2 +this.yOffset, this.props.width-this.xOffset, this.props.height/2 +this.yOffset);

        const vLines = [this.mainVLine];
....

Но есть ещё открытый вопрос. Если я захочу через callback возвращать, например количество отрисованных линий, а потом оторбражать их в виде текста, это приведет к перерисовке сетки, и снова stack overflow

[sudo rm -rf /]

Точно ли запихивание этих расчетов в render() - true way?
Или в react есть другие механизмы/подходы, чтобы не выпадать?

[hzzzzl]

Точно ли запихивание этих расчетов в render() - true way?

нууу.. то что надо считать каждый раз, то надо считать каждый раз
для читабельности можно это вынести в отдельный метод, и вызывать некий this._calculateLines()

Если я захочу через callback возвращать, например количество отрисованных линий, а потом оторбражать их в виде текста

можно через пропс прокинуть какой-нибудь this.props.returnNumberLines(horiz, vert) и вызывать его перед финальной стадией рендера, когда будут готовы значения