cleanup
This commit is contained in:
parent
80fe3ebc63
commit
e31b6db266
|
|
@ -1,90 +0,0 @@
|
||||||
import {
|
|
||||||
TLBaseShape,
|
|
||||||
TLResizeHandle,
|
|
||||||
BaseBoxShapeUtil,
|
|
||||||
//TLShapeUtilFlag,
|
|
||||||
resizeBox,
|
|
||||||
VecModel,
|
|
||||||
Box,
|
|
||||||
TLResizeMode,
|
|
||||||
Rectangle2d,
|
|
||||||
} from "tldraw"
|
|
||||||
|
|
||||||
export interface HTMLShape
|
|
||||||
extends TLBaseShape<"html", { w: number; h: number; html: string }> {
|
|
||||||
props: {
|
|
||||||
w: number
|
|
||||||
h: number
|
|
||||||
html: string
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class HTMLShapeUtil extends BaseBoxShapeUtil<HTMLShape> {
|
|
||||||
static override type = "html" as const
|
|
||||||
override canBind = () => true
|
|
||||||
override canEdit = () => false
|
|
||||||
override canResize = () => true
|
|
||||||
override isAspectRatioLocked = () => false
|
|
||||||
|
|
||||||
getDefaultProps(): HTMLShape["props"] {
|
|
||||||
return {
|
|
||||||
w: 100,
|
|
||||||
h: 100,
|
|
||||||
html: "<div></div>",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
override onBeforeUpdate = (prev: HTMLShape, next: HTMLShape): void => {
|
|
||||||
if (prev.x !== next.x || prev.y !== next.y) {
|
|
||||||
this.editor.bringToFront([next.id])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
override onResize = (
|
|
||||||
shape: HTMLShape,
|
|
||||||
info: {
|
|
||||||
handle: TLResizeHandle
|
|
||||||
mode: TLResizeMode
|
|
||||||
initialBounds: Box
|
|
||||||
initialShape: HTMLShape
|
|
||||||
newPoint: VecModel
|
|
||||||
scaleX: number
|
|
||||||
scaleY: number
|
|
||||||
},
|
|
||||||
) => {
|
|
||||||
const element = document.getElementById(shape.id)
|
|
||||||
if (!element || !element.parentElement) return resizeBox(shape, info)
|
|
||||||
const { width, height } = element.parentElement.getBoundingClientRect()
|
|
||||||
if (element) {
|
|
||||||
const isOverflowing =
|
|
||||||
element.scrollWidth > width || element.scrollHeight > height
|
|
||||||
if (isOverflowing) {
|
|
||||||
element.parentElement?.classList.add("overflowing")
|
|
||||||
} else {
|
|
||||||
element.parentElement?.classList.remove("overflowing")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return resizeBox(shape, info)
|
|
||||||
}
|
|
||||||
|
|
||||||
getGeometry(shape: HTMLShape) {
|
|
||||||
return new Rectangle2d({
|
|
||||||
width: shape.props.w,
|
|
||||||
height: shape.props.h,
|
|
||||||
isFilled: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
override component(shape: HTMLShape): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
id={shape.id}
|
|
||||||
dangerouslySetInnerHTML={{ __html: shape.props.html }}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
override indicator(shape: HTMLShape): JSX.Element {
|
|
||||||
return <rect width={shape.props.w} height={shape.props.h} />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue