прикрутил собственный веб-компонент на polymer

CHANGELOG.md

@@ -1,5 +0,0 @@
-# Changelog
-
-## 0.0.1
-
-- Initial version, created by Stagehand

lib/app/loop.dart

@@ -3,7 +3,7 @@ library loop;
 int _i = 0;
 
 run(){
-  print(_i);
+  //print(_i);
   _i++;
   return true;
 }

lib/edit.dart

@@ -2,6 +2,7 @@ library edit;
 
 import 'dart:html';
 import 'package:color/color.dart';
+import 'package:chi/tools.dart';
 import 'dart:convert';
 import 'dart:async';
 import 'dart:typed_data';
@@ -19,31 +20,6 @@ const int OUTER_MARGIN = 1;
 const int OUTER_STROKE = 1;
 const DOT = OUTER_SIDE+2*OUTER_MARGIN;
 
-class Tuple2<T1, T2> {
-  T1 i1;
-  T2 i2;
-
-  Tuple2(this.i1, this.i2);
-
-  String toString() => '[$i1, $i2]';
-
-  int get hashCode {
-      int result = 17;
-      result = 37 * result + i1.hashCode;
-      result = 37 * result + i2.hashCode;
-      return result;
-    }
-
-    // You should generally implement operator == if you
-    // override hashCode.
-    bool operator ==(other) {
-      if (other is! Tuple2) return false;
-      Tuple2 t = other;
-      return (t.i1 == i1 &&
-          t.i2 == i2);
-    }
-}
-
 class Point {
   int x = 0;
   int y = 0;
@@ -179,7 +155,7 @@ class Port {
   void put(int x, int y, [Color col = null]){
     var p = new Tuple2<int, int>(x, y);
     Point tp = data[p];
-    if (tp == null){
+    if ((tp == null) && (col != SHADE_COLOR)){
       data[p]=new Point(x, y);
       if(col != null){
         data[p].col = col;

lib/poly/chi_canvas.dart

@@ -0,0 +1,178 @@
+library elem;
+
+import 'dart:html';
+import 'dart:convert';
+import 'dart:typed_data';
+import 'dart:async';
+import 'package:polymer/polymer.dart';
+import 'package:color/color.dart';
+import 'package:chi/tools.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"]);
+  }
+}
+
+@CustomTag("chi-canvas")
+class ChiCanvas extends PolymerElement{
+  @published int base = DEFAULT_INNER_SIDE;
+  @published bool transparent = true;
+  @published String href = "";
+
+  int get INNER_SIDE => base;
+  int get OUTER_SIDE => INNER_SIDE+2*INNER_MARGIN+2*OUTER_STROKE;
+  int get DOT => OUTER_SIDE+2*OUTER_MARGIN;
+
+  DivElement _div;
+  CanvasElement _root;
+  CanvasRenderingContext2D _ctx;
+
+  Map<Tuple2<int, int>, Point> data = new Map();
+
+  int width = 0;
+  int height = 0;
+  int get nx => width ~/ DOT;
+  int get ny => height ~/ DOT;
+
+  void back(){
+    RgbColor color;
+
+    color = BG_COLOR.toRgbColor();
+    _ctx.lineWidth = OUTER_STROKE;
+    _ctx.setFillColorRgb(color.r, color.g, color.b);
+    _ctx.fillRect(0, 0, width, height);
+
+    color = SHADE_COLOR.toRgbColor();
+    _ctx.setFillColorRgb(color.r, color.g, color.b);
+    _ctx.setStrokeColorRgb(color.r, color.g, color.b);
+
+    int w = 0;
+    int h = 0;
+    int y = 2*OUTER_MARGIN;
+    while(y<height){
+      int x = 2*OUTER_MARGIN;
+      w = 0;
+      while(x<width){
+        _ctx.strokeRect(x, y, OUTER_SIDE, OUTER_SIDE);
+        _ctx.fillRect(x+OUTER_STROKE + INNER_MARGIN, y+OUTER_STROKE+INNER_MARGIN, INNER_SIDE, INNER_SIDE);
+        _ctx.strokeRect(x+OUTER_STROKE + INNER_MARGIN, y+OUTER_STROKE + INNER_MARGIN, INNER_SIDE, INNER_SIDE);
+        w++;
+        x = x + DOT;
+      }
+      h++;
+      y = y + DOT;
+    }
+  }
+
+  void front(){
+     int w = 0;
+     int h = 0;
+     int y = 2*OUTER_MARGIN;
+     while(y<height){
+       int x = 2*OUTER_MARGIN;
+       w = 0;
+       while(x<width){
+         var p = new Tuple2<int, int>(w, h);
+         Point tp = data[p];
+         if (tp!=null){
+           var color = tp.col.toRgbColor();
+           _ctx.setFillColorRgb(color.r, color.g, color.b);
+           _ctx.setStrokeColorRgb(color.r, color.g, color.b);
+           _ctx.strokeRect(x, y, OUTER_SIDE, OUTER_SIDE);
+           _ctx.fillRect(x+OUTER_STROKE + INNER_MARGIN, y+OUTER_STROKE+INNER_MARGIN, INNER_SIDE, INNER_SIDE);
+           _ctx.strokeRect(x+OUTER_STROKE + INNER_MARGIN, y+OUTER_STROKE + INNER_MARGIN, INNER_SIDE, INNER_SIDE);
+         }
+         w++;
+         x = x + DOT;
+       }
+       h++;
+       y = y + DOT;
+     }
+  }
+
+  void 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){
+      pl.forEach((Map<String, Object>m){
+        Point p = new Point.fromMap(m);
+        data[new Tuple2(p.x, p.y)]=p;
+      });
+    }
+  }
+
+  void prepare(int w, int h){
+    _root.width = 1+(w ~/ DOT) * DOT;
+    _root.height = 1+(h ~/ DOT) * DOT;
+    _ctx.imageSmoothingEnabled = false;
+    _ctx.translate(0.5, 0.5);
+    _ctx.scale(1, 1);
+
+    width = w;
+    height = h;
+
+    if(href!=""){
+      Future load = HttpRequest.request(href, mimeType: 'application/octet-stream', responseType: 'arraybuffer');
+        load.then((req){
+              Uint8List ul = (req.response as ByteBuffer).asUint8List();
+              String js = UTF8.decode(ul);
+              import(js);
+              front();
+          },
+          onError: (e){
+            window.alert("$href not found $e");
+          });
+    }
+    //print("$href ~ $nx:$ny::$base");
+  }
+
+  @override
+  void attached(){
+    prepare(_div.clientWidth, _div.clientHeight);
+    if (!transparent)
+       back();
+    front();
+  }
+
+  ChiCanvas.created() : super.created(){
+    _div = ($['root_canvas_container'] as DivElement);
+    _root = ($['root_canvas'] as CanvasElement);
+    _ctx = _root.context2D;
+  }
+}

lib/poly/chi_canvas.html

@@ -0,0 +1,25 @@
+<link rel="import" href="../../../packages/polymer/polymer.html">
+<polymer-element name="chi-canvas" attributes="base transparent href">
+  <template>
+     <style>
+      :host{
+        width: 100%;
+        height: 100%;
+      }
+      #root_canvas_bg{
+        width: 100%;
+        height: 100%;
+      }
+      #root_canvas_container {
+        width: calc(100% - 40px);
+        height: calc(100% - 5px);
+        margin-left: 20px;
+        margin-right: 20px;
+      }
+    </style>
+    <div id="root_canvas_bg">
+      <div id="root_canvas_container"><canvas id="root_canvas"></canvas></div>
+    </div>
+  </template>
+  <script type="application/dart" src="chi_canvas.dart"></script>
+</polymer-element>

