Wire up forward (#101)

* Wire up forward

* Match words with Keynote/Powerpoint
This commit is contained in:
Christopher Chedeau 2020-01-03 21:46:49 -08:00 committed by GitHub
parent 6b8d2970ac
commit 4886065443
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -11,7 +11,7 @@ import {
faFont
} from "@fortawesome/free-solid-svg-icons";
import { moveOneLeft, moveAllLeft } from "./zindex";
import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
import "./styles.css";
@ -726,7 +726,7 @@ class App extends React.Component<{}, AppState> {
this.forceUpdate();
event.preventDefault();
// Send backwards: Cmd-Shift-Alt-B
// Send backward: Cmd-Shift-Alt-B
} else if (
event.metaKey &&
event.shiftKey &&
@ -741,6 +741,21 @@ class App extends React.Component<{}, AppState> {
this.moveAllLeft();
event.preventDefault();
// Bring forward: Cmd-Shift-Alt-F
} else if (
event.metaKey &&
event.shiftKey &&
event.altKey &&
event.code === "KeyF"
) {
this.moveOneRight();
event.preventDefault();
// Bring to front: Cmd-Shift-F
} else if (event.metaKey && event.shiftKey && event.code === "KeyF") {
this.moveAllRight();
event.preventDefault();
// Select all: Cmd-A
} else if (event.metaKey && event.code === "KeyA") {
elements.forEach(element => {
@ -768,6 +783,16 @@ class App extends React.Component<{}, AppState> {
this.forceUpdate();
};
private moveAllRight = () => {
moveAllRight(elements, getSelectedIndices());
this.forceUpdate();
};
private moveOneRight = () => {
moveOneRight(elements, getSelectedIndices());
this.forceUpdate();
};
public render() {
return (
<div
@ -917,8 +942,9 @@ class App extends React.Component<{}, AppState> {
<h4>Shape options</h4>
<div className="panelColumn">
<button onClick={this.deleteSelectedElements}>Delete</button>
<button>Move to front</button>
<button onClick={this.moveOneLeft}>Send backwards</button>
<button onClick={this.moveOneRight}>Bring forward</button>
<button onClick={this.moveAllRight}>Bring to front</button>
<button onClick={this.moveOneLeft}>Send backward</button>
<button onClick={this.moveAllLeft}>Send to back</button>
</div>
</>