chore: Add debug flag to enable text container bounding box (#6296)

* debug: Add debug flag to enable text container bounding box

* newline

* fix
This commit is contained in:
Aakansha Doshi 2023-03-03 18:01:55 +05:30 committed by GitHub
parent 05ffce62ef
commit 9f9666110e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 0 deletions

View File

@ -22,3 +22,8 @@ REACT_APP_DEV_ENABLE_SW=
REACT_APP_DEV_DISABLE_LIVE_RELOAD=
FAST_REFRESH=false
#Debug flags
# To enable bounding box for text containers
REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=

View File

@ -14,6 +14,7 @@ import {
isFreeDrawElement,
isInitializedImageElement,
isArrowElement,
hasBoundTextElement,
} from "../element/typeChecks";
import {
getDiamondPoints,
@ -41,7 +42,10 @@ import { getStroke, StrokeOptions } from "perfect-freehand";
import {
getApproxLineHeight,
getBoundTextElement,
getContainerCoords,
getContainerElement,
getMaxContainerHeight,
getMaxContainerWidth,
} from "../element/textElement";
import { LinearElementEditor } from "../element/linearElementEditor";
@ -811,6 +815,21 @@ const drawElementFromCanvas = (
elementWithCanvas.canvas!.width / elementWithCanvas.canvasZoom,
elementWithCanvas.canvas!.height / elementWithCanvas.canvasZoom,
);
if (
process.env.REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX &&
hasBoundTextElement(element)
) {
const coords = getContainerCoords(element);
context.strokeStyle = "#c92a2a";
context.lineWidth = 3;
context.strokeRect(
(coords.x + renderConfig.scrollX) * window.devicePixelRatio,
(coords.y + renderConfig.scrollY) * window.devicePixelRatio,
getMaxContainerWidth(element) * window.devicePixelRatio,
getMaxContainerHeight(element) * window.devicePixelRatio,
);
}
}
context.restore();