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

Rename excalibur to excalidraw

Browse Source
This commit is contained in:
Faustino Kialungila 2020-01-03 20:17:05 +01:00
parent 98b158a83d
commit 4fa55222fd
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -20,7 +20,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Excalidraw</title>
</head> </head>
<body> <body>

36
src/index.tsx
View File

@ -5,18 +5,18 @@ import { RoughCanvas } from "roughjs/bin/canvas";
import "./styles.css"; import "./styles.css";
type ExcaliburElement = ReturnType<typeof newElement>; type ExcalidrawElement = ReturnType<typeof newElement>;
type ExcaliburTextElement = ExcaliburElement & { type ExcalidrawTextElement = ExcalidrawElement & {
type: "text"; type: "text";
font: string; font: string;
text: string; text: string;
actualBoundingBoxAscent: number; actualBoundingBoxAscent: number;
}; };
const LOCAL_STORAGE_KEY = "excalibur"; const LOCAL_STORAGE_KEY = "excalidraw";
const LOCAL_STORAGE_KEY_STATE = "excalibur-state"; const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
var elements = Array.of<ExcaliburElement>(); var elements = Array.of<ExcalidrawElement>();
// https://stackoverflow.com/a/6853926/232122 // https://stackoverflow.com/a/6853926/232122
function distanceBetweenPointAndSegment( function distanceBetweenPointAndSegment(
@ -57,7 +57,7 @@ function distanceBetweenPointAndSegment(
return Math.sqrt(dx * dx + dy * dy); 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 // 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 // of the click is less than x pixels of any of the lines that the shape is composed of
const lineThreshold = 10; const lineThreshold = 10;
@ -248,7 +248,7 @@ function exportAsPNG({
// create a temporary <a> elem which we'll use to download the image // create a temporary <a> elem which we'll use to download the image
const link = document.createElement("a"); const link = document.createElement("a");
link.setAttribute("download", "excalibur.png"); link.setAttribute("download", "excalidraw.png");
link.setAttribute("href", tempCanvas.toDataURL("image/png")); link.setAttribute("href", tempCanvas.toDataURL("image/png"));
link.click(); 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); var generator = rough.generator(null, null as any);
function isTextElement( function isTextElement(
element: ExcaliburElement element: ExcalidrawElement
): element is ExcaliburTextElement { ): element is ExcalidrawTextElement {
return element.type === "text"; return element.type === "text";
} }
function getArrowPoints(element: ExcaliburElement) { function getArrowPoints(element: ExcalidrawElement) {
const x1 = 0; const x1 = 0;
const y1 = 0; const y1 = 0;
const x2 = element.width; const x2 = element.width;
@ -298,7 +298,7 @@ function getArrowPoints(element: ExcaliburElement) {
return [x1, y1, x2, y2, x3, y3, x4, y4]; return [x1, y1, x2, y2, x3, y3, x4, y4];
} }
function generateDraw(element: ExcaliburElement) { function generateDraw(element: ExcalidrawElement) {
if (element.type === "selection") { if (element.type === "selection") {
element.draw = (rc, context) => { element.draw = (rc, context) => {
const fillStyle = context.fillStyle; const fillStyle = context.fillStyle;
@ -369,20 +369,20 @@ function generateDraw(element: ExcaliburElement) {
// This set of functions retrieves the absolute position of the 4 points. // 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 // We can't just always normalize it since we need to remember the fact that an arrow
// is pointing left or right. // is pointing left or right.
function getElementAbsoluteX1(element: ExcaliburElement) { function getElementAbsoluteX1(element: ExcalidrawElement) {
return element.width >= 0 ? element.x : element.x + element.width; 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; 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; 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; return element.height >= 0 ? element.y + element.height : element.y;
} }
function setSelection(selection: ExcaliburElement) { function setSelection(selection: ExcalidrawElement) {
const selectionX1 = getElementAbsoluteX1(selection); const selectionX1 = getElementAbsoluteX1(selection);
const selectionX2 = getElementAbsoluteX2(selection); const selectionX2 = getElementAbsoluteX2(selection);
const selectionY1 = getElementAbsoluteY1(selection); const selectionY1 = getElementAbsoluteY1(selection);
@ -427,7 +427,7 @@ function restore() {
if (savedElements) { if (savedElements) {
elements = JSON.parse(savedElements); elements = JSON.parse(savedElements);
elements.forEach((element: ExcaliburElement) => generateDraw(element)); elements.forEach((element: ExcalidrawElement) => generateDraw(element));
} }
return savedState ? JSON.parse(savedState) : null; return savedState ? JSON.parse(savedState) : null;
@ -438,7 +438,7 @@ function restore() {
} }
type AppState = { type AppState = {
draggingElement: ExcaliburElement | null; draggingElement: ExcalidrawElement | null;
elementType: string; elementType: string;
exportBackground: boolean; exportBackground: boolean;
exportVisibleOnly: boolean; exportVisibleOnly: boolean;