This repository has been archived by the owner on Apr 17, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 64
Change colors for connections and elements #31
Labels
Milestone
Comments
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"
}
]] |
^ those options are now available here: seasponge/app/scripts/stencils/base.coffee Lines 73 to 152 in f9adf80
|
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
The text was updated successfully, but these errors were encountered: