add mind.move

frame.js

@@ -259,14 +259,20 @@ var can = Volcanos("chat", {
         if (type == "inner" && (!msg.result || msg.result.length == 0)) {type = "table"}
 
         var output = Volcanos(type, {_type: "local", action: action, msg: msg, feature: feature,
+            Import: function(event, value, key) {var cb = output.onimport[key];
+                typeof cb == "function" && cb(event, output, value, key, target);
+            },
             Option: function(key, value) {
                 can.page.Select(can, can.option, "input[name="+key+"],select[name="+key+"]", function(item) {
                     value != undefined && (item.value = value), value = item.value
                 })
                 return value
             },
-            Import: function(event, value, key) {var cb = output.onimport[key];
+            Action: function(key, value) {
-                typeof cb == "function" && cb(event, output, value, key, target);
+                can.page.Select(can, can.action, "input[name="+key+"],select."+key+",select[name="+key+"]", function(item) {
+                    value != undefined && (item.value = value), value = item.value
+                })
+                return value
             },
             Status: function(event, value, key) {var cb = output.onstatus[key];
                 typeof cb == "function"? cb(event, output, value, key, can.page.Select(can, status, "div."+key)[0]): false && output.run(event, ["status", key, value], function(msg) {
@@ -274,7 +280,7 @@ var can = Volcanos("chat", {
                 }, true)
             },
             Export: function(event, value, key, index) {var cb = output.onexport[key];
-                typeof cb == "function"? cb(event, output, value, key, target): can.Report(event, value, key, index)
+                return typeof cb == "function"? cb(event, output, value, key, target): can.Report(event, value, key, index)
             },
 
             run: function(event, cmd, cb, silent) {var msg = can.Event(event);

plugin/wiki/mind.js

@@ -5,8 +5,9 @@ Volcanos("onimport", {help: "导入数据", list: [],
             table.onclick = function(event) {switch (event.target.tagName) {
                 case "TD":
                     can.onimport.which(event, table, msg.append, function(index, key) {
-                        can.Option("name", event.target.innerHTML.trim())
+                        var name = event.target.innerHTML.trim()
-                        can.run(event, [event.target.innerHTML.trim()], function(msg) {})
+                        can.Option("name", name)
+                        can.run(event, [name])
                     })
                     break
                 case "TH":
@@ -17,12 +18,19 @@ Volcanos("onimport", {help: "导入数据", list: [],
             return typeof cb == "function" && cb(msg), table;
         }
 
-        var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()]}]).code;
+        var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()||can.Export(event, null, "file")]}]).code;
-        can.page.Select(can, output, "svg", function(item) {can.svg = item, item.Value = function(key) {return item[key].baseVal.value}});
+        can.page.Select(can, output, "svg", function(svg) {can.group = can.svg = svg
-        can.page.Select(can, output, "svg *", function(item, index) {
+            can.onaction.init(event, can, msg, "init", svg);
+            can.onaction.list[1] = ["group", "svg", "add"]
+            can.page.Select(can, svg, "*", function(item, index) {
                 can.onaction.init(event, can, msg, index, item);
+                switch (item.tagName) {
+                    case "g":
+                        can.onaction.list[1].push(item.Value("class"))
+                        break
+                }
             })
-        can.point = []
+        }), can.point = [];
         return typeof cb == "function" && cb(msg), code;
     },
     which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}
@@ -34,9 +42,66 @@ Volcanos("onimport", {help: "导入数据", list: [],
     },
 })
 Volcanos("onfigure", {help: "图形绘制", list: [],
+    move: {
+        draw: function(event, can, point) {
+            if (point.length == 1) {
+                if (event.type != "click") {return}
+                // 记录图形
+                can.current = {target: event.target}
+            } else if (point.length == 2) {
+                if (event.type == "click") {return can.point = [], delete(can.current)}
+            }
+
+            var target = can.current.target
+            var figure = can.onfigure[can.current.target.tagName];
+            var move = figure.data.move || {x: "x", y: "y"}
+            if (point.length == 1) {
+                // 记录起点
+                can.current.x = parseInt(target.Value(move.x))
+                can.current.y = parseInt(target.Value(move.y))
+            } else {
+                // 移动图形
+                target.Value(move.x, can.current.x+point[1].x-point[0].x)
+                target.Value(move.y, can.current.y+point[1].y-point[0].y)
+            }
+        },
+    },
+    resize: {
+        draw: function(event, can, point) {
+            if (point.length == 1) {
+                if (event.type != "click") {return}
+                // 记录图形
+                can.current = {target: event.target}
+            } else if (point.length == 2) {
+                if (event.type == "click") {return can.point = [], delete(can.current)}
+            }
+
+            var target = can.current.target
+            var figure = can.onfigure[can.current.target.tagName];
+            var move = figure.data.move || {x: "x", y: "y"}
+            if (point.length == 1) {
+                // 记录起点
+                can.core.List(figure.data.resize, function(item) {
+                    can.current[item] = parseInt(target.Value(item))
+                })
+            } else {
+                // 绽放图形
+                figure.resize(event, can, point, can.current, target)
+            }
+        },
+    },
+    text: {
+        data: {move: {x: "x", y: "y"}}, // <text x="60" y="10">hi<text>
+        show: function(event, can, value, target) {}
+    },
     rect: {
-        data: {rx: 4, ry: 4}, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+        data: {
-        draw: function(event, can, point, color) {
+            resize: ["width", "height", "rx"],
+            move: {x: "x", y: "y"}, copy: ["width", "height", "rx", "ry"],
+            rx: 4, ry: 4,
+        }, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+        draw: function(event, can, point) {
+            if (point.length == 1) {return}
             var p0 = point[0], p1 = point[1];
             var data = {
                 "x": p0.x > p1.x? p1.x: p0.x,
@@ -46,33 +111,34 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
             }
             can.core.Item(can.onfigure.rect.data, function(key, value) {
                 data[key] = value
-            }), data.fill = color
+            })
             can.Status(event, data, "width");
             event.type == "click" && point.length == 2 && (can.point = [])
             return data;
         },
+        resize: function(event, can, point, current, target) {
+            target.Value("width", current.width + point[1].x - point[0].x)
+            target.Value("height", current.height + point[1].y - point[0].y)
+        },
         text: function(event, can, data, target) {
             data.x = target.x.baseVal.value+target.width.baseVal.value/2
             data.y = target.y.baseVal.value+target.height.baseVal.value/2
             return data
-        },
-        copy: function(event, can) {
-
         },
         show: function(event, can, value, target) {
-            return value.tagName
+            return value.parentNode.Value("class") + " " + value.tagName
                 + ": (" + value.x.baseVal.value + "," + value.y.baseVal.value+ ")"
                 + " + (" + value.width.baseVal.value + "," + value.height.baseVal.value+ ")"
         },
     },
     circle: {
-        data: {}, // <circle cx="25" cy="75" r="20"/>
+        data: {move: {x: "cx", y: "cy"}, copy: ["r"]}, // <circle cx="25" cy="75" r="20"/>
-        draw: function(event, can, point, color) {
+        draw: function(event, can, point) {
+            if (point.length == 1) {return}
             var p0 = point[0], p1 = point[1];
             var data = {
                 "cx": p0.x, "cy": p0.y,
                 "r": Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2)),
-                "fill": color,
             }
             event.type == "click" && point.length == 2 && (can.point = [])
             return data;
@@ -83,19 +149,18 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
             return data
         },
         show: function(event, can, value, target) {
-            return value.tagName
+            return value.parentNode.Value("class") + " " + value.tagName
                 + ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")"
                 + " > (" + parseInt(value.r.baseVal.value) + ")"
         },
     },
     ellipse: {
         data: {}, // <ellipse cx="75" cy="75" rx="20" ry="5"/>
-        draw: function(event, can, point, color) {
+        draw: function(event, can, point) {
             var p0 = point[0], p1 = point[1];
             var data = {
                 "cx": p0.x, "cy": p0.y,
                 "rx": Math.abs(p0.x - p1.x), "ry": Math.abs(p0.y - p1.y),
-                "fill": color,
             }
             event.type == "click" && point.length == 2 && (can.point = [])
             return data;
@@ -113,12 +178,11 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
     },
     line: {
         data: {},  // <line x1="10" x2="50" y1="110" y2="150"/>
-        draw: function(event, can, point, color) {
+        draw: function(event, can, point) {
             var p0 = point[0], p1 = point[1];
             var data = {
                 "x1": p0.x, "y1": p0.y,
                 "x2": p1.x, "y2": p1.y,
-                "stroke": color,
             }
             event.type == "click" && point.length == 2 && (can.point = [])
             return data;
@@ -136,7 +200,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
     },
     path: {
         data: {},  //  <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-        draw: function(event, can, point, color) {
+        draw: function(event, can, point) {
             var data = {
                 d: can.core.List(point, function(p, i) {
                     switch (i) {
@@ -164,7 +228,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
     },
     polyline: {
         data: {},  // <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
-        draw: function(event, can, point, color) {if (point.length < 2) {return}
+        draw: function(event, can, point) {if (point.length < 2) {return}
             var data = {
                 points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ")
             }
@@ -181,7 +245,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
     },
     polygon: {
         data: {},  // <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
-        draw: function(event, can, point, color) {if (point.length < 2) {return}
+        draw: function(event, can, point) {if (point.length < 2) {return}
             var data = {
                 points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ")
             }
@@ -198,19 +262,43 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
     },
 })
 Volcanos("onaction", {help: "组件菜单", list: ["保存",
-        ["color", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
+        ["group", "svg", "add"],
-        ["shape", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"],
+        ["stroke-width", 1, 2, 3, 4, 5],
+        ["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
+        ["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
+        ["shape", "move", "resize", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"],
     ],
     "保存": function(event, can, msg, cmd, target) {
-        can.run(event, ["action", cmd, can.Option("name"),
+        can.run(event, ["action", cmd, can.Option("name"), can.Export(event, can.svg, "file")], function() {
-            '<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg" width="'+can.svg.Value("width")+'" height="'+can.svg.Value("height")+'">',
-            can.svg.innerHTML,
-            "</svg>",
-            ], function() {
             can.user.toast("保存成功")
         }, true)
     },
-    color: function(event, can, value, cmd, target) {can.color = value},
+    group: function(event, can, value, cmd, target) {
+        switch (value) {
+            case "svg": return can.group = can.svg;
+            case "add": 
+                can.user.prompt("add group", function(name) {
+                    can.svg.append(can.group = document.createElementNS('http://www.w3.org/2000/svg', 'g'))
+                    can.group.Value("class", name)
+                    can.core.List(["stroke-width", "stroke", "fill"], function(name) {
+                        can.group.Value(name, can.Action(name))
+                    })
+                    can.page.Select(can, can.action, "select.group", function(item) {
+                        can.page.Append(can, item, [{type: "option", value: name, inner: name}]);
+                        item.value = name
+                    })
+                })
+                break
+            default:
+                can.page.Select(can, can.svg, "g."+value, function(item) {
+                    can.group = item
+                })
+        }
+        return can.group
+    },
+    "stroke-width": function(event, can, value, cmd, target) {can.group.Value(cmd, value)},
+    stroke: function(event, can, value, cmd, target) {can.group.Value(cmd, value)},
+    fill: function(event, can, value, cmd, target) {can.group.Value(cmd, value)},
     shape: function(event, can, value, cmd, target) {can.shape = value},
 
     resize: function(event, can, value, cmd, item) {var target = can.target.firstChild;
@@ -224,26 +312,24 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存",
         }), can), event.stopPropagation(), event.preventDefault()}
         item.onclick = function() {
         }
+        item.Value = function(key, value) {return value && item.setAttribute(key, value), item.getAttribute(key||"class")||""}
         return item;
     },
     push: function(event, can, msg, cmd, target) {
         var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd);
-        can.core.Item(msg, function(key, value) {rect.setAttribute(key, value)});
         target.appendChild(can.onaction.init(event, can, msg, cmd, rect));
+        can.core.Item(msg, function(key, value) {rect.Value(key, value)});
         return rect;
     },
     draw: function(event, can, point) {
         can.Status(event, null, "width");
         can.Status(event, null, "begin");
-        if (point.length == 1) {return}
         can.Status(event, point[0], "begin")
 
-        var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0]
-
         var shape = can.page.Select(can, can.action, "select.shape", function(item) {return item.value})[0]
         var figure = can.onfigure[shape];
-        var data = figure && figure.draw(event, can, point, color);
+        var data = figure && figure.draw(event, can, point);
-        return data && can.onaction.push(event, can, data, shape, can.svg)
+        return data && can.onaction.push(event, can, data, shape, can.group||can.svg)
     },
 
     onclick: function(event, can) {if (!can.svg) {return}
@@ -256,7 +342,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存",
     onmouseover: function(event, can) {
         can.Status(event, event.target, "which")
     },
-    onmousemove: function(event, can) {if (!can.svg) {return}
+    onmousemove: function(event, can) {if (!can.svg || can.point.length == 0) {return}
         var p = can.svg.getBoundingClientRect()
         var point = {x: event.clientX-p.x, y: event.clientY-p.y}
 
@@ -277,14 +363,12 @@ Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect",
         console.log("choice", cmd)
     },
 })
-Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
+Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"],
     "编辑": function(event, can, msg, index, key, cmd, target) {
         can.user.prompt("文字", function(text) {
             if (target.tagName == "text") {return target.innerHTML = text}
 
-            var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0]
+            var data = {"text-anchor": "middle", "dominant-baseline": "middle"}
-
-            var data = {"text-anchor": "middle", "dominant-baseline": "middle", "stroke": color}
             var figure = can.onfigure[target.tagName]
             figure.text(event, can, data, target)
 
@@ -296,8 +380,12 @@ Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
         }, target.Text && target.Text.innerText || "")
     },
     "复制": function(event, can, msg, index, key, cmd, target) {
-        var figure = can.onfigure[target.tagName]
+        var figure = can.onfigure[target.tagName].data
-        figure.copy(event, can, target)
+        var data = {}
+        data[figure.move.x] = parseInt(target.Value(figure.move.x))+20;
+        data[figure.move.y] = parseInt(target.Value(figure.move.y))+20;
+        can.core.List(figure.copy, function(item) {data[item] = target.Value(item)});
+        return data && can.onaction.push(event, can, data, target.tagName, can.group||can.svg)
     },
     "删除": function(event, can, msg, index, key, cmd, target) {
         can.page.Remove(can, target)
@@ -311,5 +399,11 @@ Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "w
         target.innerHTML = figure? figure.show(event, can, value, target): value.tagName;
     },
 })
-Volcanos("onexport", {help: "导出数据", list: []})
+Volcanos("onexport", {help: "导出数据", list: [],
+    file: function(event, can, svg, cmd, target) {
+        return ['<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg"'].concat(svg? can.core.List(["width", "height", "stroke-width", "stroke", "fill"], function(item) {
+            return svg.Value(item)? ' ' + item + '="' + svg.Value(item) + '"': ""
+        }): []).concat(['>', svg?svg.innerHTML:"", "</svg>"]).join("")
+    },
+})