Merge branch 'master' of github.com:mozilla/seasponge

2015-03-25 11:10:01 -03:00 · 2015-03-25 11:10:01 -03:00 · b0f6752cef
--- a/app/scripts/controllers/draw.coffee
+++ b/app/scripts/controllers/draw.coffee
@ -189,6 +189,26 @@ angular.module('seaspongeApp')
            # Render new diagram
            diagram.render($scope.instance, $scope.container)

+    $scope.zoomInDiagram = () ->
+        diagram = $scope.selectedDiagram
+        if diagram
+            diagram.zoom += 0.1
+            # diagram.zoom = if diagram.zoom > 1.0 then 1.0 else diagram.zoom
+            # Clear old diagram
+            diagram.constructor.clear($scope.instance, $scope.container)
+            # Render new diagram
+            diagram.render($scope.instance, $scope.container)
+
+    $scope.zoomOutDiagram = () ->
+        diagram = $scope.selectedDiagram
+        if diagram
+            diagram.zoom -= 0.1
+            # diagram.zoom = if diagram.zoom < 0.0 then 0.0 else diagram.zoom
+            # Clear old diagram
+            diagram.constructor.clear($scope.instance, $scope.container)
+            # Render new diagram
+            diagram.render($scope.instance, $scope.container)
+

    $scope.instance = instance = jsPlumb.getInstance(
                # default drag options
@ -213,8 +233,29 @@ angular.module('seaspongeApp')
                    }
                  ]
                ]
-                Container: "content-right"
-              )
+
+                # Note regarding the drawEndpoints option on jsPlumb.connect:
+                # with the default behaviour,
+                # jsPlumb uses the offsetParent of the source endpoint in a
+                # connection to make final adjustments to the position of a
+                # connector.
+                # When drawEndpoints is set to false,
+                # there is no offsetParent of the source endpoint because it
+                # is not visible.
+                # If your connection lies inside some container other
+                # than the document body, the connector will not be able
+                # to take that container's offset into account,
+                # and will most likely not be in the right place.
+                # You should either use the Blank endpoint when you
+                # don't want to see one,
+                # or instruct jsPlumb to attach everything to the
+                # document body (see below).
+                #
+                # Container: "content-right"
+                # Container: $scope.container
+                # Container: $('.diagram-endpoints-container')
+            )
+

    $scope.loadDiagram = (diagram) ->
        if diagram?
--- a/app/scripts/services/diagram.coffee
+++ b/app/scripts/services/diagram.coffee
@ -8,7 +8,7 @@
 # Factory in the seaspongeApp.
 ###
 angular.module('seaspongeApp')
