diff --git a/public/index.html b/public/index.html
index 42ae2d2d..05fc9bee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,7 +20,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- React App
+ Excalidraw
diff --git a/src/index.tsx b/src/index.tsx
index 5af8f7ce..44492cec 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,18 +5,18 @@ import { RoughCanvas } from "roughjs/bin/canvas";
import "./styles.css";
-type ExcaliburElement = ReturnType;
-type ExcaliburTextElement = ExcaliburElement & {
+type ExcalidrawElement = ReturnType;
+type ExcalidrawTextElement = ExcalidrawElement & {
type: "text";
font: string;
text: string;
actualBoundingBoxAscent: number;
};
-const LOCAL_STORAGE_KEY = "excalibur";
-const LOCAL_STORAGE_KEY_STATE = "excalibur-state";
+const LOCAL_STORAGE_KEY = "excalidraw";
+const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
-var elements = Array.of();
+var elements = Array.of();
// https://stackoverflow.com/a/6853926/232122
function distanceBetweenPointAndSegment(
@@ -57,7 +57,7 @@ function distanceBetweenPointAndSegment(
return Math.sqrt(dx * dx + dy * dy);
}
-function hitTest(element: ExcaliburElement, x: number, y: number): boolean {
+function hitTest(element: ExcalidrawElement, x: number, y: number): boolean {
// For shapes that are composed of lines, we only enable point-selection when the distance
// of the click is less than x pixels of any of the lines that the shape is composed of
const lineThreshold = 10;
@@ -248,7 +248,7 @@ function exportAsPNG({
// create a temporary elem which we'll use to download the image
const link = document.createElement("a");
- link.setAttribute("download", "excalibur.png");
+ link.setAttribute("download", "excalidraw.png");
link.setAttribute("href", tempCanvas.toDataURL("image/png"));
link.click();
@@ -273,12 +273,12 @@ function rotate(x1: number, y1: number, x2: number, y2: number, angle: number) {
var generator = rough.generator(null, null as any);
function isTextElement(
- element: ExcaliburElement
-): element is ExcaliburTextElement {
+ element: ExcalidrawElement
+): element is ExcalidrawTextElement {
return element.type === "text";
}
-function getArrowPoints(element: ExcaliburElement) {
+function getArrowPoints(element: ExcalidrawElement) {
const x1 = 0;
const y1 = 0;
const x2 = element.width;
@@ -298,7 +298,7 @@ function getArrowPoints(element: ExcaliburElement) {
return [x1, y1, x2, y2, x3, y3, x4, y4];
}
-function generateDraw(element: ExcaliburElement) {
+function generateDraw(element: ExcalidrawElement) {
if (element.type === "selection") {
element.draw = (rc, context) => {
const fillStyle = context.fillStyle;
@@ -369,20 +369,20 @@ function generateDraw(element: ExcaliburElement) {
// This set of functions retrieves the absolute position of the 4 points.
// We can't just always normalize it since we need to remember the fact that an arrow
// is pointing left or right.
-function getElementAbsoluteX1(element: ExcaliburElement) {
+function getElementAbsoluteX1(element: ExcalidrawElement) {
return element.width >= 0 ? element.x : element.x + element.width;
}
-function getElementAbsoluteX2(element: ExcaliburElement) {
+function getElementAbsoluteX2(element: ExcalidrawElement) {
return element.width >= 0 ? element.x + element.width : element.x;
}
-function getElementAbsoluteY1(element: ExcaliburElement) {
+function getElementAbsoluteY1(element: ExcalidrawElement) {
return element.height >= 0 ? element.y : element.y + element.height;
}
-function getElementAbsoluteY2(element: ExcaliburElement) {
+function getElementAbsoluteY2(element: ExcalidrawElement) {
return element.height >= 0 ? element.y + element.height : element.y;
}
-function setSelection(selection: ExcaliburElement) {
+function setSelection(selection: ExcalidrawElement) {
const selectionX1 = getElementAbsoluteX1(selection);
const selectionX2 = getElementAbsoluteX2(selection);
const selectionY1 = getElementAbsoluteY1(selection);
@@ -427,7 +427,7 @@ function restore() {
if (savedElements) {
elements = JSON.parse(savedElements);
- elements.forEach((element: ExcaliburElement) => generateDraw(element));
+ elements.forEach((element: ExcalidrawElement) => generateDraw(element));
}
return savedState ? JSON.parse(savedState) : null;
@@ -438,7 +438,7 @@ function restore() {
}
type AppState = {
- draggingElement: ExcaliburElement | null;
+ draggingElement: ExcalidrawElement | null;
elementType: string;
exportBackground: boolean;
exportVisibleOnly: boolean;