80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import {
|
|
BaseBoxShapeUtil,
|
|
HTMLContainer,
|
|
TLBaseShape,
|
|
} from "tldraw"
|
|
import React, { useState } from "react"
|
|
import { FathomMeetingsPanel } from "../components/FathomMeetingsPanel"
|
|
import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper"
|
|
|
|
type IFathomMeetingsBrowser = TLBaseShape<
|
|
"FathomMeetingsBrowser",
|
|
{
|
|
w: number
|
|
h: number
|
|
}
|
|
>
|
|
|
|
export class FathomMeetingsBrowserShape extends BaseBoxShapeUtil<IFathomMeetingsBrowser> {
|
|
static override type = "FathomMeetingsBrowser" as const
|
|
|
|
getDefaultProps(): IFathomMeetingsBrowser["props"] {
|
|
return {
|
|
w: 800,
|
|
h: 600,
|
|
}
|
|
}
|
|
|
|
// Fathom theme color: Blue (Rainbow)
|
|
static readonly PRIMARY_COLOR = "#3b82f6"
|
|
|
|
component(shape: IFathomMeetingsBrowser) {
|
|
const { w, h } = shape.props
|
|
const [isOpen, setIsOpen] = useState(true)
|
|
const [isMinimized, setIsMinimized] = useState(false)
|
|
const isSelected = this.editor.getSelectedShapeIds().includes(shape.id)
|
|
|
|
const handleClose = () => {
|
|
setIsOpen(false)
|
|
// Delete the browser shape after a short delay
|
|
setTimeout(() => {
|
|
this.editor.deleteShape(shape.id)
|
|
}, 100)
|
|
}
|
|
|
|
const handleMinimize = () => {
|
|
setIsMinimized(!isMinimized)
|
|
}
|
|
|
|
if (!isOpen) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<HTMLContainer style={{ width: w, height: h }}>
|
|
<StandardizedToolWrapper
|
|
title="Fathom Meetings"
|
|
primaryColor={FathomMeetingsBrowserShape.PRIMARY_COLOR}
|
|
isSelected={isSelected}
|
|
width={w}
|
|
height={h}
|
|
onClose={handleClose}
|
|
onMinimize={handleMinimize}
|
|
isMinimized={isMinimized}
|
|
editor={this.editor}
|
|
shapeId={shape.id}
|
|
>
|
|
<FathomMeetingsPanel
|
|
onClose={handleClose}
|
|
shapeMode={true}
|
|
/>
|
|
</StandardizedToolWrapper>
|
|
</HTMLContainer>
|
|
)
|
|
}
|
|
|
|
indicator(shape: IFathomMeetingsBrowser) {
|
|
return <rect width={shape.props.w} height={shape.props.h} />
|
|
}
|
|
}
|