lib/tools.dart

@@ -4,3 +4,28 @@ import 'dart:html';
 
 //алиас для селектора, чтобы как в джыкуере
 final Q = querySelector;
+
+class Tuple2<T1, T2> {
+  T1 i1;
+  T2 i2;
+
+  Tuple2(this.i1, this.i2);
+
+  String toString() => '[$i1, $i2]';
+
+  int get hashCode {
+      int result = 17;
+      result = 37 * result + i1.hashCode;
+      result = 37 * result + i2.hashCode;
+      return result;
+    }
+
+    // You should generally implement operator == if you
+    // override hashCode.
+    bool operator ==(other) {
+      if (other is! Tuple2) return false;
+      Tuple2 t = other;
+      return (t.i1 == i1 &&
+          t.i2 == i2);
+    }
+}

web/app/app.dart

@@ -1,13 +1,16 @@
-export 'package:polymer/init.dart';
-
+import 'dart:async';
 import 'dart:html';
+import 'package:polymer/polymer.dart';
 import 'package:chi/storage.dart';
-import 'package:chi/app/loop.dart';
-import 'dart:async';
+import 'package:chi/app/loop.dart' as loop;
+
 
 main(){
-  if(window.sessionStorage.containsKey(SESSION))
-    Future.doWhile((){return new Future.delayed(new Duration(seconds: 1), run);});
-  else
-    window.location.replace("/");
+  if(window.sessionStorage.containsKey(SESSION)){
+    initPolymer().run(() {
+        Polymer.onReady.then((_) {
+          Future.doWhile((){return new Future.delayed(new Duration(seconds: 1), loop.run);});
+        });
+    });
+ }else window.location.replace("/");
 }

