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

Random fixes (#57)

Browse Source
pull/58/head
Christopher Chedeau 5 years ago committed by GitHub
parent 10e317e359
commit 4c94976527
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 126 additions and 128 deletions
Show Stats Download Patch File Download Diff File

230
src/index.tsx
Unescape Escape View File

@ -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,9 +674,114 @@ 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>
</>
);
}
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);
if (element.isSelected) {
const margin = 4;
const elementX1 = getElementAbsoluteX1(element);
const elementX2 = getElementAbsoluteX2(element);
const elementY1 = getElementAbsoluteY1(element);
const elementY2 = getElementAbsoluteY2(element);
const lineDash = context.getLineDash();
context.setLineDash([8, 4]);
context.strokeRect(
elementX1 - margin,
elementY1 - margin,
elementX2 - elementX1 + margin * 2,
elementY2 - elementY1 + margin * 2
);
context.setLineDash(lineDash);
}
});
}
}
const rootElement = document.getElementById("root");
@ -763,29 +796,6 @@ context.translate(0.5, 0.5);
function drawScene() {
ReactDOM.render(<App />, rootElement);
context.clearRect(-0.5, -0.5, canvas.width, canvas.height);
elements.forEach(element => {
element.draw(rc, context);
if (element.isSelected) {
const margin = 4;
const elementX1 = getElementAbsoluteX1(element);
const elementX2 = getElementAbsoluteX2(element);
const elementY1 = getElementAbsoluteY1(element);
const elementY2 = getElementAbsoluteY2(element);
const lineDash = context.getLineDash();
context.setLineDash([8, 4]);
context.strokeRect(
elementX1 - margin,
elementY1 - margin,
elementX2 - elementX1 + margin * 2,
elementY2 - elementY1 + margin * 2
);
context.setLineDash(lineDash);
}
});
}
drawScene();

24
src/styles.css
Unescape Escape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save