BookmarkShapeUtil
Table of contents
- migrations
- props
- type
- canBeLaidOut
- canCrop
- canEdit
- canEditInReadOnly
- canResize
- canScroll
- canSnap
- editor
- hideResizeHandles
- hideRotateHandle
- hideSelectionBoundsBg
- hideSelectionBoundsFg
- isAspectRatioLocked
- onBeforeCreate
- onBeforeUpdate
- onChildrenChange
- onClick
- onDoubleClick
- onDoubleClickEdge
- onDoubleClickHandle
- onDragShapesOut
- onDragShapesOver
- onDropShapesOver
- onEditEnd
- onHandleDrag
- onResize
- onResizeEnd
- onResizeStart
- onRotate
- onRotateEnd
- onRotateStart
- onTranslate
- onTranslateEnd
- onTranslateStart
- Properties
- Methods
Extends BaseBoxShapeUtil<TLBookmarkShape>
.
class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {}
ShapeUtil
Constructs a new instance of the ShapeUtil
class
Name | Description |
---|---|
|
|
Properties
static migrations: import('@tldraw/editor').TLPropsMigrations
static props: import('@tldraw/editor').RecordProps<TLBookmarkShape>
static type: 'bookmark'
ShapeUtil
Whether the shape participates in stacking, aligning, and distributing.
canBeLaidOut: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be cropped.
canCrop: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be double clicked to edit.
canEdit: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be edited in read-only mode.
canEditInReadOnly: TLShapeUtilFlag<Shape>
canResize: () => boolean
ShapeUtil
Whether the shape can be scrolled while editing.
canScroll: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be snapped to by another shape.
canSnap: TLShapeUtilFlag<Shape>
ShapeUtil
editor: Editor
ShapeUtil
Whether the shape should hide its resize handles when selected.
hideResizeHandles: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape should hide its rotation handles when selected.
hideRotateHandle: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape should hide its selection bounds background when selected.
hideSelectionBoundsBg: TLShapeUtilFlag<Shape>
hideSelectionBoundsFg: () => boolean
ShapeUtil
Whether the shape's aspect ratio is locked.
isAspectRatioLocked: TLShapeUtilFlag<Shape>
onBeforeCreate: (next: TLBookmarkShape) => {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
assetId: null | TLAssetId
h: number
url: string
w: number
}
rotation: number
type: 'bookmark'
typeName: 'shape'
x: number
y: number
}
onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>
ShapeUtil
A callback called when a shape's children change.
onChildrenChange?: TLOnChildrenChangeHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape is clicked.
onClick?: TLOnClickHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape is double clicked.
onDoubleClick?: TLOnDoubleClickHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape's edge is double clicked.
onDoubleClickEdge?: TLOnDoubleClickHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape's handle is double clicked.
onDoubleClickHandle?: TLOnDoubleClickHandleHandler<Shape>
Name | Description |
---|---|
| The shape. |
| The handle that is double-clicked. |
ShapeUtil
A callback called when some other shapes are dragged out of this one.
onDragShapesOut?: TLOnDragHandler<Shape>
Name | Description |
---|---|
| The shape. |
| The shapes that are being dragged out. |
ShapeUtil
A callback called when some other shapes are dragged over this one.
onDragShapesOver?: TLOnDragHandler<Shape>
onDragShapesOver = (shape, shapes) => {
this.editor.reparentShapes(shapes, shape.id)
}
Name | Description |
---|---|
| The shape. |
| The shapes that are being dragged over this one. |
ShapeUtil
A callback called when some other shapes are dropped over this one.
onDropShapesOver?: TLOnDragHandler<Shape>
Name | Description |
---|---|
| The shape. |
| The shapes that are being dropped over this one. |
ShapeUtil
A callback called when a shape finishes being editing.
onEditEnd?: TLOnEditEndHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape's handle changes.
onHandleDrag?: TLOnHandleDragHandler<Shape>
Name | Description |
---|---|
| The current shape. |
| An object containing the handle and whether the handle is 'precise' or not. |
BaseBoxShapeUtil
onResize: TLOnResizeHandler<any>
ShapeUtil
A callback called when a shape finishes resizing.
onResizeEnd?: TLOnResizeEndHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the resize. |
| The current shape. |
ShapeUtil
A callback called when a shape starts being resized.
onResizeStart?: TLOnResizeStartHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape changes from a rotation.
onRotate?: TLOnRotateHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the rotation. |
| The current shape. |
ShapeUtil
A callback called when a shape finishes rotating.
onRotateEnd?: TLOnRotateEndHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the rotation. |
| The current shape. |
ShapeUtil
A callback called when a shape starts being rotated.
onRotateStart?: TLOnRotateStartHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape changes from a translation.
onTranslate?: TLOnTranslateHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the translation. |
| The current shape. |
ShapeUtil
A callback called when a shape finishes translating.
onTranslateEnd?: TLOnTranslateEndHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the translation. |
| The current shape. |
ShapeUtil
A callback called when a shape starts being translated.
onTranslateStart?: TLOnTranslateStartHandler<Shape>
Name | Description |
---|---|
| The shape. |
Methods
ShapeUtil
Whether the shape can be bound to. See TLShapeUtilCanBindOpts for details.
canBind(opts: TLShapeUtilCanBindOpts<Shape>): boolean
Name | Description |
---|---|
|
|
boolean
ShapeUtil
Get whether the shape can receive children of a given type.
canDropShapes(shape: Shape, shapes: TLShape[]): boolean
Name | Description |
---|---|
|
The shape type. |
|
The shapes that are being dropped. |
boolean
ShapeUtil
Get whether the shape can receive children of a given type.
canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean
Name | Description |
---|---|
|
|
|
The shape type. |
boolean
component(shape: TLBookmarkShape): import('react/jsx-runtime').JSX.Element
Name | Description |
---|---|
|
|
import('react/jsx-runtime').JSX.Element
ShapeUtil
Get the geometry to use when snapping to this this shape in translate/resize operations. See BoundsSnapGeometry for details.
getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry
Name | Description |
---|---|
|
|
BoundsSnapGeometry
ShapeUtil
Return elements to be added to the <defs> section of the canvases SVG context. This can be
used to define SVG content (e.g. patterns & masks) that can be referred to by ID from svg
elements returned by component
.
Each def should have a unique key
. If multiple defs from different shapes all have the same
key, only one will be used.
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]
getDefaultProps(): TLBookmarkShape['props']
BaseBoxShapeUtil
getGeometry(shape: Shape): Geometry2d
Name | Description |
---|---|
|
|
Geometry2d
ShapeUtil
Get an array of handle models for the shape. This is an optional method.
getHandles?(shape: Shape): TLHandle[]
util.getHandles?.(myShape)
Name | Description |
---|---|
|
The shape. |
TLHandle[]
BaseBoxShapeUtil
getHandleSnapGeometry(shape: Shape): HandleSnapGeometry
Name | Description |
---|---|
|
|
HandleSnapGeometry
BaseBoxShapeUtil
getInterpolatedProps(
startShape: Shape,
endShape: Shape,
t: number
): Shape['props']
Name | Description |
---|---|
|
|
|
|
|
|
Shape['props']
indicator(shape: TLBookmarkShape): import('react/jsx-runtime').JSX.Element
Name | Description |
---|---|
|
|
import('react/jsx-runtime').JSX.Element
ShapeUtil
Get the shape's background layer as an SVG object.
toBackgroundSvg?(
shape: Shape,
ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement
Name | Description |
---|---|
|
The shape. |
|
ctx - The export context for the SVG - used for adding e.g. <def>s |
null | Promise<null | ReactElement> | ReactElement
An SVG element.
ShapeUtil
Get the shape as an SVG object.
toSvg?(
shape: Shape,
ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement
Name | Description |
---|---|
|
The shape. |
|
The export context for the SVG - used for adding e.g. <def>s |
null | Promise<null | ReactElement> | ReactElement
An SVG element.