Skip to content
This repository has been archived by the owner on Apr 17, 2018. It is now read-only.

Commit

Permalink
chore(draw-route): finish setting up jsPlumb demo
Browse files Browse the repository at this point in the history 
See http://www.jsplumb.org/demo/flowchart/jquery.html for demo.
  • Loading branch information
@Glavin001
Glavin001 committed Sep 22, 2014
1 parent ab2a5ab commit 055b8df
Show file tree
Hide file tree
Showing 5 changed files with 327 additions and 129 deletions.
4 changes: 2 additions & 2 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="bower_components/jsplumb/dist/jsplumb.css">
<link rel="stylesheet" href="bower_components/jsplumb/dist/demo-all.css">
<link rel="stylesheet" href="bower_components/jsplumb/dist/css/jsplumb.css">
<link rel="stylesheet" href="bower_components/jsplumb/dist/css/demo-all.css">
</head>
<body ng-app="seaspongeApp">
<!--[if lt IE 7]>
Expand Down
321 changes: 224 additions & 97 deletions app/scripts/controllers/draw.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,130 +10,257 @@
angular.module('seaspongeApp')
.controller 'DrawCtrl', ($scope) ->

jsPlumb.ready do ->

#list of possible anchor locations for the blue source element
sourceAnchors = [
[ 0, 1, 0, 1 ],
[ 0.25, 1, 0, 1 ],
[ 0.5, 1, 0, 1 ],
[ 0.75, 1, 0, 1 ],
[ 1, 1, 0, 1 ]
]

instance = window.instance = jsPlumb.getInstance(

# set default anchors. the 'connect' calls below will pick these up, and in fact setting these means
# that you also do not need to supply anchor definitions to the makeSource or makeTarget functions.
Anchors: [
sourceAnchors
"TopCenter"
]

# drag options
jsPlumb.ready ->
instance = jsPlumb.getInstance(

# default drag options
DragOptions:
cursor: "pointer"
zIndex: 2000

# default to blue at source and green at target
EndpointStyles: [
{
fillStyle: "#0d78bc"
}
{
fillStyle: "#558822"
}
]

# blue endpoints 7 px; green endpoints 11.
Endpoints: [


# the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
# case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays: [
[
"Dot"
"Arrow"
{
radius: 7
location: 1
}
]
[
"Dot"
"Label"
{
radius: 11
location: 0.1
id: "label"
cssClass: "aLabel"
}
]
]

# default to a gradient stroke from blue to green. for IE provide all green fallback.
PaintStyle:
gradient:
stops: [
[
0
"#0d78bc"
]
[
1
"#558822"
]
Container: "content-right"
)

# 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"
}
]]

strokeStyle: "#558822"
lineWidth: 10
targetEndpoint =

Container: "jsPlumb-area"
)
# the definition of target endpoints (will appear when the user drags a connection)
endpoint: "Dot"
paintStyle:
fillStyle: "#7AB02C"
radius: 11

# click listener for the enable/disable link.
jsPlumb.on document.getElementById("enableDisableSource"), "click", (e) ->
state = instance.toggleSourceEnabled("sourceWindow1")
@innerHTML = ((if state then "disable" else "enable"))
jsPlumbUtil.consume e
return
hoverPaintStyle: endpointHoverStyle
maxConnections: -1
dropOptions:
hoverClass: "hover"
activeClass: "active"

# bind to a connection event, just for the purposes of pointing out that it can be done.
instance.bind "connection", (i, c) ->
console.log "connection", i.connection if typeof console isnt "undefined"
isTarget: true
overlays: [[
"Label"
{
location: [
0.5
-0.5
]
label: "Drop"
cssClass: "endpointTargetLabel"
}
]]

init = (connection) ->
connection.getOverlay("label").setLabel connection.sourceId.substring(15) + "-" + connection.targetId.substring(15)
connection.bind "editCompleted", (o) ->
console.log "connection edited. path is now ", o.path unless typeof console is "undefined"
return
return

