• Framework to build an Editor or Visualizer
• No dependencies / no bloatware
• Elements: Panels, sockets and wires
• Configure: Many customizable options & parameters
• Rendering
  • SVG
  • CSS animations
  • Automatic layout inside panels (depending on text width)
  • Force layout and overlap avoidance between panels
• Mouse controls
  • Touch event handlers for mobile use
  • Move panels
  • Drag / draw wires
  • Selection: Click, Shift Invert, Box
• Keyboard controls
  • Enter: Use / Activate
  • Backspace: Delete
  • Meta (+ Shift) + Z: Undo & Redo
  • Meta + A: Select all panels

• Wire
  • Properties
• Panel
  • Properties
• Socket
  • Properties
• WireDragCallback
  • Parameters
• WireConnectCallback
  • Parameters
• ActivateCallback
  • Parameters
• RemoveCallback
  • Parameters
• CopyCallback
  • Parameters
• PasteCallback
  • Parameters
• WiredPanels
  • Parameters
  • Properties
  • createWire
    • Parameters
  • createPanel
    • Parameters
  • createSocket
    • Parameters
  • updatePanelSockets
    • Parameters
  • updatePanelGeometry
    • Parameters

Type: Object

• type string ='wire'

Type: Object

• type string ='panel'
• sockets Array<Socket>
• springs Map

Type: Object

• type string ='socket'
• wiresPerPanel Map

Type: Function

• socket Socket

Returns boolean true if drag action should start

Type: Function

• socket Socket
• wire Wire

Returns boolean true if connect action should succeed

Type: Function

• selection Set

Type: Function

• selection Set wires and panels to be removed

Returns void

Type: Function

• clipboardData Object

Returns boolean true if data was copied

Type: Function

• clipboardData Object

Returns boolean true if data was accepted and can be pasted

Container holding the graph of panels and wires

• config Object (optional, default {})
  • config.socketRadius number
  • config.verticalSocketsOutside boolean
  • config.horizontalSocketsOutside boolean
  • config.wireStyle string
  • config.panelCornerRadius number
  • config.panelPadding number
  • config.panelMargin number
  • config.springLength number
  • config.springStiffness number
  • config.panelCollision boolean
  • config.borderCollision boolean
  • config.undoActionLimit number number of actions that can be undone
• eventListeners Object (optional, default {})
  • eventListeners.wireDrag WireDragCallback
  • eventListeners.wireConnect WireConnectCallback
  • eventListeners.activate ActivateCallback
  • eventListeners.remove RemoveCallback
  • eventListeners.copy CopyCallback
  • eventListeners.paste PasteCallback

• panels Set
• springs Set
• wires Set
• selection Set
• config Object

Create a new wire

• wire Object skeleton wire (optional, default {})

Returns Wire wire

Create a new panel

• panel Object skeleton panel (optional, default {})

Returns Panel panel

Create a new socket

• socket Object skeleton socket (optional, default {})

Returns Socket socket

• panel Panel

• panel Panel

Try online with source code