tldraw 3.15.0 → 3.16.0-canary.0e0fb8bde89d

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -1,9 +1,17 @@
-import { exhaustiveSwitchError, preventDefault } from '@tldraw/editor'
+import {
+	exhaustiveSwitchError,
+	getPointerInfo,
+	preventDefault,
+	TLPointerEventInfo,
+	useEditor,
+	Vec,
+} from '@tldraw/editor'
 import { ContextMenu as _ContextMenu } from 'radix-ui'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { unwrapLabel } from '../../../context/actions'
 import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
+import { TLUiToolItem } from '../../../hooks/useTools'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
 import { kbdStr } from '../../../kbd-utils'
@@ -63,6 +71,10 @@ export interface TLUiMenuItemProps<
 	 * Whether the item is selected.
 	 */
 	isSelected?: boolean
+	/**
+	 * The function to call when the item is dragged. If this is provided, the item will be draggable.
+	 */
+	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 }
 
 /** @public @react */
@@ -81,6 +93,7 @@ export function TldrawUiMenuItem<
 	onSelect,
 	noClose,
 	isSelected,
+	onDragStart,
 }: TLUiMenuItemProps<TranslationKey, IconType>) {
 	const { type: menuType, sourceId } = useTldrawUiMenuContext()
 
@@ -207,6 +220,20 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar': {
+			if (onDragStart) {
+				return (
+					<DraggableToolbarButton
+						id={id}
+						icon={icon}
+						onSelect={onSelect}
+						onDragStart={onDragStart}
+						labelToUse={labelToUse}
+						titleStr={titleStr}
+						disabled={disabled}
+						isSelected={isSelected}
+					/>
+				)
+			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
@@ -227,6 +254,21 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar-overflow': {
+			if (onDragStart) {
+				return (
+					<DraggableToolbarButton
+						id={id}
+						icon={icon}
+						onSelect={onSelect}
+						onDragStart={onDragStart}
+						labelToUse={labelToUse}
+						titleStr={titleStr}
+						disabled={disabled}
+						isSelected={isSelected}
+						overflow
+					/>
+				)
+			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
@@ -249,3 +291,172 @@ export function TldrawUiMenuItem<
 		}
 	}
 }
+
+function useDraggableEvents(
+	onDragStart: TLUiToolItem['onDragStart'],
+	onSelect: TLUiToolItem['onSelect']
+) {
+	const editor = useEditor()
+	const events = useMemo(() => {
+		let state = { name: 'idle' } as
+			| {
+					name: 'idle'
+			  }
+			| {
+					name: 'pointing'
+					start: Vec
+			  }
+			| {
+					name: 'dragging'
+					start: Vec
+			  }
+			| {
+					name: 'dragged'
+			  }
+
+		function handlePointerDown(e: React.PointerEvent<HTMLButtonElement>) {
+			state = {
+				name: 'pointing',
+				start: editor.inputs.currentPagePoint.clone(),
+			}
+
+			e.currentTarget.setPointerCapture(e.pointerId)
+		}
+
+		function handlePointerMove(e: React.PointerEvent<HTMLButtonElement>) {
+			if ((e as any).isSpecialRedispatchedEvent) return
+
+			if (state.name === 'pointing') {
+				const distance = Vec.Dist2(state.start, editor.inputs.currentPagePoint)
+				if (
+					distance >
+					(editor.getInstanceState().isCoarsePointer
+						? editor.options.coarseDragDistanceSquared
+						: editor.options.dragDistanceSquared)
+				) {
+					const start = state.start
+					state = {
+						name: 'dragging',
+						start,
+					}
+
+					editor.run(() => {
+						// Set origin point
+						editor.dispatch({
+							type: 'pointer',
+							target: 'canvas',
+							name: 'pointer_down',
+							...getPointerInfo(e),
+							point: start,
+						})
+
+						// Pointer down potentially selects shapes, so we need to deselect them.
+						editor.selectNone()
+
+						// start drag
+						onDragStart?.('toolbar', {
+							type: 'pointer',
+							target: 'canvas',
+							name: 'pointer_move',
+							...getPointerInfo(e),
+						})
+					})
+				}
+			}
+		}
+
+		function handlePointerUp(e: React.PointerEvent<HTMLButtonElement>) {
+			if ((e as any).isSpecialRedispatchedEvent) return
+
+			e.currentTarget.releasePointerCapture(e.pointerId)
+
+			editor.dispatch({
+				type: 'pointer',
+				target: 'canvas',
+				name: 'pointer_up',
+				...getPointerInfo(e),
+			})
+		}
+
+		function handleClick() {
+			if (state.name === 'dragging' || state.name === 'dragged') {
+				state = { name: 'idle' }
+				return true
+			}
+
+			state = { name: 'idle' }
+			onSelect?.('toolbar')
+		}
+
+		return {
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerUp,
+			onClick: handleClick,
+		}
+	}, [onDragStart, editor, onSelect])
+
+	return events
+}
+
+function DraggableToolbarButton({
+	id,
+	labelToUse,
+	titleStr,
+	disabled,
+	isSelected,
+	icon,
+	onSelect,
+	onDragStart,
+	overflow,
+}: {
+	id: string
+	disabled: boolean
+	labelToUse?: string
+	titleStr?: string
+	isSelected?: boolean
+	icon: TLUiMenuItemProps['icon']
+	onSelect: TLUiMenuItemProps['onSelect']
+	onDragStart: TLUiMenuItemProps['onDragStart']
+	overflow?: boolean
+}) {
+	const events = useDraggableEvents(onDragStart, onSelect)
+
+	if (overflow) {
+		return (
+			<TldrawUiToolbarButton
+				aria-label={labelToUse}
+				aria-pressed={isSelected ? 'true' : 'false'}
+				isActive={isSelected}
+				className="tlui-button-grid__button"
+				data-testid={`tools.more.${id}`}
+				data-value={id}
+				disabled={disabled}
+				title={titleStr}
+				type="icon"
+				{...events}
+			>
+				<TldrawUiButtonIcon icon={icon!} />
+			</TldrawUiToolbarButton>
+		)
+	}
+
+	return (
+		<TldrawUiToolbarButton
+			aria-label={labelToUse}
+			aria-pressed={isSelected ? 'true' : 'false'}
+			data-testid={`tools.${id}`}
+			data-value={id}
+			disabled={disabled}
+			onTouchStart={(e) => {
+				preventDefault(e)
+				onSelect('toolbar')
+			}}
+			title={titleStr}
+			type="tool"
+			{...events}
+		>
+			<TldrawUiButtonIcon icon={icon!} />
+		</TldrawUiToolbarButton>
+	)
+}

