opt draw

plugin/local/wiki/draw.js

@@ -6,19 +6,18 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
 
         // 交互数据
         can.svg = null, can.group = null
-        can.last = null, can.temp = null
+        can.point = [], can.temp = null , can.current = null
-        can.point = [], can.current = null
 
         // 加载绘图
         can.page.Modify(can, can.ui.content, msg.Result()||can.onexport.content(can))
         can.page.Select(can, can.ui.content, "svg", function(svg) {
-            can.page.Select(can, svg, "*", function(item, index) {
+            can.svg = can.group = svg, can.onimport._group(can, svg).click()
-                item.tagName == "g"? can.onimport._group(can, item): can.onimport._block(can, item)
-            })
             can.core.Item(can.onimport, function(key, value) {
                 key.indexOf("on") == 0 && (svg[key] = function(event) { value(event, can) })
             })
-            can.svg = can.group = svg, can.onimport._group(can, svg).click()
+            can.page.Select(can, svg, "*", function(item, index) {
+                item.tagName == "g"? can.onimport._group(can, item): can.onimport._block(can, item)
+            })
         })
 
         // 默认参数
@@ -27,14 +26,15 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
             "shape": "rect", "grid": "10", "go": "run",
         }, function(key, value) { can.svg.Value(key, can.Action(key, can.svg.Value(key)||value)) }) }) 
     },
