S10a

.gitignore

@@ -0,0 +1,2 @@
+MagicBoxes.dart.js
+*~

Board.dart

@@ -1,5 +1,8 @@
 class Board {
 
+  static final int MIN_WIDTH = 990;
+  static final int MIN_HEIGHT = 580;
+
   // The acceptable delta error in pixels for clicking on a line between two boxes.
   static final int DELTA = 8; 
   // The board is redrawn every INTERVAL ms.
@@ -8,8 +11,8 @@ class Board {
   CanvasElement canvas;
   CanvasRenderingContext2D context;
 
-  int width;
-  int height;
+  int _width;
+  int _height;
 
   List<Box> boxes;
   List<Line> lines;
@@ -26,8 +29,8 @@ class Board {
 
   Board(this.canvas) {
     context = canvas.getContext('2d');
-    width = canvas.width;
-    height = canvas.height;
+    _width = canvas.width;
+    _height = canvas.height;
     defaultLineWidth = context.lineWidth;
     border();
 
@@ -43,6 +46,24 @@ class Board {
     document.window.setInterval(redraw, INTERVAL);
   }
 
+  void set width(int width) {
+    _width = width;
+    canvas.width = width;
+  }
+
+  int get width() {
+    return _width;
+  }
+
+  void set height(int height) {
+    _height = height;
+    canvas.height = height;
+  }
+
+  int get height() {
+    return _height;
+  }
+
   void border() {
     context.beginPath();
     context.rect(0, 0, width, height);
@@ -198,6 +219,26 @@ class Board {
     }
   }
 
+  void selectBoxLines() {
+    for (Box box in boxes) {
+      if (box.isSelected()) {
+        for (Line line in lines) {
+          if (line.box1 == box || line.box2 == box) {
+            line.select();
+          }
+        }
+      }
+    }
+  }
+
+  void selectLinesBetweenBoxes() {
+    for (Line line in lines) {
+      if (line.box1.isSelected() && line.box2.isSelected()) {
+        line.select();
+      }
+    }
+  }
+
   void select() {
     selectBoxes();
     selectLines();
@@ -353,6 +394,15 @@ class Board {
     return count;
   }
 
+  Line findTwinLine(Line twin) {
+    for (Line line in lines) {
+      if (line != twin && line.box1 == twin.box1 && line.box2 == twin.box2) {
+        return line;
+      }
+    }
+    return null;
+  }
+
   Line _lineContains(Point point) {
     Point delta = new Point(DELTA, DELTA);
     for (Line line in lines) {

Box.dart

@@ -11,7 +11,7 @@ class Box {
 
   final Board board;
 
-  String _name = 'Box';
+  String _name = '';
   int x;
   int y;
   int width;
@@ -49,12 +49,13 @@ class Box {
       board.context.textAlign = 'start';
       board.context.textBaseline = 'top';
       board.context.fillText(title, x + TOS, y + TOS, width - TOS);
+      sortItemsBySequence();
       int i = 0;
       for (Item item in items) {
         if (item.category == 'attribute') {
           board.context.font = '' + textFontSize + 'px sans-serif';
           board.context.fillText(item.name, x + TOS, y + TOS + TBH + i * IOS, width - TOS);
-        } else if (item.category == 'globally unique') {
+        } else if (item.category == 'guid') {
           board.context.font = 'italic ' + textFontSize + 'px sans-serif';
           board.context.fillText(item.name, x + TOS, y + TOS + TBH + i * IOS, width - TOS);
         } else if (item.category == 'identifier') {
@@ -111,6 +112,15 @@ class Box {
     return _name;
   }
 
+  int findLastItemSequence() {
+    if (items.isEmpty()) {
+      return 0;
+    } else {
+      Item item = items.last();
+      return item.sequence;
+    }
+  }
+
   Item findItem(String name) {
     for (Item item in items) {
       if (item.name == name) {
@@ -131,6 +141,18 @@ class Box {
     return false;
   } 
 
+  void sortItemsBySequence() {
+    items.sort(compare(Item i1, Item i2) {
+      if (i1.sequence == i2.sequence) {
+        return 0;
+      } else if (i1.sequence > i2.sequence) {
+        return 1;
+      } else {
+        return -1;
+      }
+    });
+  }
+
   String toString() => '$title ($x, $y)';
 
   Point center() {
@@ -139,6 +161,30 @@ class Box {
     return new Point(centerX, centerY);
   }
 
+  Point twin1() {
+    int twinX = x + width / 4;
+    int twinY = y + height / 4;
+    return new Point(twinX, twinY);
+  }
+
+  Point twin2() {
+    int twinX = x + (width / 4) * 3;
+    int twinY = y + (height / 4) * 3;
+    return new Point(twinX, twinY);
+  }
+
+  Point reflexive1() {
+    int reflexiveX = x;
+    int reflexiveY = y - height / 2;
+    return new Point(reflexiveX, reflexiveY);
+  }
+
+  Point reflexive2() {
+    int reflexiveX = x + width;
+    int reflexiveY = y - height / 2;
+    return new Point(reflexiveX, reflexiveY);
+  }
+
   bool contains(int pointX, int pointY) {
     if ((pointX > x && pointX < x + width) && (pointY > y && pointY < y + height)) {
       return true;

Item.dart

@@ -2,12 +2,14 @@ class Item {
 
   final Box box;
 
+  int sequence; // sequence number within the box: 1, 2, ...
   String name;
-  String category;
+  String category; // attribute, guid, identifier, required
 
   Item(this.box, String name, String category) {
     this.name = name;
     this.category = category;
+    sequence = box.findLastItemSequence() + 10;
     box.items.add(this);
   }