Change styles (#179)
* Fill style * Roughness, opacity and more styles * Remove duplicated options * Support diamonds * Remove unused import * Fix typo and remove react import
This commit is contained in:
Paulo Menezes
Jared Palmer
parent
4be88c9c58
commit
f360c3cb33
486
src/index.tsx
486
src/index.tsx
@ -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,85 +1517,6 @@ class App extends React.Component<{}, AppState> {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<h5>Shape Stroke Color</h5>
|
||||
<div>
|
||||
<button
|
||||
className="swatch"
|
||||
style={{
|
||||
backgroundColor: this.state.currentItemStrokeColor
|
||||
}}
|
||||
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.setState({ currentItemStrokeColor: color.hex });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<input
|
||||
type="text"
|
||||
className="swatch-input"
|
||||
value={this.state.currentItemStrokeColor}
|
||||
onChange={e => {
|
||||
this.setState({ currentItemStrokeColor: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h5>Shape Background Color</h5>
|
||||
<div>
|
||||
<button
|
||||
className="swatch"
|
||||
style={{
|
||||
backgroundColor: 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.setState({ currentItemBackgroundColor: color.hex });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<input
|
||||
type="text"
|
||||
className="swatch-input"
|
||||
value={this.state.currentItemStrokeColor}
|
||||
onChange={e => {
|
||||
this.setState({ currentItemStrokeColor: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={this.clearCanvas}
|
||||
title="Clear the canvas & reset background color"
|
||||
@ -1482,6 +1567,231 @@ class App extends React.Component<{}, AppState> {
|
||||
Load file...
|
||||
</button>
|
||||
</div>
|
||||
{someElementIsSelected() && (
|
||||
<>
|
||||
<>
|
||||
<h4>Colors</h4>
|
||||
<div className="panelColumn">
|
||||
<h5>Shape Stroke Color</h5>
|
||||
<div>
|
||||
<button
|
||||
className="swatch"
|
||||
style={{
|
||||
backgroundColor:
|
||||
getSelectedStrokeColor() ||
|
||||
this.state.currentItemStrokeColor
|
||||
}}
|
||||
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>
|
||||
|
||||
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && (
|
||||
<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>
|
||||
<div className="panelColumn">
|
||||
{/* <select onChange={this.changeFillStyle} value={getSelectedFillStyles()}> */}
|
||||
<button
|
||||
onClick={() => this.changeFillStyle("hachure")}
|
||||
className={
|
||||
getSelectedFillStyles() === "hachure" ? "active" : ""
|
||||
}
|
||||
>
|
||||
Hachure
|
||||
</button>
|
||||
<button
|
||||
onClick={() => this.changeFillStyle("solid")}
|
||||
className={
|
||||
getSelectedFillStyles() === "solid" ? "active" : ""
|
||||
}
|
||||
>
|
||||
Solid
|
||||
</button>
|
||||
<button
|
||||
onClick={() => this.changeFillStyle("zigzag")}
|
||||
className={
|
||||
getSelectedFillStyles() === "zigzag" ? "active" : ""
|
||||
}
|
||||
>
|
||||
Zigzag
|
||||
</button>
|
||||
<button
|
||||
onClick={() => this.changeFillStyle("cross-hatch")}
|
||||
className={
|
||||
getSelectedFillStyles() === "cross-hatch"
|
||||
? "active"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user