-    _group: function(can, target) { can.onimport._block(can, target)
+    _group: function(can, target, name) { can.onimport._block(can, target)
-        function show(event) { can.group = target, can.ondetail["显示"](event, can)
+        function show(event) { can.group = target, can.onaction["显示"](event, can)
             can.core.List(["stroke-width", "stroke", "fill", "font-size"], function(key) {
                 can.Action(key, target.Value(key)||can.Action(key))
             })
         }
-        return can.onappend.item(can, "item", {name: target.Groups()}, show, function(event) { show(event)
+        name = name || target.Groups()
-            can.user.carte(event, can, can.ondetail, ["隐藏", "显示", "添加", "删除", "清空"])
+        return (name || target == can.svg) && can.onappend.item(can, "item", {name: name||"svg"}, show, function(event) { show(event)
+            can.user.carte(event, can, can.onaction, ["隐藏", "显示", "添加", "删除", "清空"])
         }, can.ui.project)
     },
     _block: function(can, target) {
@@ -82,7 +82,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
     },
     _figure: function(event, can, points, target) {
         can.temp && can.page.Remove(can, can.temp) && delete(can.temp)
-        can.temp = can.onaction._mode[can.Action("mode")](event, can, points, target)
+        can.temp = can.core.CallFunc([can.onaction._mode, can.Action("mode")], [event, can, points, target])
         can.point.length == 0 && delete(can.temp)
     },
     draw: function(event, can, value) {
@@ -101,6 +101,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
         can.onimport._figure(event, can, can.point = can.point.concat(point), event.target)
     },
     onmousemove: function(event, can) { var point = can.onimport._point(event, can)
+        can.page.Prepos(event, event.target)
         if (can.Action("go") == "run") { return can.page.Modify(can, event.target, {style: {cursor: ""}}) }
         if (can.Action("go") == "auto") { can.onaction._auto(can, event.target) }
         can.onimport._figure(event, can, can.point.concat(point))
@@ -122,7 +123,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
             var pid = "p"+can.svg.Val("count", can.svg.Val("count")+1)
             rect.Value("class", (rect.Value("class") + " " + rect.Value("pid", pid)).trim())
         }
-        return can.last = rect
+        return rect
     },
     _copy: function(event, can, target) {
         var figure = can.onfigure._get(can, target).data
@@ -244,7 +245,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
             this._temp = can.onfigure._push(can, {}, "g", can.group||can.svg)
 
             var rect = can.onfigure._push(can, can.onfigure.rect.draw(event, can, point), "rect", this._temp)
-            if (event.type != "click" && point.length != 2) { return }
+            if (event.type != "click" || point.length != 2) { return }
             delete(this._temp)
         },
         text: function(can, target, data) {
@@ -265,7 +266,7 @@ Volcanos("onaction", {help: "组件菜单", list: [
         ["font-size", 12, 16, 18, 24, 32],
 
         ["shape", "text", "rect", "line", "circle", "ellipse", "block"],
-        ["mode", "translate", "draw", "resize", "delete"],
+        ["mode", "draw", "resize"],
         ["grid", 1, 2, 3, 4, 5, 10, 20],
         ["go", "run", "auto", "manual"],
     ],
@@ -277,6 +278,25 @@ Volcanos("onaction", {help: "组件菜单", list: [
         }, true)
     },
     "项目": function(event, can) { can.page.Toggle(can, can.ui.project) },
+    "显示": function(event, can) { can.onmotion.show(can, {value: 100, length: 10}, null, can.group) },
+    "隐藏": function(event, can) { can.onmotion.hide(can, {value: 100, length: 10}, null, can.group) },
+    "添加": function(event, can) {
+        can.user.prompt("add group", function(name) {
+            var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+            can.group.append(group), can.onimport._group(can, group, name).click()
+            group.Value("class", name), can.core.List(["stroke-width", "stroke", "fill", "font-size"], function(name) {
+                group.Value(name, can.Action(name))
+            })
+        })
+    },
+    "删除": function(event, can) { if (can.group == can.svg) { return }
+        can.page.Remove(can, event.target)
+        can.page.Remove(can, can.group)
+        can.Action("group", "svg")
+    },
+    "清空": function(event, can) {
+        can.onmotion.clear(can, can.group), can.point = [], delete(can.temp)
+    },
 
     "font-size": function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) },
     "stroke-width": function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) },
@@ -295,8 +315,8 @@ Volcanos("onaction", {help: "组件菜单", list: [
         } else if (target == can.svg) {
             if (pos == 5) {
                 can.Action("mode", "draw")
-                can.Action("shape", "rect")
+                can.Action("shape", "block")
-                can.page.Modify(can, can.svg, {style: {cursor: "crosshair"}})
+                can.page.Modify(can, target, {style: {cursor: "crosshair"}})
             } else {
                 can.Action("mode", "resize")
             }
@@ -313,43 +333,6 @@ Volcanos("onaction", {help: "组件菜单", list: [
         }
     },
     _mode: {
-        run: function(event, can) { var target = event.target
-            event.type == "click" && target.Value("type") && can.run(event, ["action", "run", target.Value("zone"), target.Value("type"), target.Value("name"), target.Value("text")], function(msg) {
-                can.onappend.table(can, msg, function() {}, can.ui.display)
-                can.onappend.board(can, msg.Result(), can.ui.display)
-            }, 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]
@@ -399,37 +382,15 @@ Volcanos("onaction", {help: "组件菜单", list: [
                 })
             })
         },
-        delete: function(event, can, point) {
+        run: function(event, can) { var target = event.target
-            can.point = [], event.target != can.svg && can.page.Remove(can, event.target)
+            event.type == "click" && target.Value("type") && can.run(event, ["action", "run", target.Value("zone"), target.Value("type"), target.Value("name"), target.Value("text")], function(msg) {
+                can.onappend.table(can, msg, function() {}, can.ui.display)
+                can.onappend.board(can, msg.Result(), can.ui.display)
+            }, true)
         },
     },
 })
 Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", "删除"],
-    "显示": function(event, can) { can.onmotion.show(can, 10, null, event.target) },
-    "隐藏": function(event, can) { can.onmotion.show(can, {value:100, length: 10}, null, event.target) },
-    "添加": function(event, can) {
-        can.user.prompt("add group", function(name) {
-            var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-            can.group.append(can.onimport._block(can, group))
-            group.Value("class", name), can.core.List(["font-size", "stroke-width", "stroke", "fill"], function(name) {
-                group.Value(name, can.Action(name))
-            })
-
-            can.onimport._group(can, group).click()
-        })
-    },
-    "清空": function(event, can) {
-        can.group.innerHTML = "", can.point = [], delete(can.temp)
-    },
-    "删除": function(event, can) { if (can.group == can.svg) { return }
-        can.page.Remove(can, event.target)
-        can.page.Remove(can, can.group), can.page.Select(can, can.action, "option[value="+can.group.Value("class")+"]", function(item) {
-            can.page.Remove(can, item)
-        })
-        can.Action("group", "svg")
-    },
-
-
     "复制": function(event, can) {
         can.onfigure._copy(event, can, event.target)
     },
@@ -452,10 +413,9 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑",
             target.Value("text", obj.Value("pid"))
         }, def)
     },
-
     "编辑": function(event, can) { var target = event.target
         var figure = can.onfigure._get(can, target)
-        can.user.input(event, can, can.core.List(["x", "y", "transform", "translate_x", "translate_y"].concat(figure.data.copy||[]), function(item) {
+        can.user.input(event, can, can.core.List(["x", "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) {
@@ -475,17 +435,16 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑",
         can.page.Remove(can, event.target)
     },
 })
-Volcanos("onexport", {help: "导出数据", list: ["分组", "图形", "坐标", "按键"],
+Volcanos("onexport", {help: "导出数据", list: ["分组", "图形", "坐标"],
     _show: function(can, target) { var figure = can.onfigure._get(can, target)
-        can.Status("分组", target.Groups() || can.group.Value("class") )
         can.Status("图形", target.tagName + " " + (figure? figure.show(can, target): ""))
+        can.Status("分组", target.Groups()||can.group.Groups()||"svg")
     },
 
     content: 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(["width", "height", "count", "grid",
                 "stroke-width", "stroke", "fill", "font-size",
-                "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/local/wiki/draw/path.js

@@ -0,0 +1,134 @@
+Volcanos("onfigure", {help: "图形绘制", list: [],
+    path: { //  <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+        data: {size: {}, copy: ["d", "name", "meta", "tt", "xx", "yy"],
+            x: function(event, can, value, cmd, target) {
+                var tt = JSON.parse(target.Value("tt")||'{"tx":0, "ty":0}')
+                if (value != undefined) {
+                    tt.tx = value-target.Val("xx")
+                    target.Value("tt", JSON.stringify(tt))
+                    target.Value("transform", "translate("+tt.tx+","+tt.ty+")")
+                }
+                return target.Val("xx")+tt.tx
+            },
+            y: function(event, can, value, cmd, target) {
+                var tt = JSON.parse(target.Value("tt")||'{"tx":0, "ty":0}')
+                if (value != undefined) {
+                    tt.ty = value-target.Val("yy")
+                    target.Value("tt", JSON.stringify(tt))
+                    target.Value("transform", "translate("+tt.tx+","+tt.ty+")")
+                }
+                return target.Val("yy")+tt.ty
+            },
+        },
+        draw: function(event, can, point, style) {
+            if (style && style.d) { return style }
+            if (point.length == 1) { can._temp = {} }
+            if (point.length < 2) {return}
+
+            if (can.keys && can.keys.length > 0) { var k;
+                k = can._temp[point.length-1] = can.keys[0]
+                switch (k.toUpperCase()) {
+                    case "C": can._temp[point.length+1] = ","
+                    case "Q": can._temp[point.length] = ","; break
+                    default:
+                }
+                can.keys = can.keys.slice(1)
+            }
+
+            var skip = 0
+            var end = false
+            var data = {
+                d: can.core.List(point, function(p, i) { var k = p.k
+                    if (i < skip) {return}
+                    switch (i) {
+                        case 0: k = "M"; break
+                        default: k = can._temp[i] || p.k || "L"; break
+                    }
+                    if (end) {return}
+
+                    k = k.toUpperCase()
+                    switch (k) {
+                        case "Z": return can.point = [], can._temp = {}, k
+                        case "L": return k+" " + p.x + " " + p.y
+                        case "M": return k+" " + p.x + " " + p.y
+                        case "H": return k+" " + p.x
+                        case "V": return k+" " + p.y
+                        case "A":
+                            switch (point.length - i) {
+                                case 1: end = true
+                                    return k+" " + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + " 0 0 0 " + p.x + " " + p.y
+                                case 2: end = true
+                                    var r = Math.sqrt(Math.pow(point[i+1].x - p.x, 2) + Math.pow(point[i+1].y - p.y, 2))
+                                    return k+" " + r + " " + r + " 0 0 0 " + p.x + " " + p.y
+                                case 3:
+                                    if (!p.done) {
+                                        var r = Math.sqrt(Math.pow(point[i+1].x - p.x, 2) + Math.pow(point[i+1].y - p.y, 2))
+                                        var temp = point[i]
+                                        p = point[i] = point[i+1]
+                                        point[i+1] = temp
+                                        var temp = can.point[i]
+                                        p = can.point[i] = can.point[i+1]
+                                        can.point[i+1] = temp
+                                        p.x = r
+                                        p.y = r
+                                        p.done = true
+                                        p.arg = " 0 0 0 "
+                                    }
+                                default:
+                                    skip = i + 2
+                                    return k+" " + p.x + " " + p.y + " 0 0 0 " + point[i+1].x + " " + point[i+1].y
+                            }
+                            break
+                        case "C":
+                            switch (point.length - i) {
+                                case 1: end = true
+                                    return k+" " + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + p.x + " " + p.y
+                                case 2: end = true
+                                    return k+" " + point[i+1].x + " " + point[i+1].y + "," + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + p.x + " " + p.y
+                                case 3:
+                                    return k+" " + point[i+1].x + " " + point[i+1].y + "," + point[i+2].x + " " + point[i+2].y + "," + p.x + " " + p.y
+                                case 4:
+                                    if (!p.done) {
+                                        var temp = point[i]
+                                        p = point[i] = point[i+1]
+                                        point[i+1] = temp
+
+                                        var temp = point[i+1]
+                                        point[i+1] = point[i+2]
+                                        point[i+2] = temp
+                                        p.done = true
+                                    }
+                                default:
+                                    return k+" " + p.x + " " + p.y
+                            }
+                        case "Q":
+                            switch (point.length - i) {
+                                case 1: end = true
+                                    return k+" " + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + p.x + " " + p.y
+                                case 2: end = true
+                                    return k+" " + point[i+1].x + " " + point[i+1].y + "," + p.x + " " + p.y
+                                case 3:
+                                    if (!p.done) {
+                                        var temp = point[i]
+                                        p = point[i] = point[i+1]
+                                        point[i+1] = temp
+                                        p.done = true
+                                    }
+                                default:
+                                    return k+" " + p.x + " " + p.y
+                            }
+                        default: return k+" " + p.x + " " + p.y
+                    }
+                }).join(" ")
+            }
+            return data
+        },
+        text: function(can, target, data) {
+            data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2
+            data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2
+            return data
+        },
+        show: function(can, target) { return target.tagName + " " + target.Value("d") },
+    },
+}, [])
+

plugin/story/spide.js

@@ -9,8 +9,8 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
         can.onappend.plugins(can, {index: "web.wiki.draw"}, function(sub) {
             sub.run = function(event, cmds, cb) {
                 typeof cb == "function" && cb(sub.request())
-
                 can.core.Timer(100, function() { can.sub = sub._outputs[0]
+                    can.sub.require(["/plugin/local/wiki/draw/path.js"], function() {
                         can.sub.svg.Value("transform", "scale("+(can.Action("scale")||1)+")")
                         sub.Action("go", "run")
 
@@ -19,6 +19,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
                             can.onaction[can.Action("view")](event, can)
                         })
                     })
+                })
             }
         })
     },

plugin/story/trend.js

@@ -6,10 +6,9 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
 
         can.onmotion.clear(can)
         can.onappend.plugins(can, {index: "web.wiki.draw"}, function(sub) {
-            sub.run = function(event, cmds, cb) {
+            sub.run = function(event, cmds, cb) { typeof cb == "function" && cb(sub.request())
-                typeof cb == "function" && cb(sub.request())
-
                 can.core.Timer(100, function() { can.sub = sub._outputs[0]
+                    can.sub.onmotion.hidden(can.sub, can.sub.ui.project)
                     can.onaction[can.Action("view")](event, can)
                     can.onlayout.resize(can, "action.resize", function(event) {
                         can.onaction[can.Action("view")](event, can)
@@ -66,7 +65,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view",
 
         var space = 10
         var view = parseInt(can.Action("height"))
-        var max = parseInt(can.Conf("width"))-120
+        var max = parseInt(can.Conf("width"))-40
         var step = parseInt(max / can.list.length)||2
         can.onmotion.clear(can, sub.svg)