Просмотр исходного кода

remove label bounding box on shapes

Konstantinos Kaloutas 3 лет назад
Родитель
Сommit
0f7d91c5c9

+ 1 - 29
tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx

@@ -130,41 +130,13 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
     const {
     const {
       props: {
       props: {
         size: [w, h],
         size: [w, h],
-        borderRadius,
-        label,
-        fontWeight,
+        borderRadius
       },
       },
     } = this
     } = 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 (
     return (
       <g>
       <g>
         <rect width={w} height={h} rx={borderRadius} ry={borderRadius} fill="transparent" />
         <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>
       </g>
     )
     )
   })
   })

+ 1 - 30
tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx

@@ -122,41 +122,12 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
 
 
   ReactIndicator = observer(() => {
   ReactIndicator = observer(() => {
     const {
     const {
-      size: [w, h],
-      label,
-      fontWeight,
+      size: [w, h]
     } = this.props
     } = 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 (
     return (
       <g>
       <g>
         <ellipse cx={w / 2} cy={h / 2} rx={w / 2} ry={h / 2} strokeWidth={2} fill="transparent" />
         <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>
       </g>
     )
     )
   })
   })

+ 1 - 30
tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx

@@ -138,44 +138,15 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
   ReactIndicator = observer(() => {
   ReactIndicator = observer(() => {
     const {
     const {
       offset: [x, y],
       offset: [x, y],
-      props: { label, strokeWidth, fontWeight },
+      props: { strokeWidth }
     } = this
     } = 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 (
     return (
       <g>
       <g>
         <polygon
         <polygon
           transform={`translate(${x}, ${y})`}
           transform={`translate(${x}, ${y})`}
           points={this.getVertices(strokeWidth / 2).join()}
           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>
       </g>
     )
     )
   })
   })