mirror of
https://github.com/excalidraw/excalidraw.git
synced 2024-11-02 03:25:53 +01:00
Random fixes (#57)
This commit is contained in:
Christopher Chedeau
GitHub
parent
10e317e359
commit
4c94976527
216
src/index.tsx
216
src/index.tsx
@ -279,11 +279,11 @@ function generateDraw(
|
||||
const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
|
||||
const shapes = [
|
||||
// \
|
||||
generator.line(x3, y3, x2, y2),
|
||||
generator.line(x3, y3, x2, y2, { stroke: itemStrokeColor }),
|
||||
// -----
|
||||
generator.line(x1, y1, x2, y2),
|
||||
generator.line(x1, y1, x2, y2, { stroke: itemStrokeColor }),
|
||||
// /
|
||||
generator.line(x4, y4, x2, y2)
|
||||
generator.line(x4, y4, x2, y2, { stroke: itemStrokeColor })
|
||||
];
|
||||
|
||||
element.draw = (rc, context) => {
|
||||
@ -384,9 +384,9 @@ class App extends React.Component<{}, AppState> {
|
||||
exportBackground: false,
|
||||
exportVisibleOnly: true,
|
||||
exportPadding: 10,
|
||||
itemStrokeColor: "#000",
|
||||
itemBackgroundColor: "#FFF",
|
||||
viewBgColor: "#FFF"
|
||||
itemStrokeColor: "#000000",
|
||||
itemBackgroundColor: "#ffffff",
|
||||
viewBgColor: "#ffffff"
|
||||
};
|
||||
|
||||
private onKeyDown = (event: KeyboardEvent) => {
|
||||
@ -454,82 +454,15 @@ class App extends React.Component<{}, AppState> {
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div className="exportWrapper">
|
||||
<button
|
||||
onClick={() => {
|
||||
exportAsPNG({
|
||||
exportBackground: this.state.exportBackground,
|
||||
exportVisibleOnly: this.state.exportVisibleOnly,
|
||||
exportPadding: this.state.exportPadding,
|
||||
viewBgColor: this.state.viewBgColor
|
||||
});
|
||||
}}
|
||||
>
|
||||
Export to png
|
||||
</button>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportBackground}
|
||||
onChange={e => {
|
||||
this.setState({ exportBackground: e.target.checked });
|
||||
}}
|
||||
/>{" "}
|
||||
background
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="color"
|
||||
value={this.state.viewBgColor}
|
||||
onChange={e => {
|
||||
this.setState({ viewBgColor: e.target.value });
|
||||
}}
|
||||
/>{" "}
|
||||
view background color
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="color"
|
||||
value={this.state.itemStrokeColor}
|
||||
onChange={e => {
|
||||
this.setState({ itemStrokeColor: e.target.value });
|
||||
}}
|
||||
/>{" "}
|
||||
item stroke color
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="color"
|
||||
value={this.state.itemBackgroundColor}
|
||||
onChange={e => {
|
||||
this.setState({ itemBackgroundColor: e.target.value });
|
||||
}}
|
||||
/>{" "}
|
||||
item background color
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportVisibleOnly}
|
||||
onChange={e => {
|
||||
this.setState({ exportVisibleOnly: e.target.checked });
|
||||
}}
|
||||
/>
|
||||
visible area only
|
||||
</label>
|
||||
(padding:
|
||||
<input
|
||||
type="number"
|
||||
value={this.state.exportPadding}
|
||||
onChange={e => {
|
||||
this.setState({ exportPadding: Number(e.target.value) });
|
||||
}}
|
||||
disabled={!this.state.exportVisibleOnly}
|
||||
/>
|
||||
px)
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Shapes</legend>
|
||||
{this.renderOption({ type: "rectangle", children: "Rectangle" })}
|
||||
{this.renderOption({ type: "ellipse", children: "Ellipse" })}
|
||||
{this.renderOption({ type: "arrow", children: "Arrow" })}
|
||||
{this.renderOption({ type: "text", children: "Text" })}
|
||||
{this.renderOption({ type: "selection", children: "Selection" })}
|
||||
</fieldset>
|
||||
<div
|
||||
style={{ backgroundColor: this.state.viewBgColor }}
|
||||
onCut={e => {
|
||||
e.clipboardData.setData(
|
||||
"text/plain",
|
||||
@ -573,15 +506,10 @@ class App extends React.Component<{}, AppState> {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{this.renderOption({ type: "rectangle", children: "Rectangle" })}
|
||||
{this.renderOption({ type: "ellipse", children: "Ellipse" })}
|
||||
{this.renderOption({ type: "arrow", children: "Arrow" })}
|
||||
{this.renderOption({ type: "text", children: "Text" })}
|
||||
{this.renderOption({ type: "selection", children: "Selection" })}
|
||||
<canvas
|
||||
id="canvas"
|
||||
width={window.innerWidth}
|
||||
height={window.innerHeight}
|
||||
height={window.innerHeight - 200}
|
||||
onMouseDown={e => {
|
||||
const x = e.clientX - (e.target as HTMLElement).offsetLeft;
|
||||
const y = e.clientY - (e.target as HTMLElement).offsetTop;
|
||||
@ -746,25 +674,92 @@ class App extends React.Component<{}, AppState> {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Colors</legend>
|
||||
<label>
|
||||
<input
|
||||
type="color"
|
||||
value={this.state.viewBgColor}
|
||||
onChange={e => {
|
||||
this.setState({ viewBgColor: e.target.value });
|
||||
}}
|
||||
/>
|
||||
Background
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="color"
|
||||
value={this.state.itemStrokeColor}
|
||||
onChange={e => {
|
||||
this.setState({ itemStrokeColor: e.target.value });
|
||||
}}
|
||||
/>
|
||||
Shape Stroke
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="color"
|
||||
value={this.state.itemBackgroundColor}
|
||||
onChange={e => {
|
||||
this.setState({ itemBackgroundColor: e.target.value });
|
||||
}}
|
||||
/>
|
||||
Shape Background
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Export</legend>
|
||||
<button
|
||||
onClick={() => {
|
||||
exportAsPNG({
|
||||
exportBackground: this.state.exportBackground,
|
||||
exportVisibleOnly: this.state.exportVisibleOnly,
|
||||
exportPadding: this.state.exportPadding,
|
||||
viewBgColor: this.state.viewBgColor
|
||||
});
|
||||
}}
|
||||
>
|
||||
Export to png
|
||||
</button>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportBackground}
|
||||
onChange={e => {
|
||||
this.setState({ exportBackground: e.target.checked });
|
||||
}}
|
||||
/>
|
||||
background
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportVisibleOnly}
|
||||
onChange={e => {
|
||||
this.setState({ exportVisibleOnly: e.target.checked });
|
||||
}}
|
||||
/>
|
||||
visible area only
|
||||
</label>
|
||||
(padding:
|
||||
<input
|
||||
type="number"
|
||||
value={this.state.exportPadding}
|
||||
onChange={e => {
|
||||
this.setState({ exportPadding: Number(e.target.value) });
|
||||
}}
|
||||
disabled={!this.state.exportVisibleOnly}
|
||||
/>
|
||||
px)
|
||||
</fieldset>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
|
||||
const rc = rough.canvas(canvas);
|
||||
const context = canvas.getContext("2d")!;
|
||||
|
||||
// Big hack to ensure that all the 1px lines are drawn at 1px instead of 2px
|
||||
// https://stackoverflow.com/questions/13879322/drawing-a-1px-thick-line-in-canvas-creates-a-2px-thick-line/13879402#comment90766599_13879402
|
||||
context.translate(0.5, 0.5);
|
||||
|
||||
function drawScene() {
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
|
||||
context.clearRect(-0.5, -0.5, canvas.width, canvas.height);
|
||||
componentDidUpdate() {
|
||||
const fillStyle = context.fillStyle;
|
||||
context.fillStyle = this.state.viewBgColor;
|
||||
context.fillRect(-0.5, -0.5, canvas.width, canvas.height);
|
||||
context.fillStyle = fillStyle;
|
||||
|
||||
elements.forEach(element => {
|
||||
element.draw(rc, context);
|
||||
@ -786,6 +781,21 @@ function drawScene() {
|
||||
context.setLineDash(lineDash);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
|
||||
const rc = rough.canvas(canvas);
|
||||
const context = canvas.getContext("2d")!;
|
||||
|
||||
// Big hack to ensure that all the 1px lines are drawn at 1px instead of 2px
|
||||
// https://stackoverflow.com/questions/13879322/drawing-a-1px-thick-line-in-canvas-creates-a-2px-thick-line/13879402#comment90766599_13879402
|
||||
context.translate(0.5, 0.5);
|
||||
|
||||
function drawScene() {
|
||||
ReactDOM.render(<App />, rootElement);
|
||||
}
|
||||
|
||||
drawScene();
|
||||
|
||||
@ -3,24 +3,12 @@
|
||||
font-family: "Virgil";
|
||||
src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
|
||||
}
|
||||
|
||||
.exportWrapper {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.exportWrapper label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.exportWrapper button {
|
||||
label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.exportWrapper input[type="number"] {
|
||||
width: 40px;
|
||||
padding: 2px;
|
||||
margin-left: 10px;
|
||||
input[type="number"] {
|
||||
width: 30px;
|
||||
}
|
||||
input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user