diff options
Diffstat (limited to 'src/App.js')
| -rw-r--r-- | src/App.js | 139 |
1 files changed, 84 insertions, 55 deletions
@@ -1,6 +1,6 @@ import React, { Component } from 'react' import './App.css' -import { rgb, xy, findContiguousPixels, getPixel } from './Utils' +import { rgb, xy, findContiguousPixels, getPixel, rotatePixelsClock, rotatePixelsCounterClock } from './Utils' import { setPixel, clear, noop, save, load } from './Actions' import Palette from './Palette' import PaintArea from './PaintArea' @@ -11,40 +11,56 @@ import LoadDialog from './LoadDialog' import SaveDialog from './SaveDialog' const tools = [ - { - name: "paint", - icon: "fas fa-pencil-alt", + { + name: "paint", + icon: "fas fa-pencil-alt", action: function (x, y) { let { r, g, b } = rgb(this.state.selectedColor) - setPixel(this._websocket, x, y, r, g, b) + setPixel(this._websocket, x, y, r, g, b) } }, - { - name: "fill", - icon: "fab fa-bitbucket", + { + name: "fill", + icon: "fab fa-bitbucket", action: function (x, y) { let pixelsToColor = findContiguousPixels(x, y, this.state.pixels) pixelsToColor.forEach((coord) => { - let px = { ...xy(coord), ...rgb(this.state.selectedColor)} + let px = { ...xy(coord), ...rgb(this.state.selectedColor) } setPixel(this._websocket, px.x, px.y, px.r, px.g, px.b) }) } }, - { - name: "erase", - icon: "fas fa-eraser", + { + name: "erase", + icon: "fas fa-eraser", action: function (x, y) { - setPixel(this._websocket, x, y, 0, 0, 0) + setPixel(this._websocket, x, y, 0, 0, 0) }, }, - { - name: "pick", - icon: "fas fa-eye-dropper", + { + name: "pick", + icon: "fas fa-eye-dropper", action: function (x, y) { let color = getPixel(x, y, this.state.pixels) this.setState({ selectedColor: color }) }, }, + { + name: "rotate-clockwise", + icon: "fas fa-redo", + onSelect: function () { + let newPixels = rotatePixelsClock(this.state.pixels) + this._setAllPixels(newPixels) + } + }, + { + name: "rotate-anticlockwise", + icon: "fas fa-undo", + onSelect: function () { + let newPixels = rotatePixelsCounterClock(this.state.pixels) + this._setAllPixels(newPixels) + } + }, // { // name: "lighten", // icon: "far fa-sun" @@ -53,23 +69,23 @@ const tools = [ // name: "darken", // icon: "fas fa-sun" // }, - { - name: "save", - icon: "fas fa-save", + { + name: "save", + icon: "fas fa-save", onSelect: function () { this.setState({ showingSave: true }) } }, - { - name: "load", - icon: "fas fa-save", + { + name: "load", + icon: "fas fa-save", onSelect: function () { this.setState({ showingLoad: true }) } }, - { - name: "trash", - icon: "fas fa-trash", + { + name: "trash", + icon: "fas fa-trash", onSelect: function () { clear(this._websocket) } @@ -103,7 +119,7 @@ class App extends Component { this._connectWebsocket() } - _onMessage({data}) { + _onMessage({ data }) { let state = JSON.parse(data) this.setState({ ...state // Includes pixels and saves @@ -111,22 +127,23 @@ class App extends Component { } _onOpen() { - this.setState({connected: true}) + this.setState({ connected: true }) noop(this._websocket) } _onClose() { - this.setState({connected: false}) + this.setState({ connected: false }) this._connectWebsocket() } _onError() { - this.setState({connected: false}) + this.setState({ connected: false }) this._connectWebsocket() } _connectWebsocket() { - this._websocket = new WebSocket('ws://' + window.location.hostname + ':3001/ws') + // this._websocket = new WebSocket('ws://' + window.location.hostname + ':3001/ws') + this._websocket = new WebSocket('ws://shinypi:3001/ws') this._websocket.onmessage = this._onMessage this._websocket.onopen = this._onOpen this._websocket.onclose = this._onClose @@ -140,7 +157,7 @@ class App extends Component { } let action = tool.action if (!action) { - return + return } action.bind(this)(x, y) } @@ -150,52 +167,64 @@ class App extends Component { if (selectAction) { selectAction.bind(this)() } else { - this.setState({selectedTool: tool}) + this.setState({ selectedTool: tool }) } } _loadDrawing(name) { load(this._websocket, name) - this.setState({showingLoad: false}) + this.setState({ showingLoad: false }) } _saveDrawing(name) { save(this._websocket, name) - this.setState({showingSave: false}) + this.setState({ showingSave: false }) + } + + _setAllPixels(newPixels) { + let width = newPixels.length + let height = newPixels[0].length + for (var x = 0; x < width; x++) { + for (var y = 0; y < height; y++) { + let px = getPixel(x, y, newPixels) + let { r, g, b } = rgb(px) + setPixel(this._websocket, x, y, r, g, b) + } + } } render() { return ( <div className="App"> - <ConnectedIndicator connected={this.state.connected}/> + <ConnectedIndicator connected={this.state.connected} /> <Toolkit tools={tools} selectedTool={this.state.selectedTool} - onSelectTool={this._selectTool}/> - <PaintArea + onSelectTool={this._selectTool} /> + <PaintArea data={this.state.pixels} - onTool={this._applyTool}/> - <Palette + onTool={this._applyTool} /> + <Palette selectedColor={this.state.selectedColor} - onSelectColor={(color) => this.setState({selectedColor: color})} /> - <ColorIndicator color={this.state.selectedColor}/> + onSelectColor={(color) => this.setState({ selectedColor: color })} /> + <ColorIndicator color={this.state.selectedColor} /> <div> - { - this.state.showingLoad - && <LoadDialog - saves={this.state.saves} - onLoad={(drawing) => this._loadDrawing(drawing)} - onClose={() => this.setState({showingLoad: false})}/> - } + { + this.state.showingLoad + && <LoadDialog + saves={this.state.saves} + onLoad={(drawing) => this._loadDrawing(drawing)} + onClose={() => this.setState({ showingLoad: false })} /> + } </div> <div> - { - this.state.showingSave - && <SaveDialog - saves={this.state.saves} - onSave={(name) => this._saveDrawing(name)} - onClose={() => this.setState({showingSave: false})}/> - } + { + this.state.showingSave + && <SaveDialog + saves={this.state.saves} + onSave={(name) => this._saveDrawing(name)} + onClose={() => this.setState({ showingSave: false })} /> + } </div> </div> |