Styles fix (#190)

* Styles improvements

* Default values when restore elements

src/index.tsx

@@ -842,25 +842,19 @@ function generateDraw(element: ExcalidrawElement) {
     };
   } else if (element.type === "arrow") {
     const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
-    const shapes = withCustomMathRandom(element.seed, () => [
+    const options = {
-      //    \
-      generator.line(x3, y3, x2, y2, {
       stroke: element.strokeColor,
       strokeWidth: element.strokeWidth,
       roughness: element.roughness
-      }),
+    };
+
+    const shapes = withCustomMathRandom(element.seed, () => [
+      //    \
+      generator.line(x3, y3, x2, y2, options),
       // -----
-      generator.line(x1, y1, x2, y2, {
+      generator.line(x1, y1, x2, y2, options),
-        stroke: element.strokeColor,
-        strokeWidth: element.strokeWidth,
-        roughness: element.roughness
-      }),
       //    /
-      generator.line(x4, y4, x2, y2, {
+      generator.line(x4, y4, x2, y2, options)
-        stroke: element.strokeColor,
-        strokeWidth: element.strokeWidth,
-        roughness: element.roughness
-      })
     ]);
 
     element.draw = (rc, context, { scrollX, scrollY }) => {
@@ -971,7 +965,17 @@ function restore(
           ? JSON.parse(savedElements)
           : savedElements)
       );
-      elements.forEach((element: ExcalidrawElement) => generateDraw(element));
+      elements.forEach((element: ExcalidrawElement) => {
+        element.fillStyle = element.fillStyle || "hachure";
+        element.strokeWidth = element.strokeWidth || 1;
+        element.roughness = element.roughness || 1;
+        element.opacity =
+          element.opacity === null || element.opacity === undefined
+            ? 100
+            : element.opacity;
+
+        generateDraw(element);
+      });
     }
 
     return savedState ? JSON.parse(savedState) : null;
@@ -1106,7 +1110,7 @@ function getSelectedIndices() {
 const someElementIsSelected = () =>
   elements.some(element => element.isSelected);
 
-const someElementIsSelectedIsRectangleOrEllipseOrDiamond = () =>
+const hasBackground = () =>
   elements.some(
     element =>
       element.isSelected &&
@@ -1115,7 +1119,7 @@ const someElementIsSelectedIsRectangleOrEllipseOrDiamond = () =>
         element.type === "diamond")
   );
 
-const someElementIsSelectedIsRectangleOrEllipseOrDiamondOrArrow = () =>
+const hasStroke = () =>
   elements.some(
     element =>
       element.isSelected &&
@@ -1514,103 +1518,6 @@ class App extends React.Component<{}, AppState> {
                 <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 Color</h5>
-            <div>
-              <button
-                className="swatch"
-                style={{
-                  backgroundColor: this.state.viewBackgroundColor
-                }}
-                onClick={() =>
-                  this.setState(s => ({
-                    currentColorPicker:
-                      s.currentColorPicker === ColorPicker.CANVAS_BACKGROUND
-                        ? null
-                        : ColorPicker.CANVAS_BACKGROUND
-                  }))
-                }
-              />
-              {this.state.currentColorPicker ===
-              ColorPicker.CANVAS_BACKGROUND ? (
-                <div className="popover">
-                  <div
-                    className="cover"
-                    onClick={() => this.setState({ currentColorPicker: null })}
-                  />
-                  <SketchPicker
-                    color={this.state.viewBackgroundColor}
-                    onChange={color => {
-                      this.setState({ viewBackgroundColor: color.hex });
-                    }}
-                  />
-                </div>
-              ) : null}
-              <input
-                type="text"
-                className="swatch-input"
-                value={this.state.viewBackgroundColor}
-                onChange={e =>
-                  this.setState({ viewBackgroundColor: e.target.value })
-                }
-              />
-            </div>
-            <button
-              onClick={this.clearCanvas}
-              title="Clear the canvas & reset background color"
-            >
-              Clear canvas
-            </button>
-          </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);
-              }}
-            >
-              Export to png
-            </button>
-            <label>
-              <input
-                type="checkbox"
-                checked={this.state.exportBackground}
-                onChange={e => {
-                  this.setState({ exportBackground: e.target.checked });
-                }}
-              />
-              background
-            </label>
-            <h5>Scene</h5>
-            <button
-              onClick={() => {
-                saveAsJSON(this.state.name);
-              }}
-            >
-              Save as...
-            </button>
-            <button
-              onClick={() => {
-                loadFromJSON().then(() => this.forceUpdate());
-              }}
-            >
-              Load file...
-            </button>
-          </div>
-          {someElementIsSelected() && (
-            <>
-              <>
               <h4>Colors</h4>
               <div className="panelColumn">
                 <h5>Shape Stroke Color</h5>
@@ -1658,7 +1565,7 @@ class App extends React.Component<{}, AppState> {
                 </div>
               </div>
 
-                {someElementIsSelectedIsRectangleOrEllipseOrDiamond() && (
+              {hasBackground() && (
                 <div className="panelColumn">
                   <h5>Shape Background Color</h5>
                   <div>
@@ -1703,20 +1610,16 @@ class App extends React.Component<{}, AppState> {
                         getSelectedBackgroundColor() ||
                         this.state.currentItemBackgroundColor
                       }
-                        onChange={e =>
+                      onChange={e => this.changeBackgroundColor(e.target.value)}
-                          this.changeBackgroundColor(e.target.value)
-                        }
                     />
                   </div>
                 </div>
               )}
-              </>
 
-              {someElementIsSelectedIsRectangleOrEllipseOrDiamond() && (
+              {hasBackground() && (
                 <>
                   <h4>Fill</h4>
                   <div className="panelColumn">
-                    {/* <select onChange={this.changeFillStyle} value={getSelectedFillStyles()}> */}
                     <button
                       onClick={() => this.changeFillStyle("hachure")}
                       className={
@@ -1751,14 +1654,6 @@ class App extends React.Component<{}, AppState> {
                     >
                       Cross-hatch
                     </button>
-                    <button
-                      onClick={() => this.changeFillStyle("dots")}
-                      className={
-                        getSelectedFillStyles() === "dots" ? "active" : ""
-                      }
-                    >
-                      Dots
-                    </button>
                     <button
                       onClick={() => this.changeFillStyle("sunburst")}
                       className={
@@ -1785,12 +1680,11 @@ class App extends React.Component<{}, AppState> {
                     >
                       Zigzag-line
                     </button>
-                    {/* </select> */}
                   </div>
                 </>
               )}
 
-              {someElementIsSelectedIsRectangleOrEllipseOrDiamondOrArrow() && (
+              {hasStroke() && (
                 <>
                   <h4>Stroke width</h4>
                   <div className="panelColumn">
@@ -1833,6 +1727,98 @@ class App extends React.Component<{}, AppState> {
               />
             </>
           )}
+          <h4>Canvas</h4>
+          <div className="panelColumn">
+            <h5>Canvas Background Color</h5>
+            <div>
+              <button
+                className="swatch"
+                style={{
+                  backgroundColor: this.state.viewBackgroundColor
+                }}
+                onClick={() =>
+                  this.setState(s => ({
+                    currentColorPicker:
+                      s.currentColorPicker === ColorPicker.CANVAS_BACKGROUND
+                        ? null
+                        : ColorPicker.CANVAS_BACKGROUND
+                  }))
+                }
+              />
+              {this.state.currentColorPicker ===
+              ColorPicker.CANVAS_BACKGROUND ? (
+                <div className="popover">
+                  <div
+                    className="cover"
+                    onClick={() => this.setState({ currentColorPicker: null })}
+                  />
+                  <SketchPicker
+                    color={this.state.viewBackgroundColor}
+                    onChange={color => {
+                      this.setState({ viewBackgroundColor: color.hex });
+                    }}
+                  />
+                </div>
+              ) : null}
+              <input
+                type="text"
+                className="swatch-input"
+                value={this.state.viewBackgroundColor}
+                onChange={e =>
+                  this.setState({ viewBackgroundColor: e.target.value })
+                }
+              />
+            </div>
+            <button
+              onClick={this.clearCanvas}
+              title="Clear the canvas & reset background color"
+            >
+              Clear canvas
+            </button>
+          </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);
+              }}
+            >
+              Export to png
+            </button>
+            <label>
+              <input
+                type="checkbox"
+                checked={this.state.exportBackground}
+                onChange={e => {
+                  this.setState({ exportBackground: e.target.checked });
+                }}
+              />
+              background
+            </label>
+            <h5>Scene</h5>
+            <button
+              onClick={() => {
+                saveAsJSON(this.state.name);
+              }}
+            >
+              Save as...
+            </button>
+            <button
+              onClick={() => {
+                loadFromJSON().then(() => this.forceUpdate());
+              }}
+            >
+              Load file...
+            </button>
+          </div>
         </div>
         <canvas
           id="canvas"