fix: make backlinks display nicer on small shapes

src/main/frontend/components/whiteboard.cljs

@@ -70,7 +70,7 @@
     [:div.inline-block.dropdown-anchor {:ref anchor-ref}
      label
      (if portal?
-       ;; FIXME: refactor the following code 
+       ;; FIXME: refactor the following code ...
        (ui/portal
         [:div.fixed.shadow-lg.color-level.px-2.rounded-lg.transition.md:w-64.lg:w-128.overflow-auto
          {:ref (juxt content-ref click-outside-ref)
@@ -108,7 +108,6 @@
      children open? #(set-open-flag 0) portal?)))
 
 ;; TODO: move to frontend.components.reference
-;; TODO: reactivity when ref count change
 (rum/defc references-count < rum/reactive db-mixins/query
   "Shows a references count for any block or page.
    When clicked, a dropdown menu will show the reference details"

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -42,7 +42,7 @@ export const contextBarActionTypes = [
   'LogseqPortalViewMode',
   'ArrowMode',
   'OpenPage',
-  'References',
+  'Links',
 ] as const
 
 type ContextBarActionType = typeof contextBarActionTypes[number]
@@ -51,7 +51,7 @@ const singleShapeActions: ContextBarActionType[] = [
   'YoutubeLink',
   'IFrameSource',
   'OpenPage',
-  'References',
+  'Links',
 ]
 
 const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
@@ -66,20 +66,20 @@ export const shapeMapping: Record<ShapeType, ContextBarActionType[]> = {
     'ScaleLevel',
     'OpenPage',
     'AutoResizing',
-    'References',
+    'Links',
   ],
-  youtube: ['YoutubeLink', 'References'],
-  iframe: ['IFrameSource', 'References'],
-  box: ['Swatch', 'NoFill', 'StrokeType', 'References'],
-  ellipse: ['Swatch', 'NoFill', 'StrokeType', 'References'],
-  polygon: ['Swatch', 'NoFill', 'StrokeType', 'References'],
-  line: ['Edit', 'Swatch', 'ArrowMode', 'References'],
-  pencil: ['Swatch', 'References'],
-  highlighter: ['Swatch', 'References'],
-  text: ['Edit', 'Swatch', 'ScaleLevel', 'AutoResizing', 'TextStyle', 'References'],
-  html: ['ScaleLevel', 'AutoResizing', 'References'],
-  image: ['References'],
-  video: ['References'],
+  youtube: ['YoutubeLink', 'Links'],
+  iframe: ['IFrameSource', 'Links'],
+  box: ['Swatch', 'NoFill', 'StrokeType', 'Links'],
+  ellipse: ['Swatch', 'NoFill', 'StrokeType', 'Links'],
+  polygon: ['Swatch', 'NoFill', 'StrokeType', 'Links'],
+  line: ['Edit', 'Swatch', 'ArrowMode', 'Links'],
+  pencil: ['Swatch', 'Links'],
+  highlighter: ['Swatch', 'Links'],
+  text: ['Edit', 'Swatch', 'ScaleLevel', 'AutoResizing', 'TextStyle', 'Links'],
+  html: ['ScaleLevel', 'AutoResizing', 'Links'],
+  image: ['Links'],
+  video: ['Links'],
 }
 
 export const withFillShapes = Object.entries(shapeMapping)
@@ -500,7 +500,7 @@ const TextStyleAction = observer(() => {
   )
 })
 
-const ReferencesAction = observer(() => {
+const LinksAction = observer(() => {
   const app = useApp<Shape>()
   const shape = app.selectedShapesArray[0]
 
@@ -525,14 +525,14 @@ const ReferencesAction = observer(() => {
         className="px-2 tl-button"
         pressed={show}
         onPressedChange={s => setShow(s)}
-        title="Open References and Links"
+        title="Open References & Links"
       >
         <TablerIcon name="link" />
-        {hasLinks && <div className="tl-shape-references-count">{shape.props.refs?.length}</div>}
+        {hasLinks && <div className="tl-shape-links-count">{shape.props.refs?.length}</div>}
       </ToggleInput>
 
       {show && (
-        <div className="tl-shape-references-panel">
+        <div className="tl-shape-links-panel">
           <TextInput
             title="Website Url"
             className="tl-iframe-src"
@@ -553,7 +553,7 @@ const ReferencesAction = observer(() => {
           </div>
           {shape.props.refs?.map((ref, i) => {
             return (
-              <div className="tl-shape-references-panel-item">
+              <div className="tl-shape-links-panel-item">
                 <div>{ref}</div>
                 <div className="flex-1" />
                 <Button
@@ -593,7 +593,7 @@ contextBarActionMapping.set('Swatch', SwatchAction)
 contextBarActionMapping.set('StrokeType', StrokeTypeAction)
 contextBarActionMapping.set('ArrowMode', ArrowModeAction)
 contextBarActionMapping.set('TextStyle', TextStyleAction)
-contextBarActionMapping.set('References', ReferencesAction)
+contextBarActionMapping.set('Links', LinksAction)
 
 const getContextBarActionTypes = (type: ShapeType) => {
   return (shapeMapping[type] ?? []).filter(isNonNullable)

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

@@ -988,19 +988,41 @@ html[data-theme='dark'] {
   }
 }
 
-.tl-reference-count-container {
-  @apply inline-flex items-center justify-center p-1;
+.tl-references-count-container {
+  z-index: 10003;
+}
+
+.tl-references-count {
+  @apply inline-flex items-center justify-center p-1 transition-all;
   background-color: var(--color-selectedFill);
+
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
+
+
+  &:hover, &.open {
+    @apply p-1.5;
+  }
+}
+
+.tl-references-count-rounded {
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  transform: translate(4px, -6px);
+
+  &:hover, &.open {
+    height: 36px;
+    width: 36px;
+  }
 }
 
-.tl-shape-references-count {
+.tl-shape-links-count {
   @apply px-1;
   background-color: var(--ls-page-properties-background-color);
 }
 
-.tl-shape-references-panel {
+.tl-shape-links-panel {
   @apply absolute shadow-lg rounded-lg p-3;
   width: 320px;
   transform: translate(20px, -8px);
@@ -1009,7 +1031,7 @@ html[data-theme='dark'] {
   background-color: var(--ls-secondary-background-color);
 }
 
-.tl-shape-references-panel-item {
+.tl-shape-links-panel-item {
   @apply rounded py-1 px-4 flex items-center justify-center gap-1;
   color: var(--color-text);
   background-color: var(--ls-tertiary-background-color);

tldraw/packages/core/src/lib/shapes/TLLineShape/TLLineShape.tsx

@@ -21,6 +21,9 @@ export class TLLineShape<
     makeObservable(this)
   }
 
+  hideResizeHandles = true
+  hideRotateHandle = true
+
   static id = 'line'
 
   static defaultProps: TLLineShapeProps = {

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

@@ -11,10 +11,14 @@ export interface TLReferencesCountContainerProps<S extends TLReactShape> {
   shape: S
 }
 
+// backlinks
 export const ReferencesCountContainer = observer(function ReferencesCountContainer<
   S extends TLReactShape
 >({ bounds, hidden, shape }: TLReferencesCountContainerProps<S>) {
   const {
+    viewport: {
+      camera: { zoom },
+    },
     components: { ReferencesCount },
   } = useRendererContext()
 
@@ -22,12 +26,12 @@ export const ReferencesCountContainer = observer(function ReferencesCountContain
 
   const stop: React.EventHandler<any> = e => e.stopPropagation()
 
+  const rounded = bounds.height * zoom < 50
+
   return (
     <Container
-      style={{
-        zIndex: 10003,
-      }}
       bounds={bounds}
+      className="tl-references-count-container"
       aria-label="references-count-container"
     >
       <HTMLContainer>
@@ -37,12 +41,17 @@ export const ReferencesCountContainer = observer(function ReferencesCountContain
             left: '100%',
             pointerEvents: 'all',
             transformOrigin: 'left top',
-            transform: 'translateY(6px)',
+            transform: 'translateY(6px) scale(var(--tl-scale))',
           }}
           onPointerDown={stop}
           onWheelCapture={stop}
+          title="Shape Backlinks"
         >
-          <ReferencesCount className="tl-reference-count-container" id={shape.id} shape={shape} />
+          <ReferencesCount
+            className={'tl-references-count ' + (rounded ? 'tl-references-count-rounded' : '')}
+            id={shape.id}
+            shape={shape}
+          />
         </span>
       </HTMLContainer>
     </Container>