diff --git a/.env.development b/.env.development index 72b67ecea..397a56565 100644 --- a/.env.development +++ b/.env.development @@ -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= diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index d39b9fbb6..e49a1f465 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -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();