Fix: Arrow label and indicator (#7746)

* fix: label focused state

* fix: remove bounds check on double click

* fix: remove label mask from arrow indicator

* fix: label focused state

* fix: remove bounds check on double click

* fix: remove label mask from arrow indicator

* fix: dom validation warning

* fix: hide indicators while editing

* fix: tweak padding of arrow label

Co-authored-by: Tienson Qin <[email protected]>

tldraw/apps/tldraw-logseq/src/components/Tooltip/Tooltip.tsx

@@ -5,14 +5,13 @@ export interface TooltipProps extends ReactTooltip.TooltipContentProps {
   side?: Side
   sideOffset?: number
   content?: React.ReactNode
-  asChild?: boolean
 }
 
-export function Tooltip({ side, content, asChild = true, sideOffset = 10, ...rest }: TooltipProps) {
+export function Tooltip({ side, content, sideOffset = 10, ...rest }: TooltipProps) {
   return content ? (
     <ReactTooltip.Provider delayDuration={300}>
       <ReactTooltip.Root>
-        <ReactTooltip.Trigger asChild={asChild}>{rest.children}</ReactTooltip.Trigger>
+        <ReactTooltip.Trigger asChild>{rest.children}</ReactTooltip.Trigger>
         <ReactTooltip.Portal>
           <ReactTooltip.Content
             className="tl-tooltip-content"

tldraw/apps/tldraw-logseq/src/components/inputs/ToggleInput.tsx

@@ -17,14 +17,16 @@ export function ToggleInput({
   ...rest
 }: ToggleInputProps) {
   return (
-    <Tooltip content={tooltip} asChild={false}>
-      <Toggle.Root
-        {...rest}
-        data-toggle={toggle}
-        className={'tl-toggle-input' + (className ? ' ' + className : '')}
-        pressed={pressed}
-        onPressedChange={onPressedChange}
-      ></Toggle.Root>
+    <Tooltip content={tooltip}>
+      <div className="inline-block">
+        <Toggle.Root
+          {...rest}
+          data-toggle={toggle}
+          className={'tl-toggle-input' + (className ? ' ' + className : '')}
+          pressed={pressed}
+          onPressedChange={onPressedChange}
+        ></Toggle.Root>
+      </div>
     </Tooltip>
   )
 }

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

@@ -59,7 +59,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       fontWeight,
       id,
     } = this.props
-    const labelSize = label || isEditing ? getTextLabelSize(label, font, 4) : [0, 0]
+    const labelSize = label || isEditing ? getTextLabelSize(label, font, 6) : [0, 0]
     const midPoint = Vec.med(start.point, end.point)
     const dist = Vec.dist(start.point, end.point)
     const scale = Math.max(
@@ -102,7 +102,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
     )
   })
 
-  ReactIndicator = observer(() => {
+  ReactIndicator = observer(({ isEditing }: TLComponentProps) => {
     const {
       id,
       decorations,
@@ -111,7 +111,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
       handles: { start, end },
     } = this.props
     const bounds = this.getBounds()
-    const labelSize = label ? getTextLabelSize(label, font, 4) : [0, 0]
+    const labelSize = label ? getTextLabelSize(label, font, 6) : [0, 0]
     const midPoint = Vec.med(start.point, end.point)
     const dist = Vec.dist(start.point, end.point)
     const scale = Math.max(
@@ -123,7 +123,6 @@ export class LineShape extends TLLineShape<LineShapeProps> {
     }, [bounds, scale, midPoint])
     return (
       <g>
-        <LabelMask id={id} bounds={bounds} labelSize={labelSize} offset={offset} scale={scale} />
         <path
           mask={label ? `url(#${id}_clip)` : ``}
           d={getArrowPath(
@@ -134,7 +133,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
             decorations?.end
           )}
         />
-        {label && (
+        {label && !isEditing && (
           <rect
             x={bounds.width / 2 - (labelSize[0] / 2) * scale + offset[0]}
             y={bounds.height / 2 - (labelSize[1] / 2) * scale + offset[1]}

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

@@ -237,12 +237,12 @@ export class TextShape extends TLTextShape<TextShapeProps> {
     this.onResetBounds()
   }
 
-  ReactIndicator = observer(() => {
+  ReactIndicator = observer(({ isEditing }: TLComponentProps) => {
     const {
       props: { borderRadius },
       bounds,
     } = this
-    return (
+    return isEditing ? null : (
       <rect
         width={bounds.width}
         height={bounds.height}

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

@@ -409,6 +409,12 @@ button.tl-select-input-trigger {
   backface-visibility: hidden;
   pointer-events: all;
   user-select: text;
+
+  &:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
 }
 
 .tl-stroke-hitarea {
@@ -471,6 +477,8 @@ button.tl-select-input-trigger {
   &:focus {
     outline: none;
     border: none;
+    box-shadow: none;
+    background-color: hsla(0, 0%, 50%, 0.15) !important;
   }
 }
 

tldraw/packages/core/src/lib/tools/TLSelectTool/states/IdleState.ts

@@ -127,8 +127,6 @@ export class IdleState<
     const selectedShape = this.app.selectedShapesArray[0]
     if (!selectedShape.canEdit) return
 
-    if (!PointUtils.pointInBounds(this.app.inputs.currentPoint, selectedShape.bounds)) return
-
     switch (info.type) {
       case TLTargetType.Shape: {
         this.tool.transition('editingShape', info)

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

@@ -165,9 +165,9 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                 isSelected={true}
               />
             ))}
-          {hoveredShapes.map(s => (
-            <Indicator key={'hovered_indicator_' + s.id} shape={s} />
-          ))}
+          {hoveredShapes.map(
+            s => s !== editingShape && <Indicator key={'hovered_indicator_' + s.id} shape={s} />
+          )}
           {singleSelectedShape && components.BacklinksCount && (
             <BacklinksCountContainer
               hidden={false}