opt Canvas.example.js

src/contexts/cli/cli.go

@@ -668,7 +668,7 @@ var Index = &ctx.Context{Name: "cli", Help: "管理中心",
 			m.Cmd("cli.version", "create")
 			if len(arg) > 0 && arg[0] == "self" {
 				if m.Cmdy("cli.system", "go", "install", m.Cmdx("nfs.path", m.Conf("compile", "bench"))); m.Result(0) == "" {
-					m.Echo("version %v ", version.self)
+					m.Echo("%v: %v ", version.host, version.self)
 					m.Cmdy("cli.quit", 1)
 				}
 				return

src/contexts/cli/version.go

@@ -4,5 +4,5 @@ var version = struct {
 	host string
 	self int
 }{
-	"2019-07-05 23:09:46", "com.mac", 42,
+	"2019-07-07 16:45:43", "com.mac", 55,
 }

src/contexts/nfs/nfs.go

@@ -3,6 +3,7 @@ package nfs
 import (
 	"contexts/ctx"
 	"crypto/md5"
+	"math/rand"
 	"toolkit"
 
 	"crypto/sha1"
@@ -1390,46 +1391,41 @@ var Index = &ctx.Context{Name: "nfs", Help: "存储中心",
 		}},
 
 		"draw": &ctx.Command{Name: "draw", Help: "", Hand: func(m *ctx.Message, c *ctx.Context, key string, arg ...string) (e error) {
-            m.Add("append", "data", 10)
+			if len(arg) == 0 {
-            m.Add("append", "data", 40)
+				m.Cmdy("nfs.dir", "src", "filename", "line", "size", "dir_deep", "dir_type", "file", "dir_sort", "line", "int_r")
-            m.Add("append", "data", 30)
+				return
-            m.Add("append", "data", 20)
+			}
 
-            m.Add("append", "seed", 30)
+			m.Append("text", m.Time())
-            m.Add("append", "seed", 20)
+			m.Append("style", map[int]string{
-            m.Add("append", "seed", 30)
+				0: "black",
-            m.Add("append", "seed", 40)
+				1: "red",
-            return
+				2: "green",
-			for len(arg) > 0 {
+				3: "yellow",
-				switch arg[0] {
+				4: "blue",
-				case "trend":
+				5: "purple",
-					m.Add("append", "type", arg[0])
+				6: "cyan",
-					m.Add("append", "meta", kit.Formats(arg[1:]))
+				7: "white",
-					arg = arg[:0]
+			}[rand.Intn(8)])
-
+			switch arg[2] {
-				case "begin":
+			case "drawText":
-					m.Add("append", "type", arg[0])
+				x, y := rand.Intn(400), rand.Intn(300)
-					m.Add("append", "meta", "{}")
+				m.Append("ps", kit.Format([]interface{}{
-					arg = arg[1:]
+					map[string]int{"x": x, "y": y},
-
+					map[string]int{"x": x + 200, "y": y},
-				case "circle":
+				}))
-					m.Add("append", "type", arg[0])
+			case "drawRect":
-					m.Add("append", "meta", kit.Format(map[string]string{
+				x, y, l := rand.Intn(400), rand.Intn(300), rand.Intn(100)
-						"x": arg[1], "y": arg[2], "r": arg[3],
+				m.Append("ps", kit.Format([]interface{}{
-					}))
+					map[string]int{"x": x, "y": y},
-					arg = arg[4:]
+					map[string]int{"x": x + l + l, "y": y + l},
-
+				}))
-				case "stroke":
+			case "drawCircle":
-					m.Add("append", "type", arg[0])
+				x, y, l := rand.Intn(400), rand.Intn(300), rand.Intn(100)
-					m.Add("append", "meta", kit.Format(map[string]string{
+				m.Append("ps", kit.Format([]interface{}{
-						"width": arg[1],
+					map[string]int{"x": x, "y": y},
-						"color": arg[2],
+					map[string]int{"x": x + l, "y": y},
-					}))
+				}))
-					arg = arg[3:]
-
-				default:
-					arg = arg[1:]
-				}
 			}
 			return
 		}},

src/contexts/ssh/ssh.go

@@ -232,16 +232,8 @@ var Index = &ctx.Context{Name: "ssh", Help: "集群中心",
 					"componet_tmpl": "componet", "componet_view": "Context", "componet_init": "",
 					"componet_type": "public", "componet_ctx": "nfs", "componet_cmd": "draw",
 					"componet_args": []interface{}{}, "inputs": []interface{}{
-						map[string]interface{}{"type": "text", "name": "type"},
+						map[string]interface{}{"type": "text", "name": "content", "view": "long"},
-						map[string]interface{}{"type": "button", "value": "查看"},
+						map[string]interface{}{"type": "button", "value": "画图"},
-					},
-					"display": map[string]interface{}{"deal": "trend"},
-				},
-				map[string]interface{}{"componet_name": "draw", "componet_help": "绘图",
-					"componet_tmpl": "componet", "componet_view": "Context", "componet_init": "",
-					"componet_type": "public", "componet_ctx": "nfs", "componet_cmd": "dir",
-					"componet_args": []interface{}{"src", "dir_deep", "path", "line", "size", "dir_sort", "line", "int_r"}, "inputs": []interface{}{
-						map[string]interface{}{"type": "button", "value": "查看"},
 					},
 					"display": map[string]interface{}{"deal": "trend"},
 				},

usr/librarys/example.css

@@ -15,6 +15,7 @@ fieldset {
 legend {
     margin-left:10px;
 }
+
 fieldset>form.option div {
     margin-right:6px;
     float:left;
@@ -176,12 +177,34 @@ fieldset.item>div.output {
 fieldset.item>div.output>canvas {
     background-color:#8dd09e;
 }
+fieldset.item>div.output>div.action>button.trap {
+    background-color:lightblue;
+    border:2px blue solid;
+}
+fieldset.item>div.output>div.action>div.space {
+    width:10px;
+    display:inline-block;
+}
+fieldset.item>div.output>div.status>div {
+    float:left;
+    height:20px;
+    border:1px solid black;
+}
+fieldset.item>div.output>div.status>input.cmd {
+    float:left;
+    background-color:black;
+    color:lightgreen;;
+    font-size:16px;
+    width:250px;
+}
 
 .hidden {
     display:none;
 }
 .normal {
 }
+.choice {
+}
 
 fieldset table {
     font-size:14px;

usr/librarys/example.js

@@ -183,7 +183,21 @@ function Page(page) {
                     event.preventDefault()
                     return true
                 }
+                var his = target.History
+                var pos = target.Current
                 switch (event.key) {
+                    case "p":
+                        if (!his) { break }
+                        pos = (pos-1+his.length+1) % (his.length+1)
+                        target.value = pos < his.length? his[pos]: ""
+                        target.Current = pos
+                        break
+                    case "n":
+                        if (!his) { break }
+                        pos = (pos+1) % (his.length+1)
+                        target.value = pos < his.length? his[pos]: ""
+                        target.Current = pos
+                        break
                     case "a":
                     case "e":
                     case "f":
@@ -388,6 +402,9 @@ function Page(page) {
             // page.onscroll && page.onscroll(event, window, "scroll")
         // }
         document.body.onkeydown = function(event) {
+            if (page.localMap && page.localMap(event)) {
+                return
+            }
             page.oncontrol && page.oncontrol(event, document.body, "control")
         }
     }
@@ -704,22 +721,23 @@ function Plugin(page, pane, field) {
                 item == target && (index == list.length-1? plugin.Runs(event, cb): page.plugin == field && list[index+1].focus())
             })
         },
-        Runs: function(event, cb) {
+        Run: function(event, args, cb) {
-            page.footer.Pane.State("ncmd", kit.History.get("cmd").length)
-            var args = kit.Selector(option, ".args", function(item, index) {
-                return item.value
-            })
             var show = true
             setTimeout(function() {
                 show && page.ontoast(kit.Format(args||["running..."]), meta.name, -1)
             }, 1000)
             event.Plugin = plugin, field.Run(event, args, function(msg) {
                 show = false, page.ontoast("")
-                output.innerHTML = ""
+                plugin.ondaemon[display.deal||"table"](msg, cb)
-                plugin.ondaemon[display.deal||"table"](msg)
-                typeof cb == "function" && cb(msg)
             })
         },
+        Runs: function(event, cb) {
+            page.footer.Pane.State("ncmd", kit.History.get("cmd").length)
+            var args = kit.Selector(option, ".args", function(item, index) {
+                return item.value
+            })
+            this.Run(event, args, cb)
+        },
         Delay: function(time, event, text) {
             page.ontoast(text, "", -1)
             setTimeout(function() {
@@ -732,32 +750,16 @@ function Plugin(page, pane, field) {
             output.innerHTML = ""
         },
         ondaemon: {
-            void: function(msg) {},
+            table: function(msg, cb) {
-            table: function(msg) {
+                output.innerHTML = ""
                 !display.hide_append && msg.append && kit.OrderTable(kit.AppendTable(kit.AppendChild(output, "table"), ctx.Table(msg), msg.append), exports[1], function(event, value, name, line) {
                     page.Sync("plugin_"+exports[0]).set(plugin.onexport[exports[2]||""](value, name, line))
                 });
                 (display.show_result || !msg.append) && msg.result && kit.OrderCode(kit.AppendChild(output, [{view: ["code", "div", msg.Results()]}]).first)
+                typeof cb == "function" && cb(msg)
             },
-            trend: function(msg) {
+            trend: function(msg, cb) {
-                var id = "canvas"+page.ID()
+                typeof cb == "function" && !cb(msg) || Canvas(plugin, output, output.clientWidth-40, 400, 10, msg)
-                var width = output.clientWidth-40, height = 230, space = 10
-                var action = kit.AppendChild(output, [{view: ["action"]}]).last
-
-                var item = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {id: id, width: width+20, height: height+20}}]).last
-                var point = kit.AppendChild(output, [{text: ["point"]}]).last
-                canvas = item.getContext("2d")
-
-                cc = Canvas(canvas, width, height, space, msg).drawData()
-                for (var k in cc.button) {
-                    kit.AppendChild(action, [{button: [k, cc.button[k]]}])
-                }
-                item.onclick = function(event) {
-                    cc.pushPoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY)
-                }
-                item.onmousemove = function(event) {
-                    cc.movePoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY)
-                }
             },
             point: function(msg) {
                 var id = "canvas"+page.ID()
@@ -844,58 +846,191 @@ function Plugin(page, pane, field) {
     plugin.init(page, pane, field, option, output)
     return page[field.id] = pane[field.id] = plugin.Field = field, field.Plugin = plugin
 }
-function Canvas(canvas, width, height, space, msg) {
+function Canvas(plugin, output, width, height, space, msg) {
-    var type = "weight"
+    var view = [], ps = [], point = [], index = 0, now = {}
-    var shape = "drawLine"
+    var trap = false, label = false
-    var what = {
-        reset: function() {
-            canvas.resetTransform()
-            canvas.clearRect(0, 0, width+20*space, height+20*space)
-        },
-        drawAxies: function(space, style) {
-            this.reset()
-            canvas.setTransform(1, 0, 0, -1, space, height)
 
+    var conf = {
+        font: "monospace", text: "hi", tool: "stroke", style: "black",
+        type: "trend", shape: "drawText", means: "drawPoint",
+        limits: {scale: 3, drawPoint: 1, drawPoly: 3},
+        axies: {style: "black", width: 2},
+        xlabel: {style: "red", width: 2, height: 5},
+        play: 500,
+        mpoint: 10,
+    }
+    var what = {
+        reset: function(x, y) {
+            canvas.resetTransform()
+            canvas.setTransform(1, 0, 0, -1, space+(x||0), height+space-(y||0))
+            return what
+        },
+        clear: function() {
+            var p0 = what.transform({x:-width, y:-height})
+            var p1 = what.transform({x:2*width, y:2*height})
+            canvas.clearRect(p0.x, p0.y, p1.x-p0.x, p1.y-p0.y)
+            return what
+        },
+
+        move: function(meta) {
+            var p0 = meta.ps[0] || {x:0, y:0}
+            var p1 = meta.ps[1] || now
+            canvas.save(), what.clear().drawLine(meta)
+            canvas.translate(p1.x-p0.x, p1.y-p0.y)
+            what.drawData().drawView()
+            meta.ps.length < 2 && canvas.restore()
+        },
+        scale: function(meta) {
+            var ps = meta.ps
+            var p0 = ps[0] || {x:0, y:0}
+            var p1 = ps[1] || now
+            var p2 = ps[2] || now
+
+            if (ps.length > 1) {
+                canvas.save(), what.clear()
+                what.drawLine({ps: [p0, {x: p1.x, y: p0.y}]})
+                what.drawLine({ps: [{x: p1.x, y: p0.y}, p1]})
+                what.drawLine({ps: [p0, {x: p2.x, y: p0.y}]})
+                what.drawLine({ps: [{x: p2.x, y: p0.y}, p2]})
+                canvas.scale((p2.x-p0.x)/(p1.x-p0.x), (p2.y-p0.y)/(p1.y-p0.y))
+                what.drawData().drawView()
+                meta.ps.length < 3 && canvas.restore()
+            }
+        },
+        rotate: function(meta) {
+            var p0 = meta.ps[0] || {x:0, y:0}
+            var p1 = meta.ps[1] || now
+            canvas.save(), what.clear().drawLine(meta)
+            canvas.rotate(Math.atan2(p1.y-p0.y, p1.x-p0.x))
+            what.drawData().drawView()
+            meta.ps.length < 2 && canvas.restore()
+        },
+
+        draw: function(meta) {
+            canvas.strokeStyle = meta.style || conf.style
+            canvas.fillStyle = meta.style || conf.style
+            canvas[meta.tool||conf.tool]()
+            return meta
+        },
+        drawText: function(meta) {
+            var p0 = meta.ps[0] || {x:0, y:0}
+            var p1 = meta.ps[1] || now
+            var t = meta.text||status.cmd.value||conf.text
+
+            canvas.save()
+            canvas.translate(p0.x, p0.y)
+            canvas.scale(1, -1)
+            canvas.rotate(-Math.atan2(p1.y-p0.y, p1.x-p0.x))
+            what.draw(meta)
+            canvas.font=kit.distance(p0.x, p0.y, p1.x, p1.y)/t.length*2+"px "+conf.font
+            canvas[(meta.tool||conf.tool)+"Text"](t, 0, 0)
+            canvas.restore()
+            return meta
+        },
+        drawPoint: function(meta) {
+            meta.ps.concat(now).forEach(function(p) {
+                canvas.save()
+                canvas.translate(p.x, p.y)
+                canvas.beginPath()
+                canvas.moveTo(-conf.mpoint, 0)
+                canvas.lineTo(conf.mpoint, 0)
+                canvas.moveTo(0, -conf.mpoint)
+                canvas.lineTo(0, conf.mpoint)
+                what.draw(meta)
+                canvas.restore()
+            })
+            return meta
+        },
+        drawLine: function(meta) {
+            var p0 = meta.ps[0] || {x:0, y:0}
+            var p1 = meta.ps[1] || now
+            canvas.save()
             canvas.beginPath()
-            canvas.moveTo(-10, 0)
+            canvas.moveTo(p0.x, p0.y)
+            canvas.lineTo(p1.x, p1.y)
+            what.draw(meta)
+            canvas.restore()
+            return meta
+        },
+        drawPoly: function(meta) {
+            var ps = meta.ps
+            canvas.save()
+            canvas.beginPath()
+            canvas.moveTo(ps[0].x, ps[0].y)
+            for (var i = 1; i < ps.length; i++) {
+                canvas.lineTo(ps[i].x, ps[i].y)
+            }
+            ps.length < conf.limits.drawPoly && canvas.lineTo(now.x, now.y)
+            what.draw(meta)
+            canvas.restore()
+            return meta
+        },
+        drawRect: function(meta) {
+            var p0 = meta.ps[0] || {x:0, y:0}
+            var p1 = meta.ps[1] || now
+            canvas.save()
+            what.draw(meta)
+            canvas[(meta.tool||conf.tool)+"Rect"](p0.x, p0.y, p1.x-p0.x, p1.y-p0.y)
+            canvas.restore()
+            return meta
+        },
+        drawCircle: function(meta) {
+            var p0 = meta.ps[0] || {x:0, y:0}
+            var p1 = meta.ps[1] || now
+            canvas.save()
+            canvas.beginPath()
+            canvas.arc(p0.x, p0.y, kit.distance(p0.x, p0.y, p1.x, p1.y), 0, Math.PI*2, true)
+            what.draw(meta)
+            canvas.restore()
+            return meta
+        },
+        drawEllipse: function(meta) {
+            var p0 = meta.ps[0] || {x:0, y:0}
+            var p1 = meta.ps[1] || now
+            var r0 = Math.abs(p1.x-p0.x)
+            var r1 = Math.abs(p1.y-p0.y)
+
+            canvas.save()
+            canvas.beginPath()
+            canvas.translate(p0.x, p0.y)
+            r1 > r0? (canvas.scale(r0/r1, 1), r0 = r1): canvas.scale(1, r1/r0)
+            canvas.arc(0, 0, r0, 0, Math.PI*2, true)
+            what.draw(meta)
+            canvas.restore()
+            return meta
+        },
+
+        drawAxies: function(space, style) {
+            canvas.beginPath()
+            canvas.moveTo(-space, 0)
             canvas.lineTo(width+space, 0)
-            canvas.moveTo(0, -10)
+            canvas.moveTo(0, -space)
             canvas.lineTo(0, height+space)
-            canvas.strokeStyle = style||"gray"
+            canvas.strokeStyle = conf.axies.style
-            canvas.lineWidth = 2
+            canvas.lineWidth = conf.axies.width
             canvas.stroke()
-            return this
+            return what
         },
         drawXLabel: function(step) {
             canvas.beginPath()
             for (var pos = step; pos < width; pos += step) {
                 canvas.moveTo(pos, 0)
-                canvas.lineTo(pos, -5)
+                canvas.lineTo(pos, -conf.xlabel.height)
             }
-            canvas.strokeStyle = "red"
+            canvas.strokeStyle = conf.xlabel.style
-            canvas.lineWidth = 2
+            canvas.lineWidth = conf.xlabel.width
             canvas.stroke()
-            return this
+            return what
-        },
-        drawYGrid: function(step) {
-            canvas.beginPath()
-            for (var pos = step; pos < height; pos += step) {
-                canvas.moveTo(-5, pos)
-                canvas.lineTo(width, pos)
-            }
-            canvas.strokeStyle = "#999"
-            canvas.lineWidth = 1
-            canvas.stroke()
-            return this
         },
+
         drawData: function() {
             var col = msg.append.length
             var row = msg[msg.append[0]].length
             var step = width / (row - 1)
 
-            switch (type) {
+            switch (conf.type) {
                 case "trend":
-                    this.drawAxies(10).drawXLabel(step)
+                    what.drawAxies(10).drawXLabel(step)
                     canvas.beginPath()
                     msg.append.forEach(function(key) {
                         var max = 0
@@ -916,8 +1051,7 @@ function Canvas(canvas, width, height, space, msg) {
                     break
 
                 case "weight":
-                    this.reset()
+                    what.reset(0, height/2)
-
                     var nline = 0
                     msg.append.forEach(function(key, index) {
                         !isNaN(parseInt(msg[key][0])) && nline++
@@ -925,22 +1059,21 @@ function Canvas(canvas, width, height, space, msg) {
                     var space = width / (nline+1)
 
                     var order = 0
-                    msg.append.forEach(function(key, index) {
+                    msg.append.forEach(function(key, i) {
                         if (isNaN(parseInt(msg[key][0]))) {
                             return
                         }
                         order++
 
-                        canvas.resetTransform()
+                        canvas.translate(space, 0)
-                        canvas.setTransform(1, 0, 0, -1, space*order, height/2)
 
                         var total = 0
-                        msg[key].forEach(function(value, index, array) {
+                        msg[key].forEach(function(value, i, array) {
                             total += parseInt(value)/1
                         })
                         var sum = 0
 
-                        msg[key].forEach(function(value, index, array) {
+                        msg[key].forEach(function(value, i, array) {
                             value = parseInt(parseInt(value)/1)
                             if ((value)/total < 0.01) {
                                 return
@@ -949,132 +1082,350 @@ function Canvas(canvas, width, height, space, msg) {
                             canvas.moveTo(0, 0)
                             var a = sum/total*Math.PI*2
                             var b = (sum+value)/total*Math.PI*2
-                            kit.Log(a, b)
                             canvas.arc(0, 0, (space/2)-20, a, b, false)
                             canvas.closePath()
-                            canvas.strokeStyle = "black"
+
-                            canvas.lineWidth = 1
+                            if (i == index) {
-                            canvas.stroke()
+                                canvas.fillStyle = "white"
+                                canvas.fill()
+                            } else {
+                                canvas.strokeStyle = "black"
+                                canvas.lineWidth = 1
+                                canvas.stroke()
+                            }
+
                             sum+=value
                         })
                     })
                     break
             }
-            return this
+            return what
         },
-        view: [],
         drawView: function() {
-            var that = this
+            view.forEach(function(view) {
-            this.view.forEach(function(view) {
+                view.meta && what[view.type](view.meta)
-                that[view.type](view.meta)
+            })
+            return what
+        },
+        drawLabel: function() {
+            if (!label) { return what }
+
+            var p = now
+            var q = what.reverse(p)
+
+            var weight = 0
+            index = 0
+            canvas.save()
+            if (conf.type == "trend") {
+                index = parseInt(p.x/space)
+                canvas.moveTo(p.x, -10)
+                canvas.lineTo(p.x, height)
+                canvas.moveTo(-10, p.y)
+                canvas.lineTo(width, p.y)
+            } else {
+                var a = Math.atan2(p.y, p.x)
+                a < 0 && (a += Math.PI*2)
+                var pos = a/2/Math.PI
+
+                var total = 0
+                msg[msg.append[msg.append.length-1]].forEach(function(value) {
+                    total += parseInt(value)
+                })
+                var sum = 0
+                msg[msg.append[msg.append.length-1]].forEach(function(value, i) {
+                    sum += parseInt(value), sum / total < pos && (index = i+1)
+                    index == i && (weight = parseInt(value/total*100))
+                })
+                canvas.moveTo(0, 0)
+                canvas.lineTo(p.x, p.y)
+                canvas.lineTo(p.x+10, p.y)
+            }
+            canvas.strokeStyle = conf.style
+            canvas.stroke()
+
+            canvas.resetTransform()
+            canvas.font="16px monospace"
+            canvas.fillStyle = conf.style
+            weight && canvas.fillText("weight: "+weight+"%", q.x+10, q.y+10+i*20)
+            canvas.fillText("index: "+index, q.x+10, q.y+30+i*20)
+            msg.append.forEach(function(key, i, n) {
+                msg[key][index] && canvas.fillText(key+": "+msg[key][index], q.x+10, q.y+50+i*20)
+            })
+            canvas.restore()
+            return what
+        },
+        drawShape: function() {
+            point.length > 0 && (what[conf.shape]({ps: point}), what[conf.means]({ps: point, tool: "stroke", style: "red"}))
+            return what
+        },
+
+        refresh: function() {
+            return what.clear().drawData().drawView().drawLabel().drawShape()
+        },
+        cancel: function() {
+            point = [], what.refresh()
+            return what
+        },
+        play: function() {
+            function cb() {
+                view[i] && what[view[i].type](view[i].meta) && (t = kit.Delay(view[i].type == "drawPoint"? 10: conf.play, cb))
+                i++
+                status.nshape.innerText = i+"/"+view.length
+            }
+            var i = 0
+            what.clear().drawData()
+            kit.Delay(10, cb)
+            return what
+        },
+        back: function() {
+            view.pop(), status.nshape.innerText = view.length
+            return what.refresh()
+        },
+        push: function(item) {
+            item.meta && item.meta.ps < (conf.limits[item.type]||2) && ps.push(item)
+            status.nshape.innerText = view.push(item)
+            return what
+        },
+        wait: function() {
+            status.cmd.focus()
+            return what
+        },
+        trap: function(value, event) {
+            event.target.className = (trap = !trap)? "trap": "normal"
+            page.localMap = trap? what.input: undefined
+        },
+        label: function(value, event) {
+            event.target.className = (label = !label)? "trap": "normal"
+        },
+
+        movePoint: function(p) {
+            now = p, status.xy.innerHTML = p.x+","+p.y;
+            (point.length > 0 || ps.length > 0 || label) && what.refresh()
+        },
+        pushPoint: function(p) {
+            if (ps.length > 0) {
+                ps[0].meta.ps.push(p) > 1 && ps.pop(), what.refresh()
+                return
+            }
+
+            point.push(p) >= (conf.limits[conf.shape]||2) && what.push({type: conf.shape,
+                meta: what[conf.shape]({ps: point, text: status.cmd.value||conf.text, tool: conf.tool, style: conf.style}),
+            }) && (point = [])
+            conf.means == "drawPoint" && what.push({type: conf.means, meta: what[conf.means]({ps: [p], tool: "stroke", style: "red"})})
+        },
+        transform: function(p) {
+            var t = canvas.getTransform()
+            return {
+                x: (p.x-t.c/t.d*p.y+t.c*t.f/t.d-t.e)/(t.a-t.c*t.b/t.d),
+                y: (p.y-t.b/t.a*p.x+t.b*t.e/t.a-t.f)/(t.d-t.b*t.c/t.a),
+            }
+        },
+        reverse: function(p) {
+            var t = canvas.getTransform()
+            return {
+                x: t.a*p.x+t.c*p.y+t.e,
+                y: t.b*p.x+t.d*p.y+t.f,
+            }
+        },
+
+        check: function() {
+            view.forEach(function(item, index, view) {
+                item && item.send && plugin.Run(window.event||{}, item.send.concat(["type", item.type]), function(msg) {
+                    msg.text && msg.text[0] && (item.meta.text = msg.text[0])
+                    msg.style && msg.style[0] && (item.meta.style = msg.style[0])
+                    msg.ps && msg.ps[0] && (item.meta.ps = JSON.parse(msg.ps[0]))
+                    what.refresh()
+                })
+                index == view.length -1 && kit.Delay(1000, what.check)
             })
         },
-        drawPoint: function(meta) {
+        parse: function(txt) {
-            canvas.save()
+            var meta = {}, cmds = [], rest = -1, send = []
-            canvas.translate(meta.x0, meta.y0)
+            txt.trim().split(" ").forEach(function(item) {
-            canvas.beginPath()
+                switch (item) {
-            canvas.moveTo(-10, 0)
+                    case "stroke":
-            canvas.lineTo(10, 0)
+                    case "fill":
-            canvas.moveTo(0, -10)
+                        meta.tool = item
-            canvas.lineTo(0, 10)
+                        break
-            canvas.strokeStyle = meta.style
+                    case "black":
-            canvas.stroke()
+                    case "white":
-            canvas.restore()
+                    case "red":
-            return meta
+                    case "yellow":
-        },
+                    case "green":
-        drawLine: function(meta) {
+                    case "cyan":
-            canvas.save()
+                    case "blue":
-            canvas.beginPath()
+                    case "purple":
-            canvas.moveTo(meta.x0, meta.y0)
+                        meta.style = item
-            canvas.lineTo(meta.x1, meta.y1)
+                        break
-            canvas.strokeStyle = meta.style
+                    case "cmds":
-            canvas.stroke()
+                        rest = cmds.length
-            canvas.restore()
+                    default:
-            return meta
+                        cmds.push(item)
-        },
+                }
-        drawRect: function(meta) {
+            }), rest != -1 && (send = cmds.slice(rest+1), cmds = cmds.slice(0, rest))
-            canvas.save()
-            canvas.strokeStyle = meta.style
-            canvas.strokeRect(meta.x0, meta.y0, meta.x1-meta.x0, meta.y1-meta.y0)
-            canvas.restore()
-            return meta
-        },
-        drawCircle: function(meta) {
-            var r = Math.sqrt((meta.x1-meta.x0)*(meta.x1-meta.x0)+(meta.y1-meta.y0)*(meta.y1-meta.y0))
-            canvas.save()
-            canvas.beginPath()
-            canvas.arc(meta.x0, meta.y0, r, 0, Math.PI*2, true)
-            canvas.strokeStyle = meta.style
-            canvas.stroke()
-            canvas.restore()
-            return meta
-        },
-        drawEllipse: function(meta) {
-            var r0 = Math.abs(meta.x1-meta.x0)
-            var r1 = Math.abs(meta.y1-meta.y0)
 
-            canvas.save()
+            var cmd = {
-            canvas.beginPath()
+                "t": "drawText",
-            canvas.translate(meta.x0, meta.y0)
+                "l": "drawLine",
+                "p": "drawPoly",
+                "r": "drawRect",
+                "c": "drawCircle",
+                "e": "drawEllipse",
+            }[cmds[0]] || cmds[0]
+            cmds = cmds.slice(1)
 
-            if (r1 > r0) {
+            var args = []
-                canvas.scale(1, r1/r0)
+            switch (cmd) {
-                canvas.arc(0, 0, r1, 0, Math.PI*2, true)
+                case "send":
-                //
+                    plugin.Run(window.event, cmds, function(msg) {
-                // canvas.scale((meta.x1-meta.x0)/(meta.y1-meta.y0), (meta.y1-meta.y0)/(meta.x1-meta.x0))
+                        kit.Log(msg)
-                // canvas.arc(0, 0, Math.sqrt((meta.y1-meta.y0)*(meta.x1-meta.x0)), 0, Math.PI*2, true)
+                    })
-            } else {
+                    return
-                canvas.scale(r0/r1, 1)
+                default:
-                canvas.arc(0, 0, r0, 0, Math.PI*2, true)
+                    meta.ps = []
+                    for (var i = 0; i < cmds.length; i+=2) {
+                        var x = parseInt(cmds[i])
+                        var y = parseInt(cmds[i+1])
+                        !isNaN(x) && !isNaN(y) && meta.ps.push({x: x, y: y}) || (args.push(cmds[i]), i--)
+                    }
+            }
+            meta.args = args
+
+            switch (cmd) {
+                case "drawText":
+                    meta.text = args.join(" "), delete(meta.args)
+                case "drawLine":
+                case "drawPoly":
+                case "drawRect":
+                case "drawCircle":
+                case "drawEllipse":
+                    what.push({type: cmd, meta: what[cmd](meta), send:send})
             }
 
-            canvas.strokeStyle = meta.style
+            return (what[cmd] || function() {
-            canvas.stroke()
+                return what
-            canvas.restore()
+            })(meta)
-            return meta
         },
-        shape: "drawLine",
+        input: function(event) {
-        movePoint: function(point, x, y) {
+            switch (event.key) {
-            if (this.begin) {
+                default:
-                this.drawData()
+                    var map = what.trans[event.key]
-                this.drawView()
+                    map && action[map[0]] && (action[map[0]].value = map[1])
-                this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y})
+                    map && what.trans[map[0]] && (map = what.trans[map[1]]) && (conf[map[0]] && (conf[map[0]] = map[1]) || what[map[0]] && what[map[0]]())
-                // this.drawRect({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y, style: "red"})
+                    break
-            }
-            point.innerHTML = x+","+y
-        },
-        pushPoint: function(point, x, y) {
-            if (this.begin) {
-                this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})})
-                this.view.push({type: shape, meta: this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y})})
-                delete(this.begin)
-            } else {
-                this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})})
-                this.begin = {x: x, y:y}
             }
         },
-        button: {
+        trans: {
-            "trend": function() {
+            "折线图": ["type", "trend"],
-                type = "trend"
+            "饼状图": ["type", "weight"],
-                what.drawData()
+
-            },
+            "移动": ["shape", "move"],
-            "weight": function() {
+            "旋转": ["shape", "rotate"],
-                type = "weight"
+            "缩放": ["shape", "scale"],
-                what.drawData()
+
-            },
+            "文本": ["shape", "drawText"],
-            "line": function() {
+            "直线": ["shape", "drawLine"],
-                shape = "drawLine"
+            "折线": ["shape", "drawPoly"],
-            },
+            "矩形": ["shape", "drawRect"],
-            "rect": function() {
+            "圆形": ["shape", "drawCircle"],
-                shape = "drawRect"
+            "椭圆": ["shape", "drawEllipse"],
-            },
+
-            "circle": function() {
+            "辅助点": ["means", "drawPoint"],
-                shape = "drawCircle"
+            "辅助线": ["means", "drawRect"],
-            },
+
-            "ellipse": function() {
+            "画笔": ["tool", "stroke"],
-                shape = "drawEllipse"
+            "画刷": ["tool", "fill"],
-            },
+
+            "黑色": ["style", "black"],
+            "红色": ["style", "red"],
+            "绿色": ["style", "green"],
+            "黄色": ["style", "yellow"],
+            "蓝色": ["style", "blue"],
+            "紫色": ["style", "purple"],
+            "青色": ["style", "cyan"],
+            "白色": ["style", "white"],
+            "随机色": ["style", "random"],
+            "默认色": ["style", "default"],
+
+            "清屏": ["clear"],
+            "刷新": ["refresh"],
+            "取消": ["cancel"],
+            "播放": ["play"],
+            "回退": ["back"],
+            "输入": ["wait"],
+
+            "标签": ["label"],
+            "快捷键": ["trap"],
+
+            "x": ["折线图", "折线图"],
+            "y": ["折线图", "饼状图"],
+
+            "a": ["移动", "旋转"],
+            "m": ["移动", "移动"],
+            "z": ["移动", "缩放"],
+
+            "t": ["文本", "文本"],
+            "l": ["文本", "直线"],
+            "v": ["文本", "折线"],
+            "r": ["文本", "矩形"],
+            "c": ["文本", "圆形"],
+            "e": ["文本", "椭圆"],
+
+            "s": ["画笔", "画笔"],
+            "f": ["画笔", "画刷"],
+
+            "0": ["黑色", "黑色"],
+            "1": ["黑色", "红色"],
+            "2": ["黑色", "绿色"],
+            "3": ["黑色", "黄色"],
+            "4": ["黑色", "蓝色"],
+            "5": ["黑色", "紫色"],
+            "6": ["黑色", "青色"],
+            "7": ["黑色", "白色"],
+            "8": ["黑色", "随机色"],
+            "9": ["黑色", "默认色"],
+
+            "j": ["刷新", "刷新"],
+            "g": ["播放", "播放"],
+            "b": ["回退", "回退"],
+            "q": ["清空", "清空"],
+
+            "Escape": ["取消", "取消"],
+            " ": ["输入", "输入"],
         },
     }
-    return what
+
+    var action = kit.AppendAction(kit.AppendChild(output, [{view: ["action"]}]).last, [
+        ["折线图", "饼状图"],
+        ["移动", "旋转", "缩放"],
+        ["文本", "直线", "折线", "矩形", "圆形", "椭圆"],
+        ["辅助点", "辅助线"],
+        ["画笔", "画刷"],
+        ["黑色", "白色", "红色", "黄色", "绿色", "青色", "蓝色", "紫色"],
+        "", "清屏", "刷新", "播放", "回退",
+        "", "标签", "快捷键",
+    ], function(value, event) {
+        var map = what.trans[value]
+        conf[map[0]] && (conf[map[0]] = map[1]) || what[map[0]] && what[map[0]](value, event)
+    })
+
+    var canvas = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {width: width+20, height: height+20,
+        onclick: function(event) {
+            what.pushPoint(what.transform({x: event.offsetX, y: event.offsetY}), event.clientX, event.clientY)
+        }, onmousemove: function(event) {
+            what.movePoint(what.transform({x: event.offsetX, y: event.offsetY}), event.clientX, event.clientY)
+        },
+    }}]).last.getContext("2d")
+
+    var status = kit.AppendStatus(kit.AppendChild(output, [{view: ["status"]}]).last, [{name: "nshape"}, {"className": "cmd", style: {width: (output.clientWidth - 100)+"px"}, data: {autocomplete: "off"}, input: ["cmd", function(event) {
+        var target = event.target
+        event.type == "keyup" && event.key == "Enter" && what.parse(target.value) && (!target.History && (target.History=[]),
+            target.History.push(target.value), target.Current=target.History.length, target.value = "")
+        event.type == "keyup" && page.oninput(event), event.stopPropagation()
+
+    }]}, {name: "xy"}], function(value, name, event) {
+
+    })
+
+    return what.reset().refresh()
 }

usr/librarys/toolkit.js

@@ -29,6 +29,7 @@ kit = toolkit = {
         return args
     },
     Delay: function(time, cb) {
+        return setTimeout(cb, time)
     },
 
     ModifyView: function(which, args) {
@@ -114,11 +115,13 @@ kit = toolkit = {
             return elm
         }
 
-        // 基本属性: name value inner style
+        // 基本属性: name value inner
+        // 基本样式: style className
+        // 基本事件: dataset click
         //
-        // dataset click
+        // 按键: button select
-        // button input label img
+        // 输入: input password
-        // select
+        // 输出: label img
         //
         // 树状结构: tree fork leaf
         // 普通视图: view text code
@@ -145,9 +148,6 @@ kit = toolkit = {
             if (child.inner) {
                 child.data["innerHTML"] = child.inner
             }
-            if (child.className) {
-                child.data["className"] = child.className
-            }
             if (typeof(child.style) == "object") {
                 var str = []
                 for (var k in child.style) {
@@ -158,6 +158,9 @@ kit = toolkit = {
                 }
                 child.data["style"] = str.join("")
             }
+            if (child.className) {
+                child.data["className"] = child.className
+            }
             if (child.dataset) {
                 child.data["dataset"] = child.dataset
             }
@@ -167,21 +170,27 @@ kit = toolkit = {
 
             if (child.button) {
                 child.type = "button"
-                child.data["onclick"] = child.button[1]
+                child.data["onclick"] = function(event) {
+                    child.button[1](child.button[0], event)
+                }
                 child.data["innerText"] = child.button[0]
                 child.name = child.name || child.button[0]
 
             } else if (child.select) {
                 child.type = "select"
+                child.name = child.select[0][0]
                 child.list = child.select[0].map(function(value) {
                     return {type: "option", value: value, inner: value}
                 })
-                child.data["onchange"] = child.select[1]
+                child.data["onchange"] = function(event) {
+                    child.select[1](event.target.value, event)
+                }
 
             } else if (child.input) {
                 child.type = "input"
-                child.data["onkeyup"] = child.input[1]
                 child.data["name"] = child.input[0]
+                child.data["onkeyup"] = child.input[1]
+                child.data["onkeydown"] = child.input[1]
                 child.name = child.name || child.input[0]
 
             } else if (child.password) {
@@ -289,6 +298,36 @@ kit = toolkit = {
         return parent.insertBefore(elm, position || parent.firstElementChild)
     },
 
+    AppendAction: function(parent, list, cb) {
+        var result = []
+        list.forEach(function(item, index) {
+            if (item == "") {
+                result.push({view: ["space"]})
+            } else if (typeof item == "string") {
+                result.push({button: [item, cb]})
+            } else if (item.forEach) {
+                result.push({select: [item, cb]})
+            } else {
+                result.push(item)
+            }
+        })
+        return kit.AppendChild(parent, result)
+    },
+    AppendStatus: function(parent, list, cb) {
+        var result = []
+        list.forEach(function(item, index) {
+            if (item == "") {
+                result.push({view: ["space"]})
+            } else if (typeof item == "string") {
+                result.push({button: [item, cb]})
+            } else if (item.forEach) {
+                result.push({select: [item, cb]})
+            } else {
+                result.push(item)
+            }
+        })
+        return kit.AppendChild(parent, result)
+    },
     AppendTable: function(table, data, fields, cb) {
         if (!data || !fields) {
             return
@@ -648,5 +687,8 @@ kit = toolkit = {
             }
         })
     },
+    distance: function(x0, y0, x1, y1) {
+        return Math.sqrt(Math.pow(x1-x0, 2)+Math.pow(y1-y0, 2))
+    },
 }