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 {
|
const {
|
||||||
props: {
|
props: {
|
||||||
size: [w, h],
|
size: [w, h],
|
||||||
borderRadius,
|
borderRadius
|
||||||
label,
|
|
||||||
fontWeight,
|
|
||||||
},
|
},
|
||||||
} = 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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
|
@ -122,41 +122,12 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
|
||||||
|
|
||||||
ReactIndicator = observer(() => {
|
ReactIndicator = observer(() => {
|
||||||
const {
|
const {
|
||||||
size: [w, h],
|
size: [w, h]
|
||||||
label,
|
|
||||||
fontWeight,
|
|
||||||
} = 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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue