add spide.js

frame.js

@@ -177,8 +177,8 @@ Volcanos("onappend", { _init: function(can, meta, list, cb, target, field) { met
 
         // 添加插件
         var sub = Volcanos(meta.name, { _help: meta.name, _follow: can._follow+"."+meta.name,
+            _legend: legend, _option: option, _action: action, _output: output, _status: status,
             _target: field, _inputs: {}, _outputs: [], _history: [],
-            _option: option, _action: action, _output: output,
             Option: function(key, value) {
                 if (typeof key == "object") { return sub.core.Item(key, sub.Option), key }
                 if (key == undefined) { value = {}
@@ -611,7 +611,6 @@ Volcanos("onmotion", {help: "动态交互", list: [], _init: function(can) {
     show: function(can, target, time) { time = time || {value: 100, length: 30}
         can.page.Modify(can, target, {style: {opacity: 0}})
         can.Timer(time, function(event, value, index) {
-            console.log(arguments)
             can.page.Modify(can, target, {style: {opacity: (index+1)/time.length}})
         }, function() {
         })

plugin/local/code/inner.css

@@ -106,6 +106,10 @@ fieldset.editor>div.output div.search {
     height:120px; overflow:auto;
     clear:both;
 }
+fieldset.editor>div.output div.search td>div {
+    max-height:100px;
+    overflow:hidden;
+}
 fieldset.editor>div.output div.holdon {
     max-height:400px; overflow:auto;
 }

plugin/local/code/inner.js

@@ -41,7 +41,6 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, list, cb,
             can.onimport.project(can, can.Option("path"))
             can.onsyntax._init(can, msg)
             can.onkeymap._init(can)
-            can.onaction.selectLine(can, parseInt(msg.Option("line")))
         })
         return typeof cb == "function" && cb(msg)
     },
@@ -58,17 +57,23 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, list, cb,
         var push = {path: path, file: file, line: line}
         !can.core.Eq(can.history[can.history.length-1], push) && can.history.push(push)
 
-        can.Option({path: path, file: file, line: line||1})
+        function show() {
-        if (can.tabview[path+file]) {
+            if (can._msg) {
-            can.onsyntax._init(can, can.tabview[path+file])
+                can._msg.Option("line", can.Option("line"))
-            can.onaction.selectLine(can, line||1)
+            }
-            return
+
+            can._msg = can.tabview[path+file]
+            can.file = file, can.parse = can.base.Ext(file), can.max = 0
+            can.Option({path: path, file: file, line: line||parseInt(can._msg.Option("line"))})
+            can.onsyntax._init(can, can._msg)
         }
-        can.run({}, [path, file], function(msg) {
+        if (can.tabview[path+file]) { return show() }
-            msg.Option({path: can.Option("path"), file:  can.Option("file")})
+
+        can.run({}, ["action", "render", can.base.Ext(file), file, path], function(msg) {
+            can.tabview[path+file] = msg
+            msg.Option({path: path, file: file, line: line})
             can.page.Append(can, can._action, [{view: ["file", "div", file], onclick: function(event) {
-                can.onsyntax._init(can, can.tabview[path+file] = msg)
+                can.onimport.tabview(can, path, file)
-                can.Option({path: path, file: file, line: line||1})
             }, ondblclick: function(event) {
                 can.onkeymap._remote(event, can, "运行")
             }, oncontextmenu: function(event) {
@@ -87,11 +92,12 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, list, cb,
                 },
 
             }]).first.click()
-            can.onaction.selectLine(can, line||1)
         }, true)
     },
     project: function(can, path) { can.Option({path: path})
-        can.run({}, [path+"/"], function(msg) { can.ui.project.innerHTML = ""
+        var msg = can.request({})
+        msg.Option("dir_deep", "true")
+        can.run(msg._event, ["action", "render", "dir", "", path+"/"], function(msg) { can.ui.project.innerHTML = ""
             can.onappend.tree(can, msg, can.ui.project, function(event, value) {
                 can.onimport.tabview(can, can.Option("path"), value.path)
             })
@@ -116,9 +122,7 @@ Volcanos("onsyntax", {help: "语法高亮", list: ["keyword", "prefix", "line"],
         }); if (cache) { return }
 
         // remote
-        can.parse = can.base.Ext(can.file), can.max = 0, can.core.List(can.ls = msg.Result().split("\n"), function(item) {
+        can.parse = can.base.Ext(can.file), can.max = 0
-            can.onaction.appendLine(can, item)
-        })
 
         // status
         can.Status("文件名", can.file), can.Status("解析器", can.parse)
@@ -129,7 +133,11 @@ Volcanos("onsyntax", {help: "语法高亮", list: ["keyword", "prefix", "line"],
             typeof p.display == "object" && ( p.display.height && can.page.Modify(can, can.ui.display, {style: {
                 // "max-height": p.display.height,
             }}))
-        }; var p = can.onsyntax[can.parse]; !p? can.run({}, ["action", "plug", can.Option("path"), can.Option("file")], function(msg) {
+            can.core.List(can.ls = msg.Result().split("\n"), function(item) {
+                can.onaction.appendLine(can, item)
+            })
+            can.onaction.selectLine(can, can.Option("line")||1)
+        }; var p = can.onsyntax[can.parse]; !p? can.run({}, ["action", "plugin", can.parse, can.Option("file"), can.Option("path")], function(msg) {
             p = can.onsyntax[can.parse] = can.base.Obj(msg.Result()), can.onsyntax._init(can, can._msg), init(p)
         }, true): init(p)
     },
@@ -166,97 +174,6 @@ Volcanos("onsyntax", {help: "语法高亮", list: ["keyword", "prefix", "line"],
             "endif": "keyword",
         },
     },
-    c: {link: "h"},
-    h: {
-        split: {
-            space: " ",
-            operator: "{[(.:,;!|<>)]}",
-        },
-        prefix: {
-            "//": "comment",
-            "/*": "comment",
-            "*": "comment",
-        },
-        keyword: {
-            "#include": "keyword",
-            "#define": "keyword",
-            "#ifndef": "keyword",
-            "#ifdef": "keyword",
-            "#else": "keyword",
-            "#endif": "keyword",
-
-            "typedef": "keyword",
-
-            "if": "keyword",
-            "else": "keyword",
-            "for": "keyword",
-            "while": "keyword",
-            "do": "keyword",
-            "range": "keyword",
-            "break": "keyword",
-            "continue": "keyword",
-            "switch": "keyword",
-            "case": "keyword",
-            "default": "keyword",
-
-            "return": "keyword",
-
-            "union": "datatype",
-            "struct": "datatype",
-            "extern": "datatype",
-            "unsigned": "datatype",
-            "static": "datatype",
-            "double": "datatype",
-            "const": "datatype",
-            "void": "datatype",
-            "long": "datatype",
-            "char": "datatype",
-            "int": "datatype",
-
-            "sizeof": "function",
-            "assert": "function",
-            "zmalloc": "function",
-
-            "NULL": "string",
-            "0": "string",
-            "1": "string",
-            "-1": "string",
-        },
-    },
-    sh: {
-        prefix: {"#": "comment"},
-        suffix: {"\x7B": "comment"},
-        keyword: {
-            "export": "keyword",
-            "source": "keyword",
-            "require": "keyword",
-
-            "if": "keyword",
-            "then": "keyword",
-            "fi": "keyword",
-            "for": "keyword",
-            "do": "keyword",
-            "done": "keyword",
-
-            "local": "keyword",
-            "echo": "keyword",
-            "kill": "keyword",
-            "let": "keyword",
-            "cd": "keyword",
-
-            "xargs": "function",
-            "date": "function",
-            "find": "function",
-            "grep": "function",
-            "sed": "function",
-            "awk": "function",
-            "pwd": "function",
-            "ps": "function",
-            "ls": "function",
-            "rm": "function",
-            "go": "function",
-        },
-    },
     shy: {
         prefix: {"#": "comment"},
         profile: true,
@@ -272,158 +189,20 @@ Volcanos("onsyntax", {help: "语法高亮", list: ["keyword", "prefix", "line"],
             syntax: "keyword",
         },
     },
-    mod: {
+    json: {link: "js"},
-        prefix: {"#": "comment"},
+    css: {
-        keyword: {
+        suffix: {"{": "comment"},
-            "module": "keyword",
-            "require": "keyword",
-            "replace": "keyword",
-            "=>": "keyword",
-        },
     },
-    go: {
+    html: {
-        split: {
-            space: " \t",
-            operator: "{[(&.:,;!|<>)]}",
-        },
-        prefix: {"//": "comment"},
-        keyword: {
-            "package": "keyword",
-            "import": "keyword",
-            "const": "keyword",
-            "func": "keyword",
-            "var": "keyword",
-            "type": "keyword",
-            "struct": "keyword",
-            "interface": "keyword",
-
-            "if": "keyword",
-            "else": "keyword",
-            "for": "keyword",
-            "range": "keyword",
-            "break": "keyword",
-            "continue": "keyword",
-            "switch": "keyword",
-            "case": "keyword",
-            "default": "keyword",
-            "fallthrough": "keyword",
-
-            "defer": "keyword",
-            "go": "keyword",
-            "select": "keyword",
-            "return": "keyword",
-
-            "map": "datatype",
-            "chan": "datatype",
-            "string": "datatype",
-            "error": "datatype",
-            "bool": "datatype",
-            "byte": "datatype",
-            "int": "datatype",
-            "int64": "datatype",
-            "float64": "datatype",
-
-            "len": "function",
-            "cap": "function",
-            "copy": "function",
-            "append": "function",
-
-            "nil": "string",
-
-            "m": "function",
-            "msg": "function",
-        },
-    },
-    godoc: {link: "go"},
-    js: {
         split: {
             space: " ",
-            operator: "{[(.:,;!|)]}",
+            operator: "<>",
-        },
-        prefix: {"//": "comment"},
-        keyword: {
-            "var": "keyword",
-            "new": "keyword",
-            "delete": "keyword",
-            "typeof": "keyword",
-            "function": "keyword",
-
-            "if": "keyword",
-            "else": "keyword",
-            "for": "keyword",
-            "while": "keyword",
-            "break": "keyword",
-            "continue": "keyword",
-            "switch": "keyword",
-            "case": "keyword",
-            "default": "keyword",
-            "return": "keyword",
-
-            "window": "function",
-            "console": "function",
-            "document": "function",
-            "arguments": "function",
-            "event": "function",
-            "Date": "function",
-            "JSON": "function",
-
-            "0": "string",
-            "1": "string",
-            "10": "string",
-            "-1": "string",
-            "true": "string",
-            "false": "string",
-            "undefined": "string",
-            "null": "string",
-
-            "__proto__": "function",
-            "setTimeout": "function",
-            "createElement": "function",
-            "appendChild": "function",
-            "removeChild": "function",
-            "parentNode": "function",
-            "childNodes": "function",
-
-            "Volcanos": "function",
-            "request": "function",
-            "require": "function",
-
-            "cb": "function",
-            "cbs": "function",
-            "shy": "function",
-            "can": "function",
-            "sub": "function",
-            "msg": "function",
-            "res": "function",
-            "pane": "function",
-            "plugin": "function",
-        },
-        word: function(value, index, array) {
-            var libs = {base: true, core: true, misc: true, page: true, user: true}
-            return array[index-2]=="can"&&array[index-1]=="."&&(libs[value]||libs[value.text])? {keyword: "function", text: value.text||value}: value
-        },
-    },
-    json: {link: "js"},
-    man3: {
-        split: {
-        },
-        prefix: {
-            "NAME": "comment",
-            "LIBRARY": "comment",
-            "SYNOPSIS": "comment",
-            "DESCRIPTION": "comment",
-            "STANDARDS": "comment",
-            "SEE ALSO": "comment",
-            "HISTORY": "comment",
-            "BUGS": "comment",
-
         },
         keyword: {
+            "head": "keyword",
+            "body": "keyword",
         },
     },
-    man2: {link: "man3"},
-    man1: {link: "man3"},
-    man8: {link: "man3"},
 
     url: {
         line: function(can, line) {
@@ -789,7 +568,7 @@ Volcanos("onaction", {help: "控件交互", list: [
                 can.Status("npos", index+1)
                 value = value.replace("<", "&lt;").replace(">", "&gt;")
                 value = value.replace("./", "")
-                return {text: [value, "td"], onclick: function(event) {
+                return {text: ["", "td"], list: [{text: [value, "div"]}], onclick: function(event) {
                     line.line && can.onimport.tabview(can, can.Option("path"), line.file.replace("./", ""), parseInt(line.line))
                 }}
             })

plugin/local/wiki/draw.js

@@ -1,6 +1,6 @@
 Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { can._output.innerHTML = ""
         can.onappend.table(can, target, "table", msg), can.ui = can.page.Append(can, target, [
-            {view: "project"}, {view: "profile"},
+            {view: "project", style: {display: "none"}}, {view: "profile"},
             {view: "preview"}, {view: "content", onmouseenter: function(event) {
                 can.onkeypop.action = can
             }}, {view: "display"},
@@ -41,6 +41,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
                 "shape": "rect",
                 "grid": "10",
                 "go": "auto",
+                "go": "manual",
             }, function(key, value) {
                 can.svg.Value(key, can.Action(key, can.svg.Value(key)||value))
             })
@@ -344,7 +345,8 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
                 return target.Val("yy")+tt.ty
             },
         },  //  <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-        draw: function(event, can, point) {
+        draw: function(event, can, point, style) {
+            if (style && style.d) { return style }
             if (point.length == 1) { can._temp = {} }
             if (point.length < 2) {return}
 
@@ -551,7 +553,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "",
         {text: [" c:", "div", "item"]}, ["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
         {text: [" f:", "div", "item"]}, ["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black", "#0000"],
         {text: [" g:", "div", "item"]}, ["go", "run", "auto", "manual"],
-        {text: [" a:", "div", "item"]}, ["mode", "draw", "resize", "delete"],
+        {text: [" a:", "div", "item"]}, ["mode", "translate", "draw", "resize", "delete"],
         {text: [" s:", "div", "item"]}, ["shape", "block", "rect", "text", "line", "path", "circle", "ellipse", "heart"],
     ],
     "项目": function(event, can, key) {
@@ -600,6 +602,37 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "",
                 can.onappend.board(can, can.ui.display, "board", msg)
             }, true)
         },
+        translate: function(event, can, point) {
+            if (event.type == "click") {
+                if (point.length == 1) {
+                    var target = can.group
+                    can._temp = {
+                        x: target.Val("translate_x"),
+                        y: target.Val("translate_y"),
+                        target: target,
+                    }
+                    return
+                }
+
+                var target = can._temp.target
+                var x = target.Val("translate_x") + point[1].x - point[0].x
+                var y = target.Val("translate_y") + point[1].y - point[0].y
+                target.Value("transform", "translate("+x+","+y+") scale(1)")
+                target.Value("translate_x", x)
+                target.Value("translate_y", y)
+                console.log(x, y)
+                can.point = []
+                return
+            }
+
+            if (point.length > 1) {
+                var shape = "line"
+                var figure = can.onfigure[shape]
+                var data = figure.draw && figure.draw(event, can, point)
+                var obj = data && can.onfigure._push(can, data, figure.data.name||shape, can.group||can.svg)
+                return obj
+            }
+        },
         draw: function(event, can, point) {
             var shape = can.Action("shape")
             var figure = can.onfigure[shape]
@@ -661,6 +694,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "",
     _point: function(event, can) {
         var p = can.svg.getBoundingClientRect()
         var point = {x: event.clientX-p.x, y: event.clientY-p.y}
+        if (can.Action("mode") == "view") { return point }
         point.x = point.x - point.x % parseInt(can.Action("grid"))
         point.y = point.y - point.y % parseInt(can.Action("grid"))
         return point
@@ -745,7 +779,7 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑",
     },
     "编辑": function(event, can) { var target = event.target
         var figure = can.onfigure._get(can, target)
-        can.user.input(event, can, can.core.List(["x", "y"].concat(figure.data.copy||[]), function(item) {
+        can.user.input(event, can, can.core.List(["x", "y", "transform", "translate_x", "translate_y"].concat(figure.data.copy||[]), function(item) {
             return {_input: "text", name: item, value: target.Value(item)}
         }), function(event, cmd, meta, list) {
             can.core.Item(meta, function(key, value) {
@@ -779,7 +813,10 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑",
 Volcanos("onexport", {help: "导出数据", list: ["point", "group", "target", "zone", "type", "name", "keys"],
     file: function(can, svg) {
         return ['<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg" text-anchor="middle" dominant-baseline="middle"'].concat(
-            svg? can.core.List(["count", "width", "height", "font-size", "stroke-width", "stroke", "fill"], function(item) {
+            svg? can.core.List([
+                "count", "width", "height", "font-size", "stroke-width", "stroke", "fill",
+                "transform", "translate_x", "translate_y",
+            ], function(item) {
                 return svg.Value(item)? ' ' + item + '="' + svg.Value(item) + '"': ""
             }): [" width=600 height=200 "]).concat(['>', svg? svg.innerHTML: "", "</svg>"]).join("")
     },

plugin/story/spide.js

@@ -0,0 +1,141 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    _init: function(can, msg, list, cb, target) { can._output.innerHTML = ""
+        if (msg.Option("_display") == "table") {
+            can.onappend.table(can, can._target, "table", msg)
+            return typeof cb == "function" && cb(msg)
+        }
+        can.ui = can.page.Append(can, can._output, [{view: "content"}, {view: "display"}])
+
+        can.onappend._init(can, {name: "draw", help: "绘图", inputs: [
+                {type: "text", name: "path", value: "hi.svg"},
+                {type: "button", name: "查看", value: "auto"},
+            ], index: "web.wiki.draw.draw", feature: {display: "/plugin/local/wiki/draw.js"}}
+        , Volcanos.meta.libs.concat(["/plugin/state.js"]), function(sub) {
+            can.page.Modify(can, sub._legend, {style: {display: "none"}})
+            can.page.Modify(can, sub._option, {style: {display: "none"}})
+            can.page.Modify(can, sub._action, {style: {display: "none"}})
+            can.page.Modify(can, sub._status, {style: {display: "none"}})
+            sub.run = function(event, cmds, cb, silent) {
+                typeof cb == "function" && cb(can.request(event))
+                can.Timer(100, function() {
+                    can.sub = sub._outputs[0]
+                    can.msg = msg, can.data = msg.Table()
+                    can.Action("height", "400")
+                    can.Action("speed", "100")
+                    can.onaction["横向"](event, can)
+
+                    can.Timer(100, function() {
+                        can.core.Next(["base", "base/mdb", "base/log", "base/gdb", "base/ctx", "base/cli", "LICENSE"], function(value, next) {
+                            can._tree[value].view.scrollIntoView()
+                            can._tree[value].view.onclick()
+                            can.Timer(500, next)
+                        })
+                    })
+                })
+            }
+        }, can.ui.content)
+    },
+})
+Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", "横向", "纵向"], ["height", "100", "200", "400", "600"], ["speed", "10", "50", "100"]],
+    "编辑": function(event, can) {
+        var hide = can.sub._action.style.display == "none"
+        can.page.Modify(can, can.sub._action, {style: {display: hide? "": "none"}})
+        can.page.Modify(can, can.sub._status, {style: {display: hide? "": "none"}})
+    },
+    "清空": function(event, can) {
+        can.sub.svg.innerHTML = ""
+    },
+    view: function(event, can, cmd, value) {
+        can.onaction[value](event, can)
+    },
+    height: function(event, can, cmd) {
+        can.onaction[can.Action("view")](event, can)
+    },
+
+    _tree: function(can, msg) { var list = {}
+        msg.Table(function(value, index) {
+            can.core.List(value.path.split("/"), function(item, index, array) {
+                var last = array.slice(0, index).join("/") || ""
+                var name = array.slice(0, index+1).join("/")
+                list[last] = list[last] || {name: last, list: []}
+                if (!item || list[name]) { return }
+                list[last].list.push(list[name] = {hide: true, name: item+(index==array.length-1? "": "/"), last: last, list: []})
+            })
+        })
+        return list
+    },
+    _height: function(can, tree) {
+        if (tree.hide) { return tree.height = 1 }
+
+        if (tree.list.length == 0) {
+            return tree.height = 1
+        }
+
+        var height = 0
+        can.core.List(tree.list, function(item) {
+            height += can.onaction._height(can, item)
+        })
+        return tree.height = height
+    },
+    _draw: function(can, tree, x, y) { var sub = can.sub, name = tree.name || can.Option("name")
+        tree.view = sub.onimport.draw({}, sub, {
+            shape: "text", point: [{x: x, y: y+tree.height*30/2}], style: {inner: name, "text-anchor": "start", "stroke-width": 1, fill: "yellow"},
+        })
+        tree.view.onclick = function(event) {
+            sub.svg.innerHTML = ""
+            tree.hide = !tree.hide
+            can.onaction["横向"](event, can)
+            if (!event) {return}
+            event.stopPropagation()
+            event.preventDefault()
+        }
+        tree.view.onmouseenter = function(event) {
+            can.page.Remove(can, can.pos)
+            can.pos = sub.onimport.draw({}, sub, {
+                shape: "rect", point: [{x: x, y: y+tree.height*30/2-15}, {
+                    x: x+name.length*16,
+                    y: y+tree.height*30/2+15,
+                }], style: {"stroke": "red", "stroke-width": 1, fill: "none"},
+            })
+            event.stopPropagation()
+            event.preventDefault()
+        }
+
+        if (tree.hide) { return }
+        var offset = 0
+        can.core.List(tree.list, function(item) {
+            function line(p0, p1) {
+                return "M "+p0.x+","+p0.y+" Q "+(p0.x+(p1.x-p0.x)/3)+","+p0.y+" "+(p0.x+p1.x)/2+","+(p0.y+p1.y)/2+" T "+p1.x+","+p1.y
+            }
+
+            sub.onimport.draw({}, sub, {
+                // shape: "line", point: [
+                //     {x: x+name.length*16-10, y: y+tree.height*30/2},
+                //     {x: x+name.length*16+40, y: y+offset+item.height*30/2},
+                // ], style: {inner: name, "text-anchor": "start", stroke: "cyan", "stroke-width": 1},
+                shape: "path", point: [], style: {
+                    fill: "none",
+                    stroke: "cyan", "stroke-width": 1, d: line(
+                        {x: x+name.length*16-10, y: y+tree.height*30/2},
+                        {x: x+name.length*16+40, y: y+offset+item.height*30/2}
+                    ), 
+                },
+            })
+            can.onaction._draw(can, item, x+name.length*20+20, y+offset)
+            offset += item.height*30
+        })
+    },
+
+    "横向": function(event, can) { var sub = can.sub
+        can._tree = can._tree || can.onaction._tree(can, can._msg)
+        can.onaction._height(can, can._tree[""])
+        sub.svg.Val("height", can._tree[""].height*30)
+        can.onaction._draw(can, can._tree[""], 0, 0)
+    },
+    "纵向": function(event, can) {
+    },
+})
+Volcanos("onchoice", {help: "组件交互", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: ["date", "begin", "add", "del", "close", "note"]})
+

plugin/story/trend.js

@@ -1,45 +1,51 @@
 Volcanos("onimport", {help: "导入数据", list: [],
-    _init: function(can, msg, list, cb, target) { can._output.innerHTML = "";
+    _init: function(can, msg, list, cb, target) { can._output.innerHTML = ""
         if (msg.Option("_display") == "table") {
-            var table = can.page.AppendTable(can, can._output, msg, msg.append, function(event, value, key, index, tr, td) {
+            can.onappend.table(can, can._target, "table", msg)
-                can.page.Select(can, can._option, "input.args", function(input) { if (input.name == key) { var data = input.dataset || {}
+            return typeof cb == "function" && cb(msg)
-                    input.value = value
-                    if (data.action == "auto") {
-                        can.run(event, [], function(msg) {})
-                    }
-                } })
-            })
-            return typeof cb == "function" && cb(msg);
         }
+        can.ui = can.page.Append(can, can._output, [{view: "content"}, {view: "display"}])
 
-
+        can.onappend._init(can, {name: "draw", help: "绘图", inputs: [
-        can.ui = can.page.Append(can, target, [{view: "action"}, {view: "output"}, {view: "status"}, {view: "total"}, {
+                {type: "text", name: "path", value: "hi.svg"},
-            view: "display", style: {position: "absolute", "white-space": "pre", color: "yellow"}, onclick: function(event) {
+                {type: "button", name: "查看", value: "auto"},
-                can.page.ClassList.add(can, can.ui.display, "hidden")
+            ], index: "web.wiki.draw.draw", feature: {display: "/plugin/local/wiki/draw.js"}}
-            },
+        , Volcanos.meta.libs.concat(["/plugin/state.js"]), function(sub) {
-        }])
+            can.page.Modify(can, sub._legend, {style: {display: "none"}})
-        can.data = msg.Table()
+            can.page.Modify(can, sub._option, {style: {display: "none"}})
-        can.page.ClassList.add(can, can.ui.total, "status")
+            can.page.Modify(can, sub._action, {style: {display: "none"}})
-
+            can.page.Modify(can, sub._status, {style: {display: "none"}})
-        return
+            sub.run = function(event, cmds, cb, silent) {
-        can.sub = can.Output(can, {}, "/plugin/local/wiki/draw", can.request({}), function() {
+                typeof cb == "function" && cb(can.request(event))
-            can.Action("width", 600)
+                can.Timer(100, function() {
-            can.onaction["编辑"]({}, can)
+                    can.sub = sub._outputs[0]
-            can.onaction["股价图"]({}, can)
+                    can.msg = msg, can.data = msg.Table()
-        }, can.ui.output, can.ui.action, can._option, can.ui.status)
+                    can.Action("height", "400")
+                    can.Action("speed", "100")
+                    can.onaction["股价图"](event, can)
+                })
+            }
+        }, can.ui.content)
     },
 })
-Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价图", "趋势", "比例", ["width", "200", "400", "600", "800", "1000"], ["height", "200", "400", "600"], "表格"],
+Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", "股价图", "趋势图", "数据源"], ["height", "100", "200", "400", "600"], ["speed", "10", "50", "100"]],
-    "编辑": function(event, can, value, cmd, target) {
+    "编辑": function(event, can) {
-        can.page.ClassList.neg(can, can.ui.action, "hidden")
+        var hide = can.sub._action.style.display == "none"
-        can.page.ClassList.neg(can, can.ui.status, "hidden")
+        can.page.Modify(can, can.sub._action, {style: {display: hide? "": "none"}})
+        can.page.Modify(can, can.sub._status, {style: {display: hide? "": "none"}})
     },
-    "清空": function(event, can, value, cmd, target) {
+    "清空": function(event, can) {
         can.sub.svg.innerHTML = ""
     },
-    "股价图": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
+    view: function(event, can, cmd, value) {
-        if (!can.list) {
+        can.onaction[value](event, can)
-            var count = 0, add = 0, del = 0, max = 0
+    },
+    height: function(event, can, cmd) {
+        can.onaction[can.Action("view")](event, can)
+    },
+
+    "股价图": function(event, can) { var sub = can.sub, data = can.data
+        if (!can.list) { var count = 0, add = 0, del = 0, max = 0
             can.max = 0, can.rest = 0, can.list = can.core.List(data, function(value, index) {
                 var line = {};
                 line.note = value[can.msg.append[4]]
@@ -63,19 +69,11 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价
                 }
                 return line
             })
-
-            var begin = new Date(data[0].date)
-            var end = new Date(data[data.length-1].date)
-            var avg = parseInt((add + del) / (end - begin) * 1000 * 3600 * 24)
-            can.page.AppendStatus(can, can.ui.total, ["from", "days", "count", "avg", "max", "add", "del", "rest"], {
-                from: can.base.Time(begin).split(" ")[0], days: can.base.Duration(end-begin),
-                count: count, avg: avg, max: max, add: add, del: del, rest: can.rest,
-            })
         }
 
         var space = 10
         var view = parseInt(can.Action("height"))
-        var max = parseInt(can.Action("width"))
+        var max = parseInt(can.Conf("width"))-100
         var step = parseInt(max / can.list.length)||2
 
         var width = can.list.length * step + space * 2
@@ -84,52 +82,50 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价
         var height  = view + space * 2
         sub.svg.Val("height", height)
 
-        can.core.List(can.list, function(line, index) {
+        sub.svg.innerHTML = ""
-            sub.onimport.draw({}, sub, {
+        can.ui.display.innerHTML = ""
-                shape: "line", point: [
-                    {x: space/2+step*index+step/4, y: space/2+view-line.min/can.max*view},
-                    {x: space/2+step*index+step/4, y: space/2+view-line.max/can.max*view},
-                ], style: line.begin < line.close? {
-                    "stroke-width": 1, "stroke": "white",
-                }: {
-                    "stroke-width": 1, "stroke": "black",
-                },
-            })
 
-            var one = line.begin < line.close? sub.onimport.draw({}, sub, {
+        var i = 0; can.core.Next(can.list, function(line, next) {
-                shape: "rect", point: [
+            (function() { var index = i++
-                    {x: space/2+step*index, y: space/2+view-line.begin/can.max*view},
+                sub.onimport.draw({}, sub, {
-                    {x: space/2+step*index+step/2, y: space/2+view-line.close/can.max*view},
+                    shape: "line", point: [
-                ], style: {
+                        {x: space/2+step*index+step/4, y: space/2+view-line.min/can.max*view},
-                    "rx": 0, "ry": 0,
+                        {x: space/2+step*index+step/4, y: space/2+view-line.max/can.max*view},
-                    "stroke-width": 1, "stroke": "white", "fill": "white",
+                    ], style: line.begin < line.close? {
-                },
+                        "stroke-width": 1, "stroke": "white",
-            }): sub.onimport.draw({}, sub, {
+                    }: {
-                shape: "rect", point: [
+                        "stroke-width": 1, "stroke": "black",
-                    {x: space/2+step*index, y: space/2+view-line.close/can.max*view},
+                    },
-                    {x: space/2+step*index+step/2, y: space/2+view-line.begin/can.max*view},
+                })
-                ], style: {
-                    "rx": 0, "ry": 0,
-                    "stroke-width": 1, "stroke": "black", "fill": "black",
-                },
-            })
 
-            one.onmouseover = function(event) {
+                var one = line.begin < line.close? sub.onimport.draw({}, sub, {
-                can.page.ClassList.del(can, can.ui.display, "hidden")
+                    shape: "rect", point: [
-                can.ui.display.style.left = event.clientX+space/2+"px"
+                        {x: space/2+step*index, y: space/2+view-line.begin/can.max*view},
-                can.ui.display.style.top = event.clientY+space/2+"px"
+                        {x: space/2+step*index+step/2, y: space/2+view-line.close/can.max*view},
+                    ], style: {
+                        "rx": 0, "ry": 0,
+                        "stroke-width": 1, "stroke": "white", "fill": "white",
+                    },
+                }): sub.onimport.draw({}, sub, {
+                    shape: "rect", point: [
+                        {x: space/2+step*index, y: space/2+view-line.close/can.max*view},
+                        {x: space/2+step*index+step/2, y: space/2+view-line.begin/can.max*view},
+                    ], style: {
+                        "rx": 0, "ry": 0,
+                        "stroke-width": 1, "stroke": "black", "fill": "black",
+                    },
+                })
 
-                var msg = can.Event(event);
+                one.onmouseover = function(event) { can.Status(line) }
-                msg.Push(line, ["date", "note", "begin", "add", "del", "close"], "detail")
+
-                can.ui.display.innerHTML = ""
+                can.Timer(parseInt(can.Action("speed")), next)
-                can.page.AppendTable(can, can.ui.display, msg, msg.append)
+            })()
-            }
         })
     },
-    "趋势": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
+    "趋势图": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
         var space = 10
         var view = parseInt(can.Action("height"))
-        var max = parseInt(can.Action("width"))
+        var max = parseInt(can.Conf("width"))-100
         var step = parseInt(max / can.list.length)||2
 
         var width = can.list.length * step + space * 2
@@ -149,6 +145,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价
 
         sub.svg.Val("height", height+space*2)
 
+        sub.svg.innerHTML = ""
         can.core.List(can.msg.append, function(key, which) {
             var y = (space*2+view)*(which+1)
             sub.onimport.draw({}, sub, {
@@ -163,12 +160,12 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价
                 },
             })
 
-            can.core.List(data, function(value, index) {
+            can.core.List(data, function(line, index) {
                 var one = sub.onimport.draw({}, sub, {
                     shape: "rect",
                     point: [
                         {x: space+step*index, y: y},
-                        {x: space+step*index+step/4, y: y-parseInt(value[key])/(max[key]||1)*view}
+                        {x: space+step*index+step/4, y: y-parseInt(line[key])/(max[key]||1)*view}
                     ],
                     style: {
                         "rx": 0, "ry": 0,
@@ -176,30 +173,15 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价
                     },
                 })
 
-                one.onmouseover = function(event) {
+                one.onmouseover = function(event) { can.Status(line) }
-                    can.page.ClassList.del(can, can.ui.display, "hidden")
-                    can.ui.display.style.left = event.clientX+space/2+"px"
-                    can.ui.display.style.top = event.clientY+space/2+"px"
-
-                    var msg = can.Event(event);
-                    msg.Push(value, can.core.Item(value, function(key) {
-                        return msg[key] = [], key
-                    }), "detail")
-                    can.ui.display.innerHTML = ""
-                    can.page.AppendTable(can, can.ui.display, msg, msg.append)
-                }
             })
         })
     },
-    "表格": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
+    "数据源": function(event, can) {
-        if (!can.ui.table) {
+        can.ui.display.innerHTML = ""
-            can.ui.table = can.page.AppendTable(can, can.target, can.msg, can.msg.append)
+        can.onappend.table(can, can.ui.display, "table", can._msg)
-            can.ui.table.style.clear = "both"
-            return
-        }
-        can.page.ClassList.neg(can, can.ui.table, "hidden")
     },
 })
 Volcanos("onchoice", {help: "组件交互", list: []})
 Volcanos("ondetail", {help: "组件详情", list: []})
-Volcanos("onexport", {help: "导出数据", list: []})
+Volcanos("onexport", {help: "导出数据", list: ["date", "begin", "add", "del", "close", "note"]})