|
|
@ -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"
|
|
|
|