mirror of https://github.com/logseq/logseq
remove label bounding box on shapes
parent
1141890a8c
commit
0f7d91c5c9
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue