Reorganize menu (#178)

src/components/EditableText.tsx

@@ -20,7 +20,7 @@ export default class EditableText extends Component<Props, InputState> {
     };
   }
 
-  componentWillReceiveProps(props: Props) {
+  UNSAFE_componentWillReceiveProps(props: Props) {
     this.setState({ value: props.value });
   }
 
@@ -52,6 +52,11 @@ export default class EditableText extends Component<Props, InputState> {
             value={value}
             onChange={e => this.handleEdit(e)}
             onBlur={() => this.handleBlur()}
+            onKeyDown={e => {
+              if (e.key === "Enter") {
+                this.handleBlur();
+              }
+            }}
             autoFocus
           />
         ) : (

src/index.tsx

@@ -7,7 +7,6 @@ import { SketchPicker } from "react-color";
 import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
 import { roundRect } from "./roundRect";
 import EditableText from "./components/EditableText";
-import { getDateTime } from "./utils";
 
 import "./styles.scss";
 
@@ -655,6 +654,18 @@ function rotate(x1: number, y1: number, x2: number, y2: number, angle: number) {
   ];
 }
 
+function getDateTime() {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hr = date.getHours();
+  const min = date.getMinutes();
+  const secs = date.getSeconds();
+
+  return `${year}${month}${day}${hr}${min}${secs}`;
+}
+
 // Casting second argument (DrawingSurface) to any,
 // because it is requred by TS definitions and not required at runtime
 const generator = rough.generator(null, null as any);
@@ -1211,9 +1222,21 @@ class App extends React.Component<{}, AppState> {
               </label>
             ))}
           </div>
-          <h4>Colors</h4>
+          {someElementIsSelected() && (
+            <>
+              <h4>Selected Shapes</h4>
+              <div className="panelColumn">
+                <button onClick={this.deleteSelectedElements}>Delete</button>
+                <button onClick={this.moveOneRight}>Bring forward</button>
+                <button onClick={this.moveAllRight}>Bring to front</button>
+                <button onClick={this.moveOneLeft}>Send backward</button>
+                <button onClick={this.moveAllLeft}>Send to back</button>
+              </div>
+            </>
+          )}
+          <h4>Canvas</h4>
           <div className="panelColumn">
-            <h5>Canvas Background</h5>
+            <h5>Canvas Background Color</h5>
             <div>
               <button
                 className="swatch"
@@ -1228,13 +1251,14 @@ class App extends React.Component<{}, AppState> {
                         : ColorPicker.CANVAS_BACKGROUND
                   }))
                 }
-              ></button>
+              />
-              {this.state.currentColorPicker === ColorPicker.CANVAS_BACKGROUND ? (
+              {this.state.currentColorPicker ===
+              ColorPicker.CANVAS_BACKGROUND ? (
                 <div className="popover">
                   <div
                     className="cover"
                     onClick={() => this.setState({ currentColorPicker: null })}
-                  ></div>
+                  />
                   <SketchPicker
                     color={this.state.viewBackgroundColor}
                     onChange={color => {
@@ -1252,7 +1276,7 @@ class App extends React.Component<{}, AppState> {
                 }
               />
             </div>
-            <h5>Shape Stroke</h5>
+            <h5>Shape Stroke Color</h5>
             <div>
               <button
                 className="swatch"
@@ -1267,13 +1291,13 @@ class App extends React.Component<{}, AppState> {
                         : ColorPicker.SHAPE_STROKE
                   }))
                 }
-              ></button>
+              />
               {this.state.currentColorPicker === ColorPicker.SHAPE_STROKE ? (
                 <div className="popover">
                   <div
                     className="cover"
                     onClick={() => this.setState({ currentColorPicker: null })}
-                  ></div>
+                  />
                   <SketchPicker
                     color={this.state.currentItemStrokeColor}
                     onChange={color => {
@@ -1291,7 +1315,7 @@ class App extends React.Component<{}, AppState> {
                 }}
               />
             </div>
-            <h5>Shape Background</h5>
+            <h5>Shape Background Color</h5>
             <div>
               <button
                 className="swatch"
@@ -1306,13 +1330,14 @@ class App extends React.Component<{}, AppState> {
                         : ColorPicker.SHAPE_BACKGROUND
                   }))
                 }
-              ></button>
+              />
-              {this.state.currentColorPicker === ColorPicker.SHAPE_BACKGROUND ? (
+              {this.state.currentColorPicker ===
+              ColorPicker.SHAPE_BACKGROUND ? (
                 <div className="popover">
                   <div
                     className="cover"
                     onClick={() => this.setState({ currentColorPicker: null })}
-                  ></div>
+                  />
                   <SketchPicker
                     color={this.state.currentItemBackgroundColor}
                     onChange={color => {
@@ -1330,9 +1355,6 @@ class App extends React.Component<{}, AppState> {
                 }}
               />
             </div>
-          </div>
-          <h4>Canvas</h4>
-          <div className="panelColumn">
             <button
               onClick={this.clearCanvas}
               title="Clear the canvas & reset background color"
@@ -1342,6 +1364,14 @@ class App extends React.Component<{}, AppState> {
           </div>
           <h4>Export</h4>
           <div className="panelColumn">
+            <h5>Name</h5>
+            {this.state.name && (
+              <EditableText
+                value={this.state.name}
+                onChange={(name: string) => this.updateProjectName(name)}
+              />
+            )}
+            <h5>Image</h5>
             <button
               onClick={() => {
                 exportAsPNG(this.state);
@@ -1359,18 +1389,7 @@ class App extends React.Component<{}, AppState> {
               />
               background
             </label>
-          </div>
+            <h5>Scene</h5>
-          <h4>Project name</h4>
-          <div className="panelColumn">
-            {this.state.name && (
-              <EditableText
-                value={this.state.name}
-                onChange={(name: string) => this.updateProjectName(name)}
-              />
-            )}
-          </div>
-          <h4>Save/Load</h4>
-          <div className="panelColumn">
             <button
               onClick={() => {
                 saveAsJSON(this.state.name);
@@ -1386,18 +1405,6 @@ class App extends React.Component<{}, AppState> {
               Load file...
             </button>
           </div>
-          {someElementIsSelected() && (
-            <>
-              <h4>Shape options</h4>
-              <div className="panelColumn">
-                <button onClick={this.deleteSelectedElements}>Delete</button>
-                <button onClick={this.moveOneRight}>Bring forward</button>
-                <button onClick={this.moveAllRight}>Bring to front</button>
-                <button onClick={this.moveOneLeft}>Send backward</button>
-                <button onClick={this.moveAllLeft}>Send to back</button>
-              </div>
-            </>
-          )}
         </div>
         <canvas
           id="canvas"

src/utils/index.ts

@@ -1,11 +0,0 @@
-export const getDateTime = (): string => {
-  const date = new Date();
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hr = date.getHours();
-  const min = date.getMinutes();
-  const secs = date.getSeconds();
-
-  return `${year}${month}${day}${hr}${min}${secs}`;
-};