Udi Bauman avatar Udi Bauman committed a50c903

started using Backbone widget

Comments (0)

Files changed (4)

-*Model - simple UML editor*
+#Model - simple UML editor
 
 
-model is an exercise in writing a pure JavaScript UML editor, that will support collaboration & remote-storage.
+* model is an exercise in writing a pure JavaScript UML editor, that will support collaboration & remote-storage.
 
 
 
     <script src="static/js/models.js"></script>
     <script src="static/js/views.js"></script>
     <script src="static/js/controllers.js"></script>
+    <script src="static/js/play.js"></script>
 
   </body>
 </html>

model_app/controllers.coffee

       add_class()
 
 $ ->
-  drawer = new ClassDiagramDrawer
-  drawer.init()
   parse = create_parser()
   $("a[data-toggle=\"tab\"]").on "shown", (e) ->
     parse()
-
-  current_diagram.on "add", drawer.draw_class, drawer

model_app/views.coffee

-class ClassDiagramDrawer
+class ClassView extends Backbone.View
+  current_offset: 0
+  default_class_width: 150
+  default_member_height: 20
+  default_member_spacing: 20
+
+  initialize: =>
+    unless @svg
+      w = 675
+      h = 360
+      pack = d3.layout.pack()
+        .size([ w - 4, h - 4 ])
+        .value((d) -> d.size)
+      @svg = d3.select("#chart")
+        .append("svg")
+        .attr("width", w)
+        .attr("height", h)
+        .attr("class", "pack")
+        .append("g")
+        .attr("transform", "translate(2, 2)")
+
+
+  render: =>
+    data = @model.get_all_members()
+    x = @current_offset
+    y = 50
+    margin = 10
+    @el = @svg.append("g")
+      .attr("x", x)
+      .attr("y", y)
+
+    @el.append("rect")
+      .attr("x", x)
+      .attr("y", y)
+      .attr("width", @default_class_width)
+      .attr("height", data.length * @default_member_height)
+    @el.selectAll("text")
+      .data(data)
+      .enter()
+      .append("text")
+      .attr("x", x + margin)
+      .attr("y", (d, i) => y + margin + i * @default_member_height)
+      .attr("dy", ".35em")
+      .text String
+    @el.append("line")
+      .attr("x1", x)
+      .attr("y1", y + @default_member_height)
+      .attr("x2", x + @default_class_width)
+      .attr("y2", y + @default_member_height)
+    @current_offset += @default_class_width + @default_member_spacing
+
+
+class ClassDiagramView extends Backbone.View
   svg: null
   current_offset: 0
   default_class_width: 150
   default_member_height: 20
   default_member_spacing: 20
   class_containers: {}
-  init: ->
+
+  initialize: =>
+    @render()
+    current_diagram.on "add", @add_class
+
+  render: =>
     w = 675
     h = 360
-    pack = d3.layout.pack().size([ w - 4, h - 4 ]).value((d) ->
-        d.size
-    )
-    @svg = d3.select("#chart").append("svg").attr("width", w).attr("height", h).attr("class", "pack").append("g").attr("transform", "translate(2, 2)")
+    pack = d3.layout.pack()
+    .size([ w - 4, h - 4 ])
+    .value((d) -> d.size)
+    @svg = d3.select("#chart")
+    .append("svg")
+    .attr("width", w)
+    .attr("height", h)
+    .attr("class", "pack")
+    .append("g")
+    .attr("transform", "translate(2, 2)")
 
-  draw_class: (model) ->
+  add_class: (model) =>
     data = model.get_all_members()
     x = @current_offset
     y = 50
     margin = 10
-    g = @svg.append("g").attr("x", x).attr("y", y)
+    g = @svg.append("g")
+      .attr("x", x)
+      .attr("y", y)
     @class_containers[model.get("name")] = g
-    g.append("rect").attr("x", x).attr("y", y).attr("width", @default_class_width).attr "height", data.length * @default_member_height
-    that = this
-    g.selectAll("text").data(data).enter().append("text").attr("x", x + margin).attr("y", (d, i) ->
-        y + margin + i * that.default_member_height
-    ).attr("dy", ".35em").text String
-    g.append("line").attr("x1", x).attr("y1", y + @default_member_height).attr("x2", x + @default_class_width).attr "y2", y + @default_member_height
+    g.append("rect")
+      .attr("x", x)
+      .attr("y", y)
+      .attr("width", @default_class_width)
+      .attr("height", data.length * @default_member_height)
+    g.selectAll("text")
+      .data(data)
+      .enter()
+      .append("text")
+      .attr("x", x + margin)
+      .attr("y", (d, i) => y + margin + i * @default_member_height)
+      .attr("dy", ".35em")
+      .text(String)
+    g.append("line")
+      .attr("x1", x)
+      .attr("y1", y + @default_member_height)
+      .attr("x2", x + @default_class_width)
+      .attr("y2", y + @default_member_height)
     @current_offset += @default_class_width + @default_member_spacing
 
-exports = this
-exports.ClassDiagramDrawer = ClassDiagramDrawer
+
+view = new ClassDiagramView
+
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.