Styles fix (#190)

* Styles improvements

* Default values when restore elements
pull/192/head
Paulo Menezes 5 years ago committed by Christopher Chedeau
parent feefb14bf5
commit d5c6dd49a2

@ -842,25 +842,19 @@ function generateDraw(element: ExcalidrawElement) {
}; };
} else if (element.type === "arrow") { } else if (element.type === "arrow") {
const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element); const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
const options = {
stroke: element.strokeColor,
strokeWidth: element.strokeWidth,
roughness: element.roughness
};
const shapes = withCustomMathRandom(element.seed, () => [ const shapes = withCustomMathRandom(element.seed, () => [
// \ // \
generator.line(x3, y3, x2, y2, { generator.line(x3, y3, x2, y2, options),
stroke: element.strokeColor,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}),
// ----- // -----
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 }) => { element.draw = (rc, context, { scrollX, scrollY }) => {
@ -971,7 +965,17 @@ function restore(
? JSON.parse(savedElements) ? JSON.parse(savedElements)
: 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; return savedState ? JSON.parse(savedState) : null;
@ -1106,7 +1110,7 @@ function getSelectedIndices() {
const someElementIsSelected = () => const someElementIsSelected = () =>
elements.some(element => element.isSelected); elements.some(element => element.isSelected);
const someElementIsSelectedIsRectangleOrEllipseOrDiamond = () => const hasBackground = () =>
elements.some( elements.some(
element => element =>
element.isSelected && element.isSelected &&
@ -1115,7 +1119,7 @@ const someElementIsSelectedIsRectangleOrEllipseOrDiamond = () =>
element.type === "diamond") element.type === "diamond")
); );
const someElementIsSelectedIsRectangleOrEllipseOrDiamondOrArrow = () => const hasStroke = () =>
elements.some( elements.some(
element => element =>
element.isSelected && element.isSelected &&
@ -1514,125 +1518,76 @@ class App extends React.Component<{}, AppState> {
<button onClick={this.moveOneLeft}>Send backward</button> <button onClick={this.moveOneLeft}>Send backward</button>
<button onClick={this.moveAllLeft}>Send to back</button> <button onClick={this.moveAllLeft}>Send to back</button>
</div> </div>
</> <h4>Colors</h4>
)} <div className="panelColumn">
<h4>Canvas</h4> <h5>Shape Stroke Color</h5>
<div className="panelColumn"> <div>
<h5>Canvas Background Color</h5> <button
<div> className="swatch"
<button style={{
className="swatch" backgroundColor:
style={{ getSelectedStrokeColor() ||
backgroundColor: this.state.viewBackgroundColor this.state.currentItemStrokeColor
}}
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 });
}} }}
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker === ColorPicker.SHAPE_STROKE
? null
: ColorPicker.SHAPE_STROKE
}))
}
/>
{this.state.currentColorPicker ===
ColorPicker.SHAPE_STROKE && (
<div className="popover">
<div
className="cover"
onClick={() =>
this.setState({ currentColorPicker: null })
}
/>
<SketchPicker
color={this.state.currentItemStrokeColor}
onChange={color => this.changeStrokeColor(color.hex)}
/>
</div>
)}
<input
type="text"
className="swatch-input"
value={
getSelectedStrokeColor() ||
this.state.currentItemStrokeColor
}
onChange={e => this.changeStrokeColor(e.target.value)}
/> />
</div> </div>
) : null} </div>
<input
type="text" {hasBackground() && (
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"> <div className="panelColumn">
<h5>Shape Stroke Color</h5> <h5>Shape Background Color</h5>
<div> <div>
<button <button
className="swatch" className="swatch"
style={{ style={{
backgroundColor: backgroundColor:
getSelectedStrokeColor() || getSelectedBackgroundColor() ||
this.state.currentItemStrokeColor this.state.currentItemBackgroundColor
}} }}
onClick={() => onClick={() =>
this.setState(s => ({ this.setState(s => ({
currentColorPicker: currentColorPicker:
s.currentColorPicker === ColorPicker.SHAPE_STROKE s.currentColorPicker ===
ColorPicker.SHAPE_BACKGROUND
? null ? null
: ColorPicker.SHAPE_STROKE : ColorPicker.SHAPE_BACKGROUND
})) }))
} }
/> />
{this.state.currentColorPicker === {this.state.currentColorPicker ===
ColorPicker.SHAPE_STROKE && ( ColorPicker.SHAPE_BACKGROUND ? (
<div className="popover"> <div className="popover">
<div <div
className="cover" className="cover"
@ -1641,82 +1596,30 @@ class App extends React.Component<{}, AppState> {
} }
/> />
<SketchPicker <SketchPicker
color={this.state.currentItemStrokeColor} color={this.state.currentItemBackgroundColor}
onChange={color => this.changeStrokeColor(color.hex)} onChange={color =>
this.changeBackgroundColor(color.hex)
}
/> />
</div> </div>
)} ) : null}
<input <input
type="text" type="text"
className="swatch-input" className="swatch-input"
value={ value={
getSelectedStrokeColor() || getSelectedBackgroundColor() ||
this.state.currentItemStrokeColor this.state.currentItemBackgroundColor
} }
onChange={e => this.changeStrokeColor(e.target.value)} onChange={e => this.changeBackgroundColor(e.target.value)}
/> />
</div> </div>
</div> </div>
)}
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && ( {hasBackground() && (
<div className="panelColumn">
<h5>Shape Background Color</h5>
<div>
<button
className="swatch"
style={{
backgroundColor:
getSelectedBackgroundColor() ||
this.state.currentItemBackgroundColor
}}
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker ===
ColorPicker.SHAPE_BACKGROUND
? null
: ColorPicker.SHAPE_BACKGROUND
}))
}
/>
{this.state.currentColorPicker ===
ColorPicker.SHAPE_BACKGROUND ? (
<div className="popover">
<div
className="cover"
onClick={() =>
this.setState({ currentColorPicker: null })
}
/>
<SketchPicker
color={this.state.currentItemBackgroundColor}
onChange={color =>
this.changeBackgroundColor(color.hex)
}
/>
</div>
) : null}
<input
type="text"
className="swatch-input"
value={
getSelectedBackgroundColor() ||
this.state.currentItemBackgroundColor
}
onChange={e =>
this.changeBackgroundColor(e.target.value)
}
/>
</div>
</div>
)}
</>
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && (
<> <>
<h4>Fill</h4> <h4>Fill</h4>
<div className="panelColumn"> <div className="panelColumn">
{/* <select onChange={this.changeFillStyle} value={getSelectedFillStyles()}> */}
<button <button
onClick={() => this.changeFillStyle("hachure")} onClick={() => this.changeFillStyle("hachure")}
className={ className={
@ -1751,14 +1654,6 @@ class App extends React.Component<{}, AppState> {
> >
Cross-hatch Cross-hatch
</button> </button>
<button
onClick={() => this.changeFillStyle("dots")}
className={
getSelectedFillStyles() === "dots" ? "active" : ""
}
>
Dots
</button>
<button <button
onClick={() => this.changeFillStyle("sunburst")} onClick={() => this.changeFillStyle("sunburst")}
className={ className={
@ -1785,12 +1680,11 @@ class App extends React.Component<{}, AppState> {
> >
Zigzag-line Zigzag-line
</button> </button>
{/* </select> */}
</div> </div>
</> </>
)} )}
{someElementIsSelectedIsRectangleOrEllipseOrDiamondOrArrow() && ( {hasStroke() && (
<> <>
<h4>Stroke width</h4> <h4>Stroke width</h4>
<div className="panelColumn"> <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> </div>
<canvas <canvas
id="canvas" id="canvas"

Loading…
Cancel
Save