package/src/lib/ui/context/actions.tsx

@@ -1037,17 +1037,20 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'rotate-cw',
 				label: 'action.rotate-cw',
 				icon: 'rotate-cw',
+				kbd: 'shift+.,shift+alt+.',
 				onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					trackEvent('rotate-cw', { source })
+					const isFine = editor.inputs.altKey
+					trackEvent('rotate-cw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-cw')
 					editor.run(() => {
-						const offset = editor.getSelectionRotation() % (HALF_PI / 2)
-						const dontUseOffset = approximately(offset, 0) || approximately(offset, HALF_PI / 2)
+						const rotation = HALF_PI / (isFine ? 96 : 6)
+						const offset = editor.getSelectionRotation() % rotation
+						const dontUseOffset = approximately(offset, 0) || approximately(offset, rotation)
 						const selectedShapeIds = editor.getSelectedShapeIds()
-						editor.rotateShapesBy(selectedShapeIds, HALF_PI / 2 - (dontUseOffset ? 0 : offset))
+						editor.rotateShapesBy(selectedShapeIds, rotation - (dontUseOffset ? 0 : offset))
 						kickoutOccludedShapes(editor, selectedShapeIds)
 					})
 				},
@@ -1056,17 +1059,21 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'rotate-ccw',
 				label: 'action.rotate-ccw',
 				icon: 'rotate-ccw',
+				// omg double comma
+				kbd: 'shift+,,shift+alt+,',
 				onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					trackEvent('rotate-ccw', { source })
+					const isFine = editor.inputs.altKey
+					trackEvent('rotate-ccw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-ccw')
 					editor.run(() => {
-						const offset = editor.getSelectionRotation() % (HALF_PI / 2)
+						const rotation = HALF_PI / (isFine ? 96 : 6)
+						const offset = editor.getSelectionRotation() % rotation
 						const offsetCloseToZero = approximately(offset, 0)
 						const selectedShapeIds = editor.getSelectedShapeIds()
-						editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -(HALF_PI / 2) : -offset)
+						editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -rotation : -offset)
 						kickoutOccludedShapes(editor, selectedShapeIds)
 					})
 				},

package/src/lib/ui/context/events.tsx

