github-forks
/
success
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change styles (#179)

Browse Source 
* Fill style

* Roughness, opacity and more styles

* Remove duplicated options

* Support diamonds

* Remove unused import

* Fix typo and remove react import
pull/187/head
Paulo Menezes 5 years ago committed by Jared Palmer
parent 4be88c9c58
commit f360c3cb33
2 changed files with 405 additions and 87 deletions
Show Stats Download Patch File Download Diff File

444
src/index.tsx
Unescape Escape View File

@ -254,6 +254,10 @@ function newElement(
y: number,
strokeColor: string,
backgroundColor: string,
fillStyle: string,
strokeWidth: number,
roughness: number,
opacity: number,
width = 0,
height = 0
) {
@ -266,6 +270,10 @@ function newElement(
isSelected: false,
strokeColor: strokeColor,
backgroundColor: backgroundColor,
fillStyle: fillStyle,
strokeWidth: strokeWidth,
roughness: roughness,
opacity: opacity,
seed: randomSeed(),
draw(
rc: RoughCanvas,
@ -761,13 +769,18 @@ function generateDraw(element: ExcalidrawElement) {
const shape = withCustomMathRandom(element.seed, () => {
return generator.rectangle(0, 0, element.width, element.height, {
stroke: element.strokeColor,
fill: element.backgroundColor
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
});
});
element.draw = (rc, context, { scrollX, scrollY }) => {
context.globalAlpha = element.opacity / 100;
context.translate(element.x + scrollX, element.y + scrollY);
rc.draw(shape);
context.translate(-element.x - scrollX, -element.y - scrollY);
context.globalAlpha = 1;
};
} else if (element.type === "diamond") {
const shape = withCustomMathRandom(element.seed, () => {
@ -790,14 +803,19 @@ function generateDraw(element: ExcalidrawElement) {
],
{
stroke: element.strokeColor,
fill: element.backgroundColor
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}
);
});
element.draw = (rc, context, { scrollX, scrollY }) => {
context.globalAlpha = element.opacity / 100;
context.translate(element.x + scrollX, element.y + scrollY);
rc.draw(shape);
context.translate(-element.x - scrollX, -element.y - scrollY);
context.globalAlpha = 1;
};
} else if (element.type === "ellipse") {
const shape = withCustomMathRandom(element.seed, () =>
@ -806,33 +824,56 @@ function generateDraw(element: ExcalidrawElement) {
element.height / 2,
element.width,
element.height,
{ stroke: element.strokeColor, fill: element.backgroundColor }
{
stroke: element.strokeColor,
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}
)
);
element.draw = (rc, context, { scrollX, scrollY }) => {
context.globalAlpha = element.opacity / 100;
context.translate(element.x + scrollX, element.y + scrollY);
rc.draw(shape);
context.translate(-element.x - scrollX, -element.y - scrollY);
context.globalAlpha = 1;
};
} else if (element.type === "arrow") {
const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
const shapes = withCustomMathRandom(element.seed, () => [
// \
generator.line(x3, y3, x2, y2, { stroke: element.strokeColor }),
generator.line(x3, y3, x2, y2, {
stroke: element.strokeColor,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}),
// -----
generator.line(x1, y1, x2, y2, { stroke: element.strokeColor }),
generator.line(x1, y1, x2, y2, {
stroke: element.strokeColor,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}),
// /
generator.line(x4, y4, x2, y2, { stroke: element.strokeColor })
generator.line(x4, y4, x2, y2, {
stroke: element.strokeColor,
strokeWidth: element.strokeWidth,
roughness: element.roughness
})
]);
element.draw = (rc, context, { scrollX, scrollY }) => {
context.globalAlpha = element.opacity / 100;
context.translate(element.x + scrollX, element.y + scrollY);
shapes.forEach(shape => rc.draw(shape));
context.translate(-element.x - scrollX, -element.y - scrollY);
context.globalAlpha = 1;
};
return;
} else if (isTextElement(element)) {
element.draw = (rc, context, { scrollX, scrollY }) => {
context.globalAlpha = element.opacity / 100;
const font = context.font;
context.font = element.font;
const fillStyle = context.fillStyle;
@ -844,6 +885,7 @@ function generateDraw(element: ExcalidrawElement) {
);
context.fillStyle = fillStyle;
context.font = font;
context.globalAlpha = 1;
};
} else {
throw new Error("Unimplemented type " + element.type);
@ -1064,6 +1106,91 @@ function getSelectedIndices() {
const someElementIsSelected = () =>
elements.some(element => element.isSelected);
const someElementIsSelectedIsRectangleOrEllipseOrDiamond = () =>
elements.some(
element =>
element.isSelected &&
(element.type === "rectangle" ||
element.type === "ellipse" ||
element.type === "diamond")
);
const someElementIsSelectedIsRectangleOrEllipseOrDiamondOrArrow = () =>
elements.some(
element =>
element.isSelected &&
(element.type === "rectangle" ||
element.type === "ellipse" ||
element.type === "diamond" ||
element.type === "arrow")
);
function getSelectedFillStyles() {
const fillStyles = Array.from(
new Set(
elements
.filter(element => element.isSelected)
.map(element => element.fillStyle)
)
);
return fillStyles.length === 1 ? fillStyles[0] : "";
}
function getSelectedStrokeWidth() {
const strokeWidth = Array.from(
new Set(
elements
.filter(element => element.isSelected)
.map(element => `${element.strokeWidth}`)
)
);
return strokeWidth.length === 1 ? +strokeWidth[0] : "";
}
function getSelectedRoughness() {
const roughness = Array.from(
new Set(
elements
.filter(element => element.isSelected)
.map(element => `${element.roughness}`)
)
);
return roughness.length === 1 ? +roughness[0] : "";
}
function getSelectedOpacity() {
const opacity = Array.from(
new Set(
elements
.filter(element => element.isSelected)
.map(element => `${element.opacity}`)
)
);
return opacity.length === 1 ? +opacity[0] : "";
}
function getSelectedStrokeColor() {
const strokeColors = Array.from(
new Set(
elements
.filter(element => element.isSelected)
.map(element => element.strokeColor)
)
);
return strokeColors.length === 1 ? strokeColors[0] : null;
}
function getSelectedBackgroundColor() {
const backgroundColors = Array.from(
new Set(
elements
.filter(element => element.isSelected)
.map(element => element.backgroundColor)
)
);
return backgroundColors.length === 1 ? backgroundColors[0] : null;
}
const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
const ELEMENT_TRANSLATE_AMOUNT = 1;
@ -1228,6 +1355,43 @@ class App extends React.Component<{}, AppState> {
this.setState({ name });
}
private changeProperty = (callback: (element: ExcalidrawElement) => void) => {
elements.forEach(element => {
if (element.isSelected) {
callback(element);
generateDraw(element);
}
});
this.forceUpdate();
};
private changeFillStyle = (style: string) => {
this.changeProperty(element => (element.fillStyle = style));
};
private changeStrokeWidth = (event: React.ChangeEvent<HTMLSelectElement>) => {
this.changeProperty(element => (element.strokeWidth = +event.target.value));
};
private changeRoughness = (event: React.ChangeEvent<HTMLSelectElement>) => {
this.changeProperty(element => (element.roughness = +event.target.value));
};
private changeOpacity = (event: React.ChangeEvent<HTMLInputElement>) => {
this.changeProperty(element => (element.opacity = +event.target.value));
};
private changeStrokeColor = (color: string) => {
this.changeProperty(element => (element.strokeColor = color));
this.setState({ currentItemStrokeColor: color });
};
private changeBackgroundColor = (color: string) => {
this.changeProperty(element => (element.backgroundColor = color));
this.setState({ currentItemBackgroundColor: color });
};
public render() {
const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
@ -1353,12 +1517,69 @@ class App extends React.Component<{}, AppState> {
}
/>
</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>
<div>
<button
className="swatch"
style={{
backgroundColor: this.state.currentItemStrokeColor
backgroundColor:
getSelectedStrokeColor() ||
this.state.currentItemStrokeColor
}}
onClick={() =>
this.setState(s => ({
@ -1369,40 +1590,49 @@ class App extends React.Component<{}, AppState> {
}))
}
/>
{this.state.currentColorPicker === ColorPicker.SHAPE_STROKE ? (
{this.state.currentColorPicker ===
ColorPicker.SHAPE_STROKE && (
<div className="popover">
<div
className="cover"
onClick={() => this.setState({ currentColorPicker: null })}
onClick={() =>
this.setState({ currentColorPicker: null })
}
/>
<SketchPicker
color={this.state.currentItemStrokeColor}
onChange={color => {
this.setState({ currentItemStrokeColor: color.hex });
}}
onChange={color => this.changeStrokeColor(color.hex)}
/>
</div>
) : null}
)}
<input
type="text"
className="swatch-input"
value={this.state.currentItemStrokeColor}
onChange={e => {
this.setState({ currentItemStrokeColor: e.target.value });
}}
value={
getSelectedStrokeColor() ||
this.state.currentItemStrokeColor
}
onChange={e => this.changeStrokeColor(e.target.value)}
/>
</div>
</div>
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && (
<div className="panelColumn">
<h5>Shape Background Color</h5>
<div>
<button
className="swatch"
style={{
backgroundColor: this.state.currentItemBackgroundColor
backgroundColor:
getSelectedBackgroundColor() ||
this.state.currentItemBackgroundColor
}}
onClick={() =>
this.setState(s => ({
currentColorPicker:
s.currentColorPicker === ColorPicker.SHAPE_BACKGROUND
s.currentColorPicker ===
ColorPicker.SHAPE_BACKGROUND
? null
: ColorPicker.SHAPE_BACKGROUND
}))
@ -1413,75 +1643,155 @@ class App extends React.Component<{}, AppState> {
<div className="popover">
<div
className="cover"
onClick={() => this.setState({ currentColorPicker: null })}
onClick={() =>
this.setState({ currentColorPicker: null })
}
/>
<SketchPicker
color={this.state.currentItemBackgroundColor}
onChange={color => {
this.setState({ currentItemBackgroundColor: color.hex });
}}
onChange={color =>
this.changeBackgroundColor(color.hex)
}
/>
</div>
) : null}
<input
type="text"
className="swatch-input"
value={this.state.currentItemStrokeColor}
onChange={e => {
this.setState({ currentItemStrokeColor: e.target.value });
}}
value={
getSelectedBackgroundColor() ||
this.state.currentItemBackgroundColor
}
onChange={e =>
this.changeBackgroundColor(e.target.value)
}
/>
</div>
</div>
)}
</>
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && (
<>
<h4>Fill</h4>
<div className="panelColumn">
{/* <select onChange={this.changeFillStyle} value={getSelectedFillStyles()}> */}
<button
onClick={this.clearCanvas}
title="Clear the canvas & reset background color"
onClick={() => this.changeFillStyle("hachure")}
className={
getSelectedFillStyles() === "hachure" ? "active" : ""
}
>
Clear canvas
Hachure
</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);
}}
onClick={() => this.changeFillStyle("solid")}
className={
getSelectedFillStyles() === "solid" ? "active" : ""
}
>
Export to png
Solid
</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);
}}
onClick={() => this.changeFillStyle("zigzag")}
className={
getSelectedFillStyles() === "zigzag" ? "active" : ""
}
>
Save as...
Zigzag
</button>
<button
onClick={() => {
loadFromJSON().then(() => this.forceUpdate());
}}
onClick={() => this.changeFillStyle("cross-hatch")}
className={
getSelectedFillStyles() === "cross-hatch"
? "active"
: ""
}
>
Load file...
Cross-hatch
</button>
<button
onClick={() => this.changeFillStyle("dots")}
className={
getSelectedFillStyles() === "dots" ? "active" : ""
}
>
Dots
</button>
<button
onClick={() => this.changeFillStyle("sunburst")}
className={
getSelectedFillStyles() === "sunburst" ? "active" : ""
}
>
Sunburst
</button>
<button
onClick={() => this.changeFillStyle("dashed")}
className={
getSelectedFillStyles() === "dashed" ? "active" : ""
}
>
Dashed
</button>
<button
onClick={() => this.changeFillStyle("zigzag-line")}
className={
getSelectedFillStyles() === "zigzag-line"
? "active"
: ""
}
>
Zigzag-line
</button>
{/* </select> */}
</div>
</>
)}
{someElementIsSelectedIsRectangleOrEllipseOrDiamondOrArrow() && (
<>
<h4>Stroke width</h4>
<div className="panelColumn">
<select
onChange={this.changeStrokeWidth}
value={getSelectedStrokeWidth()}
>
<option hidden disabled value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
</div>
<h4>Roughness</h4>
<div className="panelColumn">
<select
onChange={this.changeRoughness}
value={getSelectedRoughness()}
>
<option hidden disabled value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
<option value="10">10</option>
</select>
</div>
</>
)}
<h4>Opacity</h4>
<input
type="range"
min="0"
max="100"
onChange={this.changeOpacity}
value={getSelectedOpacity()}
/>
</>
)}
</div>
<canvas
id="canvas"
@ -1556,7 +1866,11 @@ class App extends React.Component<{}, AppState> {
x,
y,
this.state.currentItemStrokeColor,
this.state.currentItemBackgroundColor
this.state.currentItemBackgroundColor,
"hachure",
1,
1,
100
);
let resizeHandle: string | false = false;
let isDraggingElements = false;

6
src/styles.scss
Unescape Escape View File

@ -110,6 +110,10 @@ input[type="color"] {
margin: 2px;
}
input[type="range"] {
width: 230px;
}
input {
margin-right: 5px;
@ -136,7 +140,7 @@ button {
border-color: #d6d4d4;
}
&:active {
&:active, &.active {
background-color: #bdbebc;
border-color: #bdbebc;
}

Write Preview
Loading…
Cancel
Save