smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styles improvements

Browse source
This commit is contained in:
Paulo Menezes 2020-01-05 22:08:57 -03:00
parent feefb14bf5
commit 328be041a2
1 changed files with 14 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/index.tsx
View file

@ -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 }) => {
@ -1106,7 +1100,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 +1109,7 @@ const someElementIsSelectedIsRectangleOrEllipseOrDiamond = () =>
element.type === "diamond") element.type === "diamond")
); );
const someElementIsSelectedIsRectangleOrEllipseOrDiamondOrArrow = () => const hasStroke = () =>
elements.some( elements.some(
element => element =>
element.isSelected && element.isSelected &&
@ -1658,7 +1652,7 @@ class App extends React.Component<{}, AppState> {
</div> </div>
</div> </div>
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && ( {hasBackground() && (
<div className="panelColumn"> <div className="panelColumn">
<h5>Shape Background Color</h5> <h5>Shape Background Color</h5>
<div> <div>
@ -1712,11 +1706,10 @@ class App extends React.Component<{}, AppState> {
)} )}
</> </>
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && ( {hasBackground() && (
<> <>
<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={
@ -1785,12 +1778,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">