-  .factory 'Diagram', [ 'Stencils', (Stencils) ->
+  .factory 'Diagram', [ 'Stencils', 'BaseStencil', (Stencils, BaseStencil) ->

    return class Diagram

@ -18,6 +18,7 @@ angular.module('seaspongeApp')
        elements: null
        flows: null
        boundaries: null
+        zoom: null

        # Class Methods
        @clear: (instance, container) ->
@ -37,6 +38,7 @@ angular.module('seaspongeApp')
            @elements = []
            @flows = []
            @boundaries = []
+            @zoom = 1.0

        serialize: =>
            serialized = {
@ -45,13 +47,16 @@ angular.module('seaspongeApp')
                elements: (element.serialize() for element in @elements)
                flows: @flows
                boundaries: (boundary.serialize() for boundary in @boundaries)
+                zoom: @zoom
            }
            return serialized

        @stencilClassForElement: (name) ->
-            stencilClass = (stencilClass for stencilClass in Stencils when stencilClass.name is name)
-            # console.log('stencilClass', stencilClass)
-            return stencilClass[0]
+            stencilClasses = (stencilClass for stencilClass in Stencils when stencilClass.name is name)
+            stencilClass = stencilClasses[0]
+            if not stencilClass?
+                stencilClass = BaseStencil
+            return stencilClass

        deserialize: (serialized) =>
            # Local
@ -63,10 +68,10 @@ angular.module('seaspongeApp')
                .deserialize(element) \
                for element in serialized.elements)
            @flows = serialized.flows
+            @zoom = serialized.zoom
            return @

        addElement: (stencilClass) ->
-            # stencil = new stencils.BaseStencil(uuid, $container, instance)
            stencil = new stencilClass()
            # console.log(stencil)
            @elements.push(stencil)
@ -74,7 +79,6 @@ angular.module('seaspongeApp')

        deleteElement: (element) ->
            index = @elements.indexOf(element)
-            console.log(index, @elements)
            if index > -1
                @elements.splice(index, 1)

@ -82,7 +86,7 @@ angular.module('seaspongeApp')
            jsPlumb.detach(flow)

        save: (instance, container) ->
-            console.log('save', instance, container)
+            # console.log('save', instance, container)
            # console.log('save before', @serialize())
            # Elements
            $elements = $('.stencil', container)
@ -115,7 +119,7 @@ angular.module('seaspongeApp')
              $scope = angular.element(container).scope()

              init = (connection) =>
-                console.log('init connection', connection)
+                # console.log('init connection', connection)
                connection.properties = connection.properties || {
                    label: connection.sourceId.substring(15) + "-" + connection.targetId.substring(15)
                    tags: []
@ -126,7 +130,7 @@ angular.module('seaspongeApp')
                connection.refreshLabel()

                connection.bind "editCompleted", (o) =>
-                  console.log "connection edited. path is now ", o.path  unless typeof console is "undefined"
+                #   console.log "connection edited. path is now ", o.path  unless typeof console is "undefined"
                  $scope.$apply =>
                      @save(instance, container)
                  return
@ -194,6 +198,22 @@ angular.module('seaspongeApp')
                #jsPlumb.draggable(document.querySelectorAll(".window"), { grid: [20, 20] });
                #

+                # FIXME: Diagram should be passed the Drawing Panel
+                # In fact, drawingPanel should be the container
+                $drawingPanel = $('.drawing-panel')
+
+                # Zoom
+                scale = "scale(#{@zoom})"
+                $drawingPanel.css({
+                  "-webkit-transform": scale,
+                  "-moz-transform": scale,
+                  "-ms-transform": scale,
+                  "-o-transform": scale,
+                  "transform": scale
+                })
+                $()
+                instance.setZoom(@zoom)
+
                # Repaint
                instance.repaint()
                instance.repaintEverything()
--- a/app/scripts/stencils/base.coffee
+++ b/app/scripts/stencils/base.coffee
@ -16,6 +16,7 @@ angular.module('seaspongeApp')
      title: null
      icon: null
      $element: null
+      $img: null
      location: null
      tags: null
      codeType: "Managed"
@ -63,15 +64,16 @@ angular.module('seaspongeApp')
        $category = $('<span/>', {
            class: "element-category"
        }).text("<#{@constructor.category}>")
-        $img = $('<img style="height:85%; width:85%; opacity:0.3; position:absolute; left:5px;">')
-        $img.attr('src', @icon)
+        console.log('i am here')
+        @$img = $('<img style="height:85%; width:85%; opacity:0.3; position:absolute; left:5px;">')
+        @$img.attr('src', @icon)

        $p = $('<p/>')
            .append(@$elementTitle)
            .append("<br/>")
            .append($category)

-        $element.append($img)
+        $element.append(@$img)
        $element.append($p)

        # Data
@ -127,6 +129,7 @@ angular.module('seaspongeApp')
      _addEndpoints: (instance, toId, sourceAnchors, targetAnchors) ->
        # console.log('add endpoints', arguments)
        # console.log(@sourceEndpoint, @targetEndpoint)
+        console.log('_addEndpoints', instance.getContainer())
        i = 0
        while i < sourceAnchors.length
          sourceUUID = "#{toId}-#{sourceAnchors[i]}"
@ -162,7 +165,7 @@ angular.module('seaspongeApp')
        return @

      refreshIcon: ->
-        # @$element.css("background-image", "url(#{@icon})")
+        @$img.attr('src', @icon)
        return @

      addDataClassification: ->
--- a/app/scripts/stencils/boundary/generic-trust-boundary.coffee
+++ b/app/scripts/stencils/boundary/generic-trust-boundary.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('GenericTrustBoundaryStencil', ['BaseBoundaryStencil', (BaseBoundaryStencil) ->
    return class GenericTrustBoundaryStencil extends BaseBoundaryStencil
      @title: "Generic Trust Boundary"
-      @icon: "/images/icons/connections1.svg"
+      @icon: "images/icons/connections1.svg"
 ])
--- a/app/scripts/stencils/external/authorization.coffee
+++ b/app/scripts/stencils/external/authorization.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('AuthorizationStencil', ['BaseExternalStencil', (BaseExternalStencil) ->
    return class AuthorizationStencil extends BaseExternalStencil
      @title: "Authorization"
-      @icon: "/images/icons/key20.svg"
+      @icon: "images/icons/key20.svg"
 ])
--- a/app/scripts/stencils/external/bot.coffee
+++ b/app/scripts/stencils/external/bot.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('BotStencil', ['BaseExternalStencil', (BaseExternalStencil) ->
    return class BotStencil extends BaseExternalStencil
      @title: "Bot"
-      @icon: "/images/icons/binary6.png"
+      @icon: "images/icons/binary6.png"
 ])
--- a/app/scripts/stencils/external/human-user.coffee
+++ b/app/scripts/stencils/external/human-user.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('HumanUserStencil', ['BaseExternalStencil', (BaseExternalStencil) ->
    return class HumanUserStencil extends BaseExternalStencil
      @title: "Human User"
-      @icon: "/images/icons/user91.svg"
+      @icon: "images/icons/user91.svg"
 ])
--- a/app/scripts/stencils/external/server.coffee
+++ b/app/scripts/stencils/external/server.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('ServerStencil', ['BaseExternalStencil', (BaseExternalStencil) ->
    return class ServerStencil extends BaseExternalStencil
      @title: "Server"
-      @icon: "/images/icons/server11.png"
+      @icon: "images/icons/server11.png"
 ])
--- a/app/scripts/stencils/external/service.coffee
+++ b/app/scripts/stencils/external/service.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('ServiceStencil', ['BaseExternalStencil', (BaseExternalStencil) ->
    return class ServiceStencil extends BaseExternalStencil
      @title: "Service"
-      @icon: "/images/icons/sitemap1.svg"
+      @icon: "images/icons/sitemap1.svg"
 ])
--- a/app/scripts/stencils/process/browser.coffee
+++ b/app/scripts/stencils/process/browser.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('WebBrowserStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class WebBrowserStencil extends BaseProcessStencil
        @title: "Web Browser"
-        @icon: "/images/icons/website17.svg"
+        @icon: "images/icons/website17.svg"
 ])
--- a/app/scripts/stencils/process/desktop.coffee
+++ b/app/scripts/stencils/process/desktop.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('DesktopStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class DesktopStencil extends BaseProcessStencil
        @title: "Desktop Computer"
-        @icon: "/images/icons/monitor97.svg"
+        @icon: "images/icons/monitor97.svg"
 ])
