Claude finished @steveruizok's task in 2m 26s —— View job

Research findings: canBind implementation

I've researched the current canBind implementation and analyzed what changes would be needed. Here's what I found:

Current implementation

The ShapeUtil.canBind method currently receives only shape types, not full shape objects:

Interface (packages/editor/src/lib/editor/shapes/ShapeUtil.ts:42-49):

export interface TLShapeUtilCanBindOpts<Shape extends TLShape = TLShape> {
    fromShapeType: TLShape['type']  // Just the type string
    toShapeType: TLShape['type']    // Just the type string
    bindingType: string
}

Method (packages/editor/src/lib/editor/shapes/ShapeUtil.ts:221-223):

canBind(_opts: TLShapeUtilCanBindOpts): boolean {
    return true
}

How it's called (packages/editor/src/lib/editor/Editor.ts:6235-6258):

canBindShapes({ fromShape, toShape, binding }): boolean {
    const fromShapeType = typeof fromShape === 'string' ? fromShape : fromShape.type
    const toShapeType = typeof toShape === 'string' ? toShape : toShape.type
    const bindingType = typeof binding === 'string' ? binding : binding.type

    const canBindOpts = { fromShapeType, toShapeType, bindingType }
    // Only types are passed, not the full shape objects!
    
    // ...calls this.getShapeUtil(...).canBind(canBindOpts)
}

Key findings

Steve's assumption was correct: The canBindShapes method in Editor does accept full shape objects, but currently only extracts the type strings before passing them to canBind.
Shape objects are available at call sites: In createBindings (Editor.ts:6141) and updateBindings (Editor.ts:6189), full shape objects are already fetched via this.getShape() before calling canBindShapes.
Mixed usage patterns exist: Some call sites pass full shape objects, others pass just type strings:
- With objects: canBindShapes({ fromShape: shapeObj, toShape: shapeObj, ... })
- With strings: canBindShapes({ fromShape: 'arrow', toShape: shape, ... }) (packages/tldraw/src/test/arrows-megabus.test.tsx:543)
Pattern inconsistency: Other ShapeUtil methods like onResize, onTranslate, onBeforeCreate, etc. receive full shape objects, not just types. The canBind method is an outlier.

Proposed solution

Add optional shape references to TLShapeUtilCanBindOpts:

1. Update the interface (packages/editor/src/lib/editor/shapes/ShapeUtil.ts):

export interface TLShapeUtilCanBindOpts<Shape extends TLShape = TLShape> {
    fromShapeType: TLShape['type']
    toShapeType: TLShape['type']
    bindingType: string
    // New optional fields:
    fromShape?: TLShape
    toShape?: TLShape
}

2. Update Editor.canBindShapes (packages/editor/src/lib/editor/Editor.ts):

canBindShapes({ fromShape, toShape, binding }): boolean {
    const fromShapeType = typeof fromShape === 'string' ? fromShape : fromShape.type
    const toShapeType = typeof toShape === 'string' ? toShape : toShape.type
    const bindingType = typeof binding === 'string' ? binding : binding.type

    const canBindOpts = { 
        fromShapeType, 
        toShapeType, 
        bindingType,
        // Pass full shapes when available:
        fromShape: typeof fromShape === 'object' && 'id' in fromShape ? fromShape : undefined,
        toShape: typeof toShape === 'object' && 'id' in toShape ? toShape : undefined
    }
    // ...
}

3. Usage in custom ShapeUtils:

override canBind(opts: TLShapeUtilCanBindOpts): boolean {
    if (opts.toShape) {
        // Can now check shape props!
        return opts.toShape.props.someProperty === 'expectedValue'
    }
    // Fallback to type-only logic when shapes aren't provided
    return opts.toShapeType !== 'mytype'
}

Why this approach

✅ Fully backward compatible: Optional fields mean existing implementations continue working
✅ No breaking changes: All current canBind implementations work as-is
✅ Follows existing patterns: Matches how other ShapeUtil methods receive shape data
✅ Handles mixed usage: Works whether shapes or strings are passed to canBindShapes
✅ Low implementation complexity: Single interface change + single method update

Alternative considered

Pass shape IDs instead of full objects:

fromShapeId?: TLShapeId
toShapeId?: TLShapeId

This would allow canBind to fetch fresh data via this.editor.getShape() if needed, but adds extra lookups and doesn't match the pattern used by other ShapeUtil methods.

Next steps

If this approach looks good, I can implement it. The changes would need:

Public API updates in packages/editor
API review (yarn api-check)
Tests to verify backward compatibility
Tests for new functionality

Allow ShapeUtil.canBind to receive full shape objects, not just types #7748

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions