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

Show move and resize cursors on hover (#280)

Browse source 
* Change to move cursor on hover

* Show resize handlers on hover
This commit is contained in:
Guillermo Peralta Scura 2020-01-08 23:56:35 -03:00 • committed by Christopher Chedeau
parent a16cd3a34f
commit 4a044d3ace
4 changed files with 104 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/index.tsx
View file

@ -53,6 +53,7 @@ import { PanelCanvas } from "./components/panels/PanelCanvas";
import { Panel } from "./components/Panel";
import "./styles.scss";
import { getElementWithResizeHandler } from "./element/resizeTest";
const { elements } = createScene();
const { history } = createHistory();
@ -99,6 +100,15 @@ let lastCanvasHeight = -1;
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> {
canvas: HTMLCanvasElement | null = null;
rc: RoughCanvas | null = null;
@ -591,9 +601,7 @@ export class App extends React.Component<{}, AppState> {
onContextMenu={e => {
e.preventDefault();
const x =
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
const { x, y } = viewportCoordsToSceneCoords(e, this.state);
const element = getElementAtPosition(elements, x, y);
if (!element) {
@ -670,9 +678,8 @@ export class App extends React.Component<{}, AppState> {
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 { x, y } = viewportCoordsToSceneCoords(e, this.state);
const element = newElement(
this.state.elementType,
x,
@ -684,28 +691,23 @@ export class App extends React.Component<{}, AppState> {
1,
100
);
let resizeHandle: ReturnType<typeof resizeTest> = false;
type ResizeTestType = ReturnType<typeof resizeTest>;
let resizeHandle: ResizeTestType = 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
});
});
const resizeElement = getElementWithResizeHandler(
elements,
{ x, y },
this.state
);
this.setState({
resizingElement: resizeElement ? resizeElement : null
resizingElement: resizeElement ? resizeElement.element : null
});
if (resizeElement) {
resizeHandle = resizeTest(resizeElement, x, y, {
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
viewBackgroundColor: this.state.viewBackgroundColor
});
resizeHandle = resizeElement.resizeHandle;
document.documentElement.style.cursor = `${resizeHandle}-resize`;
isResizingElements = true;
} else {
@ -714,7 +716,7 @@ export class App extends React.Component<{}, AppState> {
// If we click on something
if (hitElement) {
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
} else {
// We unselect every other elements unless shift is pressed
@ -829,10 +831,8 @@ export class App extends React.Component<{}, AppState> {
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;
const { x, y } = viewportCoordsToSceneCoords(e, this.state);
selectedElements.forEach(element => {
switch (resizeHandle) {
case "nw":
@ -904,10 +904,8 @@ export class App extends React.Component<{}, AppState> {
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;
const { x, y } = viewportCoordsToSceneCoords(e, this.state);
selectedElements.forEach(element => {
element.x += x - lastX;
element.y += y - lastY;
@ -991,9 +989,8 @@ export class App extends React.Component<{}, AppState> {
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;
const { x, y } = viewportCoordsToSceneCoords(e, this.state);
const elementAtPosition = getElementAtPosition(elements, x, y);
const element = newElement(
@ -1066,6 +1063,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>
);