зеркало из https://github.com/mozilla/seasponge.git
feat(draw-route): Stencils are dynamically displayed from array
See #10. Improved the BaseStencil Class, added a BaseProcessStencil, and the side-bar for selecting stencils now is dynamically updated from the list of available stencils (can apply search filter in future).
This commit is contained in:
Glavin Wiechert
Родитель
2cc35fda59
Коммит
6655d57f98
|
|
@ -33,7 +33,7 @@ module.exports = (grunt) ->
|
|||
tasks: ["wiredep"]
|
||||
|
||||
coffee:
|
||||
files: ["<%= yeoman.app %>/scripts/{,*/}*.{coffee,litcoffee,coffee.md}"]
|
||||
files: ["<%= yeoman.app %>/scripts/**/*.{coffee,litcoffee,coffee.md}"]
|
||||
tasks: ["newer:coffee:dist"]
|
||||
|
||||
coffeeTest:
|
||||
|
|
@ -60,7 +60,7 @@ module.exports = (grunt) ->
|
|||
files: [
|
||||
"<%= yeoman.app %>/{,*/}*.html"
|
||||
".tmp/styles/{,*/}*.css"
|
||||
".tmp/scripts/{,*/}*.js"
|
||||
".tmp/scripts/**/*.js"
|
||||
"<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}"
|
||||
]
|
||||
|
||||
|
|
@ -169,7 +169,7 @@ module.exports = (grunt) ->
|
|||
files: [
|
||||
expand: true
|
||||
cwd: "<%= yeoman.app %>/scripts"
|
||||
src: "{,*/}*.coffee"
|
||||
src: "**/*.coffee"
|
||||
dest: ".tmp/scripts"
|
||||
ext: ".js"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
<!-- endbuild -->
|
||||
<!-- build:css(.tmp) styles/main.css -->
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/layout.css">
|
||||
<link rel="stylesheet" href="styles/draw.css">
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
|
||||
|
|
@ -86,6 +88,20 @@
|
|||
<script src="scripts/controllers/about.js"></script>
|
||||
<script src="scripts/controllers/draw.js"></script>
|
||||
<script src="scripts/stencils/base.js"></script>
|
||||
<script src="scripts/stencils/process/base-process.js"></script>
|
||||
<script src="scripts/stencils/process/general-process.js"></script>
|
||||
<script src="scripts/stencils/process/general-process.js"></script>
|
||||
<script src="scripts/stencils/process/os-process.js"></script>
|
||||
<script src="scripts/stencils/process/thread.js"></script>
|
||||
<script src="scripts/stencils/process/kernel-thread.js"></script>
|
||||
<script src="scripts/stencils/process/native.js"></script>
|
||||
<script src="scripts/stencils/process/managed.js"></script>
|
||||
<script src="scripts/stencils/process/thick.js"></script>
|
||||
<script src="scripts/stencils/process/browser-client.js"></script>
|
||||
<script src="scripts/stencils/process/web-server.js"></script>
|
||||
<script src="scripts/stencils/process/windows-store-process.js"></script>
|
||||
<script src="scripts/stencils/process/web.js"></script>
|
||||
<script src="scripts/stencils/process/web-service.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
angular.module('seaspongeApp')
|
||||
.controller 'DrawCtrl', ($scope) ->
|
||||
|
||||
$scope.stencils = window.stencils
|
||||
|
||||
jsPlumb.ready ->
|
||||
$scope.instance = instance = jsPlumb.getInstance(
|
||||
# default drag options
|
||||
|
|
@ -89,7 +91,7 @@ angular.module('seaspongeApp')
|
|||
jsPlumb.fire "jsPlumbDemoLoaded", instance
|
||||
return
|
||||
|
||||
$scope.addStencil = () ->
|
||||
$scope.addStencil = (stencilClass) ->
|
||||
instance = $scope.instance
|
||||
# Get container
|
||||
$container = $('#flowchart-demo')
|
||||
|
|
@ -98,5 +100,6 @@ angular.module('seaspongeApp')
|
|||
uuid = jsPlumbUtil.uuid()
|
||||
console.log('uuid: ', uuid)
|
||||
#
|
||||
stencil = new stencils.BaseStencil(uuid, $container, instance)
|
||||
# stencil = new stencils.BaseStencil(uuid, $container, instance)
|
||||
stencil = new stencilClass(uuid, $container, instance)
|
||||
console.log(stencil)
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
@stencils = {}
|
||||
class @stencils.BaseStencil
|
||||
|
||||
title: "Base"
|
||||
@title: "Base"
|
||||
@type: "Base"
|
||||
@anchors: []
|
||||
@icon: null
|
||||
classNames: ["stencil", "window"]
|
||||
@icon: "http://upload.wikimedia.org/wikipedia/de/2/2e/Mozilla_Firefox_Logo.png"
|
||||
@classNames: ["stencil", "window"]
|
||||
$element: null
|
||||
|
||||
constructor: (@uuid, @$container, @plumbInstance) ->
|
||||
# Create new element
|
||||
@$element = $element = $('<div/>', {
|
||||
id: @uuid
|
||||
}).append($('<p/>').text(@title))
|
||||
}).append($('<p/>').text("#{@constructor.title} <#{@constructor.type}>"))
|
||||
# Add class names
|
||||
console.log(@classNames)
|
||||
cls = @classNames.join(" ")
|
||||
console.log(@constructor.classNames)
|
||||
cls = @constructor.classNames.join(" ")
|
||||
$element.addClass(cls)
|
||||
# Add to container
|
||||
@$container.append($element);
|
||||
|
|
@ -97,7 +97,7 @@ class @stencils.BaseStencil
|
|||
0.5
|
||||
1.5
|
||||
]
|
||||
label: "Drag"
|
||||
# label: "Drag"
|
||||
cssClass: "endpointSourceLabel"
|
||||
}
|
||||
]]
|
||||
|
|
@ -122,7 +122,7 @@ class @stencils.BaseStencil
|
|||
0.5
|
||||
-0.5
|
||||
]
|
||||
label: "Drop"
|
||||
# label: "Drop"
|
||||
cssClass: "endpointTargetLabel"
|
||||
}
|
||||
]]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
class @stencils.BaseProcessStencil extends @stencils.BaseStencil
|
||||
|
||||
@title: "Base"
|
||||
@type: "process"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.BrowserClientStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Browser Client"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.GeneralProcessStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "General Process"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.KernelThreadStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Kernel Thread"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.ManagedStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Managed"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.NativeStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Native"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.OSProcessStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "OS Process"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.ThickStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Thick"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.ThreadStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Thread"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.VirtualStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Virtual"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.WebServerStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Web Server"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.WebServiceStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Web Service"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.WebStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Web"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.Win31ServiceStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Win32 Service"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
class @stencils.WindowsStoreProcessStencil extends @stencils.BaseProcessStencil
|
||||
|
||||
@title: "Windows Store Process"
|
||||
|
|
@ -1,57 +1,79 @@
|
|||
.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);
|
||||
.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;
|
||||
|
||||
line-height: normal !important;
|
||||
|
||||
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);
|
||||
}
|
||||
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;
|
||||
border: 1px dotted green;
|
||||
}
|
||||
.flowchart-demo .hover {
|
||||
border:1px dotted red;
|
||||
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;
|
||||
}
|
||||
|
||||
#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;
|
||||
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;
|
||||
background-color: #5c96bc;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,12 +53,16 @@
|
|||
<div class="tab-pane active" id="home">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="" class="thumbnail" ng-click="addStencil()">
|
||||
<img src="http://upload.wikimedia.org/wikipedia/de/2/2e/Mozilla_Firefox_Logo.png" alt="...">
|
||||
Stencil 1
|
||||
|
||||
<div class="col-xs-6 col-md-3" ng-repeat="stencil in stencils | filter:{ title:'!Base' }">
|
||||
<a href="" class="thumbnail" ng-click="addStencil(stencil)">
|
||||
<img ng-src="{{stencil.icon}}" ng-alt="{{stencil.title}}">
|
||||
<span class="stencil-title">{{stencil.title}}</span>
|
||||
<span class="stencil-type label label-info">{{stencil.type}}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="" class="thumbnail" ng-click="addStencil()">
|
||||
<img src="http://upload.wikimedia.org/wikipedia/de/2/2e/Mozilla_Firefox_Logo.png" alt="...">
|
||||
|
|
@ -77,6 +81,7 @@
|
|||
Stencil 4
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче