jeffemmett
/
draw-fast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update LiveImageShapeUtil.tsx

This commit is contained in:
Steve Ruiz 2023-11-25 19:07:19 +00:00
parent eb5d48154d
commit 63ccc75ac6
1 changed files with 62 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/LiveImageShapeUtil.tsx
View File

@ -94,68 +94,6 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
canUnmount = () => false canUnmount = () => false
indicator(shape: LiveImageShape) {
const bounds = this.editor.getShapeGeometry(shape).bounds
return (
<rect
width={toDomPrecision(bounds.width)}
height={toDomPrecision(bounds.height)}
className={`tl-frame-indicator`}
/>
)
}
override component(shape: LiveImageShape) {
const editor = useEditor()
useFal(shape.id, {
debounceTime: 0,
url: 'wss://110602490-lcm-sd15-i2i.gateway.alpha.fal.ai/ws',
})
const bounds = this.editor.getShapeGeometry(shape).bounds
const assetId = AssetRecordType.createId(shape.id.split(':')[1])
const asset = editor.getAsset(assetId)
// eslint-disable-next-line react-hooks/rules-of-hooks
const theme = getDefaultColorTheme({ isDarkMode: useIsDarkMode() })
return (
<>
<SVGContainer>
<rect
className={'tl-frame__body'}
width={bounds.width}
height={bounds.height}
fill={theme.solid}
stroke={theme.text}
/>
</SVGContainer>
<FrameHeading
id={shape.id}
name={shape.props.name}
width={bounds.width}
height={bounds.height}
/>
{asset && (
<img
src={asset.props.src!}
alt={shape.props.name}
width={shape.props.w}
height={shape.props.h}
style={{
position: 'relative',
left: shape.props.w,
width: shape.props.w,
height: shape.props.h,
}}
/>
)}
</>
)
}
override canReceiveNewChildrenOfType = ( override canReceiveNewChildrenOfType = (
shape: TLShape, shape: TLShape,
_type: TLShape['type'] _type: TLShape['type']
@ -230,4 +168,66 @@ export class LiveImageShapeUtil extends ShapeUtil<LiveImageShape> {
override onResize: TLOnResizeHandler<any> = (shape, info) => { override onResize: TLOnResizeHandler<any> = (shape, info) => {
return resizeBox(shape, info) return resizeBox(shape, info)
} }
indicator(shape: LiveImageShape) {
const bounds = this.editor.getShapeGeometry(shape).bounds
return (
<rect
width={toDomPrecision(bounds.width)}
height={toDomPrecision(bounds.height)}
className={`tl-frame-indicator`}
/>
)
}
override component(shape: LiveImageShape) {
const editor = useEditor()
useFal(shape.id, {
debounceTime: 0,
url: 'wss://110602490-lcm-sd15-i2i.gateway.alpha.fal.ai/ws',
})
const bounds = this.editor.getShapeGeometry(shape).bounds
const assetId = AssetRecordType.createId(shape.id.split(':')[1])
const asset = editor.getAsset(assetId)
// eslint-disable-next-line react-hooks/rules-of-hooks
const theme = getDefaultColorTheme({ isDarkMode: useIsDarkMode() })
return (
<>
<SVGContainer>
<rect
className={'tl-frame__body'}
width={bounds.width}
height={bounds.height}
fill={theme.solid}
stroke={theme.text}
/>
</SVGContainer>
<FrameHeading
id={shape.id}
name={shape.props.name}
width={bounds.width}
height={bounds.height}
/>
{asset && (
<img
src={asset.props.src!}
alt={shape.props.name}
width={shape.props.w}
height={shape.props.h}
style={{
position: 'relative',
left: shape.props.w,
width: shape.props.w,
height: shape.props.h,
}}
/>
)}
</>
)
}
} }