web/app/index.html

@@ -5,11 +5,14 @@
   	<meta charset="utf-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>chi :: pet</title>
-
+    <link rel="stylesheet" href="styles/index.css">
+    <link rel="import" href="packages/chi/poly/chi_canvas.html">
 </head>
-
   <body unresolved>
-    <p id="text"></p>
+    <div id="pane">
+      <div class="layer"><chi-canvas base="6" transparent="false"></chi-canvas></div>
+      <div class="layer"><chi-canvas base="6" transparent="true" href="/img/eye0.json"></chi-canvas></div>
+    </div>
     <script type="application/dart" src="app.dart"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
     <script src="packages/browser/dart.js"></script>

web/app/styles/index.css

@@ -0,0 +1,15 @@
+.layer{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+#pane{
+  width: 800px;
+  height: 600px;
+  border: 1px solid black;
+  background-color: #ced6b5;
+  position: relative;
+}

web/img/eye0.json

@@ -0,0 +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":3,"col":"000000"},{"x":6,"y":4,"col":"000000"},{"x":6,"y":5,"col":"000000"},{"x":6,"y":6,"col":"000000"},{"x":6,"y":7,"col":"000000"},{"x":4,"y":4,"col":"000000"},{"x":4,"y":5,"col":"000000"},{"x":4,"y":6,"col":"000000"},{"x":5,"y":7,"col":"7c806d"},{"x":5,"y":6,"col":"7c806d"},{"x":5,"y":5,"col":"7c806d"},{"x":5,"y":4,"col":"7c806d"},{"x":4,"y":7,"col":"7c806d"},{"x":3,"y":7,"col":"7c806d"},{"x":3,"y":6,"col":"7c806d"},{"x":9,"y":3,"col":"000000"},{"x":9,"y":4,"col":"000000"},{"x":9,"y":5,"col":"000000"},{"x":9,"y":6,"col":"000000"},{"x":9,"y":7,"col":"000000"},{"x":10,"y":8,"col":"000000"},{"x":11,"y":8,"col":"000000"},{"x":12,"y":8,"col":"000000"},{"x":13,"y":6,"col":"000000"},{"x":13,"y":7,"col":"000000"},{"x":13,"y":4,"col":"000000"},{"x":13,"y":3,"col":"000000"},{"x":11,"y":2,"col":"000000"},{"x":12,"y":2,"col":"000000"},{"x":10,"y":2,"col":"000000"},{"x":11,"y":4,"col":"000000"},{"x":11,"y":5,"col":"000000"},{"x":11,"y":6,"col":"000000"},{"x":12,"y":4,"col":"7c806d"},{"x":12,"y":5,"col":"7c806d"},{"x":13,"y":5,"col":"000000"},{"x":12,"y":6,"col":"7c806d"},{"x":12,"y":7,"col":"7c806d"},{"x":11,"y":7,"col":"7c806d"},{"x":10,"y":7,"col":"7c806d"},{"x":10,"y":6,"col":"7c806d"}]}

web/main.dart

@@ -1,7 +1,9 @@
 // Copyright (c) 2015, <kpmy>. All rights reserved. Use of this source code
 // is governed by a BSD-style license that can be found in the LICENSE file.
-import 'package:polymer/polymer.dart';
+
 import "dart:html";
+
+import 'package:polymer/polymer.dart';
 import "package:chi/storage.dart";
 import "package:chi/tools.dart";
 
@@ -13,7 +15,7 @@ void init(){
     name.value = window.sessionStorage[SESSION];
 
   name
-  ..onChange.listen((Event e){
+  ..onInput.listen((Event e){
       go.disabled = (name.value == "");
   });