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

style: run prettier

pull/9192/head^2
Konstantinos Kaloutas 2023-04-18 17:12:32 +03:00 committed by Tienson Qin
parent f5673da476
commit 78c3427923
20 changed files with 395 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

323
tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
View File

@ -56,77 +56,81 @@ export const ContextMenu = observer(function ContextMenu({
tabIndex={-1}
>
<div>
{app.selectedShapes?.size > 1 && !app.readOnly && app.selectedShapesArray?.some(s => !s.props.isLocked) && (
<>
<ReactContextMenu.Item>
<div className="tl-menu-button-row pb-0">
<Button
tooltip="Align left"
onClick={() => runAndTransition(() => app.align(AlignType.Left))}
>
<TablerIcon name="layout-align-left" />
</Button>
<Button
tooltip="Align center horizontally"
onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}
>
<TablerIcon name="layout-align-center" />
</Button>
<Button
tooltip="Align right"
onClick={() => runAndTransition(() => app.align(AlignType.Right))}
>
<TablerIcon name="layout-align-right" />
</Button>
<Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button
tooltip="Distribute horizontally"
onClick={() =>
runAndTransition(() => app.distribute(DistributeType.Horizontal))
}
>
<TablerIcon name="layout-distribute-vertical" />
</Button>
</div>
<div className="tl-menu-button-row pt-0">
<Button
tooltip="Align top"
onClick={() => runAndTransition(() => app.align(AlignType.Top))}
>
<TablerIcon name="layout-align-top" />
</Button>
<Button
tooltip="Align center vertically"
onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}
>
<TablerIcon name="layout-align-middle" />
</Button>
<Button
tooltip="Align bottom"
onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}
>
<TablerIcon name="layout-align-bottom" />
</Button>
<Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button
tooltip="Distribute vertically"
onClick={() => runAndTransition(() => app.distribute(DistributeType.Vertical))}
>
<TablerIcon name="layout-distribute-horizontal" />
</Button>
</div>
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.packIntoRectangle)}
>
<TablerIcon className="tl-menu-icon" name="layout-grid" />
Pack into rectangle
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" />
</>
)}
{app.selectedShapes?.size > 1 &&
!app.readOnly &&
app.selectedShapesArray?.some(s => !s.props.isLocked) && (
<>
<ReactContextMenu.Item>
<div className="tl-menu-button-row pb-0">
<Button
tooltip="Align left"
onClick={() => runAndTransition(() => app.align(AlignType.Left))}
>
<TablerIcon name="layout-align-left" />
</Button>
<Button
tooltip="Align center horizontally"
onClick={() => runAndTransition(() => app.align(AlignType.CenterHorizontal))}
>
<TablerIcon name="layout-align-center" />
</Button>
<Button
tooltip="Align right"
onClick={() => runAndTransition(() => app.align(AlignType.Right))}
>
<TablerIcon name="layout-align-right" />
</Button>
<Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button
tooltip="Distribute horizontally"
onClick={() =>
runAndTransition(() => app.distribute(DistributeType.Horizontal))
}
>
<TablerIcon name="layout-distribute-vertical" />
</Button>
</div>
<div className="tl-menu-button-row pt-0">
<Button
tooltip="Align top"
onClick={() => runAndTransition(() => app.align(AlignType.Top))}
>
<TablerIcon name="layout-align-top" />
</Button>
<Button
tooltip="Align center vertically"
onClick={() => runAndTransition(() => app.align(AlignType.CenterVertical))}
>
<TablerIcon name="layout-align-middle" />
</Button>
<Button
tooltip="Align bottom"
onClick={() => runAndTransition(() => app.align(AlignType.Bottom))}
>
<TablerIcon name="layout-align-bottom" />
</Button>
<Separator.Root className="tl-toolbar-separator" orientation="vertical" />
<Button
tooltip="Distribute vertically"
onClick={() =>
runAndTransition(() => app.distribute(DistributeType.Vertical))
}
>
<TablerIcon name="layout-distribute-horizontal" />
</Button>
</div>
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.packIntoRectangle)}
>
<TablerIcon className="tl-menu-icon" name="layout-grid" />
Pack into rectangle
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" />
</>
)}
{app.selectedShapes?.size > 0 && (
<>
<ReactContextMenu.Item
@ -162,20 +166,21 @@ export const ContextMenu = observer(function ContextMenu({
</div>
</ReactContextMenu.Item>
)}
{app.selectedShapesArray.length > 1 && app.selectedShapesArray?.some(s => !s.props.isLocked) && (
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.api.doGroup)}
>
<TablerIcon className="tl-menu-icon" name="group" />
Group
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>{MOD_KEY}</code> <code>G</code>
</span>
</div>
</ReactContextMenu.Item>
)}
{app.selectedShapesArray.length > 1 &&
app.selectedShapesArray?.some(s => !s.props.isLocked) && (
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.api.doGroup)}
>
<TablerIcon className="tl-menu-icon" name="group" />
Group
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>{MOD_KEY}</code> <code>G</code>
</span>
</div>
</ReactContextMenu.Item>
)}
<ReactContextMenu.Separator className="menu-separator" />
</>
)}
@ -295,83 +300,85 @@ export const ContextMenu = observer(function ContextMenu({
Unlock
</ReactContextMenu.Item>
)}
{app.selectedShapes?.size > 0 && !app.readOnly && app.selectedShapesArray?.some(s => !s.props.isLocked) && (
<>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.api.deleteShapes)}
>
<TablerIcon className="tl-menu-icon" name="backspace" />
Delete
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>Del</code>
</span>
</div>
</ReactContextMenu.Item>
{app.selectedShapes?.size > 1 && !app.readOnly && (
<>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.flipHorizontal)}
>
<TablerIcon className="tl-menu-icon" name="flip-horizontal" />
Flip horizontally
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.flipVertical)}
>
<TablerIcon className="tl-menu-icon" name="flip-vertical" />
Flip vertically
</ReactContextMenu.Item>
</>
)}
{!app.readOnly && (
<>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.bringToFront)}
>
Move to front
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>⇧</code> <code>]</code>
</span>
</div>
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.sendToBack)}
>
Move to back
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>⇧</code> <code>[</code>
</span>
</div>
</ReactContextMenu.Item>
</>
)}
{developerMode && (
{app.selectedShapes?.size > 0 &&
!app.readOnly &&
app.selectedShapesArray?.some(s => !s.props.isLocked) && (
<>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => {
if (app.selectedShapesArray.length === 1) {
console.log(toJS(app.selectedShapesArray[0].serialized))
} else {
console.log(app.selectedShapesArray.map(s => toJS(s.serialized)))
}
}}
onClick={() => runAndTransition(app.api.deleteShapes)}
>
(Dev) Print shape props
<TablerIcon className="tl-menu-icon" name="backspace" />
Delete
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>Del</code>
</span>
</div>
</ReactContextMenu.Item>
)}
</>
)}
{app.selectedShapes?.size > 1 && !app.readOnly && (
<>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.flipHorizontal)}
>
<TablerIcon className="tl-menu-icon" name="flip-horizontal" />
Flip horizontally
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.flipVertical)}
>
<TablerIcon className="tl-menu-icon" name="flip-vertical" />
Flip vertically
</ReactContextMenu.Item>
</>
)}
{!app.readOnly && (
<>
<ReactContextMenu.Separator className="menu-separator" />
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.bringToFront)}
>
Move to front
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>⇧</code> <code>]</code>
</span>
</div>
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.sendToBack)}
>
Move to back
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>⇧</code> <code>[</code>
</span>
</div>
</ReactContextMenu.Item>
</>
)}
{developerMode && (
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => {
if (app.selectedShapesArray.length === 1) {
console.log(toJS(app.selectedShapesArray[0].serialized))
} else {
console.log(app.selectedShapesArray.map(s => toJS(s.serialized)))
}
}}
>
(Dev) Print shape props
</ReactContextMenu.Item>
)}
</>
)}
</div>
</ReactContextMenu.Content>
</ReactContextMenu.Root>

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