@@ -76,8 +76,8 @@ export interface TLUiEventMap {
 	'delete-shapes': null
 	'select-all-shapes': null
 	'select-none-shapes': null
-	'rotate-ccw': null
-	'rotate-cw': null
+	'rotate-ccw': { fine: boolean }
+	'rotate-cw': { fine: boolean }
 	'zoom-in': { towardsCursor: boolean }
 	'zoom-out': { towardsCursor: boolean }
 	'zoom-to-fit': null
@@ -126,6 +126,7 @@ export interface TLUiEventMap {
 	'open-context-menu': null
 	'adjust-shape-styles': null
 	'copy-link': null
+	'drag-tool': { id: string }
 	'image-replace': null
 	'video-replace': null
 	'open-kbd-shortcuts': null

package/src/lib/ui/hooks/menu-hooks.ts

@@ -123,6 +123,7 @@ export function useAnySelectedShapesCount(min?: number, max?: number) {
 
 /**
  * Returns true if the number of UNLOCKED selected shapes is at least min or at most max.
+ * @public
  */
 export function useUnlockedSelectedShapesCount(min?: number, max?: number) {
 	const editor = useEditor()

package/src/lib/ui/hooks/useTools.tsx

@@ -1,4 +1,13 @@
-import { Editor, GeoShapeGeoStyle, useMaybeEditor } from '@tldraw/editor'
+import {
+	assertExists,
+	createShapeId,
+	Editor,
+	GeoShapeGeoStyle,
+	TLPointerEventInfo,
+	TLShapeId,
+	toRichText,
+	useMaybeEditor,
+} from '@tldraw/editor'
 import * as React from 'react'
 import { EmbedDialog } from '../components/EmbedDialog'
 import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
@@ -19,6 +28,7 @@ export interface TLUiToolItem<
 	shortcutsLabel?: TranslationKey
 	icon: IconType | TLUiIconJsx
 	onSelect(source: TLUiEventSource): void
+	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 	/**
 	 * The keyboard shortcut for this tool. This is a string that can be a single key,
 	 * or a combination of keys.
@@ -126,21 +136,27 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onToolSelect(source, this)
 				},
 			},
-			...[...GeoShapeGeoStyle.values].map((id) => ({
-				id,
-				label: `tool.${id}` as TLUiTranslationKey,
+			...[...GeoShapeGeoStyle.values].map((geo) => ({
+				id: geo,
+				label: `tool.${geo}` as TLUiTranslationKey,
 				meta: {
-					geo: id,
+					geo,
 				},
-				kbd: id === 'rectangle' ? 'r' : id === 'ellipse' ? 'o' : undefined,
-				icon: ('geo-' + id) as TLUiIconType,
+				kbd: geo === 'rectangle' ? 'r' : geo === 'ellipse' ? 'o' : undefined,
+				icon: ('geo-' + geo) as TLUiIconType,
 				onSelect(source: TLUiEventSource) {
 					editor.run(() => {
-						editor.setStyleForNextShapes(GeoShapeGeoStyle, id)
+						editor.setStyleForNextShapes(GeoShapeGeoStyle, geo)
 						editor.setCurrentTool('geo')
-						onToolSelect(source, this, `geo-${id}`)
+						onToolSelect(source, this, `geo-${geo}`)
 					})
 				},
+				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => editor.createShape({ id, type: 'geo', props: { geo } }),
+					})
+					trackEvent('drag-tool', { source, id: 'geo' })
+				},
 			})),
 			{
 				id: 'arrow',
@@ -151,6 +167,17 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('arrow')
 					onToolSelect(source, this)
 				},
+				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) =>
+							editor.createShape({
+								id,
+								type: 'arrow',
+								props: { start: { x: 0, y: 0 }, end: { x: 200, y: 0 } },
+							}),
+					})
+					trackEvent('drag-tool', { source, id: 'arrow' })
+				},
 			},
 			{
 				id: 'line',
@@ -171,6 +198,12 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('frame')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => editor.createShape({ id, type: 'frame' }),
+					})
+					trackEvent('drag-tool', { source, id: 'frame' })
+				},
 			},
 			{
 				id: 'text',
@@ -181,6 +214,17 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('text')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) =>
+							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
+						onDragEnd: (id) => {
+							editor.emit('select-all-text', { shapeId: id })
+							editor.setEditingShape(id)
+						},
+					})
+					trackEvent('drag-tool', { source, id: 'text' })
+				},
 			},
 			{
 				id: 'asset',
@@ -201,6 +245,16 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('note')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => editor.createShape({ id, type: 'note' }),
+						onDragEnd: (id) => {
+							editor.emit('select-all-text', { shapeId: id })
+							editor.setEditingShape(id)
+						},
+					})
+					trackEvent('drag-tool', { source, id: 'note' })
+				},
 			},
 			{
 				id: 'laser',
@@ -244,7 +298,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 		}
 
 		return tools
-	}, [overrides, editor, helpers, onToolSelect])
+	}, [overrides, editor, helpers, onToolSelect, trackEvent])
 
 	return <ToolsContext.Provider value={tools}>{children}</ToolsContext.Provider>
 }
@@ -259,3 +313,57 @@ export function useTools() {
 
 	return ctx
 }
+
+/**
+ * Options for {@link onDragFromToolbarToCreateShape}.
+ * @public
+ */
+export interface OnDragFromToolbarToCreateShapesOpts {
+	/**
+	 * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
+	 * immediately updated with the correct position.
+	 */
+	createShape(id: TLShapeId): void
+	/**
+	 * Called once the drag interaction has finished.
+	 */
+	onDragEnd?(id: TLShapeId): void
+}
+
+/**
+ * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
+ * the toolbar.
+ * @public
+ */
+export function onDragFromToolbarToCreateShape(
+	editor: Editor,
+	info: TLPointerEventInfo,
+	opts: OnDragFromToolbarToCreateShapesOpts
+) {
+	const { x, y } = editor.inputs.currentPagePoint
+
+	const stoppingPoint = editor.markHistoryStoppingPoint('drag shape tool')
+	editor.setCurrentTool('select.translating')
+
+	const id = createShapeId()
+	opts.createShape(id)
+	const shape = assertExists(editor.getShape(id), 'Shape not found')
+
+	const { w, h } = editor.getShapePageBounds(id)!
+	editor.updateShape({ id, type: shape.type, x: x - w / 2, y: y - h / 2 })
+	editor.select(id)
+
+	editor.setCurrentTool('select.translating', {
+		...info,
+		target: 'shape',
+		shape: editor.getShape(id),
+		isCreating: true,
+		creatingMarkId: stoppingPoint,
+		onCreate() {
+			editor.setCurrentTool('select.idle')
+			editor.select(id)
+			opts.onDragEnd?.(id)
+		},
+	})
+	editor.getCurrentTool().setCurrentToolIdMask(shape.type)
+}

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -286,6 +286,10 @@ export type TLUiTranslationKey =
 	| 'a11y.repeat-shape'
 	| 'a11y.move-shape'
 	| 'a11y.move-shape-faster'
+	| 'a11y.rotate-shape-cw'
+	| 'a11y.rotate-shape-ccw'
+	| 'a11y.rotate-shape-cw-fine'
+	| 'a11y.rotate-shape-ccw-fine'
 	| 'a11y.enlarge-shape'
 	| 'a11y.shrink-shape'
 	| 'a11y.pan-camera'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -287,6 +287,10 @@ export const DEFAULT_TRANSLATION = {
 	'a11y.repeat-shape': 'Repeat shape',
 	'a11y.move-shape': 'Move shape',
 	'a11y.move-shape-faster': 'Move shape faster',
+	'a11y.rotate-shape-cw': 'Rotate shape clockwise',
+	'a11y.rotate-shape-ccw': 'Rotate shape counterclockwise',
+	'a11y.rotate-shape-cw-fine': 'Rotate shape clockwise (fine)',
+	'a11y.rotate-shape-ccw-fine': 'Rotate shape counterclockwise (fine)',
 	'a11y.enlarge-shape': 'Enlarge shape',
 	'a11y.shrink-shape': 'Shrink shape',
 	'a11y.pan-camera': 'Pan camera',

package/src/lib/ui/kbd-utils.ts

@@ -2,6 +2,7 @@ import { tlenv } from '@tldraw/editor'
 
 // N.B. We rework these Windows placeholders down below.
 const cmdKey = tlenv.isDarwin ? '⌘' : '__CTRL__'
+const ctrlKey = tlenv.isDarwin ? '⌃' : '__CTRL__'
 const altKey = tlenv.isDarwin ? '⌥' : '__ALT__'
 
 /** @public */
@@ -19,7 +20,7 @@ export function kbd(str: string) {
 					? s.replace(/[[\]]/g, '')
 					: s
 							.replace(/cmd\+/g, cmdKey)
-							.replace(/ctrl\+/g, cmdKey)
+							.replace(/ctrl\+/g, ctrlKey)
 							.replace(/alt\+/g, altKey)
 							.replace(/shift\+/g, '⇧')
 							// Backwards compatibility with the old system.

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.15.0'
+export const version = '3.16.0-canary.0e0fb8bde89d'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-30T09:07:27.887Z',
-	patch: '2025-07-30T09:07:27.887Z',
+	minor: '2025-07-31T14:45:19.563Z',
+	patch: '2025-07-31T14:45:19.563Z',
 }

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -149,13 +149,20 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
       "kind": "arc",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -315,13 +322,20 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
       "kind": "elbow",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -221,7 +221,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'arrow',
 					props: {
-						text,
+						richText: toRichText(text),
 						kind: element.elbowed ? 'elbow' : 'arc',
 						bend: getBend(element, start, end),
 						dash: getDash(element),

package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap

@@ -112,13 +112,20 @@ exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 146.32,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -241,13 +248,20 @@ exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 293.36,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -389,13 +403,20 @@ exports[`buildFromV1Document test fixtures incorrect-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 252.64,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",