feat: highlight the bound shapes when selecting a line shape

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

@@ -1,16 +1,32 @@
 interface BindingIndicatorProps {
   strokeWidth: number
   size: number[]
+  mode: 'svg' | 'html'
 }
-export function BindingIndicator({ strokeWidth, size }: BindingIndicatorProps) {
-  return (
+export function BindingIndicator({ strokeWidth, size, mode }: BindingIndicatorProps) {
+  return mode === 'svg' ? (
     <rect
       className="tl-binding-indicator"
       x={strokeWidth}
       y={strokeWidth}
-      width={Math.max(0, size[0] - strokeWidth / 2)}
-      height={Math.max(0, size[1] - strokeWidth / 2)}
-      strokeWidth={16 * 2}
+      rx={2}
+      ry={2}
+      width={Math.max(0, size[0] - strokeWidth * 2)}
+      height={Math.max(0, size[1] - strokeWidth * 2)}
+      strokeWidth={strokeWidth * 4}
+    />
+  ) : (
+    <div
+      className="tl-binding-indicator"
+      style={{
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        boxShadow: '0 0 0 4px var(--tl-binding)',
+        borderRadius: 4,
+      }}
     />
   )
 }

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

@@ -44,7 +44,7 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
 
     return (
       <SVGContainer {...events} opacity={isErasing ? 0.2 : opacity}>
-        {isBinding && <BindingIndicator strokeWidth={strokeWidth} size={[w, h]} />}
+        {isBinding && <BindingIndicator mode="svg" strokeWidth={strokeWidth} size={[w, h]} />}
         <rect
           className={isSelected || !noFill ? 'tl-hitarea-fill' : 'tl-hitarea-stroke'}
           x={strokeWidth / 2}

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

@@ -4,6 +4,7 @@ import { HTMLContainer, TLComponentProps } from '@tldraw/react'
 import { TLAsset, TLImageShape, TLImageShapeProps } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { LogseqContext } from '../logseq-context'
+import { BindingIndicator } from './BindingIndicator'
 
 export interface ImageShapeProps extends TLImageShapeProps {
   type: 'image'
@@ -27,7 +28,7 @@ export class ImageShape extends TLImageShape<ImageShapeProps> {
     isAspectRatioLocked: true,
   }
 
-  ReactComponent = observer(({ events, isErasing, asset }: TLComponentProps) => {
+  ReactComponent = observer(({ events, isErasing, isBinding, asset }: TLComponentProps) => {
     const {
       props: {
         opacity,
@@ -45,6 +46,8 @@ export class ImageShape extends TLImageShape<ImageShapeProps> {
 
     return (
       <HTMLContainer {...events} opacity={isErasing ? 0.2 : opacity}>
+        {isBinding && <BindingIndicator mode="html" strokeWidth={4} size={[w, h]} />}
+
         <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
           {asset && (
             <img

tldraw/apps/tldraw-logseq/src/styles.css

@@ -829,12 +829,12 @@ html[data-theme='dark'] {
   fill: none;
   stroke: transparent;
   pointer-events: stroke;
-  stroke-width: min(100px, calc(24px * var(--tl-scale)));
+  stroke-width: min(100px, calc(12px * var(--tl-scale)));
 }
 
 .tl-hitarea-fill {
   fill: transparent;
   stroke: transparent;
   pointer-events: all;
-  stroke-width: min(100px, calc(24px * var(--tl-scale)));
+  stroke-width: min(100px, calc(12px * var(--tl-scale)));
 }

tldraw/packages/core/src/lib/TLApp/TLApp.ts

@@ -15,8 +15,9 @@ import type {
   TLSubscriptionEventInfo,
   TLStateEvents,
   TLEvents,
+  TLHandle,
 } from '../../types'
-import { KeyUtils, BoundsUtils } from '../../utils'
+import { KeyUtils, BoundsUtils, isNonNullable } from '../../utils'
 import type { TLShape, TLShapeConstructor, TLShapeModel } from '../shapes'
 import { TLApi } from '../TLApi'
 import { TLCursors } from '../TLCursors'
@@ -576,9 +577,18 @@ export class TLApp<
   @observable bindingIds?: string[]
 
   @computed get bindingShapes(): S[] | undefined {
-    const { bindingIds, currentPage } = this
+    const activeBindings = this.selectedShapesArray
+      .flatMap(s => Object.values(s.props.handles ?? {}))
+      .flatMap(h => h.bindingId)
+      .filter(isNonNullable)
+      .flatMap(binding => [
+        this.currentPage.bindings[binding]?.fromId,
+        this.currentPage.bindings[binding]?.toId,
+      ])
+      .filter(isNonNullable)
+    const bindingIds = [...(this.bindingIds ?? []), ...activeBindings]
     return bindingIds
-      ? currentPage.shapes.filter(shape => bindingIds?.includes(shape.id))
+      ? this.currentPage.shapes.filter(shape => bindingIds?.includes(shape.id))
       : undefined
   }
 

tldraw/packages/react/src/index.ts

@@ -1,8 +1,7 @@
 import type { TLOffset } from '@tldraw/core'
 export * from './types'
 export * from './lib'
-export * from './hooks/useApp'
-export * from './hooks/useRendererContext'
+export * from './hooks'
 export * from './components/HTMLContainer'
 export * from './components/SVGContainer'
 export * from './components/App'