Skip to content

.refactor-inventory.md

Latest commit

 

History

History
153 lines (120 loc) · 3.67 KB

.refactor-inventory.md

File metadata and controls

153 lines (120 loc) · 3.67 KB

NodeCanvas Refactoring Inventory

Date: 2025-10-18 Pre-Refactor Baseline

File Statistics

  • Total Lines: 10,929
  • Top-level Declarations: 321

React Hooks Usage

  • useState: 82
  • useRef: 58
  • useEffect: 49
  • useMemo: 23
  • useCallback: 55

Function Categories

  • Event Handlers (const handle*): 72
  • Touch Handlers (specific): 19
  • Render Functions (const render*): 3
  • Helper Functions (marked): 10

Key Functions List

Panel Resizing

  • beginDrag
  • onDragMove
  • endDrag
  • renderPanelResizers
  • onPanelChanged

Touch Input

  • normalizeTouchEvent
  • handleTouchStartCanvas
  • handleTouchMoveCanvas
  • handleTouchEndCanvas
  • handleNodeTouchStart
  • handleNodeTouchMove
  • handleNodeTouchEnd

Viewport

  • handleFullscreenChange
  • handleResize
  • clientToCanvasCoordinates

Geometry/Routing Helpers

  • getPortPosition
  • calculateStaggeredPosition
  • (Manhattan routing helper)
  • (Clean routing helper)
  • (Edge intersection helpers)
  • (Color interpolation)

Carousel Handlers

  • onCarouselAnimationStateChange
  • onCarouselClose
  • onCarouselReplaceNode
  • onCarouselExitAnimationComplete

Control Panel Handlers

  • handleNodeControlPanelAnimationComplete
  • handleConnectionControlPanelAnimationComplete
  • handleGroupControlPanelAnimationComplete

Node Panel Actions (PieMenu + ControlPanel)

  • handleNodePanelDelete
  • handleNodePanelAdd
  • handleNodePanelUp
  • handleNodePanelOpenInPanel
  • handleNodePanelDecompose
  • handleNodePanelAbstraction
  • handleNodePanelEdit
  • handleNodePanelSave
  • handleNodePanelMore
  • handleNodePanelGroup

Group Panel Actions

  • handleGroupPanelUngroup
  • handleGroupPanelEdit
  • handleGroupPanelColor
  • handleGroupPanelConvertToNodeGroup

Node Group Actions

  • handleNodeGroupDiveIntoDefinition
  • handleNodeGroupOpenInPanel

Abstraction Actions

  • handleAbstractionDimensionChange
  • handleAddAbstractionDimension
  • handleDeleteAbstractionDimension
  • handleExpandAbstractionDimension
  • handleAbstractionControlPanelAnimationComplete
  • handleToggleBookmark

Verification Checklist

After refactoring, verify:

  • All functions exist (in original OR extracted files)
  • Line count math: Original = Extracted + Remaining (±50 lines for imports)
  • All event handlers still connected
  • No orphaned code
  • All state variables still used
  • All refs still used

Extraction Plan

Phase 1A: Helper Functions → utils/canvas/

  • geometryUtils.js (clientToCanvasCoordinates, etc.)
  • edgeRouting.js (Manhattan, clean routing)
  • colorUtils.js (interpolation)
  • portPositioning.js (getPortPosition, calculateStaggeredPosition)

Phase 1B: Input Hooks

  • useWheelInput.js
  • useTouchInput.js (6 functions)
  • useMouseInput.js
  • usePanZoom.js
  • useSelectionBox.js

Phase 1C: Panel Resizers Component

  • PanelResizers.jsx (4 functions)

Phase 1D: Node Actions Hook (Unify PieMenu + ControlPanel)

  • useNodeActions.js (14 node panel handlers)
  • useGroupActions.js (4 group handlers)
  • useAbstractionActions.js (5 abstraction handlers)

Phase 1E: Carousel Hook

  • useCarousel.js (4 carousel handlers)

Progress Update (2025-10-18)

Phase 1 COMPLETE: Pure helpers extracted (631 lines) Phase 2 COMPLETE: Unified actions hook created (155 lines)

✅ colorUtils.js ✅ portPositioning.js ✅ edgeRouting.js ✅ geometryUtils.js ✅ useNodeActions.js

Current: 10,450 lines Reduction: 479 lines (4.4%)

See .refactor-progress.md for detailed progress report.

Post-Refactor Target

Target Lines in NodeCanvas.jsx: ~3,000-3,500 Remaining Reduction Needed: ~65%