--- a/app/scripts/stencils/process/laptop.coffee
+++ b/app/scripts/stencils/process/laptop.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('LaptopStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class LaptopStencil extends BaseProcessStencil
        @title: "Laptop Computer"
-        @icon: "/images/icons/blogging.svg"
+        @icon: "images/icons/blogging.svg"
 ])
--- a/app/scripts/stencils/process/mobile-browser.coffee
+++ b/app/scripts/stencils/process/mobile-browser.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('MobileWebBrowserStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class MobileWebBrowserStencil extends BaseProcessStencil
        @title: "Mobile Web Browser"
-        @icon: "/images/icons/wifi7.svg"
+        @icon: "images/icons/wifi7.svg"
 ])
--- a/app/scripts/stencils/process/native-app.coffee
+++ b/app/scripts/stencils/process/native-app.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('NativeApplicationStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class NativeApplicationStencil extends BaseProcessStencil
        @title: "Native Application"
-        @icon: "/images/icons/website22.svg"
+        @icon: "images/icons/website22.svg"
 ])
--- a/app/scripts/stencils/process/process.coffee
+++ b/app/scripts/stencils/process/process.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('ProcessStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class ProcessStencil extends BaseProcessStencil
        @title: "Process"
-        @icon: "/images/icons/category.svg"
+        @icon: "images/icons/category.svg"
 ])
--- a/app/scripts/stencils/process/thread.coffee
+++ b/app/scripts/stencils/process/thread.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('ThreadStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class ThreadStencil extends BaseProcessStencil
        @title: "Thread"
-        @icon: "/images/icons/category.svg"
+        @icon: "images/icons/category.svg"
 ])
--- a/app/scripts/stencils/process/web-app.coffee
+++ b/app/scripts/stencils/process/web-app.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('WebApplicationStencil', ['BaseProcessStencil', (BaseProcessStencil) ->
    return class WebApplicationStencil extends BaseProcessStencil
        @title: "Web Application"
-        @icon: "/images/icons/website22.svg"
+        @icon: "images/icons/website22.svg"
 ])
--- a/app/scripts/stencils/store/cache.coffee
+++ b/app/scripts/stencils/store/cache.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('CacheStencil', ['BaseStoreStencil', (BaseStoreStencil) ->
    return class CacheStencil extends BaseStoreStencil
      @title: "Cache"
-      @icon: "/images/icons/storage20.svg"
+      @icon: "images/icons/storage20.svg"
 ])
--- a/app/scripts/stencils/store/data-store.coffee
+++ b/app/scripts/stencils/store/data-store.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('DataStoreStencil', ['BaseStoreStencil', (BaseStoreStencil) ->
    return class DataStoreStencil extends BaseStoreStencil
      @title: "Data Store"
-      @icon: "/images/icons/server11.svg"
+      @icon: "images/icons/server11.svg"
 ])
--- a/app/scripts/stencils/store/database.coffee
+++ b/app/scripts/stencils/store/database.coffee
@ -2,5 +2,5 @@ angular.module('seaspongeApp')
 .factory('DatabaseStencil', ['BaseStoreStencil', (BaseStoreStencil) ->
    return class DatabaseStencil extends BaseStoreStencil
      @title: "Database"
-      @icon: "/images/icons/database11.svg"
+      @icon: "images/icons/database11.svg"
 ])
--- a/app/views/draw.html
+++ b/app/views/draw.html
@ -54,12 +54,12 @@

                </ul>
                <ul class="nav navbar-nav">
-                    <li><a class="">
+                    <li><a class="" ng-click="zoomInDiagram()">
                        <i class="glyphicon glyphicon-zoom-in"></i>
                        Zoom-In
                    </a></li>
-                    <li><a class="">
-                        <i class="glyphicon glyphicon-zoom-in"></i>
+                    <li><a class="" ng-click="zoomOutDiagram()">
+                        <i class="glyphicon glyphicon-zoom-out"></i>
                        Zoom-Out
                    </a></li>
                </ul>
@ -676,6 +676,7 @@
          </div>
        </div>
      </div>
+
    </div>

  </div>