@ -172,7 +172,14 @@ export class BoxShape extends TLBoxShape<BoxShapeProps> {
return (
<g>
<rect width={w} height={h} rx={borderRadius} ry={borderRadius} fill="transparent" strokeDasharray={isLocked ? '8 2' : undefined} />
<rect
width={w}
height={h}
rx={borderRadius}
ry={borderRadius}
fill="transparent"
strokeDasharray={isLocked ? '8 2' : undefined}
/>
</g>
)
})

10
tldraw/apps/tldraw-logseq/src/lib/shapes/DotShape.tsx
View File

@ -44,7 +44,15 @@ export class DotShape extends TLDotShape<DotShapeProps> {
ReactIndicator = observer(() => {
const { radius, isLocked } = this.props
return <circle cx={radius} cy={radius} r={radius} pointerEvents="all" strokeDasharray={isLocked ? "8 2" : "undefined"} />
return (
<circle
cx={radius}
cy={radius}
r={radius}
pointerEvents="all"
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})
validateProps = (props: Partial<DotShapeProps>) => {

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

@ -159,7 +159,15 @@ export class EllipseShape extends TLEllipseShape<EllipseShapeProps> {
return (
<g>
<ellipse cx={w / 2} cy={h / 2} rx={w / 2} ry={h / 2} strokeWidth={2} fill="transparent" strokeDasharray={isLocked ? "8 2" : "undefined"}/>
<ellipse
cx={w / 2}
cy={h / 2}
rx={w / 2}
ry={h / 2}
strokeWidth={2}
fill="transparent"
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
</g>
)
})

9
tldraw/apps/tldraw-logseq/src/lib/shapes/HTMLShape.tsx
View File

@ -139,7 +139,14 @@ export class HTMLShape extends TLBoxShape<HTMLShapeProps> {
isLocked,
},
} = this
return <rect width={w} height={h} fill="transparent" strokeDasharray={isLocked ? "8 2" : "undefined"}/>
return (
<rect
width={w}
height={h}
fill="transparent"
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})
validateProps = (props: Partial<HTMLShapeProps>) => {

4
tldraw/apps/tldraw-logseq/src/lib/shapes/HighlighterShape.tsx
View File

@ -84,7 +84,9 @@ export class HighlighterShape extends TLDrawShape<HighlighterShapeProps> {
ReactIndicator = observer(() => {
const { pointsPath, props } = this
return <path d={pointsPath} fill="none" strokeDasharray={props.isLocked ? "8 2" : "undefined"}/>
return (
<path d={pointsPath} fill="none" strokeDasharray={props.isLocked ? '8 2' : 'undefined'} />
)
})
validateProps = (props: Partial<HighlighterShapeProps>) => {

11
tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
View File

@ -85,6 +85,15 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
isLocked,
},
} = this
return <rect width={w} height={h} fill="transparent" rx={8} ry={8} strokeDasharray={isLocked ? "8 2" : "undefined"}/>
return (
<rect
width={w}
height={h}
fill="transparent"
rx={8}
ry={8}
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})
}

