smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into make-elements-immutable

Browse source
This commit is contained in:
Gasim Gasimzada 2020-01-09 13:03:20 +04:00
commit 88006ab426
7 changed files with 183 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -17,6 +17,9 @@ Go to https://www.excalidraw.com to start sketching
<a href="https://twitter.com/kyehohenberger/status/1214288572037025792"><img width="423" src="https://user-images.githubusercontent.com/197597/71851802-34f13880-308c-11ea-9416-191099e6349c.png"></a> <a href="https://twitter.com/kyehohenberger/status/1214288572037025792"><img width="423" src="https://user-images.githubusercontent.com/197597/71851802-34f13880-308c-11ea-9416-191099e6349c.png"></a>
<a href="https://twitter.com/jordwalke/status/1214858186789806080"><img width="434" src="https://user-images.githubusercontent.com/197597/72036874-07a1b780-3251-11ea-99e8-6bafd93483a0.png"></a>
<a href="https://twitter.com/lucasazzola/status/1215126440330416128"><img width="429" src="https://user-images.githubusercontent.com/197597/72039003-48e99580-3258-11ea-8daa-85dd055f2a82.png">
## Run the code ## Run the code

36
src/element/handlerRectangles.ts
View file

@ -1,11 +1,11 @@
import { SceneState } from "../scene/types";
import { ExcalidrawElement } from "./types"; import { ExcalidrawElement } from "./types";
import { SceneScroll } from "../scene/types";
type Sides = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se"; type Sides = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
export function handlerRectangles( export function handlerRectangles(
element: ExcalidrawElement, element: ExcalidrawElement,
sceneState: SceneState { scrollX, scrollY }: SceneScroll
) { ) {
const elementX1 = element.x; const elementX1 = element.x;
const elementX2 = element.x + element.width; const elementX2 = element.x + element.width;
@ -21,15 +21,15 @@ export function handlerRectangles(
if (Math.abs(elementX2 - elementX1) > minimumSize) { if (Math.abs(elementX2 - elementX1) > minimumSize) {
handlers["n"] = [ handlers["n"] = [
elementX1 + (elementX2 - elementX1) / 2 + sceneState.scrollX - 4, elementX1 + (elementX2 - elementX1) / 2 + scrollX - 4,
elementY1 - margin + sceneState.scrollY + marginY, elementY1 - margin + scrollY + marginY,
8, 8,
8 8
]; ];
handlers["s"] = [ handlers["s"] = [
elementX1 + (elementX2 - elementX1) / 2 + sceneState.scrollX - 4, elementX1 + (elementX2 - elementX1) / 2 + scrollX - 4,
elementY2 - margin + sceneState.scrollY - marginY, elementY2 - margin + scrollY - marginY,
8, 8,
8 8
]; ];
@ -37,41 +37,41 @@ export function handlerRectangles(
if (Math.abs(elementY2 - elementY1) > minimumSize) { if (Math.abs(elementY2 - elementY1) > minimumSize) {
handlers["w"] = [ handlers["w"] = [
elementX1 - margin + sceneState.scrollX + marginX, elementX1 - margin + scrollX + marginX,
elementY1 + (elementY2 - elementY1) / 2 + sceneState.scrollY - 4, elementY1 + (elementY2 - elementY1) / 2 + scrollY - 4,
8, 8,
8 8
]; ];
handlers["e"] = [ handlers["e"] = [
elementX2 - margin + sceneState.scrollX - marginX, elementX2 - margin + scrollX - marginX,
elementY1 + (elementY2 - elementY1) / 2 + sceneState.scrollY - 4, elementY1 + (elementY2 - elementY1) / 2 + scrollY - 4,
8, 8,
8 8
]; ];
} }
handlers["nw"] = [ handlers["nw"] = [
elementX1 - margin + sceneState.scrollX + marginX, elementX1 - margin + scrollX + marginX,
elementY1 - margin + sceneState.scrollY + marginY, elementY1 - margin + scrollY + marginY,
8, 8,
8 8
]; // nw ]; // nw
handlers["ne"] = [ handlers["ne"] = [
elementX2 - margin + sceneState.scrollX - marginX, elementX2 - margin + scrollX - marginX,
elementY1 - margin + sceneState.scrollY + marginY, elementY1 - margin + scrollY + marginY,
8, 8,
8 8
]; // ne ]; // ne
handlers["sw"] = [ handlers["sw"] = [
elementX1 - margin + sceneState.scrollX + marginX, elementX1 - margin + scrollX + marginX,
elementY2 - margin + sceneState.scrollY - marginY, elementY2 - margin + scrollY - marginY,
8, 8,
8 8
]; // sw ]; // sw
handlers["se"] = [ handlers["se"] = [
elementX2 - margin + sceneState.scrollX - marginX, elementX2 - margin + scrollX - marginX,
elementY2 - margin + sceneState.scrollY - marginY, elementY2 - margin + scrollY - marginY,
8, 8,
8 8
]; // se ]; // se

31
src/element/resizeTest.ts
View file

@ -1,7 +1,7 @@
import { ExcalidrawElement } from "./types"; import { ExcalidrawElement } from "./types";
import { SceneState } from "../scene/types";
import { handlerRectangles } from "./handlerRectangles"; import { handlerRectangles } from "./handlerRectangles";
import { SceneScroll } from "../scene/types";
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>; type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
@ -9,20 +9,20 @@ export function resizeTest(
element: ExcalidrawElement, element: ExcalidrawElement,
x: number, x: number,
y: number, y: number,
sceneState: SceneState { scrollX, scrollY }: SceneScroll
): HandlerRectanglesRet | false { ): HandlerRectanglesRet | false {
if (!element.isSelected || element.type === "text") return false; if (!element.isSelected || element.type === "text") return false;
const handlers = handlerRectangles(element, sceneState); const handlers = handlerRectangles(element, { scrollX, scrollY });
const filter = Object.keys(handlers).filter(key => { const filter = Object.keys(handlers).filter(key => {
const handler = handlers[key as HandlerRectanglesRet]!; const handler = handlers[key as HandlerRectanglesRet]!;
return ( return (
x + sceneState.scrollX >= handler[0] && x + scrollX >= handler[0] &&
x + sceneState.scrollX <= handler[0] + handler[2] && x + scrollX <= handler[0] + handler[2] &&
y + sceneState.scrollY >= handler[1] && y + scrollY >= handler[1] &&
y + sceneState.scrollY <= handler[1] + handler[3] y + scrollY <= handler[1] + handler[3]
); );
}); });
@ -32,3 +32,20 @@ export function resizeTest(
return false; return false;
} }
export function getElementWithResizeHandler(
elements: ExcalidrawElement[],
{ x, y }: { x: number; y: number },
{ scrollX, scrollY }: SceneScroll
) {
return elements.reduce((result, element) => {
if (result) {
return result;
}
const resizeHandle = resizeTest(element, x, y, {
scrollX,
scrollY
});
return resizeHandle ? { element, resizeHandle } : null;
}, null as { element: ExcalidrawElement; resizeHandle: ReturnType<typeof resizeTest> } | null);
}

162
src/index.tsx
View file

@ -29,7 +29,8 @@ import {
hasStroke, hasStroke,
getElementAtPosition, getElementAtPosition,
createScene, createScene,
getElementContainingPosition getElementContainingPosition,
hasText
} from "./scene"; } from "./scene";
import { renderScene } from "./renderer"; import { renderScene } from "./renderer";
@ -52,6 +53,7 @@ import { PanelCanvas } from "./components/panels/PanelCanvas";
import { Panel } from "./components/Panel"; import { Panel } from "./components/Panel";
import "./styles.scss"; import "./styles.scss";
import { getElementWithResizeHandler } from "./element/resizeTest";
let { elements } = createScene(); let { elements } = createScene();
const { history } = createHistory(); const { history } = createHistory();
@ -98,6 +100,15 @@ let lastCanvasHeight = -1;
let lastMouseUp: ((e: any) => void) | null = null; let lastMouseUp: ((e: any) => void) | null = null;
export function viewportCoordsToSceneCoords(
{ clientX, clientY }: { clientX: number; clientY: number },
{ scrollX, scrollY }: { scrollX: number; scrollY: number }
) {
const x = clientX - CANVAS_WINDOW_OFFSET_LEFT - scrollX;
const y = clientY - CANVAS_WINDOW_OFFSET_TOP - scrollY;
return { x, y };
}
export class App extends React.Component<{}, AppState> { export class App extends React.Component<{}, AppState> {
canvas: HTMLCanvasElement | null = null; canvas: HTMLCanvasElement | null = null;
rc: RoughCanvas | null = null; rc: RoughCanvas | null = null;
@ -265,7 +276,7 @@ export class App extends React.Component<{}, AppState> {
const pastedElement = JSON.parse(copiedStyles); const pastedElement = JSON.parse(copiedStyles);
elements = elements.map(element => { elements = elements.map(element => {
if (element.isSelected) { if (element.isSelected) {
return { const newElement = {
...element, ...element,
backgroundColor: pastedElement?.backgroundColor, backgroundColor: pastedElement?.backgroundColor,
strokeWidth: pastedElement?.strokeWidth, strokeWidth: pastedElement?.strokeWidth,
@ -274,6 +285,11 @@ export class App extends React.Component<{}, AppState> {
opacity: pastedElement?.opacity, opacity: pastedElement?.opacity,
roughness: pastedElement?.roughness roughness: pastedElement?.roughness
}; };
if (isTextElement(newElement)) {
newElement.font = pastedElement?.font;
this.redrawTextBoundingBox(newElement);
}
return newElement;
} }
return element; return element;
}); });
@ -359,6 +375,13 @@ export class App extends React.Component<{}, AppState> {
} }
}; };
private redrawTextBoundingBox = (element: ExcalidrawTextElement) => {
const metrics = measureText(element.text, element.font);
element.width = metrics.width;
element.height = metrics.height;
element.baseline = metrics.baseline;
};
public render() { public render() {
const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT; const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP; const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
@ -490,6 +513,62 @@ export class App extends React.Component<{}, AppState> {
</> </>
)} )}
{hasText(elements) && (
<>
<h5>Font size</h5>
<ButtonSelect
options={[
{ value: 16, text: "Small" },
{ value: 20, text: "Medium" },
{ value: 28, text: "Large" },
{ value: 36, text: "Very Large" }
]}
value={getSelectedAttribute(
elements,
element =>
isTextElement(element) && +element.font.split("px ")[0]
)}
onChange={value =>
this.changeProperty(element => {
if (isTextElement(element)) {
element.font = `${value}px ${
element.font.split("px ")[1]
}`;
this.redrawTextBoundingBox(element);
}
return element;
})
}
/>
<h5>Font familly</h5>
<ButtonSelect
options={[
{ value: "Virgil", text: "Virgil" },
{ value: "Helvetica", text: "Helvetica" },
{ value: "Courier", text: "Courier" }
]}
value={getSelectedAttribute(
elements,
element =>
isTextElement(element) && element.font.split("px ")[1]
)}
onChange={value =>
this.changeProperty(element => {
if (isTextElement(element)) {
element.font = `${
element.font.split("px ")[0]
}px ${value}`;
this.redrawTextBoundingBox(element);
}
return element;
})
}
/>
</>
)}
<h5>Opacity</h5> <h5>Opacity</h5>
<input <input
type="range" type="range"
@ -573,9 +652,7 @@ export class App extends React.Component<{}, AppState> {
onContextMenu={e => { onContextMenu={e => {
e.preventDefault(); e.preventDefault();
const x = const { x, y } = viewportCoordsToSceneCoords(e, this.state);
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
const element = getElementAtPosition(elements, x, y); const element = getElementAtPosition(elements, x, y);
if (!element) { if (!element) {
@ -652,9 +729,8 @@ export class App extends React.Component<{}, AppState> {
this.state.scrollY this.state.scrollY
); );
const x = const { x, y } = viewportCoordsToSceneCoords(e, this.state);
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
const element = newElement( const element = newElement(
this.state.elementType, this.state.elementType,
x, x,
@ -666,28 +742,23 @@ export class App extends React.Component<{}, AppState> {
1, 1,
100 100
); );
let resizeHandle: ReturnType<typeof resizeTest> = false; type ResizeTestType = ReturnType<typeof resizeTest>;
let resizeHandle: ResizeTestType = false;
let isDraggingElements = false; let isDraggingElements = false;
let isResizingElements = false; let isResizingElements = false;
if (this.state.elementType === "selection") { if (this.state.elementType === "selection") {
const resizeElement = elements.find(element => { const resizeElement = getElementWithResizeHandler(
return resizeTest(element, x, y, { elements,
scrollX: this.state.scrollX, { x, y },
scrollY: this.state.scrollY, this.state
viewBackgroundColor: this.state.viewBackgroundColor );
});
});
this.setState({ this.setState({
resizingElement: resizeElement ? resizeElement : null resizingElement: resizeElement ? resizeElement.element : null
}); });
if (resizeElement) { if (resizeElement) {
resizeHandle = resizeTest(resizeElement, x, y, { resizeHandle = resizeElement.resizeHandle;
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
viewBackgroundColor: this.state.viewBackgroundColor
});
document.documentElement.style.cursor = `${resizeHandle}-resize`; document.documentElement.style.cursor = `${resizeHandle}-resize`;
isResizingElements = true; isResizingElements = true;
} else { } else {
@ -696,7 +767,7 @@ export class App extends React.Component<{}, AppState> {
// If we click on something // If we click on something
if (hitElement) { if (hitElement) {
if (hitElement.isSelected) { if (hitElement.isSelected) {
// If that element is not already selected, do nothing, // If that element is already selected, do nothing,
// we're likely going to drag it // we're likely going to drag it
} else { } else {
// We unselect every other elements unless shift is pressed // We unselect every other elements unless shift is pressed
@ -811,10 +882,8 @@ export class App extends React.Component<{}, AppState> {
const el = this.state.resizingElement; const el = this.state.resizingElement;
const selectedElements = elements.filter(el => el.isSelected); const selectedElements = elements.filter(el => el.isSelected);
if (selectedElements.length === 1) { if (selectedElements.length === 1) {
const x = const { x, y } = viewportCoordsToSceneCoords(e, this.state);
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y =
e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
selectedElements.forEach(element => { selectedElements.forEach(element => {
switch (resizeHandle) { switch (resizeHandle) {
case "nw": case "nw":
@ -886,10 +955,8 @@ export class App extends React.Component<{}, AppState> {
if (isDraggingElements) { if (isDraggingElements) {
const selectedElements = elements.filter(el => el.isSelected); const selectedElements = elements.filter(el => el.isSelected);
if (selectedElements.length) { if (selectedElements.length) {
const x = const { x, y } = viewportCoordsToSceneCoords(e, this.state);
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y =
e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
selectedElements.forEach(element => { selectedElements.forEach(element => {
element.x += x - lastX; element.x += x - lastX;
element.y += y - lastY; element.y += y - lastY;
@ -973,9 +1040,8 @@ export class App extends React.Component<{}, AppState> {
this.forceUpdate(); this.forceUpdate();
}} }}
onDoubleClick={e => { onDoubleClick={e => {
const x = const { x, y } = viewportCoordsToSceneCoords(e, this.state);
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
const elementAtPosition = getElementAtPosition(elements, x, y); const elementAtPosition = getElementAtPosition(elements, x, y);
const element = newElement( const element = newElement(
@ -1047,6 +1113,34 @@ export class App extends React.Component<{}, AppState> {
} }
}); });
}} }}
onMouseMove={e => {
const hasDeselectedButton = Boolean(e.buttons);
if (hasDeselectedButton || this.state.elementType !== "selection") {
return;
}
const { x, y } = viewportCoordsToSceneCoords(e, this.state);
const resizeElement = getElementWithResizeHandler(
elements,
{ x, y },
this.state
);
if (resizeElement && resizeElement.resizeHandle) {
document.documentElement.style.cursor = `${resizeElement.resizeHandle}-resize`;
return;
}
const hitElement = getElementAtPosition(elements, x, y);
if (hitElement) {
const resizeHandle = resizeTest(hitElement, x, y, {
scrollX: this.state.scrollX,
scrollY: this.state.scrollY
});
document.documentElement.style.cursor = resizeHandle
? `${resizeHandle}-resize`
: `move`;
} else {
document.documentElement.style.cursor = ``;
}
}}
/> />
</div> </div>
); );

3
src/scene/comparisons.ts
View file

@ -21,6 +21,9 @@ export const hasStroke = (elements: ExcalidrawElement[]) =>
element.type === "arrow") element.type === "arrow")
); );
export const hasText = (elements: ExcalidrawElement[]) =>
elements.some(element => element.isSelected && element.type === "text");
export function getElementAtPosition( export function getElementAtPosition(
elements: ExcalidrawElement[], elements: ExcalidrawElement[],
x: number, x: number,

3
src/scene/index.ts
View file

@ -18,6 +18,7 @@ export {
hasBackground, hasBackground,
hasStroke, hasStroke,
getElementAtPosition, getElementAtPosition,
getElementContainingPosition getElementContainingPosition,
hasText
} from "./comparisons"; } from "./comparisons";
export { createScene } from "./createScene"; export { createScene } from "./createScene";

5
src/scene/types.ts
View file

@ -7,6 +7,11 @@ export type SceneState = {
viewBackgroundColor: string | null; viewBackgroundColor: string | null;
}; };
export type SceneScroll = {
scrollX: number;
scrollY: number;
};
export interface Scene { export interface Scene {
elements: ExcalidrawTextElement[]; elements: ExcalidrawTextElement[];
} }