From 476b221c51eae40e200cd33ad1550447fb40644a Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Wed, 14 Dec 2022 17:08:12 +0200
Subject: [PATCH] wip: include arrow heads to bounds

---
 .../src/lib/shapes/LineShape.tsx              | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
index 1e13a6a98d..cb0f348aca 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
@@ -1,15 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Decoration, TLLineShape, TLLineShapeProps, getComputedColor } from '@tldraw/core'
+import { Decoration, TLLineShape, TLLineShapeProps, getComputedColor, BoundsUtils, TLPolylineShape } from '@tldraw/core'
 import { SVGContainer, TLComponentProps } from '@tldraw/react'
 import Vec from '@tldraw/vec'
 import { observer } from 'mobx-react-lite'
 import * as React from 'react'
 import { Arrow } from './arrow/Arrow'
+import { getStraightArrowHeadPoints } from './arrow/arrowHelpers'
 import { getArrowPath } from './arrow/arrowHelpers'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 import { getTextLabelSize } from '@tldraw/core'
 import { LabelMask } from './text/LabelMask'
 import { TextLabel } from './text/TextLabel'
+import type { TLBounds } from '@tldraw/intersect'
 
 interface LineShapeProps extends CustomStyleProps, TLLineShapeProps {
   type: 'line'
@@ -104,13 +106,14 @@ export class LineShape extends TLLineShape<LineShapeProps> {
 
   ReactIndicator = observer(() => {
     const {
-      id,
-      decorations,
-      label,
-      strokeWidth,
-      handles: { start, end },
-    } = this.props
-    const bounds = this.getBounds()
+      props: {
+        id,
+        decorations,
+        label,
+        strokeWidth,
+        handles: { start, end },}
+    } = this
+    let bounds = this.getBounds()
     const labelSize = label ? getTextLabelSize(label, font, 4) : [0, 0]
     const midPoint = Vec.med(start.point, end.point)
     const dist = Vec.dist(start.point, end.point)
@@ -153,6 +156,32 @@ export class LineShape extends TLLineShape<LineShapeProps> {
     return withClampedStyles(this, props)
   }
 
+  getBounds = (): TLBounds => {
+    const {
+      point,
+      strokeWidth,
+      handles: { start, end },
+      decorations
+    } = this.props
+
+    let { points } = this
+
+    const arrowDist = Vec.dist(start.point, end.point)
+    const arrowHeadLength = Math.min(arrowDist / 3, strokeWidth * 16)
+
+    if (decorations?.start) {
+      const headPoints = getStraightArrowHeadPoints(start.point, end.point, arrowHeadLength)
+      points.push(headPoints.left, headPoints.right)
+    }
+
+    if (decorations?.end) {
+      const headPoints = getStraightArrowHeadPoints(end.point, start.point, arrowHeadLength)
+      points.push(headPoints.left, headPoints.right)
+    }
+
+    return BoundsUtils.translateBounds(BoundsUtils.getBoundsFromPoints(points), point)
+  }
+
   getShapeSVGJsx({ preview }: any) {
     const {
       stroke,