From 10e7ce5764b3b456e1f909cd6b6a90f076c2e014 Mon Sep 17 00:00:00 2001
From: Martin Ashby <martin@martin-laptop.lan>
Date: Thu, 17 May 2018 20:17:01 +0100
Subject: Fixed rotation problem. Added rotate function. Added docker file

---
 src/App.js | 139 +++++++++++++++++++++++++++++++++++++------------------------
 1 file changed, 84 insertions(+), 55 deletions(-)

(limited to 'src/App.js')

diff --git a/src/App.js b/src/App.js
index 68473ce..98611b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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>
-- 
cgit v1.2.3-ZIG