Change colors for connections and elements

[Frozenfire92]

Users may wish to have multiple colors in their diagrams to help distinguish things based on their standards. Being able to easily change colors (or palettes) would add customization with an easy implementation.

[Glavin001]

Probably easily doable with jsPlumb because they use JSON configuration for the styling and pass that to the jsPlumb instance.

Here's our current:

# this is the paint style for the connecting lines..
    connectorPaintStyle =
      lineWidth: 4
      strokeStyle: "#61B7CF"
      joinstyle: "round"
      outlineColor: "white"
      outlineWidth: 2

    connectorHoverStyle =
      # .. and this is the hover style.
      lineWidth: 4
      strokeStyle: "#216477"
      outlineWidth: 2
      outlineColor: "white"

    endpointHoverStyle =
      fillStyle: "#216477"
      strokeStyle: "#216477"

    sourceEndpoint =
      # the definition of source endpoints (the small blue ones)
      endpoint: "Dot"
      paintStyle:
        strokeStyle: "#7AB02C"
        fillStyle: "transparent"
        radius: 7
        lineWidth: 3
      isSource: true
      connector: [
        "Flowchart"
        {
          stub: [
            40
            60
          ]
          gap: 10
          cornerRadius: 5
          alwaysRespectStubs: true
        }
      ]
      connectorStyle: connectorPaintStyle
      hoverPaintStyle: endpointHoverStyle
      connectorHoverStyle: connectorHoverStyle
      dragOptions: {}
      overlays: [[
        "Label"
        {
          location: [
            0.5
            1.5
          ]
          label: "Drag"
          cssClass: "endpointSourceLabel"
        }
      ]]

    targetEndpoint =
      # the definition of target endpoints (will appear when the user drags a connection)
      endpoint: "Dot"
      paintStyle:
        fillStyle: "#7AB02C"
        radius: 11
      hoverPaintStyle: endpointHoverStyle
      maxConnections: -1
      dropOptions:
        hoverClass: "hover"
        activeClass: "active"
      isTarget: true
      overlays: [[
        "Label"
        {
          location: [
            0.5
            -0.5
          ]
          label: "Drop"
          cssClass: "endpointTargetLabel"
        }
      ]]

[Glavin001]

^ those options are now available here:

seasponge/app/scripts/stencils/base.coffee

Lines 73 to 152 in f9adf80

	sourceEndpoint:
	# the definition of source endpoints (the small blue ones)
	endpoint: "Dot"
	paintStyle:
	strokeStyle: "#7AB02C"
	fillStyle: "transparent"
	radius: 7
	lineWidth: 3
	isSource: true
	connector: [
	"Flowchart"
	{
	stub: [
	40
	60
	]
	gap: 10
	cornerRadius: 5
	alwaysRespectStubs: true
	}
	]
	connectorStyle: @connectorPaintStyle
	hoverPaintStyle: @endpointHoverStyle
	connectorHoverStyle: @connectorHoverStyle
	dragOptions: {}
	overlays: [[
	"Label"
	{
	location: [
	0.5
	1.5
	]
	# label: "Drag"
	cssClass: "endpointSourceLabel"
	}
	]]
	targetEndpoint:
	# the definition of target endpoints (will appear when the user drags a connection)
	endpoint: "Dot"
	paintStyle:
	fillStyle: "#7AB02C"
	radius: 11
	hoverPaintStyle: @endpointHoverStyle
	maxConnections: -1
	dropOptions:
	hoverClass: "hover"
	activeClass: "active"
	isTarget: true
	overlays: [[
	"Label"
	{
	location: [
	0.5
	-0.5
	]
	# label: "Drop"
	cssClass: "endpointTargetLabel"
	}
	]]
	# this is the paint style for the connecting lines..
	connectorPaintStyle:
	lineWidth: 4
	strokeStyle: "#61B7CF"
	joinstyle: "round"
	outlineColor: "white"
	outlineWidth: 2
	connectorHoverStyle:
	# .. and this is the hover style.
	lineWidth: 4
	strokeStyle: "#216477"
	outlineWidth: 2
	outlineColor: "white"
	endpointHoverStyle:
	fillStyle: "#216477"
	strokeStyle: "#216477"