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
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from mozilla/draw-route-ui
feat(draw-route): scaffold the draw route UI
- Loading branch information
Showing
10 changed files
with
582 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,255 @@ | ||
| 'use strict' | ||
|
|
||
| ###* | ||
| # @ngdoc function | ||
| # @name seaspongeApp.controller:DrawCtrl | ||
| # @description | ||
| # # DrawCtrl | ||
| # Controller of the seaspongeApp | ||
| ### | ||
| angular.module('seaspongeApp') | ||
| .controller 'DrawCtrl', ($scope) -> | ||
|
|
||
| jsPlumb.ready -> | ||
| instance = jsPlumb.getInstance( | ||
| # default drag options | ||
| DragOptions: | ||
| cursor: "pointer" | ||
| zIndex: 2000 | ||
| # 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: [ | ||
| [ | ||
| "Arrow" | ||
| { | ||
| location: 1 | ||
| } | ||
| ] | ||
| [ | ||
| "Label" | ||
| { | ||
| location: 0.1 | ||
| id: "label" | ||
| cssClass: "aLabel" | ||
| } | ||
| ] | ||
| ] | ||
| 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" | ||
| } | ||
| ]] | ||
|
|
||
| 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" | ||
| } | ||
| ]] | ||
|
|
||
| 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 | ||
| i++ | ||
| j = 0 | ||
| while j < targetAnchors.length | ||
| targetUUID = toId + targetAnchors[j] | ||
| instance.addEndpoint "flowchart" + toId, targetEndpoint, | ||
| anchor: targetAnchors[j] | ||
| uuid: targetUUID | ||
| j++ | ||
| return | ||
|
|
||
| # suspend drawing and initialise. | ||
| instance.doWhileSuspended -> | ||
| _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 | ||
| uuids: [ | ||
| "Window2BottomCenter" | ||
| "Window3TopCenter" | ||
| ] | ||
| editable: true | ||
|
|
||
| instance.connect | ||
| uuids: [ | ||
| "Window2LeftMiddle" | ||
| "Window4LeftMiddle" | ||
| ] | ||
| editable: true | ||
|
|
||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| .flowchart-demo .window { border:1px solid #346789; | ||
| box-shadow: 2px 2px 19px #aaa; | ||
| -o-box-shadow: 2px 2px 19px #aaa; | ||
| -webkit-box-shadow: 2px 2px 19px #aaa; | ||
| -moz-box-shadow: 2px 2px 19px #aaa; | ||
| -moz-border-radius:0.5em; | ||
| border-radius:0.5em; | ||
| opacity:0.8; | ||
| filter:alpha(opacity=80); | ||
|
|
||
| text-align:center; | ||
| z-index:20; position:absolute; | ||
| background-color:#eeeeef; | ||
| color:black; | ||
| font-family:helvetica;padding:0.5em; | ||
| font-size:0.9em; | ||
| } | ||
|
|
||
| .flowchart-demo .window:hover { | ||
| box-shadow: 2px 2px 19px #444; | ||
| -o-box-shadow: 2px 2px 19px #444; | ||
| -webkit-box-shadow: 2px 2px 19px #444; | ||
| -moz-box-shadow: 2px 2px 19px #444; | ||
| opacity:0.6; | ||
| filter:alpha(opacity=60); | ||
| } | ||
|
|
||
| .flowchart-demo .active { | ||
| border:1px dotted green; | ||
| } | ||
| .flowchart-demo .hover { | ||
| border:1px dotted red; | ||
| } | ||
|
|
||
| #flowchartWindow1 { top:34em;left:5em;} | ||
| #flowchartWindow2 { top:7em; left:36em;} | ||
| #flowchartWindow3 { top:27em;left:48em; } | ||
| #flowchartWindow4 { top:23em; left:22em;} | ||
| .flowchart-demo ._jsPlumb_connector { z-index:4; } | ||
| .flowchart-demo ._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; } | ||
|
|
||
| .flowchart-demo .aLabel { | ||
| background-color:white; | ||
| padding:0.4em; | ||
| font:12px sans-serif; | ||
| color:#444; | ||
| z-index:21; | ||
| border:1px dotted gray; | ||
| opacity:0.8; | ||
| filter:alpha(opacity=80); | ||
| cursor: pointer; | ||
| } | ||
| .flowchart-demo .aLabel._jsPlumb_hover { | ||
| background-color:#5C96BC; | ||
| color:white; | ||
| border:1px solid white; | ||
| } |
Oops, something went wrong.