fix: show shape indicator on hovering

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -499,10 +499,6 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
 
   ReactIndicator = observer(() => {
     const bounds = this.getBounds()
-    const app = useApp<Shape>()
-    if (app.selectedShapesArray.length === 1) {
-      return null
-    }
     return <rect width={bounds.width} height={bounds.height} fill="transparent" rx={8} ry={8} />
   })
 

tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -5,16 +5,16 @@ import { observer } from 'mobx-react-lite'
 import * as React from 'react'
 import { NOOP } from '../../constants'
 import {
-  useRendererContext,
   useApp,
-  useStylesheet,
+  useCanvasEvents,
+  useCursor,
+  useGestureEvents,
   usePreventNavigation,
+  useRendererContext,
   useResizeObserver,
-  useGestureEvents,
-  useCursor,
-  useZoom,
-  useCanvasEvents,
   useRestoreCamera,
+  useStylesheet,
+  useZoom,
 } from '../../hooks'
 import { useKeyboardEvents } from '../../hooks/useKeyboardEvents'
 import type { TLReactShape } from '../../lib'
@@ -22,7 +22,7 @@ import { Container } from '../Container'
 import { ContextBarContainer } from '../ContextBarContainer'
 import { HTMLLayer } from '../HTMLLayer'
 import { Indicator } from '../Indicator'
-import { ReferencesCountContainer } from '../ReferencesCountContainer'
+import { ReferencesContainer } from '../ReferencesCountContainer'
 import { SelectionDetailContainer } from '../SelectionDetailContainer'
 import { Shape } from '../Shape'
 import { SVGContainer } from '../SVGContainer'
@@ -110,6 +110,8 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
   const erasingShapesSet = React.useMemo(() => new Set(erasingShapes || []), [erasingShapes])
   const singleSelectedShape = selectedShapes?.length === 1 ? selectedShapes[0] : undefined
 
+  const selectedOrHooveredShape = hoveredShape || singleSelectedShape
+
   return (
     <div ref={rContainer} className={`tl-container ${className ?? ''}`}>
       <div tabIndex={-1} className="tl-absolute tl-canvas" {...events}>
@@ -152,9 +154,16 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                 isSelected={true}
               />
             ))}
-          {hoveredShape && app.isInAny('creating') && (
+          {hoveredShape && (
             <Indicator key={'hovered_indicator_' + hoveredShape.id} shape={hoveredShape} />
           )}
+          {selectedOrHooveredShape && components.ReferencesCount && (
+            <ReferencesContainer
+              hidden={false}
+              bounds={selectedOrHooveredShape.bounds}
+              shape={selectedOrHooveredShape}
+            />
+          )}
           {brush && components.Brush && <components.Brush bounds={brush} />}
           {selectedShapes && selectionBounds && (
             <>
@@ -172,13 +181,6 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                   />
                 </Container>
               )}
-              {showSelection && singleSelectedShape && components.ReferencesCount && (
-                <ReferencesCountContainer
-                  hidden={false}
-                  bounds={singleSelectedShape.bounds}
-                  shape={singleSelectedShape}
-                />
-              )}
               {showHandles && onlySelectedShapeWithHandles && components.Handle && (
                 <Container
                   data-type="onlySelectedShapeWithHandles"

tldraw/packages/react/src/components/ReferencesCountContainer/ReferencesCountContainer.tsx

@@ -1,6 +1,6 @@
 import type { TLBounds } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
-import { useRendererContext } from '../../hooks'
+import { useApp, useRendererContext } from '../../hooks'
 import type { TLReactShape } from '../../lib'
 import { Container } from '../Container'
 import { HTMLContainer } from '../HTMLContainer'
@@ -12,7 +12,7 @@ export interface TLReferencesCountContainerProps<S extends TLReactShape> {
 }
 
 // backlinks
-export const ReferencesCountContainer = observer(function ReferencesCountContainer<
+export const ReferencesContainer = observer(function ReferencesCountContainer<
   S extends TLReactShape
 >({ bounds, hidden, shape }: TLReferencesCountContainerProps<S>) {
   const {
@@ -22,17 +22,16 @@ export const ReferencesCountContainer = observer(function ReferencesCountContain
     components: { ReferencesCount },
   } = useRendererContext()
 
+  const app = useApp<S>()
+
   if (!ReferencesCount) throw Error('Expected a ReferencesCount component.')
 
   const stop: React.EventHandler<any> = e => e.stopPropagation()
 
-  const rounded = bounds.height * zoom < 50
+  const rounded = bounds.height * zoom < 50 || !app.selectedShapesArray.includes(shape)
 
   return (
-    <Container
-      bounds={bounds}
-      className="tl-references-count-container"
-    >
+    <Container bounds={bounds} className="tl-references-count-container">
       <HTMLContainer>
         <span
           style={{