Symatem / WiredPanels

Features

• 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

API

Table of Contents

• 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

Wire

Type: Object

Properties

• type string ='wire'

Panel

Type: Object

Properties

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

Socket

Type: Object

Properties

• type string ='socket'
• wiresPerPanel Map

WireDragCallback

Type: Function

Parameters

• socket Socket

Returns boolean true if drag action should start

WireConnectCallback

Type: Function

Parameters

• socket Socket
• wire Wire

Returns boolean true if connect action should succeed

ActivateCallback

Type: Function

Parameters

• selection Set

RemoveCallback

Type: Function

Parameters

• selection Set wires and panels to be removed

Returns void

CopyCallback

Type: Function

Parameters

• clipboardData Object

Returns boolean true if data was copied

PasteCallback

Type: Function

Parameters

• clipboardData Object

Returns boolean true if data was accepted and can be pasted

WiredPanels

Container holding the graph of panels and wires

Parameters

• 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

Properties

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

createWire

Create a new wire

Parameters

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

Returns Wire wire

createPanel

Create a new panel

Parameters

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

Returns Panel panel

createSocket

Create a new socket

Parameters

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

Returns Socket socket

updatePanelSockets

Parameters

• panel Panel

updatePanelGeometry

Parameters

• panel Panel

Examples

Try online with source code