Dron

Dron

by evgkch

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>

SCSS

svg {
  background-color: white;
}

Babel + JSX

// Local store
class Store {
	constructor(name, initialState = {}) {
  	this.name = name;
    this.subscribers = [];
  	this.state = initialState;
  }
  subscribe(subscriber) {
  	this.subscribers.push(subscriber);
  }
  unsubscribe(subscriber) {
  	this.subscribers = this.subscribers.filter(item => item !== subscriber);
  }
  update(state) {
  	this.state = { ...this.state, ...state };
    console.log(this.state);
    this.subscribers.map(component => component.setState(this.state));
  }
}

// Subscribe component to store with controller
const connect = ({ component, controller, store }) =>
	class extends React.Component {
    constructor() {
      super();
      if (store) store.subscribe(this);
      this.ctrl = controller(
        (state) => store
          ? store.update(state)
          : this.setState(state),
        () => this.state
      );
    }
    componentDidMount() {
    	if (store) this.setState(store.state);
    }
    componentWillUnmount() {
    	if (store) store.unsubscribe(this);
    }
    render() {
      return React.createElement(component, {...this.state, ...this.props, ctrl: this.ctrl })
    }
  }
  
const controller = (update, getState) => class {
	static draw(x, y) {
  	const { buffer } = getState();
    buffer.push([x, y]);
    update({ buffer, process: true });
  }
  static endDraw(x, y) {
  	const { polygon, buffer } = getState();
    buffer.pop();
    polygon.push(buffer);
    update({ polygon, buffer: [], process: false });
  }
}

const store = new Store('polygon', { polygon: [], buffer: [], process: false });

class Polygon extends React.Component {
  constructor() {
		super();
    this.state = {
      x: 0,
      y: 0,
      radar: { x_0: 400, y_0: 400, x: 500, y: 400 },
    };
  }
	onMouseMove(e) {
    this.setState({ x: e.clientX, y: e.clientY });
  }
  transormPointsToSVGType(buffer = []) {
  	let polyline;
    for (let el of buffer) {
    	if (polyline) {
      	polyline = `${polyline} ${el[0]},${el[1]}`;
      } else {
     ...