sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add styles copy and pasting in the context menu (#227)

Browse Source
This commit is contained in:
Faustino Kialungila 2020-01-07 08:04:15 +01:00 committed by Christopher Chedeau
parent f2665408fc
commit 2fb5c4cd13
1 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/index.tsx
View File

@ -62,7 +62,7 @@ const META_KEY = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform)
? "metaKey"
: "ctrlKey";
let COPIED_STYLES: string = "{}";
let copiedStyles: string = "{}";
function isArrowKey(keyCode: string) {
return (
@ -222,26 +222,10 @@ class App extends React.Component<{}, AppState> {
event.preventDefault();
// Copy Styles: Cmd-Shift-C
} else if (event.metaKey && event.shiftKey && event.code === "KeyC") {
const element = elements.find(el => el.isSelected);
if (element) {
COPIED_STYLES = JSON.stringify(element);
}
this.copyStyles();
// Paste Styles: Cmd-Shift-V
} else if (event.metaKey && event.shiftKey && event.code === "KeyV") {
const pastedElement = JSON.parse(COPIED_STYLES);
if (pastedElement.type) {
elements.forEach(element => {
if (element.isSelected) {
element.backgroundColor = pastedElement?.backgroundColor;
element.strokeWidth = pastedElement?.strokeWidth;
element.strokeColor = pastedElement?.strokeColor;
element.fillStyle = pastedElement?.fillStyle;
element.opacity = pastedElement?.opacity;
generateDraw(element);
}
});
}
this.forceUpdate();
this.pasteStyles();
event.preventDefault();
}
};
@ -263,6 +247,29 @@ class App extends React.Component<{}, AppState> {
}
};
private copyStyles = () => {
const element = elements.find(el => el.isSelected);
if (element) {
copiedStyles = JSON.stringify(element);
}
};
private pasteStyles = () => {
const pastedElement = JSON.parse(copiedStyles);
elements.forEach(element => {
if (element.isSelected) {
element.backgroundColor = pastedElement?.backgroundColor;
element.strokeWidth = pastedElement?.strokeWidth;
element.strokeColor = pastedElement?.strokeColor;
element.fillStyle = pastedElement?.fillStyle;
element.opacity = pastedElement?.opacity;
element.roughness = pastedElement?.roughness;
generateDraw(element);
}
});
this.forceUpdate();
};
private moveAllLeft = () => {
moveAllLeft(elements, getSelectedIndices(elements));
this.forceUpdate();
@ -621,6 +628,8 @@ class App extends React.Component<{}, AppState> {
label: "Paste",
action: () => this.pasteFromClipboard(x, y)
},
{ label: "Copy Styles", action: this.copyStyles },
{ label: "Paste Styles", action: this.pasteStyles },
{ label: "Delete", action: this.deleteSelectedElements },
{ label: "Move Forward", action: this.moveOneRight },
{ label: "Send to Front", action: this.moveAllRight },