greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

remove label bounding box on shapes

pull/7668/head
Konstantinos Kaloutas 2022-12-13 18:11:25 +02:00 committed by Tienson Qin
parent 1141890a8c
commit 0f7d91c5c9
3 changed files with 3 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
tldraw/apps/tldraw-logseq/src/lib/shapes/BoxShape.tsx
View File

@ -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>
)
})

31
tldraw/apps/tldraw-logseq/src/lib/shapes/EllipseShape.tsx
View File

@ -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>
)
})

31
tldraw/apps/tldraw-logseq/src/lib/shapes/PolygonShape.tsx
View File

@ -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>
)
})