From 23cd62d1480711a1a3b1adb9c693222ec158f7aa Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Sun, 5 Jan 2020 19:11:35 -0800 Subject: [PATCH] Improve selection view (#192) --- src/index.tsx | 298 +++++++++++++++++++++--------------------------- src/styles.scss | 8 ++ 2 files changed, 137 insertions(+), 169 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 1b9c76b4..82df8fd5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -795,12 +795,7 @@ function generateDraw(element: ExcalidrawElement) { leftY ] = getDiamondPoints(element); return generator.polygon( - [ - [topX, topY], - [rightX, rightY], - [bottomX, bottomY], - [leftX, leftY] - ], + [[topX, topY], [rightX, rightY], [bottomX, bottomY], [leftX, leftY]], { stroke: element.strokeColor, fill: element.backgroundColor, @@ -1039,7 +1034,7 @@ const SHAPES = [ icon: ( // custom - + ), value: "diamond" @@ -1137,7 +1132,7 @@ function getSelectedFillStyles() { .map(element => element.fillStyle) ) ); - return fillStyles.length === 1 ? fillStyles[0] : ""; + return fillStyles.length === 1 ? fillStyles[0] : null; } function getSelectedStrokeWidth() { @@ -1145,10 +1140,10 @@ function getSelectedStrokeWidth() { new Set( elements .filter(element => element.isSelected) - .map(element => `${element.strokeWidth}`) + .map(element => element.strokeWidth) ) ); - return strokeWidth.length === 1 ? +strokeWidth[0] : ""; + return strokeWidth.length === 1 ? strokeWidth[0] : null; } function getSelectedRoughness() { @@ -1156,10 +1151,10 @@ function getSelectedRoughness() { new Set( elements .filter(element => element.isSelected) - .map(element => `${element.roughness}`) + .map(element => element.roughness) ) ); - return roughness.length === 1 ? +roughness[0] : ""; + return roughness.length === 1 ? roughness[0] : null; } function getSelectedOpacity() { @@ -1167,10 +1162,10 @@ function getSelectedOpacity() { new Set( elements .filter(element => element.isSelected) - .map(element => `${element.opacity}`) + .map(element => element.opacity) ) ); - return opacity.length === 1 ? +opacity[0] : ""; + return opacity.length === 1 ? opacity[0] : null; } function getSelectedStrokeColor() { @@ -1236,6 +1231,29 @@ function getElementAtPosition(x: number, y: number) { return hitElement; } +function ButtonSelect({ + options, + value, + onChange +}: { + options: { value: T; text: string }[]; + value: T | null; + onChange: (value: T) => void; +}) { + return ( +
+ {options.map(option => ( + + ))} +
+ ); +} + const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5; const ELEMENT_TRANSLATE_AMOUNT = 1; @@ -1411,18 +1429,6 @@ class App extends React.Component<{}, AppState> { this.forceUpdate(); }; - private changeFillStyle = (style: string) => { - this.changeProperty(element => (element.fillStyle = style)); - }; - - private changeStrokeWidth = (event: React.ChangeEvent) => { - this.changeProperty(element => (element.strokeWidth = +event.target.value)); - }; - - private changeRoughness = (event: React.ChangeEvent) => { - this.changeProperty(element => (element.roughness = +event.target.value)); - }; - private changeOpacity = (event: React.ChangeEvent) => { this.changeProperty(element => (element.opacity = +event.target.value)); }; @@ -1509,65 +1515,60 @@ class App extends React.Component<{}, AppState> { ))} {someElementIsSelected() && ( - <> -

Selected Shapes

-
- +
+

Selection

+
-

Colors

-
-
Shape Stroke Color
-
-
+ }} + onClick={() => + this.setState(s => ({ + currentColorPicker: + s.currentColorPicker === ColorPicker.SHAPE_STROKE + ? null + : ColorPicker.SHAPE_STROKE + })) + } + /> + {this.state.currentColorPicker === ColorPicker.SHAPE_STROKE && ( +
+
+ this.setState({ currentColorPicker: null }) + } + /> + this.changeStrokeColor(color.hex)} + /> +
+ )} + this.changeStrokeColor(e.target.value)} + />
{hasBackground() && ( -
-
Shape Background Color
+ <> +
Background Color
-
+ )} {hasBackground() && ( <> -

Fill

-
- - - - - - - -
+
Fill
+ { + this.changeProperty(element => { + element.fillStyle = value; + }); + }} + /> )} {hasStroke() && ( <> -

Stroke width

-
- -
+
Stroke Width
+ { + this.changeProperty(element => { + element.strokeWidth = value; + }); + }} + /> -

Roughness

-
- -
+
Slopiness
+ + this.changeProperty(element => { + element.roughness = value; + }) + } + /> )} -

Opacity

+
Opacity
- + + +
)}

Canvas

diff --git a/src/styles.scss b/src/styles.scss index a8f7f997..8fed5efe 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -53,6 +53,14 @@ body { h5:first-of-type { margin-top: 0; } + + .buttonList { + flex-wrap: wrap; + + button { + margin-right: 4px; + } + } } }