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

Fix wysiwyg center (#1101)

Browse Source 
This wasn't taking into account zoom properly.

The logic should probably get refactored a bit, it's not ideal that we're passing canvas, state and scale as different arguments. Also it's weird that the function that returns the center is computing the viewport translation. But I'm not motivated enough to fix it right now...

Fixes #1100
This commit is contained in:
Christopher Chedeau 2020-03-28 14:30:41 -07:00 committed by GitHub
parent aa54364bd6
commit 6056170d4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/App.tsx
View File

@ -3,6 +3,7 @@ import React from "react";
import socketIOClient from "socket.io-client";
import rough from "roughjs/bin/rough";
import { RoughCanvas } from "roughjs/bin/canvas";
import { FlooredNumber } from "../types";
import {
newElement,
@ -1128,6 +1129,9 @@ export class App extends React.Component<any, AppState> {
const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
x,
y,
this.state,
this.canvas,
window.devicePixelRatio,
);
if (snappedToCenterPosition) {
@ -1615,7 +1619,13 @@ export class App extends React.Component<any, AppState> {
const snappedToCenterPosition = event.altKey
? null
: this.getTextWysiwygSnappedToCenterPosition(x, y);
: this.getTextWysiwygSnappedToCenterPosition(
x,
y,
this.state,
this.canvas,
window.devicePixelRatio,
);
const element = newTextElement({
x: snappedToCenterPosition?.elementCenterX ?? x,
@ -2491,7 +2501,17 @@ export class App extends React.Component<any, AppState> {
}));
});
private getTextWysiwygSnappedToCenterPosition(x: number, y: number) {
private getTextWysiwygSnappedToCenterPosition(
x: number,
y: number,
state: {
scrollX: FlooredNumber;
scrollY: FlooredNumber;
zoom: number;
},
canvas: HTMLCanvasElement | null,
scale: number,
) {
const elementClickedInside = getElementContainingPosition(
globalSceneState.getAllElements(),
x,
@ -2509,14 +2529,12 @@ export class App extends React.Component<any, AppState> {
const isSnappedToCenter =
distanceToCenter < TEXT_TO_CENTER_SNAP_THRESHOLD;
if (isSnappedToCenter) {
const wysiwygX =
this.state.scrollX +
elementClickedInside.x +
elementClickedInside.width / 2;
const wysiwygY =
this.state.scrollY +
elementClickedInside.y +
elementClickedInside.height / 2;
const { x: wysiwygX, y: wysiwygY } = sceneCoordsToViewportCoords(
{ sceneX: elementCenterX, sceneY: elementCenterY },
state,
canvas,
scale,
);
return { wysiwygX, wysiwygY, elementCenterX, elementCenterY };
}
}