_addEndpoints = (toId, sourceAnchors, targetAnchors) ->
i = 0
while i < sourceAnchors.length
sourceUUID = toId + sourceAnchors[i]
instance.addEndpoint "flowchart" + toId, sourceEndpoint,
anchor: sourceAnchors[i]
uuid: sourceUUID

# get the list of ".smallWindow" elements.
smallWindows = jsPlumb.getSelector(".smallWindow")
i++
j = 0
while j < targetAnchors.length
targetUUID = toId + targetAnchors[j]
instance.addEndpoint "flowchart" + toId, targetEndpoint,
anchor: targetAnchors[j]
uuid: targetUUID

# make them draggable
instance.draggable smallWindows
j++
return

# suspend drawing and initialise.
instance.doWhileSuspended ->

# make 'window1' a connection source. notice the filter parameter: it tells jsPlumb to ignore drags
# that started on the 'enable/disable' link on the blue window.
instance.makeSource "sourceWindow1",

#anchor:sourceAnchors, // you could supply this if you want, but it was set in the defaults above.
filter: (evt, el) ->
t = evt.target or evt.srcElement
t.tagName isnt "A"

isSource: true


# configure the .smallWindows as targets.
instance.makeTarget smallWindows,

#anchor:"TopCenter", // you could supply this if you want, but it was set in the defaults above.
dropOptions:
hoverClass: "hover"

uniqueEndpoint: true


# and finally connect a couple of small windows, just so its obvious what's going on when this demo loads.
_addEndpoints "Window4", [
"TopCenter"
"BottomCenter"
], [
"LeftMiddle"
"RightMiddle"
]
_addEndpoints "Window2", [
"LeftMiddle"
"BottomCenter"
], [
"TopCenter"
"RightMiddle"
]
_addEndpoints "Window3", [
"RightMiddle"
"BottomCenter"
], [
"LeftMiddle"
"TopCenter"
]
_addEndpoints "Window1", [
"LeftMiddle"
"RightMiddle"
], [
"TopCenter"
"BottomCenter"
]

# listen for new connections; initialise them the same way we initialise the connections at startup.
instance.bind "connection", (connInfo, originalEvent) ->
init connInfo.connection
return

# make all the window divs draggable
instance.draggable jsPlumb.getSelector(".flowchart-demo .window"),
grid: [
20
20
]

# THIS DEMO ONLY USES getSelector FOR CONVENIENCE. Use your library's appropriate selector
# method, or document.querySelectorAll:
#jsPlumb.draggable(document.querySelectorAll(".window"), { grid: [20, 20] });

# connect a few up
instance.connect
source: "sourceWindow1"
target: "targetWindow5"
uuids: [
"Window2BottomCenter"
"Window3TopCenter"
]
editable: true

instance.connect
source: "sourceWindow1"
target: "targetWindow2"
uuids: [
"Window2LeftMiddle"
"Window4LeftMiddle"
]
editable: true

return
instance.connect
uuids: [
"Window4TopCenter"
"Window4RightMiddle"
]
editable: true

instance.connect
uuids: [
"Window3RightMiddle"
"Window2RightMiddle"
]
editable: true

instance.connect
uuids: [
"Window4BottomCenter"
"Window1TopCenter"
]
editable: true

instance.connect
uuids: [
"Window3BottomCenter"
"Window1BottomCenter"
]
editable: true

#
#
# listen for clicks on connections, and offer to delete connections on click.
#
instance.bind "click", (conn, originalEvent) ->
jsPlumb.detach conn if confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?")
return

instance.bind "connectionDrag", (connection) ->
console.log "connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType
return

instance.bind "connectionDragStop", (connection) ->
console.log "connection " + connection.id + " was dragged"
return

instance.bind "connectionMoved", (params) ->
console.log "connection " + params.connection.id + " was moved"
return
return
jsPlumb.fire "jsPlumbDemoLoaded", instance
return
Loading

0 comments on commit 055b8df

Please sign in to comment.