9
tldraw/apps/tldraw-logseq/src/lib/shapes/ImageShape.tsx
View File

@ -77,7 +77,14 @@ export class ImageShape extends TLImageShape<ImageShapeProps> {
isLocked,
},
} = this
return <rect width={w} height={h} fill="transparent" strokeDasharray={isLocked ? "8 2" : "undefined"}/>
return (
<rect
width={w}
height={h}
fill="transparent"
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})
getShapeSVGJsx({ assets }: { assets: TLAsset[] }) {

10
tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx
View File

@ -77,7 +77,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
const labelSize =
label || isEditing
? getTextLabelSize(
label || "Enter text",
label || 'Enter text',
{ fontFamily: 'var(--ls-font-family)', fontSize, lineHeight: 1, fontWeight },
6
)
@ -99,7 +99,11 @@ export class LineShape extends TLLineShape<LineShapeProps> {
[label]
)
return (
<div {...events} style={{ width: '100%', height: '100%', overflow: 'hidden' }} className="tl-line-container">
<div
{...events}
style={{ width: '100%', height: '100%', overflow: 'hidden' }}
className="tl-line-container"
>
<TextLabel
font={font}
text={label}
@ -177,7 +181,7 @@ export class LineShape extends TLLineShape<LineShapeProps> {
decorations?.start,
decorations?.end
)}
strokeDasharray={isLocked ? "8 2" : "undefined"}
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
{label && !isEditing && (
<rect

24
tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
View File

@ -63,11 +63,11 @@ const LogseqPortalShapeHeader = observer(
: 'var(--ls-tertiary-background-color)'
const fillGradient =
fill && fill !== 'var(--ls-secondary-background-color)'
? isBuiltInColor(fill)
? `var(--ls-highlight-color-${fill})`
: fill
: 'var(--ls-secondary-background-color)'
fill && fill !== 'var(--ls-secondary-background-color)'
? isBuiltInColor(fill)
? `var(--ls-highlight-color-${fill})`
: fill
: 'var(--ls-secondary-background-color)'
return (
<div
@ -79,7 +79,8 @@ const LogseqPortalShapeHeader = observer(
className="absolute inset-0 tl-logseq-portal-header-bg"
style={{
opacity,
background: type === 'P' ? bgColor : `linear-gradient(0deg, ${fillGradient}, ${bgColor})`,
background:
type === 'P' ? bgColor : `linear-gradient(0deg, ${fillGradient}, ${bgColor})`,
}}
></div>
<div className="relative">{children}</div>
@ -536,7 +537,16 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
ReactIndicator = observer(() => {
const bounds = this.getBounds()
return <rect width={bounds.width} height={bounds.height} fill="transparent" rx={8} ry={8} strokeDasharray={this.props.isLocked ? "8 2" : "undefined"}/>
return (
<rect
width={bounds.width}
height={bounds.height}
fill="transparent"
rx={8}
ry={8}
strokeDasharray={this.props.isLocked ? '8 2' : 'undefined'}
/>
)
})
validateProps = (props: Partial<LogseqPortalShapeProps>) => {

2
tldraw/apps/tldraw-logseq/src/lib/shapes/PenShape.tsx
View File

@ -66,7 +66,7 @@ export class PenShape extends TLDrawShape<PenShapeProps> {
ReactIndicator = observer(() => {
const { pointsPath } = this
return <path d={pointsPath} strokeDasharray={this.props.isLocked ? "8 2" : "undefined"}/>
return <path d={pointsPath} strokeDasharray={this.props.isLocked ? '8 2' : 'undefined'} />
})
validateProps = (props: Partial<PenShapeProps>) => {

2
tldraw/apps/tldraw-logseq/src/lib/shapes/PencilShape.tsx
View File

@ -133,7 +133,7 @@ export class PencilShape extends TLDrawShape<PencilShapeProps> {
ReactIndicator = observer(() => {
const { pointsPath } = this
return <path d={pointsPath} strokeDasharray={this.props.isLocked ? "8 2" : "undefined"}/>
return <path d={pointsPath} strokeDasharray={this.props.isLocked ? '8 2' : 'undefined'} />
})
validateProps = (props: Partial<PencilShapeProps>) => {

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

@ -176,7 +176,7 @@ export class PolygonShape extends TLPolygonShape<PolygonShapeProps> {
<polygon
transform={`translate(${x}, ${y})`}
points={this.getVertices(strokeWidth / 2).join()}
strokeDasharray={isLocked ? "8 2" : "undefined"}
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
</g>
)

2
tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx
View File

@ -250,7 +250,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
rx={borderRadius}
ry={borderRadius}
fill="transparent"
strokeDasharray={isLocked ? "8 2" : "undefined"}
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})

26
tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx
View File

@ -90,10 +90,10 @@ export class TweetShape extends TLBoxShape<TweetShapeProps> {
}}
>
{this.embedId ? (
<div ref={cpRefContainer}>
<Tweet tweetId={this.embedId}/>
</div>
) : (null)}
<div ref={cpRefContainer}>
<Tweet tweetId={this.embedId} />
</div>
) : null}
</div>
</HTMLContainer>
)
@ -106,7 +106,16 @@ export class TweetShape extends TLBoxShape<TweetShapeProps> {
isLocked,
},
} = this
return <rect width={w} height={h} fill="transparent" rx={8} ry={8} strokeDasharray={isLocked ? "8 2" : "undefined"}/>
return (
<rect
width={w}
height={h}
fill="transparent"
rx={8}
ry={8}
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})
useComponentSize<T extends HTMLElement>(ref: React.RefObject<T> | null, selector = '') {
@ -192,12 +201,7 @@ export class TweetShape extends TLBoxShape<TweetShapeProps> {
if (embedId) {
return (
<g>
<rect
width={bounds.width}
height={bounds.height}
fill="#15202b"
rx={8}
ry={8} />
<rect width={bounds.width} height={bounds.height} fill="#15202b" rx={8} ry={8} />
<svg
x={bounds.width / 4}
y={bounds.height / 4}

9
tldraw/apps/tldraw-logseq/src/lib/shapes/VideoShape.tsx
View File

@ -93,6 +93,13 @@ export class VideoShape extends TLBoxShape<VideoShapeProps> {
isLocked,
},
} = this
return <rect width={w} height={h} fill="transparent" strokeDasharray={isLocked ? "8 2" : "undefined"}/>
return (
<rect
width={w}
height={h}
fill="transparent"
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})
}

11
tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx
View File

@ -122,7 +122,16 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
isLocked,
},
} = this
return <rect width={w} height={h} fill="transparent" rx={8} ry={8} strokeDasharray={isLocked ? "8 2" : "undefined"} />
return (
<rect
width={w}
height={h}
fill="transparent"
rx={8}
ry={8}
strokeDasharray={isLocked ? '8 2' : 'undefined'}
/>
)
})
validateProps = (props: Partial<YouTubeShapeProps>) => {

6
tldraw/packages/core/src/lib/TLApp/TLApp.ts
View File

@ -336,9 +336,11 @@ export class TLApp<
}
@action updateShapes = <T extends S>(shapes: ({ id: string } & Partial<T['props']>)[]): this => {
if (this.readOnly ) return this
if (this.readOnly) return this
const shapesToUpdate = shapes.map(shape => this.getShapeById(shape.id)).filter(shape => shape?.props.isLocked)
const shapesToUpdate = shapes
.map(shape => this.getShapeById(shape.id))
.filter(shape => shape?.props.isLocked)
if (shapesToUpdate.length === 0) return this

6
tldraw/packages/react/src/components/Indicator/Indicator.tsx
View File

@ -40,7 +40,11 @@ export const Indicator = observer(function Shape({
zIndex={isEditing ? 1000 : 10000}
>
<SVGContainer>
<g className={`tl-indicator-container ${isSelected ? 'tl-selected' : 'tl-hovered'} ${isLocked ? 'tl-locked' : ''}`}>
<g
className={`tl-indicator-container ${isSelected ? 'tl-selected' : 'tl-hovered'} ${
isLocked ? 'tl-locked' : ''
}`}
>
<ReactIndicator
isEditing={isEditing}
isBinding={isBinding}

206
tldraw/packages/react/src/components/ui/SelectionForeground/SelectionForeground.tsx
View File

@ -27,120 +27,124 @@ export const SelectionForeground = observer(function SelectionForeground<S exten
return (
<>
{shapes.length > 0 && <SVGContainer>
{!app.editingShape && (<rect
className="tl-bounds-fg"
width={Math.max(width, 1)}
height={Math.max(height, 1)}
rx={borderRadius}
ry={borderRadius}
pointerEvents="none"
/>)}
<EdgeHandle
x={targetSize * 2}
y={0}
width={width - targetSize * 4}
height={0}
targetSize={targetSize}
edge={TLResizeEdge.Top}
disabled={!canResize[1]}
isHidden={!showResizeHandles}
/>
<EdgeHandle
x={width}
y={targetSize * 2}
width={0}
height={height - targetSize * 4}
targetSize={targetSize}
edge={TLResizeEdge.Right}
disabled={!canResize[0]}
isHidden={!showResizeHandles}
/>
<EdgeHandle
x={targetSize * 2}
y={height}
width={width - targetSize * 4}
height={0}
targetSize={targetSize}
edge={TLResizeEdge.Bottom}
disabled={!canResize[1]}
isHidden={!showResizeHandles}
/>
<EdgeHandle
x={0}
y={targetSize * 2}
width={0}
height={height - targetSize * 4}
targetSize={targetSize}
edge={TLResizeEdge.Left}
disabled={!canResize[0]}
isHidden={!showResizeHandles}
/>
<RotateCornerHandle
cx={0}
cy={0}
targetSize={targetSize}
corner={TLRotateCorner.TopLeft}
isHidden={!showRotateHandles}
/>
<RotateCornerHandle
cx={width + targetSize * 2}
cy={0}
targetSize={targetSize}
corner={TLRotateCorner.TopRight}
isHidden={!showRotateHandles}
/>
<RotateCornerHandle
cx={width + targetSize * 2}
cy={height + targetSize * 2}
targetSize={targetSize}
corner={TLRotateCorner.BottomRight}
isHidden={!showRotateHandles}
/>
<RotateCornerHandle
cx={0}
cy={height + targetSize * 2}
targetSize={targetSize}
corner={TLRotateCorner.BottomLeft}
isHidden={!showRotateHandles}
/>
{canResize?.every(r => r) && (
<>
<CornerHandle
{shapes.length > 0 && (
<SVGContainer>
{!app.editingShape && (
<rect
className="tl-bounds-fg"
width={Math.max(width, 1)}
height={Math.max(height, 1)}
rx={borderRadius}
ry={borderRadius}
pointerEvents="none"
/>
)}
<EdgeHandle
x={targetSize * 2}
y={0}
width={width - targetSize * 4}
height={0}
targetSize={targetSize}
edge={TLResizeEdge.Top}
disabled={!canResize[1]}
isHidden={!showResizeHandles}
/>
<EdgeHandle
x={width}
y={targetSize * 2}
width={0}
height={height - targetSize * 4}
targetSize={targetSize}
edge={TLResizeEdge.Right}
disabled={!canResize[0]}
isHidden={!showResizeHandles}
/>
<EdgeHandle
x={targetSize * 2}
y={height}
width={width - targetSize * 4}
height={0}
targetSize={targetSize}
edge={TLResizeEdge.Bottom}
disabled={!canResize[1]}
isHidden={!showResizeHandles}
/>
<EdgeHandle
x={0}
y={targetSize * 2}
width={0}
height={height - targetSize * 4}
targetSize={targetSize}
edge={TLResizeEdge.Left}
disabled={!canResize[0]}
isHidden={!showResizeHandles}
/>
<RotateCornerHandle
cx={0}
cy={0}
size={size}
targetSize={targetSize}
corner={TLResizeCorner.TopLeft}
isHidden={!showResizeHandles}
corner={TLRotateCorner.TopLeft}
isHidden={!showRotateHandles}
/>
<CornerHandle
cx={width}
<RotateCornerHandle
cx={width + targetSize * 2}
cy={0}
size={size}
targetSize={targetSize}
corner={TLResizeCorner.TopRight}
isHidden={!showResizeHandles}
corner={TLRotateCorner.TopRight}
isHidden={!showRotateHandles}
/>
<CornerHandle
cx={width}
cy={height}
size={size}
<RotateCornerHandle
cx={width + targetSize * 2}
cy={height + targetSize * 2}
targetSize={targetSize}
corner={TLResizeCorner.BottomRight}
isHidden={!showResizeHandles}
corner={TLRotateCorner.BottomRight}
isHidden={!showRotateHandles}
/>
<CornerHandle
<RotateCornerHandle
cx={0}
cy={height}
size={size}
cy={height + targetSize * 2}
targetSize={targetSize}
corner={TLResizeCorner.BottomLeft}
isHidden={!showResizeHandles}
corner={TLRotateCorner.BottomLeft}
isHidden={!showRotateHandles}
/>
</>
{canResize?.every(r => r) && (
<>
<CornerHandle
cx={0}
cy={0}
size={size}
targetSize={targetSize}
corner={TLResizeCorner.TopLeft}
isHidden={!showResizeHandles}
/>
<CornerHandle
cx={width}
cy={0}
size={size}
targetSize={targetSize}
corner={TLResizeCorner.TopRight}
isHidden={!showResizeHandles}
/>
<CornerHandle
cx={width}
cy={height}
size={size}
targetSize={targetSize}
corner={TLResizeCorner.BottomRight}
isHidden={!showResizeHandles}
/>
<CornerHandle
cx={0}
cy={height}
size={size}
targetSize={targetSize}
corner={TLResizeCorner.BottomLeft}
isHidden={!showResizeHandles}
/>
</>
)}
</SVGContainer>
)}
</SVGContainer>}
</>
)
})