Skip to content

Commit 2cd18d6

Browse files
authored
docs(examples): update stale indicator comments after OverlayUtil migration (tldraw#8727)
## Summary After tldraw#8633 migrated shape indicators from JSX/SVG to canvas-rendered Path2Ds via `getIndicatorPath`, several example files still had explanatory comments describing indicators as "returning JSX". The code is correct; only the prose was stale. This PR updates the comments in: - `configuration/only-editor/MiniBoxShape.tsx` - `shapes/tools/custom-shape/CustomShapeExample.tsx` - `shapes/tools/shape-with-geometry/ShapeWithGeometry.tsx` - `shapes/tools/shape-with-onClick/ClickableShapeUtil.tsx` - `shapes/tools/custom-config/CardShape/CardShapeUtil.tsx` - `shapes/tools/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx` ### Change type - [ ] bugfix - [ ] improvement - [ ] feature - [ ] api - [x] other ### Release notes - Docs only — no release note needed.
1 parent 03c4c61 commit 2cd18d6

6 files changed

Lines changed: 13 additions & 9 deletions

File tree

apps/examples/src/examples/configuration/only-editor/MiniBoxShape.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,6 @@ The shape util itself.
6565
[b] The default props for our shape. These will be used when creating a new shape.
6666
[c] The component for our shape. This returns JSX and is what will be rendered on the
6767
canvas. The HtmlContainer component is a div that provides some useful styles.
68-
[d] The indicator for our shape, this also returns JSX. This is what will be rendered
69-
on the canvas when the shape is selected.
68+
[d] The indicator path for our shape. This returns a Path2D that's stroked on the
69+
canvas overlay when the shape is selected.
7070
*/

apps/examples/src/examples/shapes/tools/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,9 @@ the suit in the top left. The HTMLContainer component is a helpful wrapper that
146146
exports, it's a div that comes with a css class.
147147
148148
[8]
149-
The indicator is the blue box that appears around the shape when it's selected. We're just returning
150-
a rectangle with the same width and height as the shape here.
149+
getIndicatorPath returns a Path2D for the blue box that appears around the shape when it's selected.
150+
We're just returning a rectangle with the same width and height as the shape; tldraw strokes it onto
151+
the canvas overlay.
151152
152153
153154
*/

apps/examples/src/examples/shapes/tools/custom-config/CardShape/CardShapeUtil.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ and button. We can get the shape's bounds using our own getGeometry method.
143143
think you're trying to select drag the shape.
144144
145145
[7]
146-
Indicator — used when hovering over a shape or when it's selected; must return only SVG elements here
146+
getIndicatorPath — returns a Path2D used when hovering over the shape or when it's selected.
147+
The path is stroked onto the canvas overlay.
147148
148149
[8]
149150
Resize handler — called when the shape is resized. Sometimes you'll want to do some

apps/examples/src/examples/shapes/tools/custom-shape/CustomShapeExample.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,8 @@ BaseBoxShapeUtil class instead, we wouldn't have define methods such as `getGeom
146146
lot of flexibility here, and you can use any React hooks you want and return any valid JSX.
147147
148148
[g]
149-
The indicator is the blue outline around a selected shape. We're just returning a rectangle with the
150-
same width and height as the shape here. You can return any valid JSX here.
149+
The indicator is the blue outline around a selected shape. We're returning a Path2D for a rectangle
150+
with the same width and height as the shape. The path is stroked onto the canvas overlay.
151151
152152
[4]
153153
This is where we render the Tldraw component with our custom shape. We're passing in our custom shape

apps/examples/src/examples/shapes/tools/shape-with-geometry/ShapeWithGeometry.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,8 @@ method is called when the shape needs to be drawn on the canvas. The tl-svg-cont
155155
class contains some helpful styles for rendering the svg correctly.
156156
157157
[3]
158-
The indicator method renders the same path as a thin blue line when the shape is selected.
158+
The getIndicatorPath method returns a Path2D for the same outline; tldraw strokes it
159+
onto the canvas overlay as a thin blue line when the shape is selected.
159160
160161
[4]
161162
The getHouseVertices function calculates the vertices for both the house body and the door

apps/examples/src/examples/shapes/tools/shape-with-onClick/ClickableShapeUtil.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,5 +109,6 @@ The component renders the click count. We don't add any React event handlers her
109109
click handling is done entirely through ShapeUtil.onClick above.
110110
111111
[5]
112-
The indicator is the blue outline shown when the shape is selected.
112+
getIndicatorPath returns a Path2D that tldraw strokes onto the canvas overlay as the
113+
blue outline when the shape is selected.
113114
*/

0 commit comments

Comments
 (0)