konva.js

import React from 'react';
import { Layer, Rect, Stage, Line, Circle, Group } from 'react-konva';
import Konva from 'konva';

import compose from 'recompose/compose';
import { connect } from 'react-redux';

import { addRectangle } from 'vclub/redux/club/whiteboard';

const enhance = compose(
  connect(state => console.log(state) || ({
    figures: state.whiteboard.figures,
  })),
);

let rerender = 0;

function TinyCircle(props) {
  return (
    <Circle
      x={props.x} y={props.y}
      radius={10} fill={'mistyrose'}
      onMouseDown={props.onMouseDown}
      onMouseUp={props.onMouseUp}
      onDragMove={props.onMouseMove}
      draggable
    />
  );
}

// function CircleBorder(props) {
//   re
// }

class MyRect extends React.Component {
  constructor() {
    super();
    this.state = {
      // small dots on corners
      active: false,
      x: 100,
      y: 100,
      width: 50,
      height: 50,
      x1: 150,
      y1: 150,
      // ability to drag main figure
      draggable: true,
    };
  }

  clickHandler = () => {
    this.setState(prevState => ({
      ...prevState,
      active: !prevState.active,
    }));
  }

  dragStartHandler = () => {
    this.setState(prevState => ({
      ...prevState,
      draggable: !prevState.draggable,
    }));
    console.log('drag');
  }

  mouseDownHandler = (evt) => {
    console.log(" => mouseDown");
    console.log(evt);
  }

  mouseUpHandler = (evt) => {
    console.log(" => mouseUp");
    console.log(evt);
  }

  mouseMoveHandler = (evt) => {
    console.log("hi");
    const { evt: {
      clientX, clientY,
    } } = evt;

    const findWidth = (prevState, clientX) => Math.abs((-1 * (clientX - prevState.x)) + prevState.width);
    const findHeight = (prevState, clientY) => Math.abs((-1 * (clientY - prevState.y)) + prevState.height);

    console.log("positions x:" + clientX + " y:" + clientY);
    this.setState(prevState => {
      const x = clientX >= prevState.x1 ? prevState.x1 : clientX;
      const y = clientY >= prevState.y1 ? prevState.y1 : clientY;
      const width = findWidth(prevState, clientX);
      const height = findHeight(prevState, clientY);

      return {
        ...prevState,
        x,
        y,
        width,
        height,
        x1: x + width,
        y1: y + height,
      };
    });
  }

  render() {
    const {
      x, y,
      width, height,
    } = this.state;

    console.log("#" + rerender++);
    console.log("active  = " + this.state.active);
    console.log("draggable = " + this.state.draggable);

    return (
      <Group draggable={this.state.active && this.state.draggable} >
        <Rect
          x={x} y={y} width={width} height={height}
          fill={'aquamarine'}
          draggable
          onMouseDown={() => console.log('mouse down!')}
          onClick={this.clickHandler}
        />
        {this.state.active === true
          ? (
            <Group draggable>
              <TinyCircle
                x={x} y={y}
                dragStart={this.dragStartHandler}
                draggable
                onMouseDown={this.mouseDownHandler}
                onMouseMove={this.mouseMoveHandler}
                onMouseUp={this.mouseUpHandler}
              />
            {/*
              <TinyCircle x={x} y={y + height} />
              <TinyCircle x={x + width} y={y} />
              <TinyCircle x={x + width} y={y + height} />
            */}
            </Group>
          )
          : null }
      </Group>
    );
  }
}

function initialCircle() {
  return (
    <Circle
      x={40} y={180}
      radius={25} fill={'mistyrose'}
    />
  );
}

function ShapePanel(props) {
  return (
    <Layer>
      <MyRect dispatch={props.dispatch} />
      <Line points={[15, 85, 65, 135]} stroke={'lightgrey'} lineCap={'round'} strokeWidth={'7'} />
      <Circle x={40} y={180} radius={25} fill={'lightgrey'} />
      <Line points={[90, 10, 85, 690]} stroke={'lightgrey'} />
    </Layer>
  )
}

function WhiteBoardRoom(props) {
  const {
    dispatch, figures,
  } = props;

  return (
    <div>
      <Stage width={700} height={700}>
        <ShapePanel dispatch={dispatch} />
        <Layer>
          {figures.map((elm, index) => <MyRect key={index.toString()} />)}
        </Layer>
      </Stage>
    </div>
  );
}

class MyRect1 extends React.Component {
  render() {
    return (
      <Rect
        width="50"
        height="50"
        fill="green"
        draggable="true"
        onDragEnd={this.changeSize.bind(this)}
        onDragStart={this.changeSize.bind(this)}
      />
    );
  }
}

export default enhance(WhiteBoardRoom);