From 0f7d91c5c9ea2aea56c2717c4c6c2f8817eddd33 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Tue, 13 Dec 2022 18:11:25 +0200
Subject: [PATCH] remove label bounding box on shapes

---
 .../tldraw-logseq/src/lib/shapes/BoxShape.tsx | 30 +-----------------
 .../src/lib/shapes/EllipseShape.tsx           | 31 +------------------
 .../src/lib/shapes/PolygonShape.tsx           | 31 +------------------
 3 files changed, 3 insertions(+), 89 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
index 10b169036..84352959e 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
@@ -130,41 +130,13 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     const {
       props: {
         size: [w, h],
-        borderRadius,
-        label,
-        fontWeight,
+        borderRadius
       },
     } = this
 
-    const bounds = this.getBounds()
-    const labelSize = label
-      ? getTextLabelSize(
-          label,
-          { fontFamily: 'var(--ls-font-family)', fontSize: 18, lineHeight: 1, fontWeight },
-          4
-        )
-      : [0, 0]
-    const scale = Math.max(0.5, Math.min(1, w / labelSize[0], h / labelSize[1]))
-    const midPoint = Vec.mul(this.props.size, 0.5)
-
-    const offset = React.useMemo(() => {
-      return Vec.sub(midPoint, Vec.toFixed([bounds.width / 2, bounds.height / 2]))
-    }, [bounds, scale, midPoint])
-
     return (
       <g>
         <rect width={w} height={h} rx={borderRadius} ry={borderRadius} fill="transparent" />
-        {label && (
-          <rect
-            x={bounds.width / 2 - (labelSize[0] / 2) * scale + offset[0]}
-            y={bounds.height / 2 - (labelSize[1] / 2) * scale + offset[1]}
-            width={labelSize[0] * scale}
-            height={labelSize[1] * scale}
-            rx={4 * scale}
-            ry={4 * scale}
-            fill="transparent"
-          />
-        )}
       </g>
     )
   })
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
index 9d824c57f..3c898ba21 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
@@ -122,41 +122,12 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
 
   ReactIndicator = observer(() => {
     const {
-      size: [w, h],
-      label,
-      fontWeight,
+      size: [w, h]
     } = this.props
 
-    const bounds = this.getBounds()
-    const labelSize = label
-      ? getTextLabelSize(
-          label,
-          { fontFamily: 'var(--ls-font-family)', fontSize: 18, lineHeight: 1, fontWeight },
-          4
-        )
-      : [0, 0]
-    const scale = Math.max(0.5, Math.min(1, w / labelSize[0], h / labelSize[1]))
-    const midPoint = Vec.mul(this.props.size, 0.5)
-
-    const offset = React.useMemo(() => {
-      const offset = Vec.sub(midPoint, Vec.toFixed([bounds.width / 2, bounds.height / 2]))
-      return offset
-    }, [bounds, scale, midPoint])
-
     return (
       <g>
         <ellipse cx={w / 2} cy={h / 2} rx={w / 2} ry={h / 2} strokeWidth={2} fill="transparent" />
-        {label && (
-          <rect
-            x={bounds.width / 2 - (labelSize[0] / 2) * scale + offset[0]}
-            y={bounds.height / 2 - (labelSize[1] / 2) * scale + offset[1]}
-            width={labelSize[0] * scale}
-            height={labelSize[1] * scale}
-            rx={4 * scale}
-            ry={4 * scale}
-            fill="transparent"
-          />
-        )}
       </g>
     )
   })
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
index a72dc9459..a542c2bf6 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
@@ -138,44 +138,15 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
   ReactIndicator = observer(() => {
     const {
       offset: [x, y],
-      props: { label, strokeWidth, fontWeight },
+      props: { strokeWidth }
     } = this
 
-    const bounds = this.getBounds()
-    const labelSize = label
-      ? getTextLabelSize(
-          label,
-          { fontFamily: 'var(--ls-font-family)', fontSize: 18, lineHeight: 1, fontWeight },
-          4
-        )
-      : [0, 0]
-    const midPoint = [this.props.size[0] / 2, (this.props.size[1] * 2) / 3]
-    const scale = Math.max(
-      0.5,
-      Math.min(1, this.props.size[0] / (labelSize[0] * 2), this.props.size[1] / (labelSize[1] * 2))
-    )
-
-    const offset = React.useMemo(() => {
-      return Vec.sub(midPoint, Vec.toFixed([bounds.width / 2, bounds.height / 2]))
-    }, [bounds, scale, midPoint])
-
     return (
       <g>
         <polygon
           transform={`translate(${x}, ${y})`}
           points={this.getVertices(strokeWidth / 2).join()}
         />
-        {label && (
-          <rect
-            x={bounds.width / 2 - (labelSize[0] / 2) * scale + offset[0]}
-            y={bounds.height / 2 - (labelSize[1] / 2) * scale + offset[1]}
-            width={labelSize[0] * scale}
-            height={labelSize[1] * scale}
-            rx={4 * scale}
-            ry={4 * scale}
-            fill="transparent"
-          />
-        )}
       </g>
     )
   })