diff --git a/apps/docs/content/releases/next.mdx b/apps/docs/content/releases/next.mdx index ef32d4847eaa..0fb44195faf2 100644 --- a/apps/docs/content/releases/next.mdx +++ b/apps/docs/content/releases/next.mdx @@ -463,7 +463,7 @@ New APIs include `handleSocketResume()` for restoring sessions from snapshots, ` - Fix quick zoom mode (Z + Shift) cursor anchor and brush misalignment when the tldraw container is offset from the top-left of the window. ([#8520](https://github.com/tldraw/tldraw/pull/8520)) - Fix `Cmd+Shift+V` doing nothing when the clipboard contains an image; the shortcut now falls back to the regular paste flow when there is no plain-text payload. ([#8490](https://github.com/tldraw/tldraw/pull/8490)) - Fix keyboard shortcuts that change styles not marking the change as a style update, causing subsequent shapes to use the wrong defaults. ([#8599](https://github.com/tldraw/tldraw/pull/8599)) (contributed by [@danieljamesross](https://github.com/danieljamesross)) -- Fix "back to content" button flickering when both it and the "move focus to canvas" button are visible. ([#8334](https://github.com/tldraw/tldraw/pull/8334)) (contributed by [@kaneel](https://github.com/kaneel)) +- Fix "back to content" button flickering when both it and the "move focus to canvas" button are visible. ([#8334](https://github.com/tldraw/tldraw/pull/8334)) - Fix intermittent `ResizeObserver loop` browser warnings when hovering over toolbar buttons. ([#8574](https://github.com/tldraw/tldraw/pull/8574)) - Fix missing sandbox attribute on GitHub Gist embeds. ([#8403](https://github.com/tldraw/tldraw/pull/8403)) - Restrict sandbox permissions for unknown/arbitrary embeds to mitigate security risks from untrusted content. ([#8404](https://github.com/tldraw/tldraw/pull/8404)) diff --git a/apps/examples/src/examples/configuration/only-editor/MiniBoxShape.tsx b/apps/examples/src/examples/configuration/only-editor/MiniBoxShape.tsx index 14b526f89148..e6e8bb2a2348 100644 --- a/apps/examples/src/examples/configuration/only-editor/MiniBoxShape.tsx +++ b/apps/examples/src/examples/configuration/only-editor/MiniBoxShape.tsx @@ -65,6 +65,6 @@ The shape util itself. [b] The default props for our shape. These will be used when creating a new shape. [c] The component for our shape. This returns JSX and is what will be rendered on the canvas. The HtmlContainer component is a div that provides some useful styles. - [d] The indicator for our shape, this also returns JSX. This is what will be rendered - on the canvas when the shape is selected. + [d] The indicator path for our shape. This returns a Path2D that's stroked on the + canvas overlay when the shape is selected. */ diff --git a/apps/examples/src/examples/shapes/tools/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx b/apps/examples/src/examples/shapes/tools/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx index ef7b6c416ad4..4d79ca2627df 100644 --- a/apps/examples/src/examples/shapes/tools/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx +++ b/apps/examples/src/examples/shapes/tools/bounds-snapping-shape/PlayingCardShape/playing-card-util.tsx @@ -146,8 +146,9 @@ the suit in the top left. The HTMLContainer component is a helpful wrapper that exports, it's a div that comes with a css class. [8] -The indicator is the blue box that appears around the shape when it's selected. We're just returning -a rectangle with the same width and height as the shape here. +getIndicatorPath returns a Path2D for the blue box that appears around the shape when it's selected. +We're just returning a rectangle with the same width and height as the shape; tldraw strokes it onto +the canvas overlay. */ diff --git a/apps/examples/src/examples/shapes/tools/custom-config/CardShape/CardShapeUtil.tsx b/apps/examples/src/examples/shapes/tools/custom-config/CardShape/CardShapeUtil.tsx index 824103d7baed..210fb79c6b49 100644 --- a/apps/examples/src/examples/shapes/tools/custom-config/CardShape/CardShapeUtil.tsx +++ b/apps/examples/src/examples/shapes/tools/custom-config/CardShape/CardShapeUtil.tsx @@ -143,7 +143,8 @@ and button. We can get the shape's bounds using our own getGeometry method. think you're trying to select drag the shape. [7] -Indicator — used when hovering over a shape or when it's selected; must return only SVG elements here +getIndicatorPath — returns a Path2D used when hovering over the shape or when it's selected. +The path is stroked onto the canvas overlay. [8] Resize handler — called when the shape is resized. Sometimes you'll want to do some diff --git a/apps/examples/src/examples/shapes/tools/custom-shape/CustomShapeExample.tsx b/apps/examples/src/examples/shapes/tools/custom-shape/CustomShapeExample.tsx index ecb94a72a74b..a738390ec175 100644 --- a/apps/examples/src/examples/shapes/tools/custom-shape/CustomShapeExample.tsx +++ b/apps/examples/src/examples/shapes/tools/custom-shape/CustomShapeExample.tsx @@ -146,8 +146,8 @@ BaseBoxShapeUtil class instead, we wouldn't have define methods such as `getGeom lot of flexibility here, and you can use any React hooks you want and return any valid JSX. [g] - The indicator is the blue outline around a selected shape. We're just returning a rectangle with the - same width and height as the shape here. You can return any valid JSX here. + The indicator is the blue outline around a selected shape. We're returning a Path2D for a rectangle + with the same width and height as the shape. The path is stroked onto the canvas overlay. [4] This is where we render the Tldraw component with our custom shape. We're passing in our custom shape diff --git a/apps/examples/src/examples/shapes/tools/shape-with-geometry/ShapeWithGeometry.tsx b/apps/examples/src/examples/shapes/tools/shape-with-geometry/ShapeWithGeometry.tsx index 9f1ec55f52dc..07a072082845 100644 --- a/apps/examples/src/examples/shapes/tools/shape-with-geometry/ShapeWithGeometry.tsx +++ b/apps/examples/src/examples/shapes/tools/shape-with-geometry/ShapeWithGeometry.tsx @@ -155,7 +155,8 @@ method is called when the shape needs to be drawn on the canvas. The tl-svg-cont class contains some helpful styles for rendering the svg correctly. [3] -The indicator method renders the same path as a thin blue line when the shape is selected. +The getIndicatorPath method returns a Path2D for the same outline; tldraw strokes it +onto the canvas overlay as a thin blue line when the shape is selected. [4] The getHouseVertices function calculates the vertices for both the house body and the door diff --git a/apps/examples/src/examples/shapes/tools/shape-with-onClick/ClickableShapeUtil.tsx b/apps/examples/src/examples/shapes/tools/shape-with-onClick/ClickableShapeUtil.tsx index 523692f5b130..cb6ca9a0392b 100644 --- a/apps/examples/src/examples/shapes/tools/shape-with-onClick/ClickableShapeUtil.tsx +++ b/apps/examples/src/examples/shapes/tools/shape-with-onClick/ClickableShapeUtil.tsx @@ -109,5 +109,6 @@ The component renders the click count. We don't add any React event handlers her click handling is done entirely through ShapeUtil.onClick above. [5] -The indicator is the blue outline shown when the shape is selected. +getIndicatorPath returns a Path2D that tldraw strokes onto the canvas overlay as the +blue outline when the shape is selected. */ diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css index 8d2de5d00f6c..cf468d080e5f 100644 --- a/packages/tldraw/src/lib/ui.css +++ b/packages/tldraw/src/lib/ui.css @@ -1418,20 +1418,20 @@ tldraw? probably. display: none; } .tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) { - border-right: 1px solid var(--color-divider); + border-right: 1px solid var(--tl-color-divider); margin-right: 2px; } .tlui-column.tlui-main-toolbar__group:not( :nth-last-child(-n + 1 of [data-toolbar-visible='true']) ) { - border-bottom: 1px solid var(--color-divider); + border-bottom: 1px solid var(--tl-color-divider); margin-bottom: 2px; } .tlui-grid.tlui-main-toolbar__group { grid-column: 1 / span 4; } .tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) { - border-bottom: 1px solid var(--color-divider); + border-bottom: 1px solid var(--tl-color-divider); margin-bottom: 2px; }