некоторый рефакторинг библиотек, попробовал анимацию от полимера, не заработала, надо пробовать стандартную

lib/design.dart

@@ -0,0 +1,9 @@
+library design;
+
+import 'package:color/color.dart';
+//все цвета черно-белой радуги
+final Color BG_COLOR = new Color.hex("ced6b5");
+final Color SHADE_COLOR = new Color.hex("bac1a3");
+final Color BLACK = new Color.hex("000000");
+final Color GREY50 = new Color.hex("7c806d");
+final Color GREY25 = new Color.hex("a5ab91");

lib/edit.dart

@@ -53,6 +53,7 @@ class Port {
   Color lastPen;
 
   Map<Tuple2<int, int>, Point> data = new Map();
+  Tuple2<int, int> size = new Tuple2(50, 40);
 
   void prepare(int w, int h){
     ctx.imageSmoothingEnabled = false;
@@ -109,6 +110,12 @@ class Port {
      img.clearRect(0, 0, width, height);
      // Restore the transform
      img.restore();
+
+     if(size != null){
+       img.setStrokeColorRgb(0xFF, 0, 0);
+       img.strokeRect(2 * OUTER_MARGIN, 2 * OUTER_MARGIN, size.i1 * DOT - 2, size.i2 * DOT - 2);
+     }
+
      int w = 0;
      int h = 0;
      int y = 2*OUTER_MARGIN;
@@ -134,6 +141,10 @@ class Port {
      }
   }
 
+  void limit(int x, int y){
+    size = new Tuple2(x, y);
+  }
+
   void move(int x, int y){
     // Store the current transformation matrix
     via.save();
@@ -146,6 +157,8 @@ class Port {
     via.setStrokeColorRgb(c.r, c.g, c.b);
     via.strokeRect(x*DOT+1, y*DOT+1, DOT, DOT);
     via.strokeRect(x*DOT+1+OUTER_STROKE+INNER_MARGIN, y*DOT+1+OUTER_STROKE+INNER_MARGIN, INNER_SIDE+2*INNER_MARGIN, INNER_SIDE+2*INNER_MARGIN);
+    (querySelector("#pos") as SpanElement).text = "$x:$y";
+    (querySelector("#size") as SpanElement).text = "$size";
   }
 
   void leave(){
@@ -201,6 +214,7 @@ class Port {
         name="noname";
       }
       r["name"]=name;
+      r["size"]=size.toList();
       r["data"]=ret;
       return JSON.encode(r);
     }else{
@@ -216,6 +230,11 @@ class Port {
       name = "noname";
     }
     (querySelector("#root_name") as InputElement).value = name;
+    if (r.containsKey("size"))
+      size = new Tuple2.fromList(r["size"]);
+    else
+      size = new Tuple2(50, 40);
+
     data.clear();
     List<Map<String, Object>> pl = r["data"];
     if(pl!=null){
@@ -277,6 +296,8 @@ void run(){
      var c = port.mapCoord(e.offset.x, e.offset.y);
      if(e.button==0){
        port.put(c.i1, c.i2);
+     }else if (e.button == 1){
+       port.limit(c.i1+1, c.i2+1);
      }else{
        port.clear(c.i1, c.i2);
      }

lib/image.dart

@@ -0,0 +1,79 @@
+library image;
+
+import 'package:color/color.dart';
+import 'package:chi/tools.dart';
+import 'package:chi/design.dart';
+import 'dart:convert';
+
+class Dot {
+  int x = 0;
+  int y = 0;
+  Color col = BLACK;
+
+  Dot(this.x, this.y);
+  String toString() => '{x: $x, y: $y, col: "$col"}';
+  Map<String, Object> toMap() {
+    Map<String, Object> ret = new Map();
+    ret["x"] = x;
+    ret["y"] = y;
+    ret["col"] = col.toString();
+    return ret;
+  }
+
+  Dot.fromMap(Map<String, Object> m) {
+    this.x = m["x"];
+    this.y = m["y"];
+    this.col = new Color.hex(m["col"]);
+  }
+}
+
+class Image {
+  Map<Tuple2<int, int>, Dot> data = new Map();
+  Tuple2<int, int> size;
+  Tuple2<int, int> content;
+
+  int get width => size.i1;
+  int get height => size.i2;
+
+  Image.import(String js) {
+    Map<String, Object> r;
+    r = JSON.decode(js);
+    String name = r["name"];
+    if (name == null || name == "") {
+      name = "noname";
+    }
+    if (r.containsKey("size")) size = new Tuple2.fromList(r["size"]); else size = new Tuple2(50, 40);
+
+    data.clear();
+    List<Map<String, Object>> pl = r["data"];
+    if (pl != null) {
+      //normalize
+      Dot min = new Dot(0xFFFFFFFF, 0xFFFFFFFF);
+      Dot max = new Dot(0, 0);
+
+      pl.forEach((Map<String, Object> m) {
+        Dot p = new Dot.fromMap(m);
+        if (p.x <= min.x) min.x = p.x;
+        if (p.y <= min.y) min.y = p.y;
+        if (p.x >= max.x) max.x = p.x;
+        if (p.y >= max.y) max.y = p.y;
+      });
+
+      if (min.x == 0xFFFFFFFF) {
+        min = null;
+        content = size;
+      } else {
+        content = new Tuple2<int, int>(max.x - min.x + 1, max.y - min.y + 1);
+      }
+      pl.forEach((Map<String, Object> m) {
+        Dot p = new Dot.fromMap(m);
+//        if (min != null) {
+//          p.x = p.x - min.x;
+//          p.y = p.y - min.y;
+//        }
+        data[new Tuple2(p.x, p.y)] = p;
+      });
+
+    }
+  }
+}

lib/poly/chi_canvas.dart

@@ -7,89 +7,8 @@ import 'dart:async';
 import 'package:polymer/polymer.dart';
 import 'package:color/color.dart';
 import 'package:chi/tools.dart';
-import 'package:chi/app/loop.dart';
-
-final Color BG_COLOR = new Color.hex("ced6b5");
-final Color SHADE_COLOR = new Color.hex("bac1a3");
-final Color BLACK = new Color.hex("000000");
-final Color GREY50 = new Color.hex("7c806d");
-final Color GREY25 = new Color.hex("a5ab91");
-
-//const int OUTER_SIDE = INNER_SIDE+2*INNER_MARGIN+2*OUTER_STROKE;
-const int DEFAULT_INNER_SIDE = 7;
-const int INNER_MARGIN = 1;
-const int OUTER_MARGIN = 1;
-const int OUTER_STROKE = 1;
-//const DOT = OUTER_SIDE+2*OUTER_MARGIN;
-
-class Point {
-  int x = 0;
-  int y = 0;
-  Color col = BLACK;
-
-  Point(this.x, this.y);
-  String toString() => '{x: $x, y: $y, col: "$col"}';
-  Map<String, Object> toMap() {
-    Map<String, Object> ret = new Map();
-    ret["x"] = x;
-    ret["y"] = y;
-    ret["col"] = col.toString();
-    return ret;
-  }
-
-  Point.fromMap(Map<String, Object> m) {
-    this.x = m["x"];
-    this.y = m["y"];
-    this.col = new Color.hex(m["col"]);
-  }
-}
-
-class Image {
-  int width = 0;
-  int height = 0;
-
-  Map<Tuple2<int, int>, Point> data = new Map();
-
-  Image.import(String js) {
-    Map<String, Object> r;
-    r = JSON.decode(js);
-    String name = r["name"];
-    if (name == null || name == "") {
-      name = "noname";
-    }
-    data.clear();
-    List<Map<String, Object>> pl = r["data"];
-    if (pl != null) {
-      //normalize
-      Point min = new Point(0xFFFFFFFF, 0xFFFFFFFF);
-      Point max = new Point(0, 0);
-
-      pl.forEach((Map<String, Object> m) {
-        Point p = new Point.fromMap(m);
-        if (p.x <= min.x) min.x = p.x;
-        if (p.y <= min.y) min.y = p.y;
-        if (p.x >= max.x) max.x = p.x;
-        if (p.y >= max.y) max.y = p.y;
-      });
-
-      if (min.x == 0xFFFFFFFF) {
-        min = null;
-      } else {
-        width = max.x - min.x + 1;
-        height = max.y - min.y + 1;
-      }
-      pl.forEach((Map<String, Object> m) {
-        Point p = new Point.fromMap(m);
-        if (min != null) {
-          p.x = p.x - min.x;
-          p.y = p.y - min.y;
-        }
-        data[new Tuple2(p.x, p.y)] = p;
-      });
-
-    }
-  }
-}
+import 'package:chi/image.dart';
+import 'package:chi/design.dart';
 
 class Frame {
   int order;
@@ -103,6 +22,16 @@ class Frame {
 
 @CustomTag("chi-canvas")
 class ChiCanvas extends PolymerElement implements ChiEventListener {
+
+  //вычисляются теперь
+  //const int OUTER_SIDE = INNER_SIDE+2*INNER_MARGIN+2*OUTER_STROKE;
+  //const DOT = OUTER_SIDE+2*OUTER_MARGIN;
+
+  static final int DEFAULT_INNER_SIDE = 7;
+  static final int INNER_MARGIN = 1;
+  static final int OUTER_MARGIN = 1;
+  static final int OUTER_STROKE = 1;
+
   @published int base = DEFAULT_INNER_SIDE;
   @published bool transparent = true;
   @published int top = 0;
@@ -173,7 +102,7 @@ class ChiCanvas extends PolymerElement implements ChiEventListener {
       w = 0;
       while (x < width && w < img.width) {
         var p = new Tuple2<int, int>(w, h);
-        Point tp = img.data[p];
+        Dot tp = img.data[p];
         if (tp != null) {
           var color = tp.col.toRgbColor();
           _ctx.setFillColorRgb(color.r, color.g, color.b);
@@ -193,6 +122,9 @@ class ChiCanvas extends PolymerElement implements ChiEventListener {
   void registerFrame(ChiFrame f){
     assert(f.img!=null);
     frames[f.order]= new Frame.elem(f);
+    if(frames.containsKey(0)){
+      front(frames[0].img);
+    }
   }
 
   void prepare(int w, int h) {

lib/poly/chi_canvas.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../../packages/polymer/polymer.html">
+<link rel="import" href="../../../packages/polymer/polymer.html"/>
 <link rel="import" href="chi_canvas_common.html"/>
 <polymer-element name="chi-canvas"
   attributes="base transparent top left duration"> <template>

lib/tools.dart

@@ -51,6 +51,15 @@ class Tuple2<T1, T2> {
       return (t.i1 == i1 &&
           t.i2 == i2);
     }
+
+    Tuple2.fromList(List l){
+      i1 = l[0];
+      i2 = l[1];
+    }
+
+    List toList(){
+      return [i1, i2];
+    }
 }
 
 void initTools(){

pubspec.yaml

@@ -6,6 +6,7 @@ environment:
 dependencies:
   browser: any
   color: any
+  core_elements: any
   dartson: any
   event_bus: any
   paper_elements: any

web/edit.html

@@ -17,7 +17,10 @@
 </head>
 
 <body>
-  <div id="root_data_container">Сохранить:
+  <div id="root_data_container">
+    Размер: <span id="size"></span>
+    Позиция: <span id="pos"></span>
+    Сохранить:
     <input id="root_name" value="без имени"/>
     <input type="button" id="root_save_button" value="сохранить"/>
     Загрузить: <input type='file' id='file_path'/>

web/img/eye0-0.json

@@ -1 +1 @@
-{"name":"eye0","data":[{"x":3,"y":2,"col":"000000"},{"x":4,"y":2,"col":"000000"},{"x":5,"y":2,"col":"000000"},{"x":2,"y":3,"col":"000000"},{"x":2,"y":4,"col":"000000"},{"x":2,"y":5,"col":"000000"},{"x":2,"y":6,"col":"000000"},{"x":2,"y":7,"col":"000000"},{"x":3,"y":8,"col":"000000"},{"x":4,"y":8,"col":"000000"},{"x":5,"y":8,"col":"000000"},{"x":6,"y":2,"col":"000000"},{"x":7,"y":3,"col":"000000"},{"x":7,"y":4,"col":"000000"},{"x":7,"y":5,"col":"000000"},{"x":7,"y":6,"col":"000000"},{"x":7,"y":7,"col":"000000"},{"x":6,"y":8,"col":"000000"},{"x":5,"y":6,"col":"000000"},{"x":6,"y":6,"col":"7c806d"},{"x":5,"y":7,"col":"7c806d"},{"x":4,"y":6,"col":"7c806d"},{"x":5,"y":5,"col":"7c806d"},{"x":6,"y":5,"col":"a5ab91"},{"x":4,"y":5,"col":"a5ab91"},{"x":4,"y":7,"col":"a5ab91"},{"x":6,"y":7,"col":"a5ab91"},{"x":10,"y":3,"col":"000000"},{"x":10,"y":4,"col":"000000"},{"x":10,"y":5,"col":"000000"},{"x":10,"y":6,"col":"000000"},{"x":10,"y":7,"col":"000000"},{"x":11,"y":8,"col":"000000"},{"x":12,"y":8,"col":"000000"},{"x":13,"y":8,"col":"000000"},{"x":14,"y":8,"col":"000000"},{"x":11,"y":2,"col":"000000"},{"x":12,"y":2,"col":"000000"},{"x":13,"y":2,"col":"000000"},{"x":14,"y":2,"col":"000000"},{"x":15,"y":3,"col":"000000"},{"x":15,"y":4,"col":"000000"},{"x":15,"y":5,"col":"000000"},{"x":15,"y":6,"col":"000000"},{"x":15,"y":7,"col":"000000"},{"x":13,"y":6,"col":"000000"},{"x":13,"y":5,"col":"7c806d"},{"x":14,"y":6,"col":"7c806d"},{"x":12,"y":6,"col":"7c806d"},{"x":12,"y":5,"col":"a5ab91"},{"x":14,"y":5,"col":"a5ab91"},{"x":13,"y":7,"col":"7c806d"},{"x":14,"y":7,"col":"a5ab91"},{"x":12,"y":7,"col":"a5ab91"}]}
+{"name":"eye0","size":[16,9],"data":[{"x":3,"y":2,"col":"000000"},{"x":4,"y":2,"col":"000000"},{"x":5,"y":2,"col":"000000"},{"x":2,"y":3,"col":"000000"},{"x":2,"y":4,"col":"000000"},{"x":2,"y":5,"col":"000000"},{"x":2,"y":6,"col":"000000"},{"x":2,"y":7,"col":"000000"},{"x":3,"y":8,"col":"000000"},{"x":4,"y":8,"col":"000000"},{"x":5,"y":8,"col":"000000"},{"x":6,"y":2,"col":"000000"},{"x":7,"y":3,"col":"000000"},{"x":7,"y":4,"col":"000000"},{"x":7,"y":5,"col":"000000"},{"x":7,"y":6,"col":"000000"},{"x":7,"y":7,"col":"000000"},{"x":6,"y":8,"col":"000000"},{"x":5,"y":6,"col":"000000"},{"x":6,"y":6,"col":"7c806d"},{"x":5,"y":7,"col":"7c806d"},{"x":4,"y":6,"col":"7c806d"},{"x":5,"y":5,"col":"7c806d"},{"x":6,"y":5,"col":"a5ab91"},{"x":4,"y":5,"col":"a5ab91"},{"x":4,"y":7,"col":"a5ab91"},{"x":6,"y":7,"col":"a5ab91"},{"x":10,"y":3,"col":"000000"},{"x":10,"y":4,"col":"000000"},{"x":10,"y":5,"col":"000000"},{"x":10,"y":6,"col":"000000"},{"x":10,"y":7,"col":"000000"},{"x":11,"y":8,"col":"000000"},{"x":12,"y":8,"col":"000000"},{"x":13,"y":8,"col":"000000"},{"x":14,"y":8,"col":"000000"},{"x":11,"y":2,"col":"000000"},{"x":12,"y":2,"col":"000000"},{"x":13,"y":2,"col":"000000"},{"x":14,"y":2,"col":"000000"},{"x":15,"y":3,"col":"000000"},{"x":15,"y":4,"col":"000000"},{"x":15,"y":5,"col":"000000"},{"x":15,"y":6,"col":"000000"},{"x":15,"y":7,"col":"000000"},{"x":13,"y":6,"col":"000000"},{"x":13,"y":5,"col":"7c806d"},{"x":14,"y":6,"col":"7c806d"},{"x":12,"y":6,"col":"7c806d"},{"x":12,"y":5,"col":"a5ab91"},{"x":14,"y":5,"col":"a5ab91"},{"x":13,"y":7,"col":"7c806d"},{"x":14,"y":7,"col":"a5ab91"},{"x":12,"y":7,"col":"a5ab91"}]}

web/img/eye0-1.json

@@ -1 +1 @@
-{"name":"eye0","data":[{"x":3,"y":2,"col":"000000"},{"x":4,"y":2,"col":"000000"},{"x":5,"y":2,"col":"000000"},{"x":2,"y":3,"col":"000000"},{"x":2,"y":4,"col":"000000"},{"x":2,"y":5,"col":"000000"},{"x":2,"y":6,"col":"000000"},{"x":2,"y":7,"col":"000000"},{"x":3,"y":8,"col":"000000"},{"x":4,"y":8,"col":"000000"},{"x":5,"y":8,"col":"000000"},{"x":6,"y":2,"col":"000000"},{"x":7,"y":3,"col":"000000"},{"x":7,"y":4,"col":"000000"},{"x":7,"y":5,"col":"000000"},{"x":7,"y":6,"col":"000000"},{"x":7,"y":7,"col":"000000"},{"x":6,"y":8,"col":"000000"},{"x":10,"y":3,"col":"000000"},{"x":10,"y":4,"col":"000000"},{"x":10,"y":5,"col":"000000"},{"x":10,"y":6,"col":"000000"},{"x":10,"y":7,"col":"000000"},{"x":11,"y":8,"col":"000000"},{"x":12,"y":8,"col":"000000"},{"x":13,"y":8,"col":"000000"},{"x":14,"y":8,"col":"000000"},{"x":11,"y":2,"col":"000000"},{"x":12,"y":2,"col":"000000"},{"x":13,"y":2,"col":"000000"},{"x":14,"y":2,"col":"000000"},{"x":15,"y":3,"col":"000000"},{"x":15,"y":4,"col":"000000"},{"x":15,"y":5,"col":"000000"},{"x":15,"y":6,"col":"000000"},{"x":15,"y":7,"col":"000000"},{"x":4,"y":6,"col":"000000"},{"x":4,"y":5,"col":"7c806d"},{"x":5,"y":6,"col":"7c806d"},{"x":4,"y":7,"col":"7c806d"},{"x":3,"y":6,"col":"7c806d"},{"x":3,"y":5,"col":"a5ab91"},{"x":5,"y":5,"col":"a5ab91"},{"x":5,"y":7,"col":"a5ab91"},{"x":3,"y":7,"col":"a5ab91"},{"x":12,"y":6,"col":"000000"},{"x":12,"y":5,"col":"7c806d"},{"x":13,"y":6,"col":"7c806d"},{"x":12,"y":7,"col":"7c806d"},{"x":11,"y":6,"col":"7c806d"},{"x":11,"y":5,"col":"a5ab91"},{"x":13,"y":5,"col":"a5ab91"},{"x":13,"y":7,"col":"a5ab91"},{"x":11,"y":7,"col":"a5ab91"}]}
+{"name":"eye0","size":[16,9],"data":[{"x":3,"y":2,"col":"000000"},{"x":4,"y":2,"col":"000000"},{"x":5,"y":2,"col":"000000"},{"x":2,"y":3,"col":"000000"},{"x":2,"y":4,"col":"000000"},{"x":2,"y":5,"col":"000000"},{"x":2,"y":6,"col":"000000"},{"x":2,"y":7,"col":"000000"},{"x":3,"y":8,"col":"000000"},{"x":4,"y":8,"col":"000000"},{"x":5,"y":8,"col":"000000"},{"x":6,"y":2,"col":"000000"},{"x":7,"y":3,"col":"000000"},{"x":7,"y":4,"col":"000000"},{"x":7,"y":5,"col":"000000"},{"x":7,"y":6,"col":"000000"},{"x":7,"y":7,"col":"000000"},{"x":6,"y":8,"col":"000000"},{"x":10,"y":3,"col":"000000"},{"x":10,"y":4,"col":"000000"},{"x":10,"y":5,"col":"000000"},{"x":10,"y":6,"col":"000000"},{"x":10,"y":7,"col":"000000"},{"x":11,"y":8,"col":"000000"},{"x":12,"y":8,"col":"000000"},{"x":13,"y":8,"col":"000000"},{"x":14,"y":8,"col":"000000"},{"x":11,"y":2,"col":"000000"},{"x":12,"y":2,"col":"000000"},{"x":13,"y":2,"col":"000000"},{"x":14,"y":2,"col":"000000"},{"x":15,"y":3,"col":"000000"},{"x":15,"y":4,"col":"000000"},{"x":15,"y":5,"col":"000000"},{"x":15,"y":6,"col":"000000"},{"x":15,"y":7,"col":"000000"},{"x":4,"y":6,"col":"000000"},{"x":4,"y":5,"col":"7c806d"},{"x":5,"y":6,"col":"7c806d"},{"x":4,"y":7,"col":"7c806d"},{"x":3,"y":6,"col":"7c806d"},{"x":3,"y":5,"col":"a5ab91"},{"x":5,"y":5,"col":"a5ab91"},{"x":5,"y":7,"col":"a5ab91"},{"x":3,"y":7,"col":"a5ab91"},{"x":12,"y":6,"col":"000000"},{"x":12,"y":5,"col":"7c806d"},{"x":13,"y":6,"col":"7c806d"},{"x":12,"y":7,"col":"7c806d"},{"x":11,"y":6,"col":"7c806d"},{"x":11,"y":5,"col":"a5ab91"},{"x":13,"y":5,"col":"a5ab91"},{"x":13,"y":7,"col":"a5ab91"},{"x":11,"y":7,"col":"a5ab91"}]}