86a1c29eec
- Also, extract utilities into utils module -- capitalizeString, getDateTime, isInputLike
1111 lines
35 KiB
TypeScript
1111 lines
35 KiB
TypeScript
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
import rough from "roughjs/bin/wrappers/rough";
|
|
import { TwitterPicker } from "react-color";
|
|
|
|
import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
|
|
import { randomSeed } from "./random";
|
|
import { newElement, resizeTest, generateDraw, isTextElement } from "./element";
|
|
import {
|
|
renderScene,
|
|
clearSelection,
|
|
getSelectedIndices,
|
|
deleteSelectedElements,
|
|
setSelection,
|
|
isOverScrollBars,
|
|
someElementIsSelected,
|
|
getSelectedAttribute,
|
|
loadFromJSON,
|
|
saveAsJSON,
|
|
exportAsPNG,
|
|
restoreFromLocalStorage,
|
|
saveToLocalStorage,
|
|
hasBackground,
|
|
hasStroke,
|
|
getElementAtPosition,
|
|
createScene
|
|
} from "./scene";
|
|
import { AppState } from "./types";
|
|
import { ExcalidrawElement, ExcalidrawTextElement } from "./element/types";
|
|
|
|
import { getDateTime, capitalizeString, isInputLike } from "./utils";
|
|
|
|
import EditableText from "./components/EditableText";
|
|
|
|
import "./styles.scss";
|
|
|
|
const { elements } = createScene();
|
|
|
|
const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
|
|
|
|
let skipHistory = false;
|
|
const stateHistory: string[] = [];
|
|
const redoStack: string[] = [];
|
|
|
|
function generateHistoryCurrentEntry() {
|
|
return JSON.stringify(
|
|
elements.map(element => ({ ...element, isSelected: false }))
|
|
);
|
|
}
|
|
function pushHistoryEntry(newEntry: string) {
|
|
if (
|
|
stateHistory.length > 0 &&
|
|
stateHistory[stateHistory.length - 1] === newEntry
|
|
) {
|
|
// If the last entry is the same as this one, ignore it
|
|
return;
|
|
}
|
|
stateHistory.push(newEntry);
|
|
}
|
|
function restoreHistoryEntry(entry: string) {
|
|
const newElements = JSON.parse(entry);
|
|
elements.splice(0, elements.length);
|
|
newElements.forEach((newElement: ExcalidrawElement) => {
|
|
generateDraw(newElement);
|
|
elements.push(newElement);
|
|
});
|
|
// When restoring, we shouldn't add an history entry otherwise we'll be stuck with it and can't go back
|
|
skipHistory = true;
|
|
}
|
|
|
|
const CANVAS_WINDOW_OFFSET_LEFT = 250;
|
|
const CANVAS_WINDOW_OFFSET_TOP = 0;
|
|
|
|
const KEYS = {
|
|
ARROW_LEFT: "ArrowLeft",
|
|
ARROW_RIGHT: "ArrowRight",
|
|
ARROW_DOWN: "ArrowDown",
|
|
ARROW_UP: "ArrowUp",
|
|
ESCAPE: "Escape",
|
|
DELETE: "Delete",
|
|
BACKSPACE: "Backspace"
|
|
};
|
|
|
|
// We inline font-awesome icons in order to save on js size rather than including the font awesome react library
|
|
const SHAPES = [
|
|
{
|
|
icon: (
|
|
// fa-mouse-pointer
|
|
<svg viewBox="0 0 320 512">
|
|
<path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z" />
|
|
</svg>
|
|
),
|
|
value: "selection"
|
|
},
|
|
{
|
|
icon: (
|
|
// fa-square
|
|
<svg viewBox="0 0 448 512">
|
|
<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" />
|
|
</svg>
|
|
),
|
|
value: "rectangle"
|
|
},
|
|
{
|
|
icon: (
|
|
// custom
|
|
<svg viewBox="0 0 223.646 223.646">
|
|
<path d="M111.823 0L16.622 111.823 111.823 223.646 207.025 111.823z" />
|
|
</svg>
|
|
),
|
|
value: "diamond"
|
|
},
|
|
{
|
|
icon: (
|
|
// fa-circle
|
|
<svg viewBox="0 0 512 512">
|
|
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
|
|
</svg>
|
|
),
|
|
value: "ellipse"
|
|
},
|
|
{
|
|
icon: (
|
|
// fa-long-arrow-alt-right
|
|
<svg viewBox="0 0 448 512">
|
|
<path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z" />
|
|
</svg>
|
|
),
|
|
value: "arrow"
|
|
},
|
|
{
|
|
icon: (
|
|
// fa-font
|
|
<svg viewBox="0 0 448 512">
|
|
<path d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z" />
|
|
</svg>
|
|
),
|
|
value: "text"
|
|
}
|
|
];
|
|
|
|
const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]);
|
|
|
|
function findElementByKey(key: string) {
|
|
const defaultElement = "selection";
|
|
return SHAPES.reduce((element, shape) => {
|
|
if (shape.value[0] !== key) return element;
|
|
|
|
return shape.value;
|
|
}, defaultElement);
|
|
}
|
|
|
|
function isArrowKey(keyCode: string) {
|
|
return (
|
|
keyCode === KEYS.ARROW_LEFT ||
|
|
keyCode === KEYS.ARROW_RIGHT ||
|
|
keyCode === KEYS.ARROW_DOWN ||
|
|
keyCode === KEYS.ARROW_UP
|
|
);
|
|
}
|
|
|
|
function resetCursor() {
|
|
document.documentElement.style.cursor = "";
|
|
}
|
|
|
|
function addTextElement(element: ExcalidrawTextElement) {
|
|
resetCursor();
|
|
const text = prompt("What text do you want?");
|
|
if (text === null || text === "") {
|
|
return false;
|
|
}
|
|
const fontSize = 20;
|
|
element.text = text;
|
|
element.font = `${fontSize}px Virgil`;
|
|
const font = context.font;
|
|
context.font = element.font;
|
|
const textMeasure = context.measureText(element.text);
|
|
const width = textMeasure.width;
|
|
const actualBoundingBoxAscent =
|
|
textMeasure.actualBoundingBoxAscent || fontSize;
|
|
const actualBoundingBoxDescent = textMeasure.actualBoundingBoxDescent || 0;
|
|
element.actualBoundingBoxAscent = actualBoundingBoxAscent;
|
|
context.font = font;
|
|
const height = actualBoundingBoxAscent + actualBoundingBoxDescent;
|
|
// Center the text
|
|
element.x -= width / 2;
|
|
element.y -= actualBoundingBoxAscent;
|
|
element.width = width;
|
|
element.height = height;
|
|
|
|
return true;
|
|
}
|
|
|
|
function ButtonSelect<T>({
|
|
options,
|
|
value,
|
|
onChange
|
|
}: {
|
|
options: { value: T; text: string }[];
|
|
value: T | null;
|
|
onChange: (value: T) => void;
|
|
}) {
|
|
return (
|
|
<div className="buttonList">
|
|
{options.map(option => (
|
|
<button
|
|
key={option.text}
|
|
onClick={() => onChange(option.value)}
|
|
className={value === option.value ? "active" : ""}
|
|
>
|
|
{option.text}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ColorPicker({
|
|
color,
|
|
onChange
|
|
}: {
|
|
color: string | null;
|
|
onChange: (color: string) => void;
|
|
}) {
|
|
const [isActive, setActive] = React.useState(false);
|
|
return (
|
|
<div>
|
|
<button
|
|
className="swatch"
|
|
style={color ? { backgroundColor: color } : undefined}
|
|
onClick={() => setActive(!isActive)}
|
|
/>
|
|
{isActive ? (
|
|
<div className="popover">
|
|
<div className="cover" onClick={() => setActive(false)} />
|
|
<TwitterPicker
|
|
colors={[
|
|
"#000000",
|
|
"#ABB8C3",
|
|
"#FFFFFF",
|
|
"#FF6900",
|
|
"#FCB900",
|
|
"#00D084",
|
|
"#8ED1FC",
|
|
"#0693E3",
|
|
"#EB144C",
|
|
"#F78DA7",
|
|
"#9900EF"
|
|
]}
|
|
width="205px"
|
|
color={color || undefined}
|
|
onChange={changedColor => {
|
|
onChange(changedColor.hex);
|
|
}}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<input
|
|
type="text"
|
|
className="swatch-input"
|
|
value={color || ""}
|
|
onChange={e => onChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
|
|
const ELEMENT_TRANSLATE_AMOUNT = 1;
|
|
|
|
let lastCanvasWidth = -1;
|
|
let lastCanvasHeight = -1;
|
|
|
|
let lastMouseUp: ((e: any) => void) | null = null;
|
|
|
|
class App extends React.Component<{}, AppState> {
|
|
public componentDidMount() {
|
|
document.addEventListener("keydown", this.onKeyDown, false);
|
|
window.addEventListener("resize", this.onResize, false);
|
|
|
|
const savedState = restoreFromLocalStorage(elements);
|
|
if (savedState) {
|
|
this.setState(savedState);
|
|
}
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
document.removeEventListener("keydown", this.onKeyDown, false);
|
|
window.removeEventListener("resize", this.onResize, false);
|
|
}
|
|
|
|
public state: AppState = {
|
|
draggingElement: null,
|
|
resizingElement: null,
|
|
elementType: "selection",
|
|
exportBackground: true,
|
|
currentItemStrokeColor: "#000000",
|
|
currentItemBackgroundColor: "#ffffff",
|
|
viewBackgroundColor: "#ffffff",
|
|
scrollX: 0,
|
|
scrollY: 0,
|
|
name: DEFAULT_PROJECT_NAME
|
|
};
|
|
|
|
private onResize = () => {
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private onKeyDown = (event: KeyboardEvent) => {
|
|
if (isInputLike(event.target)) return;
|
|
|
|
if (event.key === KEYS.ESCAPE) {
|
|
clearSelection(elements);
|
|
this.forceUpdate();
|
|
event.preventDefault();
|
|
} else if (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) {
|
|
deleteSelectedElements(elements);
|
|
this.forceUpdate();
|
|
event.preventDefault();
|
|
} else if (isArrowKey(event.key)) {
|
|
const step = event.shiftKey
|
|
? ELEMENT_SHIFT_TRANSLATE_AMOUNT
|
|
: ELEMENT_TRANSLATE_AMOUNT;
|
|
elements.forEach(element => {
|
|
if (element.isSelected) {
|
|
if (event.key === KEYS.ARROW_LEFT) element.x -= step;
|
|
else if (event.key === KEYS.ARROW_RIGHT) element.x += step;
|
|
else if (event.key === KEYS.ARROW_UP) element.y -= step;
|
|
else if (event.key === KEYS.ARROW_DOWN) element.y += step;
|
|
}
|
|
});
|
|
this.forceUpdate();
|
|
event.preventDefault();
|
|
|
|
// Send backward: Cmd-Shift-Alt-B
|
|
} else if (
|
|
event.metaKey &&
|
|
event.shiftKey &&
|
|
event.altKey &&
|
|
event.code === "KeyB"
|
|
) {
|
|
this.moveOneLeft();
|
|
event.preventDefault();
|
|
|
|
// Send to back: Cmd-Shift-B
|
|
} else if (event.metaKey && event.shiftKey && event.code === "KeyB") {
|
|
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 => {
|
|
element.isSelected = true;
|
|
});
|
|
this.forceUpdate();
|
|
event.preventDefault();
|
|
} else if (shapesShortcutKeys.includes(event.key.toLowerCase())) {
|
|
this.setState({ elementType: findElementByKey(event.key) });
|
|
} else if (event.metaKey && event.code === "KeyZ") {
|
|
const currentEntry = generateHistoryCurrentEntry();
|
|
if (event.shiftKey) {
|
|
// Redo action
|
|
const entryToRestore = redoStack.pop();
|
|
if (entryToRestore !== undefined) {
|
|
restoreHistoryEntry(entryToRestore);
|
|
stateHistory.push(currentEntry);
|
|
}
|
|
} else {
|
|
// undo action
|
|
let lastEntry = stateHistory.pop();
|
|
// If nothing was changed since last, take the previous one
|
|
if (currentEntry === lastEntry) {
|
|
lastEntry = stateHistory.pop();
|
|
}
|
|
if (lastEntry !== undefined) {
|
|
restoreHistoryEntry(lastEntry);
|
|
redoStack.push(currentEntry);
|
|
}
|
|
}
|
|
this.forceUpdate();
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
|
|
private deleteSelectedElements = () => {
|
|
deleteSelectedElements(elements);
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private clearCanvas = () => {
|
|
if (window.confirm("This will clear the whole canvas. Are you sure?")) {
|
|
elements.splice(0, elements.length);
|
|
this.setState({
|
|
viewBackgroundColor: "#ffffff",
|
|
scrollX: 0,
|
|
scrollY: 0
|
|
});
|
|
this.forceUpdate();
|
|
}
|
|
};
|
|
|
|
private moveAllLeft = () => {
|
|
moveAllLeft(elements, getSelectedIndices(elements));
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private moveOneLeft = () => {
|
|
moveOneLeft(elements, getSelectedIndices(elements));
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private moveAllRight = () => {
|
|
moveAllRight(elements, getSelectedIndices(elements));
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private moveOneRight = () => {
|
|
moveOneRight(elements, getSelectedIndices(elements));
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private removeWheelEventListener: (() => void) | undefined;
|
|
|
|
private updateProjectName(name: string): void {
|
|
this.setState({ name });
|
|
}
|
|
|
|
private changeProperty = (callback: (element: ExcalidrawElement) => void) => {
|
|
elements.forEach(element => {
|
|
if (element.isSelected) {
|
|
callback(element);
|
|
generateDraw(element);
|
|
}
|
|
});
|
|
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private changeOpacity = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
this.changeProperty(element => (element.opacity = +event.target.value));
|
|
};
|
|
|
|
private changeStrokeColor = (color: string) => {
|
|
this.changeProperty(element => (element.strokeColor = color));
|
|
this.setState({ currentItemStrokeColor: color });
|
|
};
|
|
|
|
private changeBackgroundColor = (color: string) => {
|
|
this.changeProperty(element => (element.backgroundColor = color));
|
|
this.setState({ currentItemBackgroundColor: color });
|
|
};
|
|
|
|
public render() {
|
|
const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
|
|
const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
|
|
|
|
return (
|
|
<div
|
|
className="container"
|
|
onCut={e => {
|
|
e.clipboardData.setData(
|
|
"text/plain",
|
|
JSON.stringify(elements.filter(element => element.isSelected))
|
|
);
|
|
deleteSelectedElements(elements);
|
|
this.forceUpdate();
|
|
e.preventDefault();
|
|
}}
|
|
onCopy={e => {
|
|
e.clipboardData.setData(
|
|
"text/plain",
|
|
JSON.stringify(elements.filter(element => element.isSelected))
|
|
);
|
|
e.preventDefault();
|
|
}}
|
|
onPaste={e => {
|
|
const paste = e.clipboardData.getData("text");
|
|
let parsedElements;
|
|
try {
|
|
parsedElements = JSON.parse(paste);
|
|
} catch (e) {}
|
|
if (
|
|
Array.isArray(parsedElements) &&
|
|
parsedElements.length > 0 &&
|
|
parsedElements[0].type // need to implement a better check here...
|
|
) {
|
|
clearSelection(elements);
|
|
parsedElements.forEach(parsedElement => {
|
|
parsedElement.x += 10;
|
|
parsedElement.y += 10;
|
|
parsedElement.seed = randomSeed();
|
|
generateDraw(parsedElement);
|
|
elements.push(parsedElement);
|
|
});
|
|
this.forceUpdate();
|
|
}
|
|
e.preventDefault();
|
|
}}
|
|
>
|
|
<div className="sidePanel">
|
|
<h4>Shapes</h4>
|
|
<div className="panelTools">
|
|
{SHAPES.map(({ value, icon }) => (
|
|
<label
|
|
key={value}
|
|
className="tool"
|
|
title={`${capitalizeString(value)} - ${
|
|
capitalizeString(value)[0]
|
|
}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
checked={this.state.elementType === value}
|
|
onChange={() => {
|
|
this.setState({ elementType: value });
|
|
clearSelection(elements);
|
|
document.documentElement.style.cursor =
|
|
value === "text" ? "text" : "crosshair";
|
|
this.forceUpdate();
|
|
}}
|
|
/>
|
|
<div className="toolIcon">{icon}</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
{someElementIsSelected(elements) && (
|
|
<div className="panelColumn">
|
|
<h4>Selection</h4>
|
|
<div className="buttonList">
|
|
<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>
|
|
<h5>Stroke Color</h5>
|
|
<ColorPicker
|
|
color={getSelectedAttribute(
|
|
elements,
|
|
element => element.strokeColor
|
|
)}
|
|
onChange={color => this.changeStrokeColor(color)}
|
|
/>
|
|
|
|
{hasBackground(elements) && (
|
|
<>
|
|
<h5>Background Color</h5>
|
|
<ColorPicker
|
|
color={getSelectedAttribute(
|
|
elements,
|
|
element => element.backgroundColor
|
|
)}
|
|
onChange={color => this.changeBackgroundColor(color)}
|
|
/>
|
|
<h5>Fill</h5>
|
|
<ButtonSelect
|
|
options={[
|
|
{ value: "solid", text: "Solid" },
|
|
{ value: "hachure", text: "Hachure" },
|
|
{ value: "cross-hatch", text: "Cross-hatch" }
|
|
]}
|
|
value={getSelectedAttribute(
|
|
elements,
|
|
element => element.fillStyle
|
|
)}
|
|
onChange={value => {
|
|
this.changeProperty(element => {
|
|
element.fillStyle = value;
|
|
});
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{hasStroke(elements) && (
|
|
<>
|
|
<h5>Stroke Width</h5>
|
|
<ButtonSelect
|
|
options={[
|
|
{ value: 1, text: "Thin" },
|
|
{ value: 2, text: "Bold" },
|
|
{ value: 4, text: "Extra Bold" }
|
|
]}
|
|
value={getSelectedAttribute(
|
|
elements,
|
|
element => element.strokeWidth
|
|
)}
|
|
onChange={value => {
|
|
this.changeProperty(element => {
|
|
element.strokeWidth = value;
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<h5>Sloppiness</h5>
|
|
<ButtonSelect
|
|
options={[
|
|
{ value: 0, text: "Draftsman" },
|
|
{ value: 1, text: "Artist" },
|
|
{ value: 3, text: "Cartoonist" }
|
|
]}
|
|
value={getSelectedAttribute(
|
|
elements,
|
|
element => element.roughness
|
|
)}
|
|
onChange={value =>
|
|
this.changeProperty(element => {
|
|
element.roughness = value;
|
|
})
|
|
}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<h5>Opacity</h5>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
onChange={this.changeOpacity}
|
|
value={
|
|
getSelectedAttribute(elements, element => element.opacity) ||
|
|
0 /* Put the opacity at 0 if there are two conflicting ones */
|
|
}
|
|
/>
|
|
|
|
<button onClick={this.deleteSelectedElements}>
|
|
Delete selected
|
|
</button>
|
|
</div>
|
|
)}
|
|
<h4>Canvas</h4>
|
|
<div className="panelColumn">
|
|
<h5>Canvas Background Color</h5>
|
|
<ColorPicker
|
|
color={this.state.viewBackgroundColor}
|
|
onChange={color => this.setState({ viewBackgroundColor: color })}
|
|
/>
|
|
<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(elements, canvas, 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(elements, this.state.name);
|
|
}}
|
|
>
|
|
Save as...
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
loadFromJSON(elements).then(() => this.forceUpdate());
|
|
}}
|
|
>
|
|
Load file...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<canvas
|
|
id="canvas"
|
|
style={{
|
|
width: canvasWidth,
|
|
height: canvasHeight
|
|
}}
|
|
width={canvasWidth * window.devicePixelRatio}
|
|
height={canvasHeight * window.devicePixelRatio}
|
|
ref={canvas => {
|
|
if (this.removeWheelEventListener) {
|
|
this.removeWheelEventListener();
|
|
this.removeWheelEventListener = undefined;
|
|
}
|
|
if (canvas) {
|
|
canvas.addEventListener("wheel", this.handleWheel, {
|
|
passive: false
|
|
});
|
|
this.removeWheelEventListener = () =>
|
|
canvas.removeEventListener("wheel", this.handleWheel);
|
|
|
|
// Whenever React sets the width/height of the canvas element,
|
|
// the context loses the scale transform. We need to re-apply it
|
|
if (
|
|
canvasWidth !== lastCanvasWidth ||
|
|
canvasHeight !== lastCanvasHeight
|
|
) {
|
|
lastCanvasWidth = canvasWidth;
|
|
lastCanvasHeight = canvasHeight;
|
|
canvas
|
|
.getContext("2d")!
|
|
.scale(window.devicePixelRatio, window.devicePixelRatio);
|
|
}
|
|
}
|
|
}}
|
|
onMouseDown={e => {
|
|
if (lastMouseUp !== null) {
|
|
// Unfortunately, sometimes we don't get a mouseup after a mousedown,
|
|
// this can happen when a contextual menu or alert is triggered. In order to avoid
|
|
// being in a weird state, we clean up on the next mousedown
|
|
lastMouseUp(e);
|
|
}
|
|
// only handle left mouse button
|
|
if (e.button !== 0) return;
|
|
// fixes mousemove causing selection of UI texts #32
|
|
e.preventDefault();
|
|
// Preventing the event above disables default behavior
|
|
// of defocusing potentially focused input, which is what we want
|
|
// when clicking inside the canvas.
|
|
if (isInputLike(document.activeElement)) {
|
|
document.activeElement.blur();
|
|
}
|
|
|
|
// Handle scrollbars dragging
|
|
const {
|
|
isOverHorizontalScrollBar,
|
|
isOverVerticalScrollBar
|
|
} = isOverScrollBars(
|
|
elements,
|
|
e.clientX - CANVAS_WINDOW_OFFSET_LEFT,
|
|
e.clientY - CANVAS_WINDOW_OFFSET_TOP,
|
|
canvasWidth,
|
|
canvasHeight,
|
|
this.state.scrollX,
|
|
this.state.scrollY
|
|
);
|
|
|
|
const x =
|
|
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
|
|
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
|
|
const element = newElement(
|
|
this.state.elementType,
|
|
x,
|
|
y,
|
|
this.state.currentItemStrokeColor,
|
|
this.state.currentItemBackgroundColor,
|
|
"hachure",
|
|
1,
|
|
1,
|
|
100
|
|
);
|
|
let resizeHandle: string | false = false;
|
|
let isDraggingElements = false;
|
|
let isResizingElements = false;
|
|
if (this.state.elementType === "selection") {
|
|
const resizeElement = elements.find(element => {
|
|
return resizeTest(element, x, y, {
|
|
scrollX: this.state.scrollX,
|
|
scrollY: this.state.scrollY,
|
|
viewBackgroundColor: this.state.viewBackgroundColor
|
|
});
|
|
});
|
|
|
|
this.setState({
|
|
resizingElement: resizeElement ? resizeElement : null
|
|
});
|
|
|
|
if (resizeElement) {
|
|
resizeHandle = resizeTest(resizeElement, x, y, {
|
|
scrollX: this.state.scrollX,
|
|
scrollY: this.state.scrollY,
|
|
viewBackgroundColor: this.state.viewBackgroundColor
|
|
});
|
|
document.documentElement.style.cursor = `${resizeHandle}-resize`;
|
|
isResizingElements = true;
|
|
} else {
|
|
const hitElement = getElementAtPosition(elements, x, y);
|
|
|
|
// If we click on something
|
|
if (hitElement) {
|
|
if (hitElement.isSelected) {
|
|
// If that element is not already selected, do nothing,
|
|
// we're likely going to drag it
|
|
} else {
|
|
// We unselect every other elements unless shift is pressed
|
|
if (!e.shiftKey) {
|
|
clearSelection(elements);
|
|
}
|
|
// No matter what, we select it
|
|
hitElement.isSelected = true;
|
|
}
|
|
} else {
|
|
// If we don't click on anything, let's remove all the selected elements
|
|
clearSelection(elements);
|
|
}
|
|
|
|
isDraggingElements = someElementIsSelected(elements);
|
|
|
|
if (isDraggingElements) {
|
|
document.documentElement.style.cursor = "move";
|
|
}
|
|
}
|
|
}
|
|
|
|
if (isTextElement(element)) {
|
|
if (!addTextElement(element)) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
generateDraw(element);
|
|
elements.push(element);
|
|
if (this.state.elementType === "text") {
|
|
this.setState({
|
|
draggingElement: null,
|
|
elementType: "selection"
|
|
});
|
|
element.isSelected = true;
|
|
} else {
|
|
this.setState({ draggingElement: element });
|
|
}
|
|
|
|
let lastX = x;
|
|
let lastY = y;
|
|
|
|
if (isOverHorizontalScrollBar || isOverVerticalScrollBar) {
|
|
lastX = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
|
|
lastY = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
|
|
}
|
|
|
|
const onMouseMove = (e: MouseEvent) => {
|
|
const target = e.target;
|
|
if (!(target instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
if (isOverHorizontalScrollBar) {
|
|
const x = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
|
|
const dx = x - lastX;
|
|
this.setState(state => ({ scrollX: state.scrollX - dx }));
|
|
lastX = x;
|
|
return;
|
|
}
|
|
|
|
if (isOverVerticalScrollBar) {
|
|
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
|
|
const dy = y - lastY;
|
|
this.setState(state => ({ scrollY: state.scrollY - dy }));
|
|
lastY = y;
|
|
return;
|
|
}
|
|
|
|
if (isResizingElements && this.state.resizingElement) {
|
|
const el = this.state.resizingElement;
|
|
const selectedElements = elements.filter(el => el.isSelected);
|
|
if (selectedElements.length === 1) {
|
|
const x =
|
|
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
|
|
const y =
|
|
e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
|
|
selectedElements.forEach(element => {
|
|
switch (resizeHandle) {
|
|
case "nw":
|
|
element.width += element.x - lastX;
|
|
element.height += element.y - lastY;
|
|
element.x = lastX;
|
|
element.y = lastY;
|
|
break;
|
|
case "ne":
|
|
element.width = lastX - element.x;
|
|
element.height += element.y - lastY;
|
|
element.y = lastY;
|
|
break;
|
|
case "sw":
|
|
element.width += element.x - lastX;
|
|
element.x = lastX;
|
|
element.height = lastY - element.y;
|
|
break;
|
|
case "se":
|
|
element.width += x - lastX;
|
|
if (e.shiftKey) {
|
|
element.height = element.width;
|
|
} else {
|
|
element.height += y - lastY;
|
|
}
|
|
break;
|
|
case "n":
|
|
element.height += element.y - lastY;
|
|
element.y = lastY;
|
|
break;
|
|
case "w":
|
|
element.width += element.x - lastX;
|
|
element.x = lastX;
|
|
break;
|
|
case "s":
|
|
element.height = lastY - element.y;
|
|
break;
|
|
case "e":
|
|
element.width = lastX - element.x;
|
|
break;
|
|
}
|
|
|
|
el.x = element.x;
|
|
el.y = element.y;
|
|
generateDraw(el);
|
|
});
|
|
lastX = x;
|
|
lastY = y;
|
|
// We don't want to save history when resizing an element
|
|
skipHistory = true;
|
|
this.forceUpdate();
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (isDraggingElements) {
|
|
const selectedElements = elements.filter(el => el.isSelected);
|
|
if (selectedElements.length) {
|
|
const x =
|
|
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
|
|
const y =
|
|
e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
|
|
selectedElements.forEach(element => {
|
|
element.x += x - lastX;
|
|
element.y += y - lastY;
|
|
});
|
|
lastX = x;
|
|
lastY = y;
|
|
// We don't want to save history when dragging an element to initially size it
|
|
skipHistory = true;
|
|
this.forceUpdate();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// It is very important to read this.state within each move event,
|
|
// otherwise we would read a stale one!
|
|
const draggingElement = this.state.draggingElement;
|
|
if (!draggingElement) return;
|
|
let width =
|
|
e.clientX -
|
|
CANVAS_WINDOW_OFFSET_LEFT -
|
|
draggingElement.x -
|
|
this.state.scrollX;
|
|
let height =
|
|
e.clientY -
|
|
CANVAS_WINDOW_OFFSET_TOP -
|
|
draggingElement.y -
|
|
this.state.scrollY;
|
|
draggingElement.width = width;
|
|
// Make a perfect square or circle when shift is enabled
|
|
draggingElement.height = e.shiftKey
|
|
? Math.abs(width) * Math.sign(height)
|
|
: height;
|
|
|
|
generateDraw(draggingElement);
|
|
|
|
if (this.state.elementType === "selection") {
|
|
setSelection(elements, draggingElement);
|
|
}
|
|
// We don't want to save history when moving an element
|
|
skipHistory = true;
|
|
this.forceUpdate();
|
|
};
|
|
|
|
const onMouseUp = (e: MouseEvent) => {
|
|
const { draggingElement, elementType } = this.state;
|
|
|
|
lastMouseUp = null;
|
|
window.removeEventListener("mousemove", onMouseMove);
|
|
window.removeEventListener("mouseup", onMouseUp);
|
|
|
|
resetCursor();
|
|
|
|
// if no element is clicked, clear the selection and redraw
|
|
if (draggingElement === null) {
|
|
clearSelection(elements);
|
|
this.forceUpdate();
|
|
return;
|
|
}
|
|
|
|
if (elementType === "selection") {
|
|
if (isDraggingElements) {
|
|
isDraggingElements = false;
|
|
}
|
|
elements.pop();
|
|
} else {
|
|
draggingElement.isSelected = true;
|
|
}
|
|
|
|
this.setState({
|
|
draggingElement: null,
|
|
elementType: "selection"
|
|
});
|
|
this.forceUpdate();
|
|
};
|
|
|
|
lastMouseUp = onMouseUp;
|
|
|
|
window.addEventListener("mousemove", onMouseMove);
|
|
window.addEventListener("mouseup", onMouseUp);
|
|
|
|
// We don't want to save history on mouseDown, only on mouseUp when it's fully configured
|
|
skipHistory = true;
|
|
this.forceUpdate();
|
|
}}
|
|
onDoubleClick={e => {
|
|
const x =
|
|
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
|
|
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
|
|
|
|
if (getElementAtPosition(elements, x, y)) {
|
|
return;
|
|
}
|
|
|
|
const element = newElement(
|
|
"text",
|
|
x,
|
|
y,
|
|
this.state.currentItemStrokeColor,
|
|
this.state.currentItemBackgroundColor,
|
|
"hachure",
|
|
1,
|
|
1,
|
|
100
|
|
);
|
|
|
|
if (!addTextElement(element as ExcalidrawTextElement)) {
|
|
return;
|
|
}
|
|
|
|
generateDraw(element);
|
|
elements.push(element);
|
|
|
|
this.setState({
|
|
draggingElement: null,
|
|
elementType: "selection"
|
|
});
|
|
element.isSelected = true;
|
|
|
|
this.forceUpdate();
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleWheel = (e: WheelEvent) => {
|
|
e.preventDefault();
|
|
const { deltaX, deltaY } = e;
|
|
this.setState(state => ({
|
|
scrollX: state.scrollX - deltaX,
|
|
scrollY: state.scrollY - deltaY
|
|
}));
|
|
};
|
|
|
|
componentDidUpdate() {
|
|
renderScene(elements, rc, canvas, {
|
|
scrollX: this.state.scrollX,
|
|
scrollY: this.state.scrollY,
|
|
viewBackgroundColor: this.state.viewBackgroundColor
|
|
});
|
|
saveToLocalStorage(elements, this.state);
|
|
if (!skipHistory) {
|
|
pushHistoryEntry(generateHistoryCurrentEntry());
|
|
redoStack.splice(0, redoStack.length);
|
|
}
|
|
skipHistory = false;
|
|
}
|
|
}
|
|
|
|
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")!;
|
|
|
|
ReactDOM.render(<App